Implement security UI

practice/practice-01/src/index.html

@@ -113,5 +113,30 @@
         </div>
       </div>
     </section>
+
+    <!-- Security section -->
+    <section class="security">
+      <div class="security__container">
+        <!-- Security content -->
+        <div class="security__content">
+          <h2 class="security__heading">
+            Lorem ipsum dolor sit amet consectetur
+          </h2>
+          <p class="security__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>
+
+        <!-- Security image -->
+        <img
+          src="./assets/images/security.png"
+          alt="Image Security"
+          class="security__image"
+        />
+      </div>
+    </section>
   </body>
 </html>

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

@@ -199,3 +199,31 @@
   font-family: var(--ff-primary-regular);
   line-height: 125%;
 }
+
+/* Security section */
+.security__container {
+  width: var(--width);
+  margin: 60px auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.security__content {
+  width: 470px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.security__heading {
+  font-size: var(--fs-lg);
+  font-family: var(--ff-secondary-bold);
+  line-height: 125%;
+}
+
+.security__description {
+  font-size: 15px;
+  font-family: var(--ff-primary-regular);
+  line-height: 125%;
+}