Gradient Hero Section with Navigation Menu using HTML, CSS & JavaScript

0


Hello developers, today in this blog you will learn to create a Gradient Hero Section with Navigation Menu using HTML, CSS & JavaScript.

A hero section is a full-screen section that consists of a background image, or video, or illustrations, or animations, or color gradients, with some text and, navigation menus. The hero section is a website design term that is used to describe an oversized banner image at the top of a website that usually extends full width.

A hero section should consist of a title, a short description, and a link to direct the user to the other page. Hero Section is mainly used to catch the visitor's attention.

In this blog (Gradient Hero Section with Navigation Menu), there is a company name, heading, a title, a short description, some social media icons to contact, and an icon present at the top right of the hero section. By clicking on that icon, the menus will slide from the right side of the hero section.

The source code of this Gradient Hero Section with Navigation Menu is given below, if you want the source code of this program, you can copy it. You can use this Gradient Hero Section with Navigation Menu with your creativity and can take this project to the next level.

Gradient Hero Section with Navigation Menu [Source Code]

To make this website, you would like to make three files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <title>Gradient Hero Section with menu|| Learningrobo</title> </head> <body> <section class="showcase"> <header> <h2 class="logo">Learning Robo</h2> <div class="toggle"></div> </header> <div class="text"> <h2>Get Gradient</h2> <h3>Hero section</h3> <p>Keep connected with us </p> Made with <span style="color:tomato;font-size:20px;">❤</span> by <br><a href="https://www.learningrobo.com/">Learning Robo</a> </div> <ul class="social"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </section> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> <script src="script.js"> </script> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to make a file with a .css extension. 


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.showcase {
    position: absolute;
    right: 0;
    width: 100%;
    min-height: 100vh;
    padding: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);  
    color: #fff;
    z-index: 2;
    transition: 0.5s;
}

.showcase.active {
    right: 300px;
}

.showcase header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 100px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    text-transform: uppercase;
    cursor: pointer;
}

.toggle {
    position: relative;
    width: 50px;
    height: 50px;
    background: url(https://cdn.pixabay.com/photo/2021/10/11/23/49/app-6702045__480.png);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: center;
    cursor: pointer;
    border-radius: 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.toggle.active {
    background: url(https://cdn.pixabay.com/photo/2016/09/05/10/50/app-1646214__480.png);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center;
    background-color: #fff;
}

.text {
    position: relative;
    z-index: 10;
}

.text h2 {
    font-size: 5em;
    font-weight: 800;
    line-height: 1em;
    text-transform: uppercase;
}

.text h3 {
    font-size: 4em;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
}

.text p {
    font-size: 1.1em;
    margin: 20px 0;
    font-weight: 400;
    max-width: 700px;
}

.text a {
    display: inline-block;
    font-size: 1em;
    background: #12192c;
    padding: 10px 30px;
    text-decoration: none;
    color: #4158D0;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.2s;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.text a:hover {
    letter-spacing: 6px;
}

.social {
    position: absolute;
    bottom: 20px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social li {
    list-style: none;
}

.social li a {
    display: inline-block;
    margin-right: 20px;
    transform: scale(0.8);
    transition: 0.5s;
}

.social li a:hover {
    transform: scale(0.8) translateY(-5px);
}
.social i{
    color:#fff;
    font-size: 30px;
}
.menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #12192c;
}

.menu ul {
    position: relative;
    list-style: none;
}

.menu ul li a {
    text-decoration: none;
    font-size: 24px;
    color: #fff;
}

.menu ul li a:hover {
    color:#FFCC70;
}


@media(max-width: 798px) {
    .showcase .showcase header {
        padding: 20px;
    }

    .text h2 {
        font-size: 2em;
        margin-bottom: 10px;
    }

    .text h3 {
        font-size: 1.5em;
    }

    .text p {
        font-size: 1em;
    }

    .text a {
        font-size: 0.8em;
    }
}
JavaScript makes the page work functionally, which slides the menu from the right side of the hero section on a button click. At last, create a JavaScript file with the name of script.js and remember that you have got need to make a file with a .js extension. 


const menuToggle = document.querySelector('.toggle')
const showcase = document.querySelector('.showcase')

menuToggle.addEventListener('click', () => {
    menuToggle.classList.toggle('active')
    showcase.classList.toggle('active')
})
We hope you would like this Gradient Hero Section with Navigation Menu.

Thank you for reading our blog. If you face any problem in creating this Gradient Hero Section with Navigation Menu, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome