98 lines
1.6 KiB
CSS
98 lines
1.6 KiB
CSS
:root {
|
|
--primary-color: #ff10fd;
|
|
--secondary-color: #ffaa02;
|
|
--tertiary-color: #2ca3c2;
|
|
--neutral-color: #000000;
|
|
/* --gradient-start: #fff4df; */
|
|
/* --gradient-end: #b8dee8; */
|
|
--gradient-start: #e7e8d5;
|
|
--gradient-end: #dfdbc8;
|
|
}
|
|
|
|
html {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--neutral-color);
|
|
}
|
|
|
|
body {
|
|
padding: 20px 200px 20px 200px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--gradient-start),
|
|
var(--gradient-end)
|
|
);
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
header {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr auto;
|
|
}
|
|
|
|
header h1 {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
footer {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
border: 1px solid var(--main-color);
|
|
margin-bottom: 20px;
|
|
padding: 10px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--gradient-end),
|
|
var(--gradient-start)
|
|
);
|
|
border: 1px solid var(--gradient-end);
|
|
border-radius: 10px;
|
|
}
|
|
header > section {
|
|
grid-template-columns: 1fr auto;
|
|
gap: 20px;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
body {
|
|
padding: 20px 20px 20px 20px;
|
|
}
|
|
|
|
section {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
section > p {
|
|
text-align: justify;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.cover {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
section:hover {
|
|
background: linear-gradient(
|
|
270deg,
|
|
var(--gradient-end),
|
|
var(--gradient-start)
|
|
);
|
|
border: 1px solid var(--tertiary-color);
|
|
}
|
|
section:hover h2 {
|
|
color: var(--tertiary-color);
|
|
}
|