File tree Expand file tree Collapse file tree 1 file changed +52
-47
lines changed Expand file tree Collapse file tree 1 file changed +52
-47
lines changed Original file line number Diff line number Diff line change
1
+ /* Global Styles */
1
2
body {
2
3
font-family : Arial, sans-serif;
3
4
line-height : 1.6 ;
4
5
color : # 333 ;
5
6
max-width : 1200px ;
6
7
margin : 0 auto;
7
8
padding : 20px ;
8
- background-color : # f4f4f4 ;
9
9
}
10
10
11
- header {
12
- display : flex;
13
- justify-content : space-between;
14
- align-items : center;
15
- padding : 20px 0 ;
16
- border-bottom : 1px solid # ddd ;
17
- }
18
-
19
- h1 {
20
- margin : 0 ;
21
- font-size : 2.5em ;
11
+ h1 , h2 , h3 {
22
12
color : # 2c3e50 ;
23
13
}
24
14
25
- nav a {
26
- margin-left : 20px ;
27
- text-decoration : none;
15
+ a {
28
16
color : # 3498db ;
29
- font-weight : bold ;
17
+ text-decoration : none ;
30
18
}
31
19
32
- main {
33
- margin-top : 40 px ;
20
+ a : hover {
21
+ text-decoration : underline ;
34
22
}
35
23
36
- # about {
37
- background-color : white;
38
- padding : 40 px ;
39
- border-radius : 8 px ;
40
- box-shadow : 0 2 px 4 px rgba ( 0 , 0 , 0 , 0.1 ) ;
24
+ /* Header and Navigation */
25
+ header {
26
+ background-color : # 2c3e50 ;
27
+ padding : 1 rem ;
28
+ margin-bottom : 2 rem ;
41
29
}
42
30
43
- .about-content {
31
+ nav ul {
32
+ list-style-type : none;
33
+ padding : 0 ;
44
34
display : flex;
45
- align-items : flex-start;
46
- gap : 40px ;
35
+ justify-content : space-around;
47
36
}
48
37
49
- .profile-pic {
50
- width : 200px ;
51
- height : 200px ;
52
- border-radius : 50% ;
53
- object-fit : cover;
38
+ nav ul li a {
39
+ color : # ecf0f1 ;
40
+ font-weight : bold;
54
41
}
55
42
56
- .about-text {
57
- flex : 1 ;
43
+ /* Sections */
44
+ section {
45
+ margin-bottom : 2rem ;
46
+ padding : 1rem ;
47
+ background-color : # f9f9f9 ;
48
+ border-radius : 5px ;
58
49
}
59
50
51
+ /* Social Links */
60
52
.social-links {
61
- margin-top : 20px ;
53
+ display : flex;
54
+ gap : 1rem ;
55
+ margin-top : 1rem ;
62
56
}
63
57
64
58
.social-links a {
65
- font-size : 24 px ;
66
- margin-right : 20 px ;
67
- color : # 3498db ;
59
+ display : inline-flex ;
60
+ align-items : center ;
61
+ gap : 0.5 rem ;
68
62
}
69
63
70
- h2 {
71
- color : # 2c3e50 ;
72
- border-bottom : 2px solid # 3498db ;
73
- padding-bottom : 10px ;
74
- margin-bottom : 20px ;
64
+ /* Project Grid */
65
+ .project-grid {
66
+ display : grid;
67
+ grid-template-columns : repeat (auto-fit, minmax (250px , 1fr ));
68
+ gap : 1rem ;
69
+ }
70
+
71
+ .project-card {
72
+ background-color : # fff ;
73
+ border : 1px solid # ddd ;
74
+ border-radius : 5px ;
75
+ padding : 1rem ;
75
76
}
76
77
78
+ /* Footer */
77
79
footer {
78
- margin-top : 40px ;
79
80
text-align : center;
80
- color : # 777 ;
81
+ margin-top : 2rem ;
82
+ padding : 1rem ;
83
+ background-color : # 2c3e50 ;
84
+ color : # ecf0f1 ;
81
85
}
82
86
87
+ /* Responsive Design */
83
88
@media (max-width : 768px ) {
84
- . about-content {
89
+ nav ul {
85
90
flex-direction : column;
86
91
align-items : center;
87
92
}
88
93
89
- . profile-pic {
90
- margin-bottom : 20 px ;
94
+ nav ul li {
95
+ margin-bottom : 0.5 rem ;
91
96
}
92
97
}
You can’t perform that action at this time.
0 commit comments