TUGAS PWEB-D MINGGU KE-3 (MEMBUAT Warung Tegal HTML5)
TUGAS PWEB-D MINGGU KE-3 (MEMBUAT WARUNG TEGAL HTML5)
Pada minggu ketiga pemrograman web kelas D ditugaskan membuat Website Warung Tegal dengan HTML5. Disini saya memiliki 3 file dan dua folder.
Link Repository : https://github.com/bagusistighfar86/bagusistighfar86.github.io/tree/main/pweb-d/pertemuan3
Link Web : https://bagusistighfar86.github.io/pweb-d/pertemuan3/
1. index.html
Menyimpan code main dari website ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warung Tegal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="gambar/logo_header.png" alt="logo">
</div>
<nav class="navbar">
<p>WARUNG TEGAL</p>
<ul>
<li><a href="#">BERANDA</a></li>
<li><a href="#">DAFTAR MASAKAN</a> </li>
<li><a href="#">KATERING</a></li>
<li><a href="#">TENTANG</a></li>
<li><a href="#">KONTAK</a></li>
</ul>
</nav>
</header>
<div class="content">
<aside>
<section class="popular-recipes">
<h2>Masakan Popular</h2>
<a href="#">Soto Betawi</a>
<a href="#">Nasi Jagung Probolinggo</a>
<a href="#">Rujak Cingur</a>
</section>
<section class="contac-details">
<h2>Kontak</h2>
<table>
<tr>
<td>E-Mail </td>
<td>: baguspweb@gmail.com</td>
</tr>
<tr>
<td>No. Hp </td>
<td>: 081234578912</td>
</tr>
<tr>
<td>IG </td>
<td>: @baguspweb86</td>
</tr>
</table>
</section>
<section class="audio">
<audio controls autoplay>
<source src="lagu/music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</section>
</aside>
<section class="content">
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bX6bFSAm52k"
title="Profil Warung Tegal" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<article class="SotoBetawi">
<figure>
<div class="gambar"></div>
</figure>
<hgroup>
<h2>Soto Betawi</h2>
<h3>Makanan Berkuah</h3>
</hgroup>
<p>Soto betawi adalah makanan khas Indonesia yang berupa
sejenis sup ayam dengan kuah yang berwarna kekuningan.</p>
</article>
<article class="NasiJagung">
<figure>
<div class="gambar"></div>
</figure>
<hgroup>
<h2>Nasi Jagung Probolinggo</h2>
<h3>Makanan Pedas</h3>
</hgroup>
<p>Nasi Jagung Probolinggo adalah makanan khas Jawa Timur
yang terdiri dari sayur, dadar jagung, ikan tongkol, sambal,
nasi jagung, urap - urap, dan lain - lain</p>
</article>
<article class="Rujak">
<figure>
<div class="gambar"></div>
</figure>
<hgroup>
<h2>Rujak Cingur</h2>
<h3>Makanan Bumbu Kacang</h3>
</hgroup>
<p>Rujak Cingur adalah makanan khas Surabaya yang terbuat dari
olahan bumbu kacang yang terdiri dari kecambah, lontong dan lauk lainnya
seperti telur, tahu, tempe, dan pastinya cingur.
</p>
</article>
</section>
</div>
<div class="footer">
<p class="copyright">Copyright 2021. Warung Tegal. all rights reserved</p>
</div>
</div>
</body>
</html>
2. style.css
Menyimpan code style berupa css untuk menambah hiasan pada tampilan HTML
@import url(reset.css);
body{
background-image: url(gambar/bg.jpeg);
}
.container {
/* background-color: salmon; */
margin : 50px auto;
width : 75%;
}
header .logo img {
width: 80px;
margin-left: 20px;
}
header .logo {
border-radius: 50px 50px 0 0;
padding: 20px;
background-color: black;
box-sizing: border-box;
}
nav {
position: relative;
height: 370px;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 1) 100%),
url(gambar/heroimage.jpg);
background-size: cover;
background-position: 0, 0 -200px;
border-top: 5px solid salmon;
}
nav p {
font-size: 100px;
font-weight: bold;
width: 100%;
position : absolute;
bottom: 40%;
/* left: 50%; */
text-align: center;
color: #eaeaea;
font-size: bold;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
nav ul li a {
font-family: 'CALIBRI';
font-size: 30px;
text-decoration: none;
color: #eaeaea;
}
nav ul li {
display : inline-block;
padding: 0 15px;
margin-top: 320px;
margin-left: 20px;
}
nav a:hover {
color: #985d6a;
}
section.content {
padding-top: 30px;
padding-bottom: 20px;
width: 70%;
background-color: #000000;
border-right: 1px solid #eaeaea;
}
.youtube{
margin-left: 50px;
margin-bottom: 20px;
}
article {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
overflow: auto;
width: 100%;
}
hgroup {
margin-top: 40px;
}
article hgroup h2 {
color: white;
font-size: 50px;
}
article hgroup h3 {
margin-top: 10px;
color: #19aa92;
font-size: 35px;
}
article p {
color: #eaeaea;
margin-top: 25px;
margin-right: 25px;
font-size: 20px;
}
figure {
background-size: cover;
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px 50px;
border-radius: 20px;
}
.SotoBetawi figure {
background-image: url(gambar/soto\ betawi.jpg);
}
.NasiJagung figure {
background-image: url(gambar/nasi\ jagung.jpg);
}
.Rujak figure {
background-image: url(gambar/rujak.jpg);
}
aside {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
float: right;
width: 30%;
font-size: 20px;
color: white;
}
aside section a{
display: block;
padding:10px 0;
border-bottom: 1px solid #eeeeee;
color: #ffffff;
text-decoration: none;
}
aside section a:hover {
color: #985d6a;
background-color: #efefef;
}
aside section{
padding: 30px 30px 30px 30px;
}
aside h2{
margin: 15px 0;
font-weight: bold;
font-size: 40px;
}
aside table{
margin: 15px 0;
}
aside table,tr,td{
padding: 10px 10px 10px 0;
}
div.content{
background-color: #000000;
overflow: hidden;
}
.footer .copyright{
background-color: salmon;
color: white;
padding: 20px;
}
.footer p{
font-size: 18px;
color: black;
text-align: center;
}
3. reset.css
Menyimpan code untuk reset setting style html agar lebih mudah dalam memodifikasi css. Code ini saya dapatkan dari https://meyerweb.com/eric/tools/css/reset/. Dan informasi ini saya dapatkan dari youtube Sandhika Galih Web Programming UNPAS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
4. Folder gambar untuk menyimpan resource gambar
5. Folder lagu untuk menyimpan resource audio
Komentar
Posting Komentar