The hero section of a homepage is the first thing visitors see, and it’s your chance to make a powerful first impression. A well-designed hero section can captivate your audience, convey your message clearly, and entice users to explore further.
In this blog post, we’ll guide you through the process of creating a stunning home hero page using HTML and CSS. We’ll cover how to structure your HTML, style your CSS, and ensure your hero section is responsive and visually appealing.
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
See the Pen Home page ( dark ) by Jack (@e994orr) on CodePen.
HTML Code
Starter Template
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link rel="stylesheet" href="style.css"> <title>Home Hero Page using HTML and CSS - Coding Torque</title> </head> <body> <!-- Further code here --> <script src="script.js"></script> </body> </html>
Paste the below code in your <body>
tag.
<div class="main-container"> <div class="blur-circle1"> </div> <div class="blur-circle2"> </div> <!-- Start Landing Page --> <div class="landing-page"> <header> <div class="container"> <a href="#" class="logo">Your <b>Website</b></a> <ul class="links"> <li>Home</li> <li>About Us</li> <li>Work</li> <li>Info</li> <li>Get Started</li> </ul> </div> </header> <div class="content"> <div class="container"> <div class="info"> <h1>Looking For Inspiration</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus odit nihil ullam nesciunt quidem iste, Repellendus odit nihil</p> <button>Button name</button> </div> <div class="image"> <img class="main-image" src="https://cdni.iconscout.com/illustration/premium/thumb/businessman-working-using-vr-tech-3840669-3202986.png?f=webp"> </div> </div> </div> </div> <!-- End Landing Page --> </div>
CSS Code
Create a file style.css and paste the code below.
*{ padding: 0px; margin:0px; } .main-container{ margin:0px; padding: 0px; background-color: black; min-width: 100vw; min-height: 100vh; position: relative; } .blur-circle1{ width: 200px; height: 200px; background: linear-gradient(to bottom,white,pink); border-radius: 50%; filter:blur(120px); position: absolute; left: 10%; top:20%; /* transform: translate(50%); */ } .blur-circle2{ width: 200px; height: 200px; background: linear-gradient(to bottom,white,pink); border-radius: 50%; filter:blur(100px); position: absolute; right: 10%; top:20%; /* transform: translate(50%); */ } body { font-family: 'Open Sans', sans-serif; } a { text-decoration: none; } ul { list-style: none; padding: 0; margin: 0; } .container { padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } /* Small */ @media (min-width: 768px) { .container { width: 750px; } } /* Medium */ @media (min-width: 992px) { .container { width: 970px; } } /* Large */ @media (min-width: 1200px) { .container { width: 1170px; } } /* End Global Rules */ /* Start Landing Page */ .landing-page header { min-height: 80px; display: flex; } @media (max-width: 767px) { .landing-page header { min-height: auto; display: initial; } } .landing-page header .container { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 767px) { .landing-page header .container { flex-direction: column; justify-content: center; } } .landing-page header .logo { color: #5d5d5d; font-style: italic; text-transform: uppercase; font-size: 20px; } @media (max-width: 767px) { .landing-page header .logo { margin-top: 20px; margin-bottom: 20px; } } .landing-page header .links { display: flex; align-items: center; } @media (max-width: 767px) { .landing-page header .links { text-align: center; gap: 10px; } } .landing-page header .links li { margin-left: 30px; color: #5d5d5d; cursor: pointer; transition: .3s; } @media (max-width: 767px) { .landing-page header .links li { margin-left: auto; } } .landing-page header .links li:last-child { border-radius: 20px; padding: 10px 20px; color: #FFF; background-color: #6c63ff; } .landing-page header .links li:not(:last-child):hover { color: #6c63ff; } .landing-page .content .container { display: flex; align-items: center; justify-content: space-between; gap: 140px; min-height: calc(100vh - 80px); } @media (max-width: 767px) { .landing-page .content .container { gap: 0; min-height: calc(100vh - 101px); justify-content: center; flex-direction: column-reverse; } } @media (max-width: 767px) { .landing-page .content .info { text-align: center; margin-bottom: 15px } } .landing-page .content .info h1 { color: #bbbbbb; font-size: 44px; } .landing-page .content .info p { margin: 0; line-height: 1.6; font-size: 15px; color: #b3b3b3; } .landing-page .content .info button { border: 0; border-radius: 20px; padding: 12px 30px; margin-top: 30px; cursor: pointer; color: #FFF; background-color: #6c63ff; } .landing-page .content .image img { max-width: 100%; } /* End Landing Page */ .main-image{ /* mix-blend-mode:exclusion */ width: 600px; height: 400px; } h1,p{ color:white; }
Final Output
![](https://codingtorque.com/wp-content/uploads/2024/05/image-26-1024x478.png)
Written by: Piyush Patil
Code Credits: https://codepen.io/e994orr/pen/mdgPbqN
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖