Styling lower cards (mobile first)

vtex · Sep 21, 2023 · 8a02fee · 8a02fee
1 parent 7e7ca81
commit 8a02fee
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -80,22 +80,58 @@ <h6>Notion Contents</h6>
     </div>
     <div class="others">
         <h5>Other Resources</h5>
-        <div class="flex">
-        <div class="left">
-            <p>Design: </p>
-            <a href="https://admin-ui.vercel.app" target="_blank"><h6>Shoreline</h6></a>
-            <a href="https://faststore.dev" target="_blank"><h6>FastStore</h6></a>
-            <p class="line">-</p>
-        </div>
-        <div class="middle">
-            <p>Develop: </p>
-        <a href="https://developers.vtex.com" target="_blank"><h6>VTEX IO</h6></a>
-        <p class="line">-</p>
+        <p>Design: </p>
+        <div class="cards other-cards">
+            <div class="card">
+                <a href="content/loc_style_guides/Localization Style Guide - EN/VTEXLocalizationStyleGuideEN.html">
+                <div class="upper others-upper">
+                    <span class="material-symbols-outlined">border_color</span>
+                </div>
+                <div class="lower">
+                    <h6>Shoreline</h6>
+                    <p>Short description.</p>
+                </div>
+                </a>
+            </div>
+            <div class="card">
+                <a href="#">
+                <div class="upper others-upper">
+                    <span class="material-symbols-outlined">auto_stories</span>
+                </div>
+                <div class="lower">
+                    <h6>FastStore</h6>
+                    <p>Short description.</p>
+                </div>
+                </a>
+            </div>
         </div>
-        <div class="right">
-            <p>Marketing: </p>
-            <a href="https://brand.vtex.com" target="_blank"><h6>Brand</h6></a>
+        <p>Develop: </p>
+        <div class="cards other-cards">
+            <div class="card">
+                <a href="content/loc_admin_review_logs/Admin String Standardization - EN/VTEXAdminstringstandardizationinEnglish.html">
+                <div class="upper others-upper">
+                    <span class="material-symbols-outlined">web_stories</span>
+                </div>
+                <div class="lower">
+                    <h6>VTEX IO</h6>
+                    <p>Short description.</p>
+                </div>
+                </a>
+            </div>
         </div>
+        <p>Marketing:</p>
+        <div class="cards other-cards">
+            <div class="card">
+                <a href="#">
+                <div class="upper others-upper">
+                    <span class="material-symbols-outlined">translate</span>
+                </div>
+                <div class="lower">
+                    <h6>Brand</h6>
+                    <p>Short description.</p>
+                </div>
+                </a>
+            </div>
         </div>
         <p class="line">_______________________________</p>
         <p class="backTop"><a href="#header">Back to top</a></p>

diff --git a/style.css b/style.css
@@ -159,18 +159,30 @@ p {
 
 .others {
     background-color: #F8F7FC;
-    display: flex;
-    flex-direction: column;
     align-items: center;
     margin-bottom: -1rem;
     text-align: center;
 }
 
-.others > .flex > .left > a:hover, .backTop > a:hover,
+
+.other-cards {
+    background-color: #F8F7FC;
+    padding-bottom: 1rem;
+}
+
+.others-upper {
+    background-color: #E7E9EE;
+}
+
+.lower > h6 {
+    color: black;
+}
+
+/* .others > .flex > .left > a:hover, .backTop > a:hover,
 .others > .flex > .middle > a:hover, .backTop > a:hover,
 .others > .flex > .right > a:hover, .backTop > a:hover {
     text-decoration: underline black;
-}
+} */
 
 .othersIcon {
     text-align: center;
@@ -263,6 +275,8 @@ footer {
         padding: 0.3rem;
     }
 }
+
+/* Full HD monitors and above */
 @media only screen and (min-width: 1280px) {
 
     body {
@@ -279,7 +293,7 @@ footer {
     .cards {
         width: 100%;
         margin: auto;
-        margin-top: -6rem;
+        margin-top: -5rem;
         gap: 2rem;
     }