API tools faq
paste
rezamalik15

SMX landing page

rezamalik15
May 23rd, 2023 (edited)
959
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.13 KB | None | 0 0
raw download clone embed print report
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>SMX - </title>
  6.  
  7.     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  8.  
  9.     <style type="text/css">
  10.         #image-header{
  11.             background-image: url("assets/img/pexels-kobe-1516440.jpg");
  12.             background-size: cover;
  13.             height: 100vh;
  14.             background-position: center;
  15.             background-repeat: none;
  16.         }
  17.     </style>
  18.  
  19. </head>
  20. <body>
  21.  
  22.     <div class="container-fluid" id="image-header">
  23.         <div class="bg-image w-100 h-100 py-0 position-relative" >
  24.             <div class="position-absolute top-50 start-50 translate-middle">
  25.                 <img src="assets/img/3e458110-7c28-4654-bab6-59db82a587cf.png" height="200" class="d-flex justify-content-center" alt="">
  26.                 <!-- <h1 class="text-white text-center fs-1">Join us to see more amazing project</h1> -->
  27.             </div>         
  28.         </div>
  29.     </div>
  30.  
  31.     <div class="container-fluid bg-secondary bg-opacity-25 mb-3 position-relative mb-5">
  32.         <nav class="navbar sticky-top navbar-expand-lg">
  33.             <div class="container-fluid">
  34.                 <a class="navbar-brand" href="#">SMX</a>
  35.                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  36.                     <span class="navbar-toggler-icon"></span>
  37.                 </button>
  38.                 <div class="collapse navbar-collapse" id="navbarNav">
  39.                     <ul class="navbar-nav">
  40.                         <li class="nav-item">
  41.                             <a class="nav-link active" aria-current="page" href="#">Home</a>
  42.                         </li>
  43.                         <li class="nav-item">
  44.                             <a class="nav-link" href="#">Features</a>
  45.                         </li>
  46.                         <li class="nav-item">
  47.                             <a class="nav-link" href="#">Pricing</a>
  48.                         </li>
  49.                         <li class="nav-item">
  50.                             <a class="nav-link" href="#">Pricing</a>
  51.                         </li>
  52.                         <li class="nav-item">
  53.                             <a class="nav-link" href="#">Pricing</a>
  54.                         </li>
  55.                         <li class="nav-item">
  56.                             <a class="nav-link" href="#">Pricing</a>
  57.                         </li>
  58.                     </ul>
  59.                 </div>
  60.             </div>
  61.  
  62.         </nav>     
  63.     </div>
  64.  
  65.     <div class="container-fluid mb-5">
  66.         <div class="container">
  67.             <div class="row">
  68.                 <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 m-auto">
  69.                     <h1 class="fs-2 text-center">Come visit us at the school of maker</h1>
  70.                 </div>
  71.                 <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
  72.                     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3963.5677743567467!2d106.82170957443034!3d-6.576103564283699!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69c7b53f042fe3%3A0xedd50d0ef554596d!2sSMX%20School%20of%20Maker!5e0!3m2!1sid!2sid!4v1684846053484!5m2!1sid!2sid" width=100% height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  73.                 </div>
  74.             </div>
  75.         </div>
  76.     </div>
  77.  
  78.     <div class="container-fluid d-flex align-items-center" style="background-image: url('assets/img/e831a3dd-80e2-4dae-857e-8edf5cb35566.jpeg');
  79.             background-size: cover;
  80.             height: 100vh;">
  81.         <div class="container" >
  82.             <div class="row">
  83.                 <div class="col-lg-6 col-md-6 col-sm-12 mb-3">
  84.                     <div class="row">
  85.                         <div class="col ">
  86.                             <h1 class="text-white d-flex">Student Project</h1>
  87.  
  88.                             <div class="card w-75 bg-opacity-50 d-flex" style="background-color: white; opacity: 0.5; color: black;">
  89.                               <div class="card-body">
  90.                                 <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet fermentum lacus. Suspendisse eu ipsum quis eros volutpat tempus porttitor at nulla.</p>
  91.                               </div>
  92.                             </div>
  93.                         </div>
  94.                     </div>
  95.                 </div>
  96.                 <div class="col-lg-6 col-md-6 col-sm-12">
  97.                     <div class="row">
  98.                         <div class="col-sm-6 col-12 col-md-12 mb-3">
  99.                             <div class="card" style="background-color: white; opacity: 0.5; color: black;">
  100.                                 <div class="card-header">image</div>
  101.                                 <div class="card-body">
  102.                                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet fermentum lacus. Suspendisse eu ipsum quis eros volutpat tempus porttitor at nulla.</p>
  103.                                 </div>
  104.                             </div>
  105.                         </div>
  106.                         <div class="col-sm-6 col-12 col-md-12 mb-3">
  107.                             <div class="card" style="background-color: white; opacity: 0.5; color: black;">
  108.                                 <div class="card-header">image</div>
  109.                                 <div class="card-body">
  110.                                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet fermentum lacus. Suspendisse eu ipsum quis eros volutpat tempus porttitor at nulla.</p>
  111.                                 </div>
  112.                             </div>
  113.                         </div>
  114.                     </div>
  115.                     <div class="row d-none">
  116.                         <div class="col-sm-6 col-12 mb-3">
  117.                             <div class="card" style="background-color: white; opacity: 0.5; color: black;">
  118.                                 <div class="card-header">image</div>
  119.                                 <div class="card-body">
  120.                                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet fermentum lacus. Suspendisse eu ipsum quis eros volutpat tempus porttitor at nulla.</p>
  121.                                 </div>
  122.                             </div>
  123.                         </div>
  124.                         <div class="col-sm-6 col-12 mb-3">
  125.                             <div class="card" style="background-color: white; opacity: 0.5; color: black;">
  126.                                 <div class="card-header">image</div>
  127.                                 <div class="card-body">
  128.                                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet fermentum lacus. Suspendisse eu ipsum quis eros volutpat tempus porttitor at nulla.</p>
  129.                                 </div>
  130.                             </div>
  131.                         </div>
  132.                     </div>
  133.  
  134.                     <a class="btn btn-primary" href="">See more ...</a>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.     </div>
  139.  
  140.     <div class="container-fluid bg-primary h-50">
  141.         <div class="container-xxl">
  142.            
  143.         </div>
  144.     </div>
  145.  
  146.     <div class="container-fluid bg-secondary h-50">
  147.         <div class="container-xxl">
  148.            
  149.         </div>
  150.     </div>
  151.  
  152.     <div class="container-fluid bg-danger h-50">
  153.         <div class="container-xxl">
  154.            
  155.         </div>
  156.     </div>
  157.  
  158.     <div class="container-fluid bg-warning h-50">
  159.         <div class="container-xxl">
  160.            
  161.         </div>
  162.     </div>
  163.  
  164.  
  165.  
  166.     <script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
  167. </body>
  168. </html>
Advertisement
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!