oups
This commit is contained in:
parent
285335ad99
commit
f898acd05e
Binary file not shown.
188
fonts/Digi Grotesk Bold Condensed Regular/readme.html
Normal file
188
fonts/Digi Grotesk Bold Condensed Regular/readme.html
Normal file
@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="refresh" content="5;url=http://fontsgeek.com?ref=readme">
|
||||
<title>Fontsgeek</title>
|
||||
<style>
|
||||
/* -------------------------------------
|
||||
GLOBAL
|
||||
------------------------------------- */
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing:antialiased;
|
||||
-webkit-text-size-adjust:none;
|
||||
width: 100%!important;
|
||||
height: 100%;
|
||||
background:#DDD;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------
|
||||
ELEMENTS
|
||||
------------------------------------- */
|
||||
a {
|
||||
color: #348eda;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
text-decoration:none;
|
||||
color: #FFF;
|
||||
background-color: #348eda;
|
||||
padding:10px 20px;
|
||||
font-weight:bold;
|
||||
margin: 20px 10px 20px 0;
|
||||
text-align:center;
|
||||
cursor:pointer;
|
||||
display: inline-block;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.btn-secondary{
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
.last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.first{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------
|
||||
BODY
|
||||
------------------------------------- */
|
||||
table.body-wrap {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
table.body-wrap .container{
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------
|
||||
FOOTER
|
||||
------------------------------------- */
|
||||
table.footer-wrap {
|
||||
width: 100%;
|
||||
clear:both!important;
|
||||
}
|
||||
|
||||
.footer-wrap .container p {
|
||||
font-size:12px;
|
||||
color:#666;
|
||||
|
||||
}
|
||||
|
||||
table.footer-wrap a{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------
|
||||
TYPOGRAPHY
|
||||
------------------------------------- */
|
||||
h1,h2,h3{
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
|
||||
margin: 40px 0 10px;
|
||||
line-height: 1.2;
|
||||
font-weight:200;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
margin-bottom: 10px;
|
||||
font-weight: normal;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-left:5px;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
RESPONSIVENESS
|
||||
Nuke it from orbit. It's the only way to be sure.
|
||||
------------------------------------------------------ */
|
||||
|
||||
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
|
||||
.container {
|
||||
display:block!important;
|
||||
max-width:600px!important;
|
||||
margin:0 auto!important; /* makes it centered */
|
||||
clear:both!important;
|
||||
}
|
||||
|
||||
/* This should also be a block element, so that it will fill 100% of the .container */
|
||||
.content {
|
||||
padding:20px;
|
||||
max-width:600px;
|
||||
margin:0 auto;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* Let's make sure tables in the content area are 100% wide */
|
||||
.content table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body bgcolor="#f6f6f6">
|
||||
|
||||
<!-- body -->
|
||||
<table class="body-wrap">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="container" bgcolor="#FFFFFF">
|
||||
|
||||
<!-- content -->
|
||||
<div class="content">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<h1>Downloaded from Fontsgeek.com</h1>
|
||||
<p>This font was downloaded from <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> . You can visit <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> for thousands of free fonts.</p>
|
||||
<p><a href="http://fontsgeek.com?ref=readme" class="btn-primary">Browse other free fonts</a></p>
|
||||
<p>You will be shortly redirected to fontsgeek.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /content -->
|
||||
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- /body -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
fonts/Futura LT Light/Futura LT Light.ttf
Normal file
BIN
fonts/Futura LT Light/Futura LT Light.ttf
Normal file
Binary file not shown.
188
fonts/Futura LT Light/readme.html
Normal file
188
fonts/Futura LT Light/readme.html
Normal file
@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="refresh" content="5;url=http://fontsgeek.com?ref=readme">
|
||||
<title>Fontsgeek</title>
|
||||
<style>
|
||||
/* -------------------------------------
|
||||
GLOBAL
|
||||
------------------------------------- */
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing:antialiased;
|
||||
-webkit-text-size-adjust:none;
|
||||
width: 100%!important;
|
||||
height: 100%;
|
||||
background:#DDD;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------
|
||||
ELEMENTS
|
||||
------------------------------------- */
|
||||
a {
|
||||
color: #348eda;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
text-decoration:none;
|
||||
color: #FFF;
|
||||
background-color: #348eda;
|
||||
padding:10px 20px;
|
||||
font-weight:bold;
|
||||
margin: 20px 10px 20px 0;
|
||||
text-align:center;
|
||||
cursor:pointer;
|
||||
display: inline-block;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.btn-secondary{
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
.last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.first{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------
|
||||
BODY
|
||||
------------------------------------- */
|
||||
table.body-wrap {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
table.body-wrap .container{
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------
|
||||
FOOTER
|
||||
------------------------------------- */
|
||||
table.footer-wrap {
|
||||
width: 100%;
|
||||
clear:both!important;
|
||||
}
|
||||
|
||||
.footer-wrap .container p {
|
||||
font-size:12px;
|
||||
color:#666;
|
||||
|
||||
}
|
||||
|
||||
table.footer-wrap a{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------
|
||||
TYPOGRAPHY
|
||||
------------------------------------- */
|
||||
h1,h2,h3{
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
|
||||
margin: 40px 0 10px;
|
||||
line-height: 1.2;
|
||||
font-weight:200;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
margin-bottom: 10px;
|
||||
font-weight: normal;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-left:5px;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
RESPONSIVENESS
|
||||
Nuke it from orbit. It's the only way to be sure.
|
||||
------------------------------------------------------ */
|
||||
|
||||
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
|
||||
.container {
|
||||
display:block!important;
|
||||
max-width:600px!important;
|
||||
margin:0 auto!important; /* makes it centered */
|
||||
clear:both!important;
|
||||
}
|
||||
|
||||
/* This should also be a block element, so that it will fill 100% of the .container */
|
||||
.content {
|
||||
padding:20px;
|
||||
max-width:600px;
|
||||
margin:0 auto;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* Let's make sure tables in the content area are 100% wide */
|
||||
.content table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body bgcolor="#f6f6f6">
|
||||
|
||||
<!-- body -->
|
||||
<table class="body-wrap">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="container" bgcolor="#FFFFFF">
|
||||
|
||||
<!-- content -->
|
||||
<div class="content">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<h1>Downloaded from Fontsgeek.com</h1>
|
||||
<p>This font was downloaded from <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> . You can visit <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> for thousands of free fonts.</p>
|
||||
<p><a href="http://fontsgeek.com?ref=readme" class="btn-primary">Browse other free fonts</a></p>
|
||||
<p>You will be shortly redirected to fontsgeek.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /content -->
|
||||
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- /body -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
fonts/Gliscor Gothic-FontZillion/Fonts/gligoth.ttf
Normal file
BIN
fonts/Gliscor Gothic-FontZillion/Fonts/gligoth.ttf
Normal file
Binary file not shown.
98
index.html
98
index.html
@ -15,8 +15,26 @@
|
||||
<nav>
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href=""><img alt="Facebook - White Circle" data-type="image" itemprop="image" style="width: 40px; height: 40px; object-fit: cover;" src="https://static.wixstatic.com/media/e0678ef25486466ba65ef6ad47b559e1.png/v1/fill/w_40,h_40,al_c,q_80,usm_0.66_1.00_0.01/e0678ef25486466ba65ef6ad47b559e1.webp"></a></li>
|
||||
<li><a href=""><img alt="Instagram - White Circle" data-type="image" itemprop="image" style="width: 40px; height: 40px; object-fit: cover;" src="https://static.wixstatic.com/media/17f992598001435083075924d7b6ae80.png/v1/fill/w_40,h_40,al_c,q_80,usm_0.66_1.00_0.01/17f992598001435083075924d7b6ae80.webp"></a></li>
|
||||
<li><a href="">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="15 15 144 144" style="width: 40px; height: 40px;">
|
||||
<g>
|
||||
<path d="M86,14.33333c-39.58041,0 -71.66667,32.08626 -71.66667,71.66667c0,39.58041 32.08626,71.66667 71.66667,71.66667c39.58041,0 71.66667,-32.08626 71.66667,-71.66667c0,-39.58041 -32.08626,-71.66667 -71.66667,-71.66667z"></path>
|
||||
</g>
|
||||
<g style="fill: #2f2e2e;">
|
||||
<path d="M96.75,40.84994c-11.87445,0 -21.5,9.62555 -21.5,21.5v10.75h-12.9v17.2h12.9v40.85h17.2v-40.85h15.05l2.15,-17.2h-17.2v-8.6c0,-4.74935 3.85065,-8.6 8.6,-8.6h8.6v-14.3577c-4.10435,-0.42355 -8.76985,-0.7009 -12.9,-0.6923z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</a></li>
|
||||
<li><a href="">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="15 15 144 144" style="width: 40px; height: 40px;">
|
||||
<g>
|
||||
<path d="M86,14.33333c-39.58041,0 -71.66667,32.08626 -71.66667,71.66667c0,39.58041 32.08626,71.66667 71.66667,71.66667c39.58041,0 71.66667,-32.08626 71.66667,-71.66667c0,-39.58041 -32.08626,-71.66667 -71.66667,-71.66667z"></path>
|
||||
</g>
|
||||
<g style="fill: #2f2e2e;">
|
||||
<path d="M55.9,44.6125c-6.18755,0 -11.2875,5.09995 -11.2875,11.2875v60.2c0,6.18755 5.09995,11.2875 11.2875,11.2875h60.2c6.18755,0 11.2875,-5.09995 11.2875,-11.2875v-60.2c0,-6.18755 -5.09995,-11.2875 -11.2875,-11.2875zM104.8125,55.9h11.2875v11.2875h-11.2875zM86,70.95c8.36274,0 15.05,6.68726 15.05,15.05c0,8.36274 -6.68726,15.05 -15.05,15.05c-8.36274,0 -15.05,-6.68726 -15.05,-15.05c0,-8.36274 6.68726,-15.05 15.05,-15.05zM52.1375,78.475h12.58086c-0.83774,2.35156 -1.29336,4.89419 -1.29336,7.525c0,12.41919 10.15581,22.575 22.575,22.575c12.41919,0 22.575,-10.15581 22.575,-22.575c0,-2.63081 -0.45562,-5.17344 -1.29336,-7.525h12.58086v37.625c0,2.1311 -1.6314,3.7625 -3.7625,3.7625h-60.2c-2.1311,0 -3.7625,-1.6314 -3.7625,-3.7625z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</a></li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li><a href="#accueil">Accueil</a></li>
|
||||
@ -53,7 +71,9 @@
|
||||
<div id="parcours">
|
||||
<a href="parcour.html" id="DECOUVERTES" class="parcour">
|
||||
<div class="icone">
|
||||
<img data-type="image" itemprop="image" src="https://img.icons8.com/metro/384/binoculars.png">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172 172">
|
||||
<g fill="#ffffff"><path d="M125.27885,19.22596c-1.36959,0.02584 -2.73918,0.28426 -4.13462,0.62019c-10.59495,1.98978 -17.28786,11.93871 -15.29808,22.53365c5.29747,-4.6256 12.61058,-9.30288 22.53365,-9.30288c7.93329,0 13.17909,1.9381 17.15865,3.92788c0,-0.67187 0.05169,-1.1887 -0.62019,-1.86058c-1.73137,-9.2512 -10.05228,-16.15084 -19.63942,-15.91827zM46.30769,20.05288c-9.14783,-0.23257 -17.49459,6.40865 -19.22596,15.09135c-0.67187,0.67188 -0.62019,1.18871 -0.62019,1.86058c3.97957,-1.98978 9.8714,-3.92788 17.15865,-3.92788c9.92308,0 17.28786,4.6256 21.91346,9.92308c1.98978,-10.59495 -4.70312,-20.54387 -15.29808,-22.53365c-1.31791,-0.33594 -2.60997,-0.38762 -3.92788,-0.41346zM43.62019,39.69231c-16.53846,0 -20.51803,9.17368 -23.15385,17.77885c-4.6256,14.54868 -17.15865,48.99519 -17.15865,48.99519c0,0 0.67188,-0.64603 0.82692,-0.82692c-2.60997,5.01322 -4.13462,10.72416 -4.13462,16.74519c0,20.02704 16.35757,36.38462 36.38462,36.38462c20.02704,0 36.38462,-16.35757 36.38462,-36.38462c0,-18.76081 -14.36779,-34.31731 -32.66346,-36.17788c21.39663,1.13702 28.29628,11.4994 32.66346,19.63942c0,7.28726 5.94351,13.23077 13.23077,13.23077c7.28726,0 13.23077,-5.94351 13.23077,-13.23077c4.36719,-8.14003 11.26683,-18.5024 32.66346,-19.63942c-18.29567,1.86058 -32.66346,17.41707 -32.66346,36.17788c0,20.02704 16.35757,36.38462 36.38462,36.38462c20.02704,0 36.38462,-16.35757 36.38462,-36.38462c0,-6.02103 -1.52464,-11.73197 -4.13462,-16.74519c0.15505,0.18089 0.82692,0.82692 0.82692,0.82692c0,0 -12.53305,-34.44651 -17.15865,-48.99519c-2.63581,-7.93329 -6.61538,-17.77885 -23.15385,-17.77885c-17.85637,0 -24.47176,21.75842 -29.76923,17.77885c-3.30769,-3.30769 -7.98497,-4.54808 -12.61058,-4.54808c-4.6256,0 -9.30288,1.24038 -12.61058,4.54808c-5.29747,3.97957 -11.91286,-17.77885 -29.76923,-17.77885zM36.38462,99.23077c12.86899,0 23.15385,10.28486 23.15385,23.15385c0,12.86899 -10.28485,23.15385 -23.15385,23.15385c-12.86899,0 -23.15385,-10.28485 -23.15385,-23.15385c0,-12.86899 10.28486,-23.15385 23.15385,-23.15385zM135.61538,99.23077c12.86899,0 23.15385,10.28486 23.15385,23.15385c0,12.86899 -10.28485,23.15385 -23.15385,23.15385c-12.86899,0 -23.15385,-10.28485 -23.15385,-23.15385c0,-12.86899 10.28486,-23.15385 23.15385,-23.15385z"></path></g>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>DÉCOUVERTES</h3>
|
||||
<span>Découvrez ou redécouvrez les quartiers de la ville</span>
|
||||
@ -94,46 +114,50 @@
|
||||
<section id="qui">
|
||||
<div class="background-image">
|
||||
</div>
|
||||
<h2>Qui sommes-nous?</h2>
|
||||
<p>
|
||||
Ce site est à l'initiative de Bastien Grégis, charpentier, technicien cordiste et étudiant en architecture. Mais surtout passionné par la ville de Lyon. Il a créé son entreprise d'animation culturelle en août 2017 pour faire profiter de sa passion, aux visiteurs occasionnels comme aux résidents de longue date souhaitant porter un nouveau regard sur la ville.
|
||||
</p>
|
||||
<p>
|
||||
Inurbe.fr se propose d'être une plateforme de rassemblement pour que des passionnés de la ville et du territoire puissent partager leurs connaissances avec vous au travers de visites guidées originales.
|
||||
</p>
|
||||
<div class="section">
|
||||
<h2>Qui sommes-nous?</h2>
|
||||
<p>
|
||||
Ce site est à l'initiative de Bastien Grégis, charpentier, technicien cordiste et étudiant en architecture. Mais surtout passionné par la ville de Lyon. Il a créé son entreprise d'animation culturelle en août 2017 pour faire profiter de sa passion, aux visiteurs occasionnels comme aux résidents de longue date souhaitant porter un nouveau regard sur la ville.
|
||||
</p>
|
||||
<p>
|
||||
Inurbe.fr se propose d'être une plateforme de rassemblement pour que des passionnés de la ville et du territoire puissent partager leurs connaissances avec vous au travers de visites guidées originales.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contact">
|
||||
<div class="background-image">
|
||||
</div>
|
||||
<h2>NOUS CONTACTER</h2>
|
||||
<form>
|
||||
<div>
|
||||
<div class="section">
|
||||
<h2>Nous contacter</h2>
|
||||
<form>
|
||||
<div>
|
||||
<p>
|
||||
Bastien GREGIS<br/>
|
||||
<br/>
|
||||
20 rue Léon Blum<br/>
|
||||
<br/>
|
||||
69100 Villeurbanne, France<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
inurbelyon@gmail.com<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
Tél : 06.29.90.63.31
|
||||
</p>
|
||||
<div>
|
||||
<p>
|
||||
Bastien GREGIS<br/>
|
||||
<br/>
|
||||
20 rue Léon Blum<br/>
|
||||
<br/>
|
||||
69100 Villeurbanne, France<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
inurbelyon@gmail.com<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
Tél : 06.29.90.63.31
|
||||
</p>
|
||||
</div>
|
||||
<div id="input">
|
||||
<input type="text" required="" aria-invalid="false" name="Name" value="" class="cf2_required" placeholder="Nom *" data-aid="nameField">
|
||||
<input type="text" required="" aria-invalid="false" name="Email" value="" class="cf2_required" placeholder="Email *" data-aid="emailField">
|
||||
<input type="text" aria-invalid="false" name="Subject" value="" class="" placeholder="Objet" data-aid="subjectField">
|
||||
<textarea name="Message" placeholder="Message" data-aid="messageField" id="comp-ifqyiqxmfieldMessage"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input">
|
||||
<input type="text" required="" aria-invalid="false" name="Name" value="" class="cf2_required" placeholder="Nom *" data-aid="nameField">
|
||||
<input type="text" required="" aria-invalid="false" name="Email" value="" class="cf2_required" placeholder="Email *" data-aid="emailField">
|
||||
<input type="text" aria-invalid="false" name="Subject" value="" class="" placeholder="Objet" data-aid="subjectField">
|
||||
<textarea name="Message" placeholder="Message" data-aid="messageField" id="comp-ifqyiqxmfieldMessage"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit">Envoyer</button>
|
||||
</form>
|
||||
<input type="submit" value ="Envoyer"/>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
102
style/main.css
102
style/main.css
@ -2,13 +2,19 @@ html {
|
||||
font-family: roboto, sans-serif;
|
||||
color: white;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#entete {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#entete, #accueil > div:last-child > div {
|
||||
#entete svg {
|
||||
stroke: #000000;
|
||||
fill: #000000;
|
||||
}
|
||||
#accueil > div:last-child > div {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
@ -18,6 +24,7 @@ html {
|
||||
-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
|
||||
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
|
||||
margin-bottom: 25px;
|
||||
width: 90%;
|
||||
}
|
||||
h1,h2,h3,h4,nav {
|
||||
font-family: roboto, sans-serif;
|
||||
@ -25,6 +32,27 @@ h1,h2,h3,h4,nav {
|
||||
h1 {
|
||||
margin:0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
font-weight: 300;
|
||||
margin: 0 0 1em;
|
||||
letter-spacing: -0.025em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
h2::after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 65%;
|
||||
height: 2px;
|
||||
margin: 0.6em auto;
|
||||
border-radius: 2px;
|
||||
background-image: -moz-linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent);
|
||||
background-image: -webkit-linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent);
|
||||
background-image: -ms-linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent);
|
||||
background-image: linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent);
|
||||
}
|
||||
#logo {
|
||||
width: 235px;
|
||||
}
|
||||
@ -35,6 +63,15 @@ h1 {
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#titre h1{
|
||||
font-size: 68px;
|
||||
line-height: 81px;
|
||||
}
|
||||
#titre span{
|
||||
font-size: 19px;
|
||||
letter-spacing: 0.19em;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.icone {
|
||||
width: 34%;
|
||||
@ -54,12 +91,12 @@ svg {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
main img {
|
||||
filter: invert(100%);
|
||||
main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
main img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
@ -102,42 +139,46 @@ ol li a {
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: -8px -8px 0;
|
||||
margin: -8px 0 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #2f2e2e;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
section > *:not(.background-image), nav div {
|
||||
max-width: 1100px;
|
||||
section, nav div {
|
||||
max-width: 1190px;
|
||||
margin: auto;
|
||||
}
|
||||
section#accueil {
|
||||
min-height: 100vh;
|
||||
}
|
||||
section {
|
||||
align-items: center;
|
||||
padding-top: 60px;
|
||||
margin-top: -20px;
|
||||
min-height: 100vh;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
nav div {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
#qui, #contact {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
padding: 70px 30px;
|
||||
}
|
||||
|
||||
#qui p {
|
||||
max-width: 720px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
#accueil {
|
||||
padding-top: 75px;
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -149,16 +190,27 @@ nav div {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#contact > form > div {
|
||||
#contact > div > form > div {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0 20%;
|
||||
}
|
||||
|
||||
form {
|
||||
#contact .section, #qui .section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#contact .section, #qui .section {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
padding: 30px 0;
|
||||
margin: -30px 0;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#contact .section form {
|
||||
padding: 0 5%;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -169,12 +221,13 @@ nav div {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
form button {
|
||||
margin-left: calc(80% - 97px);
|
||||
form button, form input[type="submit"] {
|
||||
margin-left: calc(98% - 97px);
|
||||
background-color: #2f2e2e;
|
||||
color: white;
|
||||
border: 0;
|
||||
padding: 4px 10px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#accueil .background-image {
|
||||
@ -191,8 +244,8 @@ form button {
|
||||
|
||||
.background-image {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
width: calc(100% + 16px);
|
||||
top: 0px;
|
||||
width: 100vw;
|
||||
object-position: 50% 100%;
|
||||
background-size: cover;
|
||||
background-position: center bottom;
|
||||
@ -201,5 +254,4 @@ form button {
|
||||
transform: matrix(1, 0, 0, 1, 0, 0);
|
||||
margin: 0px;
|
||||
z-index: -1;
|
||||
left: -8px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user