API tools faq
paste
Patrikrizek

lesson-6-index

Patrikrizek
May 23rd, 2022
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <!-- Required meta tags -->
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9.     <!-- Website title-->
  10.     <title>Bootstrap Site</title>
  11.  
  12.     <!-- Importing Bootstrap into our website -->
  13.     <!-- Introduction:  -->
  14.     <!-- Bootstrap CSS -->
  15.     <link href="..." rel="stylesheet"
  16.        integrity="..." crossorigin="anonymous">
  17.        
  18.     <!-- Bootstrap CheatSheet: -->
  19.     <!-- To use Bootstrap elements and components use snippets of code and apply classes -->
  20.    
  21.     <!-- FOLDER STRUCTURE
  22.        lesson-6
  23.            ∟ css
  24.                ∟ main.css
  25.            ∟ elephant.html    
  26.            ∟ index.html    
  27.            ∟ lion.html    
  28.            ∟ rhino.html
  29.    -->
  30.  
  31.     <!-- My personal CSS external file. -->
  32.     <link rel="stylesheet" href="...">
  33. </head>
  34.  
  35. <body>
  36.     <!-- Header -->
  37.     <!-- .container, which sets a max-width at each responsive breakpoint OR
  38.        .container-fluid, which is width: 100% at all breakpoints -->
  39.         <div class="container-fluid">
  40.  
  41.             <!-- Grid system with row and columns (up to 12 columns) -->
  42.             <div class="row bg-green">
  43.                 <!-- Margin & Padding
  44.                    Where property is one of:
  45.                    m - for classes that set margin
  46.                    p - for classes that set padding
  47.                    
  48.                Where sides is one of:
  49.                t - for classes that set margin-top or padding-top
  50.                b - for classes that set margin-bottom or padding-bottom
  51.                s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
  52.                e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
  53.                x - for classes that set both *-left and *-right
  54.                y - for classes that set both *-top and *-bottom
  55.                blank - for classes that set a margin or padding on all 4 sides of the element
  56.                
  57.                Where size is one of:
  58.                0 - for classes that eliminate the margin or padding by setting it to 0
  59.                1 - (by default) for classes that set the margin or padding to $spacer * .25
  60.                2 - (by default) for classes that set the margin or padding to $spacer * .5
  61.                3 - (by default) for classes that set the margin or padding to $spacer
  62.                4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  63.                5 - (by default) for classes that set the margin or padding to $spacer * 3
  64.                auto - for classes that set the margin to auto -->
  65.                 <!-- Align items vertically: d-flex align-items-center -->
  66.                 <!-- Layout > Grid: -->
  67.                 <div class="col-sm-2 p-3 d-flex align-items-center">
  68.                     <img src="..." alt="logo"
  69.                    height="100px">
  70.                 </div>
  71.                 <div class="col-sm-10 p-3 align-self-center">
  72.                     <h1 class="white">ZOO</h1>
  73.                     <h2 class="white">Located in London</h2>
  74.                 </div>
  75.             </div>
  76.         </div>
  77.  
  78.         <!-- Navigation -->
  79.         <!-- Navs & tabs:  -->
  80.         <div class="container-fluid p-3 bg-gray">
  81.             <ul class="nav justify-content-center">
  82.             <li class="nav-item">
  83.                 <a class="nav-link active" aria-current="page" href="index.html#main">Home</a>
  84.             </li>
  85.             <li class="nav-item">
  86.                 <a class="nav-link" href="#animals">Animals</a>
  87.             </li>
  88.             <li class="nav-item">
  89.                 <a class="nav-link" href="#contact">Contact</a>
  90.             </li>
  91.             <li class="nav-item">
  92.                 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Workshops</a>
  93.             </li>
  94.         </ul>
  95.     </div>
  96.  
  97.     <!-- Carousel:  -->
  98.     <div class="container-fluid p-0">
  99.         <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  100.             <div class="carousel-inner">
  101.                 <div class="carousel-item active" data-bs-interval="10000">
  102.                     <img src="..."
  103.                    class="d-block w-100" alt="elephant">
  104.                 </div>
  105.                 <div class="carousel-item" data-bs-interval="2000">
  106.                     <img src="..."
  107.                    class="d-block w-100" alt="rhino">
  108.                 </div>
  109.                 <div class="carousel-item">
  110.                     <img src="..."
  111.                    class="d-block w-100" alt="lion">
  112.                 </div>
  113.             </div>
  114.             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
  115.            data-bs-slide="prev">
  116.             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  117.             <span class="visually-hidden">Previous</span>
  118.         </button>
  119.         <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
  120.                data-bs-slide="next">
  121.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  122.                 <span class="visually-hidden">Next</span>
  123.             </button>
  124.         </div>
  125.     </div>
  126.    
  127.     <!-- Main -->
  128.     <!-- Info about ZOO -->
  129.     <div id="main">
  130.         <!-- .container, which sets a max-width at each responsive breakpoint OR
  131.            .container-fluid, which is width: 100% at all breakpoints -->
  132.             <div class="container pt-5 pb-5 bg-gray">
  133.                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum beatae iure, a amet ex sunt mollitia,
  134.                     natus cum iusto eligendi sapiente ipsam minima molestiae itaque expedita obcaecati facere fuga voluptate
  135.                     aliquam. Nulla delectus harum, ipsum nesciunt tempora mollitia optio architecto accusamus quas illo
  136.                     tenetur quis voluptatibus sunt, voluptate ea corporis in culpa! Recusandae similique ea quam non atque
  137.                     cumque ab a illo ut minus aspernatur amet qui nam rem, perspiciatis suscipit dolor ad, vero alias. Eum
  138.                 maiores minus quos soluta ex provident fugit dicta, animi repellat, nesciunt tempora? Optio eveniet quam
  139.                 fugiat fugit quisquam ullam est soluta repudiandae unde dolorum.</p>
  140.         </div>
  141.     </div>
  142.  
  143.     <div id="animals">
  144.         <!-- Card:  -->
  145.         <!-- Align item horizontally: d-flex justify-content-center pb-5 -->
  146.         <div class="container d-flex justify-content-center pb-5 bg-gray">
  147.             <div class="row">
  148.  
  149.                 <div class="col-lg-4 mb-5">
  150.                     <div class="card" style="width: 18rem;">
  151.                         <img src="..."
  152.                        class="card-img-top" alt="elephant">
  153.                         <div class="card-body">
  154.                             <h5 class="card-title">Card title</h5>
  155.                             <p class="card-text">Some quick example text to build on the card title and make up the bulk
  156.                                 of
  157.                                 the card's content.</p>
  158.                                 <a href="elephant.html" class="btn btn-primary">Go somewhere</a>
  159.                             </div>
  160.                         </div>
  161.                     </div>
  162.                    
  163.                     <div class="col-lg-4 mb-5">
  164.                         <div class="card" style="width: 18rem;">
  165.                             <img src="..."
  166.                            class="card-img-top" alt="rhino">
  167.                             <div class="card-body">
  168.                                 <h5 class="card-title">Card title</h5>
  169.                             <p class="card-text">Some quick example text to build on the card title and make up the bulk
  170.                                 of
  171.                                 the card's content.</p>
  172.                                 <a href="rhino.html" class="btn btn-primary">Go somewhere</a>
  173.                             </div>
  174.                         </div>
  175.                 </div>
  176.  
  177.                 <div class="col-lg-4 mb-5">
  178.                     <div class="card" style="width: 18rem;">
  179.                         <img src="..."
  180.                        class="card-img-top" alt="lion">
  181.                         <div class="card-body">
  182.                             <h5 class="card-title">Card title</h5>
  183.                             <p class="card-text">Some quick example text to build on the card title and make up the bulk
  184.                                 of
  185.                                 the card's content.</p>
  186.                                 <a href="lion.html" class="btn btn-primary">Go somewhere</a>
  187.                             </div>
  188.                         </div>
  189.                     </div>
  190.  
  191.                 </div>
  192.         </div>
  193.     </div>
  194.  
  195.     <!-- Contact -->
  196.     <div id="contact">
  197.         <div class="container d-flex justify-content-center pb-5 bg-green">
  198.             <div class="row">
  199.  
  200.                 <div class="col-md-4 pt-5 pb-5">
  201.                     <h3 class="white">Address</h3>
  202.                     <address class="white">Zoo<br>1st Street<br>London<br>SE16 4AB</address>
  203.                     <p class="white">Tel: +44 0123456789<br>email: zoo@london.com</p>
  204.                 </div>
  205.                
  206.                 <div class="col-md-4 pt-5 pb-5">
  207.                     <h3 class="white">Follow</h3>
  208.                     <p class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti qui provident
  209.                         reprehenderit ut aliquid quas aut eos fugit sunt hic?</p>
  210.                     </div>
  211.                    
  212.                 <div class="col-md-4 pt-5 pb-5">
  213.                     <h3 class="white">About Workshops</h3>
  214.                     <p class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, debitis! Officia ex
  215.                         doloribus pariatur fugiat tenetur perspiciatis accusamus! Perferendis, iste.</p>
  216.                 </div>
  217.  
  218.             </div>
  219.         </div>
  220.     </div>
  221.  
  222.     <!-- Footer -->
  223.     <div id="footer">
  224.         <div class="container-fluid d-flex justify-content-center pt-1 pb-1 bg-gray">
  225.             2022 ZOO | All rights reserved.
  226.         </div>
  227.     </div>
  228.  
  229.     <!-- Bootstrap JS -->
  230.     <script src="..."
  231.        integrity="..."
  232.        crossorigin="anonymous"></script>
  233. </body>
  234.  
  235. </html>
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!