You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
2.6 KiB
180 lines
2.6 KiB
* {
|
|
font-family: Montserrat, Ubuntu, Lucida Grande, Helvetica Neue, DejaVu Sans, FreeSans, Liberation Sans, Droid Sans, sans;
|
|
}
|
|
|
|
header {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 10 vh;
|
|
background-color: deeppink;
|
|
margin-bottom: 1vh;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 150%;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 120%;
|
|
}
|
|
|
|
p {
|
|
font-size: 75%;
|
|
}
|
|
|
|
footer{
|
|
color: darkgray;
|
|
font-size: 3vw;
|
|
}
|
|
|
|
|
|
.banner {
|
|
background-image: url("static/tresorImAll.webp");
|
|
width: 100%;
|
|
height: 90vh;
|
|
background-size: cover;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.withinBanner {
|
|
display:inline-block;
|
|
}
|
|
|
|
.linkContainer {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.pLink {
|
|
font-size: 4vh;
|
|
color: white;
|
|
}
|
|
|
|
.bannerHeader {
|
|
font-size: 9vh;
|
|
color: black;
|
|
}
|
|
|
|
.bannerSubtext {
|
|
font-size: 6vh;
|
|
color: black;
|
|
}
|
|
|
|
.glow {
|
|
color: #fff;
|
|
text-align: center;
|
|
animation: glow 1s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@-webkit-keyframes glow {
|
|
from {
|
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
|
|
}
|
|
|
|
to {
|
|
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
[class*="bannerHeader"] {
|
|
font-size: 7vh;
|
|
color: #fff;
|
|
}
|
|
.bannerSubtext {
|
|
font-size: 4vh;
|
|
color: #fff;
|
|
}
|
|
[class*="infoImgDiv"] {
|
|
grid-row-start: 1;
|
|
grid-row-end: 1;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
display: flex;
|
|
}
|
|
[class*="infoDiv"] {
|
|
grid-row-start: 2;
|
|
grid-row-end: 2;
|
|
}
|
|
[class*="infoContainer"] {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
}
|
|
[class*="infoImg"] {
|
|
width: 60vw;
|
|
grid-row-start: 1;
|
|
}
|
|
.linkContainer {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
.info {
|
|
font-size: 6vw;
|
|
}
|
|
.infoHeader {
|
|
font-size: 9vw;
|
|
}
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
}
|
|
[class*="model"] {
|
|
height: 40vh;
|
|
width: 90vw;
|
|
}
|
|
[class*="model1"] {
|
|
height: 40vh;
|
|
width: 90vw;
|
|
}
|
|
}
|
|
|
|
.infoImg {
|
|
width: 30vw;
|
|
|
|
.infoContainer {
|
|
margin-left: 10vw;
|
|
margin-right: 10vw;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
}
|
|
|
|
.infoImgDiv {
|
|
width: 30vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.infoDiv {
|
|
display: grid;
|
|
width: 50vw;
|
|
text-align: justify;
|
|
justify-content: center
|
|
}
|
|
|
|
.info {
|
|
font-size: 2vw;
|
|
}
|
|
|
|
.infoHeader {
|
|
font-size: 3vw;
|
|
margin-top: 5vw;
|
|
margin-bottom: 0vw;
|
|
color: deeppink;
|
|
}
|
|
|
|
.model0 {
|
|
width: 50vw;
|
|
height: 100vh;
|
|
}
|
|
.model1 {
|
|
width: 50vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.grid_container {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
}
|