mediaquieries

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