portfolio/src/styles/title-card.scss
2025-04-13 02:47:46 +02:00

89 lines
No EOL
1.2 KiB
SCSS

@use "vars";
.front-page {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
animation: flyIn ease 2s;
}
.title-card {
height: fit-content;
color: vars.$primary;
border: 8px solid vars.$secondary;
border-radius: 15px;
background-color: vars.$bg-color;
padding: 20px;
text-align: center;
font-size: 2rem;
}
.title-card h1 {
margin-bottom: 0;
margin-top: 0;
font-size: 2.5em;
}
.title-card h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 1em;
color: vars.$accent-1;
}
.title-card__links {
display: flex;
justify-content: center;
margin-top: 20px;
}
.title-card__link {
margin-left: 15px;
margin-right: 15px;
}
.title-card__image {
width: 50px;
height: auto;
}
.background {
position: absolute;
width: 100vw;
height: 100vh;
animation: flyIn ease 2s;
}
.fixtures {
display: flex;
justify-content: space-between;
}
.fixtures > img {
height: 600px;
}
@keyframes flyIn {
0% {
opacity: 0;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}