Sign up to save your podcasts
Or
Share Create a Stunning Portfolio Landing Page with Dark Mode Toggle
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Create a Stunning Portfolio Landing Page with Dark Mode Toggle
Description
Learn how to create a beautiful and responsive portfolio landing page with a dark mode toggle feature. Follow this step-by-step guide to enhance your web development skills and showcase your projects in style.
Step-by-Step Guide
1. Setup Your Project
* Create a new folder for your project.
* Inside the folder, create two files: index.html and style.css.
2. HTML Structure
* Open index.html and add the basic HTML structure.
* Add a navbar, hero section, projects section, and contact section.
* Include a button for toggling dark mode.
Portfolio
My Portfolio
🌙
Hello, I'm Norbert
A Passionate Web Developer
View Projects
My Projects
Project 1
Description of project 1.
Project 2
Description of project 2.
Project 3
Description of project 3.
Project 4
Description of project 4.
Project 5
Description of project 5.
Project 6
Description of project 6.
Contact Me
Email: [email protected]
3. Styling with CSS
* Open style.css and add general styles for the body and container.
* Style the navbar, hero section, projects section, and contact section.
* Add styles for dark mode.
/* filepath: c:\Users\Norbert\Desktop\Web Dev\youtube-web-dev-2025-repo\ideas\03\16-03-landingpage\regular\style.css */
/* General Styles */
* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
margin: 0;
padding: 0;
background-color: #f8fafc;
color: #1e293b;
transition: background-color 0.3s, color 0.3s;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
padding: 20px;
}
/* Navbar */
.navbar {
background: #ffffff;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 8px;
position: sticky;
top: 0;
/* z-index: 1000; */
}
.theme-toggle {
background: #e2e8f0;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
border-radius: 8px;
transition: 0.3s;
&:hover {
background: #cbd5e1;
}
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
background: #1e3a8a;
color: white;
border-radius: 12px;
height: 200px;
}
.highlight {
color: #facc15;
font-weight: bold;
}
.btn {
display: inline-block;
margin-top: 20px;
padding: 12px 24px;
background: #facc15;
color: #1e3a8a;
font-weight: bold;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
&:hover {
background: #eab308;
}
}
}
/* Projects Section */
.projects {
padding: 60px 20px;
background: #f1f5f9;
text-align: center;
border-radius: 12px;
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 24px;
}
.project-card {
background: white;
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
&:hover {
transform: translateY(-5px);
}
}
}
/* Contact Section */
.contact {
text-align: center;
padding: 50px 20px;
}
/* Dark Mode */
.dark-mode {
background-color: #1e293b;
color: #f8fafc;
.navbar {
background: #334155;
}
.theme-toggle {
background: #475569;
color: white;
&:hover {
background: #64748b;
}
}
.projects {
background: #475569;
}
.project-card {
background: #334155;
color: white;
}
}
4. Dark Mode Toggle
* In index.html, add a script to toggle dark mode when the button is clicked.
5. Enhancements
* Add transitions for smooth color changes.
* Use CSS Grid for a responsive projects section.
* Add hover effects for buttons and project cards.
By following these steps, you'll create a visually appealing portfolio landing page with a modern dark mode feature. This project will not only enhance your web development skills but also provide a professional platform to showcase your work.
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
View all episodes
By Norbert B.M.Description
Learn how to create a beautiful and responsive portfolio landing page with a dark mode toggle feature. Follow this step-by-step guide to enhance your web development skills and showcase your projects in style.
Step-by-Step Guide
1. Setup Your Project
* Create a new folder for your project.
* Inside the folder, create two files: index.html and style.css.
2. HTML Structure
* Open index.html and add the basic HTML structure.
* Add a navbar, hero section, projects section, and contact section.
* Include a button for toggling dark mode.
Portfolio
My Portfolio
🌙
Hello, I'm Norbert
A Passionate Web Developer
View Projects
My Projects
Project 1
Description of project 1.
Project 2
Description of project 2.
Project 3
Description of project 3.
Project 4
Description of project 4.
Project 5
Description of project 5.
Project 6
Description of project 6.
Contact Me
Email: [email protected]
3. Styling with CSS
* Open style.css and add general styles for the body and container.
* Style the navbar, hero section, projects section, and contact section.
* Add styles for dark mode.
/* filepath: c:\Users\Norbert\Desktop\Web Dev\youtube-web-dev-2025-repo\ideas\03\16-03-landingpage\regular\style.css */
/* General Styles */
* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
margin: 0;
padding: 0;
background-color: #f8fafc;
color: #1e293b;
transition: background-color 0.3s, color 0.3s;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
padding: 20px;
}
/* Navbar */
.navbar {
background: #ffffff;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 8px;
position: sticky;
top: 0;
/* z-index: 1000; */
}
.theme-toggle {
background: #e2e8f0;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
border-radius: 8px;
transition: 0.3s;
&:hover {
background: #cbd5e1;
}
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
background: #1e3a8a;
color: white;
border-radius: 12px;
height: 200px;
}
.highlight {
color: #facc15;
font-weight: bold;
}
.btn {
display: inline-block;
margin-top: 20px;
padding: 12px 24px;
background: #facc15;
color: #1e3a8a;
font-weight: bold;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
&:hover {
background: #eab308;
}
}
}
/* Projects Section */
.projects {
padding: 60px 20px;
background: #f1f5f9;
text-align: center;
border-radius: 12px;
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 24px;
}
.project-card {
background: white;
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
&:hover {
transform: translateY(-5px);
}
}
}
/* Contact Section */
.contact {
text-align: center;
padding: 50px 20px;
}
/* Dark Mode */
.dark-mode {
background-color: #1e293b;
color: #f8fafc;
.navbar {
background: #334155;
}
.theme-toggle {
background: #475569;
color: white;
&:hover {
background: #64748b;
}
}
.projects {
background: #475569;
}
.project-card {
background: #334155;
color: white;
}
}
4. Dark Mode Toggle
* In index.html, add a script to toggle dark mode when the button is clicked.
5. Enhancements
* Add transitions for smooth color changes.
* Use CSS Grid for a responsive projects section.
* Add hover effects for buttons and project cards.
By following these steps, you'll create a visually appealing portfolio landing page with a modern dark mode feature. This project will not only enhance your web development skills but also provide a professional platform to showcase your work.
Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe