Skip to content

Commit f54da97

Browse files
AbelDeTenaAbelDeTena
committed
uploaded fro review
1 parent 1124aca commit f54da97

File tree

1 file changed

+253
-2
lines changed

1 file changed

+253
-2
lines changed

‎export-samples/html/cv-template copy.html renamed to ‎export-samples/html/cv-template-minimal.html

Lines changed: 253 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,261 @@
1717
href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
1818
rel="stylesheet"
1919
/>
20-
<link rel="stylesheet" href="style.css" />
2120

2221
<title>CV Manfred Export</title>
23-
<style></style>
22+
<style>
23+
/* css vars */
24+
:root {
25+
/* spacing */
26+
--spacing_base: 4px;
27+
--spacing_2: calc(var(--spacing_base) / 2);
28+
--spacing_8: calc(var(--spacing_base) * 2);
29+
--spacing_12: calc(var(--spacing_base) * 3);
30+
--spacing_16: calc(var(--spacing_base) * 4);
31+
--spacing_24: calc(var(--spacing_base) * 6);
32+
--spacing_32: calc(var(--spacing_base) * 8);
33+
--spacing_48: calc(var(--spacing_base) * 12);
34+
--spacing_64: calc(var(--spacing_base) * 16);
35+
36+
/* colors */
37+
--primary_color: #11383a; /* only this color can be changed */
38+
--BgColor: #fbfbfa;
39+
--white_color: #fefefe;
40+
--gray_color_900: #5c5a58;
41+
--gray_color_700: #9b9894;
42+
--gray_color_600: #c6c3be;
43+
--gray_color_500: #dad6d1;
44+
--black_color: #0d1418;
45+
}
46+
/* General styles */
47+
* {
48+
margin: 0;
49+
padding: 0;
50+
box-sizing: border-box;
51+
}
52+
html {
53+
font-family: Inter, sans-serif;
54+
font-size: 16px;
55+
color: var(--primary_color);
56+
font-style: normal;
57+
background-color: var(--BgColor);
58+
}
59+
body {
60+
background-color: var(--white_color);
61+
display: flex;
62+
flex-direction: column;
63+
display: grid;
64+
grid-template-columns: 1fr;
65+
min-height: 100vh;
66+
padding: var(--spacing_48) var(--spacing_24);
67+
}
68+
/* General styles - typography */
69+
h1 {
70+
font-size: 32px;
71+
font-weight: 800;
72+
text-transform: capitalize;
73+
}
74+
h2 {
75+
font-size: 14px;
76+
font-weight: 600;
77+
text-transform: uppercase;
78+
letter-spacing: 1.4px;
79+
word-wrap: break-word;
80+
}
81+
h3 {
82+
font-size: 12px;
83+
font-weight: 600;
84+
text-transform: uppercase;
85+
letter-spacing: 1.2px;
86+
word-wrap: break-word;
87+
}
88+
/* header - styles */
89+
header {
90+
font-family: Montserrat;
91+
word-wrap: break-word;
92+
display: flex;
93+
flex-direction: column;
94+
gap: var(--spacing_12);
95+
}
96+
97+
/* aside - styles */
98+
aside {
99+
display: flex;
100+
flex-direction: column;
101+
padding: var(--spacing_48) 0;
102+
gap: var(--spacing_12);
103+
}
104+
.aside__container {
105+
display: flex;
106+
flex-direction: column;
107+
gap: var(--spacing_8);
108+
}
109+
.aside__container__item {
110+
font-size: 11px;
111+
font-family: Inter;
112+
font-weight: 500;
113+
word-wrap: break-word;
114+
color: var(--gray_color_900);
115+
display: flex;
116+
gap: var(--spacing_8);
117+
}
118+
.aside__container__item a {
119+
text-decoration: none;
120+
color: inherit;
121+
}
122+
/* main - styles */
123+
main {
124+
display: flex;
125+
flex-direction: column;
126+
}
127+
hr {
128+
margin-top: var(--spacing_24);
129+
margin-bottom: var(--spacing_24);
130+
border-color: var(--gray_color_500);
131+
/* border-color: aqua; */
132+
}
133+
section {
134+
display: flex;
135+
flex-direction: column;
136+
gap: var(--spacing_12);
137+
}
138+
.section__content {
139+
color: var(--gray_color_900);
140+
font-size: 12px;
141+
font-family: Inter;
142+
font-weight: 500;
143+
line-height: 16px;
144+
word-wrap: break-word;
145+
}
146+
147+
/* languages section */
148+
.section__languages {
149+
color: var(--gray_color_900);
150+
font-size: 12px;
151+
font-family: Inter;
152+
font-weight: 500;
153+
line-height: 16px;
154+
word-wrap: break-word;
155+
display: flex;
156+
flex-direction: column;
157+
gap: var(--spacing_12);
158+
padding: 0 var(--spacing_8);
159+
}
160+
.section__languages__item {
161+
display: flex;
162+
align-items: center;
163+
}
164+
165+
.section__languages__item div {
166+
display: flex;
167+
flex-direction: column;
168+
gap: var(--spacing_8);
169+
width: 120px; /* revisar */
170+
}
171+
172+
.section__languages__sub {
173+
color: var(--gray_color_600);
174+
font-size: 10px;
175+
font-family: Inter;
176+
font-weight: 500;
177+
word-wrap: break-word;
178+
}
179+
180+
/* skills section */
181+
ul {
182+
padding-left: var(--spacing_24);
183+
}
184+
li:not(:last-child) {
185+
margin-bottom: var(--spacing_8);
186+
}
187+
188+
/* education section */
189+
.section__education {
190+
display: flex;
191+
flex-direction: column;
192+
gap: var(--spacing_12);
193+
}
194+
195+
.section__education div p:first-child {
196+
color: var(--gray_color_700);
197+
font-size: 12px;
198+
font-family: Inter;
199+
font-weight: 500;
200+
line-height: 16px;
201+
word-wrap: break-word;
202+
}
203+
204+
.section__education div p:nth-child(2) {
205+
color: var(--primary_color);
206+
font-size: 12px;
207+
font-family: Inter;
208+
font-weight: 600;
209+
line-height: 16px;
210+
word-wrap: break-word;
211+
}
212+
213+
/* experiencie section */
214+
.section__experiencie {
215+
display: flex;
216+
flex-direction: column;
217+
}
218+
article {
219+
display: flex;
220+
flex-direction: column;
221+
gap: var(--spacing_12);
222+
}
223+
224+
article header {
225+
display: flex;
226+
gap: var(--spacing_base);
227+
}
228+
229+
article header h3 {
230+
text-transform: capitalize;
231+
color: var(--primary_color);
232+
}
233+
234+
.separator::before {
235+
content: '';
236+
margin-right: var(--spacing_8);
237+
}
238+
.separator::after {
239+
content: '';
240+
margin-left: var(--spacing_8);
241+
}
242+
243+
@media (min-width: 728px) {
244+
body {
245+
grid-template-columns: 1fr 1fr;
246+
align-items: start;
247+
max-width: 1024px;
248+
justify-content: space-between;
249+
margin: auto;
250+
}
251+
body::before {
252+
content: '';
253+
position: fixed;
254+
top: 0;
255+
left: 50%;
256+
width: 1px;
257+
height: 100vh;
258+
background-color: var(--gray_color_500);
259+
transform: translateX(-50%);
260+
}
261+
.left {
262+
grid-column: 1;
263+
padding: 0 var(--spacing_24);
264+
}
265+
266+
.right {
267+
grid-column: 2 / -1;
268+
padding: 0 var(--spacing_24);
269+
}
270+
.none {
271+
display: none;
272+
}
273+
}
274+
</style>
24275
</head>
25276
<body>
26277
<div class="left">

0 commit comments

Comments
 (0)