Creating An Attractive Hero Image Using HTML And CSS.
Language
HTML, CSS
Responsive
Yes
Capable For Blogger
No
Let’s start making a hero image
Creating an html structure for a
hero image
HTML CODE
Create a file named index.html
and add html markup and
save the file.
Html markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
After adding html markup now move in the head tag.
Head Tag
In the head tag, we have added only one link. That is Font Family
links
We have added a custom font
i) Montserrat ii)
Kaushan Script
If you want to give the same font family
as I have given in my hero image the use these two font families.
All font family-integrated you get when you download our free code
source.
Head Tag Code (Copy and past in your project)
<head>
<title>Hero Image CSS: How to create hero image using html and css</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="style.css">
<!--Custom Font Family-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
</head>
Body Tag Code (Copy and past in your project)
<body>
<!--Banner-->
<div id="banner">
<!--Banner text-->
<div class="banner-container">
<span class="creative-text">Creative Template</span>
<h2>
Welcome <br>to MoGo
</h2>
<hr><!--Small short line-->
<a href="#">Learn more</a><!--Banner Button-->
</div>
</div>
</body>
After adding html code save the file and open the file in your browser you will see html output structure.
![]() |
HTML OUTPUT |
Create and a new file named style.css
and code and past css code in your project. We have added responsive code to it.
CSS Code
*{margin: 0;padding: 0;box-sizing: border-box;}/*Banner*/#banner {font-family: 'Montserrat', sans-serif;background-image: linear-gradient(rgba(62, 36, 23, 0.3), rgba(0, 36, 23, 0.6)), url(bgHeader.jpg);background-size: cover;background-repeat: no-repeat;background-position:center center;height: 500px;width: 100%;position: relative;}/*Banner text*/#banner .banner-container{position: absolute;top: 0%;left: 49%;transform: translate(-50%, 20%);text-align: center;}#banner .banner-container .creative-text{font-family: 'Kaushan Script', cursive;font-size: 45px;color: #fff;margin-bottom: 10px;}#banner .banner-container h2 {font-size: 80px;color: #fff;}/*Small short line*/#banner .banner-container hr {width: 60px;height: 2px;background-color: #fff;margin: 20px auto;}/*Banner Button*/#banner .banner-container a {display: inline-block;color: #fff;font-size: 12px;text-decoration: none;text-transform: uppercase;border: 2px solid #fff;padding: 10px 20px;}/*Tablet Screen At 768px*/@media only screen and (max-width: 768px) {/*Banner*/#banner {height: 380px;}/*Banner Text*/#banner .banner-container{transform: translate(-50%, 10%);}#banner .banner-container .creative-text{font-size: 40px;}#banner .banner-container h2 {font-size: 70px;}/*Small short line*/#banner .banner-container hr {width: 55px;}/*Banner Button*/#banner .banner-container .banner-container a {padding: 8px 18px;font-size: 10px;}}/*Mobile Large Screen At 425*/@media only screen and (max-width: 425px) {/*Banner*/#banner {height: 350px;}#banner .banner-container .creative-text{font-size: 30px;}#banner .banner-container h2 {font-size: 55px;}/*Small short line*/#banner .banner-container hr {width: 53px;}/*Banner Button*/#banner .banner-container a {padding: 7px 17px;font-size: 9px;}}/*Mobile medium Screen At 375*/@media only screen and (max-width: 375px) {/*Banner*/#banner {height: 320px;}#banner .banner-container .creative-text{font-size: 28px;}#banner .banner-container h2 {font-size: 50px;}/*Banner Button*/#banner .banner-container a {padding: 8px 18px;font-size: 10px;}}/*Mobile small Screen At 320*/@media only screen and (max-width: 320px) {#banner .banner-container .creative-text{font-size: 24px;}#banner .banner-container h2 {font-size: 45px;}}
![]() |
CSS OUTPUT |
If you have any query comment down below.
Download the hero image css code source by clicking the download now button.
Thanks, Happy Learning :-)
Keep Visiting
Leave A Relpy