من وب سایت آموزشی نهایی را از ابتدا ساختم – روز 2

دیروز کار کردیم index.html
و امروز روی موضوعات.html و about.html
. خواهیم دید که آیا زمان کافی برای کار روی SubjectPages خود مانند شیمی، ریاضیات و غیره داریم.
ساعت 14: ساختن صفحه موضوعات
من با شروع subjects.html
. درست مانند قبل، من از دیگ بخار سفارشی خود که دیروز برای این پروژه طراحی کردم استفاده خواهم کرد:
من ساختار اصلی را اضافه کردم، شیوه نامه را پیوند دادم و پیمایشی را اضافه کردم که ما را به صفحات دیگر می برد. هدف حفظ ثبات بین صفحات است.
حالا بیایید محتوای صفحه را اضافه کنیم. من یک بخش قهرمان مشابه آنچه در صفحه فهرست است اما با تمرکز روی موضوعات می خواهم:
class="subject-hero">
class="subject-hero-content">
Explore Subjects
Delve into our extensive collection of educational notes and answers, tailored for a diverse range of disciplines
این به عنوان یک هدر خوب برای صفحه عمل می کند و به نظر می رسد با بخش قهرمان صفحه فهرست سازگار باشد.
قسمت بعدی محتوای اصلی است: شبکه ای از موضوعات، مانند بخش دسته ها در صفحه اصلی:
class="subject-list">
این شبکه تمام موضوعات را نمایش می دهد و کاوش را برای کاربر آسان می کند و همچنین با طرح صفحه اصلی سازگار است.
من فوتر را با بقیه سایت مطابقت می دهم و از همان کد index.html استفاده می کنم.
ساعت 15: ساخت صفحه درباره
حالا بیایید به ادامه مطلب برویم about.html
. من طبق معمول با همان HTML boilerplate شروع می کنم:
من یک هدر و پاورقی مشابه سایر صفحات قرار داده ام. این ناوبری را ثابت نگه می دارد.
برای صفحه درباره، من با بخش قهرمان شروع می کنم، درست مانند صفحه اصلی و موضوع:
class="about-hero">
class="about-hero-content">
About Neuron IQ
Learn about our vision, mission, and the team behind providing quality education for everyone.
بخش قهرمان شامل یک عنوان و یک پاراگراف کوتاه برای معرفی صفحه است.
اکنون، بخش محتوای اصلی را اضافه می کنم که به دو بخش تقسیم می شود: ماموریت و ارزش.
class="about-content">
class="about-container">
Our Mission
At Neuron IQ, our mission is to democratize education by providing high-quality, accessible educational resources to learners worldwide. We are dedicated to creating a platform that not only supports academic success but also fosters a lifelong love of learning.
class="about-container">
Our Values
Quality: We are committed to providing meticulously crafted notes and answers.
Accessibility: We aim to make educational materials readily available to all learners.
Innovation: We continuously seek new ways to improve the learning experience.
Impact: We strive to empower students and educators through our resources.
این طراحی بسیار استاندارد است، با برخی از عناصر جسورانه برای بهبود تجربه کاربر، که من بسیار دوست داشتم.
من در ابتدا قصد داشتم یک بخش تیمی را در نظر بگیرم، اما فعلاً تصمیم گرفتم آن را حذف کنم. ممکن است بعداً وقتی اطلاعات بیشتری داشته باشم آن را اضافه کنم.
و این هر دو را کامل می کند subjects.html
و about.html
در حال حاضر، و صفحات اصلی انجام شده است! برای کسانی که تعجب می کنند، صفحات ما در پایان روز اینگونه به نظر می رسند.
صفحه موضوعات
درباره صفحه
خوب، بیایید با صفحات موضوعی خاص شروع کنیم.
ساعت شانزدهم: تنظیم صفحه موضوع شیمی
ابتدا یک پوشه ایجاد کردم \Chemistry
. سپس، در داخل این پوشه، من ایجاد کردم index.html
فایل
این صفحه، مانند سایرین، با ساختار اصلی HTML من، با پیوندهای پیمایش به صفحات اصلی ما شروع می شود (/index.html
، /subjects.html
، و /about.html
) و همچنین پیوندی به شیوه نامه های اصلی.
حالا بیایید ساختار این صفحه را اضافه کنیم:
این یک طرح سه ستونی را با یک لیست مقاله در سمت چپ، موضوعات اصلی در مرکز، و یک لیست موضوع دیگر در سمت راست تنظیم می کند. این همه در داخل است .chemistry-page
بخش قبل از حرکت، اجازه دهید به چند سوالی که ممکن است داشته باشید بپردازیم.
- بعضی ها
href
مقادیر “1.html”، “organic.html” و برخی فقط “#” هستند. پاسخ: برای لینک هایی که آماده هستند از «1.html»، «organic.html» و … استفاده کردم. “#” یک مکان نگهدار برای صفحاتی است که هنوز توسعه نیافته اند. این ساختار را ثابت و از نظر بصری کامل نگه میدارد، به من امکان میدهد ببینم سایت نهایی چگونه به نظر میرسد، در حالی که نشان میدهد که محتوا هنوز در دسترس نیست.
در نهایت، برای حفظ ثبات، همان پاورقی را مانند سایر صفحات نگه می دارم.
ساعت 17: شکل دادن به صفحه شیمی
اکنون، من باید این صفحه شیمی را استایل کنم. من با ایجاد یک فایل جدید در پوشه Chemistry شروع کردم، style.css
.
من طرحی می خواستم که متمایز و از نظر بصری جذاب باشد. این چیزی است که من به آن رسیدم:
:root {
--primary-color: #00bcd4; /* Vibrant yet professional */
--secondary-color: #ffc107; /* Energetic accent */
--background-dark: #1a1a1a; /* Deeper, richer dark */
--background-light: #2e2e2e; /* Slightly lighter for contrast */
--text-light: #f0f0f0; /* Softer off-white */
--text-accent: #ffffff; /* Pure white for emphasis */
--border-radius: 12px; /* More pronounced curves */
--shadow-light: rgba(0, 0, 0, 0.15); /* Subtle shadow */
--transition-duration: 0.3s;
--font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-family-heading: 'Montserrat', sans-serif;
}
body {
font-family: var(--font-family-base);
background-color: var(--background-dark);
color: var(--text-light);
line-height: 1.6;
-webkit-font-smoothing: antialiased; /* Smoother fonts for webkit browsers */
-moz-osx-font-smoothing: grayscale; /* Smoother fonts for Firefox */
}
.chemistry-page {
display: flex;
max-width: 1200px;
margin: 60px auto; /* Increased top/bottom margin */
padding: 30px; /* Increased padding for spaciousness */
background: linear-gradient(145deg, var(--background-dark), #111111); /* Subtle gradient */
border-radius: var(--border-radius);
box-shadow: 0 8px 16px var(--shadow-light); /* More pronounced shadow */
}
.article-list, .topic-list {
flex: 1;
padding: 30px; /* Increased padding */
background: var(--background-light);
border-radius: var(--border-radius);
box-shadow: 0 4px 8px var(--shadow-light);
margin: 0 15px; /* Increased horizontal margin */
transition: transform var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}
.article-list:hover, .topic-list:hover {
transform: translateY(-5px); /* Gentle lift on hover */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.article-list h2, .topic-list h2 {
margin-bottom: 25px; /* Increased bottom margin */
text-align: center;
font-family: var(--font-family-heading);
font-size: 1.8rem; /* Slightly larger */
color: var(--text-accent);
position: relative; /* For pseudo-element underline */
padding-bottom: 10px;
}
.article-list h2::after, .topic-list h2::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 60px;
height: 3px;
background-color: var(--primary-color);
transform: translateX(-50%);
}
.article-list ul, .topic-list ul {
list-style: none;
padding: 0;
}
.article-list ul li, .topic-list ul li {
margin-bottom: 15px; /* Increased bottom margin */
border-bottom: 1px solid #444; /* Subtle divider */
padding-bottom: 10px;
}
.article-list ul li:last-child, .topic-list ul li:last-child {
border-bottom: none; /* Remove border from the last item */
padding-bottom: 0;
margin-bottom: 0;
}
.article-list ul li a, .topic-list ul li a {
display: block;
padding: 15px; /* Increased padding */
text-decoration: none;
color: var(--text-light);
background: linear-gradient(to bottom right, #333, #222); /* Subtle gradient */
border-radius: calc(var(--border-radius) / 2); /* Smaller radius for list items */
transition: background var(--transition-duration), transform var(--transition-duration);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow to list items */
}
.article-list ul li a:hover, .topic-list ul li a:hover {
background: linear-gradient(to bottom right, var(--primary-color), #0097a7); /* More vibrant hover */
transform: scale(1.02); /* Gentle scale on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
color: var(--text-accent);
}
.content-grid {
flex: 3;
padding: 30px; /* Increased padding */
margin: 0 15px; /* Increased horizontal margin */
}
.topic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider min-width */
gap: 25px; /* Increased gap */
}
.topic-grid a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-light);
background: var(--background-light);
padding: 30px; /* Increased padding */
border-radius: var(--border-radius);
box-shadow: 0 4px 8px var(--shadow-light);
transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}
.topic-grid a img {
width: 60px; /* Larger icon */
height: 60px; /* Larger icon */
margin-bottom: 15px; /* Increased bottom margin */
filter: brightness(1.1); /* Slightly brighten the icons */
transition: transform var(--transition-duration);
}
.topic-grid a:hover {
transform: scale(1.05); /* Gentle scale on hover */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.topic-grid a:hover img {
transform: scale(1.1); /* Scale the icon on hover */
}
/* Responsive adjustments with smoother transitions */
@media (max-width: 768px) {
.chemistry-page {
flex-direction: column;
margin: 30px auto; /* Adjust margins for smaller screens */
padding: 20px;
}
.article-list, .topic-list, .content-grid {
margin: 15px 0;
padding: 20px;
}
.topic-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust for smaller screens */
}
}
/* Further refinements for smaller screens */
@media (max-width: 576px) {
.chemistry-page {
padding: 15px;
}
.article-list, .topic-list, .content-grid {
padding: 15px;
}
.article-list h2, .topic-list h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}
.topic-grid {
gap: 15px;
}
.topic-grid a {
padding: 20px;
}
.topic-grid a img {
width: 40px;
height: 40px;
margin-bottom: 10px;
}
}
من یک طراحی پر جنب و جوش و مدرن، با تم تیره، و شیب های ظریف اضافه کرده ام. این طرح از flexbox و grid برای پاسخگویی استفاده می کند. من همچنین چند افکت شناور زیبا را برای تعامل بیشتر صفحه اضافه کردم.
قبل از حرکت، اجازه دهید به چند سوالی که ممکن است داشته باشید بپردازیم.
- چرا به جای نوشتن مستقیم مقادیر رنگ در قوانین، از ویژگی های سفارشی (متغیرها) استفاده کنیم؟
- طرح رنگ (پر جنب و جوش و در عین حال حرفه ای) چگونه انتخاب شد؟ و چه چیزی باعث می شود این رنگ ها به خوبی با هم کار کنند؟
پاسخ: من به چند دلیل استفاده از ویژگی های سفارشی (متغیرها) را انتخاب کردم. در درجه اول، آنها قابلیت نگهداری و ثبات را افزایش می دهند. تغییر رنگ در کل شیوه نامه به سادگی تغییر مقدار متغیر در ریشه می شود. این بسیار کارآمدتر از کشف هر نمونه از یک کد رنگ خاص است. بهعلاوه، متغیرها با دادن نامهای معنیدار به مقادیر، خوانایی را بهبود میبخشند و هدف کد را واضحتر میکنند. همچنین قالب بندی را تسهیل می کند و امکان تغییرات پویا را بر اساس ترجیحات کاربر یا حالت های مختلف فراهم می کند.
طرح رنگ با هدف ایجاد زیبایی شناسی “پر جنب و جوش و در عین حال حرفه ای” انتخاب شده است. من می خواستم بین پرانرژی و قابل اعتماد تعادل برقرار کنم.
-
--primary-color: #00bcd4
(فیروزه ای پر جنب و جوش): این یک رنگ روشن و جذاب است که حس مدرنیته و نوآوری را برمی انگیزد و برای یک موضوع مرتبط با علم مناسب است. بیش از حد اشباع نشده است و درجه ای از حرفه ای بودن را حفظ می کند. -
--secondary-color: #ffc107
(زرد پر انرژی): این رنگ زرد به عنوان یک لهجه مکمل عمل می کند و انرژی و خوش بینی را اضافه می کند. زرد اغلب با خلاقیت و هوش مرتبط است. - پس زمینه های تاریک (
--background-dark
،--background-light
): پس زمینه تیره پایه محکم و پایداری را فراهم می کند که به رنگ های روشن تر اجازه می دهد خودنمایی کنند. همچنین حس پیچیده ای را به شما القا می کند. - متن سبک (
--text-light
،--text-accent
): متن سفید مایل به سفید و خالص روی پسزمینه تیره، خوانایی بالا و ظاهری تمیز و مدرن را تضمین میکند.
چرا آنها با هم خوب کار می کنند:
- کنتراست مکمل: فیروزهای و زرد رنگهای تقریبا مکمل یکدیگر هستند و کنتراست بصری جذابی ایجاد میکنند که پویا است اما ناخوشایند نیست.
- هارمونی آنالوگ: سایه های تیره پس زمینه مشابه هستند، به این معنی که در چرخه رنگ به یکدیگر نزدیک هستند و حس هماهنگ و منسجمی را ایجاد می کنند.
- تضاد ارزش: تفاوت قابل توجه در مقدار (روشنی / تاریکی) بین متن و پس زمینه خوانایی عالی را تضمین می کند.
- اشباع متعادل: رنگ های اصلی و ثانویه پر جنب و جوش هستند اما بیش از حد اشباع نشده اند و از ظاهری کودکانه یا طاقت فرسا اجتناب می کنند. آنها با پس زمینه خاموش تر متعادل می شوند.
اساساً، ترکیب رنگ اصلی روشن و مدرن، لهجه گرم، و پسزمینه تیره پیچیده، همراه با رنگهای متنی که با دقت انتخاب شدهاند، پالتی را ایجاد میکنند که هم از نظر بصری جذاب و هم برای یک زمینه حرفهای و آموزشی مناسب است.
با این حال، این سبک ها فقط برای صفحه شیمی و نه برای کل وب سایت کار می کنند. بنابراین، من یک فایل CSS دیگر ایجاد کردم، style-main.css
داخل \Chemistry
برای نادیده گرفتن سبک های اصلی
/* ==================== Root Variables for Global Styling ==================== */
:root {
--primary-bg: #1a1a1a;
--secondary-bg: #2e2e2e; /* Slightly lighter for better definition */
--text-color-light: #f0f0f0; /* Softer white for better readability */
--accent-color: #64b5f6;
--accent-hover-color: #42a5f5;
--box-shadow-color: rgba(0, 0, 0, 0.15); /* Darker shadow for better contrast on dark backgrounds */
--border-radius-base: 10px; /* Slightly more rounded */
--transition-duration: 0.35s; /* Fine-tuned transition speed */
--spacing-large: 50px; /* Increased spacing for a more open feel */
--spacing-medium: 25px;
--spacing-small: 12px;
--font-family-base: 'Inter', sans-serif; /* A modern and versatile font */
--font-family-heading: 'Poppins', sans-serif;
}
/* ==================== Base Styles ==================== */
body {
font-family: var(--font-family-base);
margin: 0;
padding: 0;
line-height: 1.7; /* Improved line height for readability */
color: var(--text-color-light);
background-color: var(--primary-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth; /* Enable smooth scrolling */
}
/* ==================== Typography ==================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
font-weight: 600;
line-height: 1.3;
margin-bottom: var(--spacing-small);
}
/* ==================== Selection Styling ==================== */
::selection {
background-color: var(--accent-color);
color: var(--secondary-bg);
}
/* ==================== Scrollbar Styling (Webkit Browsers) ==================== */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--secondary-bg);
}
::-webkit-scrollbar-thumb {
background-color: var(--accent-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--accent-hover-color);
}
/* ==================== Header & Navigation ==================== */
header {
background: rgba(var(--secondary-bg-rgb, 46, 46, 46), 0.95); /* Use RGB for transparency */
backdrop-filter: blur(10px); /* Apply a blur to the background */
padding: 1.2rem 0;
box-shadow: 0 3px 6px var(--box-shadow-color);
position: sticky;
top: 0;
z-index: 100;
transition: box-shadow var(--transition-duration);
}
/* Extract RGB values from the variable */
@supports not (backdrop-filter: blur(10px)) {
header {
background-color: var(--secondary-bg); /* Fallback for browsers that don't support backdrop-filter */
}
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-medium);
}
.logo {
font-size: 2rem;
font-weight: 700;
color: var(--accent-color);
text-shadow: 0 0 5px rgba(var(--accent-color-rgb, 100, 181, 246), 0.8); /* Add a subtle glow */
transition: transform var(--transition-duration);
}
.logo:hover {
transform: scale(1.05);
}
/* Extract RGB values from the variable */
:root {
--secondary-bg-rgb: 46, 46, 46;
--accent-color-rgb: 100, 181, 246;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-left: var(--spacing-medium);
}
nav ul li a {
text-decoration: none;
color: var(--text-color-light);
position: relative; /* For underline animation */
padding-bottom: 5px; /* Space for underline */
transition: color var(--transition-duration);
}
nav ul li a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: var(--accent-color);
transition: width var(--transition-duration);
}
nav ul li a:hover {
color: var(--accent-color);
}
nav ul li a:hover::after {
width: 100%;
}
/* ==================== Sections (General) ==================== */
section {
max-width: 1300px; /* Slightly wider for content */
margin: var(--spacing-large) auto;
padding: var(--spacing-medium);
text-align: center;
}
/* ==================== Hero Section ==================== */
.hero {
background: linear-gradient(135deg, #2c3e50, #1a237e);
padding: 100px var(--spacing-medium); /* Increased padding */
color: var(--text-color-light);
overflow: hidden; /* Prevent animation overflow */
position: relative;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('path-to-your-abstract-background-image.jpg'); /* Replace with your image */
background-size: cover;
background-position: center;
opacity: 0.1; /* Subtle background texture */
pointer-events: none; /* Make it non-interactive */
}
.hero-content {
max-width: 800px; /* Wider content area */
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
transition: opacity 1s cubic-bezier(0.215, 0.610, 0.355, 1), transform 1s cubic-bezier(0.215, 0.610, 0.355, 1); /* More natural easing */
position: relative; /* Ensure content is above the background */
z-index: 1;
}
.hero.loaded .hero-content {
opacity: 1;
transform: translateY(0);
}
.hero-content h1,
.hero-content p,
.hero-content .btn {
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy effect */
}
.hero.loaded .hero-content h1 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
}
.hero.loaded .hero-content p {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}
.hero.loaded .hero-content .btn {
opacity: 1;
transform: translateY(0);
transition-delay: 0.6s;
}
.hero h1 {
font-size: 3rem; /* Larger heading */
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero p {
font-size: 1.3rem;
margin-bottom: 30px;
color: rgba(var(--text-color-light-rgb, 240, 240, 240), 0.9); /* Slightly transparent text */
}
/* Extract RGB values from the variable */
:root {
--text-color-light-rgb: 240, 240, 240;
}
/* ==================== Buttons ==================== */
.btn {
display: inline-block;
background: var(--accent-color);
color: var(--secondary-bg);
padding: 14px 30px; /* Slightly larger button */
text-decoration: none;
border-radius: 7px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background var(--transition-duration), transform var(--transition-duration), box-shadow var(--transition-duration);
}
.btn:hover {
background: var(--accent-hover-color);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* ==================== Intro Grid ==================== */
.intro-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Wider intro items */
gap: var(--spacing-medium);
text-align: left;
}
.intro-grid div {
padding: var(--spacing-medium);
border-radius: var(--border-radius-base);
background: var(--secondary-bg);
box-shadow: 0 2px 4px var(--box-shadow-color);
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.intro-grid div.fade-in:nth-child(1) {
transition-delay: 0.1s;
}
.intro-grid div.fade-in:nth-child(2) {
transition-delay: 0.3s;
}
.intro-grid div.fade-in:nth-child(3) {
transition-delay: 0.5s;
}
.intro-grid div.fade-in {
opacity: 1;
transform: translateY(0);
}
.intro-grid div img {
width: 35px;
height: 35px;
margin-right: var(--spacing-small);
float: left;
filter: brightness(1.2);
}
.intro-grid div h3 {
margin-bottom: 5px;
}
/* ==================== Categories Grid ==================== */
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Slightly larger categories */
gap: var(--spacing-medium);
padding-top: var(--spacing-medium);
}
.categories-grid a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-color-light);
background: var(--secondary-bg);
padding: var(--spacing-medium);
border-radius: var(--border-radius-base);
box-shadow: 0 3px 6px var(--box-shadow-color);
transition: box-shadow var(--transition-duration), transform var(--transition-duration), opacity 0.5s ease;
opacity: 0;
transform: translateY(20px);
}
.categories-grid a:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
transform: scale(1.03);
}
.categories-grid a.fade-in:nth-child(odd) {
transition-delay: 0.2s;
}
.categories-grid a.fade-in:nth-child(even) {
transition-delay: 0.4s;
}
.categories-grid a.fade-in {
opacity: 1;
transform: translateY(0);
}
.categories-grid a img {
width: 50px;
height: 50px;
margin-bottom: var(--spacing-small);
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}
/* ==================== Testimonials ==================== */
.testimonials {
background-color: var(--secondary-bg);
padding: var(--spacing-large) var(--spacing-medium);
position: relative;
overflow: hidden;
}
.testimonial-slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
width: 100%; /* Adjusted width */
margin: var(--spacing-medium) auto;
padding-bottom: var(--spacing-medium); /* Added padding for better visual spacing */
-webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
}
.testimonial-slide {
min-width: 80%; /* Take up more space on smaller screens */
scroll-snap-align: start;
text-align: left;
padding: var(--spacing-medium);
box-sizing: border-box;
border-radius: var(--border-radius-base);
background: var(--primary-bg);
box-shadow: 0 3px 6px var(--box-shadow-color);
margin-right: var(--spacing-medium); /* Add spacing between slides */
opacity: 0.7;
transform: scale(0.95);
transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
.testimonial-slide:last-child {
margin-right: 0; /* Remove margin from the last slide */
}
.testimonial-slide.active {
opacity: 1;
transform: scale(1);
}
.testimonial-slide p:first-of-type {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: var(--spacing-small);
}
.testimonial-slide p:last-child {
margin-top: var(--spacing-small);
font-weight: 500;
text-align: right;
font-style: italic;
color: var(--accent-color);
}
.slider-buttons {
text-align: center;
margin-top: var(--spacing-medium);
}
.slider-buttons button {
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
margin: 0 var(--spacing-small);
color: #aaa;
transition: color var(--transition-duration);
}
.slider-buttons button:hover {
color: var(--text-color-light);
}
/* ==================== Latest Grid ==================== */
.latest-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Wider latest cards */
gap: var(--spacing-medium);
text-align: left;
}
.latest-card {
background: var(--secondary-bg);
padding: var(--spacing-medium);
border-radius: var(--border-radius-base);
box-shadow: 0 3px 6px var(--box-shadow-color);
transition: box-shadow var(--transition-duration), transform var(--transition-duration), opacity 0.5s ease;
opacity: 0;
transform: translateY(20px);
}
.latest-card:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
transform: translateY(-5px);
}
.latest-card.fade-in:nth-child(odd) {
transition-delay: 0.2s;
}
.latest-card.fade-in:nth-child(even) {
transition-delay: 0.4s;
}
.latest-card.fade-in {
opacity: 1;
transform: translateY(0);
}
.latest-card h3 {
margin-bottom: var(--spacing-small);
}
.latest-card p {
color: rgba(var(--text-color-light-rgb, 240, 240, 240), 0.8);
}
.latest-card a {
display: inline-block;
margin-top: var(--spacing-medium);
text-decoration: none;
color: var(--accent-color);
font-weight: 500;
transition: color var(--transition-duration);
}
.latest-card a:hover {
color: var(--accent-hover-color);
}
/* ==================== Call to Action (CTA) ==================== */
.cta {
background: linear-gradient(90deg, var(--secondary-bg), #333); /* Softer gradient */
color: #fff;
padding: 80px var(--spacing-medium);
margin-top: var(--spacing-large);
border-radius: var(--border-radius-base);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
padding-bottom: 200%;
background-color: rgba(var(--accent-color-rgb, 100, 181, 246), 0.1);
border-radius: 50%;
transform: scale(0);
transition: transform 0.6s ease-out;
}
.cta:hover::before {
transform: scale(1);
}
.cta-content```
{% endraw %}
css
{
position: relative; /* Ensure content is above the pseudo-element */
z-index: 1;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: var(--spacing-medium);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
/* ==================== Footer ==================== */
footer {
background: #111; /* Darker footer */
color: #bbb;
padding: var(--spacing-medium);
text-align: center;
}
footer ul {
list-style: none;
padding: 0;
margin: var(--spacing-small) 0;
display: flex;
justify-content: center;
}
footer ul li {
margin: 0 var(--spacing-small);
}
footer ul li a {
color: #bbb;
text-decoration: none;
transition: color var(--transition-duration), transform var(--transition-duration);
}
footer ul li a:hover {
color: var(--accent-color);
transform: translateY(-2px);
}
/* ==================== Responsive Design ==================== */
@media (max-width: 768px) {
nav {
flex-direction: column;
text-align: center;
}
nav ul {
flex-direction: column;
margin-top: var(--spacing-small);
}
nav ul li {
margin: 7px 0;
}
.intro-grid {
grid-template-columns: 1fr;
text-align: center;
}
.intro-grid div {
padding: var(--spacing-medium);
}
.intro-grid div img {
float: none;
margin-right: 0;
}
.hero {
padding: 80px var(--spacing-small);
}
.hero h1 {
font-size: 2.5rem;
}
.categories-grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.testimonial-slide {
min-width: 100%;
margin-right: 0; /* Ensure full width on smaller screens */
}
.latest-grid {
grid-template-columns: 1fr;
}
.cta {
padding: 60px var(--spacing-small);
}
.cta h2 {
font-size: 2rem;
}
}
/* ==================== Subject Page Specific Styles ==================== */
.subject-hero {
/* ... (rest of your subject page styles) ... */
background: linear-gradient(135deg, #2c3e50, #1a237e);
padding: 100px var(--spacing-medium);
color: var(--text-color-light);
}
.subject-hero-content {
max-width: 800px;
margin: 0 auto;
}
.subject-list {
margin: var(--spacing-large) auto;
}
.subject-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjusted minmax */
gap: var(--spacing-medium);
}
.subject-grid a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-color-light);
background: var(--secondary-bg);
padding: var(--spacing-medium);
border-radius: var(--border-radius-base);
box-shadow: 0 3px 6px var(--box-shadow-color);
transition: box-shadow var(--transition-duration), transform var(--transition-duration);
}
.subject-grid a:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
transform: scale(1.05);
}
.subject-grid a img {
width: 60px;
height: 60px;
margin-bottom: var(--spacing-small);
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}
/* ==================== About Page Specific Styles ==================== */
.about-hero {
/* ... (rest of your about page styles) ... */
background: linear-gradient(135deg, #2c3e50, #1a237e);
padding: 100px var(--spacing-medium);
color: var(--text-color-light);
}
.about-hero-content {
max-width: 800px;
margin: 0 auto;
}
.about-container {
margin: var(--spacing-large) auto;
max-width: 900px; /* Wider container */
text-align: left;
}
.about-container h2 {
margin-bottom: var(--spacing-medium);
position: relative;
padding-bottom: var(--spacing-small);
}
.about-container h2::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 50px;
background-color: var(--accent-color);
}
.about-team {
margin: var(--spacing-large) auto;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjusted minmax */
gap: var(--spacing-medium);
}
.team-member {
background: var(--secondary-bg);
padding: var(--spacing-medium);
border-radius: var(--border-radius-base);
box-shadow: 0 3px 6px var(--box-shadow-color);
transition: box-shadow var(--transition-duration), transform var(--transition-duration);
text-align: center;
}
.team-member:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
transform: translateY(-5px);
}
.team-member img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: var(--spacing-small);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
{% raw %}
این style-main.css
فایل سبک اصلی را لغو می کند style.css
، و در تمام صفحات اعمال می شود. حالا بیایید در مورد نیاز صحبت کنیم style-main.css
، توسعه دهندگان باتجربه، ممکن است متوجه شده باشند، اما برای توسعه دهندگان نه چندان باتجربه.
- مشکل: در حالی که
style.css
(در ریشه) پایه و اساس و شیمی خاص را فراهم می کندstyle.css
عناصر منحصر به فرد را کنترل می کند، نیاز به وجود دارد اصلاح کنید برخی از سبک های جهانی به طور خاص برای بخش شیمی تغییر مستقیم ریشهstyle.css
بر کل وب سایت تأثیر می گذارد که نامطلوب است. - راه حل:
style-main.css
برای نادیده گرفتن سبک های جهانی خاص از ریشه معرفی شده استstyle.css
فقط در صفحه شیمی. همچنین اجازه می دهد تا سبک های جدیدی را اضافه کنید که عمومی تر از سبک های خاص شیمی هستندstyle.css
اما هنوز برای کل وب سایت قابل اجرا نیست. - مثال:
- ریشه
style.css
ممکن است یک رنگ دکمه پیش فرض را تعریف کند. - در صفحه شیمی، ممکن است رنگ دکمه دیگری را بخواهید، یا بالشتک را تنظیم کنید.
-
style-main.css
حاوی قوانین CSS برای لغو رنگ و بالشتک دکمه است، اما فقط برای بخش شیمی
- ریشه
- مزایا:
- مدولاریت: تغییرات سبک را در پوشه موضوع مربوطه سازماندهی و درج می کند.
- قابلیت نگهداری: بهروزرسانی یا تغییر سبکها برای یک بخش خاص بدون تأثیرگذاری بر دیگران آسانتر است.
- ویژگی: لغوها هدفمند هستند و برای دستیابی به اثر دلخواه به انتخابگرهای پیچیده CSS نیاز ندارند.
- جلوگیری از تکرار کد: نادیده گرفتن یا اضافات رایج برای یک حوزه موضوعی را می توان در آن قرار داد
style-main.css
به جای اینکه در چندین شیوه نامه خاص موضوعی تکرار شود.
ساعت 18: طراحی صفحه شیمی خاص
برای جلوگیری از پیچیده شدن استایل ها، تصمیم گرفتم از فایل شیوه نامه دیگری استفاده کنم. specific-chemistry.css
داخل \Chemistry
پوشه این به صفحه موضوع استایل می دهد و سایر فایل ها را بدون درهم و برهم نگه می دارد.
css
.specific-chemistry-page{
display: flex;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}
.specific-chemistry-page .article-list {
flex: 1;
padding: 20px;
background: #252525;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
margin: 0 10px;
}
.specific-chemistry-page .article-list h2 {
margin-bottom: 15px;
}
.specific-chemistry-page .article-list ul {
list-style: none;
padding: 0;
}
.specific-chemistry-page .article-list ul li {
margin-bottom: 10px;
}
.specific-chemistry-page .article-list ul li a {
display: block;
padding: 10px;
text-decoration: none;
color: #e0e0e0;
background: #333;
border-radius: 5px;
transition: background 0.3s;
}
.specific-chemistry-page .article-list ul li a:hover {
background: #444;
}
.specific-chemistry-page .content-area{
flex: 3;
padding: 20px;
margin: 0 10px;
}
.specific-chemistry-page .content-area h1{
text-align: center;
}
.topic-list-grid{
background: #252525;
margin-top: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
padding: 20px;
}
.topic-list-grid h2{
text-align: center;
margin-bottom: 15px;
}
.topic-list-grid ul {
list-style: none;
padding: 0;
}
.topic-list-grid ul li{
margin-bottom: 10px;
}
.topic-list-grid ul li a {
display: block;
padding: 10px;
text-decoration: none;
color: #e0e0e0;
background: #333;
border-radius: 5px;
transition: background 0.3s;
}
.topic-list-grid ul li a:hover {
background: #444;
}
@media (max-width: 768px) {
.specific-chemistry-page {
flex-direction: column;
}
.specific-chemistry-page .article-list, .specific-chemistry-page .content-area {
margin: 10px 0;
padding: 10px;
}
}
این یک ظاهر طراحی را به طرح سه ستونی، که من در آن استفاده کردم، ارائه می دهد index.html
داخل \Chemistry
پوشه این باعث می شود صفحه بسیار تمیزتر و حرفه ای تر به نظر برسد. من همچنین طراحی واکنشگرا را برای صفحه نمایش های کوچک اضافه کرده ام.
برای کسانی که پیش نمایش زنده را می خواهند:
شیمی
از آنجایی که این یک صفحه ابتدایی بود، نیازی به اضافه کردن a احساس نکردم script.js
این همه برای امروز است. شاید فردا ببینمت تا اون موقع میبینمت