This website is the best viewed in bigger devices.

How To Design - Full Screen Banner

Learn how to create a Full Screen Banner with HTML, CSS

banner design

How To Create a Full Screen Banner

Step 1) Add HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Banner Design</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="banner">
        <img src="banner.jpg" alt="Banner Image" />

        <section class="text-content">
            <h1>How to Take Great Landscape Photos</h1>
            <p>One of the goals when taking landscape pictures is to get an exceptionally sharp, clear image. The exposure settings that you choose have an effect on this, starting with aperture. To get the sharpest, clearest image possible, it’s best to shoot with an f-stop number that’s about two to three stops higher than the lowest possible (a mid-range aperture, like f/8 usually works well). Using an aperture too far toward either end of the spectrum, such as f/2.8 or f/22, can cause a subtle reduction in clarity.</p>
            <a href="#" class="btn">Read More</a>
        </section>

    </div>
    
</body>

</html>

Step 2) Add CSS:

/*

This is a Full Screen Banner Design using HTML, CSS. You can freely use it in your project.
It is made with ♥ by Learn Computer Academy. Visit our website: www.learncomputer.in

*/


/* Normalization */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Poppins", sans-serif;
    background-color: #fcfcfc;
}

img {
    max-width: 100%;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

a {
    display: inline-block;
    text-decoration: none;
}

/* Banner Design CSS */

.banner {
    padding: 0;
    margin: 0;
    position: relative;
}

.banner img {
    max-width: 100%;
    height: auto;
}

.banner .text-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0;
    margin: 0;
}

.banner .text-content h1 {
    font-size: 50px;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 0 8px rgba(0, 0, 0, .5);
    padding: 0;
    margin: 0 0 50px 0;
}

.banner .text-content p {
    font-size: 18px;
    color: #fff;
    line-height: 1.5;
    text-shadow: 0 0 8px rgba(0, 0, 0, .5);
    padding: 0;
    margin: 0 0 50px 0;
}

.banner .text-content .btn {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    color: #f1f0f0;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 2px;
    background-color: #006686;
    opacity: .9;
    border: 1px solid #fff;
    padding: 25px 35px;
    margin: 0;
    transition: all 300ms ease-in-out;
}

.banner .text-content .btn:hover {
    background-color: #01536d;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .25);
}
Previous Next