Happy New Year Script Using CSS

Happy New Year Using CSS 

Create Files:

- avadh tutor.html

- back.jpg

- pattern.png

_____________________________________________________________________

avadh tutor.html

<style>

body

{

margin:0;

padding:0;

background:  url(back.jpg);

height: 100%; 

    /* Center and scale the image nicely */

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

.banner

{

height:100vh;

}

.banner:before

{

content: '';

height:100vh;

width:100vw;

position:absolute;

top:0;

left:0;

background:  url(pattern.png);

animation: animate 10s linear infinite;

}

.text

{

color: #04619E;

font-size: 6.2em;

    width: 100%;

    text-align: center;

    text-shadow: 5px 5px 5px #B31DCE;

    font-family: Elephant;

    font-weight: bold;

}

.redtext

{

color: tomato;

font-size: 8.5em;

font-family: 'Bauhaus 93';

text-align: right;

width: 80%;

text-shadow: 5px 5px 10px rgb(0,0,0);

}

.from{

color: blue;

font-size: 3.6em;

text-align: right;

width: 80%;

font-family:Cooper;

text-shadow: 4px 5px 3px rgb(25,205,2);

}

.avadh{

color: black;

font-size: 1.2em;

width: 80%;

text-align: right;

}

@keyframes animate

{

 0%

 {

background-position: 0 0;

 }

 100%

 {

background-position : 0  550px;

  }

}

</style>

<div class="banner">

<div class="text">Happy New Year</div>

<div class="redtext">2020</div>

<div class="from">AvadhTutor - Ripal Pandya</div>

<div class="avadh">learn All Programming Languages inside youtube.com/avadhtutor </div>

</div>

_____________________________________________________________________

Right Click and save as Images :

back.jpg

Pattern.png

Learn all Programming Languages inside youtube.com/avadhtutor/