Yesterday, we worked on index.html, and today we'll work on the subjects.html and about.html. We'll see if we have enough time left to work on on our SubjectPages like Chemistry, Mathematics etc.
I'll start with subjects.html. Just like before, I'll use my custom boilerplate, which I designed yesterday for this project:
<!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;
}
}
I've added a vibrant and modern design, with a dark theme, and subtle gradients. The layout uses flexbox and grid for responsiveness. I also included some nice hover effects to make the page more interactive.
Before moving on, let's address few questions you may have;
Answer: I chose to use custom properties (variables) for several reasons. Primarily, they enhance maintainability and consistency. Changing a color across the entire stylesheet becomes as simple as modifying the variable's value at the root. This is far more efficient than hunting down every instance of a specific color code. Additionally, variables improve readability by giving meaningful names to values, making the code's intent clearer. It also facilitates theming and allows for dynamic changes based on user preferences or different modes.
The color scheme was chosen with the goal of creating a "vibrant yet professional" aesthetic. I wanted a balance between energetic and trustworthy.
Why they work well together:
Essentially, the combination of a bright, modern primary color, a warm accent, and a sophisticated dark background, along with carefully chosen text colors, creates a palette that is both visually engaging and appropriate for a professional, educational context.
However, these styles only work for the Chemistry page and not the entire website. So, I created another CSS file, style-main.css inside Chemistry to override main styles.
<!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;
}
}
This style-main.css file overrides the style in the main style.css, and applies across all pages. Now let's talk about the need for style-main.css, experienced developers, may have understood, but for the not-so experienced developers out there;
To avoid making the styles too complex, I decided to use another style-sheet file, specific-chemistry.css inside the Chemistry folder. This will style the subject page, and keep the other files clutter-free.
<!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;
}
}
This provides styling to the three-column layout, which I used in the index.html inside the Chemistry folder. It makes the page look much cleaner and more professional. I have also added some responsive design for small screens.
For those who want the live preview:
Chemistry
As this was a basic page, I did not feel the need to add a script.js
That's all for today. I may see you tomorrow. Till then see ya'
The above is the detailed content of I Built the ULTIMATE Educational Website from Scratch — Day 2. For more information, please follow other related articles on the PHP Chinese website!
Where is the login entrance for gmail email?
Introduction to the method of intercepting strings in js
Is the matcha platform formal?
What are the Linux shutdown commands?
Does Hongmeng OS count as Android?
How to solve dns resolution failure
Introduction to inarray usage
Is A5 bigger or B5 paper bigger?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
