From 77a746510b64412d8c23d3f2df0842de1f1b4257 Mon Sep 17 00:00:00 2001
From: Nez27 <phanhuuloi15@gmail.com>
Date: Tue, 4 Jul 2023 17:36:49 +0700
Subject: [PATCH] Update HTML and CSS file

---
 README.md                         |  15 +++--
 src/index.html                    | 102 ++++++++++++++++------------
 src/style/abstracts/variables.css |   1 -
 src/style/main.css                | 107 +++++++++++++-----------------
 4 files changed, 114 insertions(+), 111 deletions(-)

diff --git a/README.md b/README.md
index 412306c..b9409d7 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
   - Build a website using HTML5, CSS3.
 - Design: [link](<https://www.figma.com/file/yZoAxrvKsf3mke9VZLNIrw/Responsive-Startup-Website-(Community)>)
 - Plan: [practice-one](https://docs.google.com/document/d/142yCLkrdfBK6uohQzY1Q9DheIuVU5K8H/edit)
-- Deploy: _update later_
+- Deploy: [link](https://html-css-training-one.nezumi.site/)
 
 ## Requirements
 
@@ -30,7 +30,8 @@
 ## Information
 
 - Timeline:
-  - The practice should be done in 3 days. However, my code is not clean so be needed to review more and it takes about 4 days to complete.
+  - Estimate: 3 days
+  - Actual: 4 days.
   - Calendar:
     - Start: 2023/06/28
     - End: 2023/07/03
@@ -46,14 +47,16 @@
   - With HTTPS:
     - `$ git clone https://github.com/phuocduong-agilityio/loi-phan-internship.git`.
 - Step 2: Move to folder which just cloned in your computer.
-  - `cd internship-loi-phan\practice\practice-01`.
+  - `cd ./internship-loi-phan`.
 - Step 3: Move it to branch html-css-practice-one.
   - `$ git checkout html-css-practice-one`.
-- Step 4:
-  - Open terminal > `npm i` or `yarn i`.
+- Step 4: Move to folder practice-01.
+  - `$ cd ./practice/practice-01`.
 - Step 5:
-  - Run `npm start` or `yarn start`.
+  - Open terminal > `npm i`.
 - Step 6:
+  - Run `npm start`.
+- Step 7:
   - Open http://localhost:1234/ in browser.
 
 ## Author
diff --git a/src/index.html b/src/index.html
index 5b09257..298d6cb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,10 +14,10 @@
         <!-- Header -->
         <div class="width-container">
           <header>
-            <div class="container flex-center-row-space-between">
+            <div class="container divide-content-center text text--md">
               <img src="./assets/images/logo.svg" alt="" class="logo" />
               <nav class="nav">
-                <ul class="nav__lists">
+                <ul class="nav__lists d-flex justify-content-between">
                   <li class="nav__item">
                     <a href="javascript:void(0)" class="nav__item-link">Home</a>
                   </li>
@@ -42,18 +42,20 @@
           </header>
 
           <!-- Welcome section -->
-          <section class="welcome">
-            <div class="welcome__content">
-              <span class="welcome__title">Welcome</span>
-              <h1 class="welcome__heading">
+          <section class="welcome d-flex align-item-center">
+            <div class="welcome__content d-flex flex-column">
+              <span class="welcome__title text--bold">Welcome</span>
+              <h1 class="welcome__heading text--secondary">
                 Lorem ipsum dolor sit amet consectetur
               </h1>
-              <p class="welcome__description">
+              <p class="welcome__description text text--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?
               </p>
-              <a href="javascript:void(0)" class="btn btn-primary">Explore</a>
+              <a href="javascript:void(0)" class="btn btn-primary text"
+                >Explore</a
+              >
             </div>
             <img
               src="./assets/images/header-image.png"
@@ -69,17 +71,19 @@
         <section class="sponsor">
           <div class="sponsor__container align-center">
             <div class="sponsor__content align-center">
-              <span class="sponsor__title text--primary-color-uppercase"
+              <span class="sponsor__title text--bold text--title"
                 >Partners</span
               >
-              <h2 class="sponsor__heading">Lorem Ipsum Dolor</h2>
-              <p class="sponsor__description text--black-fs-md">
+              <h2 class="sponsor__heading text--secondary text--lg">
+                Lorem Ipsum Dolor
+              </h2>
+              <p class="sponsor__description text">
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
               </p>
             </div>
 
             <!-- Logo items -->
-            <ul class="sponsor__logos">
+            <ul class="sponsor__logos d-flex">
               <li class="sponsor__logo-item">
                 <img src="./assets/images/logo-1.png" alt="Logo Sponsor" />
               </li>
@@ -96,7 +100,7 @@
                 <img src="./assets/images/logo-5.png" alt="Logo Sponsor" />
               </li>
             </ul>
-            <a href="javascript:void(0)" class="btn btn-secondary"
+            <a href="javascript:void(0)" class="btn btn-secondary text"
               >Learn More</a
             >
           </div>
@@ -104,7 +108,7 @@
 
         <!-- Conversation section -->
         <section class="conversation">
-          <div class="conversation__container flex-center-row-space-between">
+          <div class="conversation__container divide-content-center">
             <!-- Conversation image -->
             <img
               src="./assets/images/conversation.png"
@@ -113,16 +117,16 @@
             />
 
             <!-- Conversation content -->
-            <div class="conversation__content">
-              <h2 class="conversation__heading">
+            <div class="conversation__content d-flex flex-column">
+              <h2 class="conversation__heading text--secondary text--lg">
                 Lorem ipsum dolor sit amet consectetur
               </h2>
-              <p class="conversation__description text--gray-fs-sm">
+              <p class="conversation__description text text--gray text--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?
               </p>
-              <a href="javascript:void(0)" class="btn btn-secondary"
+              <a href="javascript:void(0)" class="btn btn-secondary text"
                 >Learn More</a
               >
             </div>
@@ -131,18 +135,18 @@
 
         <!-- Security section -->
         <section class="security">
-          <div class="security__container flex-center-row-space-between">
+          <div class="security__container divide-content-center">
             <!-- Security content -->
-            <div class="security__content">
-              <h2 class="security__heading">
+            <div class="security__content d-flex flex-column">
+              <h2 class="security__heading text--secondary text--lg">
                 Lorem ipsum dolor sit amet consectetur
               </h2>
-              <p class="security__description text--gray-fs-sm">
+              <p class="security__description text text--gray text--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?
               </p>
-              <a href="javascript:void(0)" class="btn btn-secondary"
+              <a href="javascript:void(0)" class="btn btn-secondary text"
                 >Learn More</a
               >
             </div>
@@ -161,18 +165,18 @@
           <div class="team__container align-center">
             <!-- Team content -->
             <div class="team__content align-center">
-              <span class="team__title text--primary-color-uppercase"
-                >Team</span
-              >
-              <h2 class="team__heading">Our talents</h2>
-              <p class="team__description text--black-fs-md">
+              <span class="team__title text--bold text--title">Team</span>
+              <h2 class="team__heading text--secondary text--lg">
+                Our talents
+              </h2>
+              <p class="team__description text">
                 Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos,
                 ab,
               </p>
             </div>
 
             <!-- Avatar Image -->
-            <div class="team__image-container">
+            <div class="team__image-container d-flex">
               <!-- Frame 1 -->
               <div class="team__frame">
                 <div class="team__image-content align-center">
@@ -181,9 +185,11 @@
                     alt="Avatar Image"
                     class="team__image"
                   />
-                  <div class="team__information">
-                    <span class="team__name">Peg legge</span>
-                    <span class="team__position">Ceo</span>
+                  <div class="team__information d-flex flex-column">
+                    <span class="team__name text--secondary">Peg legge</span>
+                    <span class="team__position text text--sm text--gray"
+                      >Ceo</span
+                    >
                   </div>
                 </div>
               </div>
@@ -197,8 +203,12 @@
                     class="team__image"
                   />
                   <div class="team__information">
-                    <span class="team__name">Richard guerra</span>
-                    <span class="team__position">Cto</span>
+                    <span class="team__name text--secondary"
+                      >Richard guerra</span
+                    >
+                    <span class="team__position text text--sm text--gray"
+                      >Cto</span
+                    >
                   </div>
                 </div>
               </div>
@@ -212,8 +222,12 @@
                     class="team__image"
                   />
                   <div class="team__information">
-                    <span class="team__name">Alexandra stolz</span>
-                    <span class="team__position">Designer</span>
+                    <span class="team__name text--secondary"
+                      >Alexandra stolz</span
+                    >
+                    <span class="team__position text text--sm text--gray"
+                      >Designer</span
+                    >
                   </div>
                 </div>
               </div>
@@ -227,13 +241,17 @@
                     class="team__image"
                   />
                   <div class="team__information">
-                    <span class="team__name">Peg legge</span>
-                    <span class="team__position">Developer</span>
+                    <span class="team__name text--secondary">Janet bray</span>
+                    <span class="team__position text text--sm text--gray"
+                      >Developer</span
+                    >
                   </div>
                 </div>
               </div>
             </div>
-            <a href="javascript:void(0)" class="btn btn-secondary">View Team</a>
+            <a href="javascript:void(0)" class="btn btn-secondary text"
+              >View Team</a
+            >
           </div>
         </section>
       </div>
@@ -241,8 +259,8 @@
       <!-- Footer -->
       <footer class="footer">
         <div class="background">
-          <div class="footer__content">
-            <div class="footer__logos">
+          <div class="footer__content d-flex justify-content-between">
+            <div class="footer__logos d-flex">
               <a href="javascript:void(0)"
                 ><img
                   src="./assets/images/facebook.svg"
@@ -292,7 +310,7 @@
               </a>
             </div>
 
-            <span class="footer__text"
+            <span class="footer__text text"
               >&#64; Start, 2022. All rights reserved.</span
             >
           </div>
diff --git a/src/style/abstracts/variables.css b/src/style/abstracts/variables.css
index 4440922..f0c15ca 100644
--- a/src/style/abstracts/variables.css
+++ b/src/style/abstracts/variables.css
@@ -8,7 +8,6 @@
   --fs-md: 20px;
   --fs-lg: 40px;
   --max-width: 1180px;
-  --ff-secondary-regular: CrimsonText-Regular;
   --ff-secondary-bold: CrimsonText-Bold;
   --ff-primary-medium: WorkSans-Medium;
   --ff-primary-bold: WorkSans-Bold;
diff --git a/src/style/main.css b/src/style/main.css
index 918a9ef..bf6cbac 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -15,30 +15,63 @@
   margin: auto;
 }
 
-.flex-center-row-space-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.text--black-fs-md {
+.text {
   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);
+.text--bold {
+  font-family: var(--ff-primary-bold);
+}
+
+.text--gray {
   color: var(--gray);
 }
 
-.text--primary-color-uppercase {
-  font-family: var(--ff-primary-bold);
+.text--sm {
+  font-size: var(--fs-sm);
+}
+
+.text--lg {
+  font-size: var(--fs-lg);
+}
+
+.text--secondary {
+  font-family: var(--ff-secondary-bold);
+}
+
+.text--title {
   letter-spacing: 5px;
   text-transform: uppercase;
   color: var(--primary-color);
 }
 
+.d-flex {
+  display: flex;
+}
+
+.justify-content-around {
+  justify-content: space-around;
+}
+
+.justify-content-between {
+  justify-content: space-between;
+}
+
+.align-item-center {
+  align-items: center;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.divide-content-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 /* Header */
 .background {
   background-color: var(--primary-color);
@@ -48,8 +81,6 @@
   padding: 37px 0px;
   margin: auto;
   color: var(--white);
-  font-family: var(--ff-primary-regular);
-  font-size: var(--fs-md);
 }
 
 .logo {
@@ -58,8 +89,6 @@
 
 .nav__lists {
   list-style: none;
-  display: flex;
-  justify-content: space-between;
   gap: 30px;
 }
 
@@ -76,20 +105,15 @@
 /* Welcome section */
 .welcome {
   margin: auto;
-  display: flex;
   gap: 120px;
   padding-bottom: 82.87px;
-  align-items: center;
 }
 
 .welcome__content {
-  display: flex;
-  flex-direction: column;
   gap: 15px;
 }
 
 .welcome__title {
-  font-family: var(--ff-primary-bold);
   letter-spacing: 5px;
   text-transform: uppercase;
   color: var(--white);
@@ -97,13 +121,10 @@
 
 .welcome__heading {
   font-size: var(--fs-lg);
-  font-family: var(--ff-secondary-bold);
   color: var(--white);
 }
 
 .welcome__description {
-  font-size: var(--fs-sm);
-  font-family: var(--ff-primary-regular);
   color: var(--white);
   margin-bottom: 25px;
 }
@@ -119,8 +140,6 @@
   border: none;
 
   /* Text */
-  font-family: var(--ff-primary-regular);
-  font-size: var(--fs-md);
   text-decoration: none;
 
   /* Other */
@@ -167,17 +186,11 @@
   width: 411px;
 }
 
-.sponsor__heading {
-  font-size: var(--fs-lg);
-  font-family: var(--ff-secondary-bold);
-}
-
 .sponsor__description {
   text-align: center;
 }
 
 .sponsor__logos {
-  display: flex;
   gap: 68px;
 }
 
@@ -196,16 +209,9 @@
 
 .conversation__content {
   width: 470px;
-  display: flex;
-  flex-direction: column;
   gap: 16px;
 }
 
-.conversation__heading {
-  font-size: var(--fs-lg);
-  font-family: var(--ff-secondary-bold);
-}
-
 /* Security section */
 .security__container {
   margin: 60px auto;
@@ -213,16 +219,9 @@
 
 .security__content {
   width: 470px;
-  display: flex;
-  flex-direction: column;
   gap: 16px;
 }
 
-.security__heading {
-  font-size: var(--fs-lg);
-  font-family: var(--ff-secondary-bold);
-}
-
 /* Team section */
 
 .team__container {
@@ -235,17 +234,11 @@
   gap: 16px;
 }
 
-.team__heading {
-  font-size: var(--fs-lg);
-  font-family: var(--ff-secondary-bold);
-}
-
 .team__description {
   text-align: center;
 }
 
 .team__image-container {
-  display: flex;
   gap: 35px;
 }
 
@@ -271,41 +264,31 @@
 }
 
 .team__information {
-  display: flex;
-  flex-direction: column;
   gap: 17px;
   width: 100%;
 }
 
 .team__name {
   font-size: 24px;
-  font-family: var(--ff-secondary-bold);
   text-transform: capitalize;
 }
 
 .team__position {
-  font-size: var(--fs-sm);
-  font-family: var(--ff-primary-regular);
   text-transform: uppercase;
 }
 
 /* Footer */
 .footer__content {
   padding: 50px 131px;
-  display: flex;
-  justify-content: space-between;
   width: var(--max-width);
   margin: auto;
 }
 
 .footer__logos {
-  display: flex;
   gap: 20px;
 }
 
 .footer__text {
-  font-size: var(--fs-md);
-  font-family: var(--ff-primary-regular);
   line-height: 125%;
 
   color: var(--white);