Skip to content

Commit f86d3b3

Browse files
utkrshiftutkrshift
committed
💅 style(): restructured and styled developers page
git graph moving text, some new changes in the images added navbar
1 parent 46c76f6 commit f86d3b3

File tree

11 files changed

+594
-8
lines changed

11 files changed

+594
-8
lines changed

‎assets/2147811240.jpg‎

758 KB
Loading

‎assets/2147835077.jpg‎

375 KB
Loading

‎assets/241130_04h46m22s_screenshot.png‎

215 KB
Loading

‎assets/54362.jpg‎

248 KB
Loading

‎assets/back.jpg‎

1.54 MB
Loading

‎assets/eshanized.png‎

-533 KB
Binary file not shown.

‎assets/iconixed.jpg‎

-2.67 MB
Binary file not shown.

‎assets/utkarsh.jpg‎

-1.4 MB
Binary file not shown.

‎developers.css‎

Lines changed: 179 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,20 @@
99

1010
body {
1111
min-height: 100vh;
12-
display: flex;
12+
display: block;
1313
justify-content: center;
1414
align-items: center;
15-
background: url(./assets/background.png);
15+
background: url(./assets/back.jpg);
16+
background-repeat: no-repeat;
17+
background-size: cover;
1618
transition: 0.5s;
1719
font-family: "Ubuntu", sans-serif;
1820
font-weight: 400;
1921
font-style: normal;
2022
}
2123

2224
body:has(.box[data-color="clr1"]:hover) {
23-
background: url(./assets/eshanized.png);
25+
background: url(./assets/54362.jpg);
2426
background-repeat: no-repeat;
2527
background-size: cover;
2628
}
@@ -29,11 +31,183 @@ body:has(.box[data-color="clr2"]:hover) {
2931
background-repeat: no-repeat;
3032
background-size: cover;
3133
}
34+
3235
body:has(.box[data-color="clr3"]:hover) {
33-
background: url(./assets/iconixed.jpg);
36+
background: url(./assets/2147811240.jpg);
37+
background-repeat: no-repeat;
38+
background-size: cover;
39+
}
40+
41+
body:has(.box[data-color="clr4"]:hover) {
42+
background: url(./assets/2147835077.jpg);
3443
background-repeat: no-repeat;
3544
background-size: cover;
3645
}
46+
/* nav */
47+
48+
.navbar {
49+
display: flex;
50+
justify-content: space-between;
51+
align-items: center;
52+
position: fixed;
53+
width: 100%;
54+
top: 0;
55+
background-color: rgba(26, 31, 44, 0);
56+
z-index: 1000;
57+
padding-inline: 5rem;
58+
backdrop-filter: blur(5px);
59+
}
60+
61+
.logo {
62+
height: 40px;
63+
}
64+
65+
a {
66+
color: #000;
67+
position: relative;
68+
text-decoration: none;
69+
}
70+
71+
a::before {
72+
background: #754ffe;
73+
content: "";
74+
inset: 0;
75+
position: absolute;
76+
transform: scaleX(0);
77+
transform-origin: left;
78+
transition: transform 0.5s ease-in-out;
79+
z-index: -1;
80+
}
81+
82+
a:hover::before {
83+
transform: scaleX(1);
84+
transform-origin: left;
85+
}
86+
87+
.nav-links {
88+
display: flex;
89+
gap: 2rem;
90+
}
91+
92+
.nav-links a {
93+
color: white;
94+
text-decoration: none;
95+
font-size: 0.9rem;
96+
text-transform: uppercase;
97+
font-weight: 800;
98+
}
99+
100+
101+
/* devs */
102+
* {
103+
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
104+
color: white;
105+
font-size: 12px;
106+
}
107+
.git-i{
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
margin-top: 20px;
112+
}
113+
.git-contributions {
114+
width: 500x;
115+
height: 160px;
116+
padding: 20px;
117+
margin: 10px;
118+
border: solid 1px #3d444d;
119+
border-radius: 10px;
120+
121+
}
122+
123+
.contribute-calendar {
124+
display: flex;
125+
}
126+
127+
.weeks {
128+
display: flex;
129+
flex-direction: column;
130+
justify-content: start;
131+
gap: 6px;
132+
margin-top: 12px;
133+
margin-left: 4px;
134+
}
135+
136+
.weeks p {
137+
margin: 0;
138+
}
139+
140+
.months {
141+
display: flex;
142+
width: 90%;
143+
height: 22px;
144+
gap: 20px;
145+
margin-left: 38px;
146+
}
147+
148+
.bottom-scale {
149+
display: flex;
150+
align-items: center;
151+
justify-content: end;
152+
gap: 4px;
153+
margin-right: 12px;
154+
}
155+
156+
.bottom-scale p {
157+
margin: 0;
158+
color: #9198a1;
159+
}
160+
161+
.color-box {
162+
height: 10px;
163+
width: 10px;
164+
border-radius: 2px;
165+
}
166+
167+
.legend-1 {
168+
background-color: #171c21;
169+
}
170+
171+
.legend-2 {
172+
background-color: #1f432b;
173+
}
174+
.legend-3 {
175+
background-color: #2e6b38;
176+
}
177+
.legend-4 {
178+
background-color: #52a44f;
179+
}
180+
.legend-5 {
181+
background-color: #6cd064;
182+
}
183+
184+
#led-container {
185+
padding: 10px;
186+
}
187+
.led-row {
188+
display: flex;
189+
}
190+
.led {
191+
width: 6px;
192+
height: 6px;
193+
margin: 1.8px;
194+
border-radius: 20%;
195+
background-color: #171c21;
196+
}
197+
.led.on-1 {
198+
background-color: #1f432b;
199+
}
200+
.led.on-2 {
201+
background-color: #2e6b38;
202+
}
203+
.led.on-3 {
204+
background-color: #52a44f;
205+
}
206+
207+
.led.on-4 {
208+
background-color: #6cd064;
209+
}
210+
37211

38212
section {
39213
overflow: hidden;
@@ -167,3 +341,4 @@ h2 {
167341
}
168342
}
169343
}
344+

‎developers.html‎

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,74 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Snigdha OS | Developers</title>
88
<link rel="stylesheet" href="developers.css">
9+
<script src="./developers.js" defer></script>
910
</head>
1011
<section>
11-
<h2>Meet The Developers</h2>
12+
<nav class="navbar">
13+
<a href="/">
14+
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="60" height="60">
15+
<title>Snigdha OS</title>
16+
<style>
17+
.s0 { display: none;fill: #28282b }
18+
.s1 { fill: #ffffff }
19+
.s2 { display: none;fill: #754ffe }
20+
</style>
21+
<path id="Shape 1" class="s0" d="m633-38v587h-755v-587z"/>
22+
<path id="&lt;Compound Path&gt;" fill-rule="evenodd" class="s1" d="m226.7 303.9q2.1-37-25.4-57.2c-36.2-25.2-77-42-99.1-76.3-6.8-10.4-11.8-22.5-14.4-36.9 4.7 9.6 11.9 17.9 20.7 23.9 4.4-8.1 9.4-15.7 15-22.9q2.5 40.2 45.1 68.2l38.5 29q23.7 18 35.6 41.9c1.3-19.3 15.1-59.2-6.4-70.6q1.8 15-1.3 22.3c-45.6-16.6-74.9-65.1-89.5-114.3-5.8-19.5-9.3-39.1-10.5-56.9 4.2 17.1 12.6 32.8 24.6 45.7 27.6-19.5 61.3-31 97.7-31 34.6 0 66.7 10.4 93.5 28.2 16.5-8.7 27.9-24.5 31-42.9-1.3 18.3-4.9 38.4-11 58.5-14.7 48.6-43.9 96.3-89.1 112.7 1.5-14.9-7.7-28.7-22-33.1 9.6 0.6 18.3-5.8 20.4-15.2-17.6-3.4-35.6 2.7-47.6 16 10.3-1 20.5 2.8 27.6 10.4 5 5.4 8.1 12.3 8.7 19.5 0.3 2.9 0.2 5.9-0.3 8.8-2.8 13.8-7.2 27.1-13.2 39.9-6.5 16.4-4.2 35.1 6.2 49.4 0.6-16.5 4.9-32.7 12.6-47.4q11.9-23.9 35.5-41.9l38.5-29q41.3-27.1 45-65.6c4.6 6.3 8.9 12.9 12.7 19.8 8.7-6 15.9-14.1 20.9-23.4-2.6 14.4-7.6 26.5-14.3 37-22.1 34.2-63 51-99.2 76.2q-27.5 20.2-25.4 57.2 18.3-22.1 51.1-22.3 71.5-1.4 87.4-41.3c-1.3 83.7-63.4 152.6-144.2 164.5-4.3 9.1-13.1 15.4-23.1 16.5-10-1.4-18.8-7.4-23.8-16.1-82.1-10.7-145.6-80.2-146.9-164.9q15.8 39.9 87.3 41.3 32.9 0.2 51.1 22.3zm69.6 87.7q16.5-16.9 2.2-40-11.4-14.3-18.8-38.3-13.2 26.6 0.2 45.3 17 17.5 16.4 33zm-25.8 14.5c2.3-5.2 3.5-10.8 3.5-16.6 0-12.3-5.5-24-15-31.8-9.5 7.8-15 19.5-15 31.8 0 5.9 1.2 11.6 3.6 16.9 2.6 5.7 6.4 10.8 11.4 14.9 5-4.1 8.9-9.4 11.5-15.2zm155.4-180.4c0.1 1.6 5.2 1 7.7 0.9-25.5 13.9-57.7 27.1-81.7 31.7q-23.6 5.1-42.4 15 10.1-15.1 39.8-24.9 56.3-21.3 72.3-50.3c2.2 8.9 3.6 18.2 4.3 27.6zm-337.1-0.1c0.8-9.1 2.1-18.6 4.1-27.5q16.1 29 72.3 50.3 29.8 9.8 39.8 24.9-18.7-9.9-42.3-15c-24.1-4.6-58.1-18.8-83.5-32.7 2.9 0.4 9.5 1.6 9.6 0zm149.2 133q13.5-18.7 0.3-45.3-7.4 24-18.8 38.3-14.3 23.1 2.1 40-0.5-15.5 16.4-33z"/>
23+
<path id="snigdhaos.org" class="s2" aria-label="snigdhaos.org" d="m182.5 454.2q-1.2 0-2.4-0.2-1.2-0.4-1.8-0.8l0.9-2q1.4 1 3.3 1 1.8 0 1.8-1.1 0-0.5-0.3-0.7-0.4-0.3-1.4-0.6l-0.9-0.4q-1.5-0.6-2.3-1.4-0.8-0.8-0.8-2.1 0-1.5 1.1-2.3 1.2-0.9 3.2-0.9 1 0 1.9 0.2 1 0.2 1.5 0.6l-0.9 2q-0.3-0.3-1-0.5-0.7-0.2-1.5-0.2-1.7 0-1.7 1 0 0.6 0.4 0.9 0.5 0.3 1.5 0.6 0.1 0.1 0.7 0.3 1.6 0.6 2.3 1.4 0.8 0.7 0.8 1.9 0 1.7-1.3 2.5-1.2 0.8-3.1 0.8zm7.1-0.2v-11h2.5v2q0.5-1 1.5-1.7 0.9-0.6 2.3-0.6 1.7 0 2.6 0.7 0.9 0.7 1.2 2 0.3 1.3 0.3 3.3v5.3h-2.6v-5.2q0-2.1-0.4-3-0.4-1-1.7-1-0.7 0-1.4 0.5-0.8 0.4-1.3 1.3-0.5 0.8-0.5 1.9v5.5zm14 0v-11h2.7v11zm1.3-13.1q-0.7 0-1.2-0.5-0.5-0.5-0.5-1.2 0-0.7 0.5-1.2 0.5-0.5 1.2-0.5 0.8 0 1.3 0.5 0.5 0.5 0.5 1.2 0 0.7-0.5 1.2-0.5 0.5-1.3 0.5zm10.4 18.9q-1.3 0-2.5-0.4-1.1-0.3-1.6-0.6l0.5-2.4q1.6 1 3.5 1 1.4 0 2.4-0.7 1-0.7 1-2.7v-1.9q-0.5 0.9-1.6 1.5-1.1 0.6-2.5 0.6-1.4 0-2.6-0.7-1.2-0.7-1.9-2-0.7-1.3-0.7-3.1 0-1.6 0.6-2.9 0.7-1.4 1.9-2.1 1.2-0.7 2.9-0.7 0.9 0 1.8 0.3 0.8 0.4 1.4 0.9 0.6 0.5 0.8 0.9v-1.8h2.5v10.9q0 2.8-1.5 4.3-1.4 1.6-4.4 1.6zm-0.1-7.7q1.4 0 2.3-1 1-0.9 1-2.5v-0.1q0-1.1-0.5-1.9-0.4-0.8-1.2-1.3-0.7-0.4-1.6-0.4-1.5 0-2.4 1-0.8 1-0.8 2.6 0 1.6 0.8 2.6 0.9 1 2.4 1zm14.2 2.1q-1.5 0-2.8-0.7-1.3-0.7-2-2-0.8-1.3-0.8-3 0-2.7 1.5-4.2 1.5-1.6 4-1.6 1.3 0 2.5 0.7 1.2 0.7 1.6 1.6l-0.2-1.8v-6.8h2.6v17.6h-2.5v-1.9q-0.4 0.8-1.5 1.5-1.1 0.6-2.4 0.6zm0.4-2.1q1.4 0 2.3-1 0.9-0.9 0.9-2.5v-0.1q0-1.1-0.4-1.9-0.4-0.8-1.2-1.3-0.7-0.4-1.6-0.4-1.6 0-2.4 1-0.8 1-0.8 2.6 0 1.6 0.8 2.6 0.8 1 2.4 1zm9.5 1.9v-17.6h2.6v6.6l-0.1 2q0.4-1 1.4-1.6 1-0.7 2.4-0.7 1.7 0 2.6 0.7 0.9 0.7 1.2 2 0.3 1.3 0.3 3.3v5.3h-2.5v-5.3q0-1.4-0.2-2.2-0.2-0.8-0.6-1.2-0.5-0.4-1.4-0.4-0.7 0-1.4 0.4-0.8 0.4-1.2 1.3-0.5 0.8-0.5 1.9v5.5zm18.5 0.2q-1.5 0-2.7-0.7-1.3-0.7-2-2-0.8-1.3-0.8-3 0-1.8 0.7-3.1 0.6-1.3 1.9-2 1.2-0.7 2.8-0.7 1 0 1.8 0.3 0.9 0.4 1.5 0.9 0.5 0.5 0.7 0.9l0.1-1.8h2.4v11h-2.4l-0.1-1.9q-0.4 0.8-1.4 1.5-1.1 0.6-2.5 0.6zm0.5-2.1q1.3 0 2.3-1 0.9-0.9 0.9-2.5v-0.1q0-1.1-0.4-1.9-0.5-0.8-1.2-1.2-0.7-0.5-1.6-0.5-1.6 0-2.4 1-0.9 1-0.9 2.6 0 1.6 0.9 2.6 0.8 1 2.4 1zm14.6 2.1q-1.7 0-3.1-0.7-1.3-0.8-2-2.1-0.7-1.3-0.7-2.9 0-1.6 0.7-2.9 0.7-1.4 2-2.1 1.3-0.8 3.1-0.8 1.7 0 3 0.8 1.3 0.7 2 2.1 0.7 1.3 0.7 2.9 0 1.6-0.7 2.9-0.7 1.3-2 2.1-1.3 0.7-3 0.7zm0-2.1q1.4 0 2.2-1 0.8-1 0.8-2.6 0-1.6-0.8-2.6-0.9-1.1-2.3-1.1-1.4 0-2.2 1.1-0.8 1-0.8 2.6 0 1.5 0.8 2.6 0.9 1 2.3 1zm12.3 2.1q-1.2 0-2.4-0.2-1.3-0.4-1.8-0.8l0.9-2q1.4 1 3.3 1 1.8 0 1.8-1.1 0-0.5-0.4-0.7-0.4-0.3-1.3-0.6l-0.9-0.4q-1.5-0.6-2.3-1.4-0.9-0.8-0.9-2.1 0-1.5 1.2-2.3 1.2-0.9 3.2-0.9 1 0 1.9 0.2 1 0.2 1.5 0.6l-1 2q-0.3-0.3-1-0.5-0.6-0.2-1.5-0.2-1.7 0-1.7 1 0 0.6 0.5 0.9 0.4 0.3 1.5 0.6 0.1 0.1 0.7 0.3 1.5 0.6 2.3 1.4 0.7 0.7 0.7 1.9 0 1.7-1.2 2.5-1.2 0.8-3.1 0.8zm8.8 0q-0.7 0-1.2-0.4-0.5-0.5-0.5-1.3 0-0.7 0.5-1.2 0.5-0.5 1.2-0.5 0.7 0 1.2 0.5 0.5 0.5 0.5 1.2 0 0.8-0.5 1.3-0.5 0.4-1.2 0.4zm9.9 0q-1.7 0-3.1-0.7-1.3-0.8-2-2.1-0.7-1.3-0.7-2.9 0-1.6 0.7-2.9 0.7-1.4 2-2.1 1.3-0.8 3.1-0.8 1.7 0 3 0.8 1.3 0.7 2 2.1 0.7 1.3 0.7 2.9 0 1.6-0.7 2.9-0.7 1.3-2 2.1-1.3 0.7-3 0.7zm0-2.1q1.4 0 2.2-1 0.8-1 0.8-2.6 0-1.6-0.8-2.6-0.9-1.1-2.3-1.1-1.4 0-2.2 1.1-0.8 1-0.8 2.6 0 1.5 0.9 2.6 0.8 1 2.2 1zm8.4 1.9v-11h2.6v2.1q0.4-1.1 1.3-1.7 0.8-0.7 1.9-0.7 0.8 0 1.1 0.1l-0.4 2.7q-0.2-0.2-0.9-0.2-1.1 0-2.1 0.7-0.9 0.8-0.9 2.3v5.7zm14 5.8q-1.2 0-2.4-0.4-1.2-0.3-1.7-0.6l0.6-2.4q1.6 1 3.5 1 1.4 0 2.4-0.7 1-0.7 1-2.7v-1.9q-0.5 0.9-1.6 1.5-1.2 0.6-2.5 0.6-1.5 0-2.7-0.7-1.2-0.7-1.9-2-0.7-1.3-0.7-3.1 0-1.6 0.7-2.9 0.7-1.4 1.9-2.1 1.2-0.7 2.8-0.7 1 0 1.8 0.3 0.9 0.4 1.5 0.9 0.6 0.5 0.8 0.9v-1.8h2.4v10.9q0 2.8-1.4 4.3-1.4 1.6-4.5 1.6zm0-7.7q1.4 0 2.3-1 0.9-0.9 0.9-2.5v-0.1q0-1.1-0.4-1.9-0.4-0.8-1.2-1.3-0.7-0.4-1.6-0.4-1.5 0-2.4 1-0.8 1-0.8 2.6 0 1.6 0.8 2.6 0.8 1 2.4 1z"/>
24+
</svg>
25+
</a>
26+
<div class="nav-links">
27+
<a href="#">Get Started</a>
28+
<a href="#">Articles</a>
29+
<a href="#">Community</a>
30+
<a href="/developers.html" target="_blank">Developers</a>
31+
</div>
32+
</nav>
33+
34+
<!-- ==========meet the devs================ -->
35+
<div class="git-i">
36+
<div class="git-contributions">
37+
<div class="months">
38+
<p>Jan</p>
39+
<p>Feb</p>
40+
<p>Mar</p>
41+
<p>Apr</p>
42+
<p>May</p>
43+
<p>Jun</p>
44+
<p>Jul</p>
45+
<p>Aug</p>
46+
<p>Sep</p>
47+
<p>Oct</p>
48+
<p>Nov</p>
49+
<p>Dec</p>
50+
</div>
51+
<div class="contribute-calendar">
52+
<div class="weeks">
53+
<p>Mon</p>
54+
<p>Wed</p>
55+
<p>Fri</p>
56+
</div>
57+
<div>
58+
<div id="led-container"></div>
59+
<div class="bottom-scale">
60+
<p>Less</p>
61+
<div class="color-box legend-1"></div>
62+
<div class="color-box legend-2"></div>
63+
<div class="color-box legend-3"></div>
64+
<div class="color-box legend-4"></div>
65+
<div class="color-box legend-5"></div>
66+
<p>More</p>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<!-- =========Meet the devs end============= -->
74+
75+
76+
1277
<div class="container">
1378
<div class="box" data-color="clr1">
1479
<div class="imgBox">
@@ -47,16 +112,16 @@ <h3>Iconized<br />
47112
</ul>
48113
</div>
49114
</div>
50-
<div class="box" data-color="clr3">
115+
<div class="box" data-color="clr4">
51116
<div class="imgBox">
52-
<img src="https://avatars.githubusercontent.com/u/157954129?v=4" alt="Werewolf">
117+
<img src="./assets/241130_04h46m22s_screenshot.png" alt="Werewolf">
53118
</div>
54119
<div class="glass">
55120
<h3>Utkarsh Gaur<br />
56121
<span>Developer</span>
57122
</h3>
58123
<ul>
59-
<a href="https://en.wikipedia.org/wiki/Werewolf" target="_blank"> <ion-icon name="globe-outline"></ion-icon> </a>
124+
<a href="" target="_blank"> <ion-icon name="globe-outline"></ion-icon> </a>
60125
</ul>
61126
</div>
62127
</div>

0 commit comments

Comments
 (0)