Skip to content

Commit b24fde9

Browse files
henriq-projectshenriq-projects
authored
Add files via upload
1 parent 759800e commit b24fde9

1 file changed

Lines changed: 144 additions & 0 deletions

File tree

‎style.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
:root {
2+
--bg: #0f0f0f;
3+
--sidebar: #161616;
4+
--card: #1e1e1e;
5+
--accent: #00ffe1;
6+
--text: #f5f5f5;
7+
--muted: #aaa;
8+
--border: #2a2a2a;
9+
}
10+
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
font-family: 'Segoe UI', sans-serif;
16+
}
17+
18+
body {
19+
display: flex;
20+
background: var(--bg);
21+
color: var(--text);
22+
min-height: 100vh;
23+
}
24+
25+
/* Sidebar */
26+
.sidebar {
27+
width: 260px;
28+
background: var(--sidebar);
29+
padding: 30px 20px;
30+
border-right: 1px solid var(--border);
31+
}
32+
33+
.sidebar h1 {
34+
color: var(--accent);
35+
margin-bottom: 10px;
36+
}
37+
38+
.tagline {
39+
font-size: 0.9rem;
40+
color: var(--muted);
41+
margin-bottom: 25px;
42+
}
43+
44+
.sidebar ul {
45+
list-style: none;
46+
}
47+
48+
.sidebar li {
49+
margin-bottom: 10px;
50+
}
51+
52+
.sidebar a {
53+
text-decoration: none;
54+
color: var(--text);
55+
padding: 8px 10px;
56+
display: block;
57+
border-radius: 6px;
58+
transition: 0.3s;
59+
}
60+
61+
.sidebar a:hover {
62+
background: var(--accent);
63+
color: #000;
64+
}
65+
66+
/* Main */
67+
main {
68+
flex: 1;
69+
padding: 40px;
70+
}
71+
72+
section {
73+
margin-bottom: 60px;
74+
}
75+
76+
h2 {
77+
color: var(--accent);
78+
margin-bottom: 20px;
79+
}
80+
81+
/* Hero */
82+
.hero p {
83+
max-width: 600px;
84+
line-height: 1.6;
85+
color: var(--muted);
86+
}
87+
88+
/* Skills */
89+
.cards {
90+
display: flex;
91+
flex-wrap: wrap;
92+
gap: 15px;
93+
}
94+
95+
.card {
96+
background: var(--card);
97+
padding: 15px 20px;
98+
border-radius: 10px;
99+
border: 1px solid var(--border);
100+
transition: 0.3s;
101+
}
102+
103+
.card:hover {
104+
transform: translateY(-5px);
105+
border-color: var(--accent);
106+
}
107+
108+
/* Projects */
109+
.project-card {
110+
background: var(--card);
111+
padding: 20px;
112+
border-radius: 10px;
113+
margin-bottom: 20px;
114+
border-left: 4px solid var(--accent);
115+
}
116+
117+
.project-card p {
118+
color: var(--muted);
119+
margin-top: 8px;
120+
}
121+
122+
/* Footer */
123+
footer {
124+
margin-top: 60px;
125+
font-size: 0.9rem;
126+
color: var(--muted);
127+
}
128+
129+
/* Responsivo */
130+
@media (max-width: 768px) {
131+
body {
132+
flex-direction: column;
133+
}
134+
135+
.sidebar {
136+
width: 100%;
137+
border-right: none;
138+
border-bottom: 1px solid var(--border);
139+
}
140+
141+
main {
142+
padding: 20px;
143+
}
144+
}

0 commit comments

Comments
 (0)