Rapih-rapihin dikit
This commit is contained in:
parent
a2912e738d
commit
d404a1cf20
57
about.html
57
about.html
@ -7,7 +7,8 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
||||||
|
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="css/style.css" />
|
||||||
|
<link rel="stylesheet" href="css/article.css" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -34,33 +35,35 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<h1 class="judul"><u>Our Team</u></h1>
|
<div class="container">
|
||||||
|
<h1 class="judul"><u>Our Team</u></h1>
|
||||||
|
|
||||||
<div class="team-profile">
|
<div class="team-profile">
|
||||||
<div>
|
<div>
|
||||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=3450e0d6cf6d16a6a2baadaa6301cc8b" alt="">
|
<img src="https://doodleipsum.com/700x700/avatar-5?i=3450e0d6cf6d16a6a2baadaa6301cc8b" alt="">
|
||||||
<h2>Syahdan</h2>
|
<h2>Syahdan</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=d572031d1df0ca56cc11a1ed6158ea8d" alt="">
|
<img src="https://doodleipsum.com/700x700/avatar-5?i=d572031d1df0ca56cc11a1ed6158ea8d" alt="">
|
||||||
<h2>Windah</h2>
|
<h2>Windah</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=e855b9b20a7741203494c5340371aa39" alt="">
|
<img src="https://doodleipsum.com/700x700/avatar-5?i=e855b9b20a7741203494c5340371aa39" alt="">
|
||||||
<h2>Yusuf</h2>
|
<h2>Yusuf</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=3fb5f8acc680a523b0e4709192c7333b" alt="">
|
<img src="https://doodleipsum.com/700x700/avatar-5?i=3fb5f8acc680a523b0e4709192c7333b" alt="">
|
||||||
<h2>Sitri</h2>
|
<h2>Sitri</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src="https://doodleipsum.com/700x700/avatar-5?i=b2240e8427d1e30e663e11067651cf70" alt="">
|
<img src="https://doodleipsum.com/700x700/avatar-5?i=b2240e8427d1e30e663e11067651cf70" alt="">
|
||||||
<h2>Selfi</h2>
|
<h2>Selfi</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
45
article.html
45
article.html
@ -7,7 +7,8 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
||||||
|
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="css/style.css" />
|
||||||
|
<link rel="stylesheet" href="css/article.css" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -34,27 +35,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<main class="container-article">
|
||||||
<main class="container-article">
|
<div>
|
||||||
<div>
|
<h2 class="judul"><u>Article</u></h2>
|
||||||
<h2 class="judul"><u>Article</u></h2>
|
</div>
|
||||||
</div>
|
<aside>
|
||||||
<aside>
|
<ul>
|
||||||
<ul>
|
<li><a href="#">Pertamax dioplos, warga pindah ke Shell</a></li>
|
||||||
<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="#">Ditemukan kehidupan baru di planet Mars</a></li>
|
<li><a href="#">AI Apocalypse: ChatGPT is a Skynet</a></li>
|
||||||
<li><a href="#">AI Apocalypse: ChatGPT is a Skynet</a></li>
|
</ul>
|
||||||
</ul>
|
</aside>
|
||||||
</aside>
|
<article>
|
||||||
<article>
|
<h3>Pertamax dioplos, warga pindah ke Shell</h3>
|
||||||
<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>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>"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>
|
||||||
<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>
|
||||||
</article>
|
<footer>Copyright (c) 2025 Widuri News</footer>
|
||||||
<footer>Copyright (c) 2025 Widuri News</footer>
|
</main>
|
||||||
</main>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
17
contact.html
17
contact.html
@ -7,7 +7,8 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
||||||
|
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="css/style.css" />
|
||||||
|
<link rel="stylesheet" href="css/article.css" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -34,12 +35,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<address>
|
<div class="container">
|
||||||
<h1>Kontak saya:</h1>
|
<address>
|
||||||
Jalan kebon jeruk baru, No 11 Rt 3 Rw 5, Jakarta Selatan
|
<h1>Kontak saya:</h1>
|
||||||
+62 80989999
|
Jalan kebon jeruk baru, No 11 Rt 3 Rw 5, Jakarta Selatan
|
||||||
aji@usaha.com
|
+62 80989999
|
||||||
</address>
|
aji@usaha.com
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
31
css/article.css
Normal file
31
css/article.css
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
@ -5,6 +5,18 @@
|
|||||||
padding: 10px ; /* Ngejarakin pada sisi dalam */
|
padding: 10px ; /* Ngejarakin pada sisi dalam */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin-inline:100px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background-color: #2E3440; /* Warna background */
|
background-color: #2E3440; /* Warna background */
|
||||||
color:#E5E9F0; /* Warna teks */
|
color:#E5E9F0; /* Warna teks */
|
||||||
@ -48,33 +60,3 @@ nav {
|
|||||||
text-align: center;
|
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;
|
|
||||||
}
|
|
||||||
126
index.html
126
index.html
@ -7,7 +7,8 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
|
||||||
|
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="css/style.css" />
|
||||||
|
<link rel="stylesheet" href="css/article.css" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -20,86 +21,91 @@
|
|||||||
<div class="kolom-samping">
|
<div class="kolom-samping">
|
||||||
<a class="menu-item" href="index.html">Home</a>
|
<a class="menu-item" href="index.html">Home</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="kolom-samping">
|
<div class="kolom-samping">
|
||||||
<a class="menu-item" href="about.html">About</a>
|
<a class="menu-item" href="about.html">About</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="kolom-samping">
|
<div class="kolom-samping">
|
||||||
<a class="menu-item" href="article.html">Article</a>
|
<a class="menu-item" href="article.html">Article</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="kolom-samping">
|
<div class="kolom-samping">
|
||||||
<a class="menu-item" href="contact.html">Contact</a>
|
<a class="menu-item" href="contact.html">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!--
|
<div class="container">
|
||||||
<div></div>
|
|
||||||
Alternative div:
|
|
||||||
<header></header> buat header diatas
|
|
||||||
<nav></nav> buat menu navigasi
|
|
||||||
<article></article> buat artikel
|
|
||||||
<section></section> Buat section, contoh: Call-to-Action, Testimonial, Our Clients, etc
|
|
||||||
<main></main> Buat container / bagian utamanya
|
|
||||||
<footer></footer> Buat footer bagian bawah
|
|
||||||
-->
|
|
||||||
|
|
||||||
<hr>
|
<h2>Pemrograman Web</h2>
|
||||||
|
<h3>Alternative element div</h3>
|
||||||
|
<mark>header</mark> buat header diatas <br>
|
||||||
|
<mark>nav</mark> buat menu navigasi <br>
|
||||||
|
<mark>aside</mark> buat menu di sidebar <br>
|
||||||
|
<mark>article</mark> buat artikel <br>
|
||||||
|
<mark>section</mark> Buat section, contoh: Call-to-Action, Testimonial, Our Clients, etc <br>
|
||||||
|
<mark>main</mark> Buat container / bagian utamanya <br>
|
||||||
|
<mark>footer</mark> Buat footer bagian bawah <br>
|
||||||
|
|
||||||
<button class="custom-button">Click here</button>
|
<hr>
|
||||||
<button class="custom-button">Click here</button>
|
|
||||||
|
|
||||||
<hr>
|
<button class="custom-button">Click here</button>
|
||||||
|
<button class="custom-button">Click here</button>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h1>Macam-macam Tipografi HTML</h1>
|
<hr>
|
||||||
<hr>
|
|
||||||
<h1>Heading 1</h1>
|
|
||||||
<h2>Heading 2</h2>
|
|
||||||
<h3>Heading 3</h3>
|
|
||||||
<h4>Heading 4</h4>
|
|
||||||
<h5>Heading 5</h5>
|
|
||||||
<h6>Heading 6</h6>
|
|
||||||
|
|
||||||
<p>Paragraph</p>
|
<h2>Macam-macam Tipografi HTML</h2>
|
||||||
|
<hr>
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<h3>Heading 3</h3>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
|
<h5>Heading 5</h5>
|
||||||
|
<h6>Heading 6</h6>
|
||||||
|
|
||||||
<span>Text</span>,
|
<p>Paragraph</p>
|
||||||
<b>Bold</b>,
|
|
||||||
<strong>Strong</strong>,
|
|
||||||
<i>Italic</i>,
|
|
||||||
<em>Emphatized</em>,
|
|
||||||
<small>Small</small>,
|
|
||||||
<mark>Mark</mark>,
|
|
||||||
<del>Delete</del> and <ins>Insert</ins>,
|
|
||||||
<u>Underline</u>
|
|
||||||
|
|
||||||
<hr>
|
<span>Text</span>,
|
||||||
|
<b>Bold</b>,
|
||||||
<table style="width: 100%;">
|
<strong>Strong</strong>,
|
||||||
<tr>
|
<i>Italic</i>,
|
||||||
<td style="border: solid black 2px;">
|
<em>Emphatized</em>,
|
||||||
<h1>1</h1>
|
<small>Small</small>,
|
||||||
</td>
|
<mark>Mark</mark>,
|
||||||
<td style="border: solid black 2px;">
|
<del>Delete</del> and <ins>Insert</ins>,
|
||||||
<h1>2</h1>
|
<u>Underline</u>
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td style="border: solid black 2px;">
|
|
||||||
<h1>3</h1>
|
|
||||||
</td>
|
|
||||||
<td style="border: solid black 2px;">
|
|
||||||
<h1>4</h1>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h2>Positioning</h2>
|
||||||
|
|
||||||
|
<h3>Positioning Dengan Table</h3>
|
||||||
|
|
||||||
|
<table style="width: 100%;">
|
||||||
|
<tr>
|
||||||
|
<td style="border: solid black 2px;">
|
||||||
|
<h1>1</h1>
|
||||||
|
</td>
|
||||||
|
<td style="border: solid black 2px;">
|
||||||
|
<h1>2</h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="border: solid black 2px;">
|
||||||
|
<h1>3</h1>
|
||||||
|
</td>
|
||||||
|
<td style="border: solid black 2px;">
|
||||||
|
<h1>4</h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h3>Positioning Dengan Float</h3>
|
||||||
|
<p>Contohnya dapat dilihat di navbar menu</p>
|
||||||
|
|
||||||
|
<h3>Positioning Dengan Flex</h3>
|
||||||
|
<p>Contohnya dapat dilihat di About > Team Profile</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user