Advertisement
aisyaku

Latihan-bootstrap.html

Aug 6th, 2022
785
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>SMKN 1 Cirebon</title>
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
  9.     <link href="style.css" rel="stylesheet" />
  10.   </head>
  11.   <body>
  12.     <div class="container">
  13.         <nav class="navbar navbar-expand-lg">
  14.             <div class="container-fluid">
  15.                 <a class="navbar-brand" href="#">
  16.                     <img src="/images/logo-smk.jpg" alt="" width="48px"/>
  17.                     <span class="ms-2 fw-bold">SMKN 1 Cirebon</span>
  18.                 </a>
  19.                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  20.                 <span class="navbar-toggler-icon"></span>
  21.                 </button>
  22.                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
  23.                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  24.                         <li class="nav-item">
  25.                             <a class="nav-link active" aria-current="page" href="#">Home</a>
  26.                         </li>
  27.                         <li class="nav-item">
  28.                             <a class="nav-link" href="#">Courses</a>
  29.                         </li>
  30.                         <li class="nav-item">
  31.                             <a class="nav-link" href="#">Mentors</a>
  32.                         </li>
  33.                         <li class="nav-item">
  34.                             <a class="nav-link" href="#">Testimonials</a>
  35.                         </li>
  36.                         <li class="nav-item">
  37.                             <a class="nav-link" href="#">Blog</a>
  38.                         </li>
  39.                         <li class="nav-item">
  40.                             <a class="nav-link" href="#">Contact</a>
  41.                         </li>
  42.                     </ul>
  43.                     <a class="btn btn-success" href="#">Signup</a>
  44.                 </div>
  45.             </div>
  46.         </nav>
  47.  
  48.         <!-- section header -->
  49.         <div class="my-4">
  50.             <p class="text-center fs-1 fw-bold">
  51.                 Let's learn about new <br> knowledge and abilities.
  52.             </p>
  53.             <p class="text-center text-black-50">
  54.                 Let's discover new knowledge and new friends and have a learning <br/>exprience with beautiful teacher
  55.             </p>
  56.             <div class="text-center my-3">
  57.                 <a href="#" class="btn btn-primary ">Get Started</a>
  58.                 <a href="#" class="ms-3 btn btn-outline-info">
  59.                     <img src="/images/icon_play.jpg" alt="" width="20px" class="me-1"/>
  60.                     Watch Videos
  61.                 </a>
  62.             </div>
  63.             <img src="/images/img_header.png" class="mx-auto d-block"/>
  64.  
  65.             <!-- logo sponsor -->
  66.             <p class="text-center text-black-50">Trusted by several unicorn companies</p>
  67.             <div class="text-center">
  68.                 <img src="/images/img_canba.png" height="36px" class="mx-4"/>
  69.                 <img src="/images/img_idea.png" height="36px" class="mx4"/>
  70.                 <img src="/images/img_treva.png" height="36px" class="mx-4"/>
  71.                 <img src="/images/img_kyan.png" height="36px" class="mx-4"/>
  72.                 <img src="/images/img_liva.png" height="36px" class="mx-4"/>
  73.             </div>
  74.         </div>
  75.         <!-- End section Header -->
  76.  
  77.         <!-- section service -->
  78.         <div class="my-5 text-center">
  79.             <p class="service-info mb-1">How Its Work</p>
  80.             <p class="fs-3 lh-sm fw-semibold">How is our tutoring<br>service?</p>
  81.            
  82.             <div class="row mt-5">
  83.                 <div class="col card text-start card-service card-service-active mx-2 p-2" >
  84.                     <div class="card-body">
  85.                         <div class="bg-icon text-center">
  86.                             <i class="bi-hand-thumbs-up "></i>
  87.                         </div>
  88.                         <p class="fs-6 fw-semibold mt-3 mb-2">Relaxing and learning</p>
  89.                         <p class="text-card-service">There are several sections avalaible in different versions, but most of them have fun</p>
  90.  
  91.                         <a href="#" class="text-link">Read More</a>
  92.                     </div>
  93.                 </div>
  94.  
  95.                 <div class="col card text-start card-service mx-2 p-2" >
  96.                     <div class="card-body">
  97.                         <div class="bg-icon text-center bg-blue">
  98.                             <i class="bi-bookmark-star"></i>
  99.                         </div>
  100.                         <p class="fs-6 fw-semibold mt-3 mb-2">Certificate</p>
  101.                         <p class="text-card-service">We are constantly improving the material for the lessons we want to pass on to other</p>
  102.  
  103.                         <a href="#" class="text-link">Read More</a>
  104.                     </div>
  105.                 </div>
  106.  
  107.                 <div class="col card text-start card-service mx-2 p-2" >
  108.                     <div class="card-body">
  109.                         <div class="bg-icon text-center bg-orange">
  110.                             <i class="bi-emoji-smile "></i>
  111.                         </div>
  112.                         <p class="fs-6 fw-semibold mt-3 mb-2">Private Mentoring</p>
  113.                         <p class="text-card-service">All of our specialist in special education have the best educational degrees</p>
  114.  
  115.                         <a href="#" class="text-link">Read More</a>
  116.                     </div>
  117.                 </div>
  118.                 <div class="col card text-start card-service mx-2 p-2" >
  119.                     <div class="card-body">
  120.                         <div class="bg-icon text-center bg-pink">
  121.                             <i class="bi-emoji-smile "></i>
  122.                         </div>
  123.                         <p class="fs-6 fw-semibold mt-3 mb-2">Creative Thinking</p>
  124.                         <p class="text-card-service">There are several sections avalaible in different versions, but most of them have fun</p>
  125.  
  126.                         <a href="#" class="text-link">Read More</a>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.         </div>
  131.         <!-- end section service -->
  132.     </div>
  133.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  134.   </body>
  135. </html>
  136.  
Advertisement
RAW Paste Data Copied
Advertisement