Advertisement Home page design

 Advertisement Home page design


HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/0e138b760b.js" crossorigin="anonymous"></script>
    <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>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header class="background">
        <div class="container">
            <nav class="navbar">
                <div class="navbox">
   
                    <div class="logo"><h1>Zunors</h1>
   
                    </div>
   
                        <ul class="navitems">
                            <li class="item hover"><a href="">Home</a></li>
                            <li class="item hover"><a href="">Features</a></li>
                            <li class="item hover"><a href="">Pricing</a></li>
                            <li class="item hover"><a href="">About</a></li>
                            <li class="item hover"><a href="">Contact</a></li>
                            <li class="item login"><a class="Llogin"href="">Login</a></li>
                            <li class="item signup"><a class="Lsignup"href="">Sign up</a></li>
                        </ul>
                </div>
               

                <h2 class="book"><i class="fas fa-bell"></i>Book your Course</h2>

                <div class="mainbody">
                    <h1 class="mainh1">A designs for learning OmgMdn</h1>
                </div>

                <div class="linebox">
                    <h1 class="line">For the things we have to learn before we can do them we learn by doing them</h1>
                </div>

                <div class="linkbox"><a href="" class="getstart">Get Started</a></div>
                <div class="circle"></div>


            </div>


           


        </nav>
    </header>

    <div class="container boxie">
        <div class="box2">
            <h1 class="box2title">What we provide</h1>
            <p class="box2para">Here you can learn about different type girlfriend and select them that you love</p>
        </div>

        <div class="iconbox">
            <div class="icons icon1">
                <i class="fas fa-laptop fa-2x"></i><br>
                <p>Live course with <br>girlfriend</p>
            </div>
   
            <div class="icons icon2">
                <i class="fas fa-comment-dots fa-2x"></i><br>
                <p>Conversation with <br>girlfriend</p>
            </div>
   
            <div class="icons icon3">
                <i class="far fa-heart fa-2x"></i><br>
                <p>She loves & cares <br>for you</p>
            </div>
        </div>



        <div class="body3">
            <div class="image1">
                <img src="./img/liana-mikah-L5cEmk3ucYY-unsplash.jpg" class="imagetag" alt="">
            </div>

            <div class="sidecontain">
                <h1>You will feel Blessed and Awsome</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit totam itaque fugiat Lorem ipsum dolor, <br> sit amet consectetur adipisicing elit. Quo quam consectetur est. Nesciunt in tempore incidunt fugiat repudiandae non ipsam? Lorem ipsum dolor sit, amet <br> consectetur adipisicing elit. Cumque deleniti sapiente repellat earum at fugiat ipsa totam ea, nisi tenetur. <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed possimus nobis ab iusto quasi eligendi, molestias natus aliquid officia nihil tempora quas dolor, fugit quia. Mollitia voluptatum dolor officia cum.</p>

                <a href="" class="b3btn">Learn More</a>
            </div>
           
        </div>

        <div class="course">
            <h1 class="c-title">Our Popular Course</h1>
            <p class="c-para tgrey">Here you are getting many facilities you like and you will love it</p>
        </div>

        <div class="body4">
            <div class="box4 b1">
                <div class="ia img1"><img src="./img/pexels-san-engineer-2659939.jpg" alt="">
                    <div class="ih">
                        <h2>$200 Designeers</h2>
                        <p>They will design perfect girls and also find for you and you will so awsome omg Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit corrupti facilis eaque voluptatibus autem quos illum excepturi asperiores qui impedit.</p>
                    </div>
               
                </div>

               
               
            </div>
            <div class="box4 b2">
                <div class="ia img1"><img src="./img/pexels-nugroho-wahyu-3097112.jpg" alt="">
                    <div class="ih">
                        <h2>$200 Girls</h2>
                        <p>They will come to meet you and marry with you, omg now you are correct site join now Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit corrupti facilis eaque voluptatibus autem quos illum excepturi asperiores qui impedit.</p>
                    </div>
               
                </div>

               
               
               
            </div>
            <div class="box4 b3">
                <div class="ia img1"><img src="./img/pexels-apunto-group-agencia-de-publicidad-7752793.jpg" alt="">
                    <div class="ih">
                        <h2>$450 Guider</h2>
                        <p>There will Guider to give you training to talk with girls, you can choose your girl Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit corrupti facilis eaque voluptatibus autem quos illum excepturi asperiores qui impedit.</p>
                    </div>
               
                </div>

               
               
            </div>
        </div>


   

    </div>



    <section class="lastpart">
        <div class="subscribe">
            <h1 class="hsubscribe">Subscribe to OmgMdn</h1>
            <p>Subscribe us for to be up to date</p>

        </div>
       

        <input type="text" class="field" placeholder="Enter your email">
        <div class="linkb">
            <a href="" class="linka">Subscribe</a>
        </div>
       
       

    </section>

    <section class="about">
        <div class="container disco">
            <div class="aboutcomp">
                <h1 class="company-a">OmgMdn</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci harum sequi Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, blanditiis. co culpa non quid!</p>
            </div>

            <div class="cfeature">
                <h1 class="company-c">Company</h1>
                <ul class="clists">
                    <li class="clist">About</li>
                    <li class="clist">Location</li>
                    <li class="clist">Our Services</li>
                    <li class="clist">Email</li>
                    <li class="clist">Contact</li>
                </ul>
            </div>

            <div class="csupport">
                <h1 class="company-s">Support</h1>
                <ul class="suplists">
                    <li class="suplist">Support Center</li>
                    <li class="suplist">Quick Call</li>
                    <li class="suplist">Quick Chat</li>
                </ul>
            </div>

            <div class="social">
                <h1 class="company-soc">Follow us</h1>
                <i class="fab fa-facebook fa-2x"></i>
                <i class="fab fa-instagram fa-2x icon"></i>
                <i class="fab fa-twitter fa-2x icon"></i>
            </div>

           

           
        </div>
        <h3 class="copyright">Copyright &copy; 2021 All right reserved</h3>
    </section>
   
</body>
</html>


CSS CODE

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

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

html{
    font-size: 62.5%;
}

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

/* ----------------background----------------- */

.background{
    background: url("../img/pexels-artem-podrez-6787005.jpg");
    height: 98vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* --------------------------utitlity class---------------------- */
.container{
    max-width: 1400px;
    margin: 0 auto;
    width: 95%;
}

.tgrey{
    color: rgb(61, 54, 54);
}

/* -----------------------navbar---------------------- */


.navitems .item{
    font-size: 2rem;
    display: inline;
    padding-left: 3rem;
    padding-right: 3rem;
}

.navitems .hover:hover{
    border-bottom: 4px white solid;
}



.item a{
    text-decoration: none;
    color: black;
}

.navbox .navitems .login{
    margin-left: 6rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 40px;
    background-color: white;
}
.navbox .navitems .signup{
    margin-left: 4rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 40px;
    background-color: rgb(51, 22, 105);
}




.navitems .item .Lsignup{
    color: white;
}

.navbox .navitems .signup:hover{
    background-color: white;

}
.navbox .navitems .Lsignup:hover{
    color: black;


}


.navbox .navitems .login:hover{
    background-color: rgb(51, 22, 105);
}

.navitems .item .Llogin:hover{
    color: white;
}









.navbox .logo{
    float: left;
    font-size: 2rem;
    padding-top: 3rem;
    position: relative;
    bottom: 0.25rem;
    color: rgb(25, 12, 51);
   
}

.navbox .navitems{
    float:right;
    padding-top: 3rem;
}

.navbox::after{
    content: "";
    display: block;
    clear: both;
}

/* ------------------------------------------------------main body................................. */

.book{
    margin-top: 12rem;
}

.fas{
    margin-right: 0.5rem;
}

.mainbody{
    margin-top: 4rem;
    width: 45rem;
}
.mainbody .mainh1{
    font-size: 5rem;
}

.linebox{
    margin-top: 3rem;
    width: 25rem;
}

.linkbox{
   
    margin-top: 10rem;
    border: rgb(51, 22, 105) 2px solid;
    width: 15rem;
    text-align: center;
    padding: 1rem;
    border-radius: 40px;
    background-color: rgb(51, 22, 105);
   
}

.linkbox .getstart{
    text-decoration: none;
    font-size: 2rem;
    color: white;
   
}

.circle{
    background-color: rgb(51, 22, 105);
    height:10rem;
    width: 10rem;
    position: absolute;
    bottom: 38%;
    left: 38%;
    border-radius: 50px;

}

.circle:hover{
    background-color: white;
}

/* ---------------------------2nd body-------------------------- */

.container .box2{
    margin-top: 10rem;
    width:45rem;
    text-align: center;
    position: relative;
    left: 35%;
    font-family: 'Montserrat', sans-serif;
}

.box2 .box2para{
    margin-top: 1rem;
    font-size: 1.5rem;
    color: rgb(80, 77, 77);
}
.box2 .box2title{
    font-size: 4rem;
    color: rgb(34, 31, 31);
}

/* ----- */

.container .iconbox{
    margin-top: 8rem;
    margin-bottom: 8rem;
}

.iconbox .icons{
    float: left;
    width: 33.33%;
    text-align: center;
    font-size: 1.7rem;
    font-family: Product Sans;
}

.iconbox::after{
    content: "";
    display: block;
    clear: both;
}

.icons i{
    margin-bottom: 2rem;
    color: rgb(51, 22, 105);
}

/* ------------------------------------------thrird body------------------------- */

.body3{
    margin-bottom: 5rem;
}


.body3 .image1{
    float: left;
    width: 45%;
    height: 245%rem;
}

.body3 .sidecontain{
    float: right;
    width: 45%;
    text-align: left;
    font-family:sans-serif;
}

.body3::after{
    content: "";
    display: block;
    clear: both;
}

.sidecontain h1{
    font-size: 5rem;
}

.sidecontain .b3btn{
    font-size: 2rem;
    text-decoration: none;
    color: white;
    background-color: rgb(51, 22, 105) ;
    padding: 1.5rem;
    border-radius: 40px;
   
   
   
}

.sidecontain p{
    font-size: 1.5rem;
    margin-top: 3em;
    margin-bottom: 9rem;
}

.image1 .imagetag{
    width: 100%;
    height: 100%;
}


/* -------------------------------body3-------------------------------- */

.container .course{
    margin-top: 5rem;
    margin-bottom: 5rem;
    width: 30rem;
}

.course .c-title{
    font-size: 3rem;
    margin-bottom: 1rem;
}

.course .c-para{
    font-size: 1.5rem;
}

/* ------------------body4-------------------------- */

.container .body4{
    margin-bottom: 3rem;
}


.body4 .box4{
    float: left;
    width: 32%;
}

.body4::after{
    content: "";
    display: block;
    clear: both;
}

.body4 .ia{
    width: 100%;
    height: 100%;
    margin-left: 0.8rem;
}

.box4 .ia img{
    width: 100%;
    height: 100%;
    opacity: 0.9;
    margin-left: 0.5rem;
}

.ia .ih{
    background-color: rgb(228, 227, 227);
    width: 20rem;
    border-radius: 10px;
    position: relative;
    left: 53%;
    top: -5rem;
    padding: 1rem;

}



.ih h2{
    font-size: 2rem;
}


/* ---------------------------------final--------------------------- */

.lastpart{
    background-color: rgb(245, 174, 209);
    height: 25rem;
    width: 100%;
    margin-bottom: 10rem;
   
}

.lastpart .subscribe{
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 2rem;

}

.subscribe h1{
    font-size: 3rem;
    text-transform: uppercase;
}

.field{
    position: relative;
    left: 50%;
    transform: translate(-50%);
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 10px;
    border: none;


}

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

.lastpart .linkb{
    width: 15rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    margin: 0 auto;
    margin-top: 2rem;
    border-radius: 40px;
    background-color: rgb(51, 22, 105);

}

.linkb .linka{
    font-size: 2rem;
    text-decoration: none;
    color: white;
   
}

.linkb:hover{
    background-color: white;
    color: rgb(0, 0, 0);
}

.linka:hover{
    color: black;
}

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

.disco{
    margin-bottom: 4rem;
}

.disco .aboutcomp{
    float: left;
    width: 15%;
    margin-right: 28rem;

}


.disco .cfeature{
    float: left;
    width: 15%;
    margin-right: 12rem;

}

.disco .csupport{
    float: left;
    width: 15%;
    margin-right: 3rem;

}

.disco .social{
    float: left;
    width: 10%;
    margin-right: 3rem;

}

.disco::after{
    content: "";
    display: block;
    clear: both;
}

.company-a{
    margin-bottom: 2rem;
}

.cfeature .company-c{
    margin-bottom: 2rem;
}

.csupport .company-s{
    margin-bottom: 2rem;
}

.social .company-soc{
    margin-bottom: 2rem;
}

.clist, .suplist{
    list-style-type: none;
    margin-bottom: 0.5rem;
}

.social .icon{
    margin-left: 0.5rem;
}

.copyright{
    text-align: center;
    margin-bottom: 5rem;
}


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

    .navbox{
        text-align: center;
    }

    .navbox .logo{
        float: none;
        display: block;
        width: 100%;

    }

    .navbox .navitems{
        float: none;
        display: block;
        width: 100%;
    }

    .navitems .item{
        font-size: 1.5rem;
       
    }

    .navbox .navitems .signup, .navbox .navitems .login{
        display: block;
        margin-top: 2rem;
        width: 20%;
        margin: 0 auto;
        margin-top: 1rem;

       
    }
   
    .circle{
        bottom: 20%;
        left: 45%;
    }

    .boxie{
        text-align: center;
    }

    .container .box2{
        width: 100%;
        margin: 0 auto;
        left: 0;
        margin-top: 3rem;
    }

    .sidecontain h1{
        font-size: 4rem;
        text-align:center;
    }

    .sidecontain p{
        font-size: 1.5rem;
        margin-top: 2rem;
        text-align: start;

    }

    .body3 .image1{
        float: none;
        width: 100%;
        display: block;
    }
    .body3 .sidecontain{
        margin-top: 6rem;
        float: none;
        display: block;
        width: 100%;
        text-align: center;
       
    }

    .sidecontain .b3btn{
        margin-top: 3rem;
    }

    .container .course{
        text-align: center;
        width: 100%;
    }

    .body4 .box4{
        float: none;
        display: block;
        width: 100%;
    }

    .ia .ih{
        width: 45%;
        text-align: center;
        margin-right: 2rem;
    }

    .container .course{
        margin-top: 10rem;
    }

    .disco .cfeature{
        margin-left: -22rem;
    }

    .disco .csupport {
        margin-left: -10rem;
    }

    .disco .social {
        width: 20%;
    }

    .disco{
        width: 90%;
        margin-left: 15%;
    }

   
}

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

    .navbox{
        text-align: center;
    }

    .navbox .logo{
        float: none;
        display: block;
        width: 100%;

    }

    .navbox .navitems{
        float: none;
        display: block;
        width: 100%;
    }

    .navitems .item{
        font-size: 1.5rem;
       
    }

    .navbox .navitems .signup, .navbox .navitems .login{
        display: block;
        margin-top: 2rem;
        width: 20%;
        margin: 0 auto;
        margin-top: 1rem;

       
    }
   
    .circle{
        bottom: 20%;
        left: 45%;
    }

    .boxie{
        text-align: center;
    }

    .container .box2{
        width: 100%;
        margin: 0 auto;
        left: 0;
        margin-top: 3rem;
    }

    .sidecontain h1{
        font-size: 4rem;
        text-align:center;
    }

    .sidecontain p{
        font-size: 1.5rem;
        margin-top: 2rem;
        text-align: start;

    }

    .body3 .image1{
        float: none;
        width: 100%;
        display: block;
    }
    .body3 .sidecontain{
        margin-top: 6rem;
        float: none;
        display: block;
        width: 100%;
        text-align: center;
       
    }

    .sidecontain .b3btn{
        margin-top: 3rem;
    }

    .container .course{
        text-align: center;
        width: 100%;
    }

    .body4 .box4{
        float: none;
        display: block;
        width: 100%;
    }

    .ia .ih{
        width: 45%;
        text-align: center;
        margin-right: 2rem;
    }

    .container .course{
        margin-top: 10rem;
    }

    .disco .cfeature{
        margin-left: -22rem;
    }

    .disco .csupport {
        margin-left: -10rem;
    }

    .disco .social {
        width: 20%;
    }

    .disco{
        width: 90%;
        margin-left: 15%;
    }

}

@media(min-width:769px) and (max-width:1200px){
    html{
        font-size: 55%;
    }
    .navbox{
        text-align: center;
    }

    .navitems .love::after{
        content: "";
        display: block;
        margin-bottom: 5rem;
    }

    .body4 .box4{
        float: none;
        display: block;
        width: 100%;

    }

    .disco .cfeature{
        margin-left: -22rem;
    }

    .disco .csupport {
        margin-left: -10rem;
    }

    .disco .social {
        width: 20%;
    }

    .disco{
        width: 90%;
        margin-left: 15%;

    }
}


Comments

Post a Comment

Popular posts from this blog

CSS simple grid layout

Image
HTML CODE < body >     < div class = "container" >         < div class = "item item1" >ONE</ div >         < div class = "item" >TWO</ div >         < div class = "item" >THREE</ div >         < div class = "item" >FOUR</ div >         < div class = "item last" >LAST</ div >     </ div > </ body > CSS CODE * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } html {     font-family: Product Sans; } .container {     display: grid ;     height: 100 VH ;     grid-template-columns: 100 px repeat ( 1 , 1 fr ) 100 px ;     grid-template-rows: 80 px repeat ( 1 , 1 fr ) 80 px ;     gap: 1 rem ;     padding: 1 rem ; } .item {     border: 5 px solid red ; } .item1 ...
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

GSAP Timelines

 GSAP Timeline Since in tween we have to set delay property to play one after another and if we change delay of one we must rewrite all timing of other items. But with the help of timeline all these problems are solved: gsap . to ( '.box1' ,{ y : 200 , duration : 1 , delay : 1 }) gsap . to ( '.box2' ,{ x : 100 , duration : 0.5 , delay : 2 }) gsap . to ( '.box3' ,{ y : 400 , duration : 1 , delay : 3 }) gsap . to ( '.box4' ,{ y : 200 , duration : 1 , delay : 4 }) We should set delay after each to play this in sequence, if we set delay of box4 to 1 then our box1 and box4 will move together, so also need to estimate time correctly.  A timeline is created with gsap.timeline(); All tweens in a timeline naturally play one after the other. The same tween code written in timeline is below: gsap . timeline ()     . to ( ".box1" , { y : 200 , duration : 1 })     . to ( ".box2" , { x : 100 , duration : 0.5 })     . to ( ".box3" , { y : ...
Read more