昨天，我们处理了index.html，今天我们将处理subject.html 和about.html。我们将看看是否还有足够的时间来处理化学、数学等主题页面。
我将从subjects.html开始。就像以前一样，我将使用我昨天为此项目设计的自定义样板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Subjects</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.</p>
<p>Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This will serve as a good header for the page, and it looks consistent with the index page hero section.</p>
<p>Next up is the main content area: a grid of subjects, like the categories section on the home page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.</p>
<p>I'll keep the footer consistent with the rest of the site, and use the same code from index.html.</p>
<h2>
Hour 15: Building the About Page
</h2>
<p>Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - About Us</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've included a header and footer identical to the other pages. This keeps the navigation consistent.</p>
<p>For the about page, I start with a hero section, just like on the home and subject page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>The hero section includes a heading and a short paragraph to introduce the page.</p>
<p>Now, I'll add the main content section, divided into two sections: mission and values.<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This is very standard design, with some bold elements to improve the user experience, which I liked very much.</p>
<p>I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.<br>
</p>
<pre class="brush:php;toolbar:false"> <!-- <div>
<p>And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.<br>
Subjects Page<br>
About Page</p>
<p>Okay, let's get started with the subject-specific pages.</p>
<h2>
Hour 16: Setting up the Chemistry Subject Page
</h2>
<p>First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Chemistry</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.</p>
<p>Now, let's add the structure for this page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;</p>
Finally, I'll keep the same footer as all of the other pages, to keep consistency.
Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.
I wanted a design that was distinct and visually appealing. Here’s what I came up with:
: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 和网格来提高响应能力。我还添加了一些漂亮的悬停效果，使页面更具交互性。
在继续之前，让我们先解决您可能有的几个问题；
答案：我选择使用自定义属性（变量）有几个原因。首先，它们增强了可维护性和一致性。更改整个样式表的颜色变得与修改根变量的值一样简单。这比寻找特定颜色代码的每个实例要有效得多。此外，变量通过为值赋予有意义的名称来提高可读性，使代码的意图更加清晰。它还有助于主题化，并允许根据用户偏好或不同模式进行动态更改。
选择配色方案的目的是创造一种“充满活力且专业”的美感。我想要在精力充沛和值得信赖之间取得平衡。
为什么他们在一起工作得很好：
从本质上讲，明亮、现代的原色、温暖的色调和精致的深色背景的组合，以及精心挑选的文本颜色，创造了一个既具有视觉吸引力又适合专业、教育环境的调色板。
但是，这些样式仅适用于化学页面，不适用于整个网站。因此，我在 Chemistry 中创建了另一个 CSS 文件 style-main.css 来覆盖主要样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Subjects</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.</p>
<p>Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This will serve as a good header for the page, and it looks consistent with the index page hero section.</p>
<p>Next up is the main content area: a grid of subjects, like the categories section on the home page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.</p>
<p>I'll keep the footer consistent with the rest of the site, and use the same code from index.html.</p>
<h2>
Hour 15: Building the About Page
</h2>
<p>Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - About Us</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've included a header and footer identical to the other pages. This keeps the navigation consistent.</p>
<p>For the about page, I start with a hero section, just like on the home and subject page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>The hero section includes a heading and a short paragraph to introduce the page.</p>
<p>Now, I'll add the main content section, divided into two sections: mission and values.<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This is very standard design, with some bold elements to improve the user experience, which I liked very much.</p>
<p>I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.<br>
</p>
<pre class="brush:php;toolbar:false"> <!-- <div>
<p>And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.<br>
Subjects Page<br>
About Page</p>
<p>Okay, let's get started with the subject-specific pages.</p>
<h2>
Hour 16: Setting up the Chemistry Subject Page
</h2>
<p>First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Chemistry</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.</p>
<p>Now, let's add the structure for this page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;</p>
Finally, I'll keep the same footer as all of the other pages, to keep consistency.
Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.
I wanted a design that was distinct and visually appealing. Here’s what I came up with:
: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;
}
}
这个 style-main.css 文件会覆盖主 style.css 中的样式，并应用于所有页面。现在我们来谈谈 style-main.css 的必要性，有经验的开发人员可能已经理解，但对于经验不太丰富的开发人员来说；
为了避免使样式过于复杂，我决定在 Chemistry 文件夹中使用另一个样式表文件 Specific-chemistry.css。这将为主题页面设置样式，并保持其他文件整洁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Subjects</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.</p>
<p>Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This will serve as a good header for the page, and it looks consistent with the index page hero section.</p>
<p>Next up is the main content area: a grid of subjects, like the categories section on the home page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.</p>
<p>I'll keep the footer consistent with the rest of the site, and use the same code from index.html.</p>
<h2>
Hour 15: Building the About Page
</h2>
<p>Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - About Us</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've included a header and footer identical to the other pages. This keeps the navigation consistent.</p>
<p>For the about page, I start with a hero section, just like on the home and subject page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>The hero section includes a heading and a short paragraph to introduce the page.</p>
<p>Now, I'll add the main content section, divided into two sections: mission and values.<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This is very standard design, with some bold elements to improve the user experience, which I liked very much.</p>
<p>I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.<br>
</p>
<pre class="brush:php;toolbar:false"> <!-- <div>
<p>And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.<br>
Subjects Page<br>
About Page</p>
<p>Okay, let's get started with the subject-specific pages.</p>
<h2>
Hour 16: Setting up the Chemistry Subject Page
</h2>
<p>First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Chemistry</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.</p>
<p>Now, let's add the structure for this page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;</p>
Finally, I'll keep the same footer as all of the other pages, to keep consistency.
Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.
I wanted a design that was distinct and visually appealing. Here’s what I came up with:
: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;
}
}
这为三列布局提供了样式，我在 Chemistry 文件夹内的 index.html 中使用了该布局。它使页面看起来更干净、更专业。我还添加了一些针对小屏幕的响应式设计。
对于那些想要实时预览的人：
化学
由于这是一个基本页面，我觉得不需要添加 script.js
这就是今天的全部内容。我明天可能会见到你。到那时再见'
以上是我从头开始构建了终极教育网站 - 第 2 天的详细内容。更多信息请关注PHP中文网其他相关文章！
