diff --git a/Isometric social media icon/image.jpg b/Isometric social media icon/image.jpg
new file mode 100644
index 0000000..760db05
Binary files /dev/null and b/Isometric social media icon/image.jpg differ
diff --git a/Isometric social media icon/index.html b/Isometric social media icon/index.html
new file mode 100644
index 0000000..9f61f5f
--- /dev/null
+++ b/Isometric social media icon/index.html
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+ Isometric social media icon
+
+
+
+
+
+
+
+
diff --git a/Isometric social media icon/readme.md b/Isometric social media icon/readme.md
new file mode 100644
index 0000000..fc335a9
--- /dev/null
+++ b/Isometric social media icon/readme.md
@@ -0,0 +1,2 @@
+# Isometric Social Media Icon
+
\ No newline at end of file
diff --git a/Isometric social media icon/style.css b/Isometric social media icon/style.css
new file mode 100644
index 0000000..3b4a4a3
--- /dev/null
+++ 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
index f727737..ace5347 100644
--- 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)