Hier, nous avons travaillé sur index.html, et aujourd'hui nous allons travailler sur les sujets.html et about.html. Nous verrons s'il nous reste suffisamment de temps pour travailler sur nos pages thématiques comme la chimie, les mathématiques, etc.
Je vais commencer par subject.html. Comme avant, j'utiliserai mon passe-partout personnalisé, que j'ai conçu hier pour ce projet :
<!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; } }
J'ai ajouté un design vibrant et moderne, avec un thème sombre et des dégradés subtils. La mise en page utilise flexbox et grille pour la réactivité. J'ai également inclus de jolis effets de survol pour rendre la page plus interactive.
Avant de continuer, répondons à quelques questions que vous pourriez vous poser ;
Réponse : J'ai choisi d'utiliser des propriétés personnalisées (variables) pour plusieurs raisons. Principalement, ils améliorent la maintenabilité et la cohérence. Changer une couleur dans toute la feuille de style devient aussi simple que de modifier la valeur de la variable à la racine. C’est bien plus efficace que de rechercher chaque instance d’un code couleur spécifique. De plus, les variables améliorent la lisibilité en attribuant des noms significatifs aux valeurs, rendant ainsi l'intention du code plus claire. Il facilite également la création de thèmes et permet des changements dynamiques en fonction des préférences de l'utilisateur ou de différents modes.
La palette de couleurs a été choisie dans le but de créer une esthétique « vibrante mais professionnelle ». Je voulais un équilibre entre énergique et digne de confiance.
Pourquoi ils travaillent bien ensemble :
Essentiellement, la combinaison d'une couleur primaire lumineuse et moderne, d'un accent chaleureux et d'un fond sombre sophistiqué, ainsi que de couleurs de texte soigneusement choisies, crée une palette à la fois visuellement attrayante et appropriée à un contexte professionnel et éducatif.
Cependant, ces styles ne fonctionnent que pour la page Chimie et non pour l'ensemble du site Web. J'ai donc créé un autre fichier CSS, style-main.css dans Chemistry pour remplacer les styles principaux.
<!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; } }
Ce fichier style-main.css remplace le style du fichier style.css principal et s'applique à toutes les pages. Parlons maintenant de la nécessité de style-main.css, les développeurs expérimentés l'auront peut-être compris, mais pour les développeurs moins expérimentés ;
Pour éviter de rendre les styles trop complexes, j'ai décidé d'utiliser un autre fichier de feuille de style, spécifique-chemistry.css, dans le dossier Chemistry. Cela stylisera la page d'objet et gardera les autres fichiers sans encombrement.
<!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; } }
Cela fournit un style à la disposition à trois colonnes, que j'ai utilisée dans le fichier index.html à l'intérieur du dossier Chemistry. Cela donne à la page un aspect beaucoup plus propre et professionnel. J'ai également ajouté un design réactif pour les petits écrans.
Pour ceux qui veulent l'aperçu en direct :
Chimie
Comme il s'agissait d'une page basique, je n'ai pas ressenti le besoin d'ajouter un script.js
C'est tout pour aujourd'hui. Je te verrai peut-être demain. D'ici là, à plus tard
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!