From e128b59431f678489841fa32639cb0c58b37fd20 Mon Sep 17 00:00:00 2001 From: hugogogo Date: Wed, 2 Dec 2020 11:56:05 +0100 Subject: [PATCH] position des menus --- index.html | 25 +++++++++------- menu.html | 7 +++-- styles/index.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++++ styles/menu.css | 55 +++++++++++++++++++++++++++++++++++ styles/style.css | 51 -------------------------------- 5 files changed, 150 insertions(+), 64 deletions(-) create mode 100644 styles/index.css create mode 100644 styles/menu.css diff --git a/index.html b/index.html index c06fce2..98d1437 100644 --- a/index.html +++ b/index.html @@ -7,21 +7,24 @@ +
-
-
-

KOSMOPOLIT l'association

 -
-
-
-

LITTERall

 -
-
-
-

lettres d'europe et d'ailleurs

 +
+
+
+

KOSMOPOLIT l'association

 +
+
+
+

LITTERall

 +
+
+
+

lettres d'europe et d'ailleurs

 +
diff --git a/menu.html b/menu.html index c06fce2..2165962 100644 --- a/menu.html +++ b/menu.html @@ -7,10 +7,10 @@ + -
- +

KOSMOPOLIT l'association

 @@ -24,5 +24,8 @@

lettres d'europe et d'ailleurs
+
+ +
diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..a45ddc1 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,76 @@ + +/*//////////////////////*/ +/*IMAGE*/ +#main { + position: relative; + height: 100vh; + width: 100vw; +} +img { + width: 100%; + height: 100%; +} +.contain { + object-fit: contain; +} +.cover { + object-fit: cover; +} + + +/*//////////////////////////*/ +/*MENU*/ +/*wrapper rectangle qui imite la taille de l'image*/ +.container-link { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 880px; + max-width: 100vw; + height: 600px; + /* border: 1px solid red; */ +} +/*contain le text et le point (general)*/ +.link-index { + position: absolute; + display: flex; +} +.dot-link { + width: 30px; + min-width: 30px; + height: 30px; + margin: auto 10px; + border-radius: 50%; +} +.menu-link { + margin: auto; +} +/*contain le text et le point (specifique)*/ +.container-link-asso { + top: 1%; + left: 1%; +} +.dot-link-asso { + background-color: var(--color-purple); +} +/*contain le text et le point (specifique)*/ +.container-link-litterall { + bottom: 1%; + left: 70%; +} +.dot-link-litterall { + background-color: var(--color-green); +} +/*contain le text et le point (specifique)*/ +.container-link-lettredeeda { + top: 53%; + right: 6%; +} +.dot-link-lettredeeda { + background-color: var(--color-water); +} +.link-lettredeeda { + width: 50px; +} + diff --git a/styles/menu.css b/styles/menu.css new file mode 100644 index 0000000..7fff892 --- /dev/null +++ b/styles/menu.css @@ -0,0 +1,55 @@ +body { + display: flex; + flex-direction: column; +} + +/*/////////////////////////*/ +/*MENU*/ +.menu { + display: flex; + height: 40px; +} +.menu > * { + margin: auto; +} +.link-index { + display: flex; +} +.menu-link { + margin: auto; +} +.dot-link { + width: 30px; + height: 30px; + margin: auto; + margin-right: 10px; + border-radius: 50%; +} +.dot-link-asso { + background-color: var(--color-purple); +} +.dot-link-litterall { + background-color: var(--color-green); +} +.dot-link-lettredeeda { + background-color: var(--color-water); +} + +/*//////////////////////////////*/ +/*IMAGE*/ +#main { + position: relative; + height: calc(100vh - 40px); + width: 100vw; +} +img { + width: 100%; + height: 100%; +} +.contain { + object-fit: contain; +} +.cover { + object-fit: cover; +} + diff --git a/styles/style.css b/styles/style.css index b63953f..f1dc367 100644 --- a/styles/style.css +++ b/styles/style.css @@ -198,55 +198,4 @@ em { -#main { - position: relative; - height: 100vh; - width: 100vw; -} -img { - width: 100%; - height: 100%; -} -.contain { - object-fit: contain; -} -.cover { - object-fit: cover; -} - -.link-index { - position: absolute; - display: flex; -} -.dot-link { - width: 30px; - height: 30px; - margin: auto; - margin-right: 10px; - border-radius: 50%; -} -.menu-link { - margin: auto; -} -.container-link-asso { - top: 100px; - left: 200px; -} -.dot-link-asso { - background-color: var(--color-purple); -} -.container-link-litterall { - top: 300px; - left: 600px; -} -.dot-link-litterall { - background-color: var(--color-green); -} -.container-link-lettredeeda { - top: 600px; - left: 900px; -} -.dot-link-lettredeeda { - background-color: var(--color-blue); -}