DEV Community

Kavei Sahai
Kavei Sahai

Posted on

I Built the ULTIMATE Educational Website from Scratch — Day 2

#webdev #javascript #tutorial #programming

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.

Hour 14: Building the Subjects Page

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 class="logo">Neuron IQ</div>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="subjects.html">Subjects</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

   <!-- Content goes here -->

    <footer>
         <p>© 2025 Neuron IQ. All rights reserved.</p>
        <ul>
            <li><a href="about.html">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
        </ul>
    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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.

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:

    <section class="subject-hero">
        <div class="subject-hero-content">
             <h1>Explore Subjects</h1>
              <p>Delve into our extensive collection of educational notes and answers, tailored for a diverse range of disciplines</p>

        </div>
    </section>
Enter fullscreen mode Exit fullscreen mode

This will serve as a good header for the page, and it looks consistent with the index page hero section.

Next up is the main content area: a grid of subjects, like the categories section on the home page:

  <section class="subject-list">
           <div class="subject-grid">
              <a href="#">
                   <img src="icons/maths.png" alt="Mathematics Icon">
                     <h3>Mathematics</h3>
                     <p>Explore a variety of mathematical concepts.</p>
              </a>
               <a href="#">
                    <img src="icons/physics.png" alt="Physics Icon">
                     <h3>Physics</h3>
                      <p>Discover the fascinating world of physics.</p>
                 </a>
               <a href="/Chemistry/">
                  <img src="icons/chemistry.png" alt="Chemistry Icon">
                     <h3>Chemistry</h3>
                    <p>Study the principles of chemistry.</p>
                </a>
                <a href="#">
                    <img src="icons/biology.png" alt="Biology Icon">
                       <h3>Biology</h3>
                    <p>Uncover the intricacies of life sciences.</p>
                </a>
                <a href="#">
                    <img src="icons/programming.png" alt="Programming Icon">
                       <h3>Computer Science</h3>
                      <p>Develop coding and logical thinking skills.</p>
                </a>
                <a href="#">
                    <img src="icons/history.png" alt="History Icon">
                       <h3>History</h3>
                     <p>Explore past civilizations and events.</p>
                </a>
                  <a href="#">
                    <img src="icons/english.png" alt="English Icon">
                        <h3>English Literature</h3>
                     <p>Appreciate classic and contemporary literature.</p>
                    </a>
                    <a href="#">
                     <img src="icons/economics.png" alt="Economics Icon">
                        <h3>Economics</h3>
                      <p>Understand the systems of production, distribution, and consumption.</p>
                   </a>
                   <a href="#">
                    <img src="icons/geography.png" alt="Geography Icon">
                        <h3>Geography</h3>
                      <p>Explore the earth and its different ecosystems and human societies.</p>
                   </a>
              </div>
        </section>
Enter fullscreen mode Exit fullscreen mode

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.

I'll keep the footer consistent with the rest of the site, and use the same code from index.html.

Hour 15: Building the About Page

Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:

<!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 class="logo">Neuron IQ</div>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="subjects.html">Subjects</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

   <!-- Content goes here -->

     <footer>
         <p>© 2025 Neuron IQ. All rights reserved.</p>
        <ul>
            <li><a href="about.html">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
        </ul>
    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

I've included a header and footer identical to the other pages. This keeps the navigation consistent.

For the about page, I start with a hero section, just like on the home and subject page:

    <section class="about-hero">
        <div class="about-hero-content">
            <h1>About Neuron IQ</h1>
             <p>Learn about our vision, mission, and the team behind providing quality education for everyone.</p>
        </div>
    </section>
Enter fullscreen mode Exit fullscreen mode

The hero section includes a heading and a short paragraph to introduce the page.

Now, I'll add the main content section, divided into two sections: mission and values.

  <section class="about-content">
        <div class="about-container">
            <h2>Our Mission</h2>
            <p>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.</p>
        </div>
           <div class="about-container">
            <h2>Our Values</h2>
                <p><strong>Quality:</strong> We are committed to providing meticulously crafted notes and answers.
                </p>
                  <p><strong>Accessibility:</strong> We aim to make educational materials readily available to all learners.
                </p>
                  <p><strong>Innovation:</strong> We continuously seek new ways to improve the learning experience.</p>
                   <p><strong>Impact:</strong> We strive to empower students and educators through our resources.
                </p>

           </div>
  </section>
Enter fullscreen mode Exit fullscreen mode

This is very standard design, with some bold elements to improve the user experience, which I liked very much.

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.

  <!-- <div class="about-team">
            <h2>Meet the Team</h2>
            <div class="team-grid">
                <div class="team-member">
                    <img src="team-member1.jpg" alt="Team Member 1">
                    <h3>John Doe</h3>
                    <p>Founder & CEO</p>
                </div>
                 <div class="team-member">
                    <img src="team-member2.jpg" alt="Team Member 2">
                    <h3>Jane Smith</h3>
                    <p>Content Lead</p>
                </div>
                 <div class="team-member">
                    <img src="team-member3.jpg" alt="Team Member 3">
                    <h3>Alex Kim</h3>
                    <p>Technical Lead</p>
                </div>
            </div>
        </div> -->
Enter fullscreen mode Exit fullscreen mode

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.
Subjects Page
About Page

Okay, let's get started with the subject-specific pages.

Hour 16: Setting up the Chemistry Subject Page

First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.

<!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 class="logo">Neuron IQ</div>
            <ul>
                <li><a href="/index.html">Home</a></li>
                <li><a href="/subjects.html">Subjects</a></li>
                <li><a href="/about.html">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Content goes here -->

    <footer>
          <p>© 2025 Neuron IQ. All rights reserved.</p>
        <ul>
            <li><a href="/about.html">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
        </ul>
    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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.

Now, let's add the structure for this page:

  <section class="chemistry-page">
        <aside class="article-list">
             <h2>Articles</h2>
            <ul>
                <li><a href="1.html">Introduction to Atomic Structure</a></li>
                <li><a href="#">Basic Principles of Chemical Bonding</a></li>
                <li><a href="3.html">Understanding the Periodic Table</a></li>
                <li><a href="#">Introduction to Organic Chemistry</a></li>
                 <li><a href="#">Reaction Kinetics Explained</a></li>
                   <li><a href="#">Acid-Base Chemistry</a></li>
                   <li><a href="#">Introduction to Analytical Chemistry</a></li>
                   <li><a href="#">Isomers and Nomenclature</a></li>
                      <li><a href="#">The Chemistry of Life</a></li>
                       <li><a href="#">Chemical Equilibrium</a></li>
                           <li><a href="#">Redox Reactions</a></li>
            </ul>
        </aside>

        <main class="content-grid">
            <div class="topic-grid">
                <a href="organic.html">
                    <img src="/icons/organic.png" alt="Organic Chemistry Icon">
                     <h3>Organic Chemistry</h3>
                     <p>Study of carbon-containing compounds.</p>
                </a>
                <a href="inorganic.html">
                    <img src="/icons/inorganic.png" alt="Inorganic Chemistry Icon">
                    <h3>Inorganic Chemistry</h3>
                     <p>Explore non-carbon based substances.</p>
                </a>
                  <a href="#">
                    <img src="/icons/physical.png" alt="Physical Chemistry Icon">
                    <h3>Physical Chemistry</h3>
                    <p>Study of the underlying physical principles in chemical systems.</p>
                </a>
                   <a href="#">
                    <img src="/icons/analytical.png" alt="Analytical Chemistry Icon">
                    <h3>Analytical Chemistry</h3>
                     <p>Study of chemical properties for identifying and quantifying chemical substances</p>
                </a>
                 <a href="#">
                    <img src="/icons/biochemistry.png" alt="Biochemistry Icon">
                    <h3>Biochemistry</h3>
                     <p>Study of the chemical processes within living organisms.</p>
                </a>

            </div>
        </main>

         <aside class="topic-list">
            <h2>Topics</h2>
             <ul>
                 <li><a href="#">Atomic Structure</a></li>
                <li><a href="#">Chemical Bonding</a></li>
                <li><a href="#">The Periodic Table</a></li>
                <li><a href="#">Organic Chemistry</a></li>
                 <li><a href="#">Reaction Kinetics</a></li>
                 <li><a href="#">Acid-Base Chemistry</a></li>
                   <li><a href="#">Analytical Chemistry</a></li>
                      <li><a href="#">Isomers and Nomenclature</a></li>
                       <li><a href="#">Biochemistry</a></li>
                        <li><a href="#">Chemical Equilibrium</a></li>
                </ul>
        </aside>
    </section>
Enter fullscreen mode Exit fullscreen mode

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;

  • Some href values are "1.html", "organic.html", and some are just "#". Answer: I used "1.html", "organic.html", etc., for links that are ready. The "#" is a placeholder for pages not yet developed. It keeps the structure consistent and visually complete, allowing me to see how the final site will look, while indicating that the content isn't available yet.

Finally, I'll keep the same footer as all of the other pages, to keep consistency.

Hour 17: Styling the Chemistry Page

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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;

  • Why use custom properties (variables) instead of just writing the color values directly in the rules?
  • How was the color scheme (vibrant yet professional) chosen? And what makes these colors work well together?

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.

  • --primary-color: #00bcd4 (Vibrant Cyan): This is a bright, engaging color that evokes a sense of modernity and innovation, fitting for a science-related topic. It's not overly saturated, maintaining a degree of professionalism.
  • --secondary-color: #ffc107 (Energetic Yellow): This yellow acts as a complementary accent, adding a pop of energy and optimism. Yellow is often associated with creativity and intellect.
  • Dark Backgrounds (--background-dark, --background-light): The dark background provides a strong, stable foundation that allows the brighter colors to stand out. It also lends a sophisticated feel.
  • Light Text (--text-light, --text-accent): Off-white and pure white text on the dark background ensures high readability and a clean, modern look.

Why they work well together:

  1. Complementary Contrast: The cyan and yellow are near-complementary colors, creating a visually appealing contrast that's dynamic but not jarring.
  2. Analogous Harmony: The dark background shades are analogous, meaning they are close to each other on the color wheel, creating a harmonious and cohesive feel.
  3. Value Contrast: The significant difference in value (lightness/darkness) between the text and background ensures excellent readability.
  4. Balanced Saturation: The primary and secondary colors are vibrant but not overly saturated, avoiding a childish or overwhelming look. They are balanced by the more muted background.

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.

/* ==================== 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 %}
Enter fullscreen mode Exit fullscreen mode

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;

  • The Problem: While style.css (in the root) provides the foundation, and the Chemistry-specific style.css handles unique elements, there's a need to modify some of the global styles specifically for the Chemistry section. Directly altering the root style.css would impact the entire website, which is undesirable.
  • The Solution: style-main.css is introduced to override certain global styles from the root style.css only on the Chemistry page. It also allows adding new styles that are more general than those in the Chemistry-specific style.css but still not applicable to the entire website.
  • Example:
    • The root style.css might define a default button color.
    • On the Chemistry page, you might want a different button color, or adjust the padding.
    • style-main.css would contain the CSS rules to override the button's color and padding, but only for the Chemistry section.
  • Benefits:
    • Modularity: Keeps style modifications organized and contained within the relevant subject folder.
    • Maintainability: Easier to update or change styles for a specific section without affecting others.
    • Specificity: Overrides are targeted and don't require complex CSS selectors to achieve the desired effect.
    • Avoids Code Duplication: Common overrides or additions for a subject area can be placed in style-main.css instead of being repeated in multiple subject-specific stylesheets.

Hour 18: Specific Chemistry Page Styling

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.


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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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'

Top comments (1)

Collapse
 
we_kese_a887363c59609aae7 profile image
We Kese •

Wow!

Read next

tomjohnson3 profile image

6 Best Practices Every Backend Dev Should Know

Thomas Johnson -

ethanleetech profile image

Validate Email Address Format and Domain Libraries for Use in Next.js

Ethan Lee -

myexamcloud profile image

How I Earned the Certified Artificial Intelligence Scientist (CAIS) Credential

MyExamCloud -

moshiur9185 profile image

Typescript Core Concepts

MD Moshiur Rahman -