Last active
February 7, 2021 17:36
-
-
Save zaimazhar/b6c4d8b05da81bde774e62850254c41c to your computer and use it in GitHub Desktop.
CSS EPISOD 6 DEVZAIM
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Grid Part 1</title> | |
| </head> | |
| <body> | |
| <div class="grid-container"> | |
| <div class="box box1"><h3 class="tengah">1</h3>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem delectus, rem cum numquam nam iusto ullam optio atque facilis non commodi, provident sequi odit. Vero illum veritatis cupiditate. Deleniti, veritatis!</div> | |
| <div class="box box2"><h3 class="tengah">2</h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio asperiores quod vero eos beatae dolor ad iure, sequi enim repudiandae dicta. Molestiae eligendi nihil nostrum eum, est cum quas minima asperiores nesciunt illum pariatur ipsam placeat vel odio temporibus architecto, beatae tenetur quod doloremque ea laborum? Alias harum qui perspiciatis.</div> | |
| <div class="box box3"><h3 class="tengah">3</h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio asperiores quod vero eos beatae dolor ad iure, sequi enim repudiandae dicta. Molestiae eligendi nihil nostrum eum, est cum quas minima asperiores nesciunt illum pariatur ipsam placeat vel odio temporibus architecto, beatae tenetur quod doloremque ea laborum? Alias harum qui perspiciatis.</div> | |
| <div class="box box4"><h3 class="tengah">4</h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio asperiores quod vero eos beatae dolor ad iure, sequi enim repudiandae dicta. Molestiae eligendi nihil nostrum eum, est cum quas minima asperiores nesciunt illum pariatur ipsam placeat vel odio temporibus architecto, beatae tenetur quod doloremque ea laborum? Alias harum qui perspiciatis.</div> | |
| <div class="box box5"><h3 class="tengah">5</h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio asperiores quod vero eos beatae dolor ad iure, sequi enim repudiandae dicta. Molestiae eligendi nihil nostrum eum, est cum quas minima asperiores nesciunt illum pariatur ipsam placeat vel odio temporibus architecto, beatae tenetur quod doloremque ea laborum? Alias harum qui perspiciatis.</div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: aquamarine; | |
| } | |
| .tengah { | |
| text-align: center; | |
| color: white; | |
| } | |
| .grid-container { | |
| padding: 50px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| grid-template-rows: minmax(150px, auto); | |
| grid-gap: 15px; | |
| grid-template-areas: | |
| "tajuk tajuk tajuk" | |
| "iklan isi isi" | |
| } | |
| .box { | |
| background-color: blueviolet; | |
| border: 1px solid white; | |
| padding: 20px; | |
| } | |
| .box1 { | |
| grid-area: tajuk; | |
| } | |
| .box2 { | |
| grid-area: iklan; | |
| } | |
| .box3 { | |
| grid-area: isi; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment