Home / Project / Cool Menu using HTML and CSS

Cool Menu using HTML and CSS

-

hello everyone and welcome back to a new project. Today's project will be about creating an inclined menu using HTML and CSS, it's a cool project and I see it original to make it like this and the result looks so beautiful.
for this project I used Clippy, that is a tool that allows us to generate CSS code for the clipping effect and we will use the transform property that allows us to rotate our main menu.
you can watch the video tutorial if you want to learn how to make.
I will also give you the source code at the end of this article

now let's see together the source code

HTML Code



<!DOCTYPE HTML>

<html>
    <head>
        <title>Cool menu</title>
        <link rel="stylesheet" href="main.css">
    </head>

    <body>
        <div class="navbar">
            <div class="menu">
                <ul>
                    <li><a href="#">Our Work</a></li>
                    <li><a href="#">Our Team</a></li>
                    <li><a href="#">About us </a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div>
        </div>
        
        <div class="section">
         <h1>Cool menu</h1>
        </div>
        
        <div class="container">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet eu tellus a facilisis. Phasellus tincidunt lacus in diam tincidunt, vel aliquet leo dictum. Sed dignissim risus a arcu ornare, ac semper tortor iaculis. Maecenas a diam aliquet, porta quam a, porta sem. Duis a pellentesque erat. Nam ut diam imperdiet, pellentesque ipsum sit amet, dignissim augue. In et eleifend mi. Duis efficitur id justo non dapibus. Donec in felis facilisis, volutpat magna accumsan, elementum purus. Maecenas vel consequat metus, in fringilla lacus.

Praesent eleifend feugiat orci vitae egestas. Pellentesque interdum felis ipsum, vel suscipit metus imperdiet at. Etiam finibus, ex at eleifend porttitor, lacus nibh bibendum enim, eget iaculis velit turpis a mauris. Nullam eget condimentum nisl. Nulla mollis sem nulla, tincidunt rhoncus velit fermentum non. Donec rhoncus sapien non est cursus, ut blandit ante viverra. Nam nec elit sit amet diam venenatis sollicitudin. In congue dapibus lacus. Etiam ornare ultricies turpis. Praesent quis urna vel nisl tincidunt tincidunt.

Nullam facilisis sed nunc ullamcorper euismod. Vestibulum molestie id lectus non porta. Nullam sit amet enim id lacus tempus pulvinar. Cras placerat interdum sapien, sed maximus lorem maximus vitae. Sed eget condimentum lorem. Sed volutpat rutrum urna, vel aliquet turpis rhoncus nec. In ac tincidunt turpis. Cras in viverra sem. Aliquam aliquam, ex in tincidunt suscipit, ante ante tincidunt metus, ut vestibulum purus risus quis diam.

Fusce eu mi iaculis, pretium eros nec, fringilla purus. Vestibulum efficitur ipsum nisi, a varius eros consequat nec. Etiam a libero eget justo efficitur consequat. Sed eleifend scelerisque facilisis. Pellentesque semper ut tellus eu blandit. Phasellus varius bibendum felis ut rhoncus. Integer pulvinar varius diam, quis cursus felis facilisis et. Nulla non elit a erat posuere ullamcorper vitae at lorem. Vivamus facilisis purus blandit, mollis dui in, condimentum nisl. Aenean mattis vestibulum neque, vel iaculis dui bibendum sollicitudin. Suspendisse convallis aliquam lacus, vulputate ullamcorper tortor. Morbi vitae tincidunt arcu, in facilisis urna. Ut facilisis risus ut ante lacinia, eget commodo nisl vestibulum.

Proin pretium ipsum sodales, mattis nunc ut, malesuada magna. Quisque eu nulla nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sit amet tincidunt ex. Etiam placerat vestibulum ligula, non aliquet sapien bibendum a. Pellentesque varius facilisis libero, vitae placerat quam posuere a. Duis sed ante neque.
            </p>
        </div>
    
    </body>
</html>

CSS CODE



*{
    margin: 0;
    padding: 0;
    outline: 0;
}

.menu{
    background-color: #fafafa;
    padding: 30px;
    position: fixed;
    z-index: 5;
    width: calc(100% - 60px);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
}
.menu ul{
    transform-origin: center;
    transform: rotateZ(-1.5deg);
    margin: 10px;
}
.menu ul li{
    display: inline-block;
    font-size: 1.8rem;
    margin-right: 15px;
    
}
.menu ul li a{
    color: #212121;
    text-decoration: none;
    transition: all .4s;
}
.menu ul li a:hover{
    color: #EE761B;
}
.section{
    width: 100vw;
    height: 100vh;
    background-image: url(https://images.unsplash.com/photo-1553467105-bdb9ae8a7eff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1651&q=80);
    background-size: cover;
    background-position: center;
}
.section h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    background-color: rgba(64,64,64,.5);
    padding: 50px 0;
    width: 50%;
    text-align: center;
    text-transform: uppercase;
}

.container{
    position: relative;
    width: 80%;
    left: 50%;
    transform: translate(-50%);
    padding: 30px 10px;
}
p{
    width: 100%;
    font-size: 1.3rem;
    line-height: 2rem;
}

i hope that you liked this article, if it's the case than you can tell us in comment or contact our facebook page and tell us your question or problem that you faced.
Cool Menu using HTML and CSS Cool Menu using HTML and CSS Reviewed by Medics on March 30, 2019 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
-->
Powered by Blogger.