💅 style(): restructured and styled developers page

git graph moving text, some new changes in the images added navbar
This commit is contained in:
Utkarsh Gaur
2024-11-30 05:52:43 +05:30
parent 46c76f657c
commit f86d3b3308
11 changed files with 594 additions and 8 deletions

View File

@@ -9,10 +9,12 @@
body {
min-height: 100vh;
display: flex;
display: block;
justify-content: center;
align-items: center;
background: url(./assets/background.png);
background: url(./assets/back.jpg);
background-repeat: no-repeat;
background-size: cover;
transition: 0.5s;
font-family: "Ubuntu", sans-serif;
font-weight: 400;
@@ -20,7 +22,7 @@ body {
}
body:has(.box[data-color="clr1"]:hover) {
background: url(./assets/eshanized.png);
background: url(./assets/54362.jpg);
background-repeat: no-repeat;
background-size: cover;
}
@@ -29,12 +31,184 @@ body:has(.box[data-color="clr2"]:hover) {
background-repeat: no-repeat;
background-size: cover;
}
body:has(.box[data-color="clr3"]:hover) {
background: url(./assets/iconixed.jpg);
background: url(./assets/2147811240.jpg);
background-repeat: no-repeat;
background-size: cover;
}
body:has(.box[data-color="clr4"]:hover) {
background: url(./assets/2147835077.jpg);
background-repeat: no-repeat;
background-size: cover;
}
/* nav */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
top: 0;
background-color: rgba(26, 31, 44, 0);
z-index: 1000;
padding-inline: 5rem;
backdrop-filter: blur(5px);
}
.logo {
height: 40px;
}
a {
color: #000;
position: relative;
text-decoration: none;
}
a::before {
background: #754ffe;
content: "";
inset: 0;
position: absolute;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease-in-out;
z-index: -1;
}
a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 0.9rem;
text-transform: uppercase;
font-weight: 800;
}
/* devs */
* {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: white;
font-size: 12px;
}
.git-i{
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.git-contributions {
width: 500x;
height: 160px;
padding: 20px;
margin: 10px;
border: solid 1px #3d444d;
border-radius: 10px;
}
.contribute-calendar {
display: flex;
}
.weeks {
display: flex;
flex-direction: column;
justify-content: start;
gap: 6px;
margin-top: 12px;
margin-left: 4px;
}
.weeks p {
margin: 0;
}
.months {
display: flex;
width: 90%;
height: 22px;
gap: 20px;
margin-left: 38px;
}
.bottom-scale {
display: flex;
align-items: center;
justify-content: end;
gap: 4px;
margin-right: 12px;
}
.bottom-scale p {
margin: 0;
color: #9198a1;
}
.color-box {
height: 10px;
width: 10px;
border-radius: 2px;
}
.legend-1 {
background-color: #171c21;
}
.legend-2 {
background-color: #1f432b;
}
.legend-3 {
background-color: #2e6b38;
}
.legend-4 {
background-color: #52a44f;
}
.legend-5 {
background-color: #6cd064;
}
#led-container {
padding: 10px;
}
.led-row {
display: flex;
}
.led {
width: 6px;
height: 6px;
margin: 1.8px;
border-radius: 20%;
background-color: #171c21;
}
.led.on-1 {
background-color: #1f432b;
}
.led.on-2 {
background-color: #2e6b38;
}
.led.on-3 {
background-color: #52a44f;
}
.led.on-4 {
background-color: #6cd064;
}
section {
overflow: hidden;
padding-top: 3em;
@@ -167,3 +341,4 @@ h2 {
}
}
}