Create Layout Of Your Website With HTML & CSS!!




1.HTML CODE:




  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <link rel="stylesheet" type="text/css"  href="stylegride.css">

  7. </head>
  8. <body>
  9. <main class="l">
  10. <div class="div1">Header</div>
  11. <div class="div2">Box1</div>
  12. <div class="div3">Box2</div>
  13. <div class="div4">Box3</div>
  14. <div class="div5">sidebar</div>
  15. <div class="div6">Maincontent</div>
  16. <div class="div7">Footer</div>

  18. </main>

  20. </body>
  21. </html>

2.CSS CODE:

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. main
  7. {
  8. width: 75%;
  9. margin: 50px auto;
  10. border: 1px solid black;
  11. display: grid;
  12. grid-template-rows: 60px 100px 200px 60px;
  13. grid-template-columns: repeat(3, 1fr) 150px;
  14. grid-gap: 20px;
  15. }
  16. .div1{background-color: red; color: white;
  17. grid-column: 1/-1}
  18. .div2{background-color: blue; color: white;}
  19. .div3{background-color: blue; color: white;}
  20. .div4{background-color: blue;color: white;}
  21. .div5{background-color: gray;color: white;
  22. grid-row: 2/4;
  23. grid-column: 4/5;
  24. }
  25. .div6{background-color: orange;color: white;
  26. grid-column: 1/4;
  27. }
  28. .div7{background-color: black;color: white;
  29. grid-column: 1/-1;
  30. }
by •
Tags:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)