-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
241 lines (191 loc) · 10.2 KB
/
index.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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<body>
<!-- this is navbar section -->
<nav class="navbar navbar-light bg-white navbar-expand-lg">
<div
class="container px-md-5 mx-md-5 d-flex align-item-center ">
<img src="image/logo1.png" alt="">
<ul class="navbar-nav d-none d-md-flex align-items-lg-center gap-4 fs-5">
<li class="nav-item">Home</li>
<li class="nav-item">About Us</li>
<li class="nav-item">Portfolio</li>
<li class="nav-item">Prices</li>
<li class="nav-item">Contact Us</li>
</ul>
</div>
<div>
<button type="submit" class="button1">Get Started</button>
</div>
</nav>
<!-- this is hero sectionn -->
<div class="container mx-auto">
<div class="row gap-5 gap-md-0 py-5">
<div class="col-md-6 col-12">
<h1 class="pt-5 fw-bold" >
CAPTURING MOMENTS
<span>IN</span> TIME.
</h1>
<p class="fs-4 pt-4">
A Glimpse into the Past, a Snapshot of the Present.
</p>
<div class="d-flex gap-5 pt-4">
<button id="button2" class="btn btn-lg rounded-5 ">Get Started</button>
</div>
</div>
<div class="col-md-6 col-12">
<img
class="w-100 h-100 object-fit-cover"
src="./image/pic1.png"
alt=""
/>
</div>
</div>
</div>
<!-- this is About Us sectionn -->
<div style="background-color: rgb(252, 245, 245) ;"class="container my-5 p-5 rounded">
<div class="gap-5 d-flex justify-content-between">
<div class="responsive d-flex flex-fill gap-4 gap-md-3 align-items-center">
<img src="image/picg3.png" alt="" >
<div class="gallery d-flex flex-column gap-4 gap-md-3" >
<img src="image/picg4.png" alt="" class="img1">
<img src="image/picg5.png" alt="" class="img2">
</div>
</div>
<div class="flex-fill">
<p style="font-family: Quicksand;" class="fs-5"><span style="border: 1 px solid rgba(138, 71, 246, 1); width: 19px; height : 0px;"align-item-center></span>About Us</p>
<h1 class="fw-bold" style="font-family: Nexa;" >We Are Very <span>Skilled</span> In <span>Photography</span></h1>
<p style=" font-family: Quicksand; width: 470px;">Hi, I'm Angelique and photography is my passion! My father passed on the “photographer virus” to me. From analogue to digital. I have taken a number of courses and workshops and, above all, practiced a lot! My children are now used to modeling. Perhaps that is where the penchant for taking photos of children comes from. The pure appearance and enthusiasm of children. It's always fun!</p>
<p style="font-family: Quicksand; width: 470px; ">“Photography is the art of frozen time… the ability to store emotions and feelings within a frame.”</p>
<button type="submit" class="button1" style="font-family: Quicksand;">See Our Portfolio</button>
</div>
</div>
</div>
<!-- this is portfolio sectionn -->
<section id="portfolio" class="container py-5">
<div class="container text-center">
<h2 class="fw-bold fs-1">Our <span style="color: rgba(138, 71, 246, 1);">Portfolio</span></h2>
</div>
<div style="font-family: Quicksand; font-weight: 500;" class="btn-group mt-3 d-flex align-content-center justify-items-between " role="group">
<button type="button" class="btn justify-content-between align-content-around" data-filter="all">All</button>
<button type="button" style="text-decoration: underline; color: rgba(138, 71, 246, 1);" class="btn ">Childrens</button>
<button type="button" class="btn " data-filter="portraits">Portraits</button>
<button type="button" class="btn " data-filter="family">Family</button>
<button type="button" class="btn " data-filter="other">Other Photography</button>
</div>
<!-- Portfolio gallery using CSS Grid -->
<div class="portfolio-gallery mt-4">
<div class="gallery-item filter childrens">
<img src="image/1.png" alt="Childrens" class="img-fluid rounded">
</div>
<div class="gallery-item filter portraits">
<img src="image/4.png" alt="Portraits" class="img-fluid rounded">
</div>
<div class="gallery-item filter childrens">
<img src="image/8.png" alt="Childrens" class="img-fluid rounded">
</div>
<div class="gallery-item filter family">
<img src="image/2.png" alt="Family" class="img-fluid rounded">
</div>
<div class="gallery-item filter portraits">
<img src="image/7.png" alt="Portraits" class="img-fluid rounded">
</div>
<div class="gallery-item filter family">
<img src="image/10.png" alt="Family" class="img-fluid rounded">
</div>
<div class="gallery-item filter childrens">
<img src="image/3.png" alt="Childrens" class="img-fluid rounded">
</div>
<div class="gallery-item filter other">
<img src="image/5.png" alt="Other Photography" class="img-fluid rounded">
</div>
<div class="gallery-item filter other">
<img src="image/4.png" alt="Other Photography" class="img-fluid rounded">
</div>
</div>
</section>
<!-- this is price sectionn -->
<div class="container text-center">
<h2 class="fw-bold fs-1">Prices</h2>
</div>
<div style="background-color: #ffffff;" class="container d-md-flex py-4 mt-5 pt-5 justify-content-between align-content-between gap-3">
<div class="card container" style="width: 357px ; height: 417px; padding-top: 20px; box-shadow: 0px 0px 18px 10px #00000026;">
<div class="card-body text-center">
<h5 class="card-title fw-bold">Children's photography/family/pregnancy/loveshoot</h5>
<br>
<p class="card-text fs-6" style="font-family: Quicksand;">The price for this is €50.00 (incl. VAT) and takes approximately one hour.For that you get 10/15 edited digital files in large format.</p>
<br>
<h2 class="fw-bold fs-1">€50.00</h2>
<button type="submit" class="button1" style="font-family: Quicksand;">Get Purchase</button>
</div>
</div>
<div class="card container" style="color: #ffffff; background-color: #222222; width: 357px ; height: 417px; padding-top: 20px; box-shadow: 0px 0px 18px 10px #f7f5f526;">
<div class="card-body text-center">
<h5 class="card-title fw-bold">Lifestyle Photography</h5><br><br>
<p class="card-text fs-6" style="font-family: Quicksand;">Lifestyle photography takes place at your home in a relaxed setting. The price for this depends on how long we take. Inquire about the possibilities.</p><br><br>
<h2 class="fw-bold fs-1">€50.00</h2>
<button type="submit" class="button2" style="font-family: Quicksand;">Get Purchase</button>
</div>
</div>
<div class="card container" style="width: 357px ; height: 417px; line-height:px ; padding-top: 20px; box-shadow: 0px 0px 20px 10px #00000026; outline: none">
<div class="card-body text-center">
<h5 class="card-title fw-bold">Potrait Photography</h5><br><br>
<p class="card-text fs-6" style="font-family: Quicksand;">Portrait photography and girlfriend shoots are also possible.</p><br><br><br>
<h2 class="fw-bold fs-1">€50.00</h2><br>
<button type="submit" class="button1" style="font-family: Quicksand;">Get Purchase</button>
</div>
</div>
</div>
<!-- Testimonials sectionn -->
<div style="background-color: rgb(252, 245, 245) ;" class="container my-5 p-5 rounded">
<div class="gap-5 d-flex justify-content-between">
<div class="flex-fill">
<p style="font-family: Quicksand;" class="fs-5"><i class="bi bi-arrow-right">Testimonials</i></p>
<h1 class="fw-bold fs-1" style="font-family: Nexa;" >What Our Clients Say</h1>
<p style=" font-family: Quicksand; width: 570px; font-size: 18px;">
This photography website is a true gem for anyone who appreciates artistry and storytelling through the lens. The images are awe-inspiring, and the website provides an engaging and immersive experience. With a few minor enhancements in user-friendliness and performance, it could become an even more exceptional platform for showcasing photography talent.
</p>
<div class="gap-2">
<img src="image/side1.png" alt="" style="width: 70px; height: auto; border-radius: 50%;"<p style="font-family: Quicksand; background-color: #5A5A5A; gap: 5px;"> Amane Indahnya</p>
</div>
</div>
<div class="responsive d-flex gap-4 gap-md-3 align-items-center">
</div>
<div class="responsive d-flex flex-fill gap-4 gap-md-3 align-items-center">
<img src="image/side1.png" alt="" >
</div>
</div>
</div>
<!-- footer sectiom -->
<footer class="container bg-dark py-3 mt-md-5 d-flex">
<div class="container px-md-5 mx-md-5 d-flex ">
<img src="image/foot.png" alt="">
<div class="container text-white d-flex justify-content-center align-content-center gap-4 mt-md-3 text-center ">
<h6 style="font-family: Quicksand align-item-center "; >Privacy Policy</h6>
<h6 style="font-family: Quicksand align-item-center" ;>Terms & Conditions</h6>
</div>
<div class="container d-flex gap-4 align-content-end justify-content-end">
<img style="width: 50px;;" src="image/facebook (1).svg" alt="">
<img style="width: 50px;;" src="image/instagram (1).svg" alt="">
<img style="width: 50px;;" src="image/twitter (1).svg" alt="">
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>