Merge pull request #32 from phuocduong-agilityio/feature/pattern

Implement pattern UI

practice/practice-01/src/index.html

@@ -19,7 +19,9 @@
                 <a href="javascript:void(0)" class="nav__item-link">Home</a>
               </li>
               <li class="nav__item">
-                <a href="javascript:void(0)" class="nav__item-link">Portfolio</a>
+                <a href="javascript:void(0)" class="nav__item-link"
+                  >Portfolio</a
+                >
               </li>
               <li class="nav__item">
                 <a href="javascript:void(0)" class="nav__item-link">Services</a>
@@ -32,6 +34,7 @@
         </div>
       </header>
 
+      <!-- Welcome section -->
       <section class="welcome">
         <div class="welcome__content">
           <span class="welcome__title">Welcome</span>
@@ -43,7 +46,7 @@
             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">Explore</a>
+          <a href="javascript:void(0)" class="btn btn-primary">Explore</a>
         </div>
         <img
           src="./assets/images/header-image.png"
@@ -52,5 +55,37 @@
         />
       </section>
     </div>
+
+    <!-- Sponsor section -->
+    <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">
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+          </p>
+        </div>
+
+        <ul class="sponsor__logos">
+          <li class="sponsor__logo-item">
+            <img src="./assets/images/logo-1.png" alt="Logo Sponsor" />
+          </li>
+          <li class="sponsor__logo-item">
+            <img src="./assets/images/logo-2.png" alt="Logo Sponsor" />
+          </li>
+          <li class="sponsor__logo-item">
+            <img src="./assets/images/logo-3.png" alt="Logo Sponsor" />
+          </li>
+          <li class="sponsor__logo-item">
+            <img src="./assets/images/logo-4.png" alt="Logo Sponsor" />
+          </li>
+          <li class="sponsor__logo-item">
+            <img src="./assets/images/logo-5.png" alt="Logo Sponsor" />
+          </li>
+        </ul>
+        <a href="javascript:void(0)" class="btn btn-secondary">Learn More</a>
+      </div>
+    </section>
   </body>
 </html>

practice/practice-01/src/style/abstracts/variables.css

@@ -6,6 +6,7 @@
   --fs-sm: 15px;
   --fs-md: 20px;
   --fs-lg: 40px;
+  --width: 1180px;
   --ff-secondary-regular: CrimsonText-Regular;
   --ff-secondary-bold: CrimsonText-Bold;
   --ff-primary-medium: WorkSans-Medium;

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

@@ -39,6 +39,7 @@
   color: var(--text-dark);
 }
 
+/* Welcome section */
 .welcome {
   margin: auto;
   width: 1180px;
@@ -93,10 +94,6 @@
   height: 48px;
   border: none;
 
-  /* Color */
-  color: var(--black);
-  background-color: var(--white);
-
   /* Text */
   font-family: var(--ff-primary-regular);
   font-size: var(--fs-md);
@@ -108,7 +105,69 @@
   transition: 0.2s;
 }
 
-.btn:hover {
+/* Button */
+.btn-primary {
+  color: var(--black);
+  background-color: var(--white);
+}
+
+.btn-primary:hover {
   background-color: var(--black);
   color: var(--white);
 }
+
+.btn-secondary {
+  color: var(--white);
+  background-color: var(--black);
+  border: 1px solid var(--black);
+}
+
+.btn-secondary:hover {
+  background-color: var(--white);
+  color: var(--black);
+}
+
+/* Pattern Section */
+.sponsor__container {
+  width: var(--width);
+  margin: 60 auto;
+  gap: 55px;
+}
+
+.align-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sponsor__content {
+  gap: 16px;
+  width: 411px;
+}
+
+.sponsor__title {
+  font-family: var(--ff-primary-bold);
+  letter-spacing: 5px;
+  text-transform: uppercase;
+  color: var(--primary-color);
+}
+
+.line-height-125 {
+  line-height: 125%;
+}
+
+.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;
+}
+
+.sponsor__logos {
+  display: flex;
+  gap: 68px;
+}