Untitled

<!-- beranda -->
<!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">
    <style>
        img {
            cursor: url("https://static.cargo.site/images/up.png"), auto !important;
        }

        header,
        section,
        footer,
        aside,
        nav,
        article,
        figure,
        figcaption {
            display: block;
        }

        body {
            color: #666666;
            background-color: #f9f8f;
            background-image: url(https://img.freepik.com/free-photo/wooden-background_24972-623.jpg?size=626&ext=jpg);
            background-position: center;
            font-family: georgia, times, serif;
            line-height: 1.4em;
            margin: 0px;
        }

        .wrapper {
            width: 940px;
            margin: 20px auto 20px auto;
            border: 2px solid #000000;
            background-color: #fff;
        }

        header {
            height: 160px;
            background-image: url(http://www.nyekrip.com/wp-content/uploads/2015/custom/images/header.png);
        }

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

        na li a:hover,
        nav li a.current {
            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: 220px;
            padding: 5px;
            margin: 20px;
            border: 1px solid #eeeeee;
        }

        figcaption {
            font-size: 90%;
            text-align: left;
        }

        aside {
            width: 20px;
            float: left;
            padding: 0px 0px 0px 20px;
        }

        aside section a {
            display: block;
            padding: 10px;
            border-bottom: 1px solid #eeeeee;
        }

        aside sexrion a:hover {
            background-color: #efefef;
        }

        a {
            color: #de6581;
            text-decoration: none;
        }

        h1,
        h2,
        h3 {
            font-weight: normal;
        }

        h2 {
            margin: 10px 0pc 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;
        }

        .row {
            display: flex;
        }

        .column {
            flex: 50%;
        }

        .container {
            width: 100%;
            height: auto;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
    <title>Web Warung Tegal</title>
</head>

<body>
    <!-- wrapper -->
    <div class="wrapper">
        <header>
            <h1>Warrung Tegal</h1>
            <nav>
                <ul>
                    <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-1.html" class="current">Beranda</a></li>
                    <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-2.html">Daftar Makanan</a></li>
                    <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-3.html">Review</a></li>
                    <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-4.html">Tentang</a></li>
                    <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-5.html">Kontak</a></li>
                </ul>
            </nav>
        </header>
        <section class="courses">
            <article>
                <figure>
                    <img src="https://asset.kompas.com/crops/hgYCTwrFpAN5wQ35-Z2STU9C0vQ=/3x0:700x465/750x500/data/photo/2020/11/08/5fa7d069849e2.jpg" alt="" height="200px" width="200px">
                    <figcaption>Soto Indonesia</figcaption>
                </figure>
                <hgroup>
                    <h2>Soto Ayam</h2>
                    <h3>Makanan Berkuah</h3>
                </hgroup>
                <p>Soto ayam adalah makanan khas indonesia yang berguna sejenis sup ayam dengan kuah yang bewarna kekuningan</p>
            </article>
            <article>
                <figure>
                    <img src="https://asset.kompas.com/crops/etxkCgz_0N5ZbdP6YGJScpobPVk=/60x23:959x622/750x500/data/photo/2020/11/05/5fa3f16d9c1cf.jpg" alt="" height="200px" width="200px">
                    <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 utamnya yang dicampur dengan aneka jenis sayuran</p>
            </article>
            <div class="container" align="center">
                <div class="row" style="margin-top: 50px;margin-bottom: 10px;">
                    <div class="column">
                        <h2>Sejarah Warung Tegal</h2>
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/XWKlWLCd5M8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </section>
        <aside>
            <section class="popular-recipes">
                <h2>Masakan popular</h2>
                <a href="">Sayur Sop</a>
                <a href="">Sayur Asem</a>
                <a href="">Sayur Lodeh</a>
                <a href="">Sayur Bayam</a>
            </section>
            <section class="contact-details">
                <h2>Kontak</h2>
                <p>Warung Tegal</br>
                    di seluruh indonesia
            </section>
            <section class="contact-details">
                <h2>Rating Warung</h2>
                <img src="https://e7.pngegg.com/pngimages/658/490/png-clipart-longitude-131xb0-car-5-star-pics-of-a-star-angle-text.png" alt="" width="100">
            </section>
        </aside>
        <footer>
            &copy 2021 Warung Tegal
        </footer>
    </div>
    <!-- end wrapper -->
</body>

</html>