[Tugas Pertemuan ke-5] Website Warung

Membuat Web Warung

Nama: Lucky Virgiawan Dwi Widodo
NRP: 5053231007
Kelas: Pemrograman Web (M)



Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Soto Ayam Rajawali</title>
    <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=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 100px;
            font-style: normal;
        }

        body {
            margin: 0;
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fc8406;
            padding: 10px 20px;
        }

        .title-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .title-container img {
            width: 50px; 
            height: 50px;
        }

        .title h1 {
            color: #ed3419;
            margin: 0;
            font-size: 32px;
            font-weight: bold;
            text-shadow: 
                -1px -1px 0 white,  
                 1px -1px 0 white,
                -1px  1px 0 white,
                 1px  1px 0 white;
        }

        .title p {
            color: rgb(0, 72, 255);
            font-size: 24px;
            font-weight: 750;
            margin: 0;
            text-shadow: 
                -1px -1px 0 white,  
                 1px -1px 0 white,
                -1px  1px 0 white,
                 1px  1px 0 white;
        }

        .navbar ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .navbar ul li {
            display: inline;
            margin-right: 21px;
        }

        .navbar ul li a {
            color: white;
            text-decoration: none;
            font-size: 21px;
            font-weight: 500;
        }

        .navbar ul li a:hover {
            text-decoration: underline;
        }

        .home {
            height: fit-content;
            text-align: center;
            position: relative;
        }

        .home video {
            width: 100%;
            z-index: 1;
        }

        

        .menu {
            background-color: #fff;
            padding: 40px 20px;
        }

        .menu h2 {
            text-align: center;
            font-size: 28px;
            margin-bottom: 40px;
        }

        .menu-item {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .menu-card {
            width: 300px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .menu-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .menu-card .content {
            padding: 20px;
        }

        .menu-card h3 {
            margin: 0 0 10px 0;
            font-size: 20px;
            color: #333;
        }

        .menu-card p {
            font-size: 14px;
            color: #666;
            margin: 0;
        }

        .additional {
            text-align: center;
            margin-top: 40px;
        }


        .contact {
            background-color: #f8f9fa;
            padding: 40px 20px;
            text-align: center;
        }

        .contact-info {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .contact-info a {
            text-decoration: none;
            font-weight: bold;
        }

        .contact-info a:hover {
            text-decoration: underline;
        }


    </style>
</head>
<body>

<div class="navbar">
    <div class="title-container">
        <img src="assets/img/rajawali.png" alt="Logo">
        <div class="title">
            <h1>Soto Ayam Rajawali Bu Mar</h1>
            <p>Khas Bojonegoro</p>
        </div>
    </div>
    <ul>
        <li><a href="#home">Beranda</a></li>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#contact">Kontak</a></li>
    </ul>
</div>

<section id="home" class="home section">
    <video muted autoplay loop src="assets/vid/soto-vid.mp4" title="Video"></video>
</section>

<section id="menu" class="menu section">
    <h2>Menu</h2>
    <div class="menu-item">
        <div class="menu-card">
            <img src="assets/img/soto-ayam.jpg" alt="Soto Ayam">
            <div class="content">
                <h3>Soto Ayam</h3>
                <p>Soto ayam dengan kuah santan yang nikmat dengan porsi hemat - normal - jumbo.</p>
            </div>
        </div>

        <div class="menu-card">
            <img src="assets/img/es-teh.webp" alt="Es Teh">
            <div class="content">
                <h3>Es Teh</h3>
                <p>Es teh manis yang dingin dan menyegarkan.</p>
            </div>
        </div>

        <div class="menu-card">
            <img src="assets/img/es-jeruk.webp" alt="Es Teh">
            <div class="content">
                <h3>Es Jeruk</h3>
                <p>Es jeruk dengan perasan jeruk asli.</p>
            </div>
        </div>
    </div>

    <div class="additional">
        <h3>Menu Tambahan</h3>
        <p>Kami juga menyediakan lauk tambahan seperti jeroan, kepala ayam, kulit ayam, potongan ayam, dan kerupuk.</p>
    </div>
</section>
<section id="contact" class="contact section">
    <h2>Kontak</h2>
    <div class="contact-info">
        <a href="https://wa.me/6282376900919" target="_blank" style="font-size: 20px; color: #25d366;">
            <i class="fab fa-whatsapp"></i> +62 823-7690-0919
        </a>
        <br><br>
        <a href="https://gofood.co.id/bojonegoro/restaurant/soto-ayam-rajawali-bu-mar-bojonegoro-kota-030c3db9-ba82-4f9c-b44d-ad8f98494476" target="_blank" style="font-size: 20px; color: #fc8406;">
            <i class="fas fa-utensils"></i> Soto Ayam Rajawali Bu Mar
        </a>
        <br><br>
        <p><i class="fas fa-map-marker-alt"></i> Jl. Rajawali No.120, Bojonegoro</p>
    </div>
    <div style="margin-top: 20px;">
        <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15835.231408595246!2d111.8858325!3d-7.1482038!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7782271a3dcbdf%3A0x4081984f11cb9f5f!2sSoto%20Ayam%20Bu%20Mar%20Rajawali!5e0!3m2!1sid!2sid!4v1727754994044!5m2!1sid!2sid"
        width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
        </iframe>
    </div>
        <p><i class="fas fa-map-marker-alt"></i> Jalan Mastrip No. 38, Bojonegoro</p>
    <div style="margin-top: 20px;"></div>
        <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3958.8074916762994!2d111.87353869678951!3d-7.1482453999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e77821e4ac0a3ed%3A0x928604f706e2032!2sSoto%20Ayam%20Rajawali%20Bu%20Mar!5e0!3m2!1sid!2sid!4v1727755250474!5m2!1sid!2sid" 
        width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
        </iframe>
    </div>
</section>
</body>
</html>

Komentar

Postingan populer dari blog ini

[Tugas Study Case] Simple Landing Page

[Tugas Pertemuan ke-1] Portofolio

[Tugas Pertemuan ke-3] Tabel