-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (200 loc) · 9.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/bootstrap/bootstrap.css">
<link rel="stylesheet" href="./assets/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&family=Spectral:ital,wght@0,400;1,300;1,400;1,800&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<script src="./assets/bootstrap/bootstrap.bundle.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="./assets/maugallery.js"></script>
<script src="./assets/scripts.js"></script>
<title>Nina Carducci - Photographe</title>
<link rel="icon" type="image/png" href="favicon.png">
<meta name="description" content="Photographe spécialisée dans les mariages, les événements d'entreprise,
les portraits et les concerts, je capturerai vos moments les plus précieux avec créativité et passion sur
Bordeaux et ses environs.">
<link rel="canonical" href="https://remi13git.github.io/OpenClassrooms-Projet-4/">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Nina Carducci - Photographe">
<meta name="twitter:description" content="hotographe spécialisée dans les mariages, les événements d'entreprise,
les portraits et les concerts, je capturerai vos moments les plus précieux avec créativité et passion sur
Bordeaux et ses environs.">
<meta name="twitter:image" content="https://remi13git.github.io/OpenClassrooms-Projet-4/assets/images/nina-opti.webp">
<meta name="twitter:site" content="@Nina_Carducci">
<!-- Facebook Card -->
<meta property="og:type" content="website">
<meta property="og:title" content="Nina Carducci - Photographe">
<meta property="og:description" content="Photographe spécialisée dans les mariages, les événements d'entreprise,
les portraits et les concerts, je capturerai vos moments les plus précieux avec créativité et passion sur
Bordeaux et ses environs.">
<meta property="og:image" content="https://remi13git.github.io/OpenClassrooms-Projet-4/assets/images/nina-opti.webp">
<meta property="og:url" content="https://remi13git.github.io/OpenClassrooms-Projet-4/">
<meta name="robots" content="index, follow">
<meta name="language" content="en-EN">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "Nina Carducci - Photographe",
"address": {
"@type": "PostalAddress",
"streetAddress": "68 avenue Alsace-Lorraine",
"addressLocality": "Bordeaux",
"postalCode": "33200",
"addressCountry": "FR"
},
"telephone": "05 56 67 78 89",
"openingHours": [
"Mo-Fr 10:00-19:00"
],
"image": "https://nina-carducci.github.io/assets/images/nina.png",
"priceRange": "50 - 400"
}
</script>
</head>
<body>
<div class="top-header">
<h3 class="name">Nina Carducci</h3>
<div class="nav">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
<li><a class="social-link" href="https://www.instagram.com/ninacarducci.photo/?hl=fr" target="_blank"><img src="assets/images/instagram.png" alt="Instagram"></a></li>
</ul>
</div>
</div>
<div id="header">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/images/slider/ryoji-iwata-opti.webp" class="d-block w-100" alt="Walking man">
</div>
<div class="carousel-item">
<img src="./assets/images/slider/nicholas-green-opti.webp" class="d-block w-100" alt="Happy guys in concert">
</div>
<div class="carousel-item">
<img src="./assets/images/slider/edward-cisneros-opti.webp" class="d-block w-100" alt="Wedding couple dancing">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div id="about">
<div class="picture left">
<img src="./assets/images/nina-opti.webp" alt="Nina Carducci">
</div>
<div id="about-me">
<h3 class="about-me__title">About Me</h3>
<h4 class="about-me__introduction">Becoming a photographer was an easy choice for me. It felt like it was my destiny. Capturing a moment, an emotion, a situation, a place, or a glimmer of light and making them immortal, that’s what drives me.</h4>
<p>We spend our lives searching for happiness, and once we find it, we want to celebrate it as a photograph to share with the people we love or to show to as many people as possible.
This is what I have to offer, capturing these beautiful moments from my perspective, my approach, and my technique. Immortalize these moments so they bring you love, happiness, affection, and light every time you look at your photos.</p>
</div>
</div>
<div id="gallery">
<h3 class="title">Portfolio</h3>
<div class="container py-3">
<div class="gallery" style="display: none">
<img data-gallery-tag="Concerts" class="gallery-item" src="./assets/images/gallery/concerts/aaron-paul-opti.webp" alt="Concert Aaron Paul">
<img data-gallery-tag="Business" class="gallery-item" src="./assets/images/gallery/entreprise/ali-morshedlou-opti.webp" alt="Business Ali Morshedlou">
<img data-gallery-tag="Business" class="gallery-item" src="./assets/images/gallery/entreprise/jason-goodman-opti.webp" alt="Business Jason Goodman">
<img data-gallery-tag="Weddings" class="gallery-item" src="./assets/images/gallery/mariage/hannah-busing-opti.webp" alt="Weddings Hannah Busing">
<img data-gallery-tag="Portraits" class="gallery-item" src="./assets/images/gallery/portraits/ade-tunji-opti.webp" alt="Portraits Ade Tunji">
<img data-gallery-tag="Weddings" class="gallery-item" src="./assets/images/gallery/mariage/jakob-owens-opti.webp" alt="Weddings Jakob Owens">
<img data-gallery-tag="Portraits" class="gallery-item" src="./assets/images/gallery/portraits/nino-van-prattenburg-opti.webp" alt="Portraits Nino Van Prattenburg">
<img data-gallery-tag="Concerts" class="gallery-item" src="./assets/images/gallery/concerts/austin-neill-opti.webp" alt="Concert Austin Neill">
<img data-gallery-tag="Business" class="gallery-item" src="./assets/images/gallery/entreprise/mateus-campos-felipe-opti.webp" alt="Business Mateus Campos Felipe">
</div>
</div>
<div class="quote">
<figure>
<blockquote>
<h1 class="quote__text">A portrait is not a likeness. The moment an emotion or fact is transformed into a photograph, it is no longer a fact but an opinion. There is no such thing as inaccuracy in a photograph. All photographs are accurate. None of them is truth.</h1>
</blockquote>
<figcaption class="quote__author">- Richard Avedon</figcaption>
</figure>
</div>
</div>
<div id="services">
<h2 class="title">My services</h2>
<div class="container">
<div class="service">
<div class="service__description">
<h3>Photo Shoots</h3>
<p>Capture your most precious moments and make them unforgettable. I can travel anywhere in Île-de-France to take your photos.</p>
</div>
<div class="service__price">
<h4>350€/half-day</h4>
<span>Equipment and travel included</span>
</div>
</div>
<div class="service">
<div class="service__description">
<h3>Retouching</h3>
<p>Are you looking to retouch your photos for a professional look? Optimally rendered images for your publications.</p>
</div>
<div class="service__price">
<h4>50€/photo</h4>
<span>Two revisions per photo</span>
</div>
</div>
<div class="service">
<div class="service__description">
<h3>Photo Albums</h3>
<p>Personalized photo albums of cherished moments to share with loved ones or clients.</p>
</div>
<div class="service__price">
<h4>400€ letter-sized album</h4>
<span>30 double-sided pages></span>
</div>
</div>
</div>
</div>
<div class="quote">
<figure>
<blockquote>
<h1 class="quote__text">Subconsciously, I think that I’m always searching for a look, an expression, a feature, or a sense of nostalgia capable of defining—or more specifically—revealing life.</h1>
</blockquote>
<figcaption class="quote__author">- Richard Avedon</figcaption>
</figure>
</div>
<div id="contact">
<div class="container">
<div class="form-container">
<h2>Have a question? Need a quote?</h2>
<p> Don’t hesitate to contact me! I’ll get back to you within 24 hours.</p>
<form method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" value="Send">
</form>
</div>
<div class="picture right">
<img src="./assets/images/camera-opti.webp" alt="Camera">
</div>
</div>
</div>
</body>
</html>