Belajar positioning Flex dan Grid
This commit is contained in:
parent
d79d28719a
commit
a2912e738d
32
about.html
32
about.html
@ -26,7 +26,7 @@
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="product.html">Product</a>
|
||||
<a class="menu-item" href="article.html">Article</a>
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
@ -34,7 +34,35 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<h1>Halaman About</h1>
|
||||
<h1 class="judul"><u>Our Team</u></h1>
|
||||
|
||||
<div class="team-profile">
|
||||
<div>
|
||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=3450e0d6cf6d16a6a2baadaa6301cc8b" alt="">
|
||||
<h2>Syahdan</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=d572031d1df0ca56cc11a1ed6158ea8d" alt="">
|
||||
<h2>Windah</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=e855b9b20a7741203494c5340371aa39" alt="">
|
||||
<h2>Yusuf</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=3fb5f8acc680a523b0e4709192c7333b" alt="">
|
||||
<h2>Sitri</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=b2240e8427d1e30e663e11067651cf70" alt="">
|
||||
<h2>Selfi</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
60
article.html
Normal file
60
article.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html> <!-- html5 -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Website personal saya yang sangat bermakna</title>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Meaningful heading</h1>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="index.html">Home</a>
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="about.html">About</a>
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="article.html">Article</a>
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="contact.html">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<main class="container-article">
|
||||
<div>
|
||||
<h2 class="judul"><u>Article</u></h2>
|
||||
</div>
|
||||
<aside>
|
||||
<ul>
|
||||
<li><a href="#">Pertamax dioplos, warga pindah ke Shell</a></li>
|
||||
<li><a href="#">Ditemukan kehidupan baru di planet Mars</a></li>
|
||||
<li><a href="#">AI Apocalypse: ChatGPT is a Skynet</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
<article>
|
||||
<h3>Pertamax dioplos, warga pindah ke Shell</h3>
|
||||
<p>Jakarta: Legislator Komisi VI DPR dari Fraksi PDIP melakukan inspeksi mendadak (sidak) ke SPBU 34.11405, Palmerah, Jakarta Barat. Mereka mengecek kualitas Pertamax yang belakangan ramai isu dioplos Pertalite.</p>
|
||||
<p>"Kami ingin memastikan apakah konsumen itu mendapatkan produk sesuai yang dijanjikan oleh Pertamina atau tidak," kata Wakil Ketua Komisi VI DPR dari Fraksi PDIP Adisatrya Suryo Sulisto di lokasi, Senin, 3 Maret 2025.</p>
|
||||
<p>Adisatrya mengatakan pihaknya menggeruduk SPBU Pertamina karena mendengar keluhan dari masyarakat. Pasalnya, berkembang narasi bahwa kualitas BBM RON 92 atau Pertamax setara RON 90 atau Pertalite.</p>
|
||||
</article>
|
||||
<footer>Copyright (c) 2025 Widuri News</footer>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -26,7 +26,7 @@
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="product.html">Product</a>
|
||||
<a class="menu-item" href="article.html">Article</a>
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
|
@ -26,7 +26,7 @@
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="product.html">Product</a>
|
||||
<a class="menu-item" href="article.html">Article</a>
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
|
40
product.html
40
product.html
@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html> <!-- html5 -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Website personal saya yang sangat bermakna</title>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Meaningful heading</h1>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="index.html">Home</a>
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="about.html">About</a>
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="product.html">Product</a>
|
||||
</div>
|
||||
|
||||
<div class="kolom-samping">
|
||||
<a class="menu-item" href="contact.html">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<h1>Halaman Product</h1>
|
||||
|
||||
</body>
|
||||
</html>
|
51
style.css
51
style.css
@ -28,4 +28,53 @@ nav {
|
||||
|
||||
.menu-item {
|
||||
color:#E5E9F0;
|
||||
}
|
||||
}
|
||||
|
||||
.team-profile {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.team-profile > div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.team-profile > div > img {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.judul {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container-article {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"menu article"
|
||||
"footer footer";
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap:20px;
|
||||
padding: 5px;
|
||||
background-color: #ff9999;
|
||||
}
|
||||
.container-article > div {
|
||||
background-color: #bbb;
|
||||
grid-area: header;
|
||||
}
|
||||
.container-article > aside {
|
||||
background-color: #bbb;
|
||||
grid-area: menu;
|
||||
padding: 10px;
|
||||
}
|
||||
.container-article > article {
|
||||
background-color: #bbb;
|
||||
grid-area: article;
|
||||
padding: 10px;
|
||||
}
|
||||
.container-article > footer {
|
||||
background-color: #bbb;
|
||||
grid-area: footer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user