HTML NasiLemak
HTML NasiLemak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.css" integrity="sha512-
5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/
+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Kedai Nasi Lemak</title>
</head>
<body>
<header>
<nav class="navbar">
<div class="navdiv">
<div class="logo">
<img src="https://img.freepik.com/premium-vector/nasi-lemak-bungkus-
logo_683726-54.jpg" alt="Logo Nasi Lemak">
</div>
<ul>
<li><a href="#info">Info</a></li>
<li><a href="#kelebihan">Kelebihan</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#kombo">Kombo</a></li>
</ul>
</div>
</nav>
</header>
<section id="info" class="info">
<div class="infocontainer">
<h1>Dapatkan Nasi Lemak Di Sini!</h1>
<form>
<input type="email" placeholder="Sila masukkan email..."
required></input>
</form>
<input type="submit" value="Hantar" id="form"></input>
</div>
</section>
<section class="kelebihan" id="kelebihan">
<h1 style="text-align:center">Kelebihan</h1>
<div class="kelebihancontainer">
<div class="logokelebihan">
<img src="https://png.pngtree.com/png-vector/20220630/ourmid/pngtree-
rasterize-logo-template-bold-brand-png-image_5584123.png">
</div>
<div class="penerangankelebihan">
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</h5>
</div>
<div class="logokelebihan">
<img src="https://png.pngtree.com/png-vector/20220630/ourmid/pngtree-
rasterize-logo-template-bold-brand-png-image_5584123.png">
</div>
<div class="penerangankelebihan">
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</h5>
</div>
<div class="logokelebihan">
<img src="https://png.pngtree.com/png-vector/20220630/ourmid/pngtree-
rasterize-logo-template-bold-brand-png-image_5584123.png">
</div>
<div class="penerangankelebihan">
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</h5>
</div>
</div>
</section>
<section class="video" id="video">
<figure>
<iframe src="https://www.youtube.com/embed/I0tCIlF7Mgk?
si=tifywwlggmZGwKou"></iframe>
<figcaption><h3>Iklan Nasi Lemak</h3></figcaption>
</figure>
</section>
<section class="kombo" id="kombo">
<h1 style="text-align:center">Jenis Kombo</h1>
<div class="kombocontainer">
<div class="komboitem">
<h4>Kombo 1</h4>
<p style="text-align:center">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed</p>
<button>Beli</button>
</div>
<div class="komboitem">
<h4>Kombo 2</h4>
<p style="text-align:center">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed</p>
<button>Beli</button>
</div>
<div class="komboitem">
<h4>Kombo 3</h4>
<p style="text-align:center">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed</p>
<button>Beli</button>
</div>
</div>
</section>
</body>
<footer>
<p>Contact Us At:</p>
<div class="footercontainer">
<div class="footeritem1">
<div class="logokecil">
<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
</div>
<div class="logokecil">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</div>
<div class="logokecil">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
</div>
</div>
<div class="footeritem2">
<p>Privacy</p>
<p>Terms</p>
<p>Contact</p>
<span>Copyright 2016, Original Trombones</span>
</div>
</div>
</footer>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
img {
max-width: 80px;
}
.logo {
margin-right: auto;
}
.navdiv {
position: fixed;
top: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px;
}
li {
display: inline-block;
margin-left: 4px;
margin-right: 4px;
}
.infocontainer {
margin-top: 90px;
display: flex;
flex-direction: column;
align-items: center;
}
h1, input {
margin-bottom: 10px;
}
.kelebihan {
margin-top: 20px;
margin-bottom: 20px;
}
.kelebihancontainer {
display: grid;
grid-template-rows: 90px;
grid-template-columns: 30% 70%;
margin-left: 20px;
margin-right: 20px;
align-items: center;
}
.penerangankelebihan {
margin: 10px;
}
figure {
display: flex;
flex-direction: column;
align-items: center;
}
iframe {
width: 500px;
height: 400px;
}
.kombocontainer {
margin: 15px;
display: flex;
justify-content: center;
}
.komboitem {
border: 1px solid black;
display: flex;
flex-direction: column;
margin: 8px;
justify-content: space-between;
align-items: center;
padding: 20px;
height: 200px;
}
.kombo {
margin-top: 20px;
}
/*FOOTER STYLE*/
footer {
border-top: 1px solid black;
height: 80px;
}
.footercontainer {
display: flex;
justify-content: space-between;
align-items: center;
}
.footeritem1 {
display: flex;
margin: 10px;
}
.logokecil {
margin-left: 10px;
margin-rigth: 10px;
}
.footeritem2 {
width: 50%;
display: grid;
grid-template-rows: 40% 60%;
grid-template-columns: 25% 25% 25%;
justify-content: space-between;
align-items: center;
}
span {
grid-column-start: 1;
grid-column-end: 4;
}