html-css-dasar/index.html at master · intermediaamikom/html-css-dasar · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halama Utama</title>
    <link rel="stylesheet" href="assets/css/index.css">
</head>

<body>
    <div class="top bar light-grey-custom">
        <div class="hide-small container cell-row">
            <div class="cell">
                <h4 class="bar-item serif cell"><b>Nasi Padang</b></h4>
            </div>
            <div class="cell cell-middle">
                <a href="#kontak" class="bar-item button right">Kontak</a>
                <a href="#tentang" class="bar-item button right">Tentang Kami</a>
                <a href="#beranda" class="bar-item button right">Beranda</a>
            </div>
        </div>
        <div class="hide-large hide-medium cell-row container">
            <div class="cell">
                <h4 class="bar-item serif cell"><b>Nasi Padang</b></h4>
            </div>
            <div class="cell cell-middle">
                <a href="#" class="bar-item button right cell cell-middle">Menu</a>
            </div>
        </div>
    </div>
    <header class="display-container content wide" style="max-width:1600px;min-width:500px" id="beranda">
        <img class="image" src="assets/img/nasi-padang-1920.jpg" alt="Nasi Padang" width="1600" height="800">
        <div class="display-bottomleft padding-large opacity">
            <h1 class="xxlarge serif">Nasi Padang Indonesia</h1>
        </div>
    </header>
    <div class="content" style="max-width:1100px">

        <div class="row padding-64" id="tentang">
          <div class="col l6 m12 padding-large">
            <h1 class="center">Tentang Nasi Padang</h1><br>
            <h5 class="center">Traditional since 1960</h5>
            <p class="large center">Mengapa disebut "Nasi Padang"?
                Nasi Padang adalah sebutan bagi makanan khas Minangkabau, dibeli di restoran khusus yang biasanya dimiliki dan dikelola
                oleh orang Minangkabau. Restoran seperti ini dikenal dengan nama Rumah Makan Padang.
                "Rumah makan Padang" sebenarnya merupakan penamaan kontemporer bagi restoran Minangkabau yang mulai populer pada akhir
                1960-an.</p>
            <p class="large text-grey hide-medium center">
                Penyebutan "Padang" adalah bagian dari perubahan identitas yang dilakukan oleh orang Minangkabau saat itu, menyusul
                pemberontakan Pemerintahan Revolusioner Republik Indonesia (PRRI) di Sumatera Barat.</p>
          </div>
          <div class="col l6 m12 padding-large hide-small">
            <img src="assets/img/nasi-padang-720.png" class="round image opacity-min" alt="Table Setting" width="600" height="750">
           </div>
        </div>

        <hr>

        <div class="container padding-64" id="kontak">
          <h1>Kontak Kami</h1><br>
          <p>Kami menawarkan Nasi Padang layanan lengkap dengan varian lauk apa pun, besar atau kecil. Kami memahami kebutuhan Anda dan kami akan melayani makanan untuk memenuhi kriteria dari mereka semua, baik tampilan maupun rasa. Jangan ragu untuk menghubungi kami.</p>
          <p>You can also contact us by phone 00553123-2323 or email catering@catering.com, or you can send us a message here:</p>
          <form action="#" target="_blank">
            <p><input class="input padding-16" type="text" placeholder="Masukan Nama" required name="Name"></p>
            <p><input class="input padding-16" type="number" placeholder="Masukan Nomor HP" required name="People"></p>
            <p><input class="input padding-16" type="text" placeholder="Masukan yang ingin dipesan" required name="Message"></p>
            <p><button class="button light-grey section" type="submit">Kirim Pesanan</button></p>
          </form>
        </div>

      </div>
      <footer class="center light-grey padding-32">
        <p>Ini Catatan Kaki 2020 - <a href="http://progate.com" target="_blank">Progate.com</a></p>
      </footer>
</body>

</html>