Skip to main content

Banner image/Hero Image Tutorial with HTML and CSS

    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 
<!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>

tutorial6.css 
*{
    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!

Labels:

Comments

Post a Comment