-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathabout_me.html
129 lines (110 loc) · 6.59 KB
/
about_me.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=fr>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/about_me.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>About Me</title>
</head>
<body>
<header>
<!-- NAVBAR -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark">
<!-- NAVBAR site title -->
<a class="navbar-brand" href="index.html"><img class="logo" src="logo/Waldo01.png" alt="logo"></a>
<!-- NAVBAR site title -->
<h1 class="d-none d-sm-block navbar-title">Wildo Coda</h1>
<!-- NAVBAR burger button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- NAVBAR burger button -->
<!-- NAVBAR desktop -->
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Accueil<span class="nav-separator d-none d-lg-inline-flex">|</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="galerie.html">Galerie<span class="nav-separator d-none d-lg-inline-flex">|</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about_me.html">A propos<span class="nav-separator d-none d-lg-inline-flex">|</span></a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<section>
<img src="pano.jpg" class="img-fluid" alt="Responsive image">
<div id="container-text-about-me" class="container-fluid offset-1 col-10">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6">
<h2 id="title-about-me">A propos</h2>
<hr class="my-4">
<p>Je me présente : Wildo Coda, photographe passionné indépendant et autodidacte. Cela fait maintenant 15 ans que je fais de la photographie sur un thème particulier dont vous vous êtes sans doute rendu compte : Paris.</p>
<p>Paris ? C'est la capitale française, un centre de culture, d'histoire, de la mode, de gastronomie et d'art ! Comment ne pas apprécier tout la richesse présente ?</p>
<p>Pas de photo en studio ou de sédentarité, trop peu pour moi. Je préfère vagabonder entre les murs de la Ville Lumière, à toute saison, à toute heure, selon mes envies. Sur un même cliché, notre sensibilité n'est pas pareille, selon la température, la luminosité, l'angle et beaucoup d'autres facteurs. C'est ainsi que je peux capturer les plus beaux moments et vous faire ressentir les émotions qui en découlent.</p>
<blockquote cite="https://www.posepartage.fr/photographes/citations.html">
<p><em>« La composition doit être une de nos préoccupations constantes, mais au moment de photographier elle ne peut être qu'intuitive, car nous sommes aux prises avec des instants fugitifs où les rapports sont mouvants. »</em></p>
</blockquote>
<cite>–Henri Cartier-Bresson</cite>
</div>
<div class="offset-lg-1 col-lg-5 col-sm-12 col-md-12">
<div class="photo-about">
<img src="images/contact.png" class="img-thumbnail" id="img-about" alt="photographier">
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="pr-4 pt-4 logo-footer d-flex row-flex offset-lg-4 col-lg-4 offset-md-3 col-md-6 offset-sm-1 col-sm-10" style="text-align: center; margin-top: 5px;">
<div class="pl-1 col-3">
<a style="text-decoration: none;" href="https://facebook.com" target="_blank"><img src="images/facebook2.png"></a>
</div>
<div class="col-3">
<a style="text-decoration: none;" href="https://pinterest.com" target="_blank"><img src="images/pinterest2.png"></a>
</div>
<div class="col-3">
<a style="text-decoration: none;" href="https://instragram.com" target="_blank"><img src="images/instagram2.png"></a>
</div>
<div class="col-3">
<a style="text-decoration: none;" href="https://twitter.com" target="_blank"><img src="images/twitter2.png"></a>
</div>
</div>
<div class="row p-0 m-0 justify-content-center nav-footer d-block d-md-inline-flex d-sm-col-12 col-md-12">
<p><a style="text-decoration: none; color: white;" href="index.html">Accueil</a></p>
<p><a style="text-decoration: none; color: white;" href="galerie.html">Galerie</a></p>
<p><a style="text-decoration: none; color: white;" href="about_me.html">A propos</a></p>
<p><a style="text-decoration: none; color: white;" href="contact.html">Contact</a></p>
</div>
<div class="container-fluid col-12" style="text-align: center;">
<p class="copyright">© All rights reserved. Morane/Ranucci/Yu/Castillon/Cnudde</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = 'https://assets.pinterest.com/js/pinit_main.js?0.03655070507753333';
f.parentNode.insertBefore(p, f);
}(document));
</script>
</body>
</html>