In this tutorial, we showed how to use HTML and CSS to build a fantastic hero section design. You may create a hero section that will make your website seem beautiful and more user-friendly by following the methods suggested in this article. You may also utilize the included source code to create your own custom hero section designs and experiment with different colors and vector pictures to give your site a distinctive appearance.
A hero section is an important component of a website or web application that is meant to attract the user’s attention and convey the site’s principal message or goal. In this post, we’ll look at how to use HTML and CSS to build a fantastic hero section design. A top navbar, a headline, a paragraph, a button on the left, and a vector picture on the right comprise the design.
Designing the Hero Section:
We will begin by developing the layout for a fantastic hero section design. We’ll use HTML to arrange the hero section and CSS to design it. We will also incorporate a responsive design to guarantee that the hero section appears excellent on all screen screens.
Creating the Top Navbar:
The first step in establishing our hero section is to include a top navigation bar. The navbar will be created in HTML and styled with CSS. We’ll also teach you how to make the navbar adaptable and customize its appearance for different screen widths.
Adding the Vector Image:
A vector picture will be used to give visual appeal to our hero section. For our vector pictures, we will utilize SVG images. We’ll teach you how to place the vector picture on the right side of the hero section and change its size to fit different screen widths.
Making the Design Responsive:
Ultimately, the hero section design will be entirely responsive. We’ll utilise media queries to change the hero section’s aesthetics for different screen sizes. We will also demonstrate how to test the design on various devices to ensure that it looks well on all of them.
Source Code For Responsive Hero Section Design using HTML 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" />
<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" />
<title>Hero Section Design | Hassanrao.com</title>
</head>
<body>
<header class="container">
<nav>
<a href="#"><img src="./images/logo.png" alt="logo" /></a>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</nav>
<div class="hero">
<section class="hero-left">
<h1>All your files are in one secure location, accessible anywhere.</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="#">Get Started</a>
</section>
<section class="right">
<img src="images/hero-illustration.svg" alt="Hero illustration" />
</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&family=Raleway:wght@400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
.container {
width: 1200px;
max-width: 90%;
margin: 0 auto;
padding: 50px 0;
}
a{
text-decoration: none;
}
nav {
display: flex;
justify-content: space-between;
}
nav a img{
width: 100px;
}
nav ul {
display: flex;
}
nav li {
list-style: none;
margin: 0 25px;
}
nav ul li a {
color: hsl(243, 87%, 12%);
}
nav ul li a:hover{
text-decoration: underline;
}
.hero {
display: flex;
align-items: center;
margin-bottom: 5rem;
}
.hero section {
flex: 1;
}
.hero-left h1 {
font-size: 2.5rem;
margin-bottom: 25px;
color: #070439;
}
.hero-left p {
font-weight: 600;
line-height: 1.5;
margin-bottom: 25px;
color: #444444;
}
.hero-left {
padding-right: 40px;
}
.hero-left a {
padding: 10px 15px;
background: #372cfa;
color: #fff;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
border: none;
outline: none;
transition: 0.3s all ease;
border-radius: 20px;
}
.hero-left a:hover{
background-color: #070439;
}
.right {
padding-top: 50px;
}
.right img {
width: 100%;
max-width: 465px;
}
@media screen and (max-width: 1000px) {
nav img {
width: 100px;
}
nav li {
list-style: none;
margin: 0 8px
}
.hero {
flex-direction: column;
text-align: center;
}
.hero .right {
order: -1;
padding-bottom: 5rem;
}
}
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)