├── images
    ├── Double.png
    ├── Family.png
    ├── Single.png
    ├── header.png
    ├── signup.png
    ├── bags
    │   ├── bag-1.png
    │   ├── bag-2.png
    │   ├── bag-3.png
    │   ├── bag-4.png
    │   ├── bag-5.png
    │   ├── bag-6.png
    │   └── bag-7.png
    ├── jackets
    │   ├── jacket-1.png
    │   ├── jacket-2.png
    │   ├── jacket-3.png
    │   ├── jacket-4.png
    │   ├── jacket-5.png
    │   ├── jacket-6.png
    │   └── jacket-7.png
    └── players
    │   ├── player-1.png
    │   ├── player-10.png
    │   ├── player-11.png
    │   ├── player-12.png
    │   ├── player-2.png
    │   ├── player-3.png
    │   ├── player-4.png
    │   ├── player-5.png
    │   ├── player-6.png
    │   ├── player-7.png
    │   ├── player-8.png
    │   └── player-9.png
├── recap.html
├── flex.html
├── registration.html
├── grid-card.html
├── responsive.html
├── jackets.html
├── bags.html
└── players.html


/images/Double.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/Double.png


--------------------------------------------------------------------------------
/images/Family.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/Family.png


--------------------------------------------------------------------------------
/images/Single.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/Single.png


--------------------------------------------------------------------------------
/images/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/header.png


--------------------------------------------------------------------------------
/images/signup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/signup.png


--------------------------------------------------------------------------------
/images/bags/bag-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/bags/bag-1.png


--------------------------------------------------------------------------------
/images/bags/bag-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/bags/bag-2.png


--------------------------------------------------------------------------------
/images/bags/bag-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/bags/bag-3.png


--------------------------------------------------------------------------------
/images/bags/bag-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/bags/bag-4.png


--------------------------------------------------------------------------------
/images/bags/bag-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/bags/bag-5.png


--------------------------------------------------------------------------------
/images/bags/bag-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/bags/bag-6.png


--------------------------------------------------------------------------------
/images/bags/bag-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/bags/bag-7.png


--------------------------------------------------------------------------------
/images/jackets/jacket-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/jackets/jacket-1.png


--------------------------------------------------------------------------------
/images/jackets/jacket-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/jackets/jacket-2.png


--------------------------------------------------------------------------------
/images/jackets/jacket-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/jackets/jacket-3.png


--------------------------------------------------------------------------------
/images/jackets/jacket-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/jackets/jacket-4.png


--------------------------------------------------------------------------------
/images/jackets/jacket-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/jackets/jacket-5.png


--------------------------------------------------------------------------------
/images/jackets/jacket-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/jackets/jacket-6.png


--------------------------------------------------------------------------------
/images/jackets/jacket-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/jackets/jacket-7.png


--------------------------------------------------------------------------------
/images/players/player-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-1.png


--------------------------------------------------------------------------------
/images/players/player-10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-10.png


--------------------------------------------------------------------------------
/images/players/player-11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-11.png


--------------------------------------------------------------------------------
/images/players/player-12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-12.png


--------------------------------------------------------------------------------
/images/players/player-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-2.png


--------------------------------------------------------------------------------
/images/players/player-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-3.png


--------------------------------------------------------------------------------
/images/players/player-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-4.png


--------------------------------------------------------------------------------
/images/players/player-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-5.png


--------------------------------------------------------------------------------
/images/players/player-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-6.png


--------------------------------------------------------------------------------
/images/players/player-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-7.png


--------------------------------------------------------------------------------
/images/players/player-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-8.png


--------------------------------------------------------------------------------
/images/players/player-9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/responsive-layout-bootstrap/HEAD/images/players/player-9.png


--------------------------------------------------------------------------------
/recap.html:
--------------------------------------------------------------------------------
 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>Bootstrap Recap</title>
 8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 |     <h2>Recap Bootstrap</h2>
12 |     <p class="h2">Hello from Bootstrap</p>
13 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/flex.html:
--------------------------------------------------------------------------------
 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>Bootstrap demo</title>
 7 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 8 |   </head>
 9 |   <body>
10 |     <h1>Flex Flex Relax!</h1>
11 |     <h2>Welcome to the hotel California!</h2>
12 |     <div class="d-flex flex-wrap">
13 |         <div class="w-25 rounded border border-5 border-success">
14 |             <img class="img-fluid" src="images/Single.png" alt="">
15 |             <h3>Single Room</h3>
16 |             <h5>$125.00</h5>
17 |         </div>
18 |         <div class="w-25 rounded border border-5 border-success">
19 |             <img class="img-fluid" src="images/Double.png" alt="">
20 |             <h3>Double Room</h3>
21 |             <h5>$175.00</h5>
22 |         </div>
23 |         <div class="w-25 rounded border border-5 border-success">
24 |             <img class="img-fluid" src="images/Family.png" alt="">
25 |             <h3>Family Room</h3>
26 |             <h5>$199.00</h5>
27 |         </div>
28 |         <div class="w-25 rounded border border-5 border-success">
29 |             <img class="img-fluid" src="images/Single.png" alt="">
30 |             <h3>Single Room</h3>
31 |             <h5>$125.00</h5>
32 |         </div>
33 |         <div class="w-25 rounded border border-5 border-success">
34 |             <img class="img-fluid" src="images/Double.png" alt="">
35 |             <h3>Double Room</h3>
36 |             <h5>$175.00</h5>
37 |         </div>
38 |         <div class="w-25 rounded border border-5 border-success">
39 |             <img class="img-fluid" src="images/Family.png" alt="">
40 |             <h3>Family Room</h3>
41 |             <h5>$199.00</h5>
42 |         </div>
43 |     </div>
44 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
45 |   </body>
46 | </html>


--------------------------------------------------------------------------------
/registration.html:
--------------------------------------------------------------------------------
 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>Registration demo</title>
 7 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 8 |   </head>
 9 |   <body>
10 |     <section class="container">
11 |         <div class="row">
12 |             <div class="col-md-6 d-flex flex-column justify-content-center align-items-center">
13 |                 <h3 class="my-3">Please Register</h3>
14 |                 <form>
15 |                     <div class="form-floating mb-3">
16 |                         <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
17 |                         <label for="floatingInput">Email address</label>
18 |                       </div>
19 |                       <div class="form-floating mb-3">
20 |                         <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
21 |                         <label for="floatingPassword">Password</label>
22 |                       </div>
23 |                       <select class="form-select mb-3" aria-label="Default select example">
24 |                         <option selected>Please select one</option>
25 |                         <option value="male">Male</option>
26 |                         <option value="female">Women</option>
27 |                         <option value="secret">Do not Share</option>
28 |                       </select>
29 |                       <div class="form-check mb-3">
30 |                         <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
31 |                         <label class="form-check-label" for="flexCheckDefault">
32 |                           Accept our <a href="">Terms And Conditions</a>
33 |                         </label>
34 |                       </div>
35 |                       <input class="btn btn-primary" type="submit" value="Register">
36 |                 </form>
37 |             </div>
38 |             <div class="col-md-6">
39 |                 <img class="img-fluid" src="images/signup.png" alt="">
40 |             </div>
41 |         </div>
42 |     </section>
43 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
44 |   </body>
45 | </html>


--------------------------------------------------------------------------------
/grid-card.html:
--------------------------------------------------------------------------------
 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>Bootstrap demo</title>
 7 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 8 |   </head>
 9 |   <body>
10 |     <h1>Hello, world!</h1>
11 |     <section class="container">
12 |         <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gx-2 gy-4">
13 |             <div class="col">
14 |               <div class="card">
15 |                 <img src="images/bags/bag-1.png" class="card-img-top" alt="...">
16 |                 <div class="card-body">
17 |                   <h5 class="card-title">Card title</h5>
18 |                   <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
19 |                 </div>
20 |               </div>
21 |             </div>
22 |             <div class="col">
23 |               <div class="card">
24 |                 <img src="images/bags/bag-2.png" class="card-img-top" alt="...">
25 |                 <div class="card-body">
26 |                   <h5 class="card-title">Card title</h5>
27 |                   <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
28 |                 </div>
29 |               </div>
30 |             </div>
31 |             <div class="col">
32 |               <div class="card">
33 |                 <img src="images/bags/bag-4.png" class="card-img-top" alt="...">
34 |                 <div class="card-body">
35 |                   <h5 class="card-title">Card title</h5>
36 |                   <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
37 |                 </div>
38 |               </div>
39 |             </div>
40 |             <div class="col">
41 |               <div class="card">
42 |                 <img src="images/bags/bag-3.png" class="card-img-top" alt="...">
43 |                 <div class="card-body">
44 |                   <h5 class="card-title">Card title</h5>
45 |                   <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
46 |                 </div>
47 |               </div>
48 |             </div>
49 |           </div>
50 |     </section>
51 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
52 |   </body>
53 | </html>


--------------------------------------------------------------------------------
/responsive.html:
--------------------------------------------------------------------------------
 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>Bootstrap demo</title>
 7 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 8 |   </head>
 9 |   <body>
10 |     <h1>Responsive Bootstrap!</h1>
11 |     <div class="container">
12 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quibusdam labore quas. Perferendis, suscipit. Culpa, maiores dolorem. Eligendi ex nulla adipisci sint laborum tempore consequuntur, repudiandae corrupti blanditiis molestiae quia perferendis vitae nam eveniet officia voluptatum numquam accusantium! Sed totam in incidunt facere dolorum doloremque. Distinctio quidem molestiae fugiat dicta!
13 |     </div>
14 |     <div class="container-fluid bg-info">
15 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt omnis voluptatibus tempore autem vero vitae unde repudiandae a. Nulla perspiciatis rem, ullam consequatur corrupti quia autem quas modi ipsam praesentium sint nesciunt facilis cum repudiandae porro numquam vitae, minima deserunt, ratione fuga quis dicta consectetur maxime atque! Dolor, quod aspernatur.
16 |     </div>
17 | 
18 |     <!-- bootstrap columns -->
19 |     <div class="container">
20 |         <div class="row">
21 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
22 |                 <h2>First Column</h2>
23 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, nostrum commodi tempore corrupti nesciunt facilis tempora debitis fugit quae cum eos labore quod quisquam unde voluptates accusamus explicabo soluta necessitatibus voluptatibus, rem nemo possimus sapiente. Iusto consequuntur fugiat debitis quae officiis repellendus placeat et atque dolor. Pariatur sapiente sed voluptas.</p>
24 |             </div>
25 |             <div class="col">
26 |                 <h2>Second Column</h2>
27 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quae modi possimus? Sequi itaque quasi a, veritatis perspiciatis aliquid blanditiis? Reiciendis incidunt quibusdam delectus laudantium quasi et ad a repellendus eum veniam voluptatem accusantium nisi amet, dolorum aspernatur dolorem vitae unde! Labore tenetur dolorem minus! Ipsa nulla sed quos sapiente?</p>
28 |             </div>
29 |             <div class="col">
30 |                 <h2>Third Column</h2>
31 |                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo neque possimus ipsam qui. Consectetur quidem ipsum dolorem eligendi numquam, vero suscipit nam rerum corporis sequi sint? Saepe voluptatibus aut numquam placeat fugit quos, porro suscipit impedit minus, alias id nesciunt harum illo. Voluptas, dolor quae. Reiciendis sapiente numquam eveniet quae.</p>
32 |             </div>
33 |             <div class="col">
34 |                 <h2>Fourth Column</h2>
35 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, aperiam. Fuga cum minima cupiditate facere, placeat nobis possimus beatae dolorem earum. Nostrum illum aspernatur voluptate beatae soluta cum illo accusantium deserunt culpa libero consectetur dolorum ut aliquam similique quia nemo suscipit repellendus, tempore dolore! Eos placeat mollitia explicabo quas asperiores?</p>
36 |             </div>
37 |         </div>
38 |     </div>
39 | 
40 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
41 |   </body>
42 | </html>


--------------------------------------------------------------------------------
/jackets.html:
--------------------------------------------------------------------------------
 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>Bootstrap Jackets</title>
 7 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 8 |   </head>
 9 |   <body>
10 |     <section>
11 |         <h2>Buy My Jackets</h2>
12 |         <!-- .container>.row>.col-md-4.col-sm-6.col-12*7>img.img-fluid[src="images/jackets/jacket-$.png"]+h4{Jacket-$}+p>lorem -->
13 |         <div class="container">
14 |             <div class="row">
15 |                 <div class="col-md-4 col-sm-6 col-12">
16 |                     <img src="images/jackets/jacket-1.png" alt="" class="img-fluid">
17 |                     <h4>Jacket-1</h4>
18 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam labore fuga ab amet saepe doloremque minus ullam necessitatibus consequatur deserunt! Alias in nam sint maxime eum neque nostrum fuga tempora.</p>
19 |                 </div>
20 |                 <div class="col-md-4 col-sm-6 col-12">
21 |                     <img src="images/jackets/jacket-2.png" alt="" class="img-fluid">
22 |                     <h4>Jacket-2</h4>
23 |                     <p>Reiciendis odit quos dolorum ipsum. Facilis consequuntur architecto repudiandae similique, ratione ex itaque quasi. Fuga debitis et tempora. Ratione illum fuga atque cumque, qui incidunt rem voluptatibus quos perspiciatis ab?</p>
24 |                 </div>
25 |                 <div class="col-md-4 col-sm-6 col-12">
26 |                     <img src="images/jackets/jacket-3.png" alt="" class="img-fluid">
27 |                     <h4>Jacket-3</h4>
28 |                     <p>Dolorem cumque aperiam excepturi ipsum quisquam ea laborum corrupti rem nulla repudiandae nemo dolores dolor, illo reiciendis sunt saepe, magni consequuntur voluptatem earum. Veritatis ea commodi soluta magnam nobis voluptatum.</p>
29 |                 </div>
30 |                 <div class="col-md-4 col-sm-6 col-12">
31 |                     <img src="images/jackets/jacket-4.png" alt="" class="img-fluid">
32 |                     <h4>Jacket-4</h4>
33 |                     <p>Fugit, fugiat assumenda. Laboriosam cumque hic, fuga facilis voluptate vel reiciendis voluptatem, consectetur nisi animi sequi, suscipit totam ab nulla autem odio soluta. Reprehenderit vero placeat maxime quidem officia soluta!</p>
34 |                 </div>
35 |                 <div class="col-md-4 col-sm-6 col-12">
36 |                     <img src="images/jackets/jacket-5.png" alt="" class="img-fluid">
37 |                     <h4>Jacket-5</h4>
38 |                     <p>Animi quibusdam incidunt, dolor nostrum similique inventore dolorem eius aliquam fuga alias corporis impedit consequatur minus nemo in exercitationem ipsa, tenetur iste ipsum rerum. Commodi corrupti deserunt dignissimos tempora molestias.</p>
39 |                 </div>
40 |                 <div class="col-md-4 col-sm-6 col-12">
41 |                     <img src="images/jackets/jacket-6.png" alt="" class="img-fluid">
42 |                     <h4>Jacket-6</h4>
43 |                     <p>Consequatur maxime tempore, et numquam nemo voluptatum cum exercitationem id ipsam repellendus quam culpa quo quis odit beatae saepe iure eligendi perspiciatis labore consequuntur veritatis ad optio nostrum. Accusamus, quos.</p>
44 |                 </div>
45 |                 <div class="col-md-4 col-sm-6 col-12">
46 |                     <img src="images/jackets/jacket-7.png" alt="" class="img-fluid">
47 |                     <h4>Jacket-7</h4>
48 |                     <p>Illum pariatur doloremque eum a nemo aspernatur consequuntur voluptatibus. Ipsa consectetur excepturi et itaque minima. Maiores quas alias eveniet, porro velit tempore maxime architecto temporibus cupiditate, aperiam voluptatum delectus earum.</p>
49 |                 </div>
50 |             </div>
51 |         </div>
52 |     </section>
53 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/bags.html:
--------------------------------------------------------------------------------
 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>Bootstrap Bags</title>
 7 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 8 |   </head>
 9 |   <body>
10 |     <h1>Responsive Bags!</h1>
11 |     <section>
12 |         <h2>Buy bags from me</h2>
13 |         <div class="container">
14 |             <div class="row">
15 |                 <!-- .col-md-4.col-sm-6.col-12*7>img.img-fluid[src="images/bags/bag-$.png"]+h3{Bag - $}+p>lorem -->
16 |                 <div class="col-md-4 col-sm-6 col-12">
17 |                     <img src="images/bags/bag-1.png" alt="" class="img-fluid">
18 |                     <h3>Bag - 1</h3>
19 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, repellendus maiores! Nemo consectetur eligendi molestiae ut expedita laborum, dicta animi ipsam doloremque cupiditate, provident consequuntur aliquid tenetur totam, quo eius!</p>
20 |                 </div>
21 |                 <div class="col-md-4 col-sm-6 col-12">
22 |                     <img src="images/bags/bag-2.png" alt="" class="img-fluid">
23 |                     <h3>Bag - 2</h3>
24 |                     <p>Veritatis, earum. Beatae recusandae non ut, obcaecati explicabo excepturi consequuntur? Accusantium praesentium, inventore tempore nobis eos qui vel fugiat ipsa, possimus quasi autem officia quibusdam itaque quis impedit iste voluptas?</p>
25 |                 </div>
26 |                 <div class="col-md-4 col-sm-6 col-12">
27 |                     <img src="images/bags/bag-3.png" alt="" class="img-fluid">
28 |                     <h3>Bag - 3</h3>
29 |                     <p>Omnis commodi et, earum repudiandae autem dolorum consectetur aliquid culpa reiciendis nemo dignissimos quia nisi unde dolores vero ipsa porro assumenda blanditiis perferendis soluta velit eum. Soluta consectetur voluptates architecto?</p>
30 |                 </div>
31 |                 <div class="col-md-4 col-sm-6 col-12">
32 |                     <img src="images/bags/bag-4.png" alt="" class="img-fluid">
33 |                     <h3>Bag - 4</h3>
34 |                     <p>Doloremque nobis iste laboriosam nemo sequi nam repellendus aut? Fugit consequuntur modi repudiandae, iste nisi cum repellendus odit tempore molestias laboriosam suscipit dignissimos saepe non debitis, nostrum perferendis nam veniam.</p>
35 |                 </div>
36 |                 <div class="col-md-4 col-sm-6 col-12">
37 |                     <img src="images/bags/bag-5.png" alt="" class="img-fluid">
38 |                     <h3>Bag - 5</h3>
39 |                     <p>Iste obcaecati eligendi impedit cumque vel voluptates ducimus nemo rem officiis laborum magni optio distinctio eius eum necessitatibus consequuntur fuga aliquid doloribus enim veniam, cum ad fugiat pariatur? Veritatis, obcaecati.</p>
40 |                 </div>
41 |                 <div class="col-md-4 col-sm-6 col-12">
42 |                     <img src="images/bags/bag-6.png" alt="" class="img-fluid">
43 |                     <h3>Bag - 6</h3>
44 |                     <p>Est illum reiciendis corporis laborum tenetur architecto expedita a veniam ipsa facilis nulla nihil minus, cumque accusantium aut beatae. Quidem itaque explicabo ducimus repudiandae qui architecto reprehenderit delectus aliquam odio.</p>
45 |                 </div>
46 |                 <div class="col-md-4 col-sm-6 col-12">
47 |                     <img src="images/bags/bag-7.png" alt="" class="img-fluid">
48 |                     <h3>Bag - 7</h3>
49 |                     <p>Vitae inventore asperiores velit, repellat culpa quod exercitationem impedit reprehenderit soluta rem excepturi molestiae, eveniet illo, odio fuga ad quo quaerat? Nostrum impedit unde magni veritatis in eveniet rerum inventore.</p>
50 |                 </div>
51 |             </div>
52 |         </div>
53 |     </section>
54 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/players.html:
--------------------------------------------------------------------------------
 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>Bootstrap Players</title>
 7 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 8 |   </head>
 9 |   <body>
10 |     <h1>Players!</h1>
11 |     <div class="container">
12 |         <div class="row">
13 |             <!-- .col-12.col-sm-6.col-md-4.col-lg-3*12>img.img-fluid[src="images/players/player-$.png"]+h2{Player-$}+p>lorem -->
14 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
15 |                 <img src="images/players/player-1.png" alt="" class="img-fluid">
16 |                 <h2>Player-1</h2>
17 |                 <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic odit corrupti similique veritatis at earum, accusantium est, officia quos vitae in optio natus veniam voluptatum id doloremque? Quae, esse ullam.</p>
18 |             </div>
19 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
20 |                 <img src="images/players/player-2.png" alt="" class="img-fluid">
21 |                 <h2>Player-2</h2>
22 |                 <p>Sint natus magni sit animi hic ducimus quasi perspiciatis! Tempore odio minima officia quod mollitia veritatis dolores laborum. Modi placeat officiis aspernatur ullam nemo natus neque quidem repellat laudantium adipisci!</p>
23 |             </div>
24 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
25 |                 <img src="images/players/player-3.png" alt="" class="img-fluid">
26 |                 <h2>Player-3</h2>
27 |                 <p>Impedit sunt repudiandae placeat mollitia ex distinctio iusto optio assumenda maxime. Officiis, consequatur corrupti sit voluptatum molestias aut. Harum adipisci dolorum delectus, tenetur quibusdam error culpa tempora nostrum odio corporis.</p>
28 |             </div>
29 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
30 |                 <img src="images/players/player-4.png" alt="" class="img-fluid">
31 |                 <h2>Player-4</h2>
32 |                 <p>Praesentium eligendi accusantium sapiente soluta hic, aut consequatur quo reprehenderit incidunt, nulla consectetur quia qui tempora minus. Architecto quis veniam atque saepe non, similique totam sit consectetur nesciunt quae voluptate.</p>
33 |             </div>
34 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
35 |                 <img src="images/players/player-5.png" alt="" class="img-fluid">
36 |                 <h2>Player-5</h2>
37 |                 <p>Velit fugit facere cum voluptate dolorem, accusamus adipisci repudiandae ex corporis mollitia delectus iure, fuga qui, rerum saepe sit hic tenetur quam necessitatibus? Eius recusandae repellendus veniam, nemo aliquam deleniti.</p>
38 |             </div>
39 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
40 |                 <img src="images/players/player-6.png" alt="" class="img-fluid">
41 |                 <h2>Player-6</h2>
42 |                 <p>Saepe esse fugit odit perferendis nobis omnis doloribus praesentium harum, illo, eaque modi ratione, provident sint numquam tempore. Omnis optio perferendis, similique quos iusto cum quo sit veniam voluptates excepturi.</p>
43 |             </div>
44 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
45 |                 <img src="images/players/player-7.png" alt="" class="img-fluid">
46 |                 <h2>Player-7</h2>
47 |                 <p>Saepe officia quas, quia ullam aperiam a eos nostrum rerum est quos sequi facere adipisci sed debitis accusamus perspiciatis! Vitae veniam illum hic tempora molestias voluptas praesentium. Nesciunt, veritatis vero.</p>
48 |             </div>
49 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
50 |                 <img src="images/players/player-8.png" alt="" class="img-fluid">
51 |                 <h2>Player-8</h2>
52 |                 <p>Eaque a sequi inventore quia, tempora nemo perspiciatis ratione sapiente velit voluptatibus, provident id. Pariatur illo quis dolor sunt, dicta voluptate illum quisquam. Autem corrupti quis nisi facere repudiandae consectetur!</p>
53 |             </div>
54 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
55 |                 <img src="images/players/player-9.png" alt="" class="img-fluid">
56 |                 <h2>Player-9</h2>
57 |                 <p>Eius ipsam unde animi magni eos veniam earum harum aut ipsa voluptatum, delectus odio laboriosam, et enim voluptate? Sed ducimus delectus voluptate quidem accusantium cupiditate qui doloremque adipisci eaque atque.</p>
58 |             </div>
59 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
60 |                 <img src="images/players/player-10.png" alt="" class="img-fluid">
61 |                 <h2>Player-10</h2>
62 |                 <p>Velit placeat quas dolores, facilis eius quia et. Mollitia quas a placeat, eveniet laboriosam rem quae fuga alias debitis obcaecati voluptatem, quaerat quod blanditiis ad explicabo ab amet cumque id?</p>
63 |             </div>
64 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
65 |                 <img src="images/players/player-11.png" alt="" class="img-fluid">
66 |                 <h2>Player-11</h2>
67 |                 <p>Odio magni eum, ipsum optio maxime architecto exercitationem illo animi. Quibusdam amet necessitatibus modi! Tenetur sunt maxime in labore harum repellat qui autem nihil tempora temporibus, deleniti consequatur, sit odio.</p>
68 |             </div>
69 |             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
70 |                 <img src="images/players/player-12.png" alt="" class="img-fluid">
71 |                 <h2>Player-12</h2>
72 |                 <p>Quam delectus explicabo omnis at neque maxime cumque veritatis iste aut consequatur voluptates et, blanditiis tempore similique ducimus magni nulla labore animi mollitia, nemo autem rem. Sint hic nesciunt debitis?</p>
73 |             </div>
74 | 
75 |         </div>
76 |     </div>
77 | 
78 | 
79 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
80 |   </body>
81 | </html>


--------------------------------------------------------------------------------