Skip to main content

Welcome

  This blog is about coding and programming. In this blog, I will share my codes and notes.

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 a simple landing page using HTML & CSS - scoobcode

A landing page is the most important thing for businesses. Here I show you how to create a simple landing page for your businesses. It is simple and easy to learn. For this project, I used HTML & CSS. To watch the full video tutorial Click here Output Landing page 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>Simple landing page</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="logo"> <b>LOGO</b> </div&

Create NavBar using HTML & CSS (flexbox) - scoobcode

The navigation bar is the most important part of a webpage or website. There have many ways to make a beautiful navbar. Here in this blog,  we are going to learn some basic use of flexbox. How to create a navbar using flexbox property in CSS. I've also uploaded the full tutorial video you can check the video. Click here to watch the video. To start the code we need a code editor or IDE. Here I use  Visual studio code  (recommended) for my coding. To download  Visual studio code   click here Here is the output Tips Press ! to get Emmet Abbreviation (Work in Visual studio code) Source code      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>NavBar</title>     <link rel="stylesheet" href=&quo