135 lines
2.2 KiB
SCSS
135 lines
2.2 KiB
SCSS
@use "../variables.scss";
|
|
@use "../mixins.scss";
|
|
|
|
$table-item_img_width: 100px;
|
|
$table-item_margin_between_items: 10px;
|
|
$table-item_margin_img_to_paragraph: 100px;
|
|
|
|
.showcase {
|
|
display: flex;
|
|
height: 100vh;
|
|
background-image: url("../../resources/img/showcase.jpg");
|
|
backdrop-filter: brightness(0%);
|
|
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
filter: brightness(50%);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font: 800 128px "Montserrat", sans-serif;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.table-item {
|
|
margin-top: $table-item_margin_between_items;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
img {
|
|
margin-right: $table-item_margin_img_to_paragraph;
|
|
height: auto;
|
|
width: $table-item_img_width;
|
|
}
|
|
}
|
|
|
|
.reverse {
|
|
flex-direction: row-reverse;
|
|
|
|
img {
|
|
margin-right: 0;
|
|
margin-left: $table-item_margin_img_to_paragraph;
|
|
}
|
|
|
|
p {
|
|
text-align: right;
|
|
}
|
|
|
|
.vertical-separator {
|
|
margin-right: 0;
|
|
margin-left: $table-item_margin_img_to_paragraph;
|
|
}
|
|
}
|
|
|
|
.vertical-separator {
|
|
height: $table-item_img_width + 20px;
|
|
border: solid 1px variables.$clr_brand;
|
|
margin-right: $table-item_margin_img_to_paragraph;
|
|
}
|
|
|
|
.square {
|
|
img {
|
|
height: $table-item_img_width;
|
|
}
|
|
}
|
|
|
|
.table-item-animation {
|
|
animation: slide-in-left 3000ms;
|
|
}
|
|
|
|
.table-item-animation-reverse {
|
|
animation: slide-in-right 3000ms;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
margin-left: 10%;
|
|
width: 105%;
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in-reverse {
|
|
from {
|
|
margin-right: 10%;
|
|
width: 105%;
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
margin-right: 0;
|
|
width: 100%;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
from {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-right {
|
|
from {
|
|
margin-left: 100%;
|
|
width: 300%;
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
} |