🔨 refactor(rename): devstyle -> developes

2025-09-06 04:35:18 +02:00 · 2024-11-07 21:55:36 +05:30
parent 5a804baac3
commit a8677e401c
2 changed files with 1 additions and 1 deletions
--- a/developers.css
+++ b/developers.css
@@ -0,0 +1,163 @@
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap");
+/* @import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"); */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #111;
+  transition: 0.5s;
+  font-family: "Ubuntu", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+body:has(.box[data-color="clr1"]:hover) {
+  background: #754ffe;
+}
+body:has(.box[data-color="clr2"]:hover) {
+  background: #301a15;
+}
+body:has(.box[data-color="clr3"]:hover) {
+  background: #1b2a32;
+}
+
+section {
+  overflow: hidden;
+  padding-top: 3em;
+}
+
+h2 {
+  font-family: "Ubuntu", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #fff;
+  font-size: clamp(2rem, 1rem + 4vw, 5rem);
+  text-align: center;
+  line-height: 1.3;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+  flex-wrap: wrap;
+  padding: 3.25em 0 3em;
+
+  .box {
+    position: relative;
+    width: 18.75rem;
+    height: 18.75rem;
+    border-radius: 0.625rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 0.5s;
+
+    .imgBox {
+      position: absolute;
+      inset: 0;
+      border-radius: 0.75rem;
+      border: 0.25rem solid rgba(0, 0, 0, 0.2);
+
+      img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: 0.5s;
+        border-radius: 0.625rem;
+      }
+    }
+
+    .glass {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(#fff2, transparent);
+      border: 0.063rem solid rgba(255, 255, 255, 0.1);
+      box-shadow: 0 0.938rem 0.938rem rgba(0, 0, 0, 0.25);
+      backdrop-filter: blur(0.938rem);
+      border-radius: 0.625rem;
+      overflow: hidden;
+      scale: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: 0.5s;
+      opacity: 0;
+
+      &:before {
+        position: absolute;
+        content: "";
+        bottom: 0;
+        width: 100%;
+        height: 2.5rem;
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      h3 {
+        font-size: 1.25rem;
+        color: #fff;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        text-align: center;
+        line-height: 0.8em;
+        font-weight: 500;
+      }
+
+      span {
+        font-size: 0.5em;
+        font-weight: 400;
+      }
+
+      ul {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+
+        a {
+          color: #fff8;
+          font-size: 1.25rem;
+          scale: 0;
+          transition: 0.25s;
+          transition-delay: scale calc(0.2s * var(--i));
+
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+    &:hover .imgBox img {
+      opacity: 0.5;
+    }
+
+    &:hover {
+      transform: rotate(-15deg);
+    }
+
+    &:hover .glass {
+      transform: rotate(20deg);
+      scale: 1;
+      opacity: 1;
+    }
+
+    &:hover ul a {
+      scale: 1;
+    }
+  }
+}