In this tutorial, we showed how to create a hero section with an illustration image and a registration button using HTML and CSS. You may construct a visually attractive hero section for your website by following the methods explained in this article. You may also utilize the included source code to construct your own custom hero sections and experiment with different photos, colors, fonts, and styles to give your site a one-of-a-kind appearance. Have fun with it!
A hero section is an essential component of any website’s design. It is the first thing people see when they arrive at your website, so it must be visually appealing as well as helpful. This post will demonstrate how to create a hero section with an illustration image on the left and a title and paragraph on the right, as well as a registration button. You will have a completely functional and visually attractive hero section for your website by the conclusion of this tutorial.
Choosing the Illustration Image:
The illustration graphic serves as the hero section’s focal point. It should be aesthetically beautiful and related to the content of your website. We’ll teach you how to select the best image for your site, as well as how to resize and optimise it for the web.
Designing the Layout of the Hero Section:
We will use HTML and CSS to create the structure and layout of the hero section. We will also show you how to make the design fully responsive, so it looks great on all screen sizes.
Adding the Heading and Paragraph:
The hero section must include a headline and a paragraph. They welcome visitors to your website and explain what it is all about. We will add the header and paragraph to the design using HTML and CSS and teach you how to alter them to meet your branding.
Creating the Signup Button:
The registration button is an excellent technique to encourage users to register with your website. We will construct the button with HTML and CSS and show you how to personalise it to match your branding. We’ll also teach you how to make the button more useful so that people can quickly join up for your site.
Optimizing the Design for Performance:
Lastly, we’ll show you how to improve the performance of the hero section design. To guarantee that your site loads quickly and efficiently, we will employ techniques like as lazy loading and image compression.
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. Copy and Paste the Given code into those files. Images can be downloaded from the given links below.
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="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>
<body>
<header>
<img src="images/logo.png" alt="logo">
</header>
<main>
<section class="left">
<img src="images/hero-illustration.png" alt="Hero Illustration">
</section>
<section class="right">
<h1>Digital Marketing</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>
<button>Register</button>
</section>
</main>
<footer>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</footer>
</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=Poppins:wght@400;600&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
body {
background: hsl(257, 40%, 49%) url("images/bg-desktop.svg") no-repeat;
padding: 20px 60px;
}
header img {
width: 100px;
filter:invert(100%);
}
main {
display: flex;
padding-top: 55px;
justify-content: space-between;
margin-bottom: -20px;
}
.left {
padding-right: 2.5em;
}
.right {
margin-top: 70px;
color: #fff;
}
h1 {
font-size: 2.5em;
font-family: 'Poppins';
padding-bottom: 20px;
}
p {
line-height: 1.7;
opacity: .8;
}
button {
padding: 15px 60px;
margin-top: 30px;
border-radius: 5rem;
border: 0;
cursor: pointer;
color: #674baf;
font-size: 1em;
font-weight: 600;
transition: 0.3s all ease;
}
button:hover {
color: #fff;
background: hsl(300, 69%, 71%);
}
/* footer */
footer {
text-align: right;
}
.fab {
border: 2px solid #fff;
padding: 10px 10px;
border-radius: 50%;
margin-left: 20px;
color: #fff;
transition: 0.3s all ease;
margin-bottom: 10px;
}
.fa-facebook-f {
padding: 10px 13px;
}
.fab:hover {
color: #674baf;
border-color: #fff;
background-color: #fff;
cursor: pointer;
}
@media screen and (max-width: 1000px) {
main {
flex-direction: column;
}
.left img {
width: 100%;
}
.right {
padding-top: 40px;
text-align: center;
}
h1 {
font-size: 1.8em;
}
button {
padding: 15px 90px;
}
footer {
text-align: center;
padding-top: 80px;
}
}
Images Download
That’s it; we’ve successfully designed a Responsive and Visually Appealing hero section using simple HTML and CSS. I work as a web developer. I create simple projects in HTML, CSS, JavaScript, and PHP to assist novices in getting started quickly.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)