Merge pull request #36 from phuocduong-agilityio/feature/security

Feature/security

practice/practice-01/src/index.html

@@ -69,11 +69,9 @@
         <section class="sponsor">
           <div class="sponsor__container align-center">
             <div class="sponsor__content align-center">
-              <span class="sponsor__title line-height-125">Partners</span>
-              <h2 class="sponsor__heading line-height-125">
-                Lorem Ipsum Dolor
-              </h2>
-              <p class="sponsor__description line-height-125">
+              <span class="sponsor__title">Partners</span>
+              <h2 class="sponsor__heading">Lorem Ipsum Dolor</h2>
+              <p class="sponsor__description">
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
               </p>
             </div>
@@ -128,6 +126,33 @@
             </div>
           </div>
         </section>
+
+        <!-- Security section -->
+        <section class="security">
+          <div class="security__container">
+            <!-- Security content -->
+            <div class="security__content">
+              <h2 class="security__heading">
+                Lorem ipsum dolor sit amet consectetur
+              </h2>
+              <p class="security__description">
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+                Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos
+                error ipsum, voluptate culpa nesciunt delectus iste?
+              </p>
+              <a href="javascript:void(0)" class="btn btn-secondary"
+                >Learn More</a
+              >
+            </div>
+
+            <!-- Security image -->
+            <img
+              src="./assets/images/security.png"
+              alt="Image Security"
+              class="security__image"
+            />
+          </div>
+        </section>
       </div>
     </div>
   </body>

practice/practice-01/src/style/base/reset.css

@@ -1,4 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
+/* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */
@@ -105,9 +105,6 @@ nav,
 section {
   display: block;
 }
-body {
-  line-height: 1;
-}
 ol,
 ul {
   list-style: none;

practice/practice-01/src/style/main.css

@@ -1,6 +1,10 @@
 @import url("./abstracts/variables.css");
 @import url("./base/typo.css");
 
+* {
+  line-height: 125%;
+}
+
 .wrapper {
   width: 1440px;
   margin: auto;
@@ -63,11 +67,6 @@
   gap: 15px;
 }
 
-.welcome__image {
-  width: 644.279px;
-  height: 378.13px;
-}
-
 .welcome__title {
   font-family: var(--ff-primary-bold);
   letter-spacing: 5px;
@@ -78,7 +77,6 @@
 .welcome__heading {
   font-size: var(--fs-lg);
   font-family: var(--ff-secondary-bold);
-  line-height: 125%;
   color: var(--white);
 }
 
@@ -87,7 +85,6 @@
   font-size: var(--fs-sm);
   letter-spacing: 0px;
   font-family: var(--ff-primary-regular);
-  line-height: 125%;
   color: var(--white);
   margin-bottom: 25px;
 }
@@ -106,7 +103,6 @@
   font-family: var(--ff-primary-regular);
   font-size: var(--fs-md);
   text-decoration: none;
-  line-height: 125%;
 
   /* Other */
   cursor: pointer;
@@ -159,10 +155,6 @@
   color: var(--primary-color);
 }
 
-.line-height-125 {
-  line-height: 125%;
-}
-
 .sponsor__heading {
   font-size: var(--fs-lg);
   font-family: var(--ff-secondary-bold);
@@ -197,11 +189,34 @@
 .conversation__heading {
   font-size: var(--fs-lg);
   font-family: var(--ff-secondary-bold);
-  line-height: 125%;
 }
 
 .conversation__description {
   font-size: var(--fs-sm);
   font-family: var(--ff-primary-regular);
-  line-height: 125%;
-}
+}
+
+/* Security section */
+.security__container {
+  margin: 60px auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.security__content {
+  width: 470px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.security__heading {
+  font-size: var(--fs-lg);
+  font-family: var(--ff-secondary-bold);
+}
+
+.security__description {
+  font-size: 15px;
+  font-family: var(--ff-primary-regular);
+}