66 lines
1.2 KiB
SCSS
66 lines
1.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: 10px;
|
|
|
|
.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;
|
|
|
|
img {
|
|
margin-right: $table-item_margin_img_to_paragraph;
|
|
height: $table-item_img_width;
|
|
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;
|
|
}
|
|
} |