Merge pull request #34 from phuocduong-agilityio/feature/conversation

Implement conversation UI

practice/practice-01/src/index.html

@@ -67,6 +67,7 @@
           </p>
         </div>
 
+        <!-- Logo items -->
         <ul class="sponsor__logos">
           <li class="sponsor__logo-item">
             <img src="./assets/images/logo-1.png" alt="Logo Sponsor" />
@@ -87,5 +88,30 @@
         <a href="javascript:void(0)" class="btn btn-secondary">Learn More</a>
       </div>
     </section>
+
+    <!-- Conversation section -->
+    <section class="conversation">
+      <div class="conversation__container">
+        <!-- Conversation image -->
+        <img
+          src="./assets/images/conversation.png"
+          alt="Conversation Image"
+          class="conversation__image"
+        />
+
+        <!-- Conversation content -->
+        <div class="conversation__content">
+          <h2 class="conversation__heading">
+            Lorem ipsum dolor sit amet consectetur
+          </h2>
+          <p class="conversation__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>
+      </div>
+    </section>
   </body>
 </html>

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

@@ -171,3 +171,31 @@
   display: flex;
   gap: 68px;
 }
+
+/* Conversation Section */
+.conversation__container {
+  width: var(--width);
+  margin: 60px auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.conversation__content {
+  width: 470px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.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%;
+}