From 911fd5f36e8f553cd8dab313d7f9bf1896b308d0 Mon Sep 17 00:00:00 2001 From: Elisa Date: Thu, 6 Jun 2019 18:06:32 +0200 Subject: [PATCH] ajout page --- index.html | 9 ++-- parcour.html | 109 ++++++++++++++++++++++++++++++++++++++++++++++ style/index.css | 13 ++++++ style/main.css | 14 ------ style/parcour.css | 60 +++++++++++++++++++++++++ 5 files changed, 187 insertions(+), 18 deletions(-) create mode 100644 parcour.html create mode 100644 style/index.css create mode 100644 style/parcour.css diff --git a/index.html b/index.html index dd49dea..6c2d44f 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Inurbe - Découvrez l’héritage de Lyon + @@ -46,14 +47,14 @@

Les Parcours

- +
- +

DECOUVERTES

Découvrez ou redécouvrez les quartiers de la ville - +
@@ -68,7 +69,7 @@

THEMATIQUES

Explorez Lyon au travers d'un thème précis - +
diff --git a/parcour.html b/parcour.html new file mode 100644 index 0000000..806f391 --- /dev/null +++ b/parcour.html @@ -0,0 +1,109 @@ + + + + Inurbe - Découvrez l’héritage de Lyon + + + + + + +
+
+ + + +
+ +
+
+ parcour_img +
+

title

+
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
+
+ + +
+
+
+
+ parcour_img +
+

title

+
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
+
+ + +
+
+
+
+ parcour_img +
+

title

+
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
+
+ + +
+
+
+
+ parcour_img +
+

title

+
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
+
+ + +
+
+
+
+ parcour_img +
+

title

+
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
+
+ + +
+
+
+
+
+ +
+

attention, c pa un reserv omg

+
+ + + + + + + + +
+
+ + + diff --git a/style/index.css b/style/index.css new file mode 100644 index 0000000..5d9b864 --- /dev/null +++ b/style/index.css @@ -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; +} \ No newline at end of file diff --git a/style/main.css b/style/main.css index d71806c..c4b20d1 100644 --- a/style/main.css +++ b/style/main.css @@ -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; } diff --git a/style/parcour.css b/style/parcour.css new file mode 100644 index 0000000..2375280 --- /dev/null +++ b/style/parcour.css @@ -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; +} \ No newline at end of file