diff --git a/img/ControlA-old.jpg b/img/ControlA-old.jpg new file mode 100644 index 0000000..905e6d4 Binary files /dev/null and b/img/ControlA-old.jpg differ diff --git a/img/ControlA.jpg b/img/ControlA.jpg index 905e6d4..bb9104c 100644 Binary files a/img/ControlA.jpg and b/img/ControlA.jpg differ diff --git a/img/LiveMock.jpg b/img/LiveMock.jpg new file mode 100644 index 0000000..4da66b7 Binary files /dev/null and b/img/LiveMock.jpg differ diff --git a/img/RoomMock.jpg b/img/RoomMock.jpg new file mode 100644 index 0000000..60ea153 Binary files /dev/null and b/img/RoomMock.jpg differ diff --git a/index.html b/index.html index 47e1ce4..889b512 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@ rel="stylesheet" type="text/css" /> +
@@ -56,8 +57,8 @@
-
-

+

+

Located in the blooming Scotts Addition neighborhood of Richmond, Virginia, The Bakery is within minutes of all the city has to offer. This tasty cornerstone is the collaborative effort of Open Your Ears @@ -67,48 +68,70 @@

Can you smell what's cookin'?

-
- - Studio A -
Studio A
+
+ +
+ Studio A +
+ +
Studio
 - - Studio B -
Studio B
+ +
+ Studio B +
+ +
Amenities
-
+
+ +

Ready to get cooking?

+

+ Contact us for a free consultation and site visit! +

+ Contact Us +
+
The Backery Seal -
- - - - - - - - - - - - - - - +

1710 Altamont Ave. 23230

+
+
+ + + + + + + + + + + + + + + +
+
-

The Bakery ©

- diff --git a/index.js b/index.js index 40c7899..a9c3659 100644 --- a/index.js +++ b/index.js @@ -30,8 +30,6 @@ function listHover(o) { .closest(".hero__nav") .querySelectorAll(".hero__nav-link"); - console.log(link); - siblings.forEach((el) => { if (el !== link) el.style.opacity = o; }); @@ -42,24 +40,19 @@ function listHover(o) { NAV.addEventListener("mouseover", listHover(0.5)); NAV.addEventListener("mouseout", listHover(1)); -// const handleHover = function (o) { -// return function (e) { -// if (e.target.classList.contains("nav__link")) { -// const link = e.target; -// const siblings = link.closest(".nav").querySelectorAll(".nav__link"); -// const logo = link.closest(".nav").querySelector("img"); - -// siblings.forEach((el) => { -// if (el !== link) el.style.opacity = o; -// }); +// TODO: Fix dis ↓↓↓ +function textSlide(entries) { + const [entry] = entries; + console.log(entry); + entry.target.classList.remove("reveal"); +} -// logo.style.opacity = o; -// } -// }; -// }; +const aboutObserver = new IntersectionObserver(textSlide, { + root: null, + threshold: 1, +}); -// nav.addEventListener("mouseover", handleHover(0.5)); -// nav.addEventListener("mouseout", handleHover(1)); +aboutObserver.observe(document.querySelector(".content__text")); var rot = 360; @@ -69,8 +62,3 @@ SEAL.addEventListener("click", function () { console.log(rot); console.log(SEAL.style); }); - -// window.addEventListener("scroll", function () { -// const distance = window.scrollY; -// HERO.style.transform = `translateY(${distance * 1}px)`; -// }); diff --git a/pages/404.html b/pages/404.html new file mode 100644 index 0000000..e69de29 diff --git a/styles/main.scss b/styles/main.scss index 5f54466..92acc64 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -46,6 +46,11 @@ html { font-size: 62.5%; } +a { + color: var(--white-light); + font-family: "Archivo Black", sans-serif; +} + body { font-size: 1rem; overflow-x: hidden; @@ -55,10 +60,25 @@ header { position: relative; } +h2 { + font-family: "Archivo Black", sans-serif; + color: var(--burgandy-dark); +} + .hidden { display: none; } +.reveal { + // opacity: 0; + position: relative; + transform: translateY(8rem); +} + +.img-wrapper { + overflow: hidden; +} + .rotate { transform: rotate(180deg); } @@ -74,6 +94,32 @@ header { z-index: 5; } +.btn { + border: none; + position: relative; + transform: translate(0); + top: auto; + left: auto; + + margin: 2.5rem 20%; + padding: 1rem; + background-color: var(--burgandy); + border-radius: 1rem; + + font-size: 3rem; + + &:hover { + background-color: var(--burgandy-dark); + } + + @include respond(tablet) { + } +} + +.section { + padding-top: 5rem; +} + // HERO SECTION .hero { @@ -84,8 +130,9 @@ header { background-image: linear-gradient( to bottom, - rgba(161, 44, 11, 0.8), - hsla(240, 4%, 17%, 0.724) + #4a1f1ae1, + hsla(240, 3%, 17%, 0.399), + rgba(0, 0, 0, 0) ), url(../img/ControlA.jpg); background-position: center center; @@ -129,7 +176,7 @@ header { &__nav { align-items: center; - height: 100%; + height: 100vh; position: absolute; top: 0; right: 0; @@ -195,75 +242,127 @@ header { } } -///////////////////////////// +/////////////////////////////////////////////// // Content .content { z-index: 1; display: flex; flex-direction: column; + transition: all 0.5s; + background-color: var(--white); + &__about { - font-size: 2.5rem; + font-size: 2rem; line-height: 4rem; text-align: center; font-family: "Open Sans", sans-serif; font-weight: 400; - padding: 5rem 3rem; - background-color: var(--white); + // padding: 5rem 3rem; p { margin: auto; - max-width: 700px; + max-width: 800px; color: var(--burgandy-dark); - - &:not(:last-child) { - padding-bottom: 2rem; - } + padding: 0 2rem; } } - &__studios { + &__rooms { display: flex; + flex-direction: column; justify-content: space-evenly; - background-color: var(--burgandy); + + &-items { + display: flex; + } &-item { - flex: 0 0 25%; - margin: 5rem; - padding: 2rem 2rem 2rem; - background-color: var(--white); + // flex: 0 0 25%; + // margin: 5rem; + // padding: 2rem 2rem 2rem; + // background-color: var(--white); - border-radius: 1rem; + // border-radius: 1rem; text-decoration: none; + position: relative; + // transition: all 0.2s; - transition: all 0.2s; - - &:hover { - transition: all 0.2s; - transform: scale(1.1) rotate(5deg); - box-shadow: rgba(0, 0, 0, 0.8) 0px 7px 29px 0px; - } + // &:hover { + // transition: all 0.2s; + // transform: scale(1.1) rotate(5deg); + // box-shadow: rgba(0, 0, 0, 0.8) 0px 7px 29px 0px; + // } } &-title { - color: #333; - font-family: "braggadocio-regular", sans-serif; - - font-weight: 1000; + // font-weight: 1000; text-align: center; font-size: 5rem; - margin: 2rem 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + @include respond(tablet) { + // position: relative; + // transform: translate(0); + // top: auto; + // left: auto; + } } &-img { width: 100%; display: block; + filter: brightness(50%); + transition: filter 0.4s, transform 0.4s; + + &:hover { + filter: brightness(100%); + transform: scale(110%); + } + } + + @include respond(tablet) { + flex-direction: row; + + &-item { + &:hover { + transform: none; + } + } + + &-img { + width: 45vw; + } + } + } + + &__contact { + display: flex; + flex-direction: column; + align-items: center; + + font-size: 2rem; + line-height: 4rem; + text-align: center; + + font-family: "Open Sans", sans-serif; + + font-weight: 400; + + p { + margin: auto; + max-width: 700px; + color: rgb(15, 15, 15); } } &__footer { - background-color: var(--teal); + background-color: var(--teal-dark); + padding-top: 0; height: 40vh; font-size: 30rem; text-align: center; @@ -274,11 +373,20 @@ header { p { font-size: 3rem; - font-family: "Bebas Neue", sans-serif; + font-family: "Archivo Black", sans-serif; + color: var(--white); + } + + @include respond(tablet) { + flex-direction: row; } } } +.cake { + height: 15rem; +} + .seal { height: 15rem; background-color: white; @@ -308,6 +416,10 @@ header { } } +.email-link { + font-size: 3rem; +} + //////////////////////////// // MEDIA QUERIES diff --git a/styles/style.css b/styles/style.css index f8874a8..c61fc4d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -34,6 +34,11 @@ html { font-size: 62.5%; } +a { + color: var(--white-light); + font-family: "Archivo Black", sans-serif; +} + body { font-size: 1rem; overflow-x: hidden; @@ -43,10 +48,24 @@ header { position: relative; } +h2 { + font-family: "Archivo Black", sans-serif; + color: var(--burgandy-dark); +} + .hidden { display: none; } +.reveal { + position: relative; + transform: translateY(8rem); +} + +.img-wrapper { + overflow: hidden; +} + .rotate { transform: rotate(180deg); } @@ -62,12 +81,31 @@ header { z-index: 5; } +.btn { + border: none; + position: relative; + transform: translate(0); + top: auto; + left: auto; + margin: 2.5rem 20%; + padding: 1rem; + background-color: var(--burgandy); + border-radius: 1rem; + font-size: 3rem; +} +.btn:hover { + background-color: var(--burgandy-dark); +} +.section { + padding-top: 5rem; +} + .hero { display: flex; align-items: flex-start; height: 90vh; overflow: hidden; - background-image: linear-gradient(to bottom, rgba(161, 44, 11, 0.8), hsla(240deg, 4%, 17%, 0.724)), url(../img/ControlA.jpg); + background-image: linear-gradient(to bottom, rgba(74, 31, 26, 0.8823529412), hsla(240deg, 3%, 17%, 0.399), rgba(0, 0, 0, 0)), url(../img/ControlA.jpg); background-position: center center; background-size: cover; background-attachment: fixed; @@ -103,7 +141,7 @@ header { } .hero__nav { align-items: center; - height: 100%; + height: 100vh; position: absolute; top: 0; right: 0; @@ -165,57 +203,81 @@ header { z-index: 1; display: flex; flex-direction: column; + transition: all 0.5s; + background-color: var(--white); } .content__about { - font-size: 2.5rem; + font-size: 2rem; line-height: 4rem; text-align: center; font-family: "Open Sans", sans-serif; font-weight: 400; - padding: 5rem 3rem; - background-color: var(--white); } .content__about p { margin: auto; - max-width: 700px; + max-width: 800px; color: var(--burgandy-dark); + padding: 0 2rem; } -.content__about p:not(:last-child) { - padding-bottom: 2rem; -} -.content__studios { +.content__rooms { display: flex; + flex-direction: column; justify-content: space-evenly; - background-color: var(--burgandy); } -.content__studios-item { - flex: 0 0 25%; - margin: 5rem; - padding: 2rem 2rem 2rem; - background-color: var(--white); - border-radius: 1rem; - text-decoration: none; - transition: all 0.2s; +.content__rooms-items { + display: flex; } -.content__studios-item:hover { - transition: all 0.2s; - transform: scale(1.1) rotate(5deg); - box-shadow: rgba(0, 0, 0, 0.8) 0px 7px 29px 0px; +.content__rooms-item { + text-decoration: none; + position: relative; } -.content__studios-title { - color: #333; - font-family: "braggadocio-regular", sans-serif; - font-weight: 1000; +.content__rooms-title { text-align: center; font-size: 5rem; - margin: 2rem 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } -.content__studios-img { +.content__rooms-img { width: 100%; display: block; + filter: brightness(50%); + transition: filter 0.4s, transform 0.4s; +} +.content__rooms-img:hover { + filter: brightness(100%); + transform: scale(110%); +} +@media screen and (min-width: 800px) { + .content__rooms { + flex-direction: row; + } + .content__rooms-item:hover { + transform: none; + } + .content__rooms-img { + width: 45vw; + } +} +.content__contact { + display: flex; + flex-direction: column; + align-items: center; + font-size: 2rem; + line-height: 4rem; + text-align: center; + font-family: "Open Sans", sans-serif; + font-weight: 400; +} +.content__contact p { + margin: auto; + max-width: 700px; + color: rgb(15, 15, 15); } .content__footer { - background-color: var(--teal); + background-color: var(--teal-dark); + padding-top: 0; height: 40vh; font-size: 30rem; text-align: center; @@ -226,7 +288,17 @@ header { } .content__footer p { font-size: 3rem; - font-family: "Bebas Neue", sans-serif; + font-family: "Archivo Black", sans-serif; + color: var(--white); +} +@media screen and (min-width: 800px) { + .content__footer { + flex-direction: row; + } +} + +.cake { + height: 15rem; } .seal { @@ -255,6 +327,10 @@ header { fill: var(--white-highlight); } +.email-link { + font-size: 3rem; +} + .opened { transform: translateX(0); transition: transform 1s; diff --git a/styles/style.css.map b/styles/style.css.map index 2968eac..94016d0 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;;;AAeF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EAMA;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAhFA;EA0EF;IASI;;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAvGA;EA6FF;IAaI;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;;AAxHF;EAiHA;IAUI;IACA;IACA;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQR;EACE;EACA;;AACA;EACE;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EAEA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAcN;EACE;EACA","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;;;AAeF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAOJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EAEA;EAOA;EACA;EAGA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAxIA;EAkIF;IASI;;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AA/JA;EAqJF;IAaI;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;;AAhLF;EAyKA;IAUI;IACA;IACA;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGE;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;EAEA;;AAGA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EAOE;EACA;;AAUF;EAEE;EACA;EACA;EACA;EACA;EACA;;AAUF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAxSJ;EAoPF;IAyDI;;EAGE;IACE;;EAIJ;IACE;;;AAKN;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AA7VF;EA+UF;IAkBI;;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;;;AAYF;EACE;EACA","file":"style.css"} \ No newline at end of file