Merge pull request #67 from Lavish-Bansal/icon

Isometric social media icon
pulkit-30 · Oct 17, 2021 · 9ec96a1 · 9ec96a1
2 parents 7b99fc9 + 3e4088a
commit 9ec96a1
Show file tree

Hide file tree

Showing 5 changed files with 206 additions and 1 deletion.
diff --git a/Isometric social media icon/image.jpg b/Isometric social media icon/image.jpg
diff --git a/Isometric social media icon/index.html b/Isometric social media icon/index.html
@@ -0,0 +1,77 @@
+<!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>Isometric social media icon</title>
+    <link rel="stylesheet" href="style.css" />
+    <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"
+    />
+  </head>
+  <body>
+    <ul>
+      <li>
+        <a href="#">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span class="fa fa-facebook"></span>
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span class="fa fa-twitter"></span>
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span class="fa fa-whatsapp"></span>
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span class="fa fa-instagram"></span>
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span class="fa fa-linkedin"></span>
+        </a>
+      </li>
+    </ul>
+    <footer>
+      <div>
+        <p>
+          Credit :-
+          <a href="https://github.com/Lavish-Bansal" target="/"
+            >Lavish Bansal</a
+          >
+        </p>
+      </div>
+      <div class="date">Date :- 16-10-2021</div>
+    </footer>
+  </body>
+</html>
diff --git a/Isometric social media icon/readme.md b/Isometric social media icon/readme.md
@@ -0,0 +1,2 @@
+# Isometric Social Media Icon
+<img src="./image.jpg">
diff --git a/Isometric social media icon/style.css b/Isometric social media icon/style.css
@@ -0,0 +1,125 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #222;
+}
+
+ul {
+  position: relative;
+  display: flex;
+  transform-style: preserve-3d;
+  transform: rotate(-25deg) skew(25deg);
+}
+
+ul li {
+  position: relative;
+  list-style: none;
+  width: 60px;
+  height: 60px;
+  margin: 0 10px;
+}
+
+ul li::before {
+  content: "";
+  position: relative;
+  bottom: -10;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  background: #2a2a2a;
+  transform-origin: top;
+  transform: skewX(-41deg);
+}
+
+ul li::after {
+  content: "";
+  position: relative;
+  top: 0;
+  left: -9;
+  width: 9px;
+  height: 100%;
+  background: #2a2a2a;
+  transform-origin: right;
+  transform: skewY(-41deg);
+}
+
+ul li span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #333;
+  color: rgba(255, 255, 255, 0.2);
+  font-size: 30px !important;
+  transition: 0.2s;
+}
+
+ul li:hover span {
+  z-index: 1000;
+  transition: 0.5s;
+  color: #fff;
+  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+ul li:hover span:nth-child(5) {
+  transform: translate(40px, -40px);
+  opacity: 1;
+}
+ul li:hover span:nth-child(4) {
+  transform: translate(30px, -30px);
+  opacity: 0.8;
+}
+ul li:hover span:nth-child(3) {
+  transform: translate(20px, -20px);
+  opacity: 0.6;
+}
+ul li:hover span:nth-child(2) {
+  transform: translate(10px, -10px);
+  opacity: 0.4;
+}
+ul li:hover span:nth-child(1) {
+  transform: translate(0px, -0px);
+  opacity: 0.2;
+}
+
+ul li:nth-child(1):hover span {
+  background: #3b5999;
+}
+
+ul li:nth-child(2):hover span {
+  background: #55acee;
+}
+
+ul li:nth-child(3):hover span {
+  background: #25d366;
+}
+
+ul li:nth-child(4):hover span {
+  background: #e4405f;
+}
+
+ul li:nth-child(5):hover span {
+  background: #0077b5;
+}
+
+footer {
+  position: relative;
+  color: yellow;
+  top: 19rem;
+  right: 50rem;
+}
+
+footer a {
+  color: white;
+}
diff --git a/README.md b/README.md
@@ -57,7 +57,8 @@
 | Parallax Sunset               | https://sinc0115.github.io/parallax-sunset/                             |
 | Captain America Animation     | https://jonathanallisson.github.io/Captain/                             |
 | Plane Animation               | https://jonathanallisson.github.io/plane/                               |
----
+| Isometric social media icon   | https://lavishbansal17.github.io/Isometric-social-media-icon/           |
+- --
 
 ![Project Intro Gif](./Gif.gif)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Isometric Social Media Icon
		<img src="./image.jpg">