├── images
    ├── collage
    │   ├── bottle.jpg
    │   ├── cactus.jpg
    │   ├── coffee.jpg
    │   ├── collage.PNG
    │   ├── honey.jpg
    │   ├── lamp.jpg
    │   ├── lens.jpg
    │   ├── stool.jpg
    │   ├── sunglass.jpg
    │   └── watch.jpg
    └── vacation
    │   ├── beach.png
    │   ├── boat.png
    │   ├── coconut.png
    │   ├── collage.png
    │   ├── sand.jpg
    │   └── sunset.png
├── index.html
├── jaan.js
├── pseudo-element.html
└── vacation.html


/images/collage/bottle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/bottle.jpg


--------------------------------------------------------------------------------
/images/collage/cactus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/cactus.jpg


--------------------------------------------------------------------------------
/images/collage/coffee.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/coffee.jpg


--------------------------------------------------------------------------------
/images/collage/collage.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/collage.PNG


--------------------------------------------------------------------------------
/images/collage/honey.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/honey.jpg


--------------------------------------------------------------------------------
/images/collage/lamp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/lamp.jpg


--------------------------------------------------------------------------------
/images/collage/lens.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/lens.jpg


--------------------------------------------------------------------------------
/images/collage/stool.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/stool.jpg


--------------------------------------------------------------------------------
/images/collage/sunglass.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/sunglass.jpg


--------------------------------------------------------------------------------
/images/collage/watch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/collage/watch.jpg


--------------------------------------------------------------------------------
/images/vacation/beach.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/vacation/beach.png


--------------------------------------------------------------------------------
/images/vacation/boat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/vacation/boat.png


--------------------------------------------------------------------------------
/images/vacation/coconut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/vacation/coconut.png


--------------------------------------------------------------------------------
/images/vacation/collage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/vacation/collage.png


--------------------------------------------------------------------------------
/images/vacation/sand.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/vacation/sand.jpg


--------------------------------------------------------------------------------
/images/vacation/sunset.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/b4-bootstrap-layout/c226824248faf41ce47bcddba013421ba7f84393/images/vacation/sunset.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>collage</title>
 9 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
10 |         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
11 | </head>
12 | 
13 | <body>
14 |     <div class="container">
15 |         <div class="row">
16 |             <div class="col-4">
17 |                 <div class="row mb-3">
18 |                     <img class="img-fluid" src="images/collage/bottle.jpg" alt="">
19 |                 </div>
20 |                 <div class="row">
21 |                     <img src="images/collage/stool.jpg" alt="">
22 |                 </div>
23 |             </div>
24 |             <!-- middle column -->
25 |             <div class="col-4">
26 |                 <div class="row mb-3">
27 |                     <img class="img-fluid" src="images/collage/coffee.jpg" alt="">
28 |                 </div>
29 |                 <div class="row mb-3">
30 |                     <img src="images/collage/lamp.jpg" alt="" class="img-fluid">
31 |                 </div>
32 |                 <div class="row mb-3">
33 |                     <div class="col-6">
34 |                         <img src="images/collage/watch.jpg" alt="" class="img-fluid">
35 |                     </div>
36 |                     <div class="col-6">
37 |                         <img src="images/collage/honey.jpg" alt="" class="img-fluid">
38 |                     </div>
39 |                 </div>
40 |             </div>
41 |             <!-- last column -->
42 |             <div class="col-4">
43 |                 <div class="row mb-3">
44 |                     <img class="img-fluid" src="images/collage/cactus.jpg" alt="">
45 |                 </div>
46 |                 <div class="row mb-3">
47 |                     <img class="img-fluid" src="images/collage/sunglass.jpg" alt="">
48 |                 </div>
49 |                 <div class="row mb-3">
50 |                     <img class="img-fluid" src="images/collage/lens.jpg" alt="">
51 |                 </div>
52 |             </div>
53 |         </div>
54 |     </div>
55 | </body>
56 | 
57 | </html>


--------------------------------------------------------------------------------
/jaan.js:
--------------------------------------------------------------------------------
1 | console.log(3);
2 | console.log(77);
3 | console.log(177);


--------------------------------------------------------------------------------
/pseudo-element.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Pseudo pseudo vai bon</title>
 9 |     <style>
10 |         h1::before {
11 |             content: 'Hello ';
12 |             color: lime;
13 |         }
14 | 
15 |         h1::after {
16 |             content: ' gelo';
17 |             color: limegreen;
18 |         }
19 | 
20 |         blockquote::before {
21 |             content: open-quote;
22 |             color: magenta;
23 |             font-size: 1.5em;
24 |         }
25 | 
26 |         blockquote::after {
27 |             content: close-quote;
28 |             color: magenta;
29 |             font-size: 1.5em;
30 |         }
31 | 
32 |         .section-title {
33 |             display: inline-block;
34 |         }
35 | 
36 |         .section-title::after,
37 |         .section-title:hover::before {
38 |             content: '';
39 |             display: block;
40 |             background-color: magenta;
41 |             height: 2px;
42 |             width: 100%;
43 |         }
44 |     </style>
45 | </head>
46 | 
47 | <body>
48 |     <h1>Having fun with Pseudo pseudo vai bon</h1>
49 |     <h1>Having fun with bondu bandobi</h1>
50 |     <section>
51 |         <h2 class="section-title">Best Quotes</h2>
52 |         <blockquote>Patience, persistence and perspiration make an unbeatable combination for success</blockquote>
53 |         <blockquote>Desire is the starting point of all achievement, not a hope, not a wish, but a keen pulsating desire
54 |             which transcends everything</blockquote>
55 |         <blockquote>Strength and growth come only through continuous effort and struggle</blockquote>
56 |     </section>
57 |     <section>
58 |         <p>Name* <input type="text" placeholder="Your name"></p>
59 |     </section>
60 | </body>
61 | 
62 | </html>


--------------------------------------------------------------------------------
/vacation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Document</title>
 9 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
10 |         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
11 |     <style>
12 |         .first-image img {
13 |             height: 500px;
14 |         }
15 | 
16 |         .side-collage img {
17 |             height: 400px;
18 |         }
19 | 
20 | 
21 |         .bottom-image img {
22 |             height: 100px;
23 |         }
24 |     </style>
25 | </head>
26 | 
27 | <body>
28 |     <div class="container">
29 |         <div class="row g-0">
30 |             <div class="col-4 first-image">
31 |                 <img src="images/vacation/sunset.png" alt="" class="img-fluid">
32 |             </div>
33 |             <div class="col-8">
34 |                 <div class="row g-0 side-collage">
35 |                     <div class="col-4">
36 |                         <img src="images/vacation/boat.png" alt="" class="img-fluid">
37 |                     </div>
38 |                     <div class="col-4">
39 |                         <img src="images/vacation/beach.png" alt="" class="img-fluid">
40 |                     </div>
41 |                     <div class="col-4">
42 |                         <img src="images/vacation/coconut.png" alt="" class="img-fluid">
43 |                     </div>
44 |                 </div>
45 |                 <div class="row g-0 bottom-image">
46 |                     <img src="images/vacation/sand.jpg" alt="" class="img-fluid">
47 |                 </div>
48 |             </div>
49 |         </div>
50 |     </div>
51 | </body>
52 | 
53 | </html>


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