HTML

<!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">
    <link rel="stylesheet" href="CSS/style.css">
    <title>Sumber Berkah</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="IMG/kucing.gif" alt="">
            <h1>Toko Sumber Berkah</h1>
            <p>JL. Ahmad Yani No.45</p>
        </div>
        <div class="topnav">
            <a href="#">Home</a>
            <a href="#nav-product">Produk</a>
            <a href="#nav-kontak">Kontak</a>
            <a href="#">Login</a>
            <form class="search-form">
                <input type="text" placeholder="Search" class="search">
                <button>Search</button>
            </form>
        </div>
        <div class="tagline">
            <h1 class="tag">"Menjadi Yang Terbaik <br>Adalah Yang Terbaik"</h1>
        </div>
        <div id="nav-product">
            <div class="product">
                <h1>Produk</h1>
                <div class="product-list">
                    <div class="col-product">
                        <img src="IMG/minyak.jpg" alt="">
                        <p>Minyak</p>
                    </div>
                    <div class="col-product">
                        <img src="IMG/telur.jpg" alt="">
                        <p>Telur</p>
                    </div>
                    <div class="col-product">
                        <img src="IMG/garam.jpg" alt="">
                        <p>Garam</p>
                    </div>
                    <div class="col-product">
                        <img src="IMG/terigu.jpg" alt="">
                        <p>Terigu</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-visi">
            <div class="col-visi">
                <h1>Visi</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, quas error. Aspernatur consequatur
                    repudiandae voluptatibus provident maxime aut repellendus? Fuga.</p>
            </div>
            <div class="col-misi">
                <h1>Misi</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, quas error. Aspernatur consequatur
                    repudiandae voluptatibus provident maxime aut repellendus? Fuga.</p>
            </div>
            <div class="col-tujuan">
                <h1>Tujuan</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, quas error. Aspernatur consequatur
                    repudiandae voluptatibus provident maxime aut repellendus? Fuga.</p>
            </div>
        </div>
        <div id="nav-kontak">
            <div class="kontak">
                <h1>Pesan Sekarang</h1>
            </div>
            <div class="row-form">
                <div class="col-form">
                    <h3>Nama Barang</h3>
                    <input type="text" name="NamBa" class="form-kontak">
                    <h3>Jenis Barang</h3>
                    <input type="text" name="JenBa" class="form-kontak">
                    <h3>Jumlah Barang</h3>
                    <input type="text" name="JumBa" class="form-kontak">
                    <button class="btn-kirim">Kirim</button>
                </div>
            </div>
        </div>
        <footer class="row-footer">
            <div class="col-footer">
                <h1>Sumber Berkah</h1>
                <p>©Copyright 2022 by Ferdiansyah. All right reserved.</p>
            </div>
            <div class="col-footer">
                <h2>Menu</h2>
                <ul>
                    <li>Home</li>
                    <li>Produk</li>
                    <li>Kontak</li>
                    <li>Login</li>
                </ul>
            </div>
        </footer>
    </div>
</body>

</html>