First commit
This commit is contained in:
commit
d79d28719a
40
about.html
Normal file
40
about.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!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 About</h1>
|
||||
|
||||
</body>
|
||||
</html>
|
45
contact.html
Normal file
45
contact.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!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>
|
||||
|
||||
<address>
|
||||
<h1>Kontak saya:</h1>
|
||||
Jalan kebon jeruk baru, No 11 Rt 3 Rw 5, Jakarta Selatan
|
||||
+62 80989999
|
||||
aji@usaha.com
|
||||
</address>
|
||||
|
||||
</body>
|
||||
</html>
|
105
index.html
Normal file
105
index.html
Normal file
@ -0,0 +1,105 @@
|
||||
<!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>
|
||||
|
||||
<!--
|
||||
<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>
|
||||
|
||||
<button class="custom-button">Click here</button>
|
||||
<button class="custom-button">Click here</button>
|
||||
|
||||
<hr>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Macam-macam Tipografi HTML</h1>
|
||||
<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>
|
||||
|
||||
<span>Text</span>,
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
40
product.html
Normal file
40
product.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!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>
|
31
style.css
Normal file
31
style.css
Normal file
@ -0,0 +1,31 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
|
||||
|
||||
.custom-button {
|
||||
margin: 0 ; /* Ngejarakin pada sisi luar */
|
||||
padding: 10px ; /* Ngejarakin pada sisi dalam */
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #2E3440; /* Warna background */
|
||||
color:#E5E9F0; /* Warna teks */
|
||||
padding-top: 20px; /* Jarak atas */
|
||||
padding-bottom: 30px; /* Jarak bawah */
|
||||
text-align: center;
|
||||
font-family: "Open Sans", serif;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding-top: 20px; /* Jarak atas */
|
||||
height: 50px; /* Tinggi */
|
||||
background-color: #4C566A; /* Warna background */
|
||||
}
|
||||
|
||||
.kolom-samping {
|
||||
float: left;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
color:#E5E9F0;
|
||||
}
|
Loading…
Reference in New Issue
Block a user