Skip to content

Commit 17c616a

Browse files
TazakiNTazakiN
committed
Adding all files
Semua File sudah Mantap.
1 parent a918a59 commit 17c616a

13 files changed

+463
-0
lines changed

‎README.md

+9
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
11
# Intro to Frontend & Basic Layouting
22
Repository untuk memenuhi tugas Intro to Frontend & Basic Layouting GDSC ITB 2023
3+
4+
Program ini merupakan website menu kafe dengan nama Resoto
5+
Menu yang terdapat pada Website ini dibagi menjadi Main Course dan Beverages dengan total 8 menu
6+
Setelah mengklik salah satu menu, akan membuka halaman baru yang berisi detail dari menu yang diklik.
7+
Website ini sudah responsive dengan ukuran layar yang digunakan oleh pengguna
8+
9+
dibuat oleh:
10+
Nama : Tazkia Nizami
11+
ID GDSC : 220020002

‎gaya.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
body {
2+
background-color: rgb(137, 106, 29);
3+
width: 100%;
4+
align-items: center;
5+
}
6+
7+
.headline {
8+
background-color: goldenrod;
9+
line-height: 10px;
10+
text-align: center;
11+
padding-bottom: 1px;
12+
}
13+
.headline > h1 {
14+
padding-top: 20px;
15+
font-size:xxx-large ;
16+
}
17+
18+
.flex-container {
19+
display: flex;
20+
flex-wrap: wrap;
21+
flex-direction: row;
22+
width: 100%;
23+
margin-bottom: 30px;
24+
}
25+
26+
@media (max-width: 400px) {
27+
.flex-container {
28+
flex-direction: column;
29+
}
30+
}
31+
32+
.sub {
33+
padding: 5px;
34+
background-color: rgb(153, 143, 10);
35+
}
36+
37+
.card {
38+
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
39+
transition: 0.3s;
40+
width: fit-content;
41+
height: fit-content;
42+
margin-top: 10px;
43+
margin-right: 0.4cm;
44+
vertical-align: middle;
45+
background-color: darkgoldenrod;
46+
}
47+
48+
.card:hover {
49+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
50+
}
51+
52+
.container {
53+
padding: 2px 16px;
54+
height: fit-content;
55+
}
56+
57+
h2 {
58+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
59+
color: black;
60+
}
61+
p {
62+
font-family: monospace;
63+
text-align: right;
64+
}
65+
img {
66+
width: 266px;
67+
}

‎gayaDetail.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
body {
2+
background-color: rgb(137, 106, 29);
3+
width: 100%;
4+
height: 100%;
5+
align-items: center;
6+
}
7+
8+
.kontainer {
9+
width: max-content;
10+
margin: auto;
11+
overflow: hidden;
12+
}
13+
14+
img {
15+
padding: 10px;
16+
background-color: aliceblue;
17+
flex: content;
18+
}
19+
20+
#judul {
21+
text-align: center;
22+
margin-top: 30px;
23+
font-size: xxx-large;
24+
}
25+
26+
.howtomake {
27+
flex: 70%;
28+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29+
background-color: darkkhaki;
30+
padding: 10px;
31+
}

‎hamburg.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Hamburg Steak</title>
7+
<link rel="stylesheet" href="gayaDetail.css">
8+
</head>
9+
<body>
10+
<h1 id="judul">Hamburg Steak</h1>
11+
<div class="kontainer">
12+
<img src="https://cdn1-production-images-kly.akamaized.net/rl5shUp-S0U--QEF2hVbsCwBd84=/0x374:5588x3524/1360x766/filters:quality(75):strip_icc():format(webp)/kly-media-production/medias/3952023/original/094822500_1646366545-sasazawa.jpg" alt="Hamburg Steak">
13+
<div class="howtomake">
14+
<h3>Cara Membuat</h3>
15+
<p>Langkah 1 <br>
16+
Adonan Hamburg* bawang bombay yg sdh ditumis lalu campurkan ke adonan daging<br>
17+
Langkah 2<br>
18+
Tambahkan telur, tepung roti, lada,garam, gula, penyedap ke adonan daging lalu aduk aduk hingga rata<br>
19+
Langkah 3<br>
20+
Setelah adonan rata bentuk adonan dan masukkan dlm frezer kurleb 30 menit. Saya tdi pake 250 gram daging giling jadi 4 adonan hamburg<br>
21+
Langkah 4<br>
22+
Jika sdh 30 menit goreng adonan hamburg dgn minyak sedikit saja hingga matang<br>
23+
Langkah 5<br>
24+
<b> Bahan Saus</b> <br> masukkan margarin lalu Tumis bawang bombay dan bawang putih yg sdh dicincang hingga layu<br>
25+
Langkah 6<br>
26+
Campur saus sambal, saus tiram,bulgogi (optional) kecap manis,lada, dan siapkan maizena yg sdh dilarutkan dgn air kaldu<br>
27+
Langkah 7<br>
28+
Campurkan semua saus ke tumisan bawang bombay dan masukkan tepung maizena, aduk2 hingga mengental. Lebih enak lg tambahin susu uht 3sdm<br>
29+
Langkah 8<br>
30+
Siap disajikan dan dinikmati dgn sayuran pelengkap.</p>
31+
</div>
32+
</div>
33+
</body>
34+
</html>

‎index.html

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Menu Resoto</title>
8+
<link rel="stylesheet" href="gaya.css">
9+
</head>
10+
<body>
11+
<div class="headline">
12+
<h1> Menu Resoto</h1>
13+
<h5> Klik Kartu Menu untuk melihat lebih detil <br><br>
14+
Pilih pesanan anda dan sampaikan kepada kasir :)</h5>
15+
</div>
16+
<hr>
17+
<div class="sub">
18+
<h2 style="text-align: center;">Main Course</h2>
19+
</div>
20+
<div class="flex-container">
21+
<div class="card" onclick="window.location = 'nasgor.html'">
22+
<img src="https://kbu-cdn.com/dk/wp-content/uploads/nasi-goreng-saus-tiram.jpg" alt="Nasi Goreng">
23+
<div class="container">
24+
<h2><b>NASI GORENG</b></h2>
25+
<p>Rp 45.000,-</p>
26+
</div>
27+
</div>
28+
<div class="card" onclick="window.location = 'sirloin.html'">
29+
<img src="https://img-global.cpcdn.com/recipes/76ef73d03062526c/680x482cq70/sirloin-steak-foto-resep-utama.webp" alt="Steak">
30+
<div class="container">
31+
<h2><b>STEAK SIRLOIN</b></h2>
32+
<p>Rp 90.000,-</p>
33+
</div>
34+
</div>
35+
<div class="card" onclick="window.location = 'tenderloin.html'">
36+
<img src="https://asset.kompas.com/crops/G9BTpvfCxPxRR3aoZe_7re-8Twk=/0x0:780x390/780x390/data/photo/2013/08/16/1149586sinou-2780x390.jpg" alt="Steak Tenderloin">
37+
<div class="container">
38+
<h2><b>STEAK TENDERLOIN</b></h2>
39+
<p>Rp 100.000,-</p>
40+
</div>
41+
</div>
42+
<div class="card" onclick="window.location = 'sate.html'">
43+
<img src="https://media.suara.com/pictures/653x366/2019/02/13/63495-sate-kambing.jpg" alt="Sate Ayam">
44+
<div class="container">
45+
<h2><b>SATE AYAM</b></h2>
46+
<p>Rp 40.000,-</p>
47+
</div>
48+
</div>
49+
<div class="card" onclick="window.location = 'hamburg.html'">
50+
<img src="https://cdn1-production-images-kly.akamaized.net/rl5shUp-S0U--QEF2hVbsCwBd84=/0x374:5588x3524/1360x766/filters:quality(75):strip_icc():format(webp)/kly-media-production/medias/3952023/original/094822500_1646366545-sasazawa.jpg" alt="Hamburg Steak">
51+
<div class="container">
52+
<h2><b>HAMBURG STEAK</b></h2>
53+
<p>Rp 70.000,-</p>
54+
</div>
55+
</div>
56+
</div>
57+
58+
<hr>
59+
<div class="sub">
60+
<h2 style="text-align: center;">Beverages</h2>
61+
</div>
62+
<div class="flex-container">
63+
<div class="card" onclick="window.location = 'milkshake.html'">
64+
<img src="https://static.republika.co.id/uploads/images/inpicture_slide/milkshake-_140109164726-465.jpg" alt="Milkshkae">
65+
<div class="container">
66+
<h2><b>MILKSHAKE</b></h2>
67+
<p>Rp 28.000,-</p>
68+
</div>
69+
</div>
70+
<div class="card" onclick="window.location = 'machiato.html'">
71+
<img src="https://i0.wp.com/indobubbletea.blog/wp-content/uploads/2014/11/starbucks-iced-hazelnut-macchiato.jpg?resize=500%2C300&ssl=1" alt="Machiato">
72+
<div class="container">
73+
<h2><b>MACHIATO</b></h2>
74+
<p>Rp 30.000,-</p>
75+
</div>
76+
</div>
77+
<div class="card" onclick="window.location = 'mocktail.html'">
78+
<img src="https://i0.wp.com/indobubbletea.blog/wp-content/uploads/2014/11/mocktails2.jpg?resize=580%2C381&ssl=1" alt="Mocktail">
79+
<div class="container">
80+
<h2><b>MOCKTAIL</b></h2>
81+
<p>Rp 35.000,-</p>
82+
</div>
83+
</div>
84+
<div class="card" onclick="window.location = 'mojito.html'">
85+
<img src="https://i0.wp.com/indobubbletea.blog/wp-content/uploads/2014/11/smirnoff-apple-mojito-white-stores-alternative-cocktail-recipe-drink.jpg?resize=690%2C460&ssl=1" alt="Mojito">
86+
<div class="container">
87+
<h2><b>MOJITO</b></h2>
88+
<p>Rp 26.000,-</p>
89+
</div>
90+
</div>
91+
</div>
92+
</body>
93+
</html>

‎machiato.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Machiato</title>
7+
<link rel="stylesheet" href="gayaDetail.css">
8+
</head>
9+
<body>
10+
<h1 id="judul">Machiato</h1>
11+
<div class="kontainer">
12+
<img src="https://i0.wp.com/indobubbletea.blog/wp-content/uploads/2014/11/starbucks-iced-hazelnut-macchiato.jpg?resize=500%2C300&ssl=1" alt="Machiato">
13+
<div class="howtomake">
14+
<h3>Cara Membuat</h3>
15+
<p>Langkah 1 <br>
16+
Buat espresso terlebih dahulu.<br>
17+
Langkah 2<br>
18+
Hangatkan susu pada panci dengan suhu 62-65°C<br>
19+
Langkah 3<br>
20+
Pindahkan ke milk jug, lalu buat busa.<br>
21+
Langkah 4<br>
22+
Tuang susu busa ke dalam gelas tinggi<br>
23+
Langkah 5<br>
24+
Tuang espresso secara perlahan<br>
25+
Langkah 6<br>
26+
Terakhir beri sedikit "noda kopi" pada foam susu</p>
27+
</div>
28+
</div>
29+
</body>
30+
</html>

‎milkshake.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Milkshkae</title>
7+
<link rel="stylesheet" href="gayaDetail.css">
8+
</head>
9+
<body>
10+
<h1 id="judul">Milkshake</h1>
11+
<div class="kontainer">
12+
<img src="https://static.republika.co.id/uploads/images/inpicture_slide/milkshake-_140109164726-465.jpg" alt="Milkshake">
13+
<div class="howtomake">
14+
<h3>Pilihan rasa: Vanilla, Chocolate, dan Taro</h3>
15+
<h3>Cara Membuat</h3>
16+
<p>Langkah 1 <br>
17+
Masukkan susu, es batu, perasa bubuk, dan gula cair ke dalam shaker. Shake sampai rata.<br>
18+
Langkah 2 <br>
19+
Pindahkan ke gelas saji. Sajikan.<br></p>
20+
</div>
21+
</div>
22+
</body>
23+
</html>

‎mocktail.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Mocktail</title>
7+
<link rel="stylesheet" href="gayaDetail.css">
8+
</head>
9+
<body>
10+
<h1 id="judul">Mocktail</h1>
11+
<div class="kontainer">
12+
<img src="https://i0.wp.com/indobubbletea.blog/wp-content/uploads/2014/11/mocktails2.jpg?resize=580%2C381&ssl=1" alt="Mocktail">
13+
<div class="howtomake">
14+
<h3>Cara Membuat</h3>
15+
<p>Langkah 1 <br>
16+
Gosok2 kulit Sunkist dgn garam lalu cuci bersih. Cuci semua buah2 yg lain termasuk daun mint<br>
17+
Langkah 2<br>
18+
Kerok markisa keluarkan isinya,peras jeruk<br>
19+
Langkah 3<br>
20+
Tuang air perasan jeruk ke dlm wadah markisa,tambahkan gula singkong,aduk rata,lalu hangatkan sebentar aja asal hangat.<br>
21+
saya pakai penghangat listrik. Sisihkan biarkan dingin<br>
22+
Langkah 4<br>
23+
Potong2 buah2an (pear,anggur,Sunkist dan buah naga)<br>
24+
Langkah 5<br>
25+
Masukkan semua buah ke dalam teko,tuangi rebusan markisa dan jeruk peras,tambahkan es batu daun mint dan buah naga serta air,<br>
26+
aduk rata. Sy tambahkan buah naga terakhir spy air tidak lgs jd merah<br>
27+
Langkah 6<br>
28+
Fruit mocktail ice siap di nikmati</p>
29+
</div>
30+
</div>
31+
</body>
32+
</html>

‎mojito.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Mojito</title>
7+
<link rel="stylesheet" href="gayaDetail.css">
8+
</head>
9+
<body>
10+
<h1 id="judul">Mojito</h1>
11+
<div class="kontainer">
12+
<img src="https://i0.wp.com/indobubbletea.blog/wp-content/uploads/2014/11/smirnoff-apple-mojito-white-stores-alternative-cocktail-recipe-drink.jpg?resize=690%2C460&ssl=1" alt="Mojito">
13+
<div class="howtomake">
14+
<h3>Cara Membuat</h3>
15+
<p>Langkah 1 <br>
16+
Siapkan bahan2nya. <br>
17+
Langkah 2<br>
18+
Peras jeruk santang dan sisihkan 10 irisan.<br>
19+
Langkah 3<br>
20+
Masukan sunquick mandarin.<br>
21+
Langkah 4<br>
22+
Masukan sprite lime.<br>
23+
Langkah 5<br>
24+
Masukan irisan jeruk santang.<br>
25+
Langkah 6<br>
26+
Masukan daun mint. Sebagian daun diremas2.<br>
27+
Langkah 7<br>
28+
Masukan es batu. Diamkan di kulkas selama 30 menit.<br>
29+
Langkah 8<br>
30+
Sajikan di gelas, boleh dimasukkan irisan jeruk dan daun mint ke dalam gelas.</p>
31+
</div>
32+
</div>
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)