Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Bootstrap demo</title>
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
- <style>
- html {
- scroll-behavior: smooth;
- scroll-padding: 50px;
- }
- </style>
- </head>
- <body>
- <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
- <div class="container">
- <a class="navbar-brand" href="#">Navbar</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
- <li class="nav-item">
- <a class="nav-link active" aria-current="page" href="#">SMX</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#dua">Projects</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#tiga">Program</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#empat">Event</a>
- </li>
- </ul>
- <form class="d-flex" role="search">
- <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
- </form>
- </div>
- </div>
- </nav>
- <div class="container-fluid mb-3"
- style="background-image: url('https://picsum.photos/1200/600');
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- height: 100vh;">
- <div class="container">
- <div class="row vh-100">
- <div class="col-12 col-md-5 my-auto">
- <!-- <div class="position-absolute top-50 start-0 translate-middle-y"> -->
- <h1 class="display-4">Selamat Datang</h1>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus laborum, repellat?</p>
- <!-- </div> -->
- <!-- <button class="btn btn-primary">Tombol 1</button> -->
- <!-- <button class="btn btn-secondary">Tombol 2</button> -->
- </div>
- </div>
- </div>
- </div>
- <div class="container" id="dua">
- <div class="row h-100">
- <h1 class="display-1 mb-3 text-center">Projects</h1>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="text-center">
- <a class="btn btn-secondary" href="">Lihat semua project</a>
- </div>
- </div>
- <hr>
- </div>
- <div class="container" id="tiga">
- <div class="row h-100">
- <h1 class="display-1 mb-3 text-center">Program</h1>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-md-6 col-lg-4 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="text-center">
- <a class="btn btn-secondary" href="">Lihat semua program</a>
- </div>
- </div>
- <hr>
- </div>
- <div class="container" id="empat">
- <div class="row h-100">
- <h1 class="display-1 mb-3 text-center">Events</h1>
- <div class="col-12 col-md-6 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem veritatis reiciendis incidunt fuga laborum asperiores ex amet, cupiditate accusamus illo velit perferendis aperiam deserunt similique rerum! Quis fugiat ad quibusdam ipsa vitae illo! Fugiat, tenetur. Eligendi ad ipsa reprehenderit nam animi totam, asperiores possimus tempora quam beatae iste magnam cumque esse incidunt dolores minima eaque eius! Quasi ad eos voluptate blanditiis iusto officia, assumenda, vitae perferendis nobis facilis, doloribus officiis aperiam veniam atque ut laborum sequi quis quo sit asperiores sunt. Nobis delectus nulla iure omnis laboriosam id soluta molestiae mollitia, sequi hic magnam vitae ducimus maiores est, eius eos?</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-md-6">
- <div class="row">
- <div class="col-12 col-lg-6 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-lg-6 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-lg-6 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-12 col-lg-6 mb-3">
- <div class="card">
- <div class="card-body">
- <!-- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top"> -->
- <div class="position-relative mb-3">
- <img src="https://picsum.photos/1200/600" alt="" class="card-img-top">
- <div class="position-absolute bottom-0 end-0">
- <button class="btn btn-primary m-2">Detail</button>
- </div>
- </div>
- <div></div>
- <div class="card-title mb-3">Judul</div>
- <div class="card-text">
- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste.</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="text-center mb-3">
- <a class="btn btn-secondary" href="">Lihat semua program</a>
- </div>
- <hr>
- </div>
- </div>
- <div class="container-fluid bg-primary">
- <footer class="container">
- <h1 class="display-1">footer</h1>
- </footer>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment