Langsung ke konten utama

Belajar Web Ceria 2

Membuat Web untuk Warung Tegal menggunakan HTML



Halo kisanak! kali ini aku mencoba membuat sebuah tampilan web sederhana untuk warung tegal andalan kita semua dengan menggunakan HTML. Kalian bisa lihat langsung disini. Berikut ini tampilannya




Berikut ini untuk Source Codennya
<!DOCTYPE html>
<html>
<head>
<title>Web Warung Tegal</title>
<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("https://image.freepik.com/free-vector/hand-drawn-delicious-food-background_52683-16136.jpg");
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0px;}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;}
header {
height: 160px;
background-image: url(https://i2.wp.com/www.hops.id/wp-content/uploads/2020/06/Warteg.jpg?resize=780%2C470&ssl=1);}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;}
nav, footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;}
nav li {
display: inline;
margin-right: 40px;}
nav li a {
color: #ffffff;}
nav li a:hover, nav li a.current {
color: #000000;}
section.courses {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;}
article {
clear: both;
overflow: auto;
width: 100%;}
hgroup {
margin-top: 40px;
}
p {
text-align: justify;
}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;}
figcaption {
font-size: 90%;
text-align: left;}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;}
aside section a:hover {
color: #985d6a;
background-color: #efefef;}
a {
color: #de6581;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;}
h3 {
margin: 0px 0px 10px 0px;
color: #de6581;}
aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>Warung Tegal</h1>
<nav>
<ul>
<li><a href="" class="current">beranda</a></li>
<li><a href="">daftar masakan</a></li>
<li><a href="">katering</a></li>
<li><a href="">Find more</a></li>
<li><a href="">kontak</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article id="soto">
<figure>
<img src="http://4.bp.blogspot.com/-wP8sH1bgi-c/VbZi2-Ku6SI/AAAAAAAAAMs/dPVkGhCu5dE/s1600/soto.jpg" alt="soto" />
<figcaption>Soto Indonesia</figcaption>
</figure>
<hgroup>
<h2>Soto Ayam</h2>
<h3>Makanan Berkuah</h3>
</hgroup>
<p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p>
</article>
<article id="pecel">
<figure>
<img src="http://1.bp.blogspot.com/-PZ3qtzLLIQw/VbZi2DlddXI/AAAAAAAAAMk/hX55MW62ZFM/s1600/pecel.jpg" alt="pecel" />
<figcaption>Pecel Indonesia</figcaption>
</figure>
<hgroup>
<h2>Masakan Pecel</h2>
<h3>Makanan dengan Bumbu Kacang</h3>
</hgroup>
<p>Pecel adalah makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p>
</article>
<article id="lodeh">
<figure>
<img src="https://assets.pikiran-rakyat.com/crop/0x0:0x0/x/photo/2020/09/03/1016500692.png" alt="Lodeh" width="290" height="190"/>
<figcaption>Sayur Lodeh</figcaption>
</figure>
<hgroup>
<h2>Sayur Lodeh</h2>
<h3>Makanan dengan Santan</h3>
</hgroup>
<p>Sayur lodeh (bahasa Jawa: ꦗꦔꦤ꧀​ꦭꦺꦴꦝꦺꦃ, translit. Jangan lodhèh) adalah masakan sayur yang berkuah santan khas daerah Jawa tengah. Sayur lodeh mempunyai berbagai macam variasi terutama pada bumbunya, ada yang santannya berwarna putih & berwarna kuning kemerahan.</p>
</article>
<article id="bayam">
<figure>
<img src="https://cdn.yummy.co.id/content-images/images/20200508/HZ5sbHlHWh95ivBzKufzyV9gUMV9e6mm-31353838393132393536d41d8cd98f00b204e9800998ecf8427e_800x800.jpg" alt="pecel" width="290" height="190"/>
<figcaption>Sayur Bayam</figcaption>
</figure>
<hgroup>
<h2>Sayur Bayam</h2>
<h3>Makanan dengan Bayam</h3>
</hgroup>
<p>Seperti yang kita ketahui, bayam merupakan sayuran hijau yang kaya akan zat besi. Sayuran hijau ini bisa diolah menjadi berbagai macam jenis makanan. Mulai diolah dengan cara ditumis, disayur ataupun dibuat keripik.</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Masakan Populer</h2>
<a href="#soto">Sayur Sop</a>
<a href="#pecel">Sayur Asem</a>
<a href="#lodeh">Sayur Lodeh</a>
<a href="#bayam">Sayur Bayam</a>
</section>
<section class="contact-details">
<h2>Find More</h2>
<p>Warung Tegal<br />
di seluruh indonesia
</section>
<iframe width="240" height="auto" src="https://www.youtube.com/embed/t0zE2nSE5Mo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</aside>
<footer>
&copy; 2021 Warung Tegal
</footer>
</div><!-- .wrapper -->
</body>
</html>
view raw gistfile1.txt hosted with ❤ by GitHub


Label

Labels:

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Java Ceria 5

Game The world-of-zuul      Halo kisnak, kali ini aku akan membuat sebuah project kecil yang dibuat berdasarkan buku Object First With Java. Game ini sebenarnya bertipe adventure, tapi ya biasa aja dan membosankan. Akan tetapi, ini bisa menjadi implementasi untuk Designing Classes. Terdapat 5 kelas pada project ini, yaitu: ■ CommandWords - Kelas CommandWords mendefinisikan semua Command yang valid dalam permainan (go, help, quit). Ini dilakukan dengan menyimpan array objek String yang mewakili kata-kata perintah. ■ Parser  - Parser membaca baris input dari terminal dan mencoba menafsirkannya sebagai Command. Ini membuat objek dari Class Command yang mewakili perintah itu masuk. ■ Command  - Sebuah objek perintah mewakili perintah yang dimasukkan oleh pengguna. Ini memiliki metode yang memudahkan kita untuk memeriksa apakah ini adalah perintah yang valid dan untuk mendapatkan kata pertama dan kedua dari perintah tersebut sebagai string terpisah. ■ Room - Objek ...
Posting Komentar
Read more »

Belajar Java Ceria 4

Technical Support System Sederhana     Sebuah Technical Support System yang sesungguhnya pasti memakai bot didalamnya, dan itu perlu ilmu yang lebih tinggi karena merupakan salah satu contoh aplikasi kognitif dan penerapan AI. Tapi kali ini aku akan buat yang versi sederhana saja berdasarkan buku Objects First With Java bab 5 bagian 5.2. Jadi dibuku sudah dibuat program dasarnya,  yang betul-betul simpel banget dan biasa aja. Nah disini aku sedikit modifikasi agar sistem ini terlihat lebih "hidup". Jadi berikut ini Class dari programnya, dan sudah kubuat dokumentasi singkat didalamnya InputReader Responder supportSystem mainSupportSystem Ini akan jadi main program yang akan menjalankan seluruh Class di atas Dan berikut ini salah satu output yang dapat diberikan Kalian bisa kok menggunakan kode diatas dan membuat variasi yang lebih menarik dari ini. Mantap, Rispek!!✌
Posting Komentar
Read more »

Belajar Java Ceria 3

 Grouping Object      Kali ini aku akan mencoba implementasi sederhana tentang grouping object dengan Collection serta membuat Sistem lelang sangat sederhana  Java Collection Java Collection secara sederhana merupakan sebuah objek. Collectionadalah framework yang menyediakan tempat untuk menyimpan dan memanipulasi sekumpulan objek. framework ini dapat melakukan pencarian, pengurutan, memasukan data dan menghapus. Collection menyediakan berbagai interface seperti Set, List, Queue, Dequeue dan untuk class-nya antara lain, ArrayList, Vector, Linked List, dll.  ArrayList Contoh ArrayList ini memakai iterasi while Contoh ArrayList dengan For-Each Loop ini memakai iterasi for Contoh ArrayList dan Class Data Disini perlu dibuat dulu Class Mahasiswa, bisa seperti ini Dan Seperti ini Class dari ArrayListnya Contoh Memakai addAll di ArrayList Contoh Memakai RemoveAll di ArrayList Contoh Memakai RetainAll di ArrayList Demikian berbagai contoh pengunaan Arraylist. Lal...
3 komentar
Read more »