0% found this document useful (0 votes)
14 views5 pages

HTML NasiLemak

Uploaded by

tnaufal02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
14 views5 pages

HTML NasiLemak

Uploaded by

tnaufal02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

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;
}

You might also like