Happy New Year 2024

 HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy New Year</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="msg">
        Happy New Year
    </div>
    <div class="from">From Debadatta</div>
    <div class="year">
        <span class="first_year">
            <span class="y1">2</span>
            <span class="y2">0</span>
            <span class="y3">2</span>
        </span>
        <span class="old">3</span>
        <span class="y4 new">4</span>
        <div class="ballon"></div>
    </div>
</body>
</html>

CSS

*,
*:after,
*:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

body {
    background-color: #000;
    overflow: hidden;
    height: 100vh;
}

.msg {
    width: 100%;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 100px;
    font-weight: bolder;
    color: #9900ff;
    text-align: center;
    position: absolute;
    top: 50%;
    opacity: 0;
    animation: message 2s ease-in-out 4.5s forwards;
}

@keyframes message {
    0% {
        opacity: 0;
        margin-top: 0;
    }

    100% {
        opacity: 1;
        margin-top: -200px;
    }
}

.y1 {
    color: #fff;
}

.y2 {
    color: #fff;
}

.y3 {
    color: #fff;
}

.y4 {
    color: #fff;
}

.old {
    color: #fff;
    position: absolute;
    top: 0%;
    animation: old_animation 2s ease-in-out 3s forwards;
    margin-left: -80px;
}

@keyframes old_animation {
    0% {
        top: 0%;
    }

    100% {
        top: -450%;
    }
}

.year {
    position: absolute;
    top: 450px;
    width: 100%;
    text-align: center;
}

.year>span {
    font-size: 175px;
    font-weight: 700;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: -12px;
}

.first_year {
    margin-right: 100px;
}

.new {
    position: absolute;
    right: -100px;
    animation: new_animation 2s ease-in-out 2s forwards;
}

@keyframes new_animation {
    0% {
        right: -100px;
    }

    40% {
        right: 450px;
    }

    90% {
        right: 450px;
    }

    100% {
        right: 550px;
    }
}



.from {
    width: 100%;
    font-family:'Times New Roman', Times, serif;
    font-size: 100px;
    font-weight: bolder;
    color: #00ffd0;
    text-align: center;
    position: absolute;
    top: 70%;
    opacity: 0;
    animation: message 2s ease-in-out 5.1s forwards;
}

Result-
https://debadatta77.github.io/Happy-new-Year/

Very bad(it's not responsive)

Comments

Post a Comment

Popular posts from this blog

Launching Page(Javascript)

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Launching </ title >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < div class = "container" >         < img src = "logo.png" alt = "" class = "logo" >         < div class = "content" >             < p > Website Is Under Maintenance </ p >             < h1 > We're < span > Launching </ span > Soon </ h1 >             < div class = "time" >                 < div >                  ...
Read more

AMAZON HOME PAGE CLONE PROJECT

Image
HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Amazon </ title >     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity = "sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin = "anonymous" referrerpolicy = "no-referrer" />     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < header >         < div class = "navbar border" >             < div class = "nav-logo border" >                 < div class = "logo" ></ div >             ...
Read more

Array in function Javascript

  const ranger = [ "Troy" , "Jake" , "Noah" ] const rangerd = [ "Tylor" , "Chase" , "Koda" ] // ranger.push(rangerd) // const allranger = ranger.concat(rangerd) // console.log(allranger); // console.log(Array.isArray("Debadatta")); // console.log(Array.from("Debadatta")); // console.log(Array.isArray({name:"Debadatta"}));// Intresting let score1 = 100 let score2 = 200 let score3 = 300 console . log ( Array . of ( score1 , score2 , score3 ));
Read more