Posts

Order Summary Component

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" />     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Order Summary Part </ title >     < link rel = "stylesheet" type = "text/css" href = "style.css" /> </ head > < body >     < main class = "card" >                   < img src = "images/illustration-hero.svg" alt = "hero image" />       < div class = "container" >             < h2 class = "title" > Order Summary </ h2 >             < p class = "order-description" >                 You can now listen to milli...

Gallery

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Photo Gallery </ title >     < style >         /* To normalize the box model */         * {   box-sizing : border-box ; } body {   margin : 0 ;   font-family : Arial ;   background : #EBE7E7 ; } .header {   text-align : center ;   padding : 32px ;   background : #E0DDDD ; } #gallery {   display : flex ;   flex-direction : row ;   flex-wrap : wrap ;   justify-content : center ;   align-items : center ;   padding : 0 4px ; } #gallery img {   width : 25% ;   height : 300px ;   object-fit : cover ;   margin-top ...

freeCodeCamp Project#6

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Registration Form </ title >     < link rel = "stylesheet" type = "text/css" href = "CSS/regis.css" /> </ head > < body >         < h1 > Registration Form </ h1 >     < p > Please fill out this form with the required information </ p >     < form action = 'https://register-demo.freecodecamp.org' >       < fieldset >         < label > Enter Your First Name: < input type = "text" name = "first-name" required /></ label >         < label > Enter Your Last Name: < i...

freeCodeCamp Project#5

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Rokhto Painting </ title >     < style >     .canvas {         width : 500px ;         height : 600px ;         background-color : #4d0f00 ;         overflow : hidden ;         filter : blur ( 2px );       }             .frame {         border : 50px solid black ;         width : 500px ;         padding : 50px ;         margin : 20px auto ;       }           ...

freeCodeCamp Project#4

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Accessibility Quiz </ title >     < link rel = "stylesheet" type = "text/css" href = "quiz.css" > </ head > < body >   <!-- HEADER -->           < header >         < img id = "logo" src = "https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" >         < h1 > HTML/CSS Quiz </ h1 >         < nav >             < ul >                 < li >< a href = "#student-info" > INFO </ a ></ li > ...