]> _ Git - pmi.git/commitdiff
projects / pmi.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 2828ee3)
wip #2755 @4
authornael <nael@cubedesigners.com>
Wed, 12 Jun 2019 14:16:24 +0000 (16:16 +0200)
committernael <nael@cubedesigners.com>
Wed, 12 Jun 2019 14:16:24 +0000 (16:16 +0200)
public/_modules/news-feed/index.html patch | blob | history
public/_modules/news-feed/style.css patch | blob | history
public/_modules/news-feed/style.styl patch | blob | history

diff --git a/public/_modules/news-feed/index.html b/public/_modules/news-feed/index.html
index d876f54bee56903adc86a48e029e9b7570184a42..6f02f0ba34915ac1f8d31e14f33d1033d72fdb53 100644 (file)
--- a/public/_modules/news-feed/index.html
+++ b/public/_modules/news-feed/index.html
@@ -12,36 +12,141 @@
 </head>
 <body>
 
-<div id="news" class="container mt-5 flex flex-col">
-    <div class="news-feed flex">
-        <img class="mr-12" src="img/news.png" alt="">
-        <div class="news-actu text-grey-dark">
-            <span class="news-date">12/01/19</span>
-            <h3>LSO-12-X98 - Surveillance de pont</h3>
-            <p >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
-                ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
-                purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
-                Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
-            </p>
-            <a href="#">En savoir plus</a>
+<div id="news" class=" mt-5 flex lg:flex-col-reverse ">
+    <div class="section-news flex flex-col mr-12">
+
+        <div class="news-feed sm:flex-col flex lg:mt-12">
+            <div class="img-news mr-12 sm:mr-0">
+                <img  src="img/news.png" alt="">
+            </div>
+            <div class="news-actu text-grey-dark">
+                <span class="news-date ">12/01/19</span>
+                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt" >
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
+                    ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
+                    purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
+                    Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
+                </p>
+                <a href="#">En savoir plus</a>
+            </div>
+        </div>
+
+        <div class="news-feed sm:flex-col flex mt-12">
+            <div class="img-news mr-12 sm:mr-0">
+                <img  src="img/news.png" alt="">
+            </div>
+            <div class="news-actu text-grey-dark">
+                <span class="news-date ">12/01/19</span>
+                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt" >
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
+                    ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
+                    purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
+                    Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
+                </p>
+                <a href="#">En savoir plus</a>
+            </div>
+        </div>
+
+        <div class="news-feed sm:flex-col flex mt-12">
+            <div class="img-news mr-12 sm:mr-0">
+                <img  src="img/news.png" alt="">
+            </div>
+            <div class="news-actu text-grey-dark">
+                <span class="news-date ">12/01/19</span>
+                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt" >
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
+                    ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
+                    purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
+                    Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
+                </p>
+                <a href="#">En savoir plus</a>
+            </div>
+        </div>
+
+        <div class="news-feed sm:flex-col flex mt-12">
+            <div class="img-news mr-12 sm:mr-0">
+                <img  src="img/news.png" alt="">
+            </div>
+            <div class="news-actu text-grey-dark">
+                <span class="news-date ">12/01/19</span>
+                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt" >
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
+                    ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
+                    purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
+                    Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
+                </p>
+                <a href="#">En savoir plus</a>
+            </div>
+        </div>
+
+        <div class="news-feed sm:flex-col flex mt-12">
+            <div class="img-news mr-12 sm:mr-0">
+                <img  src="img/news.png" alt="">
+            </div>
+            <div class="news-actu text-grey-dark">
+                <span class="news-date ">12/01/19</span>
+                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt" >
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
+                    ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
+                    purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
+                    Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
+                </p>
+                <a href="#">En savoir plus</a>
+            </div>
+        </div>
+
+        <div class="news-feed sm:flex-col flex mt-12">
+            <div class="img-news mr-12 sm:mr-0">
+                <img  src="img/news.png" alt="">
+            </div>
+            <div class="news-actu text-grey-dark">
+                <span class="news-date ">12/01/19</span>
+                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt" >
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
+                    ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
+                    purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
+                    Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
+                </p>
+                <a href="#">En savoir plus</a>
+            </div>
         </div>
     </div>
 
-    <div class="news-feed flex mt-12">
-        <img class="mr-12" src="img/news.png" alt="">
-        <div class="news-actu text-grey-dark">
-            <span class="news-date">12/01/19</span>
-            <h3>LSO-12-X98 - Surveillance de pont</h3>
-            <p >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
-                ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
-                purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
-                Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
-            </p>
-            <a href="#">En savoir plus</a>
+    <div>
+    <div class="section-event lg:w-full p-12 flex flex-col ">
+        <h3 >Évènements</h3>
+        <div class="event-feed flex-col mb-10 flex lg:flex-row sm:flex-col">
+            <div class="img-news">
+                <img class="w-full" src="img/event.png" alt="">
+            </div>
+            <div class=" lg:ml-12 text-grey-dark sm:mt-6 sm:ml-0">
+                <h5 class="mt-2 lg:mt-0 event-title text-navy">Automotive Testing Expo 2019</h5>
+                <p class="news-txt" >
+                    21-23 Mai 2019, Hambourg
+                </p>
+                <a href="#">En savoir plus</a>
+            </div>
+        </div>
+        <div class="event-feed flex-col flex lg:flex-row sm:flex-col">
+            <div class="img-news">
+                <img class="w-full" src="img/event.png" alt="">
+            </div>
+            <div class=" lg:ml-12 text-grey-dark sm:mt-6 sm:ml-0">
+                <h5 class="mt-2 lg:mt-0 event-title text-navy">Automotive Testing Expo 2019</h5>
+                <p class="news-txt" >
+                    21-23 Mai 2019, Hambourg
+                </p>
+                <a href="#">En savoir plus</a>
+            </div>
         </div>
     </div>
+    </div>
 </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
diff --git a/public/_modules/news-feed/style.css b/public/_modules/news-feed/style.css
index d8425d9f179678b44b5a4da9a8355cd7439425ad..8a102c08630ada8512df283bb051c2df5f3be881 100644 (file)
--- a/public/_modules/news-feed/style.css
+++ b/public/_modules/news-feed/style.css
@@ -4,9 +4,36 @@
   margin: 0;
   font-family: 'Muli', sans-serif;
 }
+#news {
+  margin: 5vw;
+}
+#news h3 {
+  font-size: 24px;
+}
 #news .news-actu {
   max-width: 744px;
 }
+@media (max-width: 767px) {
+  #news .news-actu {
+    margin-top: 2.5vw;
+  }
+}
 #news .news-date {
   font-size: 14px;
 }
+#news .news-txt {
+  margin-bottom: 0 !important;
+}
+#news .section-event {
+  background: #f7f8fc;
+  width: 18.125vw;
+}
+@media (max-width: 1280px) {
+  #news .section-event {
+    width: 100%;
+  }
+}
+#news .event-title {
+  font-family: 'Barlow', sans-serif;
+  font-weight: 500;
+}
diff --git a/public/_modules/news-feed/style.styl b/public/_modules/news-feed/style.styl
index f6517dc7e033ad4f78d9105a81648dd42f36725d..84bd3bd64354634317a333f5c265975d3b68825d 100644 (file)
--- a/public/_modules/news-feed/style.styl
+++ b/public/_modules/news-feed/style.styl
@@ -15,7 +15,22 @@ $verylightgrey =#E7E9F3
   font-family: $muli
 
 #news
+  margin 5vw  // à supprimer
+  h3
+    font-size: 24px
   .news-actu
     max-width: 744px
+    @media (max-width : 767px)
+      margin-top: 2.5vw
   .news-date
     font-size: 14px
+  .news-txt
+    margin-bottom: 0 !important
+  .section-event
+    background $lightgrey
+    width 18.125vw
+    @media (max-width : 1280px)
+      width 100%
+  .event-title
+    font-family: $barlow
+    font-weight: 500
\ No newline at end of file
Unnamed repository; edit this file 'description' to name the repository.