You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
4.8 KiB
CSS
305 lines
4.8 KiB
CSS
:root {
|
|
--green: #81d742;
|
|
--black: #212529;
|
|
--container: 1200px;
|
|
--container-lg: 1500px;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Montserrat;
|
|
src: url(fonts/Montserrat-VariableFont_wght.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Montserrat-italic;
|
|
src: url(fonts/Montserrat-Italic-VariableFont_wght.ttf);
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: VG5000;
|
|
src: url(fonts/VG5000-Regular.otf);
|
|
}
|
|
|
|
* {
|
|
/* overflow-x: hidden; */
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
font-family: Montserrat;
|
|
color: var(--black);
|
|
margin: 0 0;
|
|
padding: 0 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.nav {
|
|
width: 100%;
|
|
z-index: 9001;
|
|
background-color: var(--black);
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 0;
|
|
padding: .5rem;
|
|
|
|
}
|
|
.nav > * {
|
|
margin: 0 0;
|
|
}
|
|
.nav a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
letter-spacing: 0px;
|
|
transition: .2s linear;
|
|
}
|
|
|
|
.nav a:hover {
|
|
letter-spacing: 12px;
|
|
}
|
|
|
|
.nav>h3 {
|
|
font-size: 1.25em;
|
|
color: var(--green);
|
|
font-family: VG5000;
|
|
width: fit-content;
|
|
}
|
|
|
|
.menu {
|
|
display: none;
|
|
width: fit-content;
|
|
margin: auto;
|
|
color: white;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
.landingimage {
|
|
background: url("images/postcard.jpg");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 100%;
|
|
height: 600px;
|
|
}
|
|
|
|
.imagedescription {
|
|
display: none;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: VG5000;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(1.5rem, 1rem + 9vw, 6rem);
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2.5rem;
|
|
margin: 0 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.index {
|
|
background: var(--green);
|
|
width: 100%;
|
|
}
|
|
|
|
.index>* {
|
|
padding: 2%;
|
|
max-width: 70ch;
|
|
text-align: center;
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
|
|
.tours {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-top: 50px;
|
|
max-width: 2000px;
|
|
gap: 2rem;
|
|
}
|
|
.tourcard {
|
|
position: relative;
|
|
flex-basis: 50%;
|
|
max-width: 30%;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 801px) {
|
|
.tourcard {
|
|
flex-basis: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.tourcard>img {
|
|
width: 100%;
|
|
}
|
|
|
|
.tour-text {
|
|
position: absolute;
|
|
width: 80%;
|
|
bottom: 8%;
|
|
left: 8%;
|
|
padding: 2%;
|
|
font-family: Montserrat;
|
|
font-size: .7em;
|
|
background: white;
|
|
}
|
|
|
|
.reviews {
|
|
width: var(--container-lg);
|
|
text-wrap: wrap;
|
|
}
|
|
|
|
.review>p {
|
|
margin-left: 2%;
|
|
}
|
|
|
|
.review:nth-child(odd) {
|
|
background-color: #ececec;
|
|
}
|
|
|
|
@media only screen and (min-width: 801px) {
|
|
.nav {
|
|
width: 90vw;
|
|
max-width: var(--container-lg);
|
|
z-index: 9001;
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.nav>h3 {
|
|
color: var(--green);
|
|
font-family: VG5000;
|
|
}
|
|
|
|
.menu {
|
|
width: 80%;
|
|
display: flex;
|
|
color: white;
|
|
font-weight: lighter;
|
|
justify-content: space-evenly;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.imagedescription {
|
|
display: block;
|
|
background: rgba(5, 5, 5, 0.3);
|
|
position: relative;
|
|
top: 92%;
|
|
left: 2%;
|
|
padding: 4px;
|
|
width: fit-content;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
|
|
.container {
|
|
max-width: min(1200px, calc(100vw - 2rem));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
section {
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
@keyframes slide {
|
|
|
|
0%,
|
|
80% {
|
|
transform: translateX(200%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
|
|
footer.annoying {
|
|
animation-fill-mode: forwards;
|
|
position: fixed;
|
|
bottom: .5rem;
|
|
right: .5rem;
|
|
background-color: var(--green);
|
|
animation: slide 10s ease-in-out;
|
|
padding: .5rem;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.container--events {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr;
|
|
grid-gap: 2rem;
|
|
align-items: center;
|
|
max-width: var(--container-lg);
|
|
max-width: min(var(--container-lg), calc(100vw - 2rem));
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 801px) {
|
|
.container--events {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
|
|
.events {
|
|
display: flex;
|
|
overflow-x: scroll !important;
|
|
grid-auto-columns: 400px;
|
|
column-gap: 2rem;
|
|
padding: 0 0;
|
|
list-style: none;
|
|
}
|
|
.events .event {
|
|
overflow: hidden;
|
|
position: relative;
|
|
min-width: 300px;
|
|
}
|
|
.event img {
|
|
aspect-ratio: 3/4;
|
|
width: 100%;
|
|
transform: scale(1);
|
|
transition: .2s cubic-bezier(0.25, .5, 0.5, 1);
|
|
}
|
|
|
|
.event h3 {
|
|
background-color: white;
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
z-index: 2;
|
|
transition: .2s cubic-bezier(0.25, .5, 0.5, 1);
|
|
padding: .5rem;
|
|
}
|
|
|
|
.event:hover img {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.event:hover h3 {
|
|
background-color: var(--black);
|
|
color: white;
|
|
} |