Beautiful & Simple Home Page Design

 HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dear page</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header class="background">
        <div class="container">
            <div class="navbar">
                <div class="home">
                    <a class="items" href="">HOME</a>
                </div>

                <div class="about">
                    <a class="items" href="">CONTACT</a>
                </div>

                <div class="about">
                    <a class="items" href="">ABOUT</a>
                </div>
            </div>

            <div class="discription">
                <h1 class="bold">IMPOSSIBLE</h1>
                <h1 class="normal">only means that you haven't found solution yet</h1>
               
            </div>

            <a href="" class="btn1">SET UP NOW</a>
            <p class="d-para">Move ahead to success</p>
        </div>

        <h1 class="madan">- By Madan</h1>
    </header>
   
</body>
</html>

CSS CODE

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Lobster&family=Montserrat:wght@400;700&family=Open+Sans:wght@500;600&family=Ubuntu:wght@500&display=swap');

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

html{
    font-size: 62.5%;
}

body{font-family: 'Open Sans', sans-serif;}

.background{
    background:linear-gradient(rgb(0,0,0,0.5),rgb(0,0,0,0.5)),  url("../img/marcela-laskoski-YrtFlrLo2DQ-unsplash.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.container{
    max-width: 135rem;
    margin: 0 auto;
}


.navbar{
    /* border: 4px solid black; */
    display: flex;
    padding-top: 2rem;
}

.navbar .items{
    font-size: 1.8rem;
    margin: 0 1.5rem;
    text-decoration: none;
    color: white;
}

.items:hover{
    border-bottom: 2px solid;
    border-image: linear-gradient(to left, white, yellow, red) 1;
}


.discription{
    width: 50rem;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-45%,-50%);
   
}

.discription .bold{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 9.8rem;
    font-weight: 100;
    text-align: center;
    color: white;
}

.discription .normal{
    margin-top: -2rem;
    text-align: center;
    color: white;
}

.btn1{
    text-decoration: none;
    color: white;
    background-color: coral;
    border: 2px solid rgb(255, 255, 255);
    font-size: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 40px;
    position: absolute;
    top: 68%;
    left: 52%;
    transform: translate(-52%,-54%);
}

.btn1:hover{
    background-color: rgb(255, 86, 80);
}

.d-para{
    position: absolute;
    font-size: 1.2rem;
    top: 73.2%;
    left: 54%;
    transform: translate(-73.2%,-54%);
    color: white;
}

.madan{
    color: white;
    position: absolute;
    top: 80%;
    left: 58%;
    transform: translate(-80%, -58%);
    font-family: 'Lobster', cursive;
    font-weight: 100;
}


/* ------------------------------------------------------------------------ */

@media (max-width: 300px){
    html{
        font-size: 50%;
    }

    .navbar{
        margin: 0 auto;
    }

    .discription{
        width: 30rem;
        padding-bottom: 0.1rem;
    }

    .discription .bold{
        font-size: 5rem;

    }

    .d-para{
        top: 72.2%;
        left: 60%;
    }

    .discription .normal{
        font-size: 1rem;
        margin-top: -1rem;
    }



}

@media(min-width:301px) and (max-width:400px){
    html{
        font-size: 52%;
    }

    .navbar{
        width: 30rem;
        margin: 0 auto;
    }

    .discription{
        width: 30rem;
        padding-bottom: 0.1rem;
    }

    .discription .bold{
        font-size: 6rem;

    }

    .d-para{
        top: 72.2%;
        left: 59.5%;
    }

    .discription .normal{
        font-size: 1rem;
        margin-top: -1rem;
    }

}

@media(min-width:401px) and (max-width:500px){
    html{
        font-size: 52%;
    }

    .navbar{
        width: 30rem;
        margin: 0 auto;
    }

    .discription{
        max-width: 80rem;
        padding-bottom: 0.1rem;
    }

    .discription .bold{
        font-size: 6.8rem;

    }

    .d-para{
        top: 72.2%;
        left: 56.5%;
    }

    .discription .normal{
        font-size: 1.3rem;
        margin-top: -1rem;
    }
}

@media(min-width:500.1px) and (max-width:760px){
    html{
        font-size: 55%;
    }

    .navbar{
        width: 30rem;
        margin: 0 auto;
    }

    .discription{
        max-width: 80rem;
        padding-bottom: 0.1rem;
    }

    .discription .bold{
        font-size: 7rem;

    }

    .d-para{
        top: 72.2%;
        left: 55.5%;
    }

    .discription .normal{
        font-size: 1.4rem;
        margin-top: -1rem;
    }
}

@media(min-width:760.1px) and (max-width:900px){
    html{
        font-size: 60%;
    }
    .discription .bold{
        font-size: 7rem;
    }
    .d-para{
        top: 72.4%;
        left: 55%;
    }

    .discription .normal{
        font-size: 1.4rem;
        margin-top: -1rem;
    }
}

@media(min-width:900.1px) and (max-width:1200px){
    .d-para{
        top: 72.6%;
        left: 54%;
    }
}

@media(min-height:800px) and (max-width:950){
    .background{
        height: 100%;
        width: 100%;

    }
}

@media (orientation: landscape) and (max-height:500px){
    .background{
        height: 90vmax;
    }

    .d-para{
        top: 76.2%;
        left: 56%;
    }

    .madan{
        top: 90%;
    }
}


Images can be added by you according to requirement

Comments

Post a Comment

Popular posts from this blog

Gsap effect on click

 Gsap effect on click   < div class = "item" >     < div class = "circle" ></ div >     < h1 class = "head" >Angela</ h1 >   </ div > Here is the same code, small gsap effect on click; * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } body {     display: flex ;     justify-content: center ;     align-items: center ;     height: 100 vh ;     background-color: rgb ( 10 , 8 , 19 );     color: white ;     font-family: sans-serif ; } .item {     display: flex ;     gap: 1 rem ;     align-items: center ;     cursor: pointer ; } .circle {     height: 20 px ;     width: 20 px ;     background-color: white ;     border-radius: 50 % ; } Javascript; gsap . defaults ({ duration : 0.2 }) const myAnime = gsap . timeline ({ paused...
Read more

Gsap timeline position parameters

 Gsap timeline position parameters In the following timeline code:  let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }) normally when animation of box1 completed in 1s then box2 starts and after 1second of box2 animation of box3 starts if the duration of box1 was 5 second then animation of box1 will take 5s to complete and then only animation of box2 starts. For more enhancement the position parameter was introduced Some of the examples of position parameter are: 1. let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }, 1 ) On that box 3 there is "1" outside the {} which means that   start exactly at a time of 1 It do...
Read more

Scroll magic javascript

 Scroll magic code Script tags used in html are:     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referre...
Read more