LATIHAN 04

LATIHAN 04
MEMBUAT WEBSITE PHP SEDERHANA

Amatullah Nuha Salsabila
Tema Website : Toko Produk

Nama Toko : Sepiring Nasi
SCREENSHOT TAMPILAN WEBSITE
Figure 1 Halaman index.php

Figure 2 Halaman About.php
Figure 3 Halaman Featured Product
Figure 4 Halaman Featured Product
Figure 5 Halaman Contact Us
SOURCE CODE
Index.php
<?php
?>
<html>
<head>

<title>Sepiring Nasi</title>
<link href="https://fonts.googleapis.com/css?
family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="layout.css" />
</head>
<body>

<header> 

<div class="logo">
<h1>SEPIRING NASI</h1>
<h4>Eat Locally, Think Globally</h4>
</div>
<div class="navigasi">
<ul>
<li><a href="home.php">ABOUT</a></li>
<li><a href="product.php">FEATURED
PRODUCTS</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</div>
</header>
<main> 

<div class="konten">
<div class="padding_this">
<h2>
Experience Beyond Ordinary
</h2>
<p>
Pilihan menu makanan semakin lama semakin
beragam. Di era globalisasi yang menyentuh semua lapisan
masyarakat tak heran menyebabkan pergeseran gaya hidup kebanyakan.
Memilih makanan yang kebarat-baratan dan mulai meninggalkan
makanan lokal. Menyedihkan.
</p>
<p>
Maka hadirlah kami, SEPIRING NASI, di era
disrupsi ini untuk kembali mengingatkan makanan-makanan dengan
kearifan lokal. Cita rasa yang tidak biasa. Bukan sekedar hanya.
Kami titip harapan ini kepada dunia. Semoga SEPIRING NASI cukup
membantu Indonesia. Ke depannya.
</p>
<p>
The choice is in your hand. You decide.
Ready to experience beyond ordinary? Grab fast!
</p>
</div>
</div>
</main>
<footer> 

<div class="footer">
<small>© Coming Really Soon - Sepiring Nasi 2020
</small>
</div>
</footer>
</body>
</html>
About.php
<?php ?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="logo">
</div>
<ul>
PRODUCTS</a></li>
</ul>
</div>
</header>

<h2>
Home
</h2>
<p>
Sepiring <br>
/n/ <br>
bringing people together one plate at a
time.<br><br>
Nasi <br>
/n/<br>
seed of the grass species Oryza sativa
(Asian rice) or Oryza glaberrima (African rice).
</p>
</div>
</div>
</main>

</small>
</div>
</footer>
</body>
</html>
Product.php
<?php ?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="logo">
</div>
<ul>
PRODUCTS</a></li>
</ul>
</div>
</header>

<h2>
Featured Product
</h2>
<p>Nasi Kuning</p>
<img width=300 height=260 src='images/nasi-
kuning.jpg'/>
<p>image source :
https://cdn2.tstatic.net/bali/foto/bank/images/resep-membuat-nasi-
kuning-enak.jpg</p><br>
<p>Nasi Uduk</p>
uduk.jpg'/>
<p>image source :
https://doy9lykf9ter0.cloudfront.net/photo/5c90c25c8e4d537b0abeb1c
8<br>
<p>Nasi Pecel</p>
pecel.jpg'/>
<p>image source : http://4.bp.blogspot.com/-
opDPQ1eL97g/VUHiG9cp0RI/AAAAAAAAAcs/DcZVml_wpe0/s1600/Resep%2BNasi
%2BPecel%2BMadiun.jpg</p>
</div>
</div>
</main>

</small>
</div>
</footer>
</body>
</html>
Contact.php
<?php ?>
<!DOCTYPE html>
<html>
<head>
<title >Sepiring Nasi</title>
</head>
<body>

<div class="logo">
</div>
<ul>
PRODUCTS</a></li>
</ul>
</div>
</header>

<h2>
Contact Us
</h2>
<p>
Tell us about your Sepiring Nasi dining experience
or share your thoughts with us. We’d love to hear from you and
enhance your next visit with a Sepiring Nasi voucher* from us!
<br><br>
E-mail : customer@sepiringnasi.id<br>
Instagram : sepiringnasi</p>
</div>
</div>
</main>

</small>
</div>
</footer>
</body>
</html>
Layout.css
body {
width: 100%;
margin: 0px auto;
}
main {
display: flex;
}
.padding_this{
padding: 15px;
}
.logo,
.navigasi,
.konten,
.container,
.footer {
margin-bottom: 5px;
padding: 15px 0;
}
.logo {
width: 100%;
height: 150px;
background: linear-gradient(to right, #FFAFBD, #ffc3a0);
text-align: center;
color: #d15276;
font-family: 'Roboto', monospace;
font-size: 20px;
}
.navigasi {
width: 100%;
height: auto;
background: linear-gradient(to left, #FFAFBD, #ffc3a0);
text-align: center;
color: #d15276;
}
.konten {
width: 100%;
background: linear-gradient(to right, #FFAFBD, #ffc3a0);
}
.footer {
width: 100%;
background: linear-gradient(to left, #FFAFBD, #ffc3a0);
text-align: center;
}
.navigasi ul{
padding: 0;
list-style: none;
display: inline-block;
margin: 0;
}
.navigasi li{
float: left;
margin: 0 10px;
}

LATIHAN 04 - Amatullah Nuha

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

LATIHAN 04 - Amatullah Nuha

Diunggah oleh

Hak Cipta:

Format Tersedia

MEMBUAT WEBSITE PHP SEDERHANA

Tema Website : Toko Produk

SCREENSHOT TAMPILAN WEBSITE

Figure 1 Halaman index.php

<header>

<main>

<footer>

<header>

<main>

<footer>

<header>

<main>

<footer>

<header>

<main>

<footer>

Anda mungkin juga menyukai