mediaquieries

images/.directory

@@ -0,0 +1,4 @@
+[Dolphin]
+Timestamp=2018,11,20,15,37,4
+Version=4
+ViewMode=2

index.php

@@ -8,6 +8,8 @@
 	<link rel="stylesheet" type="text/css" href="style/fullpage.css" />
 	<link rel="stylesheet" type="text/css" href="style/simplebar.css" />
 	<link rel="stylesheet" type="text/css" href="style/style.css" />
+	<link rel="stylesheet" type="text/css" href="style/media-quieries.css" />
+
 
 </head>
 
@@ -40,7 +42,6 @@
 
 	</section>
 
-	<footer></footer>
 </body>
 
 <script type="text/javascript" src="script/jquery.min.js"></script>

pages/.directory

@@ -0,0 +1,4 @@
+[Dolphin]
+Timestamp=2018,11,20,15,37,14
+Version=4
+ViewMode=2

pages/showrooms.php

@@ -11,12 +11,16 @@
 		<button type="button" name="Brochure">Brochure</button>
 	</div>
 
-		<img src="" alt="bulles">
-		<img src="" alt="fioles">
+		<img src="images/bubulle2.svg" alt="bulles2">
+		<img src="images/fioles.svg" alt="fioles">
 
 	</div>
 
 	<div class="images">
+
 	</div>
 
+	<footer></footer>
+
+
 </div>

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

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%;
-  height: auto;
-}
 
-.liste_movies img:nth-child(1){
-  width: 65%;
+.liste_movies ul li img{
+  width: auto;
   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; */
+}