Improving card styles

vtex · Sep 28, 2023 · 302ba80 · 302ba80
1 parent 45cbc9d
commit 302ba80
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 38 deletions.
diff --git a/content/internal.js b/content/internal.js
@@ -5,9 +5,8 @@ let hamburger = document.querySelector(".hamburger");
 
 function handleInternal() {
 	var currentUrl = window.location.href;
-	// let id = getParameterByName('id', document.referrer);
     if (currentUrl.includes("styleGuides")) {
-        document.getElementById("main-frame").src = "./loc_style_guides/Localization Style Guide - PT/VTEXPortugueseStyleGuidePT.html";
+        document.getElementById("main-frame").src = "./loc_style_guides/Localization Style Guide - EN/VTEXLocalizationStyleGuideEN.html";
 		expandItem("styleGuides");
     }
     else if (currentUrl.includes("glossaries")) {

diff --git a/index.html b/index.html
@@ -63,17 +63,6 @@ <h6>Translation Memories</h6>
             </div>
             </a>
         </div>
-        <div class="card" title="Localization & Internationalization">
-            <a href="#">
-            <div class="upper">
-                <span class="material-symbols-outlined">description</span>
-            </div>
-            <div class="lower">
-                <h6>Localization & Internationalization</h6>
-                <p>Create a product that is ready for a global audience by following localization and internationalization best practices.</p>
-            </div>
-            </a>
-        </div>
     </div>
     <div class="others">
         <h5>Other Resources</h5>
@@ -101,6 +90,31 @@ <h6>FastStore</h6>
                 </div>
                 </a>
             </div>
+            <div class="card" title="Localization & Internationalization">
+                <a href="https://www.notion.so/vtexhandbook/Localization-and-Internationalization-28e89c059cfa45649cfe31513ccac34c" target="_blank">
+                <div class="upper others-upper">
+                    <span class="material-symbols-outlined">ungroup</span>
+                </div>
+                <div class="lower">
+                    <h6>Localization & Internationalization</h6>
+                    <p>Create a product that is ready for a global audience by following localization and internationalization best practices.</p>
+                </div>
+                </a>
+            </div>
+        </div>
+        <p class="other-titles">Marketing:</p>
+        <div class="cards other-cards">
+            <div class="card" title="Brand - Click to visit their website">
+                <a href="https://brand.vtex.com" target="_blank">
+                <div class="upper others-upper">
+                    <span class="material-symbols-outlined">ungroup</span>
+                </div>
+                <div class="lower">
+                    <h6>Brand</h6>
+                    <p>Make VTEX memorable by using the graphic codes that brings its essence to life.</p>
+                </div>
+                </a>
+            </div>
         </div>
         <p class="other-titles">Develop: </p>
         <div class="cards other-cards">
@@ -127,20 +141,6 @@ <h6>Help Center</h6>
                 </a>
             </div>
         </div>
-        <p class="other-titles">Marketing:</p>
-        <div class="cards other-cards">
-            <div class="card" title="Brand - Click to visit their website">
-                <a href="https://brand.vtex.com" target="_blank">
-                <div class="upper others-upper">
-                    <span class="material-symbols-outlined">ungroup</span>
-                </div>
-                <div class="lower">
-                    <h6>Brand</h6>
-                    <p>Make VTEX memorable by using the graphic codes that brings its essence to life.</p>
-                </div>
-                </a>
-            </div>
-        </div>
         <p class="line">_______________________________</p>
         <p class="backTop"><a href="#header">Back to top</a></p>
         <footer>

diff --git a/style.css b/style.css
@@ -85,7 +85,7 @@ h1, h2, h3, h4, h5, h6, p {
 h4 {
     font-size: var(--fs-400);
     text-align: center;
-    margin-top: 4rem;
+    margin-top: 4.5rem;
 }
 
 h5 {
@@ -106,7 +106,7 @@ p {
 .cards {
     display: flex;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: 1.7rem;
     justify-content: center;
     align-items: center;
     width: 100%;
@@ -115,18 +115,18 @@ p {
 }
 
 .card {
-    background-color: #FFF; /* Temporary color just for testing */
+    background-color: #FFF;
     width: 300px;
-    height: 215px;
+    height: 300px;
     align-items: center;
     text-align: center;
     border-radius: 10px;
     outline: 1px solid #E7E9EE;
 }
 
 .upper {
-    margin: 0.5rem;
-    height: 27.5%;
+    margin: 1.5rem;
+    height: 20%;
     width: 17.5%;
     background-color: #e31c58;
     color: white;
@@ -148,13 +148,31 @@ p {
     color: white;
 }
 
+.lower > h6 {
+    text-align: left;
+    margin-left: 1rem;
+    margin-top: -0.5rem;
+}
+
+.lower > p {
+    padding: 1rem;
+    margin-left: 0.7rem;
+    text-wrap: balance;
+    color: #5B6E84;
+    text-align: left;
+}
+
 .others {
     background-color: #F8F7FC;
     align-items: center;
     margin-bottom: -1rem;
     text-align: center;
 }
 
+.others > p {
+    margin-bottom: 1rem;
+}
+
 .other-titles {
     font-weight: bold;
 }
@@ -196,10 +214,6 @@ footer {
     font-size: 0.8rem;
 }
 
-.lower > h6 {
-    margin-top: -1rem;
-}
-
 /* Tablet and medium size screens */
 @media only screen and (min-width: 615px) and (max-width: 1279px) { /*Confirmar max value */
 
@@ -239,7 +253,11 @@ footer {
     .card {
         flex-basis: calc(18% - 10px);
         justify-content: center;
-        height: 250px;
+        height: 330px;
+    }
+
+    .upper {
+        height: 13.5%;
     }
 
     .others {
@@ -281,6 +299,14 @@ footer {
         justify-content: center;
     }
 
+    .card:hover > a > .upper {
+        width: 100%;
+        height: 23.5%;
+        margin: 0;
+        margin-bottom: 1rem;
+        border-radius: 10px 10px 0 0;
+    }
+
     .others {
         padding-top: 1.2rem;
     }