Posts

Showing posts from April, 2024

DOM 3 Swimming Pool Form Complete with diseparing error message

  <! 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 >     <!-- <button class="button" id="btn" onclick="create()">Click to create heading</button>     <div id="demo"></div> -->     < div class = "d-none" id = "alert" ></ div >     < div class = "container" >         < div class = "icon" >🏊‍♂️</ div >         < h1 class = "heading" >Under 18 Swimming Champaionship</ h1 >         < p class = "desc" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, praesenti...

DOM || ( Summing Pool Form )

Image
<! 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 >     <!-- <button class="button" id="btn" onclick="create()">Click to create heading</button>     <div id="demo"></div> -->     < div class = "container" >         < div class = "icon" >🏊‍♂️</ div >         < h1 class = "heading" >Under 18 Swimming Champaionship</ h1 >         < p class = "desc" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, praesentium.</ p >         < div class = "flex" >       ...

Basics Of Java Script Till DOM Beggining

  <! 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 = "container" >         < h1 id = "title" >Welcome to css</ h1 >         < button id = "btn" class = "btn" onclick = " feedback ()" >Give Feedback</ button >         < input id = "inp1" type = "text" placeholder = "Enter Name" >         < input id = "inp2" type = "text" placeholder = "Enter Number" >     </ div >     < script src = "app.js" >         </ script >     </ body > </ html ...

CSS VAR ()

  <! 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 = "profile" >                 < img class = "img" src = "Profile.jpg" alt = "" >         < div class = "content" >             < h3 class = "title" >Welcome to my profile</ h3 >             < p class = "desc" >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia, iste?</ p >             < button class = "btn1" >Follow Me</ button >           ...

CSS Loading Screen

Image
  <! 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 = "box" ></ div >     < div class = "loader" ></ div > </ body > </ html > // CSS File /* .box{     background-color: orangered;     height: 100px;     width: 100px;     margin: 300px auto;     animation-name: rotating;     animation-duration: 3s;     animation-fill-mode: forwards;       animation-iteration-count: infinite;     animation-direction: reverse;     } @keyframes rotating{     from{     }     to{ ...

CSS Animarions user profile with media query

Image
  <! 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 >     <!-- <img class="filter" src="cristi.jpg" alt=""> -->     <!-- <div class="box">     </div> -->     < div class = "profile" >             < img class = "img" src = "cristi.jpg" alt = "" >         < div class = "content" >             < h3 class = "title" >Welcome to my profile</ h3 >             < p class = "desc" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, eius!</ p > ...

CSS Media Queries

Image
  <! 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 = "india" >     < img class = "img" src = "https://source.unsplash.com/800x500/?temple" alt = "" >     < div class = "shade" ></ div >         < div class = "content" >         < h1 class = "title" >Welcome To Icecrem Temple</ h5 >         < p >Lorem ipsum dolor, sit amet consectetur </ p >     </ div > </ div > </ body > </ html > //CSS File @import url ( 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;...