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)