+ People Don't take Trips, Trips Take People
+-John Steinbeck
+diff --git a/assets/styles/components/cta.css b/assets/styles/components/cta.css new file mode 100644 index 00000000..da22cd14 --- /dev/null +++ b/assets/styles/components/cta.css @@ -0,0 +1,92 @@ +@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,500;0,600;1,600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script:wght@700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Vidaloka&display=swap'); +.home{ + min-height: 100vh; + display: flex; + align-items: center; + flex-flow: column; + position: relative; + background-size:cover; + background-position: center; + border-radius: 12px; + width: 100%; + z-index: 0; + +} + +.image-bg { + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + object-fit: cover; + object-position: center; + z-index: -1; +} + +.home .content { + text-align: center; +} + +.home .content{ + text-align: center; +} + +.home .content h3{ + font-weight: 400; + font-size: 100px; + margin-top: 100px; + font-family: 'Vidaloka', serif; + color: rgb(255, 255, 255); +} + +.home .content p{ + margin-top: 10px; + font-size: 30px; + font-weight: bolder; + font-style: italic; + color: rgb(255, 255, 255); +} + +.home .content .media img{ + position: relative; + width: 100%; +} + +.btn { + display: inline-block; + margin-top: 150px; + cursor: pointer; + padding: 10px 20px; + background-color: #FF0000; + color: #FFFFFF; + text-decoration: none; + border-radius: 5px; + } + + .cta-button:hover { + background-color: #FF3333; + } + + .home .p2{ + margin-top: 130px; + font-size: 35px; + font-family: 'Dancing Script', cursive; + font-weight: bolder; + font-style: italic; + color: rgb(250, 251, 252); + } + + .home .p3{ + margin-top: 10px; + font-size: 35px; + font-family: 'Dancing Script', cursive; + font-weight: bolder; + font-style: italic; + color: rgb(250, 251, 252); + } + + \ No newline at end of file diff --git a/assets/styles/components/info-box.scss b/assets/styles/components/info-box.scss index 39090240..91401f52 100644 --- a/assets/styles/components/info-box.scss +++ b/assets/styles/components/info-box.scss @@ -20,5 +20,6 @@ &-paragraph { @include typography('text md'); } + } } diff --git a/assets/styles/components/listing.css b/assets/styles/components/listing.css new file mode 100644 index 00000000..309b8c86 --- /dev/null +++ b/assets/styles/components/listing.css @@ -0,0 +1,143 @@ +@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,500;0,600;1,600&display=swap'); + +.listing__inner { + display: flex; + flex-wrap: wrap; + margin-top: 80px; + margin-bottom: 100px; + margin-left: 150px; + gap: 20px; +} + +.listing__item.card { + padding: 0px; + border-radius: 12px; + border: 1px solid rgb(238, 236, 233); + width: calc(33.33% - 62px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + background-color: #35333346; +} + +.listing__item.card:hover { + transform: scale(1.05); +} + +.card__media { + position: relative; + width: 100%; + height: 475px; + border-radius: 15px; + overflow: hidden; +} + +.card__media-image { + position: absolute; + border-radius: 15px; + bottom: 0px; + left: 0px; + right: 0px; + width: 100%; + height: 100%; + object-fit: cover; +} +.listing__item.card:hover .card__media-image { + filter: blur(8px); +} + +.card__overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; + background-color: rgba(0, 0, 0, 0.7); + color: #fff; + opacity: 0; + transition: opacity 0.3s ease; + z-index: 1; +} + +.listing__item.card:hover .card__overlay { + opacity: 1; +} + +.card__play-icon { + color: #0c0707; + font-size: 10px; +} + +.card__body { + position:absolute; + + top: 35%; + left: 22%; + right: 10%; + bottom: 10%; + width: 60%; + height: 20%; + padding: 0px; + color: #fff; + opacity: 0; + transition: opacity 0.2s ease; + z-index: 2; + text-decoration: none !important; + +} + +.card__body-label { + font-weight: bolder; + position: absolute; + bottom: 10px; + left: 10px; + font-size: 25px; + font-weight: bold; + color: #fff; + z-index: 2; + font-family: 'Raleway', sans-serif; + text-decoration: none !important; +} +.card__body-location { + font-weight: bolder; + position: absolute; + bottom: 10px; + right: 10px; + font-size: 35px; + font-weight: bold; + color: #fdfbfb; + z-index: 2; + font-family: 'Raleway', sans-serif; + font-style: italic; + line-height: 125%; + text-decoration: none !important; +} + +.card__body-title +{ + font-weight: bolder; + font-size: 30px; + top:50%; + left: 50%; + color: #fff; + font-family: 'Raleway', sans-serif; + display: none; + text-decoration: none !important; + font-style: italic; +} + +.listing__item.card:hover .card__body { + text-decoration: none !important; + opacity: 1; +} + +.listing__item.card:hover .card__body-title{ + /* top: 50%; + left: 50%; */ + left:5px; + display: block; + text-decoration: none !important; +} diff --git a/assets/styles/components/navbar.css b/assets/styles/components/navbar.css new file mode 100644 index 00000000..8af055aa --- /dev/null +++ b/assets/styles/components/navbar.css @@ -0,0 +1,44 @@ +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap'); + + + .home .content .btn1 { + position: absolute ; + top: 25px; + left: 70%; + cursor: pointer; + gap: 40px; + font-weight: bolder; + font-size: 18px; + color: rgb(255, 255, 255); + text-decoration: none !important; + } + .home .content .btn2 { + position: absolute ; + top: 25px; + left: 77%; + cursor: pointer; + font-weight: bolder; + font-size: 18px; + color: rgb(255, 255, 255); + text-decoration: none !important; + } + .home .content .btn3 { + position: absolute ; + top: 25px; + left: 85%; + cursor: pointer; + font-weight: bolder; + font-size: 18px; + color: rgb(255, 255, 255); + + + text-decoration: none !important; + } +.home .content .btn1, +.home .content .btn2, +.home .content .btn3 { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + + \ No newline at end of file diff --git a/assets/styles/index.scss b/assets/styles/index.scss index 4a20f6b2..4e0acb85 100644 --- a/assets/styles/index.scss +++ b/assets/styles/index.scss @@ -6,4 +6,7 @@ @import "components/info-box.scss"; +@import "components/listing.css"; +@import "components/cta.css"; +@import "components/navbar.css"; diff --git a/index.html b/index.html index c344cc04..1014af53 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
+ People Don't take Trips, Trips Take People
+-John Steinbeck
+