In this tutorial, I’ll teach you how to use HTML and CSS to build a fantastic hero section design. You may design a hero section that makes a wonderful first impression on your website visitors by following the methods indicated in this article. You may also utilize the included source code to create your own custom hero section designs and experiment with different colors, fonts, and styles to give your site a distinctive appearance. Have fun with your creations!
The hero section of a website is the first thing visitors see, so it’s important to make a good first impression. In this article, we will show you how to create a stunning hero section design using HTML and CSS. This design features a top navigation bar, a heading, a paragraph, a button, and a vector image. The design is fully responsive and comes in two colors: sky blue and pink.
Designing the Hero Section:
The hero section’s layout will be created first. The section’s structure will be created using HTML, and its styling will be done using CSS. The design will also be entirely responsive so that it looks fantastic on screens of all sizes.
Adding the Top Signup Button:
Making it simple for visitors to join up straight is possible with the help of a top Top start free trial button. We’ll demonstrate how to personalize the Top start free trial button to go with your branding using HTML and CSS.
Adding the Heading and Paragraph:
The hero section’s headline and paragraph are crucial components. They welcome website visitors and explain your company’s mission. The heading and paragraph will be added to the design using HTML and CSS, and we’ll show you how to edit them to match your branding.
Adding the Button and Vector Image:
To entice people to take action and discover more about your website, use a button and a vector picture. The button and vector image will be added to the design using HTML and CSS, and we’ll show you how to edit them to match your branding.
Making the Design Responsive:
The hero section design will thereafter be entirely responsive. To adapt the section’s designs for various screen widths, we will utilise media queries. We’ll also demonstrate how to test the design on several gadgets to make sure it looks fantastic on each one.
Source Code For Hero Section Design using HTML and CSS:
You have to create two files for it. One is HTML and the other is CSS File. Images can be downloaded from the given links below. Copy and Paste the Given code into those files.
First: Create an HTML file name as index.html with the extension .html in the root folder.
<!DOCTYPE html>
<html lang="en">
<!-- By Hassan Ali | Hassanrao.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Section Design | Hassanrao.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="top">
<img src="images/logo.png" alt="logo" class="logo">
<a href="#" class="signup-btn btn">Start Free Trial</a>
</nav>
<section class="hero">
<section class="left">
<h1>Build The Community Your Fans Will Love</h1>
<p>Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. </p>
<a href="#" class="get-started btn">Get Started</a>
</section>
<section class="right">
<img src="images/hero-section-illustration.svg" alt="hero section illustration">
</section>
</section>
</div>
</header>
</body>
</html>
Second: Create a CSS name as a style.css file with the extension .css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@600&display=swap');
* {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
}
.container {
width: 1200px;
max-width: 90%;
margin: 0 auto;
}
.btn {
background-color: hsl(322, 100%, 66%);
border: 0;
outline: none;
padding: 15px 50px;
border-radius: 10rem;
color: #fff;
font-weight: bold;
font-family: "open sans";
font-size: 1.1rem;
cursor: pointer;
transition: 0.3s all ease;
text-decoration: none;
}
header {
background: url("images/hero-bg.svg") hsl(193, 100%, 96%);
}
nav {
padding: 50px 0 50px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
nav img {
width: 200px;
}
.signup-btn {
background-color: #fff;
color: #00252e;
}
.signup-btn:hover{
background-color: #FF52BF;
color: #fff;
}
.hero {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 70px;
}
.hero .left {
width: 40%;
}
.hero h1 {
font-size: 2.5rem;
color: hsl(192, 100%, 9%);
margin-bottom: 10px;
}
.hero p {
font-size: 1.2rem;
line-height: 1.5;
margin-bottom: 30px;
}
.hero .get-started:hover{
background-color: #EE52CC;
}
.hero .right {
width: 50%;
}
.hero img {
width: 100%;
max-width: 532px;
}
@media screen and (max-width: 1000px) {
.container {
max-width: 80%;
}
/* nav mobile styles */
nav img {
width: 150px;
}
.signup-btn {
padding: 10px 20px;
}
.btn {
font-size: .9rem;
}
.hero {
flex-direction: column;
}
.hero .left {
width: 100%;
text-align: center;
padding-bottom: 40px;
}
.hero h1 {
font-size: 1.8rem;
}
.hero p {
font-size: 1rem;
}
.hero .get-started {
width: 80%;
}
.hero .right {
width: 100%;
}
}
Image Download
That’s All; We have successfully created a Responsive and Visually Appealing hero section design with simple HTML and CSS. I am a Website Developer. I build Simple Projects Using HTML CSS JS and PHP to help beginners for a quick start.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)