index
This commit is contained in:
Xsivax
parent
fb7ca37250
commit
abb54495a6
28 changed files with 92 additions and 13386 deletions
|
|
@ -1,538 +0,0 @@
|
|||
:root {
|
||||
--gradient: linear-gradient(
|
||||
45deg,
|
||||
hsl(160, 51%, 49%),
|
||||
hsl(160, 51%, 59%),
|
||||
hsl(160, 51%, 79%),
|
||||
hsl(160, 51%, 89%),
|
||||
#fff
|
||||
);
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:#333;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
.info p {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info #color {
|
||||
color: rgb(0, 255, 170);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color:rgb(0, 255, 170);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: #333;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 65vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10vh 0 1vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
text-align: center;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 1.25rem;
|
||||
margin-top: 6vh;
|
||||
}
|
||||
|
||||
.info #color {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 5.5vh
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 2.25rem;
|
||||
padding-top: 10vh;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 37.5vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.auto-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .95fr 1fr;
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2rem;
|
||||
line-height: 3.5rem;
|
||||
color:rgb(0, 255, 170);
|
||||
margin: 1rem 0;
|
||||
letter-spacing: .02rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0;
|
||||
line-height: 4vh;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width:50vh;
|
||||
height: auto;
|
||||
padding: 1rem .5rem 2rem .5rem;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.5rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 0 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 450;
|
||||
line-height: 4rem;
|
||||
letter-spacing: .05rem;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 30vh;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 500;
|
||||
line-height: 3rem;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: .75rem .75rem 4.5vh .75rem;
|
||||
line-height: 3.5vh;
|
||||
}
|
||||
|
||||
.product p a {
|
||||
color: rgb(62, 190, 147);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product p a:active {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem 1rem 5vh 1rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-image: var(--gradient);
|
||||
background-size: 300%;
|
||||
background-position: left;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
-webkit-text-stroke-width: .01em;
|
||||
-webkit-text-stroke-color: #fff;
|
||||
transition: .6s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.product .click button a:active,
|
||||
.product .click button a:focus {
|
||||
|
||||
-webkit-text-stroke-width: .05em;
|
||||
-webkit-text-stroke-color: #eee;
|
||||
filter: blur(.015em)
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 6.5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 62.5vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
font-size: 6rem;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-self: flex-start;
|
||||
margin-left: 10rem;
|
||||
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2;
|
||||
font-size: 3.5vh;
|
||||
margin: 0 1rem 1rem 5rem;
|
||||
text-align: left;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: .5px;
|
||||
justify-self: center;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.info #color {
|
||||
grid-row: 2;
|
||||
margin: 17.5vh 0 0 15rem;
|
||||
font-size: 4.5vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 60vh;
|
||||
height: auto;
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-top: 3vh;
|
||||
margin-left: 1vh;
|
||||
}
|
||||
|
||||
|
||||
.auto-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2.5rem 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
color:rgb(0, 255, 170);
|
||||
margin: 5rem 0 2rem 1rem;
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0 0 1rem;
|
||||
float: left;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 4.5vh;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.about img {
|
||||
max-width: 40vw;
|
||||
height: auto;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding: 2rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 3rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
letter-spacing: .07em;
|
||||
padding-left: 1.5rem;
|
||||
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
font-size: 2rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
line-height: 10vh;
|
||||
letter-spacing: .1em;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: .25fr 1fr;
|
||||
grid-template-rows: .5fr 1fr .5fr;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row:1/3;
|
||||
padding: 3vh;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4rem 0 0 4rem;
|
||||
}
|
||||
|
||||
.product .image img {
|
||||
width: 50vh;
|
||||
}
|
||||
|
||||
.product h5 span{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0 5rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
line-height: 4.5vh;;
|
||||
}
|
||||
|
||||
.product #blog-link {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product #blog-link:hover {
|
||||
color: hsl(160, 100%, 59%);
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 2.5rem 0;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .85rem 2.5rem;
|
||||
background-image: var(--gradient);
|
||||
background-size: 300%;
|
||||
background-position: left;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
-webkit-text-stroke-width: .01em;
|
||||
-webkit-text-stroke-color: #fff;
|
||||
border-radius: 25px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product .click button:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(0, 255, 170);
|
||||
-webkit-text-stroke-width: .02em;
|
||||
-webkit-text-stroke-color: #333;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 12.5vh;
|
||||
}
|
||||
|
||||
#app:hover {
|
||||
opacity: 50%;
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,783 +0,0 @@
|
|||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:#333;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(0, 255, 170);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.strip h3 {
|
||||
color: #333;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.theme h5 {
|
||||
color: black;
|
||||
text-transform: uppercase;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
margin: 0 1rem 0 0 !important;
|
||||
|
||||
}
|
||||
|
||||
#insta {
|
||||
padding: 0;
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#gram {
|
||||
width: 5vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#you {
|
||||
padding: 0;
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#tube {
|
||||
width: 5vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 77.5vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 1vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 3vh;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 2.5rem;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
margin-left: 7vh;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 30vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
.blog-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .95fr 1fr;
|
||||
padding:2rem 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.strip h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
line-height: 3rem;
|
||||
color: #333;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.strip #smaller {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.grid figure {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.grid .single {
|
||||
grid-template-rows: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
min-height: 75vh;
|
||||
box-shadow: 1px 1px 5px 3px #333;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.theme h5 {
|
||||
font-size: 3.5vh;
|
||||
}
|
||||
|
||||
.theme .downsize {
|
||||
font-size: 3.15vh;
|
||||
}
|
||||
|
||||
.theme #small {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.theme .description {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.description p {
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme .click {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.theme img {
|
||||
width:40vh;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.theme button {
|
||||
padding: .5rem 1.25rem;
|
||||
border: .02em solid #000;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: ease-in .7s;
|
||||
}
|
||||
|
||||
.theme button a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.theme button:active {
|
||||
background-color: hsl(160, 50%, 80%);
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 1.25rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 25vh;
|
||||
margin: 0 0 1rem 3rem;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
color: black;
|
||||
text-shadow: 1.5px 3px rgb(62, 190, 147);
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: .75fr .5fr .75fr .75fr;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 5px 3px #999;
|
||||
padding: 1rem;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.social h5 {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
justify-self: center;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.social .blog {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social .blog #blog {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.social .instagram {
|
||||
grid-column: 1/3;
|
||||
grid-row: 3;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#gram {
|
||||
width: 13.5vw;
|
||||
}
|
||||
|
||||
.social .instagram #account {
|
||||
font-size: 2.25vh;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
|
||||
}
|
||||
|
||||
.social .youtube {
|
||||
grid-column: 1/3;
|
||||
grid-row: 4;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#tube {
|
||||
width: 12.5vw;
|
||||
}
|
||||
|
||||
|
||||
.social .youtube #account {
|
||||
font-size: 2.25vh;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
cursor: pointer;
|
||||
transition: all ease .7s;
|
||||
}
|
||||
|
||||
.social .youtube #account:active {
|
||||
filter: blur(.02em);
|
||||
}
|
||||
|
||||
|
||||
.social button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: black;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Fira Sans', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.social button a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social button:active {
|
||||
opacity: 50%;
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.social #post {
|
||||
width: 40vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.desktop {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#helper {
|
||||
width: 45vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1024px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 63vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 6rem;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-self: flex-start;
|
||||
margin-left: 10rem;
|
||||
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 1rem 1rem 12rem;
|
||||
text-align: left;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: .5px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
margin-left: 5vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 45vh;
|
||||
height: auto;
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
.blog-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.strip {
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
min-height: 90vh;
|
||||
width: 100%;
|
||||
margin-top: 5vh;
|
||||
padding: 2vh 5vw 7.5vh 5vw;
|
||||
}
|
||||
|
||||
.strip h3 {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
color: #333;
|
||||
margin: 5vh 0;
|
||||
padding-left: 5vh;
|
||||
}
|
||||
|
||||
.strip .grid {
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
grid-gap: 5vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid figure {
|
||||
grid-column: 1/5;
|
||||
grid-row: 2;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
justify-content: center;
|
||||
padding: 0 1.5vw;
|
||||
}
|
||||
|
||||
figure .theme {
|
||||
max-width: 80%;
|
||||
margin: 0 .5vw;
|
||||
}
|
||||
|
||||
#shorter {
|
||||
height: 60vh;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#tech {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#tutorials {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
box-shadow: 1px 1px 5px 3px #333;
|
||||
width: 40vh;
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.theme h5 {
|
||||
font-size: 2.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme .description {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.theme .description p {
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme .click {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.theme .image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.theme img {
|
||||
max-width: 90%;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.theme button {
|
||||
padding: .55rem 1.25rem;
|
||||
background-color: black;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .7s;
|
||||
}
|
||||
|
||||
.theme button a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.theme button:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.theme h3 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
color: #333 ;
|
||||
margin: 5rem 0 2rem 1rem;
|
||||
}
|
||||
|
||||
.theme span {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
|
||||
.strip2 {
|
||||
padding: 2rem 2rem 5rem 2rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 2.5rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 45vh;
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr ;
|
||||
grid-template-rows: .5fr .5fr .5fr .5fr;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 3px 5px #999;
|
||||
padding-left: 2vw;
|
||||
min-height: 80vh;
|
||||
grid-gap: 2.5vh;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.social figure {
|
||||
grid-column: 1/5;
|
||||
grid-row: 2;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
justify-content: center;
|
||||
padding: 0 1.5vw;
|
||||
}
|
||||
|
||||
.social figure img {
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
max-width: 90%;
|
||||
margin: 0 .5vw;
|
||||
}
|
||||
|
||||
.social h5 {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
justify-self: flex-start;
|
||||
font-size: 5vh;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 200;
|
||||
text-transform: uppercase;
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
.social .blog {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social .blog #blog {
|
||||
margin: 0;
|
||||
width: 20vh;
|
||||
height: 5vh;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.social .instagram {
|
||||
grid-column: 1/3;
|
||||
grid-row: 3;
|
||||
display: flex;
|
||||
padding-left: 2vh;
|
||||
}
|
||||
|
||||
#gram {
|
||||
width: 10vh;
|
||||
margin-right: 5vh;
|
||||
transition: all ease .7s;
|
||||
}
|
||||
|
||||
#gram:hover {
|
||||
filter: opacity(.5);
|
||||
}
|
||||
|
||||
.social .instagram #account {
|
||||
font-size: 1.75rem;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
cursor: pointer;
|
||||
transition: all ease .7s;
|
||||
}
|
||||
|
||||
.social .instagram #account:hover {
|
||||
filter: blur(.75px);
|
||||
color: hsl(350, 100%, 90%);
|
||||
}
|
||||
|
||||
.social .youtube {
|
||||
grid-column: 1/3;
|
||||
grid-row: 4;
|
||||
display: flex;
|
||||
padding-left: 2vh;
|
||||
}
|
||||
|
||||
#tube {
|
||||
width: 10vh;
|
||||
margin-right: 5vh;
|
||||
transition: all ease .7s;
|
||||
}
|
||||
|
||||
#tube:hover {
|
||||
filter: opacity(.5);
|
||||
}
|
||||
|
||||
|
||||
.social .youtube #account {
|
||||
font-size: 1.75rem;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
cursor: pointer;
|
||||
transition: all ease .7s;
|
||||
}
|
||||
|
||||
.social .youtube #account:hover {
|
||||
filter: blur(.75px);
|
||||
color: hsl(160, 50%, 70%);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.social button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: black;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Fira Sans', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.social button a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social button a:active {
|
||||
opacity: 50%;
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,427 +0,0 @@
|
|||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color: rgb(191, 255, 0);
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(191, 255, 0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.strip h3 {
|
||||
color:rgb(62, 190, 147);
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.theme h5 {
|
||||
color: black;
|
||||
text-transform: uppercase;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
margin: 0 1rem 0 0 !important;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 72.5vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 1vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: .95rem;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 2.5rem;
|
||||
padding-top: 12.5vh;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
margin-left: 7vh;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
padding-right: 2vh;
|
||||
}
|
||||
|
||||
|
||||
.code-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color:rgb(191, 255, 0);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .95fr 1fr;
|
||||
padding:2rem 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
.strip h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.strip #smaller {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 65vh;
|
||||
box-shadow: 1px 1px 5px 3px #333;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-top: 3vh;
|
||||
}
|
||||
|
||||
.grid figure {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.theme h5 {
|
||||
font-size: 1.5rem;
|
||||
margin: 2vh 0;
|
||||
}
|
||||
|
||||
.theme #downsize {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.theme h6 {
|
||||
color: rgb(191, 255, 0);
|
||||
text-align: center;
|
||||
padding: 1vh 0 0 0;
|
||||
}
|
||||
|
||||
.theme #small {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.theme .description {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.theme .description {
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme .click {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 1rem 2rem 1rem;
|
||||
}
|
||||
|
||||
.theme img {
|
||||
max-width: 65vw;
|
||||
height: auto;
|
||||
padding: 1.5rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.theme button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .02em solid hsl(75, 100%, 50%);
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.theme button a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.theme button a:active {
|
||||
opacity: 50%;
|
||||
color: rgb(191, 255, 0);
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 63vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 7rem;
|
||||
display: flex;
|
||||
justify-self: flex-start;
|
||||
margin: 3rem 0 2.5rem 10rem;
|
||||
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 1rem 1rem 12rem;
|
||||
text-align: left;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
margin: 5vh 0 0 5vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 45vh;
|
||||
height: auto;
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
.code-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color: rgb(191, 255, 0);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
min-height: 90vh;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.strip h3 {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
color: #333;
|
||||
margin: 5vh 0;
|
||||
padding-left: 5vh;
|
||||
}
|
||||
|
||||
.strip .grid {
|
||||
display:grid;
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
grid-gap: 5vh;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
figure {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 1vw;
|
||||
justify-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#shorter {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: 1px 1px 5px 3px #333;
|
||||
width: 90%;
|
||||
min-height: 70vh;
|
||||
}
|
||||
|
||||
.theme h5 {
|
||||
font-size: 2.25rem;
|
||||
text-align: center;
|
||||
padding: 3vh 0 .5rem 0;
|
||||
}
|
||||
|
||||
.theme h6 {
|
||||
color: rgb(191, 255, 0);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme .description {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.description p {
|
||||
padding-bottom: 5vh;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme .click {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.theme .image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.theme img {
|
||||
width: 35vh;
|
||||
height: auto;
|
||||
padding: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
.theme button {
|
||||
padding: .5rem 1.25rem;
|
||||
border: .02em solid hsl(75, 100%, 50%);
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin: 1rem 0 1rem .25rem;
|
||||
transition: .5s;
|
||||
width: 12vh;
|
||||
height: 5vh;
|
||||
color: hsl(75, 100%, 50%);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.theme button a {
|
||||
text-decoration: none;
|
||||
color: hsl(75, 100%, 50%);
|
||||
}
|
||||
.theme button a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.theme button:hover {
|
||||
opacity: 50%;
|
||||
color: #fff;
|
||||
background-color: hsl(75, 100%, 50%);
|
||||
}
|
||||
|
||||
|
||||
.theme h3 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
color: #333 ;
|
||||
margin: 5rem 0 2rem 1rem;
|
||||
}
|
||||
|
||||
.theme span {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
.container {
|
||||
height: calc(100% - 30vh);
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
.donation_container {
|
||||
color: #333;
|
||||
height: 40vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
border-bottom: solid 1vh #ff00ff;
|
||||
}
|
||||
|
||||
.donation_container h1 {
|
||||
color: #ff00ff;
|
||||
}
|
||||
|
||||
.donation_container p {
|
||||
font-size: 3vh;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
.donation_container p span {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form_container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 3vh 4vw;
|
||||
}
|
||||
|
||||
.right h2 {
|
||||
padding-bottom: 2vh;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: solid;
|
||||
border-top-color: currentcolor;
|
||||
border-right-color: currentcolor;
|
||||
border-bottom-color: currentcolor;
|
||||
border-left-color: currentcolor;
|
||||
border-radius: 4vw;
|
||||
background-color: white;
|
||||
padding: 1vh 1vw;
|
||||
margin: 1vh 0;
|
||||
border-color: #f0f;
|
||||
}
|
||||
|
||||
#message {
|
||||
|
||||
width: 60vw;
|
||||
height: 30vw;
|
||||
}
|
||||
#sub_btn {
|
||||
|
||||
background-color: white;
|
||||
border: solid;
|
||||
border-radius: 4vw;
|
||||
border-color: #f0f;
|
||||
width: 30vw;
|
||||
height: 10vw;
|
||||
color:#f0f;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,507 +0,0 @@
|
|||
body {
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:magenta;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 span{
|
||||
color:magenta;
|
||||
}
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color:magenta;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color:magenta;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: #333;
|
||||
|
||||
}
|
||||
|
||||
.product p a {
|
||||
text-decoration: none;
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
.product p a:hover {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
.product p a:active {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 62.5vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10vh 0 1vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 3vh;
|
||||
font-weight: 300;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 15vh;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 35vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.things-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color:magenta;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .95fr 1fr;
|
||||
padding: 1.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 1.85rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: magenta;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
.about p {
|
||||
font-size: 2.5vh;
|
||||
font-weight: 300;
|
||||
line-height: 4.5vh;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width:40vh;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 0 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem .5rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.product img {
|
||||
max-width: 60vw;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
font-size: 1.25rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
.product p {
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .02em solid hsl(300, 100%, 50%);
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product .click button:active {
|
||||
opacity: 50%;
|
||||
background-color: magenta;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 60vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
font-size: 6.5rem;
|
||||
display: flex;
|
||||
justify-self: flex-start;
|
||||
margin: 0 0 0 25rem;
|
||||
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2;
|
||||
font-size: 1.35rem;
|
||||
margin: 0 1rem 1rem 1rem;
|
||||
text-align: left;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: .5px;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
margin-left: 6rem;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 50vh;
|
||||
height: auto;
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-top: 8vh;
|
||||
margin-left: 4vh;
|
||||
}
|
||||
|
||||
|
||||
.things-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:magenta;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2.5rem 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
min-height: 80vh;
|
||||
width: 90vh;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
color:magenta;
|
||||
margin: 2rem 0 0 5rem;
|
||||
grid-column: 1/3;
|
||||
display: flex;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: magenta
|
||||
;
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0 0 1rem;
|
||||
float: left;
|
||||
font-size: 1.35rem;
|
||||
grid-column: 1/2;
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.about img {
|
||||
width:55vh;
|
||||
height: auto;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding: 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
padding-bottom: 8vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 3rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.product h5 {
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: .25fr 1fr;
|
||||
grid-template-rows: .25fr .5fr .25fr;
|
||||
grid-gap: 2rem;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
padding: 4rem 1.5rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row: 1/4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.product img {
|
||||
max-width: 40vw;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 4.75vh;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product h5 span{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0 2.5rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 2.5rem 0;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #fff;
|
||||
border: .02em solid hsl(300, 100%, 50%);
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-family:'Fira Sans', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.product .click button:hover {
|
||||
opacity: 50%;
|
||||
background-color: magenta;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 10vh;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,501 +0,0 @@
|
|||
body {
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:rgb(191, 255, 0);
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(191, 255, 0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color:rgb(191, 255, 0);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: black;
|
||||
text-shadow: 1.5px 3px rgb(191, 255, 0);
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:480px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 1vh;
|
||||
padding-top: 4vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 2.5vh;
|
||||
font-weight: 300;
|
||||
padding-top: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 8vh;
|
||||
padding-bottom: .5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
min-height: 45vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 67.5vw;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
transform: rotate(45deg);
|
||||
padding-right: 10vw;
|
||||
}
|
||||
|
||||
|
||||
.oil-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color:rgb(191, 255, 0);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
display: grid;
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
grid-template-rows: .5fr 1fr .5fr;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
color:rgb(191, 255, 0);
|
||||
text-align: left;
|
||||
padding: 2vh 5vw;
|
||||
}
|
||||
|
||||
.about p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2vh 2vw;
|
||||
text-align: left;
|
||||
line-height: 4vh;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
padding-top: 2vh;
|
||||
font-size: 3vh;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width:40vh;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 1.25rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.products img {
|
||||
max-width: 35vw;;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 0 1rem 3rem 1rem;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
font-size: 2rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.product p {
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
line-height: 4vh;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid hsl(75, 100%, 50%);
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product .click button a:active {
|
||||
opacity: 50%;
|
||||
color: hsl(75, 100%, 40%);
|
||||
}
|
||||
|
||||
#shop {
|
||||
margin-left: 5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#shop a:active {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 65vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
padding-left: 2vw;
|
||||
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
text-align: left;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-size: 3.5vh;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 55vw;
|
||||
height: auto;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-left: 2vw;
|
||||
padding-right: 22.5vw;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
|
||||
.oil-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:rgb(191, 255, 0);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2.5rem 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
color:rgb(191, 255, 0);
|
||||
margin: 5rem 0 2rem 1rem;
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: rgb(191, 255, 0);
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0 3rem 1rem;
|
||||
float: left;
|
||||
font-size: 1.5rem;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about img {
|
||||
max-width: 35vw;
|
||||
height: auto;
|
||||
padding-top: 5.5vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 2.5rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: .25fr 1fr;
|
||||
grid-template-rows: .25fr .5fr .25fr;
|
||||
min-height: 60vh;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row: 1/4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 3vh;
|
||||
padding-top: 1vh;
|
||||
}
|
||||
|
||||
.product img {
|
||||
max-width: 20vw;
|
||||
margin: 3vh 0 3vh 5vw;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0 2.5rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 4.5vh;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 2.5rem 0;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #fff;
|
||||
border: .03em solid hsl(75, 100%, 50%);
|
||||
font-size: 1.5rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product .click button:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(191, 255, 0);
|
||||
}
|
||||
|
||||
#shop {
|
||||
margin-left: 10vh;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,901 +0,0 @@
|
|||
:root {
|
||||
--space : 5vh;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
}
|
||||
|
||||
.title{
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
#about {
|
||||
margin-top: var(--space);
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#about p {
|
||||
color:black;
|
||||
}
|
||||
|
||||
#oils-link {
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
#oil {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#edibles-link {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
#flower-link {
|
||||
background-color:white;
|
||||
display: flex;
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
#flower {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width:1024px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1/5;
|
||||
grid-row:1;
|
||||
background-size: cover;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
height: 67vh;
|
||||
padding-left: 7.5vh;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
grid-column: 1;
|
||||
grid-row: 1/2;
|
||||
align-self: flex-end;
|
||||
font-family:'Lato', sans-serif;
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
color: rgb(62, 190, 147);
|
||||
text-align: center;
|
||||
line-height: 6.5vh;
|
||||
padding-bottom: 22vh;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
transition: 0.4s;
|
||||
grid-column: 2;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
.title .image img {
|
||||
max-width: 30vw;
|
||||
padding-right: 5vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
line-height: 80px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #333;
|
||||
padding-top: 1em;
|
||||
margin-left: .1em;
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1/5;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
margin: 0 5rem 1.5rem 5rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: .01em .01em .01em .1em hsl(160, 51%, 70%);
|
||||
}
|
||||
|
||||
#about p {
|
||||
font-size:1.5rem;
|
||||
font-weight: 300;
|
||||
padding:1.5rem;
|
||||
text-align: center;
|
||||
font-family: 'Lato', sans-serif;
|
||||
line-height: 2.75;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1/5;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 2.5vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
#oils-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 115vh;
|
||||
padding: 6vh 3vw 3vh 0;
|
||||
}
|
||||
|
||||
#oils-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
#oils-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(160, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#current {
|
||||
border: .01em solid hsl(160, 49%, 51%) !important;
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.main-image img, .imgs img {
|
||||
height: 15vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#oils-link .description {
|
||||
grid-column:2 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#oils-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2.25;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.description ul {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2.25;
|
||||
margin-top: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
#oils-link .page-button {
|
||||
grid-column:2 ;
|
||||
grid-row:4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
padding: 1vh 0 2vh 1vw;
|
||||
}
|
||||
|
||||
#oils-link .page-button a:hover {
|
||||
background-color: hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#oils-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em .75em;
|
||||
margin-left: .5em;
|
||||
border: .01em solid hsl(160, 100%, 75%);
|
||||
border-radius: 27px;
|
||||
margin-right: 4%;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#oils-link .description h3 {
|
||||
font-size: 6em;
|
||||
font-weight: 300;
|
||||
color: hsl(160, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#flower-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 80% 20% ;
|
||||
box-shadow: .01em .01em .01em .03em hsl(300, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 85vh;
|
||||
padding: 6vh 0 0 6vw;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#flower-link .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#flower-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(300, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#flower {
|
||||
width: auto;
|
||||
height: 30vh;
|
||||
border: .01em solid hsl(300, 51%, 49%) !important;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.flowers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.main-image img, .flowers img {
|
||||
width: 15vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#flower-link .description {
|
||||
grid-column:1 ;
|
||||
grid-row: 1;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#flower-link .description h3 {
|
||||
font-size: 6em;
|
||||
font-weight: 300;
|
||||
color:hsl(300, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#flower-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2.25;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.description p span {
|
||||
font-weight: 400;
|
||||
line-height: 5;
|
||||
color:hsl(300, 100%, 50%);
|
||||
}
|
||||
|
||||
#flower-link .page-button {
|
||||
grid-column: 1 ;
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
padding: 1vh 0 5vh 1vw;
|
||||
}
|
||||
|
||||
#flower-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: .01em solid hsl(300, 100%, 50%);
|
||||
padding: .25em .75em;
|
||||
margin-left: 0;
|
||||
border-radius: 27px;
|
||||
margin-right: 4%;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin-top:.75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
}
|
||||
|
||||
#flower-link .page-button a:hover {
|
||||
background-color: hsl(300, 100%, 75%);
|
||||
}
|
||||
|
||||
#edibles-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: .01em .01em .01em .03em hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 85vh;
|
||||
padding: 0 3vw 3vh 0;
|
||||
}
|
||||
|
||||
#edibles-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
#edibles-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(75, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#fruit {
|
||||
height: 35vh;
|
||||
width: auto;
|
||||
margin-bottom: 5vh;
|
||||
border: .01em solid hsl(75, 51%, 49%) !important;
|
||||
}
|
||||
|
||||
.fruits {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.fruits img {
|
||||
height: 15vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.main-image img {
|
||||
height: 15vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .page-button {
|
||||
grid-column:2 ;
|
||||
grid-row:2;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
#edibles-link .description {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
#edibles-link .description h3 {
|
||||
font-size: 6.5em;
|
||||
font-weight: 300;
|
||||
color: hsl(75, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#edibles-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2.25;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
#edibles-link .description p span {
|
||||
font-weight: 400;
|
||||
color: hsl(75, 100%, 50%);
|
||||
line-height: 5;
|
||||
}
|
||||
|
||||
#edibles-link .page-button {
|
||||
grid-column:2 ;
|
||||
grid-row:4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
padding: 1vh 0 2vh 1vw;
|
||||
}
|
||||
|
||||
#edibles-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #333;
|
||||
padding: .25em 1em;
|
||||
margin-left: .5em;
|
||||
border: .01em solid hsl(75, 100%, 50%);
|
||||
border-radius: 27px;
|
||||
margin-right: 4%;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .page-button a:hover {
|
||||
background-color: hsl(75, 100%, 75%);
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
|
||||
#mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:768px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto auto auto ;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1;
|
||||
grid-row:1/2;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
justify-content: flex-start;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
font-family:'Lato', sans-serif;
|
||||
font-size: 1em;
|
||||
font-weight: 300;
|
||||
line-height: 4.5vh;
|
||||
padding: 1em 0 0 0;
|
||||
color: rgb(62, 190, 147);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#mobile {
|
||||
max-height: 55vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
font-weight: 300;
|
||||
line-height: 80px;
|
||||
letter-spacing: .5px;
|
||||
padding-top: .95em;
|
||||
margin-left: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1;
|
||||
grid-row: 2;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
margin:2rem 1rem;
|
||||
margin-top:0;
|
||||
border-radius: 25px;
|
||||
box-shadow: .02em .01em .01em .05em hsl(160, 51%, 60%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#about p {
|
||||
font-size:1.125rem;
|
||||
font-weight: 300;
|
||||
padding:1rem;
|
||||
line-height: 1.75;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.description ul {
|
||||
font-size: .85rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
line-height: 2.6;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
#oils-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
#oils-link .image {
|
||||
grid-row: 1;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
#oils-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(160, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#current {
|
||||
height: 30vh;
|
||||
width: auto;
|
||||
border: .01em solid hsl(160, 51%, 49%) !important;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 2vh;
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
|
||||
.main-image img, .imgs img {
|
||||
height: 7vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.75rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
#oils-link .description {
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
margin-top: 6.5vh;
|
||||
}
|
||||
|
||||
#oils-link .description h3 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
color: hsl(160, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#oils-link .description p {
|
||||
font-size: .85em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2.25;
|
||||
padding: 1vh 2vw;
|
||||
|
||||
}
|
||||
|
||||
#oils-link .page-button {
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
#oils-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: .02em solid #000;
|
||||
padding: .25em .75em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .25em .75em .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#oils-link .page-button a:active {
|
||||
border-color:hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#flower-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: .01em .01em .01em .03em hsl(300, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
margin-top: 10vh;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
#flower-link .image {
|
||||
grid-row: 1;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
#flower-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(300, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#flower {
|
||||
max-height: 27.5vh;
|
||||
width: auto;
|
||||
border: .01em solid hsl(300, 51%, 49%) !important;
|
||||
}
|
||||
|
||||
.flowers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 1rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.main-image img, .flowers img {
|
||||
height: 7vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 3rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
#flower-link .description {
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 6.5vh;
|
||||
}
|
||||
|
||||
|
||||
#flower-link .description h3 {
|
||||
font-size: 2.25rem;
|
||||
color: hsl(300, 100%, 50%);
|
||||
margin-bottom: .5em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#flower-link .description p {
|
||||
font-size: .85em;
|
||||
font-weight:300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2.25;
|
||||
padding: 1vh 2vw;
|
||||
}
|
||||
|
||||
#flower-link .description p span {
|
||||
color: hsl(300, 100%, 50%);
|
||||
font-weight: 400;
|
||||
line-height: 5;
|
||||
}
|
||||
|
||||
|
||||
#flower-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#flower-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: .02em solid #000;
|
||||
padding: .25em .75em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#flower-link .page-button a:active {
|
||||
border-color: hsl(300, 100%, 75%);
|
||||
}
|
||||
|
||||
|
||||
#edibles-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: .01em .01em .01em .03em hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#edibles-link .image {
|
||||
grid-row: 1;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
#edibles-link .image img {
|
||||
margin-top: 1.5em;
|
||||
border: .01em solid hsl(75, 100%, 50%);
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#fruit {
|
||||
max-height: 28vh;
|
||||
width: auto;
|
||||
border: .01em solid hsl(75, 51%, 49%) !important;
|
||||
}
|
||||
|
||||
.fruits {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 1rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.main-image img, .fruits img {
|
||||
height: 8vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.5rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .description {
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 7.5vh;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .description h3 {
|
||||
font-size: 2.5rem;
|
||||
color: hsl(75, 100%, 50%);
|
||||
margin-bottom: .5em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#edibles-link .description p {
|
||||
font-size: .85em;
|
||||
font-weight:300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2.25;
|
||||
padding: 1vh 2vw;
|
||||
}
|
||||
|
||||
#edibles-link .description p span {
|
||||
color: hsl(75, 100%, 50%);
|
||||
font-weight: 400;
|
||||
line-height: 5;
|
||||
}
|
||||
|
||||
#edibles-link .description ul {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
|
||||
#edibles-link .page-button {
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
#edibles-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: .01em solid #000;
|
||||
padding: .25em .75em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#edibles-link .page-button a:active {
|
||||
border-color: hsl(75, 100%, 40%);
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
.description .additional {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title .image #desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,443 +0,0 @@
|
|||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:magenta;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: magenta;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color: magenta;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (max-width:480px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 1vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
line-height: 5.5vh;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 300;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
margin-top: 4vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.flower-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: magenta;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .95fr 1fr;
|
||||
padding:.75rem 1rem 2rem 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: magenta;
|
||||
margin: 2rem 0 1.75rem 0;
|
||||
}
|
||||
|
||||
.about p {
|
||||
font-weight: 300;
|
||||
font-size: 2.5vh;
|
||||
line-height: 4vh;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width:30vh;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.65rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 0 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
max-height: 30vh;
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
color: black;
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
margin: 1.5rem 1.25rem 1.25rem 1.25rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.product .click button:active {
|
||||
color: rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
#shop {
|
||||
margin-left: 5vh;
|
||||
}
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 65vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 5rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
font-size: 2.75vh;
|
||||
text-align: center;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
line-height: 5;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 50vh;
|
||||
height: auto;
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
|
||||
|
||||
.flower-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color: magenta;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
min-height: 90vh;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
color: magenta;
|
||||
margin: 5rem 0 2rem 1rem;
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0;
|
||||
float: left;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.about img {
|
||||
width:50vh;
|
||||
height: auto;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 2.5rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 40vh;
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
color: black;
|
||||
font-size: 1rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: .25fr 1fr;
|
||||
grid-template-rows: .25fr .5fr .25fr;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row:1/3;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 3.25rem;
|
||||
font-weight: 300;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
font-size: 2.5vh;
|
||||
line-height: 5vh;
|
||||
padding: 0 4rem;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.product .click button:hover {
|
||||
color: rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
#shop {
|
||||
margin-left: 10vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Lato', sans-serif;
|
||||
src: url('fonts/Lato-Thin.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
:root{
|
||||
--top_padding:5px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
#top-nav {
|
||||
grid-area: top-bar;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#main-nav {
|
||||
grid-area: main-bar;
|
||||
}
|
||||
|
||||
|
||||
#content {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
#footer {
|
||||
grid-area:footer;
|
||||
}
|
||||
|
||||
/* Adjust Media Queries ! */
|
||||
|
||||
@media screen and (min-width:1024px){
|
||||
|
||||
.global-wrapper {
|
||||
display:grid;
|
||||
height:100vh;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: 10% 22% auto 40%;
|
||||
grid-template-areas:
|
||||
"top-bar top-bar top-bar top-bar"
|
||||
"main-bar main-bar main-bar main-bar"
|
||||
"main main main main"
|
||||
"footer footer footer footer";
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Adjust Media Queries ! */
|
||||
|
||||
@media screen and (max-width:480px) {
|
||||
|
||||
.global-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"main-bar"
|
||||
"main"
|
||||
"footer";
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight:500;
|
||||
display:grid;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,529 +0,0 @@
|
|||
body {
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:#333;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 span{
|
||||
color:rgb(191, 255, 0);
|
||||
}
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color:rgb(191, 255, 0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color:rgb(191, 255, 0);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: #333;
|
||||
|
||||
}
|
||||
|
||||
.product p a {
|
||||
text-decoration: none;
|
||||
color: rgb(191, 255, 0);
|
||||
}
|
||||
|
||||
.product p a:hover {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
.product p a:active {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:480px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 1vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
line-height: 4vh;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
min-height: 35vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
max-width: 70vw;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.green-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color:rgb(191, 255, 0);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .95fr 1fr;
|
||||
padding: 2rem .75rem 2rem .75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
color: rgb(191, 255, 0);
|
||||
}
|
||||
|
||||
.about p {
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
line-height: 4.5vh;
|
||||
margin: 1rem .75rem;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width:40vh;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 .75rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
max-width: 45vw;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 4vh;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product .click button a:active {
|
||||
opacity: 50%;
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 65vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
padding-top: 1.5vh;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: flex-start;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
line-height: 5rem;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-size: 1.65rem;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 50vh;
|
||||
height: auto;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-top: 8vh;
|
||||
}
|
||||
|
||||
|
||||
.green-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:rgb(191, 255, 0);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2.5rem 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
color:rgb(191, 255, 0);
|
||||
margin: 2rem 0 2rem 1rem;
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: rgb(191, 255, 0)
|
||||
;
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0 0 1rem;
|
||||
float: left;
|
||||
font-size: 1.5rem;
|
||||
line-height: 5.25vh;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.about img {
|
||||
max-width: 35vw;
|
||||
height: auto;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding: 2rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
padding-bottom: 8vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
letter-spacing: .1em;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 3rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 50vh;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
padding-top: 4.5vh;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: .25fr 1fr;
|
||||
grid-template-rows: .25fr .5fr .25fr;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
padding: 2vh 1vw 5vh 1vw;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row:1/4;
|
||||
padding: 3vh 3vw;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-right: .1em solid #999;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product h5 span{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
line-height: 4vh;
|
||||
padding: 0 2.5rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.product p a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 2.5rem 0;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.5rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product .click button:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 10vh;
|
||||
}
|
||||
|
||||
#app:hover {
|
||||
opacity: 50%;
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,756 +0,0 @@
|
|||
:root {
|
||||
--space : 5px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
}
|
||||
|
||||
.title{
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
|
||||
#about {
|
||||
margin-top: var(--space);
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#about p {
|
||||
color:black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width:1024px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1/5;
|
||||
grid-row:1;
|
||||
background-size: cover;
|
||||
display: grid;
|
||||
grid-template-columns: 60% 40%;
|
||||
height: 67vh;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.title #heading {
|
||||
grid-column: 1;
|
||||
grid-row: 1/2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.title #heading #two {
|
||||
color: hsl(160, 51%, 49%);
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
|
||||
.title .short {
|
||||
grid-column: 1;
|
||||
grid-row: 1/2;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-size: 1.65em;
|
||||
line-height: 10vh;
|
||||
color: rgb(100,190, 149);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
align-self: flex-end;
|
||||
padding: 0 5vw 10vh 5vw;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
grid-column: 2;
|
||||
grid-row: 1/2;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.title .image img {
|
||||
max-height: 50vh;
|
||||
width: auto;
|
||||
padding: 0 5vh 5vw 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 80px;
|
||||
letter-spacing: .5px;
|
||||
padding-top: .75em;
|
||||
margin-left: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.title #heading {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1/5;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
margin: 3rem 1em 2rem 1rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: .02em .02em .02em .06em hsl(160, 51%, 49%);
|
||||
padding: 1vh 5vw;
|
||||
}
|
||||
|
||||
#about p {
|
||||
font-size: 1.55rem;
|
||||
padding:1.5rem;
|
||||
text-align: center;
|
||||
font-family: 'Lato', sans-serif;
|
||||
line-height: 3.2;
|
||||
}
|
||||
|
||||
#about p span {
|
||||
color: hsl(160, 51%, 50%);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1/5;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 2.5vh;
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
#auto-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 80% 20% ;
|
||||
box-shadow: .02em .01em .01em .03em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 90vh;
|
||||
padding: 1rem 0 3rem 0;
|
||||
}
|
||||
|
||||
#auto-link .description {
|
||||
grid-column:1/3 ;
|
||||
grid-row:1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: flex-start;
|
||||
justify-self: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
#auto-link .description h3 {
|
||||
font-size:6em;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
color: hsl(160, 100%, 50%);
|
||||
margin-bottom: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#auto-link .description p {
|
||||
font-size: 1.35em;
|
||||
color: #333;
|
||||
line-height: 2.5;
|
||||
text-align: center;
|
||||
justify-self: flex-end;
|
||||
padding-top: 1rem;
|
||||
width: 90vh;
|
||||
}
|
||||
|
||||
#auto-link .description p span {
|
||||
color: hsl(160, 100%, 70%);
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
#auto-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#auto-link .image img {
|
||||
height:auto;
|
||||
width:70%;
|
||||
margin: 1em;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
#auto-link .page-button {
|
||||
grid-column: 1/3 ;
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#auto-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: black;
|
||||
border: .01em solid #000;
|
||||
padding: .25em 1.25em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#auto-link .page-button a:hover {
|
||||
background-color: hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#tools-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 80% 20% ;
|
||||
box-shadow: .02em .01em .01em .05em hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 85vh;
|
||||
margin-top: 10vh;
|
||||
padding: 1rem 0 3rem 0;
|
||||
}
|
||||
|
||||
#tools-link .image {
|
||||
grid-column:3 ;
|
||||
grid-row:1/3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tools-link .description {
|
||||
grid-column:1/3 ;
|
||||
grid-row:1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
align-items: center;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
#tools-link .description h3 {
|
||||
font-size:6em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#tools-link .description h3 span {
|
||||
color:hsl(75, 100%, 50%);
|
||||
}
|
||||
|
||||
#tools-link .description p {
|
||||
font-size: 1.25em;
|
||||
font-weight: 300;
|
||||
text-align: center;;
|
||||
color: #333;
|
||||
line-height: 2.5;
|
||||
justify-self: flex-end;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#tools-link .description p span {
|
||||
color: hsl(75, 100%, 70%);
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
#tools-link .page-button {
|
||||
grid-column: 1/3 ;
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#tools-link .image img {
|
||||
margin-top: 2em;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#tools-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: black;
|
||||
border: .01em solid #000;
|
||||
padding: .25em 1.25em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
transition: all ease .5s;
|
||||
}
|
||||
|
||||
#tools-link .page-button a:hover {
|
||||
background-color: hsl(75, 100%, 75%);
|
||||
}
|
||||
|
||||
#you-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 80% 20% ;
|
||||
box-shadow: .02em .01em .01em .05em hsl(300, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 85vh;
|
||||
margin-top: 10vh;
|
||||
padding: 1rem 0 3rem 0;
|
||||
}
|
||||
|
||||
#you-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display: none;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#you-link .description {
|
||||
grid-column: 1/3 ;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
#you-link .description h3 {
|
||||
font-size:6em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.fa {
|
||||
color: hsl(300, 100%, 50%);
|
||||
-webkit-text-stroke: .1em white;
|
||||
}
|
||||
|
||||
#you-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2.5;
|
||||
text-align: center;
|
||||
justify-self: flex-end;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#you-link .page-button {
|
||||
grid-column: 1/3 ;
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#you-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: black;
|
||||
border: .01em solid #000;
|
||||
padding: .25em 1.25em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
transition: all ease .5s;
|
||||
}
|
||||
|
||||
#you-link .page-button a:hover {
|
||||
background-color: hsl(300, 100%, 75%);
|
||||
}
|
||||
|
||||
#you-link a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#you-link .description p span {
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 6.5rem;
|
||||
line-height: 80px;
|
||||
letter-spacing: 2px;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
#app-link .image #icon {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:480px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto auto auto ;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1;
|
||||
grid-row:1/2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
justify-content: flex-start;
|
||||
height: 80vh;
|
||||
padding-top: 3.75rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.75rem;
|
||||
line-height: 60px;
|
||||
letter-spacing: .5px;
|
||||
margin-left: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
font-family:'Lato', sans-serif;
|
||||
font-size:1em;
|
||||
font-weight: 300;
|
||||
line-height: 5vh;
|
||||
color: rgb(62, 190, 147);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
padding: 1.5em 2em;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title .image img {
|
||||
max-height: 30vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#one {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#two {
|
||||
color: hsl(160, 51%, 49%);
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1;
|
||||
grid-row: 2;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
margin:0 1rem 2rem 1rem;
|
||||
margin-top:0;
|
||||
border-radius: 25px;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 51%, 50%);
|
||||
padding: 1vh 1vw;
|
||||
}
|
||||
|
||||
#about p {
|
||||
font-size:1.105rem;
|
||||
font-weight: 300;
|
||||
padding:1rem;
|
||||
line-height: 2.25;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
margin-top: 2.5vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
#auto-link {
|
||||
display:grid;
|
||||
grid-template-rows: 80% 20%;
|
||||
box-shadow: .01em .01em .01em .04em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 85vh;
|
||||
padding-bottom: .75rem;
|
||||
}
|
||||
|
||||
/* #auto-link .image {
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
#auto-link .image img {
|
||||
margin-top: 1em;
|
||||
width:80%;
|
||||
margin-left: 2em;
|
||||
} */
|
||||
|
||||
|
||||
#auto-link .description {
|
||||
grid-row: 1/2;
|
||||
padding: 1em 1em 0 1em;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
#auto-link .description h3 {
|
||||
font-size: 2.45rem;
|
||||
color: hsl(160, 100%, 50%);
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#auto-link .description p {
|
||||
font-size: .95rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2.5;
|
||||
padding-top: .75rem;
|
||||
}
|
||||
|
||||
#auto-link .description p span {
|
||||
color: hsl(160, 100%, 70%);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#auto-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
#auto-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .35em 1em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#auto-link .page-button a:active {
|
||||
border-color:hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#tools-link {
|
||||
display:grid;
|
||||
grid-template-rows: 80% 20%;
|
||||
box-shadow: .01em .01em .01em .04em hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 75vh;
|
||||
margin-top: 9.5vh;
|
||||
padding-bottom: .75rem;
|
||||
}
|
||||
|
||||
#tools-link .description {
|
||||
grid-row: 1/2;
|
||||
padding: 1em 1.15em 0 1.15em;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
#tools-link .image img {
|
||||
margin-top: 1em;
|
||||
width:80%;
|
||||
margin-left: 2em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tools-link .description h3 {
|
||||
font-size: 2.45rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#tools-link .description h3 span {
|
||||
color: hsl(75, 100%, 50%);
|
||||
}
|
||||
|
||||
#tools-link .description p {
|
||||
font-size: .95rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2.5;
|
||||
padding-top: .75rem;
|
||||
}
|
||||
|
||||
#tools-link .description p span {
|
||||
color: hsl(75, 100%, 50%);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#tools-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
#tools-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .35em 1em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#tools-link .page-button a:active {
|
||||
border-color:hsl(75, 100%, 75%);
|
||||
}
|
||||
|
||||
#you-link {
|
||||
display:grid;
|
||||
grid-template-rows: 80% 20%;
|
||||
box-shadow: .01em .01em .01em .03em hsl(300, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 80vh;
|
||||
margin-top: 9.5vh;
|
||||
padding-bottom: .75rem;
|
||||
}
|
||||
|
||||
#you-link .description {
|
||||
grid-row: 1/2;
|
||||
padding: 1em 1em 0 1em;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
|
||||
#you-link .description h3 {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#you-link a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#you-link .image .fa {
|
||||
font-size: 15em;
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
#you-link .description h3 span {
|
||||
color:magenta;
|
||||
-webkit-text-stroke: .1em white;
|
||||
}
|
||||
|
||||
#you-link .description p {
|
||||
font-size: .95rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2.5;
|
||||
padding-top: .75rem;
|
||||
}
|
||||
|
||||
#you-link .description p span {
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
#you-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
#you-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .35em 1em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#you-link .page-button a:active {
|
||||
border-color:hsl(300, 100%, 75%);
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
.description .additional {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app-link .image #icon-desktop {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -76,6 +76,7 @@ img {
|
|||
align-self: center;
|
||||
justify-self: center;
|
||||
transition: all .4 ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.link button:active, .link button:hover {
|
||||
|
|
@ -99,6 +100,7 @@ img {
|
|||
padding: 3vh 1vw 0 1vw;
|
||||
height: 45vw;
|
||||
width: 45vw;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.link .sub_container p {
|
||||
|
|
@ -146,22 +148,22 @@ img {
|
|||
}
|
||||
|
||||
#spider {
|
||||
margin-left: 56vw;
|
||||
margin-left: 35vw;
|
||||
}
|
||||
|
||||
#cube {
|
||||
margin-left: 5vw;
|
||||
margin-left: 30vw;
|
||||
}
|
||||
|
||||
#offgrid {
|
||||
margin-left: 56vw;
|
||||
margin-left: 55vw;
|
||||
}
|
||||
|
||||
#machina {
|
||||
margin-left: 58vw;
|
||||
margin-left: 30vw;
|
||||
}
|
||||
#miner {
|
||||
margin-left: 30vw;
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -261,6 +263,13 @@ img {
|
|||
}
|
||||
|
||||
@media (min-height: 500px) {
|
||||
|
||||
.link .sub_container p {
|
||||
height: 55vw;
|
||||
margin-top: 8vw;
|
||||
line-height: 6vw;
|
||||
}
|
||||
|
||||
#hemp {
|
||||
margin-top: 5vw;
|
||||
}
|
||||
|
|
@ -269,28 +278,60 @@ img {
|
|||
margin-top: 33vw;
|
||||
}
|
||||
|
||||
#permapp .sub_container p {
|
||||
height: 60vw;
|
||||
margin-top: 8vw;
|
||||
}
|
||||
|
||||
#spider {
|
||||
margin-top: 60vw;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#spider .sub_container p {
|
||||
height: 60vw;
|
||||
margin-top: 8vw;
|
||||
}
|
||||
|
||||
#cube {
|
||||
margin-top: 90vw;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#cube .sub_container p {
|
||||
height: 60vw;
|
||||
margin-top: 15vw;
|
||||
}
|
||||
|
||||
#offgrid {
|
||||
margin-top: 130vw;
|
||||
margin-top: 125vw;
|
||||
height: 90vw;
|
||||
}
|
||||
|
||||
#offgrid .sub_container p {
|
||||
height: 65vw;
|
||||
}
|
||||
|
||||
#offgrid .sub_container {
|
||||
height: 60vw;
|
||||
}
|
||||
|
||||
|
||||
#cyber {
|
||||
margin-top: 145vw;
|
||||
}
|
||||
|
||||
#cyber .sub_container p {
|
||||
height: 60vw;
|
||||
margin-top: 8vw;
|
||||
}
|
||||
|
||||
#machina {
|
||||
margin-top: 180vw;
|
||||
margin-top: 200vw;
|
||||
}
|
||||
|
||||
#miner{
|
||||
margin-top: 210vw;
|
||||
margin-top: 200vw;
|
||||
}
|
||||
|
||||
#miner .sub_container {
|
||||
|
|
|
|||
|
|
@ -1,526 +0,0 @@
|
|||
body {
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:rgb(191, 255, 0);
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 span{
|
||||
color:rgb(191, 255, 0);
|
||||
}
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color:rgb(191, 255, 0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color:rgb(191, 255, 0);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: #333;
|
||||
|
||||
}
|
||||
|
||||
.product p a {
|
||||
text-decoration: none;
|
||||
color: rgb(191, 255, 0);
|
||||
}
|
||||
|
||||
.product p a:hover {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
.product p a:active {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:480px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 13.5vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: .95rem;
|
||||
font-weight: 300;
|
||||
line-height: 5.5vh;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 300;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 35vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.things-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color:rgb(191, 255, 0);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
display: grid;
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
justify-items: center;
|
||||
padding:1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
line-height: 3rem;
|
||||
color: rgb(191, 255, 0);
|
||||
margin: 2rem 1rem;
|
||||
}
|
||||
|
||||
|
||||
.about p {
|
||||
font-weight: 300;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
margin: 1rem .7rem;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width:40vh;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 0 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
max-width: 60vw;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
font-weight: 300;
|
||||
line-height: 3.5vh;
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
}
|
||||
|
||||
.products p a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.products p a:active {
|
||||
color: hsl(75, 100%, 60%);
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight:300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product .click button:active {
|
||||
opacity: 50%;
|
||||
background-color: rgb(191, 255, 0);
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 60vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
padding-top: 1.5vh;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1;
|
||||
font-size: 6.5rem;
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
margin: 0;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 1.35rem;
|
||||
margin: 0 1rem 1rem 1rem;
|
||||
text-align: left;
|
||||
line-height: 6rem;
|
||||
letter-spacing: .5px;
|
||||
justify-self: center;
|
||||
padding-right: 20vw;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 15vw;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 50vh;
|
||||
height: auto;
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-top: 8vh;
|
||||
margin-left: 4vh;
|
||||
}
|
||||
|
||||
.things-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:rgb(191, 255, 0);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2.5rem 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
min-height: 80vh;
|
||||
width: 90vh;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
padding-bottom: 2vh;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
color:rgb(191, 255, 0);
|
||||
margin: 2rem 0 0 5rem;
|
||||
grid-column: 1/3;
|
||||
display: flex;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: rgb(191, 255, 0)
|
||||
;
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0 0 1rem;
|
||||
float: left;
|
||||
font-size: 1.5rem;
|
||||
grid-column: 1/2;
|
||||
line-height: 5vh;
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.about img {
|
||||
width:55vh;
|
||||
height: auto;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding: 2rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
padding-bottom: 8vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 3rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 50vh;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: .25fr 1fr;
|
||||
grid-template-rows: .25fr .5fr .25fr;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
padding: 4rem .5rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row: 1/4;
|
||||
padding: 3vh 2vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 2.65rem;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product h5 span{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0 2.5rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.5rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product .click button:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(191, 255, 0);
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 10vh;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,724 +0,0 @@
|
|||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:#333;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
color:rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(62, 190, 147);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
.about p span {
|
||||
color:rgb(62, 190, 147);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 90vh;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 1vh;
|
||||
padding-top: 6vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 40vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.join-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: rgb(62, 190, 147);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
color:rgb(62, 190, 147);
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
.about p {
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
margin: 1.5rem 0 1rem 0;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width: 45vh;
|
||||
height: auto;
|
||||
padding: 1rem .5rem 2rem .5rem;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
form .btn {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #000;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: ease.5s;
|
||||
}
|
||||
|
||||
.btn:active{
|
||||
color:rgb(0, 255, 170);
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.adress-info {
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.adress-info h3 {
|
||||
color: rgb(62, 190, 147);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
padding: 2vh 0 3vh 0;
|
||||
}
|
||||
|
||||
.phone-info {
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.phone-info h3 {
|
||||
color: rgb(62, 190, 147);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.social-info {
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.social-info h3 {
|
||||
color: rgb(62, 190, 147);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.social-info h5 {
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
margin: 2rem 0 .5rem 0 ;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 66vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
padding-top: 6vh;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
color:rgb(62, 190, 147);
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-left: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
font-size: 1.45rem;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
line-height: 2.5rem;
|
||||
letter-spacing: .5px;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(62, 190, 147);
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-right: 7.5vw
|
||||
}
|
||||
|
||||
.info img {
|
||||
max-width: 35vw;
|
||||
height: auto;
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.join-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:rgb(62, 190, 147);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2.5rem 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
padding: 3vh .5vw 1vh .5vw;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.about p span {
|
||||
font-size: 1.65rem;
|
||||
color: rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0 0 1rem;
|
||||
float: left;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about img {
|
||||
max-width:35vw;
|
||||
height: auto;
|
||||
margin-top: 30vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
background-color:transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
form .btn {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #000;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: ease.5s;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
opacity: 50%;
|
||||
}
|
||||
.btn:active{
|
||||
background-color:rgb(0, 255, 170);
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.adress-info {
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.adress-info h3 {
|
||||
color: hsl(160, 49%, 60%);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
padding: 1vh 1vw 4vh 1vw;
|
||||
}
|
||||
|
||||
.adress-info h5 {
|
||||
color: #eee;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .115em;
|
||||
text-transform: uppercase;
|
||||
padding: 1vh 0 1vh 1.5vh;
|
||||
}
|
||||
|
||||
.adress-info p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 4vh;
|
||||
padding: 1vh 0 1vh 1vw;
|
||||
}
|
||||
|
||||
.phone-info {
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.phone-info h3 {
|
||||
color: hsl(160, 49%, 60%);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
padding: 1vh 1vw 4vh 1vw;
|
||||
}
|
||||
|
||||
.phone-info p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 4vh;
|
||||
padding: 1vh 0 1vh 1vw;
|
||||
}
|
||||
|
||||
.social-info {
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.social-info h3 {
|
||||
color: hsl(160, 49%, 60%);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
padding: 1vh 1vw 4vh 1vw;
|
||||
}
|
||||
|
||||
.social-info figure {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
figure #pixelfed {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
figure #pixelfed-adress {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
figure #peertube {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
figure #peertube-adress {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.social-info h5 {
|
||||
color: #eee;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .115em;
|
||||
text-transform: uppercase;
|
||||
padding: 1vh 0 1vh 1.5vh;
|
||||
}
|
||||
|
||||
.social-info a {
|
||||
text-decoration: none;
|
||||
color: #eee;
|
||||
padding-top: 1vh;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.social-info a:hover {
|
||||
color: hsl(160, 50%, 70%);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-container .form {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 20px 1px grey;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
z-index: 10000;
|
||||
overflow: hidden;
|
||||
min-height: 95vh;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background-color:black;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
background-color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
form{
|
||||
padding: 2.25rem;
|
||||
z-index:10;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
form h3 {
|
||||
color: rgb(62, 190, 147);
|
||||
font-weight: 200;
|
||||
font-size: 2.5rem;
|
||||
line-height: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
form .input-container {
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.input-container .input {
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: .01em solid rgb(62, 190, 147);
|
||||
box-shadow: .1em .1em .1em .01em hsl(160, 50%, 70%);
|
||||
background-color: hsl(160, 50%, 50%);
|
||||
padding: 1rem 1rem;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
font-family:'Lato', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .1em;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.input-container.textarea .input {
|
||||
padding: 2rem 2rem;
|
||||
resize: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
top: 50%;
|
||||
font-size: 1.5rem;
|
||||
color:white;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
opacity: 90%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact-info {
|
||||
padding: 2.5rem 2.5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 480px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.contact-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.contact-container .form {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .6fr 1fr;
|
||||
}
|
||||
.contact-info {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.adress-info h5 {
|
||||
color: #eee;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .115em;
|
||||
text-transform: uppercase;
|
||||
padding: 5vh 0 0 0;
|
||||
}
|
||||
|
||||
.adress-info p {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 300;
|
||||
line-height: 5vh;
|
||||
letter-spacing: 0.02em;
|
||||
padding: 2vh 0 1vh 1vw;
|
||||
}
|
||||
|
||||
|
||||
.phone-info h3 {
|
||||
color: rgb(62, 190, 147);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
padding: 2vh 0 3vh 0;
|
||||
}
|
||||
|
||||
.phone-info p {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 300;
|
||||
line-height: 5vh;
|
||||
letter-spacing: 0.02em;
|
||||
padding: 0 0 1vh 0;
|
||||
}
|
||||
|
||||
.social-info h3 {
|
||||
color: rgb(62, 190, 147);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
padding: 1.5vh 0 0 0;
|
||||
}
|
||||
|
||||
.social-info figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
figure h5 {
|
||||
color: #eee;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .115em;
|
||||
text-transform: uppercase;
|
||||
padding: 5vh 0 0 0;
|
||||
margin: 1vh 0;
|
||||
}
|
||||
|
||||
figure a {
|
||||
color: #eee;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 300;
|
||||
text-decoration: none;
|
||||
margin: 1vh 0;
|
||||
transition: .5s all ease;
|
||||
}
|
||||
|
||||
figure a:active {
|
||||
color: hsl(160, 49%, 80%);
|
||||
filter: blur(.05em);
|
||||
}
|
||||
.contact-form {
|
||||
grid-row: 1;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
form {
|
||||
padding: .75rem .65rem 1.5rem .75rem;
|
||||
}
|
||||
|
||||
form h3 {
|
||||
font-size: 2rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
form .input-container {
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.input-container .input{
|
||||
padding: .5rem .5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
#phone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,990 +0,0 @@
|
|||
:root {
|
||||
--space : 5px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
}
|
||||
|
||||
#about {
|
||||
margin-top: var(--space);
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#about p {
|
||||
color:black;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width:769px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1/5;
|
||||
grid-row:1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
height: 66vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.title #heading {
|
||||
grid-column: 1;
|
||||
grid-row: 1/2;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
grid-column: 1;
|
||||
grid-row: 1/3;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-size:1.75em;
|
||||
line-height: 7.5vh;
|
||||
color: rgb(100,190, 149);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
padding-top: 12.5vh;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
transition: 0.4s;
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
|
||||
.title .image img {
|
||||
max-height: 55vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
font-size: 2.5rem;
|
||||
font-weight:300;
|
||||
line-height: 80px;
|
||||
letter-spacing: .5px;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#about {
|
||||
grid-column:1/5;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
margin: 0 5rem 2rem 5rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: .01em .01em .01em .05em hsl(160, 51%, 49%);
|
||||
justify-content: center;
|
||||
padding: 2vh 2vw;
|
||||
}
|
||||
|
||||
|
||||
#about p {
|
||||
font-size: 1.5rem;
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1/5;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 5vh;
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
#us-link {
|
||||
display:grid;
|
||||
grid-template-columns: 45% 65%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 130vh;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
#us-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content:center
|
||||
}
|
||||
|
||||
#us-link .image img {
|
||||
height: 50vh;
|
||||
width:auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#us-link .description {
|
||||
grid-column:2 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
#us-link .description h3 {
|
||||
font-size: 6em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
margin: .25em 0 .25em 0;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
padding-left: 5vh;
|
||||
}
|
||||
|
||||
#us-link .description h3 span {
|
||||
color:hsl(160, 100%, 50%);
|
||||
}
|
||||
|
||||
#us-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
justify-self: flex-end;
|
||||
padding-top: 1.5rem;
|
||||
text-align: center;
|
||||
max-width: 60vh;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
#us-link .page-button {
|
||||
grid-column: 2 ;
|
||||
grid-row:4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0 2rem 0;
|
||||
max-width: 52.5vw;
|
||||
}
|
||||
|
||||
#us-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em 1em;
|
||||
border: .01em solid #000;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.65em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
margin-right: 15vw;
|
||||
transition: all ease .5s;
|
||||
}
|
||||
|
||||
#us-link .page-button a:hover {
|
||||
background-color: hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#partner-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: .01em .01em .01em .03em hsl(300, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
max-height: 90vh;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#partner-link .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
padding-bottom: 7.5vh;
|
||||
}
|
||||
|
||||
#partner-link .image img {
|
||||
height: 60vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#partner-link .description {
|
||||
grid-column:1 ;
|
||||
grid-row: 1/2;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
#partner-link .description h3 {
|
||||
font-size: 6em;
|
||||
font-weight: 300;
|
||||
color:hsl(300, 100%, 50%);
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
#partner-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 5vh;
|
||||
justify-self: flex-end;
|
||||
padding: 1em 1em 0 1em;
|
||||
text-align: center;
|
||||
width: 60vh;
|
||||
}
|
||||
|
||||
#partner-link .image a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#partner-link .page-button {
|
||||
grid-column: 1 ;
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#partner-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em 1em;
|
||||
border: .01em solid #000;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.65em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#partner-link .page-button a:hover {
|
||||
background-color: hsl(300, 100%, 75%);
|
||||
}
|
||||
|
||||
#meet-link {
|
||||
display:grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 51%, 49%);
|
||||
border-radius: 25px;
|
||||
min-height: 75vh;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#meet-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 12.5vh 0 0 0;
|
||||
}
|
||||
|
||||
#meet-link .image #plus {
|
||||
margin-top: .25em;
|
||||
font-size: 30em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
color: #333;
|
||||
padding-top: 0;
|
||||
margin-left: 0;
|
||||
padding: 2rem 5rem;
|
||||
|
||||
}
|
||||
|
||||
#meet-link .image a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#meet-link .description {
|
||||
grid-column: 2 ;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#meet-link .description h3 {
|
||||
font-size: 6em;
|
||||
font-weight: 300;
|
||||
color: hsl(160, 51%, 49%);
|
||||
margin: .5em 0 .25em 5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#meet-link .description h3 span {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#meet-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
justify-self: flex-end;
|
||||
padding: 1.5rem 0 0 1em;
|
||||
text-align: center;
|
||||
max-width: 60vh;
|
||||
}
|
||||
|
||||
#meet-link .page-button {
|
||||
grid-column: 2 ;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 7.5vh;
|
||||
}
|
||||
|
||||
#meet-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em 1em;
|
||||
border: .01em solid #000;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.65em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#meet-link .page-button a:hover {
|
||||
background-color: hsl(160, 51%, 75%);
|
||||
}
|
||||
|
||||
.desktop-link {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
margin-top: 10vh;
|
||||
grid-gap: 7.5vh;
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
|
||||
#blog-link {
|
||||
box-shadow: .01em .01em .01em .05em #eee;
|
||||
border-radius: 25px;
|
||||
grid-column: 1;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr .2fr;
|
||||
grid-template-columns: 100%;
|
||||
max-width: 45vw;
|
||||
}
|
||||
|
||||
#blog-link .description {
|
||||
grid-column:1 ;
|
||||
grid-row:1;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
#blog-link .description h3 {
|
||||
font-size: 6em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#blog-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 5vh;
|
||||
justify-self: flex-end;
|
||||
padding: 3.5rem 0 0 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#blog-link .page-button {
|
||||
grid-row:2;
|
||||
display:flex;
|
||||
align-items: flex-start;
|
||||
margin: 1rem 0 0 1em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#blog-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em 1em;
|
||||
border: .01em solid #000;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#blog-link .page-button a:hover {
|
||||
background-color: hsl(0, 0%, 75%);
|
||||
}
|
||||
|
||||
#blog-link .image a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#code-link {
|
||||
box-shadow: .01em .01em .01em .05em hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
grid-column: 2;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr .2fr;
|
||||
grid-template-columns: 100%;
|
||||
max-width: 45vw;
|
||||
}
|
||||
|
||||
#code-link .description {
|
||||
grid-column:1 ;
|
||||
grid-row:1;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 1em;
|
||||
}
|
||||
|
||||
#code-link .description h3 {
|
||||
font-size: 6.25em;
|
||||
font-weight: 300;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
color: hsl(75, 100%, 50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#code-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
justify-self: flex-end;
|
||||
padding: 3.5rem 0 0 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#code-link .page-button {
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
align-items: flex-start;
|
||||
margin: 1rem 0 0 1em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#code-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em 1em;
|
||||
border: .01em solid #000;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.45em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#code-link .page-button a:hover {
|
||||
background-color: hsl(75, 100%, 75%);
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 6.5rem;
|
||||
line-height: 80px;
|
||||
letter-spacing: 2px;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.discover {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#app-link .image #icon {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:768px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto auto auto auto ;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1;
|
||||
grid-row:1/2;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
justify-content: flex-start;
|
||||
min-height: 77.5vh;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.title #heading #two {
|
||||
color: rgb(62, 190, 147) ;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
font-family:'Lato', sans-serif;
|
||||
font-size: 1.25em;
|
||||
font-weight: 300;
|
||||
padding: 3em 1em;
|
||||
color: rgb(62, 190, 147);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.title .image img {
|
||||
max-height: 15vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 300;
|
||||
line-height: 60px;
|
||||
letter-spacing: .5px;
|
||||
margin-left: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1;
|
||||
grid-row: 2;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
margin: 0 1rem 2rem 1rem;
|
||||
margin-top:0;
|
||||
border-radius: 25px;
|
||||
box-shadow: .01em .01em .01em .04em hsl(160, 51%, 49%);
|
||||
padding: 1vh 1vw;
|
||||
}
|
||||
|
||||
#about p {
|
||||
font-size:1.125rem;
|
||||
font-weight: 300;
|
||||
padding: 1rem;
|
||||
line-height: 1.75;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
margin-top: 2.5vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
#us-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: .01em .01em .05em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
max-height: 160vh;
|
||||
}
|
||||
|
||||
#us-link .image {
|
||||
grid-row: 1;
|
||||
padding-top: 2em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#us-link .image img {
|
||||
margin: 1em 0 1.25em 0;
|
||||
width: auto;
|
||||
height: 40vh;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#us-link .description {
|
||||
grid-row: 2;
|
||||
padding:.25em 1em 1em 1em;
|
||||
}
|
||||
|
||||
#us-link .description h3 {
|
||||
font-size: 3rem;
|
||||
color: #333;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding: .25vh 0 3vh 0;
|
||||
}
|
||||
|
||||
#us-link .description h3 span {
|
||||
color: hsl(160, 100%, 50%);
|
||||
}
|
||||
|
||||
#us-link .description p {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 1.85;
|
||||
}
|
||||
#us-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#us-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .35em 1em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#us-link .page-button a:active {
|
||||
border-color:hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#partner-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
grid-template-columns: 100%;
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: .01em .01em .05em hsl(300, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
margin-top: 7.5vh;
|
||||
min-height: 100vh;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
#partner-link .image img {
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
#partner-link .image a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#partner-link .description {
|
||||
grid-row: 2;
|
||||
padding:.5em 1em 1em 1em;
|
||||
}
|
||||
|
||||
#partner-link .description h3 {
|
||||
font-size: 3rem;
|
||||
color: hsl(300, 100%, 50%);
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding: 7vh 0 3vh 0;
|
||||
}
|
||||
|
||||
#partner-link .description p {
|
||||
font-size: 1.05em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
#partner-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#partner-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .35em 1em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#partner-link .page-button a:active {
|
||||
border-color:hsl(300, 100%, 75%);
|
||||
}
|
||||
|
||||
#meet-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
grid-template-columns: 100%;
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: .01em .01em .05em hsl(160, 51%, 49%);
|
||||
border-radius: 25px;
|
||||
margin-top: 7.5vh;
|
||||
min-height: 60vh;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
#meet-link .image #plus {
|
||||
margin-top: .35em;
|
||||
font-size: 15em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
color: hsl(160, 100%, 50%);
|
||||
|
||||
}
|
||||
|
||||
#meet-link .image a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#meet-link .description {
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
#meet-link .description h3 {
|
||||
font-size: 2.65rem;
|
||||
color: hsl(160, 51%, 49%);
|
||||
margin-bottom: .6em;
|
||||
padding-left: .65em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#meet-link .description h3 span {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
#meet-link .description p {
|
||||
font-size: .95rem;
|
||||
color: #333;
|
||||
padding:0 1em;
|
||||
padding-left: 2em;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#meet-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#meet-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
padding: .35em 1.5em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
margin: 1em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#meet-link .page-button a:active {
|
||||
border-color: hsl(160, 51%, 75%);
|
||||
}
|
||||
|
||||
#blog-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
grid-template-columns: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
box-shadow: 1px 1px 1px 3px #333;
|
||||
border-radius: 25px;
|
||||
margin-top: 7.5vh;
|
||||
max-height: 85vh;
|
||||
}
|
||||
|
||||
#blog-link .description {
|
||||
grid-row: 1/2;
|
||||
grid-column: 1;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#blog-link .description h3 {
|
||||
font-size: 2.65rem;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding-top: 7.5vh;
|
||||
}
|
||||
|
||||
#blog-link .description p {
|
||||
font-size: .95rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#blog-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
grid-row: 2;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
|
||||
#blog-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
padding: .35em 1.5em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
margin: 1em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#blog-link .page-button a:active {
|
||||
border-color:hsl(0, 0%, 75%);
|
||||
}
|
||||
|
||||
#code-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
grid-template-columns: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
box-shadow: 1px 1px 1px 3px hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
margin-top: 7.5vh;
|
||||
max-height: 85vh;
|
||||
}
|
||||
|
||||
#code-link .description {
|
||||
grid-row: 1/3;
|
||||
grid-column: 1;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#code-link .description h3 {
|
||||
font-size: 2.65rem;
|
||||
color:hsl(75, 100%, 50%);
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding-top: 7.5vh;
|
||||
}
|
||||
|
||||
#code-link .description p {
|
||||
font-size: .95rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
margin-top: 2.25rem;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
#code-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
grid-row: 3;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
|
||||
#code-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
padding: .35em 1.5em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
margin: 1em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#code-link .page-button a:active {
|
||||
border-color: hsl(75, 100%, 50%);
|
||||
}
|
||||
|
||||
#code2-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
.description .additional {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app-link .image #icon-desktop {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,474 +0,0 @@
|
|||
:root {
|
||||
--space : 5px;
|
||||
}
|
||||
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color: rgb(0, 255, 170);
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact-container .form {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 20px 1px grey;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
overflow: hidden;
|
||||
min-height: 95vh;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background-color:black;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
background-color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
form{
|
||||
padding: 2.25rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
form h3{
|
||||
color: rgb(62, 190, 147);
|
||||
font-weight: 200;
|
||||
font-size: 3rem;
|
||||
line-height: 5rem;
|
||||
margin: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
form .input-container {
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.input-container .input {
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: .01em solid rgb(62, 190, 147);
|
||||
box-shadow: .1em .1em .1em .01em hsl(160, 50%, 70%);
|
||||
background-color: hsl(160, 50%, 50%);
|
||||
padding: 1rem 1rem;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
font-family:'Lato', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .1em;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.input-container.textarea .input {
|
||||
padding: 2rem 2rem;
|
||||
resize: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
top: 50%;
|
||||
font-size: 1.5rem;
|
||||
color:white;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
opacity: 90%;
|
||||
}
|
||||
|
||||
form .btn {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #000;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: ease.5s;
|
||||
}
|
||||
|
||||
form .btn:hover, .btn:active{
|
||||
background-color: hsl(160, 49%, 60%);
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
padding: 2.5rem 5rem 3rem 5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.adress-info {
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.adress-info h3 {
|
||||
color: hsl(160, 49%, 60%);
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
padding: 1vh 1vw 4vh 1vw;
|
||||
}
|
||||
|
||||
.adress-info h5 {
|
||||
color: #eee;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .115em;
|
||||
text-transform: uppercase;
|
||||
padding: 1vh 0 1vh 1.5vh;
|
||||
}
|
||||
|
||||
.adress-info p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 4vh;
|
||||
padding: 1vh 0 1vh 1vw;
|
||||
}
|
||||
|
||||
.phone-info {
|
||||
color:white;
|
||||
}
|
||||
|
||||
.phone-info h3 {
|
||||
color: hsl(160, 49%, 60%);
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
padding: 4vh 1vw 2vh 1vw;
|
||||
}
|
||||
|
||||
.phone-info p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 4vh;
|
||||
padding: 1vh 0 1vh 1vw;
|
||||
}
|
||||
|
||||
.social-info {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-info figure {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-gap: 0 5vw;
|
||||
}
|
||||
|
||||
figure #pixelfed {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
figure #pixelfed-adress {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
figure #peertube {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
figure #peertube-adress {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.social-info h3 {
|
||||
color: hsl(160, 49%, 60%);
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
padding: 4vh 1vw 2vh 1vw;
|
||||
}
|
||||
|
||||
.social-info h5 {
|
||||
color: #eee;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .115em;
|
||||
text-transform: uppercase;
|
||||
padding: 1vh 0 1vh 1.5vh;
|
||||
}
|
||||
|
||||
.social-info a {
|
||||
text-decoration: none;
|
||||
color: #eee;
|
||||
padding-top: 1vh;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.social-info a:hover {
|
||||
color: hsl(160, 49%, 60%);
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:rgb(62, 190, 147);
|
||||
font-size: 3rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(62, 190, 147);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (min-width:769px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 65vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: 45% 55%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 5rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
padding-top: 7.5vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
line-height: 4rem;
|
||||
padding: .5vh 7.5vw 0 7.5vw;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-size: 1.35rem;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
max-height: 50vh;
|
||||
width: auto;
|
||||
grid-column: 2;
|
||||
grid-row: 1/4;
|
||||
display:flex;
|
||||
justify-self: flex-start;
|
||||
align-self: flex-end;
|
||||
margin: 0 0 5vh 5vw;
|
||||
}
|
||||
|
||||
|
||||
.contact-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
background-color:rgb(0, 255, 170);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 480px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 80vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 4.5vh;
|
||||
text-align: center;
|
||||
padding: 3vh 7.5vw;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-weight: 400;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.info img {
|
||||
max-height: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.contact-container .form {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .65fr 1fr;
|
||||
}
|
||||
.contact-info {
|
||||
grid-row: 2;
|
||||
align-items: flex-start;
|
||||
padding: 7.5vh 5vw;
|
||||
}
|
||||
|
||||
.adress-info h3 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.adress-info p {
|
||||
font-weight: 300;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: 0.03em;
|
||||
padding: 1vh 0 1vh 2vw;
|
||||
}
|
||||
|
||||
.phone-info h3 {
|
||||
font-size: 1.8rem;
|
||||
padding: 3vh 1vw 2vh 1vw;
|
||||
}
|
||||
|
||||
.phone-info p {
|
||||
font-weight: 300;
|
||||
font-size: 1.05rem;
|
||||
padding: 0 0 1vh 2vw;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.social-info h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.social-info figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
figure h5 {
|
||||
display: flex;
|
||||
align-self: flex-start !important;
|
||||
color: #eee;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .115em;
|
||||
text-transform: uppercase;
|
||||
padding: 5vh 0 0 0;
|
||||
margin: 1vh 0 0 0;
|
||||
}
|
||||
|
||||
figure #peertube {
|
||||
padding-top: 3vh;
|
||||
}
|
||||
|
||||
figure a {
|
||||
display: flex;
|
||||
align-self: flex-start !important;
|
||||
color: #eee;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 300;
|
||||
text-decoration: none;
|
||||
margin: 1vh 0 ;
|
||||
padding-left: 2vw;
|
||||
transition: .5s all ease;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
grid-row: 1;
|
||||
max-width: 90vw;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
form {
|
||||
padding: .75rem .65rem 1.5rem .75rem;
|
||||
}
|
||||
|
||||
form h3 {
|
||||
font-size: 2rem;
|
||||
line-height: 4rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
form .input-container {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.input-container .input{
|
||||
padding: .5rem .5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
#phone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
Fix Media Queries
|
||||
Fix Footer
|
||||
Fix Z Indexes
|
||||
New Design, simple, remove childish shit
|
||||
Add Css Animations
|
||||
|
|
@ -1,533 +0,0 @@
|
|||
:root {
|
||||
--gradient: linear-gradient(
|
||||
45deg,
|
||||
hsl(160, 51%, 49%),
|
||||
hsl(160, 51%, 59%),
|
||||
hsl(160, 51%, 79%),
|
||||
hsl(160, 51%, 89%),
|
||||
#fff
|
||||
);
|
||||
}
|
||||
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:rgb(0, 255, 170);
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(0, 255, 170);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color: rgb(0, 255, 170);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
margin: 2rem 1rem 1rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 4.5rem;
|
||||
font-weight: 300;
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 20vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
|
||||
.oil-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
display: grid;
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
padding: 1rem 1.25rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
padding-top: 6.5vh;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 1.85rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: #333;
|
||||
letter-spacing: .01em;
|
||||
padding: 1vh 2vw;
|
||||
}
|
||||
|
||||
.about h3 span {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.about p {
|
||||
font-weight: 300;
|
||||
font-size: 1em;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
font-weight: 300;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: .02em
|
||||
}
|
||||
|
||||
.about img {
|
||||
width:40vh;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1.25rem 0 .75rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
max-height: 30vh;
|
||||
margin: 1.25rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
color: black;
|
||||
text-shadow: .05em .025em hsl(160, 49%, 40%);
|
||||
font-size: 1.85rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 200;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
padding-top: 1vh;
|
||||
}
|
||||
|
||||
.products p {
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.products p span {
|
||||
font-weight: 400;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
padding-top: 1vh;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-image: var(--gradient);
|
||||
background-size: 300%;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.product .click button a:active {
|
||||
-webkit-text-stroke-width: .05em;
|
||||
-webkit-text-stroke-color: hsl(300, 100%, 95% );
|
||||
filter: blur(.015em)
|
||||
}
|
||||
|
||||
#shop {
|
||||
margin-left: 5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#shop a:active {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 65vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
padding-left: 2vw;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 7rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: flex-start;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
line-height: 5rem;
|
||||
letter-spacing: .05em;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: flex-start;
|
||||
align-self: center;
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
.info img {
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
|
||||
.oil-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color: rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding: 2.5rem 2.5rem 2.5rem 3rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 4rem;
|
||||
letter-spacing: .05em;
|
||||
color: #333 ;
|
||||
margin: 5rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.about p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 5vh;
|
||||
margin: 1rem 0 0 0;
|
||||
float: left;
|
||||
text-align: center;
|
||||
font-size: 1.55rem;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color: rgb(0, 255, 170);
|
||||
font-weight: 400;
|
||||
padding-top: 4vh;
|
||||
letter-spacing: .03em;
|
||||
font-size: 1.6rem
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
|
||||
.about img {
|
||||
max-width: 35vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 2.5rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
max-width: 45vh;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: black;
|
||||
text-shadow: .05em .025em hsl(160, 49%, 40%);
|
||||
font-size: 1.65rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 200;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: .5fr 1fr;
|
||||
grid-template-rows: .25fr .5fr .25fr;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
margin: 1rem;
|
||||
min-height: 70vh;
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row:1/4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-right: .1em solid #eee;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 3rem;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0 2.5rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 5vh;
|
||||
margin-top: .5vh;
|
||||
}
|
||||
|
||||
.product p span {
|
||||
font-weight: 400;
|
||||
letter-spacing: .03em;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 2.5rem 0;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-image: var(--gradient);
|
||||
background-size: 300%;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product .click button a:active,
|
||||
.product .click button a:focus,
|
||||
.product .click button a:hover {
|
||||
-webkit-text-stroke-width: .05em;
|
||||
-webkit-text-stroke-color: hsl(300, 100%, 90% );
|
||||
filter: blur(.015em)
|
||||
}
|
||||
|
||||
#shop {
|
||||
margin-left: 10vh;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,810 +0,0 @@
|
|||
body {
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:black;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.info h1 span{
|
||||
color:magenta;
|
||||
}
|
||||
.info p {
|
||||
color: black;
|
||||
line-height: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color:magenta;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color:magenta;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: #333;
|
||||
|
||||
}
|
||||
|
||||
.product p a {
|
||||
text-decoration: none;
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
.product p a:hover {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
.product p a:active {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
#insta {
|
||||
padding: 0;
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#gram {
|
||||
width: 5vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#you {
|
||||
padding: 0;
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#tube {
|
||||
width: 5vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 77.5vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
line-height: 6vh;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: .05em;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
color:hsl(300, 100%, 50%);
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 3.5vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
max-height: 50vh;
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.post-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color:magenta;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
display: grid;
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
padding: 1rem 1.75rem 1.75rem 2rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
padding-top: 3vh;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
line-height: 3rem;
|
||||
color: magenta;
|
||||
margin: .65rem 0 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
.about p {
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
font-size: 1.15rem;
|
||||
letter-spacing: .03em;
|
||||
}
|
||||
|
||||
.about img {
|
||||
max-width: 70vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 0 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
padding-bottom: 1.5vh;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 25vh;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 300;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
letter-spacing: .02em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
padding-top: 3vh;
|
||||
}
|
||||
|
||||
.products p {
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
}
|
||||
|
||||
.partner{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.partner.image {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.partner p span {
|
||||
color:rgb(62, 190, 147);
|
||||
font-weight: 400;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: .03em
|
||||
}
|
||||
|
||||
.partner .click {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.partner .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.partner .click button a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.partner .click button:active {
|
||||
opacity: 50%;
|
||||
background-color: magenta;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 1fr .5fr 1fr;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.social .tommaso {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
color:#333;
|
||||
opacity: 90%;
|
||||
}
|
||||
|
||||
.social .blog a {
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.social .techdude {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
|
||||
#gram {
|
||||
width: 5vh;
|
||||
transition: .6s;
|
||||
}
|
||||
|
||||
#gram:active {
|
||||
opacity: 50%;
|
||||
background-color: rgb(62, 190, 147);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.social .instagram #account {
|
||||
font-size: .75rem;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.social .cbdStore {
|
||||
grid-column: 1/3;
|
||||
grid-row: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.blog a:active {
|
||||
opacity: 50%;
|
||||
color: rgb(62, 190, 147);
|
||||
|
||||
}
|
||||
.social .youtube #account {
|
||||
font-size: .75rem;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.social button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: black;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Fira Sans', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.social button a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social button a:active {
|
||||
opacity: 50%;
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 66vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
padding-top: 7.5vh;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
color: hsl(300, 100%, 50%);
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
font-size: 1.45rem;
|
||||
text-align: center;
|
||||
line-height: 4rem;
|
||||
letter-spacing: .5px;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 21.5vw;
|
||||
height: auto;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.post-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:magenta;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2rem 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
min-height: 80vh;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
padding: 7.5vh 2vw 5vh 2vw;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color:magenta;
|
||||
letter-spacing: .03em;
|
||||
grid-column: 1/2;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: magenta;
|
||||
}
|
||||
|
||||
.about p {
|
||||
font-size: 1.35rem;
|
||||
text-align: center;
|
||||
line-height: 4vh;
|
||||
grid-column: 1/2;
|
||||
padding: 1rem 2rem 2rem 4rem;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .05em;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.about img {
|
||||
width:55vh;
|
||||
height: auto;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding: 1rem 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
padding-bottom: 8vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
letter-spacing: .05em;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 3rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 50vh;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.partner {
|
||||
display: grid;
|
||||
grid-template-columns: .25fr 1fr;
|
||||
grid-template-rows: .25fr .5fr .25fr;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
padding: 4rem 2rem 3rem 2rem;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.partner .image {
|
||||
grid-column: 1;
|
||||
grid-row:1/3;
|
||||
padding: 3vh;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4rem 0 0 0;
|
||||
}
|
||||
|
||||
.partner h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.partner h5 span{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.partner p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0 2.5rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 4vh;
|
||||
}
|
||||
|
||||
.partner p span {
|
||||
color: rgb(62, 190, 147);
|
||||
font-weight: 600;
|
||||
padding: 1vh 0 2vh 0;
|
||||
}
|
||||
|
||||
.partner .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.partner .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .6s;
|
||||
}
|
||||
|
||||
.partner .click button a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.partner .click button:hover {
|
||||
opacity: 50%;
|
||||
background-color: magenta;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
min-height: 80vh;
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.social .tommaso {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 5vh 2vw;
|
||||
}
|
||||
|
||||
.name {
|
||||
color:#333;
|
||||
opacity: 90%;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#name2 {
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.instagram {
|
||||
margin: 5vh 0;
|
||||
}
|
||||
|
||||
|
||||
.social .blog a {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
transition: .6s;
|
||||
}
|
||||
|
||||
.social .blog a:hover {
|
||||
opacity: 50%;
|
||||
color: rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.social .techdude {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 4vh;
|
||||
}
|
||||
|
||||
#gram {
|
||||
width: 10vh;
|
||||
transition: .6s;
|
||||
}
|
||||
|
||||
#gram:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(62, 190, 147);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.social .instagram #account {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 200;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.social .cbdStore {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.social .blog a {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
margin: 5vh 0;
|
||||
}
|
||||
|
||||
.blog a:active {
|
||||
opacity: 50%;
|
||||
color: rgb(62, 190, 147);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.social button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: black;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Fira Sans', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.social button a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social button a:active {
|
||||
opacity: 50%;
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,768 +0,0 @@
|
|||
:root {
|
||||
--space : 5px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
}
|
||||
|
||||
.title{
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
|
||||
#about {
|
||||
margin-top: var(--space);
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#about p {
|
||||
color:black;
|
||||
}
|
||||
|
||||
#app-link .image img {
|
||||
box-shadow: 1px 1px 3px 5px #eee;
|
||||
border-radius: 25px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width:1024px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1/5;
|
||||
grid-row:1;
|
||||
background-size: cover;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
height: 67vh;
|
||||
padding-left: 5.75vh;
|
||||
}
|
||||
|
||||
.title #heading {
|
||||
grid-column: 1;
|
||||
grid-row: 1/2;
|
||||
display: flex;
|
||||
padding-top: 1vh;
|
||||
}
|
||||
|
||||
.title #heading #two {
|
||||
color: rgb(62, 190, 147);
|
||||
padding-top: 1.65em;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
grid-column: 1;
|
||||
grid-row: 1/2;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-size: 1.75em;
|
||||
color: rgb(100,190, 149);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
align-self: flex-end;
|
||||
letter-spacing: .03em;
|
||||
line-height: 2em;
|
||||
padding-bottom: 13.5vh;
|
||||
}
|
||||
|
||||
|
||||
.title .image img {
|
||||
max-width: 30vw;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
transition: 0.4s;
|
||||
grid-column: 2;
|
||||
grid-row: 1/2;
|
||||
padding-bottom: 7.5vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5.85rem;
|
||||
font-weight: 300;
|
||||
line-height: 80px;
|
||||
letter-spacing: .01em;
|
||||
padding-top: 1.15em;
|
||||
margin-left: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1/5;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
margin: 0 5rem 2rem 5rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: .01em .01em .01em .05em hsl(160, 51%, 49%);
|
||||
}
|
||||
|
||||
|
||||
#about p {
|
||||
font-size:1.5rem;
|
||||
font-weight: 300;
|
||||
padding:1.5rem;
|
||||
text-align: center;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
line-height: 3;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1/5;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 2.5vh;
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
#app-link {
|
||||
display:grid;
|
||||
grid-template-columns: 45% 65%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: 1px 1px 1px 3px hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 90vh;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
#app-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content:center
|
||||
}
|
||||
|
||||
#app-link .image img {
|
||||
height: 35vh;
|
||||
width: 20vw;
|
||||
|
||||
}
|
||||
|
||||
#app-link .description {
|
||||
grid-column:2 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
padding: 2em 1em 1em 1em;
|
||||
}
|
||||
|
||||
#app-link .description h3 {
|
||||
font-size: 6.25em;
|
||||
font-weight: 300;
|
||||
letter-spacing: .04em;
|
||||
color: hsl(160, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
margin-top: .5em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#app-link .description h3 span {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#app-link .description p {
|
||||
font-size: 1.3em;
|
||||
color: #333;
|
||||
line-height: 2;
|
||||
justify-self: flex-end;
|
||||
padding-top: 1rem;
|
||||
text-align: center;
|
||||
width: 60vh;
|
||||
}
|
||||
|
||||
.description ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2;
|
||||
margin-top: 2rem;
|
||||
padding-left: 15vw;
|
||||
}
|
||||
|
||||
#app-link .page-button {
|
||||
grid-column: 2 ;
|
||||
grid-row:4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 0 2.75rem 0;
|
||||
}
|
||||
|
||||
#app-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em 1em;
|
||||
border: .01em solid #000;
|
||||
border-radius: 27px;
|
||||
margin-right: 20vw;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
transition: all ease .5s;
|
||||
}
|
||||
|
||||
#app-link .page-button a:hover {
|
||||
background-color: hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#lab-link {
|
||||
display:grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: 1px 1px 1px 3px hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 80vh;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#lab-link .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-height: 85vh;
|
||||
padding-top: 7.5vh;
|
||||
}
|
||||
|
||||
#lab-link .image img {
|
||||
height: 60vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#lab-link .description {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
margin-left: 5rem;
|
||||
padding:1em;
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
#lab-link .description h3 {
|
||||
font-size: 6.25em;
|
||||
font-weight: 300;
|
||||
letter-spacing: .04em;
|
||||
color:hsl(75, 100%, 50%);
|
||||
margin-bottom: .25em;
|
||||
margin-top: .5em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#lab-link .description h3 span {
|
||||
color:#333;
|
||||
}
|
||||
|
||||
#lab-link .description p {
|
||||
font-size: 1.3em;
|
||||
color: #333;
|
||||
line-height: 2;
|
||||
text-align: center;
|
||||
justify-self: flex-end;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
#lab-link .page-button {
|
||||
grid-column:1 ;
|
||||
grid-row: 4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0 3rem 0;
|
||||
}
|
||||
|
||||
#lab-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .25em 1em;
|
||||
margin-left: 5vw;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
font-family: 'lato', sans-serif;
|
||||
margin-top:.75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
}
|
||||
|
||||
#lab-link .page-button a:hover {
|
||||
background-color: hsl(75, 100%, 75%);
|
||||
}
|
||||
|
||||
#about-link {
|
||||
display:grid;
|
||||
grid-template-columns: 35% 75%;
|
||||
grid-template-rows: 20% 40% 20% ;
|
||||
box-shadow: 1px 1px 1px 3px hsl(160, 51%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 70vh;
|
||||
padding: 2rem 0 2rem 0;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#about-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 12.5vh 0 0 5vh;
|
||||
}
|
||||
|
||||
#about-link .image #question {
|
||||
margin-top:0;
|
||||
font-size: 30em;
|
||||
font-weight: 300;
|
||||
color:hsl(160, 49%, 50%);
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#about-link .description {
|
||||
grid-column:2/5 ;
|
||||
grid-row:1/2;
|
||||
}
|
||||
|
||||
#about-link .description h3 {
|
||||
font-size: 6.25em;
|
||||
font-weight: 300;
|
||||
letter-spacing: .04em;
|
||||
color: #333;
|
||||
margin-bottom: .25em;
|
||||
margin-top: .5em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#about-link h3 span {
|
||||
color:hsl(160, 49%, 50%);
|
||||
}
|
||||
|
||||
#about-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2;
|
||||
justify-self: flex-end;
|
||||
width: 80vh;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
#about-link .description p span {
|
||||
color:hsl(160, 49%, 50%);
|
||||
}
|
||||
|
||||
#about-link a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#about-link .page-button {
|
||||
grid-column: 2;
|
||||
grid-row:4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#about-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em 1em;
|
||||
border: .01em solid #000;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
margin-left: 15vw;
|
||||
}
|
||||
|
||||
#about-link .page-button a:hover {
|
||||
background-color: hsl(160, 49%, 75%);
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
.discover {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#app-link .image #icon {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1023px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto auto auto ;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1;
|
||||
grid-row:1/2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
justify-content: flex-start;
|
||||
height: 80vh;
|
||||
padding-top: 4.25rem;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
padding: 1em 2em;
|
||||
color: rgb(62, 190, 147);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.title .image img {
|
||||
max-width: 70vw;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 60px;
|
||||
letter-spacing: .04em;
|
||||
margin-left: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#two {
|
||||
color: hsl(160, 51%, 49%);
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1;
|
||||
grid-row: 2;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
margin:2rem 1rem;
|
||||
margin-top:0;
|
||||
border-radius: 25px;
|
||||
box-shadow: .01em .01em .01em .04em hsl(160, 51%, 49%);
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
#about p {
|
||||
font-size:1.125rem;
|
||||
font-weight: 300;
|
||||
line-height: 2;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 2.5vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
#app-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: 1px 1px 1px 3px hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
#app-link .image {
|
||||
grid-row: 1;
|
||||
padding-top: 2em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#app-link .image img {
|
||||
height: 20vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#app-link .description {
|
||||
grid-row: 2;
|
||||
padding:.25em 1em 1em 1em;
|
||||
}
|
||||
|
||||
#app-link .description h3 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 200;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
letter-spacing: .04em;
|
||||
padding-top: 3vh;
|
||||
}
|
||||
|
||||
#app-link .description h3 span {
|
||||
color: hsl(160, 100%, 50%);
|
||||
}
|
||||
|
||||
#app-link .description p {
|
||||
font-size: .95rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
#app-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#app-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .35em 1em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#app-link .page-button a:active {
|
||||
border-color:hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
|
||||
#lab-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: 1px 1px 1px 3px hsl(75, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
margin-top: 10vh;
|
||||
max-height: 105vh;
|
||||
}
|
||||
|
||||
#lab-link .image {
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
#lab-link .image img {
|
||||
height: 25vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#lab-link .description {
|
||||
grid-row: 2;
|
||||
padding:.5em 2em 3em 2em;
|
||||
}
|
||||
|
||||
|
||||
#lab-link .description h3 {
|
||||
font-size: 2.75rem;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
letter-spacing: .04em;
|
||||
padding-top: 3vh;
|
||||
}
|
||||
|
||||
#lab-link .description h3 span {
|
||||
color: hsl(75, 100%, 50%);
|
||||
}
|
||||
|
||||
#lab-link .description p {
|
||||
font-size: .95em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
#lab-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#lab-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .35em 1em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#lab-link .page-button a:active {
|
||||
border-color:hsl(75, 100%, 75%);
|
||||
}
|
||||
|
||||
#about-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
grid-template-columns: 100%;
|
||||
padding-bottom: 1.5rem;
|
||||
box-shadow: 1px 1px 1px 3px hsl(160, 49%, 50%);
|
||||
border-radius: 25px;
|
||||
margin-top: 10vh;
|
||||
max-height: 90vh;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
#about-link a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#about-link .image {
|
||||
grid-row: 1/2;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#about-link .image #question {
|
||||
margin-top:.35em;
|
||||
font-size: 30vh;
|
||||
color: hsl(160, 49%, 50%);
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
padding-left: 2vh;
|
||||
}
|
||||
|
||||
#about-link .description {
|
||||
grid-row: 1/2;
|
||||
grid-column: 1;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
||||
#about-link .description h3 {
|
||||
font-size: 2.75rem;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding-top: 15vh;
|
||||
}
|
||||
|
||||
#about-link .description h3 span {
|
||||
color: hsl(160, 49%, 50%);
|
||||
}
|
||||
|
||||
#about-link .description p {
|
||||
font-size: .95rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#about-link .description p span {
|
||||
color:hsl(160, 49%, 50%);
|
||||
}
|
||||
|
||||
#about-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#about-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .35em 1.5em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: 1em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#about-link .page-button a:active {
|
||||
border-color:hsl(160, 49%, 75%);
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
.description .additional {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app-link .image #icon-desktop {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,532 +0,0 @@
|
|||
body {
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:#333;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 span{
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(0, 255, 170);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color:rgb(0, 255, 170);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: #333;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.5vh;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.4rem;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 60vw;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.app-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .95fr 1fr;
|
||||
padding: .75rem .95rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
line-height: 3rem;
|
||||
color:rgb(0, 255, 170);
|
||||
margin: 1rem .5rem;
|
||||
}
|
||||
|
||||
.about p {
|
||||
font-weight: 300;
|
||||
font-size: .95rem;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
margin: 1rem .5rem;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: .03em;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width:30vh;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.65rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .04em;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 1rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 20vh;
|
||||
margin: 1rem;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
font-size: 1.65rem;
|
||||
font-weight: 200;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .01em;
|
||||
margin-bottom: .5rem;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.products p {
|
||||
font-weight: 300;
|
||||
font-size: .95rem;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 25px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
padding: 2vh 0;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product .click button a:active {
|
||||
opacity: 50%;
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 65vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 6.25rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .04em;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
padding-top: 7.5vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 1.35rem;
|
||||
margin: 0 1rem 1rem 1rem;
|
||||
text-align: center;
|
||||
line-height: 4rem;
|
||||
letter-spacing: .03em;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-size: 1.45rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: flex-start;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 35vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2.5rem 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color:rgb(0, 255, 170);
|
||||
margin: 5rem 0 2rem 1rem;
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 1rem 0 1rem;
|
||||
text-align: left;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 300;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.about img {
|
||||
width:55vh;
|
||||
height: auto;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 3rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 35vh;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: .25fr 1fr;
|
||||
grid-template-rows: .5fr 1fr .5fr;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row:1/3;
|
||||
padding: 3vh;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 25px;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4rem 0 0 4rem;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 3rem;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product h5 span{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0 2.5rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
line-height: 5vh;
|
||||
letter-spacing: .02em;
|
||||
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 2.5rem 0;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product .click button:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 10vh;
|
||||
}
|
||||
|
||||
#app:hover {
|
||||
opacity: 50%;
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,590 +0,0 @@
|
|||
:root {
|
||||
--space : 5px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
}
|
||||
|
||||
.title{
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
|
||||
#about {
|
||||
margin-top: var(--space);
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#about p {
|
||||
color:black;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width:1024px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 25% 25% 25% 25%;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1/5;
|
||||
grid-row:1;
|
||||
background-size: cover;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
height: 63vh;
|
||||
padding: 4vh 0 0 2vw;
|
||||
}
|
||||
|
||||
.title #heading {
|
||||
grid-column: 1;
|
||||
grid-row: 1/2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 40px;
|
||||
letter-spacing: .05em;
|
||||
padding-top: 1em;
|
||||
margin-left: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.title #heading #two {
|
||||
color: rgb(62, 190, 147);
|
||||
padding-left: 35vh;
|
||||
}
|
||||
|
||||
.title article {
|
||||
grid-column: 1;
|
||||
grid-row: 1/2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: flex-end;
|
||||
|
||||
}
|
||||
article .short {
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-size:1.5em;
|
||||
padding: 1.25em 1rem 3em;
|
||||
color: rgb(100,190, 149);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
letter-spacing: .04em;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/*add jquery animation to spiderpi section*/
|
||||
|
||||
article .svg-inline--fa {
|
||||
font-size: 2.5em;
|
||||
transform: scale(1.25,1);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
transition: 0.4s;
|
||||
grid-column: 2;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
.title .image img {
|
||||
max-height: 50vh;
|
||||
width: auto;
|
||||
padding: 0 0 2vh 7.5vw;
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1/5;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
margin: 4rem 2rem 2rem 2rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: .01em .01em.01em .05em hsl(160, 51%, 49%);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#about p {
|
||||
font-size: 1.35rem;
|
||||
padding:1.5rem;
|
||||
text-align: center;
|
||||
font-family: 'Lato', sans-serif;
|
||||
line-height: 4rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1/5;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 2.5vh;
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
#pi-link {
|
||||
display:grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 20% 60% 20% ;
|
||||
box-shadow: .01em .01em .01em .05em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
min-height: 80vh;
|
||||
padding: 1.5rem 0 2rem 0;
|
||||
}
|
||||
|
||||
/*replace with video*/
|
||||
|
||||
#pi-link .image {
|
||||
grid-column:1 ;
|
||||
grid-row:1/4;
|
||||
display:flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
border-right: .05em solid #eee;
|
||||
}
|
||||
|
||||
#pi-link .image img {
|
||||
max-width: 30vw;
|
||||
}
|
||||
|
||||
#pi-link .description {
|
||||
grid-column:2 ;
|
||||
grid-row:1/3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
padding:1em 2rem 1rem 4rem;
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
#pi-link .description h3 {
|
||||
font-size: 6.25em;
|
||||
font-weight: 200;
|
||||
color: hsl(160, 100%, 50%);
|
||||
letter-spacing: .06em;
|
||||
margin-bottom: .25em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#pi-link .description h3 span {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#pi-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 2;
|
||||
justify-self: flex-end;
|
||||
padding-top: 2rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#pi-link .page-button {
|
||||
grid-column:2 ;
|
||||
grid-row: 4;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#pi-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color:#fff;
|
||||
color: #000;
|
||||
padding: .25em 1em;
|
||||
border: .01em solid #000;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size:1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
font-weight: 300;
|
||||
margin-right: 10vw;
|
||||
}
|
||||
|
||||
#pi-link .page-button a:hover {
|
||||
background-color: hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#join-link {
|
||||
display:grid;
|
||||
grid-template-columns: 70% 30%;
|
||||
grid-template-rows: 20% 60% 20% ;
|
||||
box-shadow: .01em .01em .01em .05em hsl(160, 51%, 49%);
|
||||
border-radius: 25px;
|
||||
min-height: 75vh;
|
||||
padding: 1.5rem 0 0 10vh;
|
||||
margin: 10vh 10vw 0 10vw;
|
||||
}
|
||||
|
||||
#join-link .image {
|
||||
grid-column: 1/3 ;
|
||||
grid-row: 1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
|
||||
#join-link .description {
|
||||
grid-column:1 ;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
margin-left: 5rem;
|
||||
padding:1em;
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
#join-link .description h3 {
|
||||
font-size: 6.25em;
|
||||
font-weight: 300;
|
||||
letter-spacing: .05em;
|
||||
color:hsl(160, 51%, 49%);
|
||||
margin-bottom: .25em;
|
||||
margin-top: .5em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
#join-link .description p {
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
line-height: 1.75;
|
||||
justify-self: flex-end;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#join-link .page-button {
|
||||
grid-column:1 ;
|
||||
grid-row: 2/4;
|
||||
display:flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 5vh;
|
||||
padding-left: 7.5vw;
|
||||
}
|
||||
|
||||
#join-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .25em 1em;
|
||||
margin-left: 0;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
margin-top:.75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .5s;
|
||||
}
|
||||
|
||||
#join-link .page-button a:hover {
|
||||
background-color: hsl(160, 50%, 75%);
|
||||
}
|
||||
|
||||
|
||||
#join-link .image #plus {
|
||||
margin-top: .35em;
|
||||
font-size: 30em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
color: hsl(160, 50%, 75%);
|
||||
padding-top: 0;
|
||||
|
||||
}
|
||||
|
||||
#join-link .image a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
#app-link .image #icon {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:480px) {
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto auto auto ;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1;
|
||||
grid-row:1/2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
justify-content: flex-start;
|
||||
height: 80vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.title #heading #two {
|
||||
color: rgb(62, 190, 147) ;
|
||||
}
|
||||
|
||||
.title article .svg-inline--fa {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.title .short {
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size:1.2em;
|
||||
padding: 1.25em 1em 1em 1em;
|
||||
color: rgb(62, 190, 147);
|
||||
margin-left:.1em;
|
||||
text-align: center;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
.title .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title .image img {
|
||||
height: 30vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 60px;
|
||||
letter-spacing: .5px;
|
||||
margin-left: .1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-column:1;
|
||||
grid-row: 2;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
margin: 0 1.05em 2rem 1.05rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 51%, 49%);
|
||||
}
|
||||
|
||||
|
||||
#about p {
|
||||
font-size:1.105rem;
|
||||
font-weight: 300;
|
||||
padding: 1.75rem 1.25rem;
|
||||
line-height: 2;
|
||||
color: #333;
|
||||
letter-spacing: .01em;
|
||||
}
|
||||
|
||||
#about p span {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
#links {
|
||||
grid-column:1;
|
||||
grid-row:3;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
margin-top: 1vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
#pi-link {
|
||||
display:grid;
|
||||
grid-template-rows: repeat(2, .7fr);
|
||||
padding-bottom: 1rem;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 100%, 50%);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
#pi-link .image {
|
||||
grid-row: 1;
|
||||
padding: 1.5em 0 1em 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#pi-link .image img {
|
||||
max-width: 80vw;
|
||||
}
|
||||
|
||||
#pi-link .description {
|
||||
grid-row: 2;
|
||||
padding:.25em 1em 1em 1em;
|
||||
}
|
||||
|
||||
#pi-link .description h3 {
|
||||
font-size: 2.65rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .04em;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#pi-link .description h3 span {
|
||||
color: hsl(160, 100%, 50%);
|
||||
}
|
||||
|
||||
#pi-link .description p {
|
||||
font-size: .95rem;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
#pi-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-row: 3;
|
||||
padding-top: .75rem;
|
||||
}
|
||||
|
||||
#pi-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: .01em solid #000;
|
||||
padding: .35em 1em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1.05em;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#pi-link .page-button a:active {
|
||||
border-color:hsl(160, 100%, 75%);
|
||||
}
|
||||
|
||||
#join-link {
|
||||
display:grid;
|
||||
grid-template-rows: .7fr .1fr;
|
||||
box-shadow: .01em .01em .01em .03em hsl(160, 51%, 49%);
|
||||
border-radius: 25px;
|
||||
height: 80vh;
|
||||
margin-top: 9.5vh;
|
||||
}
|
||||
|
||||
#join-link .image #plus {
|
||||
margin-top: .25em;
|
||||
font-size: 12em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
color: hsl(160, 51%, 49%);
|
||||
|
||||
}
|
||||
|
||||
#join-link .image a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#join-link .description {
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
|
||||
#join-link .description h3 {
|
||||
font-size: 3rem;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#join-link .description p {
|
||||
font-size: .95rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
padding-top: .75rem;
|
||||
}
|
||||
|
||||
#join-link .page-button{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#join-link .page-button a {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
padding: .35em 1em;
|
||||
border-radius: 27px;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
margin: .75em;
|
||||
text-transform: uppercase;
|
||||
transition: all ease .2s;
|
||||
}
|
||||
|
||||
#join-link .page-button a:active {
|
||||
border-color: hsl(160, 51%, 49%);
|
||||
}
|
||||
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top:.5rem;
|
||||
}
|
||||
|
||||
.description .additional {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app-link .image #icon-desktop {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,631 +0,0 @@
|
|||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:#333;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
color:rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(0, 255, 170);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color:rgb(0, 255, 170);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: #333;
|
||||
|
||||
}
|
||||
|
||||
.product .click {
|
||||
display: flex;
|
||||
margin: 1rem 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
margin: 0 1rem 0 0 !important;
|
||||
|
||||
}
|
||||
|
||||
.product .click button:active {
|
||||
opacity: 50%;
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
#insta {
|
||||
padding: 0;
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#gram {
|
||||
width: 5vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#you {
|
||||
padding: 0;
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#tube {
|
||||
width: 5vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .05em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
margin-right: .1em;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
letter-spacing: .04em;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-weight: 400;
|
||||
letter-spacing: .05em;
|
||||
color:hsl(160, 90%, 50%);
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 90vw;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.spider-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
display: grid;
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
display: grid;
|
||||
grid-template-rows: 15% 60% 25%;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.35rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .05em;
|
||||
line-height: 3rem;
|
||||
color: hsl(160, 90%, 50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.about p {
|
||||
grid-row: 2;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
letter-spacing: .03em;
|
||||
line-height: 4vh;
|
||||
padding: 1vh 2vw;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-row: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.about video {
|
||||
min-width: 35vw;
|
||||
height: auto;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: .05em;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 1rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 30vh;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
font-size: 1.65rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: .06em;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin: .5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.products p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
line-height: 4vh;
|
||||
font-weight: 300;
|
||||
letter-spacing: .02em;
|
||||
margin: .75rem;
|
||||
}
|
||||
|
||||
.product p a {
|
||||
color: rgb(62, 190, 147);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product p a:active {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 10vh;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
height: 5vh;
|
||||
padding: 0 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product .click button:active {
|
||||
opacity: 50%;
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 66vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
padding-left: 1vw;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .05em;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
padding: 0 0 3vh 0;
|
||||
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
margin-right: .05em;
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
line-height: 5rem;
|
||||
letter-spacing: .04em;
|
||||
justify-self: center;
|
||||
align-self: flex-start;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
font-weight: 400;
|
||||
letter-spacing: .06em;
|
||||
font-size: 1.65rem;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: flex-start;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 45vw;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.spider-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding: 2.5rem 0 2.5rem 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .05em;
|
||||
line-height: 3rem;
|
||||
color: hsl(160, 90%, 50%);
|
||||
margin: 3rem 0 2rem 1rem;
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0 0 1rem;
|
||||
float: left;
|
||||
font-size: 1.45rem;
|
||||
line-height: 2.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color: hsl(160, 90%, 50%);
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .03em;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.about video {
|
||||
max-width:70vw;
|
||||
height: auto;
|
||||
margin-top: 40vh;
|
||||
border: .02em solid #333;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding: 4rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: .05em;
|
||||
line-height: 3rem;
|
||||
color: hsl(160, 49%, 50%);
|
||||
margin: 1.5rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.product h5 {
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem 1rem 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: .5fr 1fr .5fr;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
max-height: 100vh;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row:1/4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
.product .image img {
|
||||
max-width: 30vw;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 3rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: .06em;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product h5 span{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0 5rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 5.5vh;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color:#fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.5rem;
|
||||
font-family:'lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product .click button:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
margin: 2rem !important;
|
||||
}
|
||||
|
||||
#gram {
|
||||
min-width: 4vw;
|
||||
}
|
||||
|
||||
#tube {
|
||||
min-width: 3vw;
|
||||
}
|
||||
|
||||
#gram:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(0, 255, 170);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
#tube:hover {
|
||||
opacity: 50%;
|
||||
background-color: rgb(0, 255, 170);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
img {
|
||||
width: 100vw;
|
||||
z-index: 0;
|
||||
grid-row: 1/25;
|
||||
grid-column: 1/25;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(24, 1fr);
|
||||
grid-template-rows: repeat(24, 1fr);
|
||||
}
|
||||
|
|
@ -1,615 +0,0 @@
|
|||
body {
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.global-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:#333;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 span{
|
||||
color:magenta;
|
||||
}
|
||||
.info p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color:magenta;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color:magenta;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
color: #333;
|
||||
|
||||
}
|
||||
|
||||
.product p a {
|
||||
text-decoration: none;
|
||||
color: magenta;
|
||||
}
|
||||
|
||||
.product p a:hover {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
.product p a:active {
|
||||
opacity: 50%;
|
||||
color:rgb(62, 190, 147)
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 7.5vh;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .04em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
margin: 0 1em;
|
||||
color: hsl(160, 51%, 50%);
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 300;
|
||||
line-height: 4.5vh;
|
||||
margin: .75rem 1rem 1rem 1rem;
|
||||
text-align: center;
|
||||
letter-spacing: .03em;
|
||||
padding: 0 2vw;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: hsl(160, 51%, 50%);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 60vw;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.culture-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: hsl(160, 51%, 50%);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .95fr 1fr;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
}
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: hsl(160, 51%, 50%);
|
||||
text-align: center;
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
.about p {
|
||||
font-weight: 300;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: .02em;
|
||||
line-height: 2.75rem;
|
||||
text-align: center;
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
#twelve {
|
||||
color: rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.about ul {
|
||||
list-style:none;
|
||||
padding: 0 2.5rem;
|
||||
}
|
||||
|
||||
.about ul li {
|
||||
font-weight: 300;
|
||||
line-height: 2.75rem;
|
||||
}
|
||||
|
||||
.about ul li span {
|
||||
color: rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
#second {
|
||||
box-shadow: .1em .1em .75em hsl(160, 51%, 50%);
|
||||
line-height: 2.25rem;
|
||||
padding: 1rem .75rem;
|
||||
}
|
||||
|
||||
.about img {
|
||||
max-width: 65vw;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .02em;
|
||||
line-height: 3rem;
|
||||
color: #333;
|
||||
margin: 1rem 0 1rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
max-height: 25vh;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: .05em;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
font-weight: 300;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #333;
|
||||
font-size: 1.25rem;
|
||||
font-family: 'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product .click button:active {
|
||||
opacity: 50%;
|
||||
border-color: hsl(160, 51%, 80%);
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 5vh;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 65vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: 55% 45%;
|
||||
grid-template-rows: 65% 35%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 5rem;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
padding-top: 10vh;
|
||||
padding-right: 6vw;
|
||||
color: rgb(62, 190, 147);
|
||||
font-size: 6.25rem;
|
||||
}
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: .05em;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(62, 190, 147);
|
||||
font-weight: 300;
|
||||
margin: 0 .3em;
|
||||
}
|
||||
|
||||
.info .image {
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: flex-start;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 35vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
.culture-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color:rgb(62, 190, 147);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding:2.5rem 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 20% 10% 70%;
|
||||
padding: 5vh 0 5vh 0;
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
font-size: 2.65rem;
|
||||
font-weight: 300;
|
||||
line-height: 4rem;
|
||||
color: rgb(62, 190, 147);
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin: 2vh 0;
|
||||
}
|
||||
|
||||
.about #first {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
letter-spacing: .04em;
|
||||
font-weight: 300;
|
||||
line-height: 1.5rem;
|
||||
margin: 5vh 0 4vh 0;
|
||||
}
|
||||
|
||||
#twelve {
|
||||
color: rgb(62, 190, 147);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.about ul {
|
||||
list-style:none;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding-left: 2vh;
|
||||
}
|
||||
|
||||
.about #second {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
grid-column: 2;
|
||||
grid-row: 1/4;
|
||||
font-size: 1.25rem;
|
||||
text-align: left;
|
||||
line-height: 3.5vh;
|
||||
box-shadow: 1em 1em 2em .75em hsl(160, 51%, 50%);
|
||||
padding: 25rem 1.5rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.about ul li {
|
||||
line-height: 3.5rem;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
.about ul li span {
|
||||
color: rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.about span {
|
||||
color: rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.about p {
|
||||
margin: 1rem 0 0 1rem;
|
||||
float: left;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.about .image {
|
||||
grid-column: 2;
|
||||
grid-row: 1/4;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 15vh 2vw 0 2vw;
|
||||
}
|
||||
|
||||
.about img {
|
||||
max-width: 32.5vw;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding: 2rem 4rem 8vh 4rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: #333;
|
||||
margin: 3rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.product h5 {
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-columns: .25fr 1fr;
|
||||
grid-template-rows: .25fr .5fr .25fr;
|
||||
box-shadow: 3px 3px 3px 3px #eee;
|
||||
border-radius: 25px;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.product .image {
|
||||
grid-column: 1;
|
||||
grid-row:1/4;
|
||||
padding: 3vh;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 4rem;
|
||||
}
|
||||
|
||||
.product .image img {
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
.product h5 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 3rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: .05em;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.product h5 span{
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product p {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0 2.5rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 5vh;
|
||||
}
|
||||
|
||||
.product .click {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 2.5rem 0;
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
padding: .75rem 1.5rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #333;
|
||||
font-size: 1.5rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.product .click button a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product .click button:hover {
|
||||
opacity: 50%;
|
||||
background-color: hsl(160, 51%, 50%);
|
||||
}
|
||||
|
||||
#app {
|
||||
margin-left: 10vh;
|
||||
}
|
||||
|
||||
#app:hover {
|
||||
opacity: 50%;
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,612 +0,0 @@
|
|||
.global-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display:grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
color:#333;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
color: rgb(0, 255, 170);
|
||||
}
|
||||
|
||||
.info p {
|
||||
color: black;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.info p span {
|
||||
color: rgb(0, 255, 170);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 25vh;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.about p span {
|
||||
color: rgb(0, 255, 170);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product p span{
|
||||
color:rgb(62, 190, 147);
|
||||
}
|
||||
|
||||
.product .click button {
|
||||
margin: 0 1rem 0 0 !important;
|
||||
|
||||
}
|
||||
|
||||
#insta {
|
||||
padding: 0;
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#gram {
|
||||
width: 5vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#you {
|
||||
padding: 0;
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#tube {
|
||||
width: 5vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width:480px) {
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 75vh;
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.info p {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
line-height: 2rem;
|
||||
margin: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
font-size: 2.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 4rem;
|
||||
padding: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
margin-left: 7vh;
|
||||
}
|
||||
|
||||
.image {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info img {
|
||||
min-width: 80vw ;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
.about-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: auto;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: .95fr 1fr;
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
}
|
||||
.strip .about {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.philo h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: .05em;
|
||||
text-align: center;
|
||||
line-height: 3rem;
|
||||
color: #333;
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
.philo h3 span {
|
||||
color: hsl(160, 90%, 50%);
|
||||
}
|
||||
|
||||
.philo p {
|
||||
line-height: 3.5vh;
|
||||
font-weight: 300;
|
||||
letter-spacing: .02em;
|
||||
margin: 1.75rem .75rem 1rem .75rem;
|
||||
}
|
||||
|
||||
.philo img {
|
||||
max-width:70vw;
|
||||
height: auto;
|
||||
padding: 1rem 0 2rem 0;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: .05em;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 1rem 0 1rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 25vh;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.products h5 {
|
||||
color: black;
|
||||
text-shadow: 1.5px 3px rgb(62, 190, 147);
|
||||
font-size: 1.5rem;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
font-weight: 100;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: .75rem;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 1fr .5fr 1fr 1fr;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.social h5 {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.social .blog {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social .blog #blog {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.social .instagram {
|
||||
grid-column: 1/3;
|
||||
grid-row: 3;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#gram {
|
||||
min-width: 15vw;
|
||||
}
|
||||
|
||||
.social .instagram #account {
|
||||
font-size: .75rem;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.social .youtube {
|
||||
grid-column: 1/3;
|
||||
grid-row: 4;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#tube {
|
||||
min-width: 10vw;
|
||||
}
|
||||
|
||||
|
||||
.social .youtube #account {
|
||||
font-size: .75rem;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.social button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
margin-left: .25rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.social button a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.social button:active {
|
||||
opacity: 50%;
|
||||
background-color: hsl(160, 100%, 80%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#desktop {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#helper {
|
||||
width: 45vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
|
||||
.page-wrapper {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"info"
|
||||
"page-content";
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width:100%;
|
||||
height: 65vh;
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
font-size: 6rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: .04em;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-self: flex-end;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
}
|
||||
|
||||
.info h1 span {
|
||||
margin: 0 .095em;
|
||||
}
|
||||
|
||||
.info p {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 300;
|
||||
text-align: left;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: .03em;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
.info img {
|
||||
width: 60vh;
|
||||
height: auto;
|
||||
grid-column: 2;
|
||||
grid-row: 1/3;
|
||||
display:flex;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-left: 4.5rem;
|
||||
margin-top: 20vh;
|
||||
}
|
||||
|
||||
|
||||
.about-container {
|
||||
width: 100%;
|
||||
grid-area: page-content;
|
||||
padding:2rem;
|
||||
overflow: hidden;
|
||||
background-color: rgb(0, 255, 170);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strip {
|
||||
padding: 0 0 0 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.philo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: .2fr 1fr;
|
||||
padding: 0 0 5vh 0;
|
||||
}
|
||||
|
||||
.philo h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 3rem;
|
||||
color: #333;
|
||||
letter-spacing: 0.4rem;
|
||||
margin: 5rem 0 2rem 0;
|
||||
padding-left: 2vw;
|
||||
}
|
||||
|
||||
.philo span {
|
||||
color: hsl(160, 90%, 50%);
|
||||
}
|
||||
|
||||
.philo p {
|
||||
display: flex;
|
||||
margin: 1rem 0 0 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.philo .image {
|
||||
grid-column: 2;
|
||||
grid-row:1/3;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.philo img {
|
||||
max-width: 35vw;
|
||||
height: auto;
|
||||
margin-top: 15vh;
|
||||
}
|
||||
|
||||
#partners {
|
||||
width: 65vh;
|
||||
}
|
||||
|
||||
#helper {
|
||||
width: 65vh;
|
||||
}
|
||||
|
||||
.strip2 {
|
||||
padding:.75rem .75rem 5rem 2.5rem;
|
||||
background-color: white;
|
||||
border-radius: 25px;
|
||||
z-index: 10000;
|
||||
margin-top: 3vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
#heading2 {
|
||||
color: #333;
|
||||
grid-row: 1;
|
||||
grid-column: 1/3;
|
||||
padding-left: 2vw;
|
||||
}
|
||||
|
||||
.products h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: .05em;
|
||||
line-height: 3rem;
|
||||
color: rgb(62, 190, 147);
|
||||
margin: 2.5rem 0 3rem 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.products img {
|
||||
width: 45vh;
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
|
||||
.products p {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 1fr .5fr 1fr 1fr;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 1px 1px #999;
|
||||
border-radius: 25px;
|
||||
padding: 1rem;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.social h5 {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1;
|
||||
justify-self: center;
|
||||
font-size: 5vh;
|
||||
font-weight: 300;
|
||||
letter-spacing: .04em;
|
||||
font-family:'IBM Plex Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
||||
.social .blog {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social .blog #blog {
|
||||
margin: 0;
|
||||
width: 13.5vw;
|
||||
height: 5.5vh;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.social .instagram {
|
||||
grid-column: 1/3;
|
||||
grid-row: 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#gram {
|
||||
min-width: 6.5vw;
|
||||
margin-right: 5vw;
|
||||
}
|
||||
|
||||
.social .instagram #account {
|
||||
font-size: 1.75rem;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.social .youtube {
|
||||
grid-column: 1/3;
|
||||
grid-row: 4;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#tube {
|
||||
min-width: 5.5vw;
|
||||
margin-right: 5vw;
|
||||
}
|
||||
|
||||
|
||||
.social .youtube #account {
|
||||
font-size: 1.75rem;
|
||||
align-self: center;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.social button {
|
||||
padding: .5rem 1.25rem;
|
||||
background-color: #fff;
|
||||
border: .01em solid #000;
|
||||
font-size: 1.25rem;
|
||||
font-family:'Lato', sans-serif;
|
||||
line-height: 1rem;
|
||||
border-radius: 25px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.social button a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.social button:hover {
|
||||
opacity: 50%;
|
||||
background-color: hsl(160, 100%, 80%);
|
||||
}
|
||||
}
|
||||
|
|
@ -52,10 +52,14 @@ document.getElementById("chevron_3").addEventListener("click", function menu() {
|
|||
|
||||
document.getElementById("b_1").addEventListener("click", function menu() {
|
||||
var x= document.getElementById("c_1");
|
||||
let hemp = document.getElementById("hemp");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex";}
|
||||
x.style.display = "flex";
|
||||
hemp.style.zIndex = "9";
|
||||
}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
hemp.style.zIndex = "0";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -64,10 +68,14 @@ document.getElementById("b_1").addEventListener("click", function menu() {
|
|||
|
||||
document.getElementById("b_2").addEventListener("click", function menu() {
|
||||
var x= document.getElementById("c_2");
|
||||
let permapp = document.getElementById("permapp");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex";}
|
||||
x.style.display = "flex";
|
||||
permapp.style.zIndex = "9";
|
||||
}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
permapp.style.zIndex = "0";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -76,10 +84,14 @@ document.getElementById("b_2").addEventListener("click", function menu() {
|
|||
|
||||
document.getElementById("b_3").addEventListener("click", function menu() {
|
||||
var x= document.getElementById("c_3");
|
||||
let spider = document.getElementById("spider");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex";}
|
||||
x.style.display = "flex";
|
||||
spider.style.zIndex = "9";
|
||||
}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
spider.style.zIndex = "0";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -88,10 +100,14 @@ document.getElementById("b_3").addEventListener("click", function menu() {
|
|||
|
||||
document.getElementById("b_4").addEventListener("click", function menu() {
|
||||
var x= document.getElementById("c_4");
|
||||
let cube = document.getElementById("cube");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex";}
|
||||
x.style.display = "flex";
|
||||
cube.style.zIndex = "9";
|
||||
}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
cube.style.zIndex = "0";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -100,10 +116,15 @@ document.getElementById("b_4").addEventListener("click", function menu() {
|
|||
|
||||
document.getElementById("b_5").addEventListener("click", function menu() {
|
||||
var x= document.getElementById("c_5");
|
||||
let offgrid = document.getElementById("offgrid");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex";}
|
||||
x.style.display = "flex";
|
||||
offgrid.style.zIndex = "9";
|
||||
}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
offgrid.style.zIndex = "0";
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -112,10 +133,14 @@ document.getElementById("b_5").addEventListener("click", function menu() {
|
|||
|
||||
document.getElementById("b_6").addEventListener("click", function menu() {
|
||||
var x= document.getElementById("c_6");
|
||||
let cyber = document.getElementById("cyber");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex";}
|
||||
x.style.display = "flex";
|
||||
cyber.style.zIndex = "9";
|
||||
}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
cyber.style.zIndex = "0";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -124,10 +149,14 @@ document.getElementById("b_6").addEventListener("click", function menu() {
|
|||
|
||||
document.getElementById("b_7").addEventListener("click", function menu() {
|
||||
var x= document.getElementById("c_7");
|
||||
let machina = document.getElementById("machina");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex";}
|
||||
x.style.display = "flex";
|
||||
machina.style.zIndex = "9";
|
||||
}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
machina.style.zIndex = "0";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -136,10 +165,14 @@ document.getElementById("b_7").addEventListener("click", function menu() {
|
|||
|
||||
document.getElementById("b_8").addEventListener("click", function menu() {
|
||||
var x= document.getElementById("c_8");
|
||||
let miner = document.getElementById("miner");
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "flex";}
|
||||
x.style.display = "flex";
|
||||
miner.style.zIndex = "9";
|
||||
}
|
||||
else {
|
||||
x.style.display ="none";
|
||||
miner.style.zIndex = "0";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<a>i</a>
|
||||
</button>
|
||||
<div class ="sub_container" id="c_4">
|
||||
<p> Die Spinne braucht den <b><a href="/cube">Kaos Cube</a></b>.<br> Der Cube spannt ein verschlüsseltes Netz der Privatsphäre. Er rechnet Modelle für die Spinne dezentral aus.</p>
|
||||
<p> Die Spinne braucht den <b><a href="/cube">Kaos Cube</a></b><br> Der Cube spannt ein verschlüsseltes Netz der Privatsphäre. Er rechnet Modelle für die Spinne dezentral aus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="link" id="offgrid">
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<a>i</a>
|
||||
</button>
|
||||
<div class ="sub_container" id="c_5">
|
||||
<p> Die Systeme der individuellen Automation brauchen Energie. <br>Mit Recycling, Dezentralität, Einfachheit und Erneuerbarkeit erzeugen wir sie und gehen <b><a href="/offgrid">offgrid.</a></b>.</p>
|
||||
<p> Die Systeme der individuellen Automation brauchen Energie. <br>Mit Recycling, Dezentralität, Einfachheit und Erneuerbarkeit erzeugen wir sie und gehen <b><a href="/offgrid">offgrid.</a></b></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="link" id="cyber">
|
||||
|
|
|
|||
Loading…
Reference in a new issue