Website Warteg PWEB-A

 

tugas PWEB-A : membuat Website Warung Tegal



Assalamualaikum Warrahmatullahi Wabarakatuh , saya Rihan Farih Bunyamin. Saya merupakan mahasiswa Institut Teknologi Sepuluh Nopember Surabaya jurusan Teknik Informatika angkatan 2019 dengan NRP 05111940000165.

Di post kali ini, saya membuat website warung dengan menggunakan HTML,dan  CSS. Di website warung tegal ini terdapat image carousel dan embed video ke youtube video tentang makanan

Berikut adalah tampilan dari hasil pekerjaan saya:



tampilan atas (terdapat carousel +video)


tampilan bawah


Berikut pula saya lampirkan source codenya :
Copy
<!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>Web Warteg pweb </title>
 <style>
 header, section, footer, aside, nav, article, figure, figcaption {
 display: block;
 }
 body {
 color: #666666;
 background-color: #f9f8f6;
 background-image: url(https://www.ppt-backgrounds.net/thumbs/dark-wood-grain-image-templates-backgrounds.jpg);
 background-position: center;
 font-family: Georgia, 'Times New Roman', Times, serif;
 line-height: 1.4em;
 margin: 0px;
 }
 .wrapper {
 width: 940px;
 margin: 20px auto 20px auto;
 border: 2px solid #000000;
 background-color: #ffffff;
 }
 header {
 background-image: url(http://www.nyekrip.com/wp-content/uploads/2015/custom/images/header.png);
 height: 160px;
 }
 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 {
 color: #000000
 }
 section.courses {
 float: left;
 width: 659px;
 border-right: 1px solid #eeeeee;
 }
 article {
 clear: both;
 overflow: auto;
 width: 100%;
 }
 hgroup {
 margin-top: 40px;
 }
 figure {
 float: left;
 width: 290px;
 height: 270px;
 padding: 5px;
 margin: 20px;
 border: 1px solid #eeeeee;
 }
 figcaption {
 font-size: 90%;
 text-align: left;
 padding-bottom: -500px;
 }
 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;
 }
 img {
 width: 100%;
 }
 * {box-sizing:border-box}
* {box-sizing:border-box}
/* Slideshow container */
 .slideshow-container {
 max-width: 1000px;
 position: relative;
 margin: auto;
 }
/* Make the images invisible by default */
 .Containers {
 display: none;
 }
.ContainersImage {
 display: block;
 }
/* forward & Back buttons */
 .Back, .forward {
 cursor: pointer;
 position: absolute;
 top: 48%;
 width: auto;
 margin-top: -23px;
 padding: 17px;
 color: grey;
 font-weight: bold;
 font-size: 19px;
 transition: 0.4s ease;
 border-radius: 0 5px 5px 0;
 user-select: none;
 }
/* Place the "forward button" to the right */
 .forward {
 right: 0;
 border-radius: 4px 0 0 4px;
 }
/*when the user hovers,add a black background with some little opacity */
 .Back:hover, .forward:hover {
 background-color: rgba(0,0,0,0.8);
 }
/* Caption Info */
 .Info {
 color: #000000;
 font-size: 16px;
 padding: 10px 14px;
 position: absolute;
 bottom: 10px;
 width: 100%;
 text-align: center;
 }
/* The circles or bullets and indicators */
 .dots {
 cursor: pointer;
 height: 16px;
 width: 16px;
 margin: 0 3px;
 background-color: #acc;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.5s ease;
 }
.enable, .dots:hover {
 background-color: #717161;
 }
 </style>
 <script>
 var slidePosition = 1;
 SlideShow(slidePosition);
function plusSlides(n) {
 SlideShow(slidePosition += n);
 }
function currentSlide(n) {
 SlideShow(slidePosition = n);
 }
function SlideShow(n) {
 var i;
 var slides = document.getElementsByClassName("Containers");
 if (n > slides.length) {slidePosition = 1}
 if (n < 1) {slidePosition = slides.length}
 for (i = 0; i < slides.length; i++) {
 slides[i].style.display = "none";
 }
 slides[slidePosition-1].style.display = "block";
 }
</script>
</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="" >tentang</a></li>
 <li><a href="" >kontak</a></li>
 </ul>
 </nav>
 </header>
 <section class="courses">
 <h2 style="text-align: center;">Menu Masakan</h2>
 <div class="slideshow-container">
 <div class="Containers ContainersImage">
 <img src="https://akcdn.detik.net.id/community/media/visual/2017/03/22/d3cb3b7a-aa3a-4e0a-a0d4-83828a40b5d5_43.jpg?w=700&q=90" style="width:100%;">
 <div class="Info">Soto Ayam</div>
 </div>
 <div class="Containers">
 <img src="https://asset.kompas.com/crops/WEobc3xFKmWHmDnwFgXfW8E1KTU=/0x0:780x520/750x500/data/photo/2020/07/16/5f0fd4c86ce13.jpg" style="width:100%">
 <div class="Info" style="color: white;">Pecel</div>
 </div>
 <div class="Containers">
 <img src="https://www.resepistimewa.com/wp-content/uploads/resep-nasi-rames.jpg" style="width:100%">
 <div class="Info" style="color: white;">Nasi rames</div>
 </div>
 <a class="Back" onclick="plusSlides(-1)">&#10094;</a>
 <a class="forward" onclick="plusSlides(1)">&#10095;</a>
 </div>
 <h2 style="text-align: center;">Postingan</h2>
 <article>
 <figure>
 <img src="https://akcdn.detik.net.id/community/media/visual/2017/03/22/d3cb3b7a-aa3a-4e0a-a0d4-83828a40b5d5_43.jpg?w=700&q=90" alt="soto"/>
 <figcaption>Soto Indonesia</figcaption>
 </figure>
 <hgroup>
 <h2>Soto Ayam</h2>
 <h3>Makanan Berkuah</h3>
 </hgroup>
 <p>Soto ayam adalah makan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p>
 </article>
 <article>
 <figure>
<img src="https://asset.kompas.com/crops/WEobc3xFKmWHmDnwFgXfW8E1KTU=/0x0:780x520/750x500/data/photo/2020/07/16/5f0fd4c86ce13.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>
 <figure>
 <img src="https://www.resepistimewa.com/wp-content/uploads/resep-nasi-rames.jpg" alt="nasi rames" width="280" />
 <figcaption>Nasi Rames</figcaption>
 </figure>
 <hgroup>
 <h2>Nasi Rames</h2>
 <h3>Makanan dengan bermacam lauk-pauk</h3>
 </hgroup>
 <p>Nasi rames, atau nasi campur adalah masakan khas Indonesia. Makanan ini terdiri dari nasi putih yang dihidangkan dengan bermacam-macam lauk-pauk.</p>
 </article>
</section>
 </section>
 <aside>
 <section class="popular-recipes">
 <h2>Masakan Populer</h2>
 <a href="">Sayur Sop</a>
 <a href="">Sayur Asem</a>
 <a href="">Sayur Lodeh</a>
 <a href="">Sayur Bayam</a>
 </section>
 <section class="popular-recipes">
 <h2>Video Masakkan</h2>
 <iframe width="230" height="165" src="https://www.youtube.com/embed/cqSDDmYqRgg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </section>
 <section class="contact-details">
 <h2>Kontak</h2>
 <p>Warung Tegal <br> di seluruh indonesia</p>
 </section>
 </aside>
 <footer>
 &copy; 2021 Warung Tegal - Pweb A rihan 165
 </footer>
 </div>
</body>
</html>
view raw index.html delivered with ❤ by emgithub

untuk lebih jelas dapat dilihat di :

link website
link Sourcecode

Sekian Penjelasan mengenai Perkerjaan yang saya kerjakan. Apabila ada kekurangan serta kesalahan mohon dimaafkan. Wassalamualaikum Warrahmatullahi Wabarakatuh.








Komentar

Posting Komentar

Postingan populer dari blog ini

Testcase Table EDM

  No Name Source Problem Size Optimal Solution Table 1   C01 (Goyal, 1984) 3x3 1650 [Cij]3x3 = [6 10 14; 12 19 21; 15 14 17]   [Si]3x1 = [50 50 50]   [Dj]1x3 = [30 40 55] 2   C02 (Deshmukh, 2012) 3x4 743 [Cij]3x4 = [19 30 50 10; 70 30 40 60; 40 8 70 20]   [Si]3x1 = [7 9 10]   [Dj]1x4 = [5 8 7 14] 3   C03 (Ramadan & Ramadan, 2012) 3x4 5600 [Cij]3x3 = [32 40 120; 60 68 104; 200 80 60]   [Si]3x1 = [20 30 45]   [Di]1x3 = [30 35 30] 4   C04 (Uddin et al., 2016) 3x4 149 [Cij]3x4 = [6 3 5 4; 5 9 2 7; 5 7 8 6]   [Si]3x1 = [22 15 8]   [Di]1x4 = [7 12 1...
Baca selengkapnya

PBKK 8

Gambar
  Assalamualaikum Warrahmatullahi Wabarakatuh. Kembali Lagi dengan Jurnal Tugas PBKK kali ini pada  minggu perkuliahan kami diminta untuk  membuat  page sederhana menggunakan framework Codeigniter. Oleh karena itu kuy kita lihat hasilnya  Step 1 Kita harus menginstal composer terlebih dahulu di komputer kalian. Jika kalian menggunakan Windows, kalian dapat mendownload Composer-Setup.exe pada link berikut: https://getcomposer.org/download/ Step 2 Untuk menginstal Codeigniter 4 melalui composer, dapat dilakukan dengan mengetikan perintah berikut pada Terminal/ Command Prompt:  composer create-project codeigniter4/appstarter nama proyek --no-dev Step 3  Ketik php spark serve untuk mengrun CI , Jika berhasil maka akan muncul hasil dibawah ini Jika sudah terbuka, maka selanjutnya kita edit file yang ada pada folder app/views, yaitu file welcome_message.php. Lalu edit codingannya menjadi berikut ini   (Link SC Github) Jalankan Juga xampp control pa...
Baca selengkapnya

Dataset TA Rihan Farih Bunyamin - CSM

Gambar
 Berikut ini adalah tabel lengkap dari dataset Tugas Akhir "Perhitungan Initial Basic Feasible Solution Pada Transportation Problem dengan Menggunakan Cost Supply Method (CSM)" Video Pengerjaan :  https://youtu.be/rBPzbL0wvRo Dataset CSM: No Referensi Nama TP Ukuran TP Nilai Optimal Matriks 1 (Ramadan, 2012) N01 3x3 5600 [ Cij ]3x3 = [32 40 120; 60 68 104; 200 80 60] [Si]3x1 = [20 30 45] [ Dj ]1x3 = [30 35 30] 2 (Samuel, 2012) N02 3x4 28 [ Cij ]3x4 = [1 2 3 4; 4 3 2 0; 0 2 2 1] [Si]3x1 = [6 8 10] [ Dj ]1x3 = [4 6 8 6]   3 (Imam et al., 2009) N03 3x4 435 [ Cij ]3x4 = [10 2 20 11; 12 7 9 20; 4 14 16 18] [Si]3x1 = [15 25 10] [ Dj ]1x4 = [5 15 15 15]   4 (Kaur et al., 2018) N04 ...
Baca selengkapnya