Hero Section with Content Left Using HTML and CSS
Hero section is a section that appears in the website landing page when a visitor first opens it. It is an effective approach for building a favorable communication, and conveying essential information.
This code is written in good programming practices!
Let me give you a free source code for creating a Hero Section with Content Left in HTML and CSS in this article.
This section is professionally designed, and will create a perfect response in any site and can be easily implemented.
The Hero Section with Content Left makes it easy to enhance your website with an uncluttered appearance. It aligns the content of the page on the left side, and the image on the right, to give the user a pleasing interface.
GitHub Source: Hero Section with Content Left
Features
- Animation on Hover: The smooth hover animations make it more engaging to the user while improving interaction on the section.
- Easy to Customize: You can easily edit the text, fonts, colours and pictures to the hue and design of your website, respectively.
- Compatibility: The code is seamlessly integrates for usage in the current browser environments and, devices.
- Clean Code: The code is not cramped and does not impede easy flow of mind when the developer is making modifications; which is beneficial.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- 20 Best Programming Practices
- QR Code Generator
- Modern Animated Pricing Table
- Hero Section with Snowfall Effect
- QR Code Scanner or Reader
Video Tutorial
Steps to Build a Simple Hero Section
- Create Project Folder: First, you need to create a new project folder to your personal computer.
- Create index.html: In project directory, create a file with the name of index.html that will contain the HTML layout of the application.
- Create style.css: After that, it is time to create the second file for the styling named style.css.
- Copy & Paste the Code: Just copy the use a provided source code and then paste the code to your files.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<html lang="en">
<!-- Designed by JV Codes at www.jvcodes.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gym Training Hero Section</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- Logo -->
<div class="logo">
<h2>FitPro Gym</h2>
</div>
<!-- Navigation -->
<div class="nav">
<ul id="nav-items">
<li class="active">Home</li>
<li>About</li>
<li>Programs</li>
<li>Trainers</li>
<li>Contact</li>
</ul>
</div>
</header>
<!-- Hero Section -->
<div class="hero-section">
<!-- Hero Content -->
<div class="hero-content">
<h1>Transform Your <span>Body & Mind</span></h1>
<p>Join our expert-led fitness programs and start your transformation today. Membership starts at just <strong>$69/month</strong>.</p>
<button>Get Started</button>
</div>
<!-- Hero Image -->
<div class="hero-img">
<img src="img/gym-training.png" alt="Gym Training" width="720px">
</div>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the simple hero section:
@font-face {
font-family:"Lemon-Regular";
src: url("font/Lemon-Regular.ttf");
}
@font-face {
font-family:"OpenSans-Bold";
src: url("font/OpenSans-Bold.ttf");
}
@font-face {
font-family:"OpenSans-SemiBold";
src: url("font/OpenSans-SemiBold.ttf");
}
@font-face {
font-family:"OpenSans-Regular";
src: url("font/OpenSans-Regular.ttf");
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
width: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 25px 100px;
}
.logo h2{
font-family:"Lemon-Regular";
font-weight: 400;
font-size: 26px;
color: #ef5e41;
}
#nav-items{
display: flex;
align-items: center;
}
#nav-items li {
font-family: "OpenSans-SemiBold";
font-weight: 600;
font-size: 18px;
list-style: none;
margin-left: 100px;
text-transform: capitalize;
cursor: pointer;
color: #333;
transition: color 0.3s ease, transform 0.3s ease;
}
#nav-items li:hover {
color: #ef5e41;
transform: translateY(-3px);
}
#nav-items li.active {
color: #ef5e41;
position: relative;
}
#nav-items li.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background-color: #ef5e41;
}
.active{
color: #ef5e41;
}
.hero-section{
background-image: url("img/BG.png");
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
padding: 0px 100px;
display: flex;
align-items: center;
justify-content: space-around;
}
.hero-section h1{
font-family:"Lemon-Regular";
font-weight: 400;
font-size: 64px;
width: 400px;
text-transform: capitalize;
}
span{
color: #ef5e41;
}
.hero-section p{
font-family:"OpenSans-Regular";
font-weight: 400;
font-size: 18px;
width: 360px;
padding: 30px 0px;
}
.hero-section button {
font-family: "OpenSans-Bold";
font-weight: 700;
font-size: 18px;
color: #fff;
width: 160px;
height: 60px;
border-radius: 50px 0px 50px 0px;
background-color: #ef5e41;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero-section button:hover {
background-color: #d94b34;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
Download Source Code
Adding to that, the full source code for this hero section is available below. This source code is free of copy right infringement hence you just have to download it from this website and then use it in your own personal or business affairs. Just click on the download now button below and then you can begin to make use of the design on your website.
This hero section will perfectly fit for any website: a portfolio, business, or a landing page.
Conclusion
The Hero Section with Content Left Using HTML and CSS is a perfect example of an effective and appealing Internet site top zone. This code is useful when you don’t have to design everything from the ground up because it would take even more time.
You are allowed to use this code in your projects and in return remember to acknowledge JV Source Codes by linking to our site for a link back here. In case of any complications, type your questions in the comment section and I will definitely answer. Oh yes please do not forget to subscribe to the channel for more free and useful information.
