forked from Sushmashreeps/Front-end-Full-Stack-Development
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathImage Gallery.html
127 lines (123 loc) · 7.55 KB
/
Image Gallery.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
<!doctype html>
<html lang="en">
<head>
<title>Grid Image</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<style>
img {
height: 100%;
}
.wrapper {
max-width: 800px;
}
</style>
<body class="bg-light">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photography Gallery</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.gallery {
margin-top: 20px;
}
.card {
margin-bottom: 20px;
}
.card-img-top {
height: 200px;
object-fit: cover;
}
.display-1{
font-size: 2.5rem;
font-weight: 600;
font-family: sans-serif;
}
.heading{
font-size: 2.5rem;
font-weight: 600;
font-family: sans-serif;
color: #000000;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>
</head>
<body>
<div class="container gallery">
<h1 class="heading">Image Gallery</h1>
<div class="row">
<!-- Image 1 -->
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class=" d-block w-100 object-fit-fill" src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">
<div class="card-body">
<h1 class="display-1">Majestic</h1>
<p class="lead">The word “majestic” adds a sense of grandeur and incredible beauty to the natural scenery described in the story. It adds depth to the scene as characters are drawn deeper into the natural world and encounter new and unexpected challenges along the way. It can help to create a sense of emotional resonance in the reader, drawing them into the story.</p>
</div>
</div>
</div>
<!-- Image 2 -->
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class=" d-block w-100 object-fit-fill" src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1275&q=80" alt="">
<div class="card-body">
<h1 class="display-1">Serene</h1>
<p class="lead">The word “serene” adds a sense of peacefulness and calmness, leading the reader to imagine a scene that is both visually stunning and emotionally tranquil. It can create contrast with the action in the story. For example, if there is a violent event occurring, it can emphasize the disruption to the peaceful surroundings and heighten the drama of the scene.</p>
</div>
</div>
</div>
<!-- Image 3 -->
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
<div class="card-body">
<h1 class="display-1">Vibrant</h1>
<p class="lead">The word “vibrant” conveys a sense of energy, highlighting the bright and colorful aspects of the natural world. It can communicate urgency or excitement, as the vibrant beauty of nature can inspire characters to take action or make important decisions. It might also contrast elements such as darkness or gloom, emphasizing the positive qualities of nature instead.</p>
</div>
</div>
</div>
<!-- Image 4 -->
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-1470770903676-69b98201ea1c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
<div class="card-body">
<h1 class="display-1">Pristine</h1>
<p class="lead">The word “pristine” indicates that the environment being described is in its original state, free from human intervention or contamination. It can set the scene for the protection of this undisturbed environment or the consequences of its destruction. It may also serve as a contrast to the introduction of human influence, highlighting the fragility of the natural world.</p>
</div>
</div>
</div>
<!-- Image 5 -->
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-1552083375-1447ce886485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
<div class="card-body">
<h1 class="display-1">Enchanting</h1>
<p class="lead">The word “enchanting” implies that the beauty of nature is captivating and holds a mysterious quality that draws the attention of the reader. It can move the plot forward by suggesting that there may be more to the natural setting than meets the eye. This can create a sense of anticipation, as the reader wonders what secrets or surprises may be waiting for them ahead.</p>
</div>
</div>
</div>
<!-- Image 6 -->
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="d-block w-100 object-fit-cover" src="https://images.unsplash.com/photo-1565118531796-763e5082d113?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
<div class="card-body">
<h1 class="display-1">Idyllic</h1>
<p class="lead">The word “idyllic” can help set the tone and mood of a scene, making the reader feel more immersed in the story. A character experiencing an idyllic moment in nature may later have to confront challenges that disrupt that peace and tranquility, providing a contrasting backdrop against which the story’s conflict can unfold.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>