Skip to main content

Create animate tour website using HTML and CSS - scoobcode

Here in this blog, we will learn how to create an animated tour website in just some line of HTML and CSS code. Also, I will give you the source code copy it, and make your own design. We will see Flexbox, Animations, Transitions property, and many more.

Live preview website: https://bit.ly/3yNMIwm

Full tutorial video: https://youtu.be/_E07NfghI_c

Output

Animate tour website

Source code

👉 HTML

<!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>India Tourism</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <b>Indian Tourism</b>
            </div>
            <div class="menu">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Place</a>
                <a href="#">Contact</a>
            </div>
        </nav>
    </header>
    <section>
        <div class="info">
            <h3>Welcome to India</h3>
            <h1>Visit <span class="animated-text"></span> </h1>
            <p>"You got a spiritual touch in every corner of India"</p>
        </div>
        <div class="btn">
            <input type="button" value="Join">
            <input type="button" value="Learn more">
        </div>
    </section>
    <footer>
        Copyright 2021 - develop by scoobcode
    </footer>
</body>
</html>

👉 CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: none;
}
body{
    height: 100vh;
    background-image: linear-gradient(rgb(0,0,0,0.5),rgb(0,0,0,0.5)), url(bg.jpg);
    background-position: center;
    background-size: cover;
}

/* nav here  */
nav{
    display: flex;
    height: 15vh;
    justify-content: space-around;
    align-items: center;
}
nav b{
    font-size: 25px;
    color: white;
    text-transform: uppercase;
}
nav a {
    color: white;
    font-size: 20px;
    margin: 0 20px;
}
nav a:hover{
    color: rgb(248, 0, 0);
}

/* section here  */
section{
    display: flex;
    height: 80vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}
.info h3{
    font-size: 30px;
    font-weight: lighter;
    margin-bottom: 20px;
}
.info h1{
    font-size: 45px;
    margin-bottom: 20px;

}
.animated-text:after{
    content: '';
    animation: text 15s infinite linear;
    color: rgb(0, 255, 76);
    /* font-size: 60px; */
}
@keyframes text{
    0%{content: "Agra";}
    10%{content: "New Delhi";}
    20%{content: "Mumbai";}
    30%{content: "Rajasthan";}
    40%{content: "Rishikesh ";}
    50%{content: "Varanasi ";}
    60%{content: "Amritsar";}
    70%{content: "Goa";}
    80%{content: "Kerala";}
    90%{content: "Darjeeling";}
    100%{content: "Kolkata";}
}
.info p{
    font-size: 20px;
}
.btn input{
    font-size: 15px;
    padding: 10px 30px;
    border-radius: 5px;
    background-color: rgb(82, 34, 12);
    color:rgb(255, 255, 255);
    margin-top: 20px;
}
.btn input:hover{
    background-color: rgb(0, 255, 42);
    color: black;
    cursor: pointer;
}

/* footer here  */
footer{
    color: white;
    float: right;
    margin-right: 30px;
}

You can support me to like this blog and share it with your programmer friends. Go to my youtube channel scoobcode and watch the full tutorial video.

Comments

Popular posts from this blog

Create social media icon hover effect using HTML and CSS - scoobcode

Here in this blog, we going to learn how to create social media icon hover effect using only HTML & CSS. Make social media icons more attractive. Here I use Fontawesome for social media icons. Full video tutorial:  https://youtu.be/Ks2AHt3e_BM Fontawesome:  https://fontawesome.com Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Source code 👉 HTML <!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="style.css">     <script src="https://kit.fontawesome.com/e326c3f2a0.js" crossorigin="anonymous"></script>     <title>Hover effect</title> </head> <body>          <div class=&quo

Make profile card design with hover effect using HTML and CSS - scoobcode

This blog will show you how to make a profile card design with a hover effect using HTML and CSS. Profile card is used for a short introduction for a specific person. Full video tutorial:  https://youtu.be/9XXMJAuquCI Resources:  https://github.com/scoobcode/profile_card_design.git Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Source code 👉  HTML <!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>Info-card</title>     <link rel="stylesheet" href="style.css">     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUB