Simple Web design using HTML and CSS

 HTML CODE 1 (Index)

<!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>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://kit.fontawesome.com/0e138b760b.js" crossorigin="anonymous"></script>
</head>
<body>
    <header class="background">
        <div class="container">
            <nav class="navbar">
                <a href="./login.html" class="login">Login</a>
                <ul class="navitems">
                    <li class="item"><a href="https://www.facebook.com/profile.php?id=100051487969869">HOME</a></li>
                    <li class="item"><a href="">ABOUT</a></li>
                    <li class="item"><a href="">SERVICES</a></li>
                    <li class="item"><a href="">CONTACT</a></li>
                </ul>
            </nav>
<!-- --------------------------------------------------------------------------------------------------------- -->
            <section class="mainbody">
                <h1>OMGMDN</h1>
                <p class="para">Create Learn and start a new Journey</p>
                <a href="signup.html" class="getstarted">Get Started</a>
                <p class="para2">A beautiful start can be beautiful ending</p>
            </section>

        </div>

    </header>

    <section class="part2">
        <div class="container">
            <div class="expect">
                <h1>What you can Expect from us ?</h1>

                <div class="icons">
                    <div class="iconbox">
                        <i class="fas fa-comments fa-4x"></i>
                        <h2>Live Support</h2>
                    </div>
                   
   
                    <div class="iconbox">
                        <i class="fas fa-dove fa-4x" ></i>
                        <h2>Peace</h2>
                    </div>
   
                    <div class="iconbox">
                        <i class="fas fa-mug-hot fa-4x"></i>
                        <h2>Work with Us</h2>
                    </div>
   
                    <div class="iconbox">
                        <i class="fas fa-book-open fa-4x"></i>
                        <h2>Increase Creativity</h2>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <section class="collection">
        <div class="container">

            <div class="box box1">
                <div class="imgbox">
                    <img src="./img/computer with many lights.jpg" alt="">
                </div>

                <div class="textbox">
                    <h1>London</h1>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit laborum omnis, culpa delectus debitis modi ut ipsam excepturi et quibusdam tempore qui repudiandae, itaque aperiam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit voluptatem ullam iure cumque quas repudiandae!</p>
                </div>
            </div>
<!-- ------------------------------------------------------- -->
            <div class="box box2">
                <div class="imgbox">
                    <img src="./img/asian-girl-beautiful-girl-asian-woman-cute-5k-4500x2696-1541.jpg" alt="">
                </div>
                <div class="textbox">
                    <h1>Seoul</h1>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit laborum omnis, culpa delectus debitis modi ut ipsam excepturi et quibusdam tempore qui repudiandae, itaque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda iure recusandae voluptatum </p>
                </div>
            </div>


        </div>
    </section>

    <section class="lastsection">
        <div class="container">
            <div class="lastbar">
                <h1>Follow us</h1>
                <a href="https://www.facebook.com/Roshansh169"><i class="fab fa-facebook fa-3x"></i></a>
                <a href="https://www.instagram.com/madantimilsina3/"><i class="fab fa-instagram fa-3x"></i></a>
                <a href="https://twitter.com/madantimilsina5"><i class="fab fa-twitter fa-3x"></i></a>
                <p class="copy">Copyright &copy; All Right Reserve</p>

            </div>
    </div>
    </section>
   
</body>
</html>


HTML CODE 2 (Login Page)

<!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">
    <link rel="stylesheet" href="./css/style1.css">
    <title>Document</title>
</head>
<body>
    <header class="background">
        <div class="container">
            <div class="login">
                <h1>Welcome Back</h1>
                <p>Login with your email and password</p>
                <input class="data" type="text" placeholder="Email" required><br><br><br><br>
                <input class="data" type="password" name="" id="" placeholder="Password" required><br><br><br><br>
                <input class="button" type="submit" value="Login">

            </div>
        </div>

    </header>
</body>
</html>

HTML CODE 3 (Sign up)

<!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">
    <link rel="stylesheet" href="./css/style1.css">
    <title>Document</title>
</head>
<body>
    <header class="background">
        <div class="container">
            <div class="login">
                <h1>Welcome Back</h1>
                <p>Login with your email and password</p>
                <input class="data" type="text" placeholder="Email" required><br><br><br><br>
                <input class="data" type="password" name="" id="" placeholder="Password" required><br><br><br><br>
                <input class="button" type="submit" value="Login">

            </div>
        </div>

    </header>
</body>
</html>

--------CSS CODE -------

CSS CODE 1 - For Index page:

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Lobster&family=Oswald&family=Outfit:wght@200;400;500;600;900&display=swap');

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

html{
    font-size: 62.5%;
}

body{
    font-family: 'Outfit', sans-serif;
    background-color: #c2c2c2;
}

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

.background{
    background:linear-gradient(rgb(0,0,0,0.4), rgb(0,0,0,0.4)), url("../img/home\ background.jpg");
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 5rem;
}


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


.container{
    width: 94%;
    margin: 0 auto;
    max-width: 1400px;
}

/* --------------------------------NAVBAR------------------------------- */

.navbar .login{
    float: left;
    text-decoration: none;
    font-size: 3rem;
    padding: 0.5rem 1.5rem;
    color: black;
    background-color: white;
    margin-top: 1rem;
    border-radius: 40px;
    font-weight: 500;
}

.navbar .navitems{
    float: right;
    padding-top: 1.5rem;
}

.navitems .item{
    display: inline;
    margin: 0 2rem;
    font-size: 2.5rem;
}

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

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

.item:hover{
    border-bottom: 2px solid white;
}

.login:hover{
    background-color: black;
    color: white;
}

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

.mainbody{
    text-align: center;
    margin-top: 18rem;
    color: white;
}

.mainbody h1{
    font-size: 8rem;
}

.mainbody .para{
    font-size: 5rem;
    font-family: 'Lobster', cursive;
    margin-bottom: 12rem;
}

.mainbody .getstarted{
    text-decoration: none;
    color: black;
    font-size: 5rem;
    background-color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 40px;
    font-weight: 500;
}

.mainbody .para2{
    margin-top: 4rem;
    font-size: 3rem;
    font-family: 'Dancing Script', cursive;
}

.getstarted:hover{
    background-color: black;
    color: white;
}

/* -------------------------------------------next page----------------------------------------- */

.expect{
    background-color: white;
    text-align: center;
    padding: 3rem 0rem;
}

.expect h1{
    font-size: 4rem;
    margin-bottom: 3rem;
}

.expect .fas{
    margin: 2rem 2rem;
}

.expect p{
    display: inline;
}


.icons .iconbox{
    float: left;
    width: 25%;
}

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

.part2{
    margin-bottom: 4rem;
   
}

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

.box{
    margin-bottom: 5rem;
    background-color: white;
}

.box1 .imgbox, .box2 .textbox{
    float: left;
}

.box1 .textbox, .box2 .imgbox{
    float: right;
}

.textbox{
    font-size: 2.5rem;
    width: 58%;
    padding: 1.5rem;
}

.textbox h1{
    font-size: 5rem;
    margin-bottom: 1rem;
}

.box2 .imgbox, .box1 .imgbox{
    width: 40%;
    height: 30rem;
}



.imgbox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



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

.container .lastbar h1{
    font-size: 4rem;
    color: white;
    margin-bottom: 1rem;
}

.lastbar .container{
    text-align: center;
}

.lastbar a{
    text-decoration: none;
    color: white;
    margin: 0rem 0.5rem;
}

.lastbar .copy{
    font-size: 1.5rem;
    color: white;
    margin-top: 1.5rem;
}

.lastbar{
    padding: 3.5rem 0rem;
    margin-top: 5rem;
    background-color: rgb(24, 20, 20);
    text-align: center;
}


@media(max-width: 350px){

    html{
        font-size: 45%;
    }

    .navbar .login{
        font-size: 1rem;
        margin-top: 1.5rem;
    }

    .icons{
        padding: 0 1rem;
    }

    .navitems .item{
        font-size: 1rem;
        margin:0rem 0.4rem;
    }

    .navbar .navitems{
        width: 60%;
        padding-top: 2.5rem;
    }

    .mainbody h1{
        font-size: 6rem;
    }

    .mainbody .para{
        font-size: 3rem;
        width: 60%;
        margin: 0 auto;
        margin-bottom: 20rem;
    }

    .mainbody .getstarted{
        font-size: 3rem;

    }

    .mainbody .para2{
        font-size: 2rem;
    }

    .mainbody{
        margin-top: 24rem;
    }

    .expect h1{
        font-size: 3rem;
    }

    .box2 .imgbox, .box1 .imgbox, .box1 .textbox, .box2 .imgbox{
        float: none;
        width: 100%;

    }

    .textbox{
        width: 100%;
        padding: 1rem;
        font-size: 2rem;
    }

    .textbox h1 {
        font-size: 2.5rem;
    }


}




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

    .navbar .login{
        font-size: 2.5rem;
    }

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

    .navbar .navitems{
        width: 70%;
        padding-top: 2.5rem;
    }

    .mainbody h1{
        font-size: 6rem;
    }

    .mainbody .para{
        font-size: 3rem;
        width: 60%;
        margin: 0 auto;
        margin-bottom: 20rem;
    }

    .mainbody .getstarted{
        font-size: 3rem;

    }

    .mainbody .para2{
        font-size: 2rem;
    }

    .mainbody{
        margin-top: 24rem;
    }

    .expect h1{
        font-size: 3rem;
    }

    .box2 .imgbox, .box1 .imgbox, .box1 .textbox, .box2 .imgbox{
        float: none;
        width: 100%;

    }

    .textbox{
        width: 100%;
        padding: 1rem;
    }

    .textbox h1 {
        font-size: 3rem;
    }


   
}

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

    .navbar .login{
        font-size: 2.5rem;
    }

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

    .navbar .navitems{
        text-align: center;
        width: 75%;
        padding-top: 2.5rem;
    }

    .mainbody h1{
        font-size: 6rem;
    }

    .mainbody .para{
        font-size: 3rem;
        width: 60%;
        margin: 0 auto;
        margin-bottom: 20rem;
    }

    .mainbody .getstarted{
        font-size: 3rem;

    }

    .mainbody .para2{
        font-size: 2rem;
    }

    .mainbody{
        margin-top: 24rem;
    }

    .expect h1{
        font-size: 3rem;
    }

    .box2 .imgbox, .box1 .imgbox, .box1 .textbox, .box2 .imgbox{
        float: none;
        width: 100%;

    }

    .textbox{
        width: 100%;
        padding: 1rem;
    }

    .textbox h1 {
        font-size: 3rem;
    }

}

@media(min-width: 769px) and (max-width: 1200px){
    html{
        font-size: 55%;
    }
    .textbox{
        padding: 1rem;
    }

    .navbar .navitems{
        padding-top: 3rem;
    }

    .mainbody{
        margin-top: 48rem;
    }

    .navbar .login{
        margin-top: 3rem;
    }

}

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

    .navbar .login{
        font-size: 2.5rem;
    }

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

    .navbar .navitems{
        width: 70%;
        padding-top: 2.5rem;
    }

    .mainbody h1{
        font-size: 6rem;
    }

    .mainbody .para{
        font-size: 3rem;
        width: 60%;
        margin: 0 auto;
        margin-bottom: 6rem;
    }

    .mainbody .getstarted{
        font-size: 3rem;

    }

    .mainbody .para2{
        font-size: 2rem;
        margin-top: 2rem;
    }

    .mainbody{
        margin-top: 12rem;
    }

    .expect h1{
        font-size: 3rem;
    }

    .box2 .imgbox, .box1 .imgbox, .box1 .textbox, .box2 .imgbox{
        float: none;
        width: 100%;

    }

    .textbox{
        width: 100%;
        padding: 1rem;
    }

    .textbox h1 {
        font-size: 3rem;
    }


}

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


CSS CODE - 2 (For login Page)

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Lobster&family=Oswald&family=Outfit:wght@200;400;500;600;900&family=Roboto:wght@300;400;500&display=swap');

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

html{
    font-size: 62.5%;
}

body{
    color: white;
    background-color: #c2c2c2;
    font-family: 'Roboto', sans-serif;
}

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

.background{
    background: linear-gradient(rgb(0,0,0,0.6), rgb(0,0,0,0.6)), url("../img/login\ background.jpg");
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

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

.container{
    width: 94%;
    margin: 0 auto;
    max-width: 1400px;
    padding-top: 15rem;
}

.container .login{
    width: 60%;
    height: 45rem;
    margin: 0 auto;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.336);
}

.login h1{
    margin-bottom: 2rem;
    font-size: 5rem;
    margin-top: 2rem;
    padding-top: 5rem;

}

.login p{
    margin-bottom: 1rem;
}

.login .data{
    padding: 1rem 3rem;
    font-size: 2rem;
    border-radius: 25px;
}

.login .button{
    width: 15%;
    height: 4rem;
    font-size: 2rem;
    background-color: white;
    color: black;
    border-radius: 40px;
    border: 0;
    margin-top: 2rem;
}

.button:hover{
    background-color: black;
    color: white;
}

.button:active{
    background-color: tomato;
    color: black;
}


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

    .container .login{
        width: 90%;
    }

    .login h1{
        font-size: 4rem;
    }

    .login .data{
        padding: 1rem 3rem;
        font-size: 1.5rem;
        border-radius: 25px;
    }

    .login .button{
        width: 18%;
        height: 4rem;
        font-size: 1.5rem;
        background-color: white;
        color: black;
        border-radius: 20px;
        border: 0;
        margin-top: 2rem;
    }


   


}

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

    .container{
        padding-top: 20rem;
    }

    .container .login{
        width: 85%;
    }

    .login h1{
        font-size: 5rem;
        margin-bottom: 5rem;
    }

    .login .data{
        padding: 1rem 3rem;
        font-size: 1.5rem;
        border-radius: 25px;
    }

    .login .button{
        width: 18%;
        height: 4rem;
        font-size: 1.5rem;
        background-color: white;
        color: black;
        border-radius: 20px;
        border: 0;
        margin-top: 2rem;
    }


}

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

    .container{
        padding-top: 20rem;
    }

    .container .login{
        width: 85%;
    }

    .login h1{
        font-size: 5rem;
        margin-bottom: 5rem;
    }

    .login .data{
        padding: 1rem 3rem;
        font-size: 1.5rem;
        border-radius: 25px;
    }

    .login .button{
        width: 18%;
        height: 4rem;
        font-size: 1.5rem;
        background-color: white;
        color: black;
        border-radius: 20px;
        border: 0;
        margin-top: 2rem;
    }



}


@media(min-width: 769px) and (max-width: 1200px){
    html{
        font-size: 60%;
    }

    .container{
        padding-top: 16rem;
    }

    .container .login{
        width: 85%;
    }

    .login h1{
        font-size: 5rem;
        margin-bottom: 5rem;
    }

    .login .data{
        padding: 1rem 3rem;
        font-size: 1.5rem;
        border-radius: 25px;
    }

    .login .button{
        width: 18%;
        height: 4rem;
        font-size: 1.5rem;
        background-color: white;
        color: black;
        border-radius: 20px;
        border: 0;
        margin-top: 2rem;
    }

}

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

    .container{
        padding-top: 8rem;
    }
}

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


CSS CODE- 3 (For Sign Up page):

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Lobster&family=Oswald&family=Outfit:wght@200;400;500;600;900&family=Roboto:wght@300;400;500&display=swap');

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

html{
    font-size: 62.5%;
}

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

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

}

.container{
   
    width: 94%;
    margin: 0 auto;
    max-width: 1400px;
    padding-top: 8rem;
}

.signup{
    text-align: center;
    width: 60%;
    margin: 0 auto;
   
    background-color: rgba(0, 0, 0, 0.322);
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.signup h1{
    font-size: 4rem;
    padding-bottom: 2rem;
    text-transform: uppercase;
}

.signup p{
    padding-bottom: 1rem;
}

.signup .data{
    font-size: 2rem;
    padding: 0.5rem 1.5rem;
    border-radius: 40px;
}

.signup .age{
    width: 10%;
    text-align: center;
}

.signup .button{
    width: 18%;
    font-size: 1.5rem;
    border-radius: 40px;
    padding: 1rem;
    margin-top: 2rem;
    border: 0;
    color: black;
    background-color: white;
   
}

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

}



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

    .container{
   
        width: 94%;
        margin: 0 auto;
        max-width: 1400px;
        padding-top: 16rem;
    }

    .signup{
        text-align: center;
        width: 90%;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.322);
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .signup h1{
        font-size: 3rem;
        padding-bottom: 2rem;
        text-transform: uppercase;
    }

    .signup .data{
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
        border-radius: 40px;
    }

    .signup .age{
        width: 18%;
    }


    .signup .button{
        width: 30%;
        font-size: 1rem;
        border-radius: 40px;
        padding: 1rem;
        margin-top: 2rem;
        border: 0;
        color: black;
        background-color: white;
       
    }




}

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

    .container{
   
        width: 94%;
        margin: 0 auto;
        max-width: 1400px;
        padding-top: 20rem;
    }

    .signup{
        text-align: center;
        width: 90%;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.322);
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .signup h1{
        font-size: 3rem;
        padding-bottom: 2rem;
        text-transform: uppercase;
    }

    .signup .data{
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
        border-radius: 40px;
    }

    .signup .age{
        width: 15%;
    }


    .signup .button{
        width: 28%;
        font-size: 1.2rem;
        border-radius: 40px;
        padding: 1rem;
        margin-top: 2rem;
        border: 0;
        color: black;
        background-color: white;
       
    }


}

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

    .container{
   
        width: 94%;
        margin: 0 auto;
        max-width: 1400px;
        padding-top: 16rem;
    }

    .signup{
        text-align: center;
        width: 90%;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.322);
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .signup h1{
        font-size: 3.5rem;
        padding-bottom: 2rem;
        text-transform: uppercase;
    }

    .signup .data{
        font-size: 1.5rem;
        padding: 0.5rem 1rem;
        border-radius: 40px;
    }

    .signup .age{
        width: 15%;
    }


    .signup .button{
        width: 28%;
        font-size: 1.2rem;
        border-radius: 40px;
        padding: 1rem;
        margin-top: 2rem;
        border: 0;
        color: black;
        background-color: white;
       
    }

}

@media(min-width: 769px) and (max-width: 1200px){
    html{
        font-size: 60%;
    }

    .container{
   
        width: 94%;
        margin: 0 auto;
        max-width: 1400px;
        padding-top: 28rem;
    }

    .signup{
        text-align: center;
        width: 90%;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.322);
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .signup h1{
        font-size: 4rem;
        padding-bottom: 2rem;
        text-transform: uppercase;
    }

    .signup .data{
        font-size: 2.5rem;
        padding: 0.5rem 1rem;
        border-radius: 40px;
    }

    .signup .age{
        width: 12%;
    }


    .signup .button{
        width: 20%;
        font-size: 2rem;
        border-radius: 40px;
        padding: 1rem;
        margin-top: 2rem;
        border: 0;
        color: black;
        background-color: white;
       
    }

}

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



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