ajout page
This commit is contained in:
parent
94abe74816
commit
911fd5f36e
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<title>Inurbe - Découvrez l’héritage de Lyon</title>
|
||||
<link rel="stylesheet" type="text/css" href="style/main.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="style/index.css"/>
|
||||
<meta charset="utf-8"/>
|
||||
</head>
|
||||
|
||||
@ -46,14 +47,14 @@
|
||||
<div>
|
||||
<h2>Les Parcours</h2>
|
||||
<div id="parcours">
|
||||
<a href="" id="DECOUVERTES" class="parcour">
|
||||
<a href="parcour.html" id="DECOUVERTES" class="parcour">
|
||||
<div class="icone">
|
||||
<img src="https://img.icons8.com/metro/384/binoculars.png">
|
||||
<img data-type="image" itemprop="image" src="https://img.icons8.com/metro/384/binoculars.png">
|
||||
</div>
|
||||
<h3>DECOUVERTES</h3>
|
||||
<span>Découvrez ou redécouvrez les quartiers de la ville</span>
|
||||
</a>
|
||||
<a href="" id="THEMATIQUES" class="parcour">
|
||||
<a href="parcour.html" id="THEMATIQUES" class="parcour">
|
||||
<div class="icone">
|
||||
<svg preserveAspectRatio="xMidYMid meet" data-bbox="20 20 160 160" xmlns="http://www.w3.org/2000/svg" viewBox="55 55 95 95" role="img" style="stroke-width: 0px;">
|
||||
<g>
|
||||
@ -68,7 +69,7 @@
|
||||
<h3>THEMATIQUES</h3>
|
||||
<span>Explorez Lyon au travers d'un thème précis</span>
|
||||
</a>
|
||||
<a href="" id="LUDIQUES" class="parcour">
|
||||
<a href="parcour.html" id="LUDIQUES" class="parcour">
|
||||
<div class="icone">
|
||||
<svg preserveAspectRatio="xMidYMid meet" data-bbox="-459 301 160 160" xmlns="http://www.w3.org/2000/svg" viewBox="-427 336 95 95" role="img" style="stroke-width: 0px;">
|
||||
<g>
|
||||
|
||||
109
parcour.html
Normal file
109
parcour.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Inurbe - Découvrez l’héritage de Lyon</title>
|
||||
<link rel="stylesheet" type="text/css" href="style/main.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="style/parcour.css"/>
|
||||
<meta charset="utf-8"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
<ol>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="#qui">Qui sommes nous ?</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<div id="nav">
|
||||
<button><h3>DECOUVERTES</h3></button>
|
||||
<button><h3>THEMATIQUES</h3></button>
|
||||
<button><h3>LUDIQUES</h3></button>
|
||||
</div>
|
||||
<div id="parcours">
|
||||
<div class="parcour">
|
||||
<img src="" data-type="image" itemprop="image" alt="parcour_img">
|
||||
<div>
|
||||
<h4>title</h4>
|
||||
<div>Accroche Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec aliquet neque. Aenean imperdiet lorem sed diam placerat convallis. Ut vehicula vel neque ac interdum. In tincidunt, massa non feugiat auctor, ligula neque auctor risus, a suscipit felis tellus nec sem. Donec egestas erat et lectus convallis, id mollis</div>
|
||||
<div class="reserv_button">
|
||||
<button>participer à une sortie</button>
|
||||
<button>demander un guide pour cette sortie</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parcour">
|
||||
<img src="" data-type="image" itemprop="image" alt="parcour_img">
|
||||
<div>
|
||||
<h4>title</h4>
|
||||
<div>Accroche Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec aliquet neque. Aenean imperdiet lorem sed diam placerat convallis. Ut vehicula vel neque ac interdum. In tincidunt, massa non feugiat auctor, ligula neque auctor risus, a suscipit felis tellus nec sem. Donec egestas erat et lectus convallis, id mollis</div>
|
||||
<div class="reserv_button">
|
||||
<button>participer à une sortie</button>
|
||||
<button>demander un guide pour cette sortie</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parcour">
|
||||
<img src="" data-type="image" itemprop="image" alt="parcour_img">
|
||||
<div>
|
||||
<h4>title</h4>
|
||||
<div>Accroche Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec aliquet neque. Aenean imperdiet lorem sed diam placerat convallis. Ut vehicula vel neque ac interdum. In tincidunt, massa non feugiat auctor, ligula neque auctor risus, a suscipit felis tellus nec sem. Donec egestas erat et lectus convallis, id mollis</div>
|
||||
<div class="reserv_button">
|
||||
<button>participer à une sortie</button>
|
||||
<button>demander un guide pour cette sortie</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parcour">
|
||||
<img src="" data-type="image" itemprop="image" alt="parcour_img">
|
||||
<div>
|
||||
<h4>title</h4>
|
||||
<div>Accroche Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec aliquet neque. Aenean imperdiet lorem sed diam placerat convallis. Ut vehicula vel neque ac interdum. In tincidunt, massa non feugiat auctor, ligula neque auctor risus, a suscipit felis tellus nec sem. Donec egestas erat et lectus convallis, id mollis</div>
|
||||
<div class="reserv_button">
|
||||
<button>participer à une sortie</button>
|
||||
<button>demander un guide pour cette sortie</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parcour">
|
||||
<img src="" data-type="image" itemprop="image" alt="parcour_img">
|
||||
<div>
|
||||
<h4>title</h4>
|
||||
<div>Accroche Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec aliquet neque. Aenean imperdiet lorem sed diam placerat convallis. Ut vehicula vel neque ac interdum. In tincidunt, massa non feugiat auctor, ligula neque auctor risus, a suscipit felis tellus nec sem. Donec egestas erat et lectus convallis, id mollis</div>
|
||||
<div class="reserv_button">
|
||||
<button>participer à une sortie</button>
|
||||
<button>demander un guide pour cette sortie</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="pop_up_reserv">
|
||||
<h4>attention, c pa un reserv omg</h4>
|
||||
<form>
|
||||
<label>truc</label>
|
||||
<input type="text" required="" aria-invalid="false" name="Name" value="" class="cf2_required" placeholder="Name *" data-aid="nameField">
|
||||
<label>truc</label>
|
||||
<input type="text" required="" aria-invalid="false" name="Email" value="" class="cf2_required" placeholder="Email *" data-aid="emailField">
|
||||
<label>truc</label>
|
||||
<input type="text" aria-invalid="false" name="Subject" value="" class="" placeholder="Subject" data-aid="subjectField">
|
||||
<label>truc</label>
|
||||
<textarea name="Message" placeholder="Message" data-aid="messageField" id="comp-ifqyiqxmfieldMessage"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<footer>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
13
style/index.css
Normal file
13
style/index.css
Normal file
@ -0,0 +1,13 @@
|
||||
.parcour {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 22%;
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#parcours {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -27,20 +27,6 @@ img, svg {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.parcour {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 22%;
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#parcours {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
60
style/parcour.css
Normal file
60
style/parcour.css
Normal file
@ -0,0 +1,60 @@
|
||||
.parcour {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 33%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#parcours {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.parcour>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 65%
|
||||
}
|
||||
|
||||
.parcour > img {
|
||||
width: 35%
|
||||
}
|
||||
|
||||
.parcour button {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.reserv_button {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#nav button {
|
||||
border: 0;
|
||||
width: 33%;
|
||||
border-right: 1px solid gray;
|
||||
}
|
||||
|
||||
#nav button:active, #nav button:focus{
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
#nav button:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 15px auto 0;
|
||||
max-width: 1500px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user