-
Notifications
You must be signed in to change notification settings - Fork 0
/
activity2.html
143 lines (132 loc) · 10.5 KB
/
activity2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>My Bootstrap assignment</title>
</head>
<body>
<div class="mt-3 p-5 bg-success text-white rounded">
<div class="container">
<h1>Welcome to my site</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse rem similique quia beatae odio aut atque, possimus aspernatur, commodi reprehenderit ratione debitis voluptatibus velit quae, dolorum nostrum distinctio aperiam earum vitae! Dignissimos sit eius dolores odit laudantium commodi nihil, non blanditiis est autem eligendi aut id in assumenda sed omnis ipsum earum. Dolores reiciendis corrupti consectetur iure magni ullam quaerat cum repellat, et, saepe praesentium, assumenda facilis voluptatem illum voluptatibus laborum temporibus accusamus eligendi inventore eveniet fugiat commodi qui perferendis? Est dolore porro explicabo eaque dolorem facilis officia minus ipsam?</p>
<a href="#" class="btn btn-dark">Read more</a>
</div>
</div>
<div class="container">
<div class="container mt-4">
<div class="row text-center">
<div class="col-md-4 mb-2">
<img class="img-fluid rounded border border-1 border border dark" src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386563/bridge_xglgim.jpg" alt="bridge">
<h2>This Is A Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem officiis ducimus aperiam! Voluptatem expedita tempore cumque saepe, nulla porro inventore praesentium sapiente aut illo voluptas quia nemo at ipsam soluta quidem ullam iure in odio explicabo! Dignissimos animi ad vitae doloremque pariatur nostrum, excepturi voluptatum nihil, veniam sequi dolorum? Ipsa.</p>
<button type="button" class="btn btn-warning">More</button>
</div>
<div class="col-md-4 mb-2">
<img class="img-fluid rounded border border-1 border border dark" src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386561/clear_river_iybhsu.jpg" alt="river">
<h2>This Is A Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem officiis ducimus aperiam! Voluptatem expedita tempore cumque saepe, nulla porro inventore praesentium sapiente aut illo voluptas quia nemo at ipsam soluta quidem ullam iure in odio explicabo! Dignissimos animi ad vitae doloremque pariatur nostrum, excepturi voluptatum nihil, veniam sequi dolorum? Ipsa.</p>
<button type="button" class="btn btn-danger">More</button>
</div>
<div class="col-md-4 mb-2">
<img class="img-fluid rounded border border-1 border border dark" src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386561/dry_land_mklvhw.jpg" alt="dry_land">
<h2>This Is A Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem officiis ducimus aperiam! Voluptatem expedita tempore cumque saepe, nulla porro inventore praesentium sapiente aut illo voluptas quia nemo at ipsam soluta quidem ullam iure in odio explicabo! Dignissimos animi ad vitae doloremque pariatur nostrum, excepturi voluptatum nihil, veniam sequi dolorum? Ipsa.</p>
<button type="button" class="btn btn-success">More</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="container mt-2">
<div class="row text Left">
<div class="col-md-8">
<h2>This Is A Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis ratione deleniti nostrum molestias libero modi sit aliquam explicabo placeat doloremque ea eligendi eos, expedita temporibus laborum dicta, repellat reprehenderit mollitia!</p>
<button type="button" class="btn-primary">More</button>
</div>
<div class="col-md-4">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386561/hardware_parts_nsty5q.jpg" class="img-thumbnail" alt="hardware_parts">
</div>
</div>
</div>
</div>
<div class="container">
<div class="container mt-2">
<div class="row text right">
<div class="col-md-4 p-3">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386562/Schreibtisch_pxmfge.jpg" class="img-thumbnail" alt="working_desk ">
</div>
<div class="col-md-8">
<h2>This Is A Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis ratione deleniti nostrum molestias libero modi sit aliquam explicabo placeat doloremque ea eligendi eos, expedita temporibus laborum dicta, repellat reprehenderit mollitia!</p>
<button type="button" class="btn-info">More</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386561/dark_guy_iqopsr.jpg" class="img-thumbnail" alt="dark_guy" style="width: auto;">
</div>
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386562/doppelg%C3%A4nger_kqnf5c.png" class="img-thumbnail" alt="doppelgänger" style="width: auto;">
</div>
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386561/dry_land_mklvhw.jpg" class="img-thumbnail" alt="dry_land" style="width: auto;">
</div>
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386561/empty_alley_lglzhw.jpg" class="img-thumbnail" alt="empty_alley" style="width: auto;">
</div>
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386562/gazing_ytccep.jpg" class="img-thumbnail" alt="gazing" style="width: auto;">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386562/highway_wgw19z.jpg" class="img-thumbnail" alt="highway" style="width: auto;">
</div>
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386561/lamps_qcei7i.jpg" class="img-thumbnail" alt="lamps" style="width: auto;">
</div>
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386563/pedestrian_u9ghbx.jpg" class="img-thumbnail" alt="pedestrian" style="width: auto;">
</div>
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386562/pro_golfer_exdd36.jpg" class="img-thumbnail" alt="pro_golfer" style="width: auto;">
</div>
<div class="col p-0">
<img src="https://res.cloudinary.com/dxxysm630/image/upload/v1639386562/reflection_js3zcf.jpg" class="img-thumbnail" alt="reflection" style="width: auto;">
</div>
</div>
</div>
<div class="container">
<div class="container mt-4">
<div class="row text-left">
<div class="col-md-6">
<h2>Some Additional Information</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, quod minus. Officia aliquam provident veritatis delectus, harum libero cum consequatur sit explicabo temporibus. Minima porro provident dicta modi libero rerum dolor amet accusamus maiores animi ipsum, expedita nostrum alias vel deleniti. Aliquid rem laboriosam nihil distinctio voluptas dolorem sunt alias. Commodi nesciunt ratione asperiores aspernatur voluptate vero ullam molestias, quis placeat, voluptates fugit facere expedita reprehenderit voluptatibus dolor eaque illum hic, enim veritatis! Eos repudiandae doloribus amet voluptates nobis porro dolorem possimus placeat alias velit fugiat tenetur earum officia natus, ratione eligendi consectetur corrupti officiis laborum iusto fugit. Sed, perspiciatis.</p>
</div>
<div class="col-md-6">
<h2>Some Additional Information</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, quod minus. Officia aliquam provident veritatis delectus, harum libero cum consequatur sit explicabo temporibus. Minima porro provident dicta modi libero rerum dolor amet accusamus maiores animi ipsum, expedita nostrum alias vel deleniti. Aliquid rem laboriosam nihil distinctio voluptas dolorem sunt alias. Commodi nesciunt ratione asperiores aspernatur voluptate vero ullam molestias, quis placeat, voluptates fugit facere expedita reprehenderit voluptatibus dolor eaque illum hic, enim veritatis! Eos repudiandae doloribus amet voluptates nobis porro dolorem possimus placeat alias velit fugiat tenetur earum officia natus, ratione eligendi consectetur corrupti officiis laborum iusto fugit. Sed, perspiciatis.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>