mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-07 03:48:30 +02:00
Create Vsd Page (#2304)
* Create Vsd Page * minor tweaks * update index.md * update vsd-hero.md file * rename date field * common fixes * small fixes * header fix --------- Co-authored-by: trean <trean.mi@gmail.com>
This commit is contained in:
nastyapash
@@ -172,6 +172,8 @@
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.main-menu {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
padding-left: $spacer * 1.5;
|
||||
@@ -179,10 +181,13 @@
|
||||
|
||||
&__links {
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
&__trigger {
|
||||
|
||||
@@ -2,4 +2,8 @@
|
||||
background:
|
||||
linear-gradient(180deg, #090d19, rgba(9, 13, 25, 0)),
|
||||
url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&_no-stars {
|
||||
background: linear-gradient(180deg, #090d19, rgba(9, 13, 25, 0)) $neutral-10;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.vsd-agenda {
|
||||
padding-top: pxToRem(30);
|
||||
padding-bottom: pxToRem(30);
|
||||
background-color: $neutral-10;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: pxToRem(375);
|
||||
background-image: url('/img/blurred/blurred-light-30.svg');
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
text-align: center;
|
||||
color: $neutral-98;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
color: #ABB1C7;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: grid;
|
||||
gap: $spacer * 0.5;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-areas:
|
||||
"a a"
|
||||
"b c"
|
||||
"d e";
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: pxToRem(-40);
|
||||
width: 108%;
|
||||
aspect-ratio: 9 / 5;
|
||||
background-image: url('/img/square-grid-mobile.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 2;
|
||||
min-height: pxToRem(153);
|
||||
padding: $spacer * 1.5;
|
||||
border-radius: $spacer * 0.5;
|
||||
border: pxToRem(1) solid transparent;
|
||||
background:
|
||||
linear-gradient($neutral-30, #141b2e) padding-box,
|
||||
linear-gradient($neutral-40, $neutral-10) border-box;
|
||||
position: relative;
|
||||
|
||||
&-content {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-md;
|
||||
line-height: $line-height-sm;
|
||||
color: #ABB1C7;
|
||||
font-family: $font-family-monospace;
|
||||
text-transform: uppercase;
|
||||
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: $spacer * 5;
|
||||
line-height: pxToRem(84);
|
||||
color: #CAD0E5;
|
||||
font-variation-settings: "wdth" 75, "wght" 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
grid-area: a;
|
||||
min-height: pxToRem(314);
|
||||
padding: $spacer * 2;
|
||||
}
|
||||
|
||||
&:nth-child(2){
|
||||
grid-area: b;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
grid-area: c;
|
||||
}
|
||||
|
||||
&:nth-child(4){
|
||||
grid-area: d;
|
||||
}
|
||||
|
||||
&:last-of-type{
|
||||
grid-area: e;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
width: pxToRem(1440);
|
||||
height: pxToRem(443);
|
||||
background-image: url('/img/square-grid.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: grid;
|
||||
gap: $spacer * 0.5;
|
||||
grid-template-columns: 48fr 26fr 26fr;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-template-areas:
|
||||
"a b c"
|
||||
"a d e";
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: $spacer * 2;
|
||||
|
||||
&-content {
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
|
||||
br {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 6.5;
|
||||
line-height: pxToRem(110);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.vsd-faq {
|
||||
padding-top: pxToRem(30);
|
||||
padding-bottom: pxToRem(30);
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $h2-font-size;
|
||||
line-height: pxToRem(62);
|
||||
text-align: center;
|
||||
color: $neutral-10;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.vsd-hero {
|
||||
padding-top: pxToRem(30);
|
||||
padding-bottom: pxToRem(30);
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__banner {
|
||||
padding: $spacer * 2.5 pxToRem(20) pxToRem(70);
|
||||
border-radius: $spacer * 1.5;
|
||||
border: pxToRem(1) solid transparent;
|
||||
background:
|
||||
linear-gradient($neutral-10, $neutral-10) padding-box,
|
||||
linear-gradient($neutral-30, $neutral-10) border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 50%;
|
||||
translate: -56%;
|
||||
bottom: pxToRem(116);
|
||||
height: pxToRem(250);
|
||||
width: auto;
|
||||
aspect-ratio: 1110 / 391;
|
||||
background-image:
|
||||
url("/img/vsd-hero/astronauts2.png"),
|
||||
url("/img/vsd-hero/overlay1.png"),
|
||||
url("/img/vsd-hero/astronauts1.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
bottom: pxToRem(116);
|
||||
height: pxToRem(83);
|
||||
width: 100%;
|
||||
background-image: url("/img/vsd-hero/overlay2.png");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__place {
|
||||
margin-bottom: $spacer * 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-family: $font-family-monospace;
|
||||
color: $neutral-98;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: pxToRem(180);
|
||||
font-size: $h2-font-size;
|
||||
line-height: pxToRem(62);
|
||||
color: $primary-50;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
background: linear-gradient(180deg, #fff 60%, #898ea3 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__banner {
|
||||
padding: $spacer * 2.5;
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
translate: 0;
|
||||
bottom: pxToRem(84);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: pxToRem(84);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__banner {
|
||||
text-align: left;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: pxToRem(137);
|
||||
}
|
||||
}
|
||||
|
||||
&__place {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: $spacer * 2;
|
||||
|
||||
p {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__place {
|
||||
gap: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 5;
|
||||
line-height: pxToRem(84);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use '../../mixins/marquee' as marquee;
|
||||
|
||||
.vsd-join-us {
|
||||
padding-top: pxToRem(30);
|
||||
padding-bottom: pxToRem(30);
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer;
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
text-align: center;
|
||||
color: #898EA3;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__container {
|
||||
max-width: pxToRem(838) !important;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: pxToRem(116);
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: pxToRem(-20);
|
||||
background: linear-gradient(270deg, rgba(11, 15, 25, 0.00) 0%, #0B0F19 100%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: pxToRem(-20);
|
||||
background: linear-gradient(90deg, rgba(11, 15, 25, 0.00) 0%, #0B0F19 100%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__marquee {
|
||||
@include marquee.base(42px, 329px, 5, 5, 32px, transparent, false, 30s, none);
|
||||
|
||||
&__item {
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: $h4-font-size;
|
||||
line-height: pxToRem(42);
|
||||
font-variation-settings: "wdth" 75, "wght" 600;
|
||||
text-transform: uppercase;
|
||||
color: #CAD0E5;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__marquee {
|
||||
@include marquee.base(67px, 459px, 5, 5, 32px, transparent, false, 30s, none);
|
||||
}
|
||||
|
||||
&__container {
|
||||
&:before,
|
||||
&:after {
|
||||
width: pxToRem(260);
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7;
|
||||
|
||||
&__title {
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
|
||||
&__marquee {
|
||||
&__item {
|
||||
font-size: $h1-font-size;
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use '../../mixins/marquee' as marquee;
|
||||
|
||||
.vsd-last-year-carousel {
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
.carousel__photos {
|
||||
@include marquee.base(360px, 630px, 14, 14, 15px, transparent, false, 80s, none);
|
||||
|
||||
&__item {
|
||||
border-radius: pxToRem(4);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.vsd-last-year {
|
||||
width: 100%;
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 3;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
text-align: center;
|
||||
color: #898EA3;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: pxToRem(900);
|
||||
margin: 0 auto $spacer * 3;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
text-align: center;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__title2 {
|
||||
margin: $spacer * 3 auto;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
text-align: center;
|
||||
color: #ABB1C7;
|
||||
}
|
||||
|
||||
&__logos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 100%;
|
||||
padding: $spacer $spacer * 4;
|
||||
border: pxToRem(1) solid #303547;
|
||||
margin-top: pxToRem(-1);
|
||||
max-width: pxToRem(332);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: $spacer * 2.5;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
&__logos {
|
||||
flex-direction: row;
|
||||
margin: 0 pxToRem(-80);
|
||||
width: calc(100% + pxToRem(160));
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: calc(100% + pxToRem(1));
|
||||
width: pxToRem(100);
|
||||
top: pxToRem(-1);
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, $neutral-10 50%, rgba($neutral-10, 0) 100%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
background: linear-gradient(90deg, rgba($neutral-10, 0) 0%, $neutral-10 50%);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: auto;
|
||||
margin-left: pxToRem(-1);
|
||||
max-width: none
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__subtitle {
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
|
||||
&__title2 {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__logos {
|
||||
margin: 0 pxToRem(-165);
|
||||
width: calc(100% + pxToRem(330));
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
width: pxToRem(160);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.vsd-speaker-lineup {
|
||||
padding-top: pxToRem(30);
|
||||
padding-bottom: pxToRem(30);
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__banner {
|
||||
padding: pxToRem(30) pxToRem(20);
|
||||
border-radius: $spacer;
|
||||
background-color: #0B0F19;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: pxToRem(30);
|
||||
max-width: pxToRem(780);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 98%;
|
||||
background-image: url('/img/blurred/blurred-light-30.svg');
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 0;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
text-align: center;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
text-align: center;
|
||||
color: #ABB1C7;
|
||||
}
|
||||
|
||||
&__logos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 0 pxToRem(-40);
|
||||
width: calc(100% + pxToRem(80));
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: calc(100% + pxToRem(1));
|
||||
width: pxToRem(110);
|
||||
top: pxToRem(-1);
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: pxToRem(-30);
|
||||
background: linear-gradient(90deg, $neutral-10 50%, rgba($neutral-10, 0) 100%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: pxToRem(-30);
|
||||
background: linear-gradient(90deg, rgba($neutral-10, 0) 0%, $neutral-10 50%);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
padding: pxToRem(11) $spacer * 2.5;
|
||||
border: pxToRem(1) solid #303547;
|
||||
margin-top: pxToRem(-1);
|
||||
margin-left: pxToRem(-1);
|
||||
|
||||
img {
|
||||
height: pxToRem(27);
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
margin-right: pxToRem(120);
|
||||
margin-left: pxToRem(120);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
&__logo {
|
||||
&:nth-of-type(3) {
|
||||
margin-right: 0;
|
||||
margin-left: pxToRem(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__banner {
|
||||
padding: $spacer * 2.5 pxToRem(20);
|
||||
|
||||
&-container {
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.vsd-sponsors {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background-color: $neutral-10;
|
||||
text-align: center;
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
color: #898EA3;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__logos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 100%;
|
||||
padding: $spacer $spacer * 4;
|
||||
border: pxToRem(1) solid #303547;
|
||||
margin-top: pxToRem(-1);
|
||||
max-width: pxToRem(332);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: $spacer * 2.5;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: pxToRem(600);
|
||||
margin: $spacer * 3 auto;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
color: #ABB1C7;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
&__logos {
|
||||
flex-direction: row;
|
||||
margin: 0 pxToRem(-80);
|
||||
width: calc(100% + pxToRem(160));
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: calc(100% + pxToRem(1));
|
||||
width: pxToRem(100);
|
||||
top: pxToRem(-1);
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, $neutral-10 50%, rgba($neutral-10, 0) 100%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
background: linear-gradient(90deg, rgba($neutral-10, 0) 0%, $neutral-10 50%);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: auto;
|
||||
margin-left: pxToRem(-1);
|
||||
max-width: none
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__subtitle {
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user