code

 <!doctype html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>RinnShoes</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">

    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap" rel="stylesheet">

    <style>

        body {

            font-family: 'Raleway', sans-serif;

        }


        /* Animasi */

        .fadeIn {

            animation: fadeIn 1s ease forwards;

        }


        @keyframes fadeIn {

            from {

                opacity: 0;

            }

            to {

                opacity: 1;

            }

        }


        .bounce {

            animation: bounce 2s infinite;

        }


        @keyframes bounce {

            0%, 20%, 50%, 80%, 100% {

                transform: translateY(0);

            }

            40% {

                transform: translateY(-30px);

            }

            60% {

                transform: translateY(-15px);

            }

        }


        /* Header & Navbar */

        .navbar-brand img {

            width: 120px;

        }

        

        .navbar-brand h1 {

            display: inline-block;

            margin: 0;

            font-size: 1.5rem;

            font-weight: 600;

            padding-left: 10px;

            color: #333;

        }


        .carousel-item img {

            width: 100%;

            height: auto;

        }


        .carousel-caption {

            background: rgba(0, 0, 0, 0.5);

            padding: 10px;

            border-radius: 5px;

            animation: slideInUp 0.5s ease forwards;

        }


        @keyframes slideInUp {

            from {

                transform: translateY(20px);

                opacity: 0;

            }

            to {

                transform: translateY(0);

                opacity: 1;

            }

        }


        .kategori-produk img {

            width: 100px;

            margin-bottom: 10px;

        }


        .produk-terbaru .card {

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

            animation: swing 3s infinite;

        }


        @keyframes swing {

            0%, 100% {

                transform: rotate(0deg);

            }

            50% {

                transform: rotate(10deg);

            }

        }


        .banner img {

            width: 100%;

            height: auto;

            animation: zoomIn 1s forwards;

        }


        @keyframes zoomIn {

            from {

                transform: scale(0.5);

                opacity: 0;

            }

            to {

                transform: scale(1);

                opacity: 1;

            }

        }


        footer {

            background-color: #333;

            color: white;

        }


        footer a {

            color: white;

            text-decoration: none;

        }

    </style>

</head>

<body>

<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">

    <div class="container">

        <a class="navbar-brand" href="#">

            <img style="height:7vh;width:7vh" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihCRWi_tnjWdNd3N-5LahkErlK10f1O7LsqtOVGqkaMkN6tr9gmwrBGrFUD-u88g787PD3c6hyphenhyphenWVU8Z8RylVwl5bSzzRLX-AmGx4r2zv6r8d5hfneaSMkh6F3Zk8_A3g3bZv0zdDx5g_lq0U34XuQvnYVwDvG1Btc0cYsF2EgVhSHj87A/s220/WhatsApp%20Image%202024-10-08%20at%2023.11.36.jpeg" alt="RinnShoes Logo">

            <h1>RinnShoes</h1>

        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarNav">

            <ul class="navbar-nav ms-auto">

                <li class="nav-item"><a class="nav-link" href="#">All Products</a></li>

                <li class="nav-item"><a class="nav-link" href="#">How to Order</a></li>

                <li class="nav-item"><a class="nav-link" href="#">Lookbook</a></li>

                <li class="nav-item"><a class="nav-link" href="#">Games</a></li>

                <li class="nav-item"><a class="nav-link" href="#">RinnShoes News</a></li>

            </ul>

        </div>

    </div>

</nav>


<!-- Slider -->

<div id="carouselExampleIndicators" class="carousel slide mt-5" data-bs-ride="carousel">

    <div class="carousel-indicators">

        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>

        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>

        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>

        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>

    </div>

    <div class="carousel-inner">

        <div class="carousel-item active fadeIn">

            <img src="https://sportaways.com/media/catalog/product/cache/cd7c6c71a47e90564e17811b95cac4e3/f/i/fixch_frogstomp_-_malibu_bluewhitepowder_blue_1.jpg" alt="Plasma Blue">

            <div class="carousel-caption d-none d-md-block">

                <h5>New Color: Plasma Blue</h5>

                <a href="#" class="btn btn-primary">Shop Now</a>

            </div>

        </div>

        <div class="carousel-item fadeIn">

            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT07eK6BosFL7GSehcAJ12VfS2bc48JmXcYKzcPZx3P3_cTPHFi7ahSGVQ&s=10" alt="Banner 2">

            <div class="carousel-caption d-none d-md-block">

                <h5>Special Edition</h5>

            </div>

        </div>

        <div class="carousel-item fadeIn">

            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3BDHJq51LOcEtO6rM_whO0nKbRy3OWElV2V17ApL3WgAmUwYsGz54SIcV&s=10" alt="Banner 3">

            <div class="carousel-caption d-none d-md-block">

                <h5>Limited Release</h5>

            </div>

        </div>

        <div class="carousel-item fadeIn">

            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS1itHXjN0YYYZmju9FpLLRngwZHGK7-qLVg&usqp=CAU" alt="Banner 4">

            <div class="carousel-caption d-none d-md-block">

                <h5>Exclusive Offer</h5>

            </div>

        </div>

        <div class="carousel-item fadeIn">

            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8I-Ky0v9SDA5ayh75zfULoKmiFTcbdhaA3w&usqp=CAU" alt="Banner 5">

            <div class="carousel-caption d-none d-md-block">

                <h5>Autumn Collection</h5>

            </div>

        </div>

    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">

        <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    </button>

    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">

        <span class="carousel-control-next-icon" aria-hidden="true"></span>

    </button>

</div>


<!-- Kategori Produk -->

<section class="kategori-produk py-5">

    <div class="container">

        <h2 class="text-center mb-4">KATEGORI PRODUK</h2>

        <div class="row text-center">

            <div class="col-6 col-md-2 bounce">

                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoAZS9DvesRlTjbFrh_3z9iBDOupZGWcSYUg&usqp=CAU" alt="Slip-On" class="img-fluid">

                <p>Slip-On</p>

            </div>

            <div class="col-6 col-md-2 bounce">

                <img src="https://johnson.id/wp-content/uploads/2021/12/WhatsApp-Image-2021-11-22-at-19.51.23-2.jpeg" alt="Highcut" class="img-fluid">

                <p>Highcut</p>

            </div>

            <div class="col-6 col-md-2 bounce">

                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgif0SNhnHPig-E5uqTUNSFumhaRVTXMSmfKJ8m8RKHA&s" alt="Lowcut" class="img-fluid">

                <p>Lowcut</p>

            </div>

            <div class="col-6 col-md-2 bounce">

                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJzRhkyxPBFUC86Nn28hu0MUuj_bryfF9w77xWZX5VvkWmQgHPG0a5S_mi&s=10" alt="Sandal" class="img-fluid">

                <p>Sandal</p>

            </div>

            <div class="col-6 col-md-2 bounce">

                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2_TGY3nbrrRHOeu9XApvaaPxxLGdIbl2dB-g1-lck3g&s" alt="Boots" class="img-fluid">

                <p>Boots</p>

            </div>

            <div class="col-6 col-md-2 bounce">

                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlTRELhCXIKg9k2Gce2wyfnLtdWc2pfjmDB3g9crWnDyZxyC1r4WiIfhbk&s=10" alt="Sneakers" class="img-fluid">

                <p>Sneakers</p>

            </div>

        </div>

    </div>

</section>


<!-- Produk Terbaru -->

<section class="produk-terbaru py-5">

    <div class="container">

        <h2 class="text-center mb-4">PRODUK TERBARU</h2>

        <div class="row">

            <div class="col-md-3">

                <div class="card">

                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSw8nvNxFM6bzcklCrM1ZFyCiA1ZM_tJ60tA&usqp=CAU" class="card-img-top" alt="Lowcut Woosh">

                    <div class="card-body text-center">

                        <p class="card-text">Lowcut Woosh Black - Rp 159.000</p>

                    </div>

                </div>

            </div>

            <div class="col-md-3">

                <div class="card">

                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5rEm_Frzt6yGKYDVM5TEzH8jXnnxU5RBqgwF6SBVOwQ&s" class="card-img-top" alt="Slip-On Gaya">

                    <div class="card-body text-center">

                        <p class="card-text">Slip-On Gaya - Rp 99.000</p>

                    </div>

                </div>

            </div>

            <div class="col-md-3">

                <div class="card">

                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0MFPUSUlieJhXfba_UQoJv18Nz-rD4fCbhUL1N72Yno2QufJaHBzpN5g&s=10" class="card-img-top" alt="Boots Coulite">

                    <div class="card-body text-center">

                        <p class="card-text">Boots - Coulite - Rp 1.250.000</p>

                    </div>

                </div>

            </div>

            <div class="col-md-3">

                <div class="card">

                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLIPC1lXd-3x--VhcAB_jmftHZlgWR1iniZQ&usqp=CAU" class="card-img-top" alt="Sendal Vintage">

                    <div class="card-body text-center">

                        <p class="card-text">Sendal Vintage - Rp 199.000</p>

                    </div>

                </div>

            </div>

        </div>

        <div class="text-center my-4">

            <a href="#" class="btn btn-primary">Lihat Produk Lainnya</a>

        </div>

    </div>

</section>


<!-- Iklan Banner -->

<section class="banner">

    <img src="https://pbs.twimg.com/profile_banners/1317326782824017920/1721447840/1080x360" alt="Banner Iklan">

<img src="https://pbs.twimg.com/media/GVqSUPya4AAEuly?format=jpg&name=large" alt="Banner Iklan">

<img src="https://pbs.twimg.com/media/GTKHcQCbkAA-Yme?format=jpg&name=900x900" alt="Banner Iklan">


</section>


<!-- Section Berita -->

<section class="berita py-5">

    <div class="container">

        <h2 class="text-center mb-4">New's</h2>

        <div class="row">

            <div class="col-md-3 mb-4">

                <div class="card">

                    <img src="https://pbs.twimg.com/media/GWiIxtlawAAmf5b?format=jpg&name=900x900" class="card-img-top" alt="Berita 1">

                    <div class="card-body">

                        <h5 class="card-title">Inovasi Terbaru Sepatu Lari</h5>

                        <p class="card-text">Kami memperkenalkan teknologi baru untuk meningkatkan performa saat berlari. Sepatu terbaru ini dirancang untuk kenyamanan dan daya tahan maksimal.</p>

                    </div>

                </div>

            </div>

            <div class="col-md-3 mb-4">

                <div class="card">

                    <img src="https://pbs.twimg.com/media/FR_EDjDaIAAkwKW?format=jpg&name=small" class="card-img-top" alt="Berita 2">

                    <div class="card-body">

                        <h5 class="card-title">Peluncuran Koleksi Musim Dingin</h5>

                        <p class="card-text">Koleksi sepatu musim dingin kami telah tiba! Nikmati desain yang hangat dan trendy untuk melengkapi gaya Anda di musim dingin.</p>

                    </div>

                </div>

            </div>

            <div class="col-md-3 mb-4">

                <div class="card">

                    <img src="https://pbs.twimg.com/media/FSOh08aaIAEtBBA?format=jpg&name=360x360" class="card-img-top" alt="Berita 3">

                    <div class="card-body">

                        <h5 class="card-title">Tips Merawat Sepatu Kulit</h5>

                        <p class="card-text">Ikuti tips merawat sepatu kulit Anda agar tetap awet dan tampil menawan. Pelajari cara membersihkan dan menyimpannya dengan benar.</p>

                    </div>

                </div>

            </div>

            <div class="col-md-3 mb-4">

                <div class="card">

                    <img src="https://pbs.twimg.com/media/FRgHb4vacAArnwC?format=jpg&name=small" class="card-img-top" alt="Berita 4">

                    <div class="card-body">

                        <h5 class="card-title">Sepatu Terlaris Tahun Ini</h5>

                        <p class="card-text">Dapatkan informasi tentang sepatu terlaris kami tahun ini. Temukan model yang menjadi favorit banyak orang!</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>


<!-- Footer -->

<footer class="bg-dark text-white text-center py-4">

    <div class="container">

        <div class="row">

            <div class="col-md-4">

                <h5>Products</h5>

                <ul class="list-unstyled">

                    <li><a href="#" class="text-white">Slip-On</a></li>

                    <li><a href="#" class="text-white">Highcut</a></li>

                    <li><a href="#" class="text-white">Boots</a></li>

                    <li><a href="#" class="text-white">Sneakers</a></li>

                </ul>

            </div>

            <div class="col-md-4">

                <h5>Information</h5>

                <ul class="list-unstyled">

                    <li><a href="#" class="text-white">How to Order</a></li>

                    <li><a href="#" class="text-white">Shipping Information</a></li>

                    <li><a href="#" class="text-white">Privacy Policy</a></li>

                </ul>

            </div>

            <div class="col-md-4">

                <h5>Contact Us</h5>

                <p>Email: support@rinnshoes.com</p>

                <p>Phone: +62 123 4567</p>

            </div>

        </div>

        <div class="mt-4">

            <p>&copy; 2024 RinnShoes. All rights reserved.</p>

        </div>

    </div>

</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

BASIS DATA

 CREATE TABLE Employees (     EmpID INT PRIMARY KEY,     LastName VARCHAR(50),     FirstName VARCHAR(50),     Title VARCHAR(50),     Address VARCHAR(100),     City VARCHAR(50),     Country VARCHAR(50),     HomePhone VARCHAR(20) ); INSERT INTO Employees (EmpID, LastName, FirstName, Title, Address, City, Country, HomePhone) VALUES (1, 'Davolio', 'Nancy', 'Sales Rep.', '507 - 20th Ave. E. Apt. 2A', 'Seattle', 'USA', '(206) 555-9857'), (2, 'Fuller', 'Andrew', 'Vice President', '908 W. Capital Way', 'Tacoma', 'USA', '(206) 555-9482'), (3, 'Leverling', 'Janet', 'Sales Rep.', '722 Moss Bay Blvd.', 'Kirkland', 'USA', '(206) 555-3412'), (4, 'Peacock', 'Margaret', 'Sales Rep.', '4110 Old Redmond Rd.', 'Redmond', 'USA', '(206) 555-8122'), (5, 'Buchanan', 'Steven...
Baca selengkapnya