From 87f2f0a9934ee93180566588f20ec2911e360f51 Mon Sep 17 00:00:00 2001
From: Nez27 <phanhuuloi15@gmail.com>
Date: Mon, 3 Jul 2023 16:50:13 +0700
Subject: [PATCH] Improve UI, using BEM modifier and refactor code

---
 practice/practice-01/src/index.html           | 22 +++---
 .../src/style/abstracts/variables.css         |  1 +
 practice/practice-01/src/style/main.css       | 79 ++++++++-----------
 3 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/practice/practice-01/src/index.html b/practice/practice-01/src/index.html
index d1238ec..5b09257 100644
--- a/practice/practice-01/src/index.html
+++ b/practice/practice-01/src/index.html
@@ -14,7 +14,7 @@
         <!-- Header -->
         <div class="width-container">
           <header>
-            <div class="container">
+            <div class="container flex-center-row-space-between">
               <img src="./assets/images/logo.svg" alt="" class="logo" />
               <nav class="nav">
                 <ul class="nav__lists">
@@ -69,9 +69,11 @@
         <section class="sponsor">
           <div class="sponsor__container align-center">
             <div class="sponsor__content align-center">
-              <span class="sponsor__title">Partners</span>
+              <span class="sponsor__title text--primary-color-uppercase"
+                >Partners</span
+              >
               <h2 class="sponsor__heading">Lorem Ipsum Dolor</h2>
-              <p class="sponsor__description">
+              <p class="sponsor__description text--black-fs-md">
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
               </p>
             </div>
@@ -102,7 +104,7 @@
 
         <!-- Conversation section -->
         <section class="conversation">
-          <div class="conversation__container">
+          <div class="conversation__container flex-center-row-space-between">
             <!-- Conversation image -->
             <img
               src="./assets/images/conversation.png"
@@ -115,7 +117,7 @@
               <h2 class="conversation__heading">
                 Lorem ipsum dolor sit amet consectetur
               </h2>
-              <p class="conversation__description">
+              <p class="conversation__description text--gray-fs-sm">
                 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?
@@ -129,13 +131,13 @@
 
         <!-- Security section -->
         <section class="security">
-          <div class="security__container">
+          <div class="security__container flex-center-row-space-between">
             <!-- Security content -->
             <div class="security__content">
               <h2 class="security__heading">
                 Lorem ipsum dolor sit amet consectetur
               </h2>
-              <p class="security__description">
+              <p class="security__description text--gray-fs-sm">
                 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?
@@ -159,9 +161,11 @@
           <div class="team__container align-center">
             <!-- Team content -->
             <div class="team__content align-center">
-              <span class="team__title">Team</span>
+              <span class="team__title text--primary-color-uppercase"
+                >Team</span
+              >
               <h2 class="team__heading">Our talents</h2>
-              <p class="team__description">
+              <p class="team__description text--black-fs-md">
                 Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
                 ab,
               </p>
diff --git a/practice/practice-01/src/style/abstracts/variables.css b/practice/practice-01/src/style/abstracts/variables.css
index 75ac2f0..4440922 100644
--- a/practice/practice-01/src/style/abstracts/variables.css
+++ b/practice/practice-01/src/style/abstracts/variables.css
@@ -3,6 +3,7 @@
   --text-dark: #d6d6d6;
   --white: #ffffff;
   --black: #000000;
+  --gray: rgba(33, 37, 41, 0.50);
   --fs-sm: 15px;
   --fs-md: 20px;
   --fs-lg: 40px;
diff --git a/practice/practice-01/src/style/main.css b/practice/practice-01/src/style/main.css
index fc37e1f..918a9ef 100644
--- a/practice/practice-01/src/style/main.css
+++ b/practice/practice-01/src/style/main.css
@@ -15,16 +15,37 @@
   margin: auto;
 }
 
+.flex-center-row-space-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.text--black-fs-md {
+  font-size: var(--fs-md);
+  font-family: var(--ff-primary-regular);
+}
+
+.text--gray-fs-sm {
+  font-size: var(--fs-sm);
+  font-family: var(--ff-primary-regular);
+  color: var(--gray);
+}
+
+.text--primary-color-uppercase {
+  font-family: var(--ff-primary-bold);
+  letter-spacing: 5px;
+  text-transform: uppercase;
+  color: var(--primary-color);
+}
+
+/* Header */
 .background {
   background-color: var(--primary-color);
 }
 
 .container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 35px;
-  padding-bottom: 40px;
+  padding: 37px 0px;
   margin: auto;
   color: var(--white);
   font-family: var(--ff-primary-regular);
@@ -81,9 +102,7 @@
 }
 
 .welcome__description {
-  text-transform: none;
   font-size: var(--fs-sm);
-  letter-spacing: 0px;
   font-family: var(--ff-primary-regular);
   color: var(--white);
   margin-bottom: 25px;
@@ -148,21 +167,12 @@
   width: 411px;
 }
 
-.sponsor__title {
-  font-family: var(--ff-primary-bold);
-  letter-spacing: 5px;
-  text-transform: uppercase;
-  color: var(--primary-color);
-}
-
 .sponsor__heading {
   font-size: var(--fs-lg);
   font-family: var(--ff-secondary-bold);
 }
 
 .sponsor__description {
-  font-size: var(--fs-md);
-  font-family: var(--ff-primary-regular);
   text-align: center;
 }
 
@@ -171,12 +181,17 @@
   gap: 68px;
 }
 
+.sponsor__logo-item {
+  transition: 0.3s;
+}
+
+.sponsor__logo-item:hover {
+  transform: scale(1.2);
+}
+
 /* Conversation Section */
 .conversation__container {
   margin: 60px auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .conversation__content {
@@ -191,17 +206,9 @@
   font-family: var(--ff-secondary-bold);
 }
 
-.conversation__description {
-  font-size: var(--fs-sm);
-  font-family: var(--ff-primary-regular);
-}
-
 /* Security section */
 .security__container {
   margin: 60px auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .security__content {
@@ -216,11 +223,6 @@
   font-family: var(--ff-secondary-bold);
 }
 
-.security__description {
-  font-size: 15px;
-  font-family: var(--ff-primary-regular);
-}
-
 /* Team section */
 
 .team__container {
@@ -233,23 +235,12 @@
   gap: 16px;
 }
 
-.team__title {
-  font-family: var(--ff-primary-bold);
-  letter-spacing: 5px;
-  text-transform: uppercase;
-
-  color: var(--primary-color);
-}
-
 .team__heading {
   font-size: var(--fs-lg);
   font-family: var(--ff-secondary-bold);
 }
 
 .team__description {
-  font-size: var(--fs-md);
-  font-family: var(--ff-primary-regular);
-
   text-align: center;
 }
 
@@ -318,4 +309,4 @@
   line-height: 125%;
 
   color: var(--white);
-}
+}
\ No newline at end of file