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">
+        <div class="sponsor__content">
+          <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>
+
+        <ul class="sponsor__logo">
+          <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/main.css

@@ -3,6 +3,7 @@
 
 .header__background {
   background-color: var(--primary-color);
+  margin-bottom: 60px;
 }
 
 .container {
@@ -39,6 +40,7 @@
   color: var(--text-dark);
 }
 
+/* Welcome section */
 .welcome {
   margin: auto;
   width: 1180px;
@@ -93,10 +95,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 +106,72 @@
   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: 100%;
+  max-width: var(--max-width);
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 55px;
+  margin-bottom: 73px;
+}
+
+.sponsor__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  max-width: 411px;
+}
+
+.sponsor__title {
+  font-family: var(--ff-primary-bold);
+  font-style: inherit;
+  line-height: 125%;
+  letter-spacing: 5px;
+  text-transform: uppercase;
+  color: var(--primary-color);
+}
+
+.sponsor__heading {
+  font-size: var(--fs-lg);
+  font-family: var(--ff-secondary-bold);
+  font-style: normal;
+  line-height: 125%;
+}
+
+.sponsor__description {
+  font-size: var(--fs-md);
+  font-family: var(--ff-primary-regular);
+  line-height: 125%;
+  text-align: center;
+}
+
+.sponsor__logo {
+  display: flex;
+  gap: 68px;
+}