diff --git a/developers.html b/developers.html new file mode 100644 index 00000000..ca370764 --- /dev/null +++ b/developers.html @@ -0,0 +1,51 @@ + + + + + + + Snigdha OS | Developers + + +
+

Meet The Developers

+
+
+
+ Headless Horseman +
+

Eshan Roy
+ Developer

+
    + +
+
+
+
+
+ The Mummy +
+
+

The Mummy
+ Undead +

+
    + +
+
+
+
+
+ Werewolf +
+
+

Werewolf
+ Lycanthrope +

+
    + +
+
+
+
+
\ No newline at end of file diff --git a/devstyle.css b/devstyle.css new file mode 100644 index 00000000..021c73a3 --- /dev/null +++ b/devstyle.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; + } + } +}