API tools faq
paste
Rudi_S

Membuat Menu Service Bag3

Rudi_S
Mar 26th, 2023
54
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.25 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Landing Page BS</title>
  8.  
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">  
  10.  
  11.     <style>
  12.         body {
  13.             padding-top: 56px;
  14.         }
  15.         .jumbotron {
  16.             text-shadow: #000 1px 1px;
  17.         }
  18.         .background-header {
  19.             background-image: url("https://raw.githubusercontent.com/codepolitanlab/membuat-landing-page-dengan-bootstrap4/master/images/banner2.jpg");
  20.             background-color: #fafbfc;
  21.             height: 400px;
  22.             background-position: center;
  23.             background-repeat: no-repeat;
  24.             background-size: cover;
  25.             position: relative;
  26.         }
  27.         .button-primer {
  28.             background-color: #00bd8e;
  29.             border-color: #0b9b6b;
  30.             color: #fff;
  31.             text-shadow: 0px 0px;
  32.         }
  33.         .button-primer:hover {
  34.             background-color: #038c6a;
  35.             color: #fff;
  36.             text-shadow: 0px 0px;
  37.         }
  38.         .service-style {
  39.             margin-top: 15px;
  40.             background-color: #fafbfc;
  41.         }
  42.         .text-green {
  43.             color: #0b9b6b;
  44.         }
  45.         .bg-red {
  46.             background-color: #f25757;
  47.         }
  48.         h2:before,
  49.         h2:after {
  50.             background-color: #0b9b6b;
  51.             content: "";
  52.             display: inline-block;
  53.             height: 1px;
  54.             position: relative;
  55.             vertical-align: middle;
  56.             width: 50%;
  57.         }
  58.         h2:before {
  59.             right: 0.5em;
  60.             margin-left: -50%;
  61.         }
  62.         h2:after {
  63.             right: 0.5em;
  64.             margin-right: -50%;
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69.  
  70.     <!--Navigation Bar-->
  71.     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  72.         <div class="container">  
  73.             <a class="navbar-brand" href="#"><img src="D:\Full Stack Web Developer/Landing-Page-BS/logo Codepolitan.png"></a>
  74.  
  75.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navBarContent" aria-expanded="false" aria-label="Toggle Navigation">
  76.                 <span class="navbar-toggler-icon"></span>
  77.             </button>
  78.             <div class="collapse navbar-collapse" id="navbarContent">
  79.                 <ul class="navbar-nav ml-auto">
  80.                     <li class="nav-item active">
  81.                         <a class="nav-link" href="#">Home</a>
  82.                     </li>
  83.                     <li class="nav-item">
  84.                         <a class="nav-link" href="#services">Service</a>
  85.                     </li>
  86.                     <li class="nav-item">
  87.                         <a class="nav-link" href="#product">Product</a>
  88.                     </li>
  89.                     <li class="nav-item">
  90.                         <a class="nav-link" href="#about">About</a>
  91.                     </li>
  92.                     <li class="nav-item">
  93.                         <a class="nav-link" href="#contact">Contact</a>
  94.                     </li>
  95.                 </ul>
  96.             </div>
  97.  
  98.         </div>
  99.     </nav>
  100.  
  101.     <!--Header-->
  102.     <header class="jumbotron jumbotron-fluid background-header">
  103.         <div class="container-fluid text-center">
  104.             <h1 class="display-3" style="color: aliceblue;">Solusi Terbaik Belajarmu</h1>
  105.             <p class="lead" style="font-weight: bold; color: #fff;">Kami menyediakan banyak judul yang kamu butuhkan untuk belajar pemrograman dari tingkat dasar sampai mahir.</p>
  106.             <p><a href="#" class="btn button-primer btn-lg" role="button">Gabung Sekarang</a>
  107.                 <a href="#" class="btn btn-secondary btn-lg" role="button" style="text-shadow: 0px 0px;">Pelajari Dahulu</a>
  108.             </p>
  109.  
  110.         </div>
  111.  
  112.     </header>
  113.  
  114.     <!--Service-->
  115.     <section id="services" class="service-style container-fluid container-fluid-max">
  116.         <div class="row text-center">
  117.             <div class="col-12 pb-4">
  118.                 <h2 class="display-4">Mengapa memilih kami?</h2>
  119.             </div>
  120.             <div class="col-12 col-sm-6 col-lg-3">
  121.                 <span class="fa-stack fa-2x">
  122.                     <i class="fa-solid fa-circle fa-2xl text-green"></i>
  123.                     <i class="fa-solid fa-list fa-stack-1x text-white"></i>
  124.                 </span>                
  125.                 <h3 class="mt-4 text-green">Fasilitas Oke</h3>
  126.                 <p>Fasilitas yang kami sediakan sangat lengkap dan nyaman</p>
  127.             </div>
  128.             <div class="col-12 col-sm-6 col-lg-3">
  129.                 <span class="fa-stack fa-2x">
  130.                     <i class="fa-solid fa-circle fa-2xl text-green"></i>
  131.                     <i class="fas fa-laptop-code fa-stack-1x text-white"></i>
  132.                 </span>              
  133.                 <h3 class="mt-4 text-green">Modul Lengkap</h3>
  134.                 <p>Tersedia lebih dari 2000 modul di tempat kami</p>
  135.             </div>
  136.             <div class="col-12 col-sm-6 col-lg-3">
  137.                 <span class="fa-stack fa-2x">
  138.                     <i class="fa-solid fa-circle fa-2xl text-green"></i>
  139.                     <i class="far fa-money-bill-alt fa-stack-1x text-white"></i>
  140.                 </span>                
  141.                 <h3 class="mt-4 text-green">Biaya Terjangkau</h3>
  142.                 <p>Biaya sangat terjangkau dan kompetitif</p>
  143.             </div>
  144.             <div class="col-12 col-sm-6 col-lg-3">
  145.                 <span class="fa-stack fa-2x">
  146.                     <i class="fa-solid fa-circle fa-2xl text-green"></i>
  147.                     <i class="fas fa-chart-line fa-stack-1x text-white"></i>
  148.                 </span>                
  149.                 <h3 class="mt-4 text-green">Terarah</h3>
  150.                 <p>Sistem pembelajaran kami terarah dan cukup mudah</p>
  151.             </div>
  152.             <div class="col-12 pt-3 mb-5">
  153.                 <a class="btn text-white bg-red btn-lg" target="_blank" href="#" role="button">Service lainnya</a>
  154.             </div>
  155.         </div>
  156.  
  157.     </section>
  158.  
  159.     <!--Product-->
  160.     <section id="product">
  161.  
  162.     </section>
  163.  
  164.     <!--About-->
  165.     <section id="about">
  166.  
  167.     </section>
  168.  
  169.     <!--Contact-->
  170.     <section id="contact">
  171.  
  172.     </section>
  173.  
  174.     <footer></footer>
  175.     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  176.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  177.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  178.     <script src="https://kit.fontawesome.com/9829485921.js" crossorigin="anonymous"></script>
  179. </body>
  180. </html>
Tags: codepolitan
Add Comment
Please, Sign In to add comment
Public Pastes
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!