mirror of
https://github.com/Start9Labs/start9.com.git
synced 2026-03-30 12:11:58 +00:00
landing and about basically finished, minus animation and graphics;
This commit is contained in:
Spencer Flagg
BIN
src/assets/images/support1.png
Normal file
BIN
src/assets/images/support1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/images/support1.png~
Normal file
BIN
src/assets/images/support1.png~
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
10
src/assets/js/getTeam.js
Normal file
10
src/assets/js/getTeam.js
Normal file
@@ -0,0 +1,10 @@
|
||||
const fetch = require("node-fetch");
|
||||
module.exports = async function() {
|
||||
return fetch(url)
|
||||
.then(res => res.json()) // node-fetch option to transform to json
|
||||
.then(json => {
|
||||
return {
|
||||
teamMembers: json
|
||||
};
|
||||
}).then(json => console.log(json));;
|
||||
}
|
||||
@@ -1,36 +1,68 @@
|
||||
gsap.registerPlugin(DrawSVGPlugin);
|
||||
gsap.registerPlugin(CustomEase);
|
||||
|
||||
var bodyRect = document.body.getBoundingClientRect();
|
||||
|
||||
var sections = [
|
||||
"pitch",
|
||||
"products",
|
||||
"infographics",
|
||||
"bitcoin",
|
||||
"be-your-own",
|
||||
"powered-by",
|
||||
"support",
|
||||
"dev",
|
||||
"community"
|
||||
]
|
||||
|
||||
//////////////////////////////////////////
|
||||
// AUTO APPLY URL ANCHORS
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
// timeout to allow initial load to redirect to anchor
|
||||
// TODO: maybe apply the scroll-behavior: smooth to HTML after a timeout
|
||||
|
||||
sections.forEach(slug => {
|
||||
ScrollTrigger.create({
|
||||
trigger: "#" + slug,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
markers: {startColor: "white", endColor: "white"},
|
||||
onEnter: () => { window.location.href = "#" + slug; },
|
||||
onEnterBack: () => { window.location.href = "#" + slug; }
|
||||
});
|
||||
});
|
||||
|
||||
}, 2000);
|
||||
|
||||
|
||||
//////////////////////////////////////////
|
||||
// MENU
|
||||
|
||||
let menuOpen = document.getElementById('menu-open'),
|
||||
menuClose = document.getElementById('menu-close'),
|
||||
openedMenuArray = gsap.utils.toArray(".opened-menu"),
|
||||
closedMenuArray = gsap.utils.toArray(".closed-menu");
|
||||
let menuOpen = document.getElementById("menu-open"),
|
||||
menuClose = document.getElementById("menu-close"),
|
||||
openedMenuArray = gsap.utils.toArray(".opened-menu"),
|
||||
closedMenuArray = gsap.utils.toArray(".closed-menu");
|
||||
|
||||
menuOpen.addEventListener("click", () => openMenu());
|
||||
menuClose.addEventListener("click", () => closeMenu());
|
||||
|
||||
|
||||
|
||||
function openMenu() {
|
||||
gsap.to('#menu', { y: "0vh" });
|
||||
gsap.to('main', { y: "0vh" });
|
||||
gsap.to(openedMenuArray, { x: '0', opacity: 1, width: 'auto'});
|
||||
gsap.to(closedMenuArray, { x: '3rem', opacity: 0, width: 0});
|
||||
gsap.to("#menu", { y: "0vh" });
|
||||
gsap.to("main", { y: "0vh" });
|
||||
gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
|
||||
gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
|
||||
gsap.to("html", { overflow: "hidden"});
|
||||
}
|
||||
function closeMenu() {
|
||||
gsap.to('#menu', { y: "-100vh" });
|
||||
gsap.to('main', { y: "-100vh" });
|
||||
gsap.to(closedMenuArray, { x: '0', opacity: 1, width: 'auto'});
|
||||
gsap.to(openedMenuArray, { x: '3rem', opacity: 0, width: 0});
|
||||
gsap.to("#menu", { y: "-100vh" });
|
||||
gsap.to("main", { y: "-100vh" });
|
||||
gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
|
||||
gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
|
||||
gsap.to("html", { overflow: "overlay"});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////////////
|
||||
// HERO
|
||||
|
||||
@@ -51,6 +83,23 @@ gsap.from("#logo", { duration: 0.5, y: "-5rem", opacity: 0, delay: 0.75 });
|
||||
// content: '.scroll_track_content'
|
||||
// });
|
||||
|
||||
// backdrop-filter: blur(10px);
|
||||
//background-color: rgba(0,0,0,0.1);
|
||||
|
||||
gsap.to(
|
||||
"header",
|
||||
{
|
||||
duration: 0.5,
|
||||
backgroundColor: "rgba(0,0,0,0.1)",
|
||||
backdropFilter: "blur(10px)",
|
||||
scrollTrigger: {
|
||||
trigger: "#hero-image",
|
||||
scrub: true,
|
||||
start: "center top", // "triggerElement page"
|
||||
end: "bottom top", // "triggerElement page"
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
//////////////////////////////////////////
|
||||
// PITCH
|
||||
@@ -70,56 +119,66 @@ gsap.from("#pitch h1", {
|
||||
// })
|
||||
|
||||
gsap.from("#hero-to-pitch path:first-child", {
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "#hero-to-pitch",
|
||||
scrub: true,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
},
|
||||
});
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "#hero-to-pitch",
|
||||
scrub: true,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
},
|
||||
});
|
||||
|
||||
gsap.from("#products-to-info path:first-child", {
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "#products-to-info path:first-child",
|
||||
scrub: true,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
},
|
||||
});
|
||||
gsap.from("#products-to-info path:first-child", {
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "#products-to-info path:first-child",
|
||||
scrub: true,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
},
|
||||
});
|
||||
|
||||
gsap.from("#products-to-info path:nth-child(2)", {
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "#products-to-info path:nth-child(2)",
|
||||
scrub: true,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
},
|
||||
});
|
||||
gsap.from("#products-to-info path:nth-child(2)", {
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "#products-to-info path:nth-child(2)",
|
||||
scrub: true,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
},
|
||||
});
|
||||
|
||||
gsap.from("#bitcoin-to-be path", {
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "#bitcoin-to-be path",
|
||||
scrub: true,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
},
|
||||
});
|
||||
gsap.from("#bitcoin-to-be path", {
|
||||
drawSVG: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "#bitcoin-to-be path",
|
||||
scrub: true,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
},
|
||||
});
|
||||
|
||||
let imgs = gsap.utils.toArray(".pseudoservice"),
|
||||
next = 1.5, // time to change
|
||||
itemHeight = document.querySelector(".pseudoservice").getBoundingClientRect().height,
|
||||
listHeight = document.querySelector(".pseudoservices").getBoundingClientRect().height,
|
||||
windowHeight = document.getElementById("ticker__window").clientHeight,
|
||||
kerplunk = CustomEase.create("custom", "M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 "),
|
||||
kerplunk2 = CustomEase.create("custom", "M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 ");
|
||||
next = 1.5, // time to change
|
||||
itemHeight = document
|
||||
.querySelector(".pseudoservice")
|
||||
.getBoundingClientRect().height,
|
||||
listHeight = document
|
||||
.querySelector(".pseudoservices")
|
||||
.getBoundingClientRect().height,
|
||||
windowHeight = document.getElementById("ticker__window").clientHeight,
|
||||
kerplunk = CustomEase.create(
|
||||
"custom",
|
||||
"M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 "
|
||||
),
|
||||
kerplunk2 = CustomEase.create(
|
||||
"custom",
|
||||
"M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 "
|
||||
);
|
||||
|
||||
function crossfade() {
|
||||
var action = gsap
|
||||
|
||||
@@ -25,19 +25,21 @@
|
||||
width: 100%;
|
||||
|
||||
#ticker__selected-frame {
|
||||
outline: 1px solid white;
|
||||
outline-offset: calc(0.1 * var(--size));
|
||||
//outline: 1px solid white;
|
||||
//outline-offset: calc(0.1 * var(--size));
|
||||
font-size: var(--size);
|
||||
text-transform: uppercase;
|
||||
line-height: var(--size);
|
||||
position: absolute;
|
||||
top: calc(5 * var(--line));
|
||||
top: calc(2 * var(--line));
|
||||
left: -.5ch;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--size);
|
||||
padding: var(--p);
|
||||
background-color: #353535;
|
||||
border-bottom: 0.5rem #353535 solid;
|
||||
}
|
||||
#ticker__window {
|
||||
height: 50vh;
|
||||
@@ -48,7 +50,7 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul {
|
||||
ul.pseudoservices {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
@@ -63,6 +65,16 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
ul.services{
|
||||
position: absolute;
|
||||
top: calc(3 * var(--line));
|
||||
background-color: #353535;
|
||||
padding: 2rem;
|
||||
width: calc(11.5ch - 4rem);
|
||||
font-size: var(--size);
|
||||
left: -1rem;
|
||||
}
|
||||
}
|
||||
a.btn{
|
||||
align-self: center;
|
||||
|
||||
@@ -1,5 +1,41 @@
|
||||
#community {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 2 * var(--section-padding));
|
||||
|
||||
input[type="email"] {
|
||||
width: 31ch;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px dotted var(--c-line-primary);
|
||||
padding: 0.7em 1em;
|
||||
font-size: 2rem;
|
||||
font-family: var(--f-button);
|
||||
font-weight: 100;
|
||||
color: var(--c-text-primary);
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.community__icons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 31ch;
|
||||
font-size: 2rem;
|
||||
font-family: var(--f-button);
|
||||
align-items: center;
|
||||
}
|
||||
margin-top: 3rem;
|
||||
|
||||
a {
|
||||
&:hover svg path{
|
||||
fill: var(--c-text-accent);
|
||||
}
|
||||
svg {
|
||||
width: 3rem;
|
||||
path{
|
||||
transition: var(--t-simple);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 6rem;
|
||||
min-height: calc(100vh - 2 * var(--section-padding));
|
||||
padding: var(--section-padding) 6rem;
|
||||
h2{
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
||||
124
src/assets/styles/footer.scss
Normal file
124
src/assets/styles/footer.scss
Normal file
@@ -0,0 +1,124 @@
|
||||
footer{
|
||||
//position: absolute;
|
||||
padding: 0;
|
||||
.footer-content{
|
||||
display: flex;
|
||||
.header{
|
||||
align-self: flex-start;
|
||||
margin: 5rem 0 0 5rem;
|
||||
img{
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
background-color: black;
|
||||
.groups{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
.half {
|
||||
grid-row: span 1;
|
||||
}
|
||||
.full {
|
||||
grid-row: span 2;
|
||||
}
|
||||
& > li {
|
||||
//margin-top: 5rem;
|
||||
padding: 2.5rem 2.5rem;
|
||||
&:nth-child(-n+2){
|
||||
// border-right: var(--b-secondary);
|
||||
}
|
||||
}
|
||||
// & > *{
|
||||
// outline: 1px solid orange;
|
||||
// }
|
||||
}
|
||||
h1{
|
||||
font-family: var(--f-accent-bold);
|
||||
font-size: .9rem;
|
||||
color: var(--c-text-primary);
|
||||
margin-bottom: 1.7rem;
|
||||
}
|
||||
.groups li > a {
|
||||
font-family: var(--f-accent);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
color: var(--c-text-primary);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
// &::after{
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// transition: var(--t-simple);
|
||||
// display: inline-block;
|
||||
// width:0;
|
||||
// height: 85%;
|
||||
// left: 50%;
|
||||
// opacity: 0;
|
||||
// }
|
||||
&:hover {
|
||||
color: var(--c-text-accent);
|
||||
// &::after{
|
||||
// border: var(--b-primary);
|
||||
// width: 110%;
|
||||
// left: -5%;
|
||||
// opacity: 1;
|
||||
// }
|
||||
}
|
||||
&.highlight{
|
||||
color: var(--c-text-bright);
|
||||
font-weight: 300;
|
||||
&::before{
|
||||
content: '';
|
||||
z-index: -1;
|
||||
//border: var(--b-primary);
|
||||
background-color: var(--c-text-accent);
|
||||
width: 110%;
|
||||
left: -5%;
|
||||
display: inline-block;
|
||||
height: 85%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
footer .groups li > a {
|
||||
font-size: 2.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
footer .groups li > a {
|
||||
font-size: 3.5vmin;
|
||||
}
|
||||
footer .groups{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
footer .groups li {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
footer .groups li > a {
|
||||
font-size: 4vmin;
|
||||
}
|
||||
footer .groups{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
}
|
||||
@@ -33,7 +33,7 @@ main{
|
||||
}
|
||||
|
||||
section {
|
||||
--section-padding: 2vh;
|
||||
--section-padding: 6vh;
|
||||
// min-height: calc(100vh - 2 * var(--section-padding));
|
||||
// padding: 0 var(--section-padding);
|
||||
// outline: 1px solid orange;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@use 'normalize';
|
||||
@use 'fonts';
|
||||
@use 'menu';
|
||||
@use 'footer';
|
||||
/* @use 'post'; */
|
||||
|
||||
:root {
|
||||
@@ -38,10 +39,13 @@
|
||||
--f-accent-bold: 'Montserrat';
|
||||
--f-accent2-bold: 'Arkibal Mono Rg';
|
||||
--f-copy: 'Liberation Mono';
|
||||
--f-button: 'Basis Grotesque Mono Pro';
|
||||
|
||||
--t-simple: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: lime;
|
||||
//background-color: lime;
|
||||
font-size: 2vmin;
|
||||
scroll-behavior: smooth;
|
||||
color: var(--c-text-primary);
|
||||
@@ -70,6 +74,10 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
main{
|
||||
transform: translateY(-100vh);
|
||||
}
|
||||
@@ -103,8 +111,8 @@ header{
|
||||
nav{
|
||||
--padding: 1rem;
|
||||
width: calc(100% - 2 * var(--padding) - 15px);
|
||||
font-family: var(--f-accent-bold);
|
||||
font-weight: 400;
|
||||
font-family: var(--f-accent);
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
padding: var(--padding);
|
||||
@@ -129,6 +137,20 @@ nav{
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scrolled-menu{
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
#menu-open{
|
||||
display: flex;
|
||||
gap: .5em;
|
||||
align-items: center;
|
||||
svg{
|
||||
height: .7em;
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.opened-menu {
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all .2s ease-in-out;
|
||||
transition: var(--t-simple);
|
||||
display: inline-block;
|
||||
width:0;
|
||||
height: 85%;
|
||||
|
||||
97
src/assets/styles/peripheral.scss
Normal file
97
src/assets/styles/peripheral.scss
Normal file
@@ -0,0 +1,97 @@
|
||||
main{
|
||||
margin-top: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section{
|
||||
--width: 42ch;
|
||||
--side-padding: 3rem;
|
||||
font-family: "Montserrat";
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
width: var(--width);
|
||||
padding: 10rem var(--side-padding);
|
||||
position: relative;
|
||||
overflow:visible;
|
||||
&:nth-of-type(even){
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding));
|
||||
width: 100vw;
|
||||
background-color: #212121;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--f-hero);
|
||||
font-size: 4.4rem;
|
||||
width: 110%;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--f-hero);
|
||||
font-size: 3.7rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section#blurb h2 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--c-text-accent);
|
||||
width: 110%;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--f-hero);
|
||||
font-size: 1.8rem;
|
||||
width: 112%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
color: var(--c-text-accent);
|
||||
}
|
||||
|
||||
ul#sub-menu{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 107%;
|
||||
li a{
|
||||
font-family: var(--f-hero);
|
||||
font-size: 1.2rem;
|
||||
color: var(--c-text-primary);
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
transition: var(--t-simple);
|
||||
&:hover{
|
||||
color: var(--c-text-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
font-family: "Montserrat";
|
||||
font-weight: 300;
|
||||
line-height: 1.9rem;
|
||||
font-size: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
strong{
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,7 @@ section#products {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
img {
|
||||
transition: all ease-in-out .2s;
|
||||
transition: var(--t-simple);
|
||||
width: 42vw;
|
||||
}
|
||||
a {
|
||||
@@ -18,7 +18,7 @@ section#products {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
transition: all ease-in-out .2s;
|
||||
transition: var(--t-simple);
|
||||
.heading h1 {
|
||||
line-height: .8;
|
||||
}
|
||||
|
||||
@@ -4,4 +4,22 @@ section#support {
|
||||
align-items: center;
|
||||
padding: 6rem;
|
||||
background: var(--c-1);
|
||||
}
|
||||
margin-bottom: 6rem;
|
||||
.cols {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rem;
|
||||
.col {
|
||||
max-width: 37vw;
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-height: 40vh;
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.cols{
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user