Skip to content

Commit aa84db5

Browse files
Harshdev098Harshdev098
authored
Merge pull request #440 from NikitaMulam2005/fix-issue-412
Commit for fixing issue #412
2 parents e09f1ba + 3a9166f commit aa84db5

File tree

2 files changed

+429
-373
lines changed

2 files changed

+429
-373
lines changed

‎public/css/profile.css

+171-112
Original file line numberDiff line numberDiff line change
@@ -1,168 +1,227 @@
1-
*{
2-
box-sizing: border-box;
3-
}
4-
body{
1+
* {
52
margin: 0;
63
padding: 0;
7-
background-color: var(--primary-color);
8-
color: var(--secondary-color);
4+
box-sizing: border-box;
95
}
10-
section{
6+
7+
/* SIDE NAVBAR */
8+
.container {
119
display: flex;
1210
}
13-
#box1 {
14-
width: 100%;
15-
max-width: 500px;
16-
padding: 12px;
17-
border-radius: 8px;
18-
text-align: center;
19-
font-size: 22px;
20-
position: absolute;
21-
top: 10%;
22-
left: 50%;
23-
transform: translateX(-50%);
24-
}
25-
#box1 {
26-
background-color: #d4edda;
27-
color: #155724;
28-
border: 1px solid #c3e6cb;
29-
display: none;
30-
}
31-
:root{
32-
--primary-color: #fff;
33-
--secondary-color: #0e0e0e;
34-
--ternary-color: #f0f8ff;
35-
--forth-color: #f0f8ff;
3611

37-
}
12+
.side-nav {
13+
padding: 10px;
14+
width: 25%;
15+
min-height: 100vh;
16+
background-color: rgb(42, 40, 40);
17+
border-top-right-radius: 50px;
18+
border-bottom-right-radius: 50px;
19+
}
3820

39-
40-
.dark-theme{
41-
--primary-color: #0e0e0e;
42-
--secondary-color: #fff;
43-
--ternary-color: #0e0e0e;
44-
--forth-color: green;
45-
}
46-
47-
/* container styling */
48-
.container{
49-
background-color: var(--ternary-color);
50-
height: 100vh;
51-
color: var(--secondary-color);
52-
}
53-
.container ul{
54-
border-top: 2px solid var(--secondary-color);
55-
padding: 0;
56-
margin: 0;
21+
.heading {
22+
color: darkgoldenrod;
5723
}
58-
.container ul li{
59-
list-style: none;
60-
margin: 7px 26px 7px 16px;
61-
padding: 8px 44px 8px 26px;
62-
font-size: 20px;
24+
25+
.logo {
26+
display: flex;
27+
align-items: center;
6328
}
64-
.container ul li:hover{
65-
background-color: var(--primary-color);
66-
border-radius: 12px;
67-
cursor: pointer;
68-
color: beige;
29+
30+
.outer-profile {
31+
width: 130px;
32+
height: 40px;
33+
display: flex;
34+
align-items: center;
35+
gap: 10px;
36+
padding: 10px;
37+
background-color: rgba(160, 160, 160, 0.5);
38+
border-radius: 10px;
6939
}
70-
.darkmode{
71-
border-bottom: 2px solid var(--secondary-color);
72-
cursor: pointer;
73-
padding: 12px;
74-
margin: 4px;
75-
font-size: 30px;
40+
41+
.profile-icon {
42+
height: 30px;
43+
width: 30px;
44+
background-color: rgb(252, 251, 246);
45+
border-radius: 50px;
7646
}
77-
.profile img{
78-
margin: 12px;
79-
display: block;
80-
margin: auto;
81-
border-radius: 50%;
47+
48+
#username {
49+
color: white;
8250
}
83-
.profile{
51+
52+
.profile-section {
8453
display: flex;
85-
flex-direction: column;
86-
font-size: 20px;
87-
padding: 12px;
88-
margin: 12px;
54+
justify-content: space-between;
55+
align-items: center;
8956
}
90-
.profile strong{
91-
padding: 14px;
57+
58+
.count {
59+
position: relative;
60+
right: 40px;
61+
text-align: center;
62+
height: 20px;
63+
width: 20px;
64+
border-radius: 10px;
65+
background-color: darkgoldenrod;
9266
}
9367

94-
/* main styling */
95-
.main{
68+
.box {
9669
display: flex;
97-
flex-wrap: wrap;
98-
justify-content: space-between;
9970
align-items: center;
71+
gap: 20px;
10072
}
101-
.main img{
102-
margin: 26px;
103-
border-radius: 75%;
73+
74+
.text {
75+
color: rgb(132, 123, 123);
10476
}
105-
.main p{
106-
font-size: 42px;
107-
padding: 26px 26px;
108-
margin: 0;
77+
.text:hover{
78+
color:darkgoldenrod;
10979
}
110-
.main button a{
111-
text-decoration: none;
112-
font-size: 16px;
113-
background-color: rgb(212, 42, 42);
114-
color: var(--secondary-color);
80+
81+
/* MAIN */
82+
main {
83+
background-color: rgb(252, 251, 246);
11584
}
116-
.main button{
117-
padding: 10px;
118-
margin: 0px 20px;
119-
background-color: rgb(212, 42, 42);
120-
border: none;
121-
border-radius: 8px;
85+
86+
.main-top {
87+
padding: 30px;
88+
display: flex;
89+
justify-content: flex-end;
90+
align-items: center;
12291
}
123-
.largesection{
124-
flex: 1;
92+
93+
.profile-pic {
94+
width: 50px;
95+
height: 50px;
96+
background-color: rgb(217, 214, 199);
97+
border-radius: 50px;
12598
}
12699

127-
/* detail styling */
128-
#detail ul{
100+
.profile-pic-add {
101+
margin: 3rem;
102+
width: 90%;
103+
min-height: 20rem;
104+
display: flex;
105+
justify-content: center;
106+
align-items: center;
107+
background-color: white;
108+
border-radius: 40px;
109+
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), -10px -10px 20px rgba(255, 255, 255, 0.4);
110+
}
111+
.profile-details{
112+
margin: 0px 3rem;
113+
margin-bottom: 70px;
114+
width:90%;
115+
min-height: 33rem;
116+
background-color:white ;
117+
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), -10px -10px 20px rgba(255, 255, 255, 0.4);
118+
119+
}
120+
121+
#detail ul {
129122
margin: 8px;
130123
}
131-
#detail ul li{
124+
125+
#detail ul li {
132126
list-style: none;
133127
font-size: 20px;
134128
margin: 8px;
135129
padding: 8px;
136130
}
131+
137132
#detail ul li p,
138-
#detail ul li input{
139-
background-color: var(--forth-color);
140-
color: var(--secondary-color);
133+
#detail ul li input {
134+
border:1px solid black;
141135
margin: 5px 0px;
142-
padding: 10px;
136+
padding: 20px;
143137
border-radius: 10px;
144138
}
145139

146140
#detail ul li input {
147141
width: 80vw;
148142
}
149143

150-
#result{
144+
.detail-text{
145+
color:darkgoldenrod;
146+
}
147+
.add-pic{
148+
width:200px;
149+
height:200px;
150+
background-color: rgb(231, 212, 187);
151+
border-radius:100px;
152+
}
153+
.user-text{
154+
margin-left:2rem;
155+
color:grey
156+
}
157+
158+
/* Dark Mode */
159+
body.dark-mode {
160+
background-color: hwb(45 84% 0%); /* Dark body background */
161+
color: black; /* Text color in dark mode */
162+
}
163+
main.dark-mode{
164+
background-color: hwb(45 84% 0%);;
165+
color: black; /* Text color in dark mode */
166+
}
167+
168+
.side-nav.dark-mode {
169+
background-color: #333333; /* Darker navbar background in dark mode */
170+
color: #e0e0e0; /* Text color in dark mode */
171+
}
172+
173+
.user-text.dark-mode{
174+
color:black;
175+
}
176+
177+
.dualBtns {
178+
display: flex;
179+
justify-content: center;
180+
margin: 20px;
181+
182+
}
183+
184+
.dualBtns button {
185+
padding: 12px 20px;
186+
font-size: 16px;
187+
border: none;
188+
border-radius: 8px;
189+
margin-right: 15px;
190+
cursor: pointer;
191+
}
192+
193+
.dualBtns button:first-child {
194+
background-color: #04AA6D; /* Green */
195+
color: white;
196+
}
197+
198+
.dualBtns button:last-child {
199+
background-color: #F95454; /* Red */
200+
color: white;
201+
}
202+
203+
/* Result Section */
204+
#result {
151205
display: none;
152206
}
153-
#result strong{
207+
208+
#result strong {
154209
margin: 10px;
155210
padding: 16px;
156211
font-size: 24px;
157212
display: inline;
158213
}
159-
#result p{
214+
215+
#result p {
160216
padding: 10px;
161217
font-size: 21px;
162218
display: inline-block;
163219
color: rgb(6, 241, 6);
164220
}
165-
.data p{
221+
222+
.data p {
166223
margin: 16px;
167224
padding: 20px 0px;
168225
}
226+
227+

0 commit comments

Comments
 (0)