Pada tugas ini diminta untuk memberikan modifikasi web warung tegal dengan video atau audio menggunakan HTML 5.
Link Web:
https://erzajanitra.github.io/PWEB/
Tampilan Web :
1. Tampilan landing page
2. Tampilan popular menu
3. Tampilan catering
4. Tampilan menu
5. Tampilan contact
Source Code :
1. index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Web Warung Tegal</title> | |
| <link rel="stylesheet" href="main.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <section class="headers"> | |
| <nav> | |
| <ul class="navigation-items nav navbar-nav navbar-right"> | |
| <li><a href="" class="current">Home</a></li> | |
| <li><a href="">Menu</a></li> | |
| <li><a href="">Catering</a></li> | |
| <li><a href="">About Us</a></li> | |
| <li><a href="">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </section> | |
| <section class="intro" style=" background: #FEFEF3 url(images/whitebg.jpg); background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover;" > | |
| <div class="container"> | |
| <div class="row align-items-center"> | |
| <div class="col"> | |
| <h1><b>Warung <br> Tegal</b></h1> | |
| <a class="button" href="#courses" title="" >See Popular Menu</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section>s | |
| <section class="courses" > | |
| <div id = "courses"></div> | |
| <h2><b>Popular Menu</b></h2> | |
| <div class="row" style="padding-top: 4rem; padding-bottom: 2rem;"> | |
| <div class="column"> | |
| <img src="images/pm1.jpg" alt="soto" /> | |
| <h3>Sayur Sop</h3> | |
| </div> | |
| <div class="column" style="margin-left: 50px;"> | |
| <img src="images/pm2.jpg" alt="soto" /> | |
| <h3>Sayur Asem</h3> | |
| </div> | |
| <div class="column" style="margin-left: 50px;"> | |
| <img src="images/pm3.jpg" alt="soto" /> | |
| <h3>Sayur Sop</h3> | |
| </div> | |
| <div class="column" style="margin-left: 50px;"> | |
| <img src="images/pm4.jpg" alt="soto" /> | |
| <h3>Sayur Bayam</h3> | |
| </div> | |
| </div> | |
| <a href="#" class="next round">›</a> | |
| <a href="#" class="previous round">‹</a> | |
| </section> | |
| <section class="catering" > | |
| <h2><b>Catering</b></h2> | |
| <div class="row"> | |
| <video width="400" height="240" controls loop style="float: right;"> | |
| <source src="vid/food1.mp4" type="video/mp4"> | |
| </video> | |
| <hgroup style="padding-top: 2rem;"> | |
| <h2 style="text-align: left;">Catering Menu</h2> | |
| <h3 style="color: white;"><br>We serve the best catering in town!</h3> | |
| </hgroup> | |
| <a class="button stroke smoothscroll" href="#" title="" >See Catering</a> | |
| </div> | |
| </section> | |
| <section class="popular"> | |
| <h2 style="text-align: center;"><b>Our Menu</b></h2> | |
| <a href="#" class="next round">›</a> | |
| <a href="#" class="previous round">‹</a> | |
| <div class="row" style="margin-top: 4rem; padding-right: 6rem;"> | |
| <figure> | |
| <img src="images/sotoo.jpg" alt="soto" /> | |
| </figure> | |
| <hgroup> | |
| <h2 style="text-align: left; padding-top: 2rem;"><b>Soto Ayam</b></h2> | |
| <h3 >Makanan Berkuah</h3> | |
| </hgroup> | |
| <p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p> | |
| </div> | |
| <div class="row" style="margin-top: 4rem; padding-right: 6rem;"> | |
| <figure> | |
| <img src="images/nasgor.jpg" alt="soto" /> | |
| </figure> | |
| <hgroup> | |
| <h2 style="text-align: left; padding-top: 2rem;"><b>Nasi Goreng Ayam</b></h2> | |
| <h3>Nasi Goreng</h3> | |
| </hgroup> | |
| <p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p> | |
| </div> | |
| </section> | |
| <section class="contact"> | |
| <h2><b>Contact</b></h2> | |
| <div class="row"> | |
| <div class="col"> | |
| <p><br>Warung Tegal Surabaya 1 <br> Alamat : Jl. Melati No.1<br /> | |
| No. Telp : 031-225780 | |
| </div> | |
| <div class="col"> | |
| <p><br>Warung Tegal Surabaya 2 <br> Alamat : Jl. Mawar No.4<br /> | |
| No. Telp : 031-225780 | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <b>© 2021 Warung Tegal</b> | |
| </footer> | |
| </body> | |
| </html> |
2. main.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| section, footer, aside, nav, article, figure, figcaption { | |
| display: block;} | |
| body { | |
| color: #666666; | |
| background-color: #ffffff; | |
| background-position: center; | |
| font-family: 'Raleway', sans-serif; | |
| line-height: 1.4em; | |
| margin: 0px;} | |
| nav { | |
| padding-top: 5px; | |
| padding-bottom:25px; | |
| clear: both; | |
| color: #ffffff; | |
| height: 30px;} | |
| nav ul { | |
| padding-right: 40px; | |
| align-items: right; | |
| text-align: right; | |
| } | |
| nav li { | |
| display: inline; | |
| margin-right: 40px; | |
| } | |
| nav li a { | |
| color: #666666;} | |
| nav li a:hover, nav li a.current { | |
| color: #000000;} | |
| .intro{ | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| background-size: cover; | |
| background-attachment: fixed; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 720px; | |
| display: table; | |
| position: relative; | |
| text-align: left; | |
| } | |
| .intro h1{ | |
| color: #856e53; | |
| font-family: 'Raleway', sans-serif; | |
| font-size: 6rem; | |
| padding-top: 8rem; | |
| padding-bottom: auto; | |
| line-height: 1.071; | |
| max-width: 900px; | |
| margin-top: 4px; | |
| margin-bottom: auto; | |
| margin-left: 200px; | |
| margin-right: 20px; | |
| text-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | |
| } | |
| .button { | |
| background-color: clear; | |
| color: black; | |
| border: 3px solid #856e53; | |
| transition-duration: 0.4s; | |
| margin-top: 4rem; | |
| margin-bottom: auto; | |
| margin-left: 220px; | |
| padding: 14px 40px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 20px; | |
| box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); | |
| } | |
| .button:hover { | |
| background-color: #856e53; /* Green */ | |
| color: white; | |
| } | |
| .catering .button { | |
| background-color: white; | |
| color: #856e53; | |
| transition-duration: 0.4s; | |
| margin-top: 2rem; | |
| margin-bottom: auto; | |
| margin-left: 8px; | |
| padding: 14px 40px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 20px; | |
| box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); | |
| } | |
| .catering .button:hover { | |
| background-color: #856e53; /* Green */ | |
| color: white; | |
| border: 3px solid #856e53; | |
| } | |
| .courses { | |
| padding-top: 6rem; | |
| padding-bottom:6rem; | |
| padding-left: 10rem; | |
| padding-right: 10rem; | |
| } | |
| h2{ | |
| font-size: 2rem; | |
| text-align: center; | |
| padding-bottom: 4rem; | |
| } | |
| .courses h3{ | |
| color: black; | |
| text-align: center; | |
| } | |
| .popular{ | |
| background-color: #ffffff; | |
| padding-top: 6rem; | |
| padding-bottom:10rem; | |
| padding-left: 10rem; | |
| padding-right: 10rem; | |
| } | |
| .popular h2{ | |
| color: #856e53; | |
| text-align: center; | |
| padding-bottom:4rem; | |
| } | |
| .popular p{ | |
| color: black; | |
| text-align: justify; | |
| } | |
| .popular img{ | |
| width: 400px; | |
| height: auto; | |
| padding-top: 5px; | |
| margin-left: 10px; | |
| } | |
| .column { | |
| float: left; | |
| width: 56,5%; | |
| } | |
| /* Clear floats after the columns */ | |
| .row:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .catering{ | |
| color: white; | |
| padding-top: 6rem; | |
| background-color: #856e53; | |
| padding-bottom: 10rem; | |
| padding-left: 12rem; | |
| padding-right: 12rem; | |
| } | |
| video{ | |
| padding-top: 2rem; | |
| } | |
| article { | |
| margin-top: 2rem; | |
| clear: both; | |
| overflow: auto; | |
| width: 100%;} | |
| hgroup { | |
| margin-top: 40px;} | |
| figure { | |
| float: right; | |
| width: 290px; | |
| height: 220px; | |
| padding: 5px; | |
| margin: 20px; | |
| border: 1px solid #eeeeee;} | |
| figcaption { | |
| font-size: 100%; | |
| text-align: center;} | |
| aside { | |
| padding-top: 4rem; | |
| width: 230px; | |
| float: left; | |
| padding: 4rem 4px 0px 20px;} | |
| aside section a { | |
| display: block; | |
| padding: 10px; | |
| border-bottom: 2px 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 px 0px 0px; | |
| color: #de6581;} | |
| aside h2 { | |
| padding: 30px 0px 10px 0px; | |
| color: #de6581;} | |
| .contact{ | |
| height: fit-content; | |
| padding-top: 4rem; | |
| color: #FFFFFF; | |
| background-color: #856e53; | |
| text-align: center; | |
| } | |
| .contact h2{ | |
| text-align: center; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| footer { | |
| font-size: 100%; | |
| color: #FFFFFF; | |
| background-color: #856e53; | |
| padding-bottom: 18px; | |
| padding-top: 10px; | |
| text-align: center; | |
| } | |
| .popular a { | |
| text-decoration: none; | |
| display: inline-block; | |
| padding: 8px 16px; | |
| float: right; | |
| margin-left: 10px; | |
| } | |
| .popular a:hover { | |
| background-color: #ddd; | |
| color: black; | |
| } | |
| .courses a { | |
| text-decoration: none; | |
| display: inline-block; | |
| padding: 8px 16px; | |
| float: right; | |
| margin-left: 10px; | |
| } | |
| .courses a:hover { | |
| background-color: #ddd; | |
| color: black; | |
| } | |
| .previous { | |
| background-color: #856e53; | |
| color: white; | |
| } | |
| .next { | |
| background-color: #856e53; | |
| color: white; | |
| } | |
| .round { | |
| border-radius: 50%; | |
| } |
Comments
Post a Comment