2019-03-24 05:32:59 +00:00
|
|
|
* {
|
|
|
|
--primary: #412554;
|
|
|
|
--secondary: #008B52;
|
|
|
|
--highlight: #FFE4A8;
|
|
|
|
padding: 0; margin: 0;
|
|
|
|
scroll-behavior: smooth;
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
.more-to-come {
|
|
|
|
background-color: var(--secondary);
|
2019-03-25 04:50:27 +00:00
|
|
|
min-height: 100px;
|
2018-03-03 21:36:26 +00:00
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
body {
|
|
|
|
font-family: sans-serif;
|
|
|
|
background-color: #454545;
|
|
|
|
color: #f2f2f2;
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
2019-03-25 04:50:27 +00:00
|
|
|
.profile-image {
|
|
|
|
width: 100px;
|
|
|
|
height: 100px;
|
|
|
|
border-radius: 50%;
|
|
|
|
filter: drop-shadow(0 0 4px black);
|
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
header {
|
|
|
|
color: #f2f2f2;
|
|
|
|
height: 100vh;
|
|
|
|
background-color: var(--primary);
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
flex-direction: column;
|
2018-03-03 21:36:26 +00:00
|
|
|
}
|
|
|
|
|
2019-03-24 05:32:59 +00:00
|
|
|
header small {
|
|
|
|
font-size: 16px;
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
.check-this-out h2, .check-this-out small {
|
|
|
|
display: block;
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
.check-this-out small {
|
|
|
|
color: var(--highlight);
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
.check-this-out {
|
|
|
|
text-align: center;
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
|
|
|
|
2019-03-24 05:32:59 +00:00
|
|
|
main {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(4, 1fr);
|
2018-03-03 21:36:26 +00:00
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
section {
|
|
|
|
position: relative;
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
section span {
|
2019-03-25 04:50:27 +00:00
|
|
|
padding: 10px 0;
|
2018-03-03 19:46:46 +00:00
|
|
|
text-align: center;
|
2019-03-25 04:50:27 +00:00
|
|
|
bottom: 0;
|
2019-03-24 05:32:59 +00:00
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
position: absolute;
|
2019-03-25 04:50:27 +00:00
|
|
|
background-color: rgba(0,0,0,0.8);
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
section small {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.scroll {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 10%;
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
2019-03-24 05:32:59 +00:00
|
|
|
color: var(--highlight);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (max-width: 850px) {
|
|
|
|
main {
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 430px) {
|
|
|
|
main {
|
|
|
|
display: block;
|
|
|
|
}
|
2018-03-03 19:46:46 +00:00
|
|
|
}
|
2019-03-24 05:32:59 +00:00
|
|
|
@media only screen and (min-width: 1921px) {
|
|
|
|
main {
|
|
|
|
grid-template-columns: repeat(6, 1fr);
|
|
|
|
}
|
|
|
|
}
|