From fbc221a0323ebbce4fb2dddb7a001c340a296408 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 30 Jun 2023 17:21:38 +0700
Subject: [PATCH] Implement footer UI

---
 .../src/assets/images/facebook.svg            |  5 ++
 .../src/assets/images/instagram.svg           |  7 +++
 .../src/assets/images/pinterest.svg           |  5 ++
 .../practice-01/src/assets/images/tiktok.svg  |  5 ++
 .../practice-01/src/assets/images/twitter.svg |  5 ++
 .../practice-01/src/assets/images/wechat.svg  |  6 +++
 .../practice-01/src/assets/images/youtube.svg |  5 ++
 practice/practice-01/src/index.html           | 49 ++++++++++++++++++-
 practice/practice-01/src/style/main.css       | 25 +++++++++-
 9 files changed, 110 insertions(+), 2 deletions(-)
 create mode 100644 practice/practice-01/src/assets/images/facebook.svg
 create mode 100644 practice/practice-01/src/assets/images/instagram.svg
 create mode 100644 practice/practice-01/src/assets/images/pinterest.svg
 create mode 100644 practice/practice-01/src/assets/images/tiktok.svg
 create mode 100644 practice/practice-01/src/assets/images/twitter.svg
 create mode 100644 practice/practice-01/src/assets/images/wechat.svg
 create mode 100644 practice/practice-01/src/assets/images/youtube.svg

diff --git a/practice/practice-01/src/assets/images/facebook.svg b/practice/practice-01/src/assets/images/facebook.svg
new file mode 100644
index 0000000..f77947c
--- /dev/null
+++ b/practice/practice-01/src/assets/images/facebook.svg
@@ -0,0 +1,5 @@
+<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 33">
+<path id="Vector" d="M9.00944 10.6251L9.50902 7.36758H6.38326V5.25323C6.38326 4.3619 6.81978 3.49347 8.21986 3.49347H9.64077V0.719781C9.64077 0.719781 8.3516 0.5 7.1184 0.5C4.54363 0.5 2.86171 2.05982 2.86171 4.88439V7.36758H0V10.6251H2.86171V18.5H6.38326V10.6251H9.00944Z" fill="white"/>
+</g>
+</svg>
diff --git a/practice/practice-01/src/assets/images/instagram.svg b/practice/practice-01/src/assets/images/instagram.svg
new file mode 100644
index 0000000..5ca3610
--- /dev/null
+++ b/practice/practice-01/src/assets/images/instagram.svg
@@ -0,0 +1,7 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 34">
+<path id="Vector" d="M14.4058 3.71362C13.8228 3.71362 13.3502 4.18624 13.3502 4.76874C13.3502 5.35175 13.8228 5.82436 14.4058 5.82436C14.9883 5.82436 15.4609 5.35175 15.4609 4.76874C15.4609 4.18624 14.9883 3.71362 14.4058 3.71362Z" fill="white"/>
+<path id="Vector_2" d="M9.71404 12.3392C8.14816 12.3392 6.87428 11.0654 6.87428 9.49999C6.87428 7.93411 8.14816 6.66025 9.71404 6.66025C11.2794 6.66025 12.5533 7.93411 12.5533 9.49999C12.5533 11.0654 11.2794 12.3392 9.71404 12.3392ZM9.71404 5.06689C7.26958 5.06689 5.28094 7.05553 5.28094 9.49999C5.28094 11.9439 7.26958 13.9326 9.71404 13.9326C12.158 13.9326 14.1466 11.9439 14.1466 9.49999C14.1466 7.05553 12.158 5.06689 9.71404 5.06689Z" fill="white"/>
+<path id="Vector_3" d="M6.04706 2.19357C3.99941 2.19357 2.33381 3.85917 2.33381 5.90682V13.0932C2.33381 15.1408 3.99941 16.8064 6.04706 16.8064H13.2334C15.2811 16.8064 16.9472 15.1408 16.9472 13.0932V5.90682C16.9472 3.85917 15.2811 2.19357 13.2334 2.19357H6.04706ZM13.2334 18.5H6.04706C3.06538 18.5 0.640747 16.0744 0.640747 13.0932V5.90682C0.640747 2.92513 3.06538 0.5 6.04706 0.5H13.2334C16.2146 0.5 18.6402 2.92513 18.6402 5.90682V13.0932C18.6402 16.0744 16.2146 18.5 13.2334 18.5Z" fill="white"/>
+</g>
+</svg>
diff --git a/practice/practice-01/src/assets/images/pinterest.svg b/practice/practice-01/src/assets/images/pinterest.svg
new file mode 100644
index 0000000..311d5a3
--- /dev/null
+++ b/practice/practice-01/src/assets/images/pinterest.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 36">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M6.33834 12.2417C6.32307 12.2936 6.30933 12.3368 6.29763 12.3806C5.63626 14.9706 5.56301 15.546 4.88384 16.7497C4.55926 17.321 4.1945 17.8628 3.79056 18.3817C3.74477 18.4402 3.70255 18.5155 3.61148 18.4972C3.51177 18.4758 3.50412 18.3863 3.49293 18.3064C3.38406 17.5194 3.32455 16.7298 3.3505 15.9357C3.38458 14.9004 3.51276 14.5453 4.8472 8.93284C4.86704 8.84737 4.84516 8.77666 4.81667 8.69882C4.49718 7.83752 4.43411 6.96299 4.7129 6.07676C5.31678 4.16236 7.48706 4.01584 7.86658 5.59549C8.10009 6.57227 7.48199 7.85023 7.00733 9.7397C6.61408 11.299 8.44909 12.407 10.0181 11.269C11.4639 10.22 12.0256 7.70423 11.9187 5.92159C11.7086 2.36752 7.81165 1.59932 5.33815 2.74399C2.50394 4.05451 1.85935 7.56839 3.13935 9.17398C3.30113 9.37849 3.4263 9.50314 3.37289 9.71071C3.29047 10.0317 3.21772 10.3558 3.1292 10.6758C3.06306 10.9134 2.8636 11.0004 2.62297 10.9022C2.15136 10.7114 1.75812 10.4112 1.43914 10.0154C0.352468 8.66982 0.0416091 6.00706 1.4783 3.75384C3.07066 1.25642 6.03259 0.246569 8.73605 0.553341C11.9655 0.920144 14.0066 3.12707 14.3892 5.63008C14.5632 6.77069 14.438 9.5825 12.8375 11.5702C10.9953 13.8539 8.01005 14.005 6.63289 12.6034C6.52707 12.4961 6.44212 12.3699 6.33834 12.2417Z" fill="white"/>
+</g>
+</svg>
diff --git a/practice/practice-01/src/assets/images/tiktok.svg b/practice/practice-01/src/assets/images/tiktok.svg
new file mode 100644
index 0000000..c3e4c4f
--- /dev/null
+++ b/practice/practice-01/src/assets/images/tiktok.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 37">
+<path id="Vector" d="M15.8491 7.78289C15.702 7.79686 15.5543 7.80434 15.4062 7.80534C13.7851 7.80534 12.2738 6.98832 11.3859 5.6321V13.0312C11.3859 16.0519 8.93684 18.5 5.91714 18.5C2.89644 18.5 0.448364 16.0519 0.448364 13.0312C0.448364 10.011 2.89644 7.56293 5.91714 7.56293C6.03087 7.56293 6.1426 7.57291 6.25483 7.57989V10.2749C6.1426 10.2614 6.03236 10.241 5.91714 10.241C4.37537 10.241 3.12588 11.4909 3.12588 13.0317C3.12588 14.5735 4.37537 15.823 5.91714 15.823C7.45892 15.823 8.82013 14.6084 8.82013 13.0666L8.84756 0.5H11.4258C11.6687 2.81191 13.5327 4.61805 15.8516 4.78764V7.78289" fill="white"/>
+</g>
+</svg>
diff --git a/practice/practice-01/src/assets/images/twitter.svg b/practice/practice-01/src/assets/images/twitter.svg
new file mode 100644
index 0000000..7637a7d
--- /dev/null
+++ b/practice/practice-01/src/assets/images/twitter.svg
@@ -0,0 +1,5 @@
+<svg width="23" height="19" viewBox="0 0 23 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 35">
+<path id="Vector" d="M22.4202 2.65762C21.7253 2.97202 20.9576 3.16229 20.2082 3.28795C20.5638 3.22842 21.0863 2.58436 21.2959 2.32389C21.6154 1.92707 21.8804 1.47428 22.0295 0.985381C22.0488 0.947225 22.0636 0.899404 22.0249 0.870406C21.9771 0.851583 21.9461 0.861255 21.9079 0.880079C21.071 1.32828 20.2062 1.65336 19.2854 1.88382C19.2091 1.90265 19.1521 1.88382 19.1042 1.83549C19.0284 1.74951 18.9562 1.66812 18.8753 1.60147C18.4882 1.27232 18.073 1.01387 17.605 0.823092C16.9904 0.572791 16.3189 0.46647 15.657 0.509204C15.0124 0.55143 14.3801 0.732542 13.8088 1.03117C13.2359 1.33031 12.7246 1.74697 12.3171 2.2491C11.8964 2.76903 11.5861 3.38207 11.4268 4.03275C11.2742 4.66053 11.2864 5.2812 11.38 5.9156C11.3943 6.02091 11.3846 6.03516 11.2895 6.02091C7.68807 5.4847 4.70277 4.19656 2.27913 1.43461C2.17382 1.31454 2.11685 1.31454 2.03087 1.44376C0.970149 3.03357 1.48447 5.58695 2.80923 6.84202C2.98628 7.0099 3.16741 7.17677 3.36328 7.32939C3.29155 7.34414 2.41039 7.24901 1.62438 6.84202C1.51958 6.77537 1.46618 6.81404 1.45702 6.93308C1.44735 7.10504 1.46209 7.26326 1.48549 7.44946C1.68899 9.06064 2.80518 10.5507 4.33344 11.1327C4.51455 11.2091 4.71551 11.2757 4.91087 11.3093C4.56289 11.3856 4.20423 11.44 3.20557 11.3617C3.08144 11.3383 3.03411 11.4003 3.08143 11.5199C3.83233 13.5645 5.45113 14.1735 6.66448 14.5199C6.82677 14.5484 6.98959 14.5484 7.15238 14.5866C7.14221 14.6013 7.13252 14.6013 7.12286 14.6156C6.72095 15.2286 5.326 15.685 4.67634 15.9119C3.49504 16.325 2.20844 16.5107 0.959984 16.3875C0.760557 16.358 0.718335 16.3606 0.664408 16.3875C0.609464 16.4216 0.656777 16.4694 0.721387 16.5213C0.97474 16.6887 1.23266 16.8368 1.49568 16.9802C2.2883 17.4004 3.115 17.7352 3.97986 17.9738C8.44407 19.2065 13.4725 18.3004 16.8246 14.9702C19.4568 12.3547 20.3797 8.74776 20.3797 5.13671C20.3797 4.99528 20.5465 4.91744 20.6452 4.84266C21.3305 4.32832 21.883 3.71224 22.3938 3.02493C22.5087 2.87027 22.5097 2.73291 22.5097 2.67644C22.5097 2.66677 22.5097 2.65762 22.5097 2.65762C22.5097 2.59962 22.5087 2.61743 22.4202 2.65762Z" fill="white"/>
+</g>
+</svg>
diff --git a/practice/practice-01/src/assets/images/wechat.svg b/practice/practice-01/src/assets/images/wechat.svg
new file mode 100644
index 0000000..da74a4c
--- /dev/null
+++ b/practice/practice-01/src/assets/images/wechat.svg
@@ -0,0 +1,6 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 38">
+<path id="Vector" d="M5.93199 15.3997L6.23673 15.5813C7.35546 16.2478 8.62835 16.6003 9.91701 16.6003C13.8929 16.6003 17.127 13.3662 17.127 9.39036C17.127 5.41501 13.8929 2.1804 9.91701 2.1804C5.94217 2.1804 2.70704 5.41501 2.70704 9.39036C2.70704 10.7029 3.0718 11.9957 3.76217 13.1286L3.94888 13.4354L3.22849 16.1241L5.93199 15.3997ZM0.851624 18.5L2.14181 13.6857C1.41125 12.367 1.02716 10.8902 1.02716 9.39036C1.02716 4.48858 5.01472 0.5 9.91701 0.5C14.8193 0.5 18.8079 4.48858 18.8079 9.39036C18.8079 14.2927 14.8193 18.2812 9.91701 18.2812C8.44571 18.2812 6.99221 17.9093 5.69134 17.2042L0.851624 18.5Z" fill="white"/>
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M13.2241 10.6271C12.8578 10.4079 12.3821 10.1637 11.9507 10.3397C11.6205 10.4755 11.4094 10.9934 11.1947 11.2575C11.0848 11.3933 10.9536 11.4142 10.7847 11.3465C9.54333 10.8515 8.59198 10.0228 7.9067 8.88112C7.79071 8.70357 7.81154 8.56367 7.95145 8.39934C8.15851 8.15565 8.41848 7.87889 8.47445 7.55024C8.53041 7.2221 8.37628 6.8385 8.24044 6.54546C8.06696 6.17204 7.87312 5.63939 7.49868 5.42775C7.15477 5.23341 6.70147 5.34227 6.39521 5.59156C5.86611 6.02298 5.6107 6.69759 5.61833 7.3671C5.62087 7.55737 5.64428 7.74713 5.68854 7.93028C5.79537 8.37136 5.99888 8.78395 6.22883 9.17518C6.40181 9.47076 6.59005 9.7577 6.79304 10.0334C7.45695 10.9355 8.28317 11.7194 9.23962 12.3055C9.71784 12.598 10.2322 12.855 10.7653 13.031C11.3631 13.2284 11.8958 13.4339 12.5414 13.3113C13.217 13.1831 13.884 12.7649 14.1521 12.1137C14.2314 11.9204 14.2711 11.7057 14.2269 11.5022C14.1348 11.0809 13.565 10.8306 13.2241 10.6271Z" fill="white"/>
+</g>
+</svg>
diff --git a/practice/practice-01/src/assets/images/youtube.svg b/practice/practice-01/src/assets/images/youtube.svg
new file mode 100644
index 0000000..45b9a08
--- /dev/null
+++ b/practice/practice-01/src/assets/images/youtube.svg
@@ -0,0 +1,5 @@
+<svg width="27" height="19" viewBox="0 0 27 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 39">
+<path id="Vector" d="M18.0369 10.0035L11.566 13.205C11.3121 13.3416 10.4502 13.1578 10.4502 12.8695V6.29853C10.4502 6.00671 11.3192 5.8229 11.5731 5.96738L17.7672 9.33693C18.0268 9.48498 18.2993 9.86121 18.0369 10.0035ZM26.5219 6.14262C26.5219 3.02627 23.9956 0.5 20.8793 0.5H6.44979C3.33344 0.5 0.807892 3.02627 0.807892 6.14262V12.8574C0.807892 15.9744 3.33344 18.5 6.44979 18.5H20.8793C23.9956 18.5 26.5219 15.9744 26.5219 12.8574V6.14262Z" fill="white"/>
+</g>
+</svg>
diff --git a/practice/practice-01/src/index.html b/practice/practice-01/src/index.html
index c080605..8af62fb 100644
--- a/practice/practice-01/src/index.html
+++ b/practice/practice-01/src/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="./style/main.css" />
   </head>
   <body>
-    <div class="header__background">
+    <div class="background">
       <!-- Header -->
       <header>
         <div class="container">
@@ -216,5 +216,52 @@
         <a href="javascript:void(0)" class="btn btn-secondary">View Team</a>
       </div>
     </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="background">
+        <div class="footer__content">
+          <div class="footer__logos">
+            <img
+              src="./assets/images/facebook.svg"
+              alt="Facebook logo"
+              class="footer__logo-item"
+            />
+            <img
+              src="./assets/images/instagram.svg"
+              alt="Instagram logo"
+              class="footer__logo-item"
+            />
+            <img
+              src="./assets/images/twitter.svg"
+              alt="Twitter logo"
+              class="footer__logo-item"
+            />
+            <img
+              src="./assets/images/pinterest.svg"
+              alt="Pinterest logo"
+              class="footer__logo-item"
+            />
+            <img
+              src="./assets/images/tiktok.svg"
+              alt="Tiktok logo"
+              class="footer__logo-item"
+            />
+            <img
+              src="./assets/images/wechat.svg"
+              alt="Wechat logo"
+              class="footer__logo-item"
+            />
+            <img
+              src="./assets/images/youtube.svg"
+              alt="Youtube Logo"
+              class="footer__logo-item"
+            />
+          </div>
+
+          <span class="footer__text">&#64; Start, 2022. All rights reserved.</span>
+        </div>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/practice/practice-01/src/style/main.css b/practice/practice-01/src/style/main.css
index 93c9aeb..5b98075 100644
--- a/practice/practice-01/src/style/main.css
+++ b/practice/practice-01/src/style/main.css
@@ -1,7 +1,7 @@
 @import url("./abstracts/variables.css");
 @import url("./base/typo.css");
 
-.header__background {
+.background {
   background-color: var(--primary-color);
 }
 
@@ -232,6 +232,7 @@
 
 .team__container {
   gap: 45px;
+  margin-bottom: 54px;
 }
 
 .team__content {
@@ -308,3 +309,25 @@
   line-height: 125%;
   text-transform: uppercase;
 }
+
+/* Footer */
+.footer__content {
+  padding: 50px 131px;
+  display: flex;
+  justify-content: space-between;
+  width: var(--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);
+}