nusantara/index.html at main · mikhaelbryanngg/nusantara · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kopi Nusantara by Mikhael Bryan</title>
    <style>
        body {
            margin: 0;
            font-family: "Poppins", sans-serif;
            background-color: #f6e6d3;
            color: #4b2e19;
        }
        header {
            background-color: #d5b59c;
            padding: 30px;
            text-align: center;
            font-size: 32px;
            font-weight: bold;
            letter-spacing: 2px;
        }
        nav {
            background-color: #c7a78f;
            text-align: center;
            padding: 12px;
        }
        nav a {
            text-decoration: none;
            margin: 0 20px;
            font-size: 18px;
            color: #4b2e19;
            font-weight: bold;
        }
        nav a:hover {
            color: white;
        }
        section {
            padding: 40px 80px;
        }
        h2 {
            border-left: 6px solid #b08968;
            padding-left: 10px;
        }
        .box {
            background-color: #eddcc7;
            padding: 20px;
            margin: 20px 0;
            border-radius: 12px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        footer {
            background-color: #d5b59c;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
            font-weight: bold;
        }
    </style>
</head>
<body>

<header>Kopi Nusantara — Aesthetic Coffee</header>
<nav>
    <a href="#jenisKopi">Jenis Kopi</a>
    <a href="#minumanKopi">Jenis Minuman Kopi</a>
    <a href="#tentang">Tentang</a>
</nav>

<section id="jenisKopi">
    <h2>☕ Jenis – Jenis Kopi</h2>

    <div class="box">
        <h3>• Arabica</h3>
        <p>Memiliki rasa asam, aroma wangi, dan tingkat kepahitan rendah. Banyak disukai pecinta kopi premium.</p>
    </div>

    <div class="box">
        <h3>• Robusta</h3>
        <p>Memiliki rasa pahit kuat, kandungan kafein tinggi, dan aroma earthy. Cocok untuk penikmat kopi pekat.</p>
    </div>

    <div class="box">
        <h3>• Liberica</h3>
        <p>Rasanya unik seperti campuran floral, smoky, dan kayu. Menjadi kopi langka dan berkelas.</p>
    </div>

    <div class="box">
        <h3>• Excelsa</h3>
        <p>Rasanya ringan namun fruity dan segar. Biasanya digunakan sebagai campuran kopi spesial.</p>
    </div>
</section>

<section id="minumanKopi">
    <h2>🍮 Jenis – Jenis Minuman Kopi</h2>

    <div class="box">
        <h3>• Espresso</h3>
        <p>Kopi hitam pekat tanpa campuran. Dasar dari berbagai minuman kopi.</p>
    </div>

    <div class="box">
        <h3>• Cappuccino</h3>
        <p>Espresso dicampur susu dan foam tebal sehingga creamy dan soft.</p>
    </div>

    <div class="box">
        <h3>• Latte</h3>
        <p>Kopi susu dengan rasa susu dominan dan busa tipis di atas.</p>
    </div>

    <div class="box">
        <h3>• Americano</h3>
        <p>Espresso yang ditambahkan air panas, rasanya lebih ringan dari espresso.</p>
    </div>

    <div class="box">
        <h3>• Mochaccino</h3>
        <p>Kombinasi espresso, susu, dan coklat — cocok untuk penikmat kopi manis.</p>
    </div>
</section>

<section id="tentang">
    <h2>✨ Tentang Website</h2>
    <p>
        Website ini dibuat untuk memperkenalkan keindahan dunia kopi — dari jenis biji kopi
        hingga varian minuman kopi yang paling disukai.
        <br><br>
        Dibuat dengan cinta oleh <strong>Mikhael Bryan</strong> ☕
    </p>
</section>

<footer>
    © 2025 | Coffee Website by Mikhael Bryan
</footer>

</body>
</html>