API tools faq
paste
Advertisement
aisyaku

Latihan-bootstrap.html

aisyaku
Aug 6th, 2022
991
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.84 KB | None | 0 0
raw download clone embed print report
  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
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!