CHIRSTMAS SPECIAL CSS 2024

-

 @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Playwrite+US+Modern+Guides&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');




@keyframes fade-in{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes slide-in-up{
from{
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to{
transform: translate3d(0, 0, 0);
}
}
@keyframes swivel-horizontal {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}



*{
    padding: 0;margin: 0;
}
.para p:hover{
    transition: transform .3s linear;
    transform: scale(90%);
}
li:hover{
    transition: transform .3s linear;
    transform: scale(90%);
}

body{
    padding: 0cap;
    margin: 0cap;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
header li:hover{
    /* background-color: white; */
    border-color: rgb(103, 17, 23);
    a{
        color: rgb(0, 0, 0);
    }
}
.Merry-christmas:hover{
    transition: transform .3s ease-out;
    transform: scale(110%);
    background-color: rgba(144, 144, 142, 0.11);
}
header:hover{
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}


header{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 30vh;
    margin-bottom: 50px;
    height: fit-content;
    background-color: rgba(97, 53, 53, 0.127);
}
header ul{
    display: flex;
    flex-wrap: wrap;
}
header ul li{
    text-align: center;
    border-radius: 40%;
    width: 100px;
    height: 50px;
    padding: 10px;
    /* border: 4px solid white; */
    border-radius: 0%;
    margin: 30px;
    list-style: none;
    font-size: large;
}
header li a{
    text-decoration: none;
    font-size: larger;
    color: white;
    font-family:poppins;
    font-weight: 600;

}


.back-vid{
    animation-delay: 1s;
    transition: fade in 2s linear;
    animation: fade-in 1s;
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 100%;
    min-width: 100%;
    z-index:-1;
    flex-shrink: 0;
    z-index: -1;
}
.Merry-christmas{
    margin: 30px;
    /* transition: animation 1s ease;
    animation: slide-in-up 1s; */
    overflow-wrap: break-word;
    border-radius: 70px;
    text-align: center;
    color: white;
    font-size: 3rem;
    text-transform: uppercase;
    font-family: poppins;
    border: 3px solid;
    width: 50%;
    position: absolute;
    bottom: 400px;
   
}
.icon i{
    color: aliceblue;
    position: absolute;
    right: 0;
    text-align: center;
    border-radius: 40%;
    width: 80px;
    padding: 10px;
    /* border: 4px solid white; */
    border-radius: 0%;
    margin: 30px;
    list-style: none;
    font-size: 35px;
}

.icon i:hover{
    transform: scale(110%);
    transition: transform .3s linear;
}

.para p{
    text-align: center;
    max-width: 700px;
    position: relative;
    bottom:-60px;
    overflow-wrap: break-word;
    margin: 30px;
    color: aliceblue;
    font-family: poppins;
    font-size: larger;
}


Comments

Post a Comment

Popular posts from this blog

HTML FORMS

-
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < body >     < H1 > Forms in HTML </ H1 >     < form action = "/submit.php" > < div >   < label for = "Name" > Name </ label >   < input type = "text" placeholder = "Enter name" > </ div > < div >     < label for = "Phone" > Phone </ label >     < input type = "tel" placeholder = "Enter phone no." >     </ div >     < div >     < label for = "Email" > Email </ label >     < input type = "email" placeholder = "Email" >     </ div >     < div >     < l...
Read more

FORM STYLING IN CSS

-
<! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > forms </ title >   </ head >   < style >     body {       margin : 0 ;       padding : 0 ;     }     .csf {       display : flexbox;       text-align : center ;       background-color : rgb ( 216 , 216 , 216 );       height : 400px ;       width : 550px ;       padding : 90px 0px 0px 15px ;       margin-left : 40% ;       margin-top : 10% ;       border-radius : 2px ;       border : 2px solid ;       font-size : 19px ;     }     input {       mar...
Read more