lemansky

Untitled

Dec 9th, 2021 (edited)
952
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.     <title>Document</title>
  6.   <style>
  7.     body{
  8.       font-family: "Segoe UI";
  9.     }
  10.     a{
  11.       color:#0d6efd;
  12.       text-decoration: none;
  13.     }
  14.     .container{
  15.       max-width:1320px;
  16.       margin: 0 auto;
  17.       padding:0 12px;
  18.     }
  19.     .row{
  20.       display:flex;
  21.       flex-direction: row;
  22.       margin:0 -12px;
  23.     }
  24.     .col-8{
  25.       width:66.666667%;
  26.       padding: 0 12px;
  27.     }
  28.     .col-4{
  29.       width:33.333333%;
  30.       padding: 0 12px;
  31.     }
  32.  
  33.     .text-white{
  34.       color:white;
  35.     }
  36.     .bg-dark{
  37.       background: #212529;
  38.     }
  39.     .btn{
  40.       display: inline-block;
  41.       color: white;
  42.       text-align: center;
  43.       vertical-align: middle;
  44.       border: 1px solid transparent;
  45.       padding: 8px 12px;
  46.       border-radius: 4px;
  47.       background:transparent;
  48.       cursor:pointer;
  49.     }
  50.     .btn-yellow{
  51.       color: #000;
  52.       background-color: #ffcd39;
  53.       border-color: #ffc720;
  54.     }
  55.     .p-16{
  56.       padding:16px;
  57.     }
  58.     .my-48{
  59.       margin-top:48px;
  60.       margin-bottom:48px;
  61.     }
  62.     .menu{
  63.       padding-top:9px;
  64.     }
  65.     .menu-link{
  66.       padding:8px 16px;
  67.  
  68.     }
  69.     .pt-4{
  70.       padding-top: 4px;
  71.     }
  72.     .heading{
  73.       font-size:48px;
  74.       line-height: 1.2;
  75.       font-weight: 300;
  76.     }
  77.     .brand{
  78.       font-size:20px;
  79.       padding-top:5px;
  80.       padding-bottom:5px;
  81.       line-height: 40px;
  82.     }
  83.     .m-0{
  84.       margin:0px;
  85.     }
  86.  
  87.     .bg-yellow{
  88.       background: #ffcd39;
  89.     }
  90.     .card-footer{
  91.       border-bottom-left-radius: 3px;
  92.       border-bottom-right-radius: 3px;
  93.       padding:8px 16px;
  94.       background-color: rgba(0,0,0,.03);
  95.       border-top: 1px solid rgba(0,0,0,.125)
  96.     }
  97.     .fst-italic{
  98.       font-style: italic;
  99.     }
  100.     .border-yellow{
  101.       border-color:#ffcd39!important;
  102.     }
  103.     .rounded{
  104.       border-radius:4px;
  105.     }
  106.     .card{
  107.       position: relative;
  108.       display: flex;
  109.       flex-direction: column;
  110.       min-width: 0;
  111.       word-wrap: break-word;
  112.       background-color: #fff;
  113.       background-clip: border-box;
  114.       border: 1px solid gray;
  115.       border-radius: 4px;
  116.     }
  117.     .card-header{
  118.       padding:8px 16px;
  119.       font-weight:bold;
  120.     }
  121.     .card-body{
  122.       padding:16px;
  123.     }
  124.  
  125.   </style>
  126.  
  127. </head>
  128. <body>
  129.     <div class="">
  130.      <div class="">
  131.       <div class="">
  132.         <a class="" href="#">Company Logo</a>
  133.         </div>
  134.       <div class="">
  135.         <div class="">
  136.           <a class="" href="#">Home</a>
  137.           <a class="" href="#">About</a>
  138.           <a class="" href="#">Services</a>
  139.           <a class="" href="#">Contact</a>
  140.         </div>
  141.       </div>
  142.       </div>
  143.     </div>
  144.   <div class="">
  145.     <div class="">
  146.       <div class="">
  147.         <img class="" src="http://placehold.it/800x400" alt="">
  148.       </div>
  149.       <div class="">
  150.         <h1 class="">Business Name</h1>
  151.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe voluptas quam illo amet esse, veniam autem, perspiciatis impedit in assumenda cupiditate est, quaerat, ipsam cumque nobis sed velit nam unde.</p>
  152.         <a class="" href="#">Call to Action!</a>
  153.       </div>
  154.     </div>
  155.     <div class="">
  156.       <div class="">
  157.         <div class="">
  158.             <div class="">Card 1</div>
  159.           <div class="">
  160.             <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
  161.           </div>
  162.           <div class="">
  163.             <a href="#" class="">More Info</a>
  164.           </div>
  165.         </div>
  166.       </div>
  167.       <div class="">
  168.         <div class="">
  169.           <div class="">Card 2</div>
  170.           <div class="">
  171.             <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id </p>
  172.           </div>
  173.           <div class="">
  174.             <a href="#" class="">More Info</a>
  175.           </div>
  176.         </div>
  177.       </div>
  178.       <div class="">
  179.         <div class="">
  180.          <div class="">Card 3</div>
  181.           <div class="">
  182.             <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
  183.           </div>
  184.           <div class="">
  185.             <a href="#" class="">More Info</a>
  186.           </div>
  187.         </div>
  188.       </div>
  189.     </div>
  190.   </div>
  191. </body>
  192. </html>
RAW Paste Data