Merge pull request #17 from Lavish-Bansal/icon

Line Icon Added
pulkit-30 · Sep 5, 2021 · 7f70111 · 7f70111
2 parents 0a7f92e + 6a1e139
commit 7f70111
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 8 deletions.
diff --git a/Gradient Drop Shadow/index.html b/Gradient Drop Shadow/index.html
@@ -14,7 +14,7 @@ <h2>Gradient Drop Shadow</h2>
     <footer>
       <div>
         <p>
-          Credit:-<a href="https://github.com/lavishbansal17" class="atag" target="/">Lavish Bansal</a>
+          Credit:-<a href="https://github.com/Lavish-Bansal" class="atag" target="/">Lavish Bansal</a>
         </p>
       </div>
       <div class="date">Date:- 02-09-2021</div>

diff --git a/Line icon/image.png b/Line icon/image.png
diff --git a/Line icon/index.html b/Line icon/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
+      integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <ul>
+      <li>
+        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
+      </li>
+      <li>
+        <a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
+      </li>
+      <li>
+        <a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
+      </li>
+    </ul>
+    <footer>
+      <div>
+        <p>
+          Credit :-
+          <a href="https://github.com/Lavish-Bansal" target="/" class="atag"
+            >Lavish Bansal</a
+          >
+        </p>
+      </div>
+      <div class="date">Date :- 05-09-2021</div>
+    </footer>
+  </body>
+</html>
diff --git a/Line icon/readme.md b/Line icon/readme.md
@@ -0,0 +1,2 @@
+# Line Icon Effect
+<img src="./image.png">
diff --git a/Line icon/style.css b/Line icon/style.css
@@ -0,0 +1,63 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #000;
+}
+ul {
+  position: relative;
+  display: flex;
+}
+ul li {
+  position: relative;
+  list-style: none;
+  margin: 0 20px;
+  cursor: pointer;
+}
+ul li a {
+  text-decoration: none;
+}
+ul li a .fa {
+  font-size: 6em;
+  color: #222;
+}
+ul li::before {
+  font-family: fontAwesome;
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 6em;
+  height: 0;
+  overflow: hidden;
+  transition: 0.5s ease-in-out;
+}
+ul li:nth-child(1)::before {
+  content: "\f099";
+  color: #1da1f2;
+  border-bottom: 4px solid #1da1f2;
+}
+ul li:nth-child(2)::before {
+  content: "\f232";
+  color: #25d366;
+  border-bottom: 4px solid #25d366;
+}
+ul li:nth-child(3)::before {
+  content: "\f16a";
+  color: #ff0000;
+  border-bottom: 4px solid #ff0000;
+}
+ul li:hover::before {
+  height: 100%;
+}
+footer {
+  position: relative;
+  color: yellow;
+  top: 19rem;
+  right: 50rem;
+}
diff --git a/Menu Hover Effect/index.html b/Menu Hover Effect/index.html
@@ -18,7 +18,7 @@
       </ul>
     </section>
     <footer>
-      <div>Credit:- <a href="https://github.com/Lavishbansal17">Lavish Bansal</a></div>
+      <div>Credit:- <a href="https://github.com/Lavish-Bansal" target="/" >Lavish Bansal</a></div>
       <div>Date:- 30-08-2021</div>
     </footer>
   </body>

diff --git a/README.md b/README.md
@@ -34,12 +34,13 @@
 | Wave Animation                | https://pulkit203.github.io/Wave-Animation/              |
 | Menu Hover effect Animation   | https://lavishbansal17.github.io/Menu-Hover-Effect/      |
 | Button Animation              | https://palaksharma23.github.io/AnimatedButton/          |
-| Ring of Fire                  | https://ringoffiree.netlify.app/                         |
+| Ring of Fire                  | https://lavishbansal17.github.io/Ring-of-fire/                         |
 | Moon Light                    | https://iamtushar11.github.io/MoonLight-Parallex-Effect/ |
 | Modal Animation               | https://pulkit203.github.io/Modal-Animation/             |
-| Gradient Drop Shadow          | https://gradientdropshadow.netlify.app/                  |
-| Text Animation Effect         | https://textanimationeffect.netlify.app/                 |
+| Gradient Drop Shadow          | https://lavishbansal17.github.io/Gradient-Drop-Box/                  |
+| Text Animation Effect         | https://lavishbansal17.github.io/Text-Animation-Effect/                 |
 | Animation Balls               | https://pulkit203.github.io/Windows-Loading-Animation/   |
+| Line Icon Effect | https://lavishbansal17.github.io/Line-Icon-Effect/
 
 ---
 

diff --git a/Ring of fire/index.html b/Ring of fire/index.html
@@ -20,7 +20,7 @@
     </svg>
     <footer>
 
-    <div><p>Credit:- <a href="https://github.com/lavishbansal17" class="atag" >Lavish Bansal</a></p></div>
+    <div><p>Credit:- <a href="https://github.com/Lavish-Bansal" target=/" class="atag" >Lavish Bansal</a></p></div>
     <div class="date">Date:- 31-08-2021</div>
     </footer>
 </body>

diff --git a/Text Animation Effect/index.html b/Text Animation Effect/index.html
@@ -23,7 +23,7 @@
     <footer>
       <div>
         <p>
-          Credit:-<a href="https://github.com/lavishbansal17" class="atag">Lavish Bansal</a>
+          Credit:-<a href="https://github.com/Lavish-Bansal" target="/" class="atag">Lavish Bansal</a>
         </p>
       </div>
       <div class="date">Date:- 03-09-2021</div>

diff --git a/Tip calculator/index.html b/Tip calculator/index.html
@@ -46,7 +46,7 @@ <h1>Tip Calculator</h1>
     </div>
 
     <footer>
-      <div>Credit:- <a href="https://github.com/Lavishbansal17">Lavish Bansal</a></div>
+      <div>Credit:- <a href="https://github.com/Lavish-Bansal">Lavish Bansal</a></div>
       <div>Date:- 30-08-2021</div>
     </footer>
     <script src="script.js"></script>