HTML AND CSS, YouTube

Create Animated Website Using HTML5 & CSS3

Create Animated Website Using HTML5 & CSS3

Coding BD given here Create Animated Website Using HTML5 & CSS3. We created a html and css full website. It is the most important part Of animated website. We have given more importance to css effects. We have used the latest animation effects because they need highly effective animation. Thank you so much.

Create Animated Website Using HTML5 & CSS3

😍😍 If You like this video Please like, share and subscribe This video.😍😍

😍😍 Check Others Programming Video👇

➡️New Year Countdown Clock: https://www.youtube.com/watch?v=7UQL5… 

➡️ CSS 3d Layered Image Hover Effects CSS: https://www.youtube.com/watch?v=0qdWV… 

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART… 

➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLky

➡️ CSS Clip Path Hover Circle Hover Effects: https://www.youtube.com/watch?v=cRSgo

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5

➡️  Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF… 

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuV… 

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6Hp… 

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR…  

➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJ… 

➡️ Animated eid mubarak 2021 using Html CSS & Javascript: https://www.youtube.com/watch?v=60H2g… 

Here is all Source code. You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!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>Website Home Component</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section>
        <div class="top__bar">
            <h1>Web Solution</h1>
            <div class="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

        <div class="main_content">
            <div class="row">
                <div class="col-md-5">
                    <div class="content">
                        <h2>Web <br> Solution...</h2>
                        <h6>We Design your dream & faith fully</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae alias earum, voluptas temporibus quibusdam rem? voluptas temporibus quibusdam rem? voluptas temporibus quibusdam rem?</p>
                        <button>Read More</button>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="side_Image">
                        <img src="img.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600;700;800&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
a {
    text-decoration: none;
}
.row {
    width: 100%;
    height: 95vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.col-md-5 {
    width: 50%;
    position: relative;
}
.col-md-7 {
    width: 70%;
}

body {
    background: #c5ddff;
}

/* ==================== Main code Start here ==================*/

section {
    width: 100%;
    height: 100%;
    position: relative;
}

.top__bar {
    width: 100%;
    height: 100px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.top__bar h1 {
    font-size: 24px;
}

.top__bar h1::first-letter {
    font-size: 30px;
    color: red;
}

.top__bar .menu ul {
    display: flex;
}

.top__bar .menu ul li {
    list-style: none;
    padding: 0 10px;
    letter-spacing: 2px;
    font-weight: 700;
}

.top__bar .menu ul li a {
    color: black;
}

.main_content {
    width: 100%;
    padding: 0 50px;
}

.main_content .content h2 {
    font-size: 80px;
    font-weight: 700;
}
.main_content .content h6 {
    font-size: 20px;
    letter-spacing: 2px;
    margin: 10px 0;
    font-weight: 300;
}

.main_content .content p {
    font-size: 18px;
    color: #383838cd;
}

.main_content .content button {
    padding: 15px 35px;
    font-size: 15px;
    color: #000000;
    margin: 15px 0;
    font-weight: 700;
    background: transparent;
    border: 2px solid #000000;
    transition: 0.5s;
    cursor: pointer;
    border-radius: 40px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

.main_content .content button:hover {
    color: #fff;
    background: #000;
}

.main_content .side_Image {
    width: 100%;
    height: 100vh;
    animation: animated 10s linear infinite;
    -webkit-animation: animated 10s linear infinite;
}

@keyframes animated {
    0% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
    }
    25% {
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
        -o-transform: translateY(25px);
    }
    50% {
        transform: translateY(40px);
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
    }

    75% {
        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
        -ms-transform: translateY(50px);
        -o-transform: translateY(50px);
    }
    100% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
}
}

.main_content .side_Image img{
    margin-left: 50px;
    width: 90%;
    height: auto;
}

Don’t Forget to Follow me on all Social Network,

YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw

Facebook Page: Coding BD – https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat-hossain-0617961b1/

GitHub: https://github.com/cgsaleh8383

Animation is what makes a website attractive to the user. When a user enters your website, if he does not like your website, he will leave your website And so the animation is very important for a website now. You can check out our other posts. suppose Create Animated Website Using HTML5 & CSS3 , Creative Product Card UI Design in HTML CSS

#codingbd #ecommerce #htmlcss

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *