Skip to content

Instantly share code, notes, and snippets.

@zaimazhar
Last active February 7, 2021 17:36
Show Gist options
  • Save zaimazhar/b6c4d8b05da81bde774e62850254c41c to your computer and use it in GitHub Desktop.
Save zaimazhar/b6c4d8b05da81bde774e62850254c41c to your computer and use it in GitHub Desktop.
CSS EPISOD 6 DEVZAIM
<!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>
* {
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