Kopi Santai

by oktaviardi pratama

HTML

<header>
        <h1>Kopi Santai</h1>
        <nav>
            <a href="#hero">Home</a>
            <a href="#video">Video</a>
            <a href="#lokasi">Lokasi</a>
            <a href="#kontak">Kontak</a>
        </nav>
    </header>

    <section id="hero">
        <h2>Selamat Datang di Kopi Santai</h2>
        <img src="https://i.pinimg.com/1200x/c3/f4/50/c3f450e188bdce71e7bc013ccbcb656e.jpg" alt="Gambar Kopi">
    </section>

    <section id="video">
        <h2>Cara Membuat Kopi Nikmat</h2>
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video"></iframe>
    </section>

    <section id="lokasi">
        <h2>Lokasi Toko Kami</h2>
        <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.123456!2d106.821!3d-6.175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2z2JjZgCDYtNin2YTYr9io2KfYqNin2YQg2KfZhNmF2KfZhQ!5e0!3m2!1sid!2sid!4v1611234567890!5m2!1sid!2sid"
            allowfullscreen
            loading="lazy">
        </iframe>
    </section>

    <footer id="kontak">
        <p>Alamat: Jl. Kopi No. 10, Jakarta</p>
        <p>Telepon: 0812-3456-7890 | Email: [email protected]</p>
    </footer>

CSS

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #6B4F4F;
            color: white;
            padding: 20px;
            text-align: center;
        }
        nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
        }
        section {
            padding: 50px;
            text-align: center;
        }
        img {
            max-width: 80%;
            height: auto;
        }
        footer {
            background-color: #333;
            color: white;
            padding: 20px;
        }
        iframe {
            width: 80%;
            height: 400px;
            border: none;
        }

        #hero{
          background-color: black;
        }
        #hero h2 {
          color:#fff;
          text-transform: capitalize;
        }
        #hero img {
          border-radius: 400px;
          object-fit: cover;
          height: 400px;
          width: 400px;
        }