In this video, we will be creating a banner/hero image using CSS. A banner or hero image is a large, full-width image that is typically placed at the top of a website or webpage and is used to visually represent the content or purpose of the page. We will be using CSS properties such as background-image and background-size to create the banner/hero image, as well as some basic layout techniques to ensure that it looks great on all devices. By the end of this tutorial, you will have a fully functional banner/hero image that you can use on your own website. So, if you want to learn how to create a banner/hero image using CSS, be sure to follow this tutorial till the end.
index.html
tutorial6.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tutorial 6</title>
<link rel="stylesheet" href="css/tutorial6.css">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light|Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<div class="img-container">
<div class="inner-container">
<h1>HERO IMAGE SAMPLE</h1>
<h2>The Quick Brown Fox Jumps Over the Lazy Dog</h2>
<a class="btn" href="#">CLICK HERE</a>
</div>
</div>
</body>
</html>
*{
margin: 0;
height: 100%;
}
body{
width: 100%;
}
.img-container{
background-image: url(../image/image.jpg);
height: 70%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.inner-container{
text-align: center;
position: absolute;
width: 100%;
color: white;
height:auto;
margin-top: 200px;
}
h1{
font-size: 7em;
font-family: "Shadows into Light", sans-serif;
}
h2{
margin-top: -17px;
font-family: "Source Sans Pro", sans-serif;
font-size: 1.7em;
text-align: center;
font-weight: 400;
}
a{
margin-top: 20px;
font-size: 1.3em;
font-family: "Source Sans Pro", sans-serif;
}
.btn{
display: inline-block;
width: 200px;
font-weight: bold;
padding: 10px;
color: #fff;
border: 4px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.btn:hover,.btn:active{
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
@media only screen and (max-width: 920px){
.inner-container{
margin-top: 100px;
}
}
@media only screen and (max-width: 540px){
.inner-container{
margin-top: 150px;
}
h1{
font-size: 5em;
}
h2{
font-size: 1.4em;
}
}
Watch full video here!
Comments
Post a Comment