From 0a0b7979aee1a71686d9becc3a2c8bcc422ea5e5 Mon Sep 17 00:00:00 2001 From: kevin tessier Date: Tue, 20 Nov 2018 15:59:26 +0100 Subject: [PATCH] mediaquieries --- images/.directory | 4 + images/afrique.svg | 605 ++++++++++++++++++++ images/asie.svg | 199 +++++++ images/bubulle2.svg | 1124 ++++++++++++++++++++++++++++++++++++++ images/europe.svg | 357 ++++++++++++ images/fioles.svg | 223 ++++++++ index.php | 3 +- pages/.directory | 4 + pages/showrooms.php | 8 +- style/media-quieries.css | 29 + style/style.css | 58 +- 11 files changed, 2594 insertions(+), 20 deletions(-) create mode 100644 images/.directory create mode 100644 images/afrique.svg create mode 100644 images/asie.svg create mode 100644 images/bubulle2.svg create mode 100644 images/europe.svg create mode 100644 images/fioles.svg create mode 100644 pages/.directory create mode 100644 style/media-quieries.css diff --git a/images/.directory b/images/.directory new file mode 100644 index 0000000..dfef918 --- /dev/null +++ b/images/.directory @@ -0,0 +1,4 @@ +[Dolphin] +Timestamp=2018,11,20,15,37,4 +Version=4 +ViewMode=2 diff --git a/images/afrique.svg b/images/afrique.svg new file mode 100644 index 0000000..626dd69 --- /dev/null +++ b/images/afrique.svg @@ -0,0 +1,605 @@ + + + + + + + + + + image/svg+xml + + + + + + + + Afrique + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/asie.svg b/images/asie.svg new file mode 100644 index 0000000..cb4e99b --- /dev/null +++ b/images/asie.svg @@ -0,0 +1,199 @@ + + + + + + + + + + image/svg+xml + + + + + + + Asie + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/bubulle2.svg b/images/bubulle2.svg new file mode 100644 index 0000000..e6b0146 --- /dev/null +++ b/images/bubulle2.svg @@ -0,0 +1,1124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/europe.svg b/images/europe.svg new file mode 100644 index 0000000..0fba6b9 --- /dev/null +++ b/images/europe.svg @@ -0,0 +1,357 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Europe + + + + + + diff --git a/images/fioles.svg b/images/fioles.svg new file mode 100644 index 0000000..68bd557 --- /dev/null +++ b/images/fioles.svg @@ -0,0 +1,223 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.php b/index.php index 519bad3..868cd1b 100644 --- a/index.php +++ b/index.php @@ -8,6 +8,8 @@ + + @@ -40,7 +42,6 @@ - diff --git a/pages/.directory b/pages/.directory new file mode 100644 index 0000000..262eecc --- /dev/null +++ b/pages/.directory @@ -0,0 +1,4 @@ +[Dolphin] +Timestamp=2018,11,20,15,37,14 +Version=4 +ViewMode=2 diff --git a/pages/showrooms.php b/pages/showrooms.php index 2d3aab8..c45d295 100644 --- a/pages/showrooms.php +++ b/pages/showrooms.php @@ -11,12 +11,16 @@ - bulles - fioles + bulles2 + fioles
+
+ + + diff --git a/style/media-quieries.css b/style/media-quieries.css new file mode 100644 index 0000000..546cf86 --- /dev/null +++ b/style/media-quieries.css @@ -0,0 +1,29 @@ +@media screen and (max-width: 1000px) { + h3{ + transition: all 1.5s ease; + font-size: 7rem; + line-height: 6rem; + } + + #ddb .txt{ + transition: all 1.5s ease; + left: 110px; + } + + #ddb .txt img{ + transition: all 1.5s ease; + top: 50px; + left: 0; + } + #showroom .content img:nth-of-type(1){ + transition: all 1.5s ease; + left: 90px; + top: 650px; + } + + #showroom .content img:nth-of-type(2){ + transition: all 1.5s ease; + top: 170px; + left: 330px; + } +} diff --git a/style/style.css b/style/style.css index 66d885b..a506f3b 100644 --- a/style/style.css +++ b/style/style.css @@ -73,6 +73,7 @@ nav li:last-child{ /* main */ h3{ + transition: all 1s ease; font-family: 'ubuntu-r-webfont'; font-size: 10rem; line-height: 9rem; @@ -123,6 +124,7 @@ button[name="join_us"]{ } #ddb .txt{ + transition: left 1.5s ease; pointer-events: none; position: absolute; width: 500px; @@ -133,6 +135,7 @@ button[name="join_us"]{ } #ddb .txt img{ + transition: left 1.5s ease, top 1.5s ease; position: relative; top: -30px; left: -290px; @@ -233,32 +236,24 @@ button[name="join_us"]{ .liste_movies ul{ width: 65%; + min-width: 800px; display: flex; - margin: 20px auto 0 auto ; + margin: 15px auto 0 auto ; padding: 0; } .liste_movies ul li{ - width: 250px; + width: 15%; + min-width: 200px; height: auto; + margin-right: 15px; } + .liste_movies ul li img{ - width: 100%; + width: auto; height: auto; -} - -.liste_movies img:nth-child(1){ - width: 65%; - height: auto; - margin: auto; -} - -.liste_movies li img{ filter: grayscale(1); - width: 200px; - height: auto; - margin: 20px 20px 0 0; transition: filter 0.2s; } @@ -267,14 +262,23 @@ button[name="join_us"]{ transition: filter 0.2s; } +.liste_movies > img:nth-child(1){ + width: 65%; + min-width: 800px; + height: auto; + margin: auto; +} + /* showrooms */ #showroom{ background: #f7f4ed; -} -#showroom{ padding: 0px 50px; } +#showroom .content{ + margin: 130px 0 200px 50px; +} + #showroom h3{ margin: 0; } @@ -282,3 +286,23 @@ button[name="join_us"]{ #showroom .txt{ width: 500px; } + +#showroom .content img:nth-of-type(1){ + transition: all 1.5s ease; + + position: absolute; + left: 1000px; + top: 410px; +} + +#showroom .content img:nth-of-type(2){ + transition: all 1.5s ease; + + position: absolute; + top: 210px; + left: 1500px; +} + +#showroom{ + /* pointer-events: none; */ +}