Rakesh9100 · Vin205 · Jun 14, 2024 · Jun 24, 2024
diff --git a/Components/Footers/Icons/index.html b/Components/Footers/Icons/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+    <title>Icons</title>
+</head>
+
+<body>
+
+    <div class="wrapper"></div>
+    <div class="footer">
+        <div class="socialIcons">
+            <div></div>
+            <a href="#"><i class="fa-brands fa-facebook"></i></a>
+            <a href="#"><i class="fa-brands fa-instagram"></i></a>
+            <a href="#"><i class="fa-brands fa-twitter"></i></a>
+            <a href="#"><i class="fa-brands fa-google-plus"></i></a>
+            <a href="#"><i class="fa-brands fa-youtube"></i></a>
+        </div>
+
+        <div class="footerBottom">
+
+        </div>
+
+    </div>
+
+    <script src="./script.js"></script>
+
+</body>
+
+</html>
diff --git a/Components/Footers/Icons/script.js b/Components/Footers/Icons/script.js
@@ -0,0 +1,28 @@
+$(function () {
+
+    var wrapper = $('.wrapper');
+    var windowObj = $(window);
+
+    function decreaseWrapper() {
+        wrapper.addClass('small');
+    }
+
+    function increaseWrapper() {
+        wrapper.removeClass('small');
+    }
+
+    windowObj.scroll(function () {
+        if ($(this).scrollTop() + $(this).height() > wrapper.outerHeight()) {
+            decreaseWrapper();
+        } else {
+            increaseWrapper();
+        }
+    });
+
+    $('html').on('click', '.small', function () {
+        $('html, body').animate({
+            scrollTop: wrapper.outerHeight() - windowObj.height()
+        }, 500);
+    });
+
+});
diff --git a/Components/Footers/Icons/style.css b/Components/Footers/Icons/style.css
@@ -0,0 +1,127 @@
+*,
+*::before,
+*::after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+*:focus {
+    outline: none;
+}
+
+body {
+    font-family: 'Roboto Slab', serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.4;
+    background-color: #2c2a2a;
+    color: #fff;
+}
+
+.wrapper {
+    min-height: 100vh;
+    background-repeat: no-repeat;
+    background-position: 50%;
+    -webkit-background-size: cover;
+    background-size: cover;
+    background-image: url(https://i.imgur.com/YCSYk8J.jpg);
+    -webkit-transition: all .5s;
+    -o-transition: all .5s;
+    transition: all .5s;
+    -webkit-transform-origin: center top;
+    -moz-transform-origin: center top;
+    -ms-transform-origin: center top;
+    -o-transform-origin: center top;
+    transform-origin: center top;
+    box-shadow: 0 22px 54px rgba(0, 0, 0, .5);
+}
+
+.small {
+    -webkit-transform: scale(.9);
+    -ms-transform: scale(.9);
+    -o-transform: scale(.9);
+    transform: scale(.9);
+    cursor: pointer;
+}
+
+.footer {
+    padding: 20px 0;
+    text-align: center;
+    font-size: 20px;
+}
+
+
+.socialIcons {
+    display: flex;
+    justify-content: center;
+}
+
+.socialIcons a {
+    text-decoration: none;
+    padding: 10px;
+    background-color: white;
+    margin: 10px;
+    border-radius: 50%;
+
+}
+
+.socialIcons a i {
+    font-size: 2em;
+    color: black;
+    opacity: 0.9;
+}
+
+.socialIcons a:hover {
+    background-color: black;
+    transition: 0.5s;
+
+}
+
+.socialIcons a:hover i {
+    color: white;
+    transition: 0.5s;
+}
+
+.footerNav {
+    margin: 30px 0;
+}
+
+.footerNav ul {
+    display: flex;
+    justify-content: center;
+}
+
+.footerNav ul li a {
+    color: white;
+    margin: 20px;
+    text-decoration: none;
+    font-size: 1.3rem;
+    opacity: 0.7;
+    transition: 0.5s;
+}
+
+.footerNav ul li a:hover {
+    opacity: 1;
+
+}
+
+.footerBottom {
+    background-color: black;
+    padding: 20px;
+    text-align: center;
+}
+
+.footerBottom p {
+    color: white;
+
+}
+
+.design {
+    opacity: 0.7;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 400;
+    margin: 0px 5px'
+
+}
diff --git a/Components/Icons/index.html b/Components/Icons/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html> 
+<html lang="en"> 
+
+<head> 
+  <!-- Required meta tags -->
+  <meta charset="utf-8"> 
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
+
+  <!-- Bootstrap CSS -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 
+
+  <!-- Bootstrap Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css">
+
+  <!-- Custom CSS -->
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      margin: 0;
+    }
+    .content-container {
+      text-align: center;
+    }
+  </style>
+</head> 
+
+<body style=" background-image: linear-gradient(rgb(252, 174, 218), rgb(226, 180, 247), rgb(200, 243, 251));"> 
+    <div class="content-container mt-5 mb-5">
+
+    <h1 style="color: rgb(86, 4, 86)">Social Media Icons</h1> 
+    <div></div>
+    <div><h4> Download these images to use it to beautify web pages</h4></div>
+    <div class="d-flex flex-column bd-highlight mb-3 align-items-center"> 
+      <div class="p-2 bd-highlight">
+        <img src="../../assets/images/m.png" alt="Image 1" class="img-fluid">
+        <h2 style="color: blue;">Meta</h2>
+      </div> 
+      <div></div>
+      <div class="p-2 bd-highlight">
+        <img src="../../assets/images/l.jpg" alt="Image 2" class="img-fluid">
+        <h2 style="color: blueviolet;">Linkedin</h2>
+      </div> 
+      <div></div>
+      <div class="p-2 bd-highlight">
+        <img src="../../assets/images/x.png" alt="Image 3" class="img-fluid">
+        <h2 style="color: rgb(4, 86, 73);">Twitter</h2>
+      </div> 
+    <div class="mb-4"></div>
+   </div>
+
+    <h1 style="color: rgb(234, 14, 14)">Direction Arrow Icons</h1> 
+    <div></div>
+    <div><h4> Download these images to use it to beautify web pages</h4></div>
+    <div class="d-flex flex-column bd-highlight mb-3 align-items-center"> 
+      <div class="p-2 bd-highlight">
+        <img src="../../assets/images/u.png" alt="Image 1" class="img-fluid">
+        <h2 style="color: rgb(20, 115, 1);">Upward arrow</h2>
+      </div> 
+      <div></div>
+      <div class="p-2 bd-highlight">
+        <img src="../../assets/images/d.png" alt="Image 2" class="img-fluid">
+        <h2 style="color: rgb(3, 74, 129);">Downward arrow</h2>
+      </div> 
+      <div></div>
+      <div class="p-2 bd-highlight">
+        <img src="../../assets/images/l.png" alt="Image 3" class="img-fluid">
+        <h2 style="color: rgb(129, 79, 3);">Left arrow</h2>
+      </div> 
+      <div></div>
+      <div class="p-2 bd-highlight">
+        <img src="../../assets/images/r.png" alt="Image 2" class="img-fluid">
+        <h2 style="color: rgb(109, 3, 102);">Right arrow</h2>
+      </div> 
+      <div></div>
+    </div> 
+  </div>
+</body> 
+
+<script src="./script.js"></script>
+<script src="./assets/js_files/hamburgerMenu.js"></script>
+<script src="./assets/js_files/contributor.js"></script>
+
+</html>
diff --git a/Components/Icons/script.js b/Components/Icons/script.js
@@ -0,0 +1,28 @@
+$(function () {
+
+    var wrapper = $('.wrapper');
+    var windowObj = $(window);
+
+    function decreaseWrapper() {
+        wrapper.addClass('small');
+    }
+
+    function increaseWrapper() {
+        wrapper.removeClass('small');
+    }
+
+    windowObj.scroll(function () {
+        if ($(this).scrollTop() + $(this).height() > wrapper.outerHeight()) {
+            decreaseWrapper();
+        } else {
+            increaseWrapper();
+        }
+    });
+
+    $('html').on('click', '.small', function () {
+        $('html, body').animate({
+            scrollTop: wrapper.outerHeight() - windowObj.height()
+        }, 500);
+    });
+
+});