index.html

p2
avatar
unknown
html
2 years ago
4.9 kB
26
Indexable
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Budi & Sinta Wedding</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <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=Sacramento&family=Work+Sans:wght@100;400;600;700&display=swap" rel="stylesheet">
    <!-- simplyCountdown -->
    <link rel="stylesheet" href="countdown/simplyCountdown.theme.default.css"/>
    <script src="countdown/simplyCountdown.min.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section id="hero" class="hero w-100 h-100 p-3 mx-auto text-center d-flex justify-content-center align-items-center text-white">
      <main> 
        <h4>Kepada Bapak/Ibu/Saudara/i, </h4>
        <h1>Budi & Sinta</h1>
        <p>Akan melangsungkan resepsi pernikahan dalam:</p>
        <div class="simply-countdown"></div>
        <a href = "#undangan" class="btn btn-lg mt-4">Lihat Undangan</a>
      </main>
    </section>
    <nav class="navbar navbar-expand-md bg-transparent sticky-top mynavbar">
  <div class="container">
    <a class="navbar-brand" href="#">Wedding</a>
    <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Wedding</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div class="navbar-nav ms-auto">
        <a class="nav-link" href="#home">Home</a>
        <a class="nav-link" href="#info">Info</a>
        <a class="nav-link" href="#story">Story</a>
        <a class="nav-link" href="#gallery">Gallery</a>
        <a class="nav-link" href="#rsvp">RSVP</a>
        <a class="nav-link" href="#gifts">Gifts</a>
      </div>
      </div>
    </div>
  </div>
</nav>

<section id="home" class="home">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 text-center">
        <h2>Acara Pernikahan</h2>
        <h3>Diselenggarakan pada 10 Januari 2024 di Pangkalpinang.</h3>
        <p>Oleh karena itu, dengan segala hormat, kami bermaksud untuk mengundang Bapak/Ibu, Saudara/i, untuk hadir pada acara pernikahan kami.
        </p>
      </div>
    </div>

    <div class="row couple">
      <div class="col-lg-6">
        <div class="row">
          <div class="col-8 text-end">
            <h3>Budi Santoso</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Putra dari Bpk. Lorem <br> dan <br> Ibu Ipsum</p>
          </div>
          <div class="col-4">
            <img src="img/budi1.jpeg" alt="Budi Santoso" class="img-responsive rounded-circle">
          </div>
        </div>  
      </div>  
      <div class="col-lg-6">
        <div class="row">
          <div class="col-4">
            <img src="img/siska1.jpeg" alt="Siska Amelia" class="img-responsive rounded-circle">
          </div>
          <div class="col-8">
            <h3>Siska Amelia</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Putra dari Bpk. Ipsum <br> dan <br> Ibu Lorem</p>
          </div>
        </div>  
      </div> 
    </div>
  </div>
</section>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    <script>
      simplyCountdown('.simply-countdown', {
        year: 2024, // required
        month: 1, // required
        day: 10, // required
        hours: 17, // Default is 0 [0-23] integer
        minutes: 0, // Default is 0 [0-59] integer
        seconds: 0, // Default is 0 [0-59] integer
        words: { //words displayed into the countdown
            days: { singular: 'hari', plural: 'hari' },
            hours: { singular: 'jam', plural: 'jam' },
            minutes: { singular: 'menit', plural: 'menit' },
            seconds: { singular: 'detik', plural: 'detik' }
        },
      });
    </script>
  </body>
</html>
Editor is loading...
Leave a Comment