test/styles.css at main · Vopwe/test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* Reset default margin and padding for all elements */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

p {
    margin-bottom: 16px;
}

section {
    margin: 30px 0;
}

/* Set a black-and-white color scheme */
body {
    background-color: #fff;
    color: #000;
    font-family: 'Arial', sans-serif;
    line-height: 1.6; /* Generous line height for easier reading */
}

/* Horizontal header with center-aligned content */
header {
    background-color: #000;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    font-size: 32px;
}

nav ul {
    list-style: none;
}

nav li {
    display: inline-block;
    margin-right: 20px;
}

nav li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
}

nav a:hover {
    text-decoration: underline;
}

/* Style the About section */
#about {
    text-align: center;
}

.about-content {
    margin-top: 30px; /* Add visual space between header and content */
}

.about-content img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 20px; /* Add visual space below the picture */
}

/* Style the Skills section */
.skill {
    margin-bottom: 20px;
}

/* Create the progress bar */
.progress-bar {
    background-color: #ddd;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.progress {
    background-color: #000;
    height: 100%;
    color: #fff;
    line-height: 20px;
    text-align: center;
}

/* Style the footer */
footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.social-icons a {
    color: #fff;
    font-size: 24px;
    margin-right: 10px;
}

/* Media Query for Responsive Layout */
@media (max-width: 768px) {
    header {
        padding: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    nav li {
        display: block;
        margin: 10px 0;
    }

    #about {
        padding: 20px;
    }

    .about-content img {
        width: 100px;
        height: 100px;
    }
}