DEBADATTA PARIDA

HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < div ></ div > </ body > </ html >   CSS div {     height : 100px ;     width : 100px ;     background-color : aqua ;     border : 2px solid gold ;     position : absolute ;     top : 60px ;     left : 50px ;     transform : rotate ( 45deg );     transform : scale ( 0.5 , 1 );     } div:hover {     background-color : red ;     color : aliceblue ;     font-size : 20px ;     translate : 20px ;     transform : skew ( 45deg ); } d...

HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > CSS LEVEL 5 </ title >     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < div > This is a box </ div > </ body > </ html >   CSS div {     height : 100px ;     width : 100px ;     background-color : aqua ;     border : 2px solid gold ;     transition-property : all ;     transition-duration : 1s ;     transition-timing-function : steps ( 2 ); } div:hover {     background-color : red ;     color : aliceblue ;     font-size : 20px ; } div:active {     background-color : dimgrey ; } OUTPUT COMPLETE OUTPUT IS NOT SHARABLE. YOU CAN TRY IT ...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > PRACTICE SET 7 </ title >     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < div ></ div > </ body > </ html > CSS div {     height : 250px ;     width : 250px ;     background-color : chocolate ; } @media ( max-width : 300px ) {     div {         background-color : green ;     } } @media ( min-width : 300px ) and ( max-width : 400px ) {     div {         background-color : pink ;     } } @media ( min-width : 400px ) and ( max-width : 600px ) {     div {         background-color : red ;     ...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > CSS LEVEL 6 </ title >     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < DIV ></ DIV > </ body > </ html > CSS DIV {     height : 50px ;     width : 50px ;     background-color : aqua ; }     @media ( width : 600px ){     div {         background-color : red ;     } } @media ( min-width : 600px ){     div {         background-color : green ;     } } @media ( min-width : 200px ) and ( max-width : 300px ){     div {         background-color : yellow ;     } } OUTPUT

 HTML <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > PRACTICE SET 6 </ title >   < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >       < ul class = "navbar" >       < li >< a href = "#" > Home </ a ></ li >       < li >< a href = "#" > About Us </ a ></ li >       < li >< a href = "#" > Contact Us </ a ></ li >       < li >< a href = "#" > Grievance </ a ></ li >   </ ul >     < Div class = "outer" >     < div class = "iner" ></ div >     </ Div >   </ body > </ html > CSS .navbar {     bac...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=, initial-scale=1.0" >     < title > CSS LEVEL 4 </ title >     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >       < h1 > FLEXBOX PLAYGROUND </ h1 >   < div id = "container"   >     < div id = "box1" > box1 </ div >     < div id = "box2" > box2 </ div >     < div id = "box3" > box3 </ div >     < div id = "box4" > box4 </ div >     < div id = "box5" > box5 </ div >   </ div > </ body > </ html > CSS body {     text-align : center ; } div {     height : 50px ;     width : 150px ;     display : inline-block...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=, initial-scale=1.0" >     < title > PRACTICE SET 5 </ title >     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >   < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum, quisquam numquam. In enim ipsum nam cupiditate, rem sed molestias veritatis ea pariatur autem tenetur, sapiente quidem eligendi quia saepe incidunt.   Consectetur eius distinctio doloribus inventore reprehenderit natus praesentium neque ducimus quas rem, corrupti debitis omnis illo, minima repellat eveniet sequi dolor vero iste quis! Autem nisi minima inventore necessitatibus ex!   Enim illo eaque maxime veritatis nesciunt exercitationem ipsam totam recusandae quos quia nulla nobis blanditiis optio aspernatur explicabo non ...

HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=, initial-scale=1.0" >     < title > CSS LEVEL 3 </ title >     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < h1 > Position Playground </ h1 >         < div id = "box1" style = " background-color: pink;" > box1 </ div >         < div id = "box2" style = " background-color: red;" > box2 </ div >         < div id = "box3" > box3 </ div >         < div id = "box4" style = " background-color: green;" > box4 </ div >         </ body > </ html > CSS div {     height : 100px ;     width : 100px ;     background-color : aq...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=, initial-scale=1.0" >     < title > PRACTICE SET 4 </ title >     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >   < header >     < div id = "navbar" >         < a id = "logo" > amazon.in </ a >         < a href = "#" > Account </ a >         < a href = "#" > My Cart </ a >         < a href = "#" > Contact us </ a >         < input placeholder = "search Amazon.in" >         < button > Search </ button >     </ div >   </ header >     < DIV id = "content" >    ...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=, initial-scale=1.0" >     < title > CSS LEVEL 2 </ title >     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < div id = "one" > div 1 </ div >     < div id = "two" > div 2 </ div >     < div id = "three" > div 3 </ div >     < div id = "four" > div 4 </ div > </ body > </ html > CSS div {     width : 100px ;     height : 100px ;     margin : 25px ;     padding : 25px ;     display : inline-block ; } #one {     background-color : blue ; } #two {     background-color : red ; } #three {     background-color : green ; } #four {     backgr...

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > PRACTICE TEST 3 </ title > < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < h1 > AMAZON NAVBAR MINI PROJECT </ h1 >     < BR >         < br >         < br >         < br >         < br > < div id = "navbar" >     < a id = "logo" > amazon.in </ a >     < a href = "#" > Account </ a >     < a href = "#" > My Cart </ a >     < a href = "#" > Contact us </ a >     < input placeholder = "search Amazon.in" >     < button > Se...