💅 style(): fixed developers page

need more tweaking
This commit is contained in:
Utkarsh Gaur
2024-11-30 04:40:20 +05:30
parent a8677e401c
commit 46c76f657c
6 changed files with 28 additions and 9 deletions

BIN
assets/alok.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
assets/eshanized.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 KiB

BIN
assets/iconixed.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
assets/utkarsh.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@@ -12,7 +12,7 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #111; background: url(./assets/background.png);
transition: 0.5s; transition: 0.5s;
font-family: "Ubuntu", sans-serif; font-family: "Ubuntu", sans-serif;
font-weight: 400; font-weight: 400;
@@ -20,13 +20,19 @@ body {
} }
body:has(.box[data-color="clr1"]:hover) { body:has(.box[data-color="clr1"]:hover) {
background: #754ffe; background: url(./assets/eshanized.png);
background-repeat: no-repeat;
background-size: cover;
} }
body:has(.box[data-color="clr2"]:hover) { body:has(.box[data-color="clr2"]:hover) {
background: #301a15; background: url(./assets/alok.jpg);
background-repeat: no-repeat;
background-size: cover;
} }
body:has(.box[data-color="clr3"]:hover) { body:has(.box[data-color="clr3"]:hover) {
background: #1b2a32; background: url(./assets/iconixed.jpg);
background-repeat: no-repeat;
background-size: cover;
} }
section { section {

View File

@@ -26,8 +26,8 @@
<img src="https://avatars.githubusercontent.com/u/112468319?v=4" alt="The Mummy"> <img src="https://avatars.githubusercontent.com/u/112468319?v=4" alt="The Mummy">
</div> </div>
<div class="glass"> <div class="glass">
<h3>The Mummy<br /> <h3>Alok Shah<br />
<span>Undead</span> <span>Web-Dev</span>
</h3> </h3>
<ul> <ul>
<a href="https://en.wikipedia.org/wiki/Mummy_(undead)" target="_blank"> <ion-icon name="globe-outline"></ion-icon> </a> <a href="https://en.wikipedia.org/wiki/Mummy_(undead)" target="_blank"> <ion-icon name="globe-outline"></ion-icon> </a>
@@ -36,11 +36,24 @@
</div> </div>
<div class="box" data-color="clr3"> <div class="box" data-color="clr3">
<div class="imgBox"> <div class="imgBox">
<img src="https://cdn.pixabay.com/photo/2023/09/21/13/32/ai-generated-8266689_1280.jpg" alt="Werewolf"> <img src="https://avatars.githubusercontent.com/u/157954129?v=4" alt="Werewolf">
</div> </div>
<div class="glass"> <div class="glass">
<h3>Werewolf<br /> <h3>Iconized<br />
<span>Lycanthrope</span> <span>Developer</span>
</h3>
<ul>
<a href="https://en.wikipedia.org/wiki/Werewolf" target="_blank"> <ion-icon name="globe-outline"></ion-icon> </a>
</ul>
</div>
</div>
<div class="box" data-color="clr3">
<div class="imgBox">
<img src="https://avatars.githubusercontent.com/u/157954129?v=4" alt="Werewolf">
</div>
<div class="glass">
<h3>Utkarsh Gaur<br />
<span>Developer</span>
</h3> </h3>
<ul> <ul>
<a href="https://en.wikipedia.org/wiki/Werewolf" target="_blank"> <ion-icon name="globe-outline"></ion-icon> </a> <a href="https://en.wikipedia.org/wiki/Werewolf" target="_blank"> <ion-icon name="globe-outline"></ion-icon> </a>