Skip to main content

Posts

Showing posts from December, 2023

Grocery kart : Html and CSS

  HTML ==   < footer class = "footer" >     < div class = "container" >       < div class = "row" >         < div class = "footer-col" >           < h4 > company </ h4 >           < ul >             < li >< a href = "#" > about us </ a ></ li >             < li >< a href = "#" > our services </ a ></ li >             < li >< a href = "#" > privacy policy </ a ></ li >             < li >< a href = "#" > affiliate program </ a ></ li >           </ ul >         </ div >         < div class = "footer-col" >           ...
Post a Comment
Read more

To Do List : Javascript Code

  const inputbox = document . getElementById ( "input-box" ) const listcontainer = document . getElementById ( "list-container" ) function addTask () {     if ( inputbox . value === '' ) {         alert ( "you must write something! Example your Frist task like 'Homework'" );     }     else {         let li = document . createElement ( "li" );         li . innerHTML = inputbox . value ;         listcontainer . appendChild ( li );         let span = document . createElement ( "span" )         span . innerHTML = " \u00d7 " ;         li . appendChild ( span );     }     inputbox . value = "" ;     saveData (); } listcontainer . addEventListener ( "click" , function ( e ) {     if ( e . target . tagName === "LI" ) {         e . target...
Post a Comment
Read more

To Do List : CSS Code

  * {     margin : 0 ;     padding : 0 ;     box-sizing : border-box ;     font-family : Arial , Helvetica , sans-serif ; } .container {     width : 100vw ;     height : 100vh ;     background : linear-gradient ( 111deg , #9e34eb , #bb0aaf );     padding : 10px ; } .todo-app {     width : 100% ;     max-width : 40vw ;     background-color : white ;     margin : 100px auto 20px ;     padding : 40px 30px 70px ;     border-radius : 10px ; } .todo-app h2 {     color : #2380ba ;     display : flex ;     align-items : center ;     margin-bottom : 20px ; } .todo-app h2 img {     width : 40px ;     margin-left : 20px ; } .row {     display : flex ;     align-items : center ;     justify-content : space-between ;     background : #edeef0 ; ...
Post a Comment
Read more

To Do List : HTML Code

  <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > To-Do-List </ title >   < link rel = "stylesheet" href = "style.css" > </ head > < body >   < div class = "container" >     < div class = "todo-app" >       < h2 > To-Do list < img src = "images/icon.png" alt = "icon" ></ h2 >       < div class = "row" >         < input type = "text" id = "input-box" placeholder = "Add Your text" >         < button onclick = " addTask ()" >           Add         </ button >       </ div >       < ul id = "list-container" >         <!-- <li...
Post a Comment
Read more

Netflix Clone Mobile view Renew HTML code: HTML

       <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "utf-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1" >     < meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" >     < title > Netflix Clone </ title >     < link rel = "stylesheet" href = "style.css" >     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"         integrity = "sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="         crossorigin = "anonymous" referrerpolicy = "no-referrer" /> </ head > < body >     < div class = "main" >         < Nav >       ...
Post a Comment
Read more

Netflix Clone Mobile view Renew CSS code: CSS

       @import url ( 'https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap' ) * {     padding : 0 ;     margin : 0 ;     /* font-family: 'Poppins', sans-serif; */     font-family : 'Poppins' , sans-serif ;     box-sizing : border-box ; } body {     background-color : black ; } .main {     /* background-image: url("Image/Net_hero1_img.jpg"); */     background-image : url ( "Net_hero1_img.jpg" );     height : 80vh ;     position : relative ;     background-position : center center ;     background-repeat : no-repeat ;     background-size : max ( 2200px , 110vw );     /* background-size: max(100%) */ } .main .box {     height : 80vh ;     width : 100% ;     opacity : 0.5 ;     background-color : black ;     position : absolute ;     top...
Post a Comment
Read more