API tools faq
paste
Advertisement
redo21

template.html

redo21
Oct 3rd, 2021
70
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.27 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <!-- Required meta tags -->
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.     <!-- Bootstrap CSS -->
  10.     <!-- <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> -->
  11.     <!-- <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> -->
  12.     <title>Hello, world!</title>
  13. </head>
  14.  
  15. <body>
  16.     <div class="bodyContainer">
  17.          <!--navbar-->
  18.         <nav class="navbar navbar-expand-lg navbar-light myNav fw-bold fixed-top">
  19.             <div class="container-fluid d-flex">
  20.                 <a class="navbar-brand" href="#">Library</a>
  21.                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
  22.                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  23.                     <span class="navbar-toggler-icon"></span>
  24.                 </button>
  25.                 <div class="collapse navbar-collapse myNavChild" id="navbarNav">
  26.                     <ul class="navbar-nav">
  27.                         <li class="nav-item">
  28.                             <a class="nav-link active" aria-current="page" href="#">Home</a>
  29.                         </li>
  30.                         <li class="nav-item">
  31.                             <a class="nav-link active" href="#about">About</a>
  32.                         </li>
  33.                     </ul>
  34.                 </div>
  35.             </div>
  36.         </nav>
  37.         <!--end of navbar-->
  38.         <!--jumbotron-->
  39.         <div class="jumbotron jumbotron-fluid bg-light myJumbotron">
  40.         </div>
  41.         <section>
  42.             <div class="jumboContainer position-absolute">
  43.                 <h1 class="display-4 jumboh1 fw-bold">Knowledge is Power</h1>
  44.                 <p class="lead jumbop1">Lorem ipsum dolor sit amet.</p>
  45.             </div>
  46.         </section>
  47.         <!--end of jumbotron-->
  48.         <!--about-->
  49.         <section>
  50.             <div id="about" class="margLeft mt-5 w-80">
  51.                 <h2>Simple Library App</h2>
  52.                 <p class="pt-3 pe-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, quibusdam vitae
  53.                     blanditiis
  54.                     porro velit sequi quod eligendi veritatis amet necessitatibus! Lorem ipsum dolor sit amet
  55.                     consectetur
  56.                     adipisicing elit. Laudantium, sapiente! Lorem ipsum dolor sit amet consectetur adipisicing elit.
  57.                     Odio,
  58.                     voluptatum!</p>
  59.             </div>
  60.         </section>
  61.         <!--end of about-->
  62.  
  63.         <!--books-->
  64.  
  65.         <div class="cardContainer margLeft mt-5 d-flex">
  66.             <div class="ourBooks p-3 d-flex align-items-center justify-content-center">
  67.                 <h2>Our Books</h2>
  68.             </div>
  69.             <div class="w-100 book12Container d-flex justify-content-around">
  70.                 <!--book1-->
  71.                 <div class="card p-3 m-4 shadow" style="width: 18rem;">
  72.                     <img src="../assets/studio-media-9DaOYUYnOls-unsplash.jpg" class="card-img-top" alt="book1">
  73.                     <div class="card-body">
  74.                         <h3 class="text-center fw-bold">Buku 1</h3>
  75.                         <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, quia!</p>
  76.                         <!--like and dislike-->
  77.                         <reaction-button></reaction-button>
  78.                         <!--end of like and dislike-->
  79.                     </div>
  80.                 </div>
  81.                 <!--book2-->
  82.                 <div class="card p-3 m-4 shadow" style="width: 18rem;">
  83.                     <img src="../assets/brando-makes-branding-PjhOkwN0ruY-unsplash.jpg" class="card-img-top" alt="book1">
  84.                     <div class="card-body">
  85.                         <h3 class="text-center fw-bold">Buku 2</h3>
  86.                         <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, ducimus!.</p>
  87.                         <!--like and dislike-->
  88.                         <reaction-button></reaction-button>
  89.                         <!--end of like and dislike-->
  90.                     </div>
  91.                 </div>
  92.             </div>
  93.             <!--book3-->
  94.             <div class="w-100 book34Container d-flex justify-content-around">
  95.                 <div class="card p-3 m-4 shadow" style="width: 18rem;">
  96.                     <img src="../assets/sincerely-media-nGrfKmtwv24-unsplash.jpg" class="card-img-top" alt="book1">
  97.                     <div class="card-body">
  98.                         <h3 class="text-center fw-bold">Buku 3</h3>
  99.                         <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero, dolor?</p>
  100.                         <reaction-button></reaction-button>
  101.                     </div>
  102.                 </div>
  103.  
  104.  
  105.                 <!--book4-->
  106.                 <div class="card p-3 m-4 shadow" style="width: 18rem;">
  107.                     <img src="../assets/olia-gozha-jmm8F_V9tiA-unsplash.jpg" class="card-img-top" alt="book1">
  108.                     <div class="card-body">
  109.                         <h3 class="text-center fw-bold">Buku 4</h3>
  110.                         <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi, repellendus.</p>
  111.                         <reaction-button></reaction-button>
  112.                     </div>
  113.                 </div>
  114.             </div>
  115.             <!--book5-->
  116.             <div class="w-100 book56Container d-flex justify-content-around">
  117.                 <div class="card p-3 m-4 shadow" style="width: 18rem;">
  118.                     <img src="../assets/sincerely-media-_-hjiem5TqI-unsplash.jpg" class="card-img-top" alt="book1">
  119.                     <div class="card-body">
  120.                         <h3 class="text-center fw-bold">Buku 5</h3>
  121.                         <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, explicabo?</p>
  122.                         <reaction-button></reaction-button>
  123.                     </div>
  124.                 </div>
  125.                 <!--book6-->
  126.                 <div class="card p-3 m-4 shadow" style="width: 18rem;">
  127.                     <img src="../assets/thought-catalog-Q7sGp9MStSY-unsplash.jpg" class="card-img-top" alt="book1">
  128.                     <div class="card-body">
  129.                         <h3 class="text-center fw-bold">Buku 6</h3>
  130.                         <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe, dignissimos?.</p>
  131.                         <reaction-button></reaction-button>
  132.                     </div>
  133.                 </div>
  134.             </div>`
  135.         </div>
  136.         <!--end of books-->
  137.         <!--footer-->
  138.         <footer class="d-flex justify-content-center align-items-center">
  139.             <h6>Created with love by Redomeire</h6>
  140.         </footer>
  141.     </div>
  142.     <!-- <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
  143.     <!-- <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
  144.    <!-- <script src="../dist/bundle.js"></script> -->
  145.     <!-- <script type="module" src="./src/index.js"></script> -->
  146.     <!-- <script src="../dist/main.js"></script> -->
  147. </body>
  148.  
  149. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!