Posts

Showing posts from December, 2024

Javascript Chp 6 Switch Statement in JS

  <! 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 >     < script >         let day = 5 ;         let dayName; switch (day) {     case 1 :         dayName = "Monday" ;         break ;     case 2 :         dayName = "Tuesday" ;         break ;     case 3 :         dayName = "Wednesday" ;         break ;     case 4 :         dayName = "Thursday" ;         break ;     case 5 :         dayName = "Friday" ;         break ; ...

Javascript Chp 5 If statements in JS

  <! 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 >         < script >               // No.1 -  The if-else statements               let age = 16 ;         if (age >= 18 ) {             console . log ( "He's an adult" , "Because the age is greater than or equal than 18" );         } else {             console . log ( "Babua hamaar !!" , "Because the age is not greater than 18" );             }         ...

Javascript Chp 4 Functions and Basic If statements

  <! DOCTYPE html > < html lang = "en" >     < head >         < meta charset = "UTF-8" >         < meta name = "viewport" content = "width=, initial-scale=1.0" >         < title >Document</ title >     </ head >     < body >         < script >         // Function Declaration         function sum ( x , y ){             // These are arguments             c = x + y;             return c;         }         const a = 60 ;         const b = 100 ;         // Function calls         var alpha = sum ( 600 , 45 );         console. log ( "The sum is____" , sum (a,b)...

Javascript Cht 3 Primitive Data types and Objects

  <! 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 >     < script >         var a = null ;         var b = 345 ;         var c = false ;         var d = BigInt ( "420" );         var e = "I am string data type" ;         var f = Symbol ( "I'm symbol data type" );         var g = undefined ;         console . log (a);         console . log (b);         console . log (c);         console . log (d);         console . log (e);         console . log (f); ...

Javascript Chp 2, let const var

  <! 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 >         < script >         var b = 60 ;         var x = ++ b;                 console . log (x);         // var can be change any where any time but the let works inside the block         {             var x = ++ b;             console . log (x);             document . write (x);         }         {             var a = "I'm your biggest fan" ;          ...

Javascript Chp 1 , Introduction - Basics of Js

  <! 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 >         < div class = "con" >             < h1 >Zindagi ek fareb aur jhoot ka ek kissa hai jo lakeeron mein bandhkar theher nahi sakta</ h1 >         </ div >         < script >         // //javascript console API (Application programming interface)         // console.log("Aye haye Oye hoye");         // console.error("This is an error");         // console.warn("This is a warning");       ...

CHRISTMAS SPECIAL THEME HTML 2024

  <! DOCTYPE html > < html lang = "en" > < head >     < link href = 'https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel = 'stylesheet' >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < video autoplay loop muted plays-inline class = "back-vid" >         < source src = "vahh.mp4" >     </ video >     < header >         < div class = "icon" >< a href = "" >< i class = 'bx bx-power-off' ></ i ></ a ></ div >         < nav >             < ul >             ...

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 ( 360 deg ); } } * {     padding : 0 ; margin : 0 ; } .para p :hover {     transition : transform .3 s linear ;     transform : scale ( 90 % ); } li :hover {     transition : transform .3 s linear ;     transform : scale ( 90 % ); } bo...

ANIMATION AND TRANSITIONS CSS FILE

  body {     height : 100 vh ; background-color : black ; display : flex ; justify-content : center ; align-items : center ; } header {     color : white ;     position : absolute ;     top : 0 ;     font-size : xx-large ;     text-transform : uppercase ;     text-align : center ; } #container { background-color : rgba ( 205 , 21 , 0 , 0.978 ); border : 2 px solid ; height : 200 px ; width : 200 px ; /* transform: rotate(30deg); transform: skew(130deg); transform: scaleX(4); transform: scaleY(4); transform: scaleZ(4); */ transition : transform 1 s ease , background-color 1 s linear , border 1 s linear ,border-radius 1 s ease ; } #container:hover {     transform : rotate ( 57 deg )   translate ( 20 px );     background-color : rgb ( 13 , 129 , 67 );     border : 5 px solid white ;     border-radius : 50 % ; }

ANIMATIONS AND TRANSITIONS IN CSS HTML

<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body > < div id = "container" ></ div > < div id = "container" ></ div > < div id = "container" ></ div > < div id = "container" ></ div > < div id = "container" ></ div > < div id = "container" ></ div > </ body > </ html >

GLASS EFFECT LOGIN PAGE CSS

  * {     margin : 0 ;     box-sizing : border-box ;     font-family : 'Poppins' , sans-serif ; } body {     margin : 0 ;     display : flex ;     justify-content : center ;     align-items : center ;     height : 100 vh ;     background-image : url ( neon.jpg );     background-size : cover ; } .glass-container {     width : 300 px ;     height : 350 px ;     position : relative ;     z-index : 1 ;     background : rgba ( 255 , 255 , 255 , 0.1 );     box-shadow : 0 4 px 6 px rgba ( 0 , 0 , 0 , 0.1 );     border-radius : 10 px ;     border : 1 px solid #fff ; } .glass-container::before {     content : '' ;     position : absolute ;     width : 100 % ;     height : 100 % ;     border-radius : 10 px ;     backdrop-filter : blur ( 5 px ); ...

GLASS EFFECT LOGIN PAGE HTML

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "glass-container" >         < div class = "login-box" >             < h2 >Login</ h2 >             < form action = "#" method = "post" >                 < input type = "text" id = "username" required placeholder = "username" >                 < input type = "password" id = "password" required placeholder = "Password" >                 < d...

RESPONSIVE CARD CSS

  @import url (' https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&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&display=swap '); * {     display: flex;     flex-wrap:wrap;     flex-direction: row;     justify-content: center;     margin-top: 100px ;     margin: 0px ;     padding: 0px ;     box-sizing: border-box;     font-family: poppins; } body {     margin-top: 100px ; } . card {     width: 325px ;     height: auto;     background-color: rgb ( 255 , 255 , 255 );     border: 8px ;     border-radius: 8px ;     box-shadow: 0px 2px 4px rgb ( 142 , 175 , 164 );     overflow: hidden;     margin: 20px ; } . card img {     width: 100% ;     height: auto; } . card h3 {   ...

RESPONSIVE CARDS HTML

  <! DOCTYPE html > < html lang =" en ">     < head >         < meta charset =" UTF-8 ">         < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">         < link rel =" stylesheet " href =" style.css ">         < title ></ title >     </ head >     < body >              < div class =" card ">                 < img                     src =" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHRsVG2h-sMcLJUpI97YlI9tExoBMku8F3xA&s "                     alt >                 < h3 >Thailand</ h3 >             ...