From 1293e43f7182c51be248f7187c900b69b4d161d3 Mon Sep 17 00:00:00 2001
From: skifli <121291719+skifli@users.noreply.github.com>
Date: Fri, 14 Jul 2023 12:14:21 +0000
Subject: [PATCH] feat: add footer

---
 assets/css/footer.css            | 41 ++++++++++++++++++++++++++++++++
 assets/img/socials/facebook.svg  |  1 +
 assets/img/socials/instagram.svg |  1 +
 assets/img/socials/threads.svg   |  1 +
 assets/img/socials/twitter.svg   |  1 +
 assets/img/socials/youtube.svg   |  1 +
 index.html                       | 39 ++++++++++++++++++++++++++++++
 7 files changed, 85 insertions(+)
 create mode 100644 assets/css/footer.css
 create mode 100644 assets/img/socials/facebook.svg
 create mode 100644 assets/img/socials/instagram.svg
 create mode 100644 assets/img/socials/threads.svg
 create mode 100644 assets/img/socials/twitter.svg
 create mode 100644 assets/img/socials/youtube.svg

diff --git a/assets/css/footer.css b/assets/css/footer.css
new file mode 100644
index 0000000..34d1cd7
--- /dev/null
+++ b/assets/css/footer.css
@@ -0,0 +1,41 @@
+#footer {
+    align-items: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 20px
+}
+
+#footer ul {
+    display: flex;
+    list-style-type: none;
+    margin: 0;
+    padding: 0
+}
+
+#footer ul li {
+    padding-left: 20px
+}
+
+#footer ul li img {
+    height: auto;
+    width: 30px
+}
+
+@media only screen and (max-width:1000px) {
+    #footer {
+        flex-direction: column
+    }
+
+    #footer #copyright {
+        padding: 10px 0
+    }
+
+    #footer ul {
+        flex-direction: column
+    }
+
+    #footer ul li {
+        padding: 5px 0 0
+    }
+}
\ No newline at end of file
diff --git a/assets/img/socials/facebook.svg b/assets/img/socials/facebook.svg
new file mode 100644
index 0000000..c2297ee
--- /dev/null
+++ b/assets/img/socials/facebook.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.0" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle clip-rule="evenodd" cx="16" cy="16" fill="#3B5998" fill-rule="evenodd" r="16"/><path d="M22,32V20h4l1-5h-5v-2c0-2,1.002-3,3-3h2V5c-1,0-2.24,0-4,0c-3.675,0-6,2.881-6,7v3h-4v5h4v12H22   z" fill="#FFFFFF" id="f_2_"/></g><g/><g/><g/><g/><g/><g/></svg>
\ No newline at end of file
diff --git a/assets/img/socials/instagram.svg b/assets/img/socials/instagram.svg
new file mode 100644
index 0000000..04b9097
--- /dev/null
+++ b/assets/img/socials/instagram.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 1024 1024" height="1024px" id="Instagram_2_" version="1.1" viewBox="0 0 1024 1024" width="1024px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Background"><linearGradient gradientTransform="matrix(0.9397 0.3421 0.3421 -0.9397 276.2042 765.8284)" gradientUnits="userSpaceOnUse" id="bg_1_" x1="463.9526" x2="-194.4829" y1="-73.1143" y2="711.4479"><stop offset="0" style="stop-color:#20254C"/><stop offset="0.0571" style="stop-color:#29254D"/><stop offset="0.1502" style="stop-color:#41234F"/><stop offset="0.2679" style="stop-color:#692152"/><stop offset="0.4039" style="stop-color:#A01F57"/><stop offset="0.5333" style="stop-color:#DA1C5C"/><stop offset="0.5924" style="stop-color:#DC255A"/><stop offset="0.6889" style="stop-color:#E13D56"/><stop offset="0.8106" style="stop-color:#EA654E"/><stop offset="0.9515" style="stop-color:#F69C44"/><stop offset="1" style="stop-color:#FBB040"/></linearGradient><circle cx="512.001" cy="512" fill="url(#bg_1_)" id="bg" r="512"/></g><g id="Instagram_3_"><circle cx="658.765" cy="364.563" fill="#FFFFFF" r="33.136"/><circle cx="512.001" cy="512" fill="none" r="121.412" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width="45"/><path d="M255.358,612.506c0,91.127,73.874,165,165,165   h183.283c91.127,0,165-73.873,165-165V411.495c0-91.127-73.873-165-165-165H420.358c-91.127,0-165,73.873-165,165V612.506z" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width="45"/></g></svg>
\ No newline at end of file
diff --git a/assets/img/socials/threads.svg b/assets/img/socials/threads.svg
new file mode 100644
index 0000000..b028327
--- /dev/null
+++ b/assets/img/socials/threads.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="524.12" height="604" viewBox="0 0 524.12 604"><path d="M761.54,386.18C741,317.41,702.81,262.51,637.1,230.08c-52.48-25.89-108.6-31.81-166-25.35-98.93,11.11-168.54,62-202.28,156.5C237,450.07,237.19,540.62,264.2,630.68,282,689.94,316.1,737.8,370.79,769c43,24.56,90,33,159.58,33,49.48.22,112-18.42,162-70.71,67.19-70.1,66.14-199-44-250.66-6.41-3-8.43-6.62-8.93-13.27-1.49-20.2-6.05-39.77-14.92-58.11-22.29-46.09-61.16-65.64-110.36-66.91-44.74-1.17-82.77,13.69-110.8,50.23-3.52,4.59-3.23,6.92,1.52,10,10.24,6.62,20.46,13.36,30.18,20.72,5.49,4.15,8.26,3.25,12.65-1.83,22.65-26.18,52.28-30,84.08-24.05,30.27,5.66,45.7,26.23,53,54.78,2,8-.32,9-7.24,8-23.93-3.74-48-3.7-72.08-1.83-24.37,1.9-47.31,8.6-68.15,21.67-46.09,28.9-59.2,89.69-28.05,134.09,21,30,51.93,43,87.39,45.34,48.71,3.16,90-11.31,117.65-54.17,12.19-18.86,18.73-39.94,22.2-62,1-6.45,2.25-8.63,8.8-4,31.9,22.62,47,60.86,38.61,99.14-10.1,45.87-40.58,74.56-81.25,93.33C563.26,750,521,751.93,478.49,747.52c-81.89-8.47-138.23-50.43-163.63-129.75-23.8-74.31-23.79-149.57-2.18-224.29,18.66-64.54,58.63-110.14,125-128.58a261.64,261.64,0,0,1,148.48,1.76c45.5,13.83,80.4,41.49,103.81,83.25A237.72,237.72,0,0,1,710.66,399c1.17,4,1.93,6.63,7.13,5.11,13-3.78,26.09-7.19,39.19-10.5C761.29,392.53,763,391.11,761.54,386.18ZM587.41,521.38c-2.57,18.35-5.81,36.41-15.27,52.77-8.87,15.32-21.6,25.59-38.84,29.78-21.07,5.13-42,4.84-61.87-4.54-15.23-7.17-25.61-18.51-26.52-36.31-.93-18.05,7.81-30.86,22.66-39.91,16.29-9.93,34.64-12,53.16-13,4.6-.25,9.23-.05,13.85-.05,15.55-.43,30.89,1.67,46.24,3.86C585.25,514.64,588.2,515.74,587.41,521.38Z" transform="translate(-237.94 -198)"/><path d="M755.06,381.85c-20.54-68.76-58.74-123.66-124.44-156.09-52.48-25.9-108.6-31.81-166-25.36-98.94,11.12-168.54,62-202.29,156.5-31.73,88.84-31.57,179.4-4.57,269.46,17.77,59.26,51.91,107.12,106.6,138.36,43,24.56,90,33,159.58,33,49.47.22,112-18.43,162-70.71,67.19-70.11,66.14-199-44-250.66-6.42-3-8.44-6.62-8.93-13.27-1.5-20.2-6.06-39.77-14.93-58.11-22.29-46.09-61.15-65.64-110.35-66.91-44.74-1.17-82.78,13.69-110.81,50.23-3.52,4.59-3.23,6.91,1.53,10,10.24,6.63,20.45,13.37,30.18,20.73,5.49,4.15,8.25,3.25,12.65-1.83,22.65-26.18,52.27-30,84.07-24.05,30.28,5.66,45.71,26.22,53,54.78,2.06,8-.31,9-7.23,7.95-23.94-3.73-48-3.69-72.09-1.82-24.36,1.9-47.3,8.6-68.14,21.67-46.1,28.9-59.2,89.69-28,134.08,21,30,51.93,43.06,87.39,45.35,48.71,3.16,90-11.31,117.64-54.17,12.19-18.86,18.74-39.94,22.21-62,1-6.45,2.25-8.64,8.79-4,31.91,22.61,47.06,60.85,38.62,99.14-10.1,45.86-40.58,74.56-81.25,93.33-39.47,18.22-81.73,20.2-124.24,15.79-81.89-8.47-138.23-50.43-163.63-129.75-23.81-74.31-23.79-149.58-2.18-224.29,18.66-64.54,58.62-110.14,125-128.58a261.43,261.43,0,0,1,148.47,1.76c45.5,13.83,80.4,41.49,103.82,83.25a237.81,237.81,0,0,1,20.67,49.1c1.17,3.95,1.92,6.62,7.13,5.11,13-3.78,26.08-7.2,39.19-10.5C754.81,388.21,756.53,386.79,755.06,381.85ZM580.93,517.06c-2.58,18.34-5.82,36.41-15.27,52.77-8.87,15.32-21.6,25.59-38.85,29.78-21.07,5.13-41.95,4.84-61.87-4.54-15.22-7.17-25.6-18.51-26.51-36.32-.93-18,7.81-30.86,22.66-39.9,16.29-9.93,34.64-12,53.16-13,4.6-.24,9.22,0,13.85,0,15.55-.43,30.89,1.66,46.23,3.86C578.76,510.31,581.71,511.42,580.93,517.06Z" transform="translate(-237.94 -198)" fill="#efefef"/></svg>
\ No newline at end of file
diff --git a/assets/img/socials/twitter.svg b/assets/img/socials/twitter.svg
new file mode 100644
index 0000000..c42aee0
--- /dev/null
+++ b/assets/img/socials/twitter.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" id="Layer_1" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="24" cy="24" fill="#1CB7EB" r="24"/><g><g><path d="M36.8,15.4c-0.9,0.5-2,0.8-3,0.9c1.1-0.7,1.9-1.8,2.3-3.1c-1,0.6-2.1,1.1-3.4,1.4c-1-1.1-2.3-1.8-3.8-1.8    c-2.9,0-5.3,2.5-5.3,5.7c0,0.4,0,0.9,0.1,1.3c-4.4-0.2-8.3-2.5-10.9-5.9c-0.5,0.8-0.7,1.8-0.7,2.9c0,2,0.9,3.7,2.3,4.7    c-0.9,0-1.7-0.3-2.4-0.7c0,0,0,0.1,0,0.1c0,2.7,1.8,5,4.2,5.6c-0.4,0.1-0.9,0.2-1.4,0.2c-0.3,0-0.7,0-1-0.1    c0.7,2.3,2.6,3.9,4.9,3.9c-1.8,1.5-4.1,2.4-6.5,2.4c-0.4,0-0.8,0-1.3-0.1c2.3,1.6,5.1,2.6,8.1,2.6c9.7,0,15-8.6,15-16.1    c0-0.2,0-0.5,0-0.7C35.2,17.6,36.1,16.6,36.8,15.4z" fill="#FFFFFF"/></g></g></svg>
\ No newline at end of file
diff --git a/assets/img/socials/youtube.svg b/assets/img/socials/youtube.svg
new file mode 100644
index 0000000..2daf6b5
--- /dev/null
+++ b/assets/img/socials/youtube.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 100 100" height="100px" id="Layer_1" version="1.1" viewBox="0 0 100 100" width="100px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M50.872,44.545c-0.825-0.475-1.662-0.915-2.442-1.464c-0.747-0.525-1.396-1.05-2.148-1.562   C45.881,41.246,45,40.978,45,40.716c0,0.386,0,1.934,0,2.148c0,1.239-0.094,7.613-0.08,8.412c0.02,1.337-0.084,2.674-0.035,4.011   c0.046,1.275,0.054,2.493,0.01,3.825c0,0,3.185-1.547,3.61-1.814c1.634-1.029,3.235-2.146,4.909-3.102   c0.823-0.47,1.674-0.886,2.46-1.417c0.714-0.485,3.481-2.812,3.577-2.753c-1.278-0.781-2.517-1.598-3.849-2.289   C53.898,46.853,52.532,45.5,50.872,44.545z" fill="#C12025"/><path d="M50,3.84C24.506,3.84,3.84,24.506,3.84,50S24.506,96.16,50,96.16S96.16,75.494,96.16,50   S75.494,3.84,50,3.84z M75.354,60.014c-0.477,2.246-1.078,4.595-2.618,6.369c-1.671,1.922-4.549,1.416-6.848,1.582   c-5.589,0.404-11.166,0.026-16.759,0.173c-2.299,0.061-4.566,0.008-6.859-0.106c-2.282-0.114-4.669,0.13-6.95-0.054   c-1.384-0.113-2.777-0.116-4.156-0.286c-1.106-0.136-2.778-0.297-3.615-1.133c-0.407-0.406-0.54-1.037-0.893-1.511l-0.509-0.888   c-2.191-4.672-2.147-9.816-2.156-14.92c-0.005-1.896,0.225-3.782,0.174-5.68c-0.033-1.225,0.523-2.385,0.599-3.618   c0.078-1.236,0.311-2.427,0.909-3.5c1.164-2.087,1.753-3.067,3.916-3.952c1.083-0.444,3.101-0.568,4.261-0.546   c1.381,0.024,2.765,0.018,4.144,0.002c2.804-0.034,5.604-0.117,8.407-0.108c2.438,0.007,4.907,0.019,7.339,0.171   c2.435,0.15,4.88-0.083,7.322-0.021c2.012,0.051,4.028,0.047,6.036,0.195c1.503,0.111,3.255,0.294,4.561,1.129   c0.784,0.501,1.656,1.17,2.009,1.992c1.026,2.389,1.88,4.808,2.024,7.422c0.148,2.678,0.182,5.36,0.255,8.04   c0.013,0.462,0.027,0.925,0.042,1.387C76.078,54.78,75.897,57.441,75.354,60.014z" fill="#C12025"/></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 0fd108f..428e482 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
     <link href="assets/css/global.css" rel="stylesheet">
     <link href="assets/css/navbar.css" rel="stylesheet">
     <link href="assets/css/pages/index.css" rel="stylesheet">
+    <link href="assets/css/footer.css" rel="stylesheet">
 
     <script defer src="assets/js/global.js"></script>
 </head>
@@ -131,6 +132,44 @@ <h2>F1 in Schools</h2>
                 More...</a></p>
     </div>
 
+    <div id="footer">
+        <p id="copyright">©<a href="https://github.com/warpf1s/warpf1s.github.io/blob/main/LICENSE.md"
+                target="_blank">skifli</a>
+            2022 - {current_year}. All rights
+            reserved.</p>
+
+        <ul>
+            <li>
+                <a href="https://www.youtube.com/@warpf1s" target="_blank"><img
+                        alt="https://www.iconfinder.com/icons/1856390/circled_media_network_social_social_media_you_tube_youtube_icon"
+                        src="assets/img/socials/youtube.svg"></a>
+            </li>
+
+            <li>
+                <a href="https://www.instagram.com/warpf1s" target="_blank"><img
+                        alt="https://www.iconfinder.com/icons/2142569/circle_colored_gradient_instagram_media_social_social_media_icon"
+                        src="assets/img/socials/instagram.svg"></a>
+            </li>
+
+            <li>
+                <a href="https://twitter.com/warpf1s" target="_blank"><img
+                        alt="https://www.iconfinder.com/icons/294709/circle_twitter_icon"
+                        src="assets/img/socials/twitter.svg"></a>
+            </li>
+
+            <li>
+                <a href="https://www.facebook.com/@warpf1s" target="_blank"><img
+                        alt="https://www.iconfinder.com/icons/317752/facebook_social_media_social_icon"
+                        src="assets/img/socials/facebook.svg"></a>
+            </li>
+
+            <li>
+                <a href="https://threads.net/@warpf1s" target="_blank"><img alt="Threads"
+                        src="assets/img/socials/threads.svg"></a>
+            </li>
+        </ul>
+    </div>
+
     <div id="cookie-consent-banner">
         <div class="middle">
             <h2>WE USE COOKIES &#127850;</h2>