diff --git a/README.md b/README.md index e10520a98f..90f0d98927 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,4 @@ # Miami landing page -- Implement [the landing page](https://www.figma.com/file/nHz8bflIwJaWP3P99vKTH5/miami_home_new?node-id=0%3A2) -- Follow this [video guide](https://www.youtube.com/watch?v=sq184jq9DV8&feature=youtu.be) and write your own implementation. - -## Instructions -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`) -4. Run `npm start`. -5. Open one more terminal window for the next steps -6. `git checkout -b develop` - to create new branch and switch on it -7. Write you code in `src` folder -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages` -10. `git add . && git commit -m 'solution'` to save your changes -11. `git push origin develop` - to send you code for PR -12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. -13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_miami/) -14. Copy `DEMO LINK` to the PR description - -> To update you PR repeat steps 7-11 - ---> [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) +- Stack: HTML5, SASS, JS +- Fully responsive layout was made by using CSS Grid and Flexbox +- You could check [DEMO](https://AlinaMatuschak.github.io/layout_miami/) diff --git a/src/images/cross.svg b/src/images/cross.svg new file mode 100644 index 0000000000..75c57fb3f7 --- /dev/null +++ b/src/images/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer.jpg b/src/images/footer.jpg index 487710899a..01fbc8bf76 100644 Binary files a/src/images/footer.jpg and b/src/images/footer.jpg differ diff --git a/src/images/header.jpg b/src/images/header.jpg index 96a0afa24b..70a8866716 100644 Binary files a/src/images/header.jpg and b/src/images/header.jpg differ diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 0000000000..b5ea4b25d0 --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/people/1.jpg b/src/images/people/1.jpg index 277d6a899c..cf8c3d235e 100644 Binary files a/src/images/people/1.jpg and b/src/images/people/1.jpg differ diff --git a/src/images/people/2.jpg b/src/images/people/2.jpg index 2efe8e9b4b..5495d408c1 100644 Binary files a/src/images/people/2.jpg and b/src/images/people/2.jpg differ diff --git a/src/images/people/3.jpg b/src/images/people/3.jpg index e5c782b364..f7438777c8 100644 Binary files a/src/images/people/3.jpg and b/src/images/people/3.jpg differ diff --git a/src/images/phone.svg b/src/images/phone.svg new file mode 100644 index 0000000000..ce3f027938 --- /dev/null +++ b/src/images/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg deleted file mode 100644 index 5e40be94d2..0000000000 Binary files a/src/images/photos/3.jpg and /dev/null differ diff --git a/src/images/photos/3.png b/src/images/photos/3.png new file mode 100644 index 0000000000..964de942ab Binary files /dev/null and b/src/images/photos/3.png differ diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg index aad06bff54..bd24b7dd99 100644 Binary files a/src/images/photos/5.jpg and b/src/images/photos/5.jpg differ diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg index 104ff18faa..e7b52cc5b3 100644 Binary files a/src/images/photos/6.jpg and b/src/images/photos/6.jpg differ diff --git a/src/index.html b/src/index.html index 6a16e1fc54..19a03b8cd3 100644 --- a/src/index.html +++ b/src/index.html @@ -5,9 +5,332 @@ Miami + - -

Miami

+ +
+ + + phone icon + + + + + +
+ +1 234 555-55-55 + call to order +
+ +

Miami Condo Kings

+ + +
+ +
+
+

Miami best
Real estate here

+
+

Over 50 years experience in love.

+

Mazel and VA Tsukkerman in his "Analysis of musical works." Pointillism, which originated in the music of the early twentieth century, microforms, found a distant historical.

+

The market leader in real estate since 2003. Awards Real Estate Company, 2010, 2011, 2013. More than 200 satisfied customers premium segment. We focus only on new buildings and high-level doskanalno know this area better than other specialists. Working directly with developers - so have more useful information about the profitable deals.

+

We will never be late!
Guaranteed secure transaction - 100%

+
+
+ +
+

Gallery

+ + + + + + + + +
+ +
+

Consultation

+ +
+
+

How long have you do yourself a gift?

+

The procedural change mezzo forte starts izoritmichesky pickup at these moments stop LA Mazel and VA Tsukkerman in his "Analysis of musical works." Pointillism, which originated in the music of the early twentieth century, microforms, found a distant historical.

+
+ +
+ + + + + + + +
+
+
+ +
+

Testimonials

+ +
+
+ Leslie Mckinney +

Leslie Mckinney

+ CEO +

Nice work, Certificates National Association of Realtors (USA)

+
+ +
+ Scarlett Hawkins +

Scarlett Hawkins

+ Senior Vice President +

My soul is illuminated by an unearthly joy, as these beautiful spring morning, which I enjoy with all my heart

+
+ +
+ Max Henry +

Max Henry

+ Chief Design Officer +

When my lovely valley of steam rises and half-day sun is above an impermeable

+
+
+
+ +
+

Contact us

+
+
+
+
+ Phone +

+1 234 5555-55-55

+
+
+ Email +

hello@miami.com

+
+
+
+ Address +

400 first ave. n. suite 700 Minneapolis, MN 55401

+
+
+ +
+ + + + + + + +
+
+
+
+ + diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 0000000000..8c97c382a7 --- /dev/null +++ b/src/styles/_reset.scss @@ -0,0 +1,28 @@ +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body, +h1, +h2, +h3, +h4 { + margin: 0; +} + +a { + text-decoration: none; +} + +ul { + padding: 0; +} + +input, +textarea { + border-width: 0; +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e2..213c2fda89 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,16 @@ -h1 { - @extend %h1; +h1, +h2, +h3, +h4, +h5, +button, +a { + @extend %fontBold; +} + +p, +span, +input, +textarea { + @extend %fontNormal; } diff --git a/src/styles/blocks/_about-us.scss b/src/styles/blocks/_about-us.scss new file mode 100644 index 0000000000..e1e8133efe --- /dev/null +++ b/src/styles/blocks/_about-us.scss @@ -0,0 +1,56 @@ +.about-us { + @include flexCentering; + align-items: start; + padding: 135px $block-hor-padding; + + &__slogan { + max-width: 780px; + margin-bottom: 48px; + margin-right: 15px; + font-size: 48px; + } + + &__emphasis { + font-weight: bold; + color: $main-color; + } + + &__inf { + max-width: 533px; + } + + &__title { + color: $main-color; + font-size: 24px; + } + + &__text { + margin-bottom: 24px; + font-size: 16px; + line-height: 1.9; + color: $text-dark; + } + + @media (max-width: 800px) { + flex-wrap: wrap; + padding: 80px $svp-hor-padding; + + &__slogan { + font-size: 36px; + margin-right: 0; + } + + &__title { + font-size: 23px; + } + + &__text { + font-size: 15px; + } + } + + @media (min-width: 1300px) { + width: 1260px; + margin: 0 auto; + } +} diff --git a/src/styles/blocks/_consult.scss b/src/styles/blocks/_consult.scss new file mode 100644 index 0000000000..5e2f82f8b3 --- /dev/null +++ b/src/styles/blocks/_consult.scss @@ -0,0 +1,54 @@ +.consult { + padding: $block-ver-padding $block-hor-padding; + + &__title { + margin-bottom: 125px; + text-align: center; + @include titleForSection; + } + + &__content { + @include flexCentering; + align-items: start; + } + + &__inf { + max-width: 412px; + padding-right: 20px; + margin-bottom: 16px; + } + + &__foreword { + max-width: 240px; + font-size: 24px; + line-height: 1.3; + color: $main-color; + } + + &__text { + font-size: 16px; + line-height: 1.7; + } + + @media (max-width: 960px) { + padding: $svp-block-padding; + + &__title { + margin-bottom: 50px; + } + + &__content { + flex-direction: column; + align-items: center; + } + + &__inf { + padding-right: 0; + } + } + + @media (min-width: 1300px) { + width: 1260px; + margin: 0 auto; + } +} diff --git a/src/styles/blocks/_contact-us.scss b/src/styles/blocks/_contact-us.scss new file mode 100644 index 0000000000..ae27dcb382 --- /dev/null +++ b/src/styles/blocks/_contact-us.scss @@ -0,0 +1,65 @@ +.contact-us { + padding: $block-ver-padding $block-hor-padding; + + &__title { + text-align: center; + margin-bottom: 125px; + @include titleForSection; + } + + &__content { + @include flexCentering; + align-items: start; + } + + &__contacts { + @include flexCentering; + width: 430px; + margin-bottom: 8px; + align-items: start; + } + + &__method { + max-width: 150px; + margin-bottom: 24px; + } + + &__hint { + margin-bottom: 8px; + color: $hint-color; + font-size: 14px; + } + + &__contact { + color: $text-dark; + font-size: 16px; + line-height: 1.8; + } + + @media (max-width: 960px) { + padding: $svp-block-padding; + + &__title { + margin-bottom: 53px; + } + + &__content { + flex-direction: column; + align-items: center; + } + + &__contacts { + flex-direction: column; + max-width: 280px; + } + + &__method { + max-width: 152px; + } + } + + @media (min-width: 1300px) { + width: 1260px; + margin: 0 auto; + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 0000000000..b1e045ca71 --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,24 @@ +.footer { + position: relative; + height: $footer-height; + @include backgroundImage("/images/footer.jpg"); + + &__logo-link { + @include positionCenteringHorizon; + bottom: 30px; + width: 115px; + } + + &__logo-img { + width: inherit; + } + + @media (max-width: 960px) { + height: 206px; + + &__logo-link { + bottom: 18px; + width: 77px; + } + } +} diff --git a/src/styles/blocks/_form.scss b/src/styles/blocks/_form.scss new file mode 100644 index 0000000000..604421fee8 --- /dev/null +++ b/src/styles/blocks/_form.scss @@ -0,0 +1,42 @@ +.form { + width: $form-width; + + &__input { + width: 100%; + height: $input-height; + margin-bottom: 16px; + padding-left: $input-padding-left; + font-size: 14px; + background-color: $input-background; + border-radius: $input-radius; + + &--big { + height: 144px; + padding: 17px; + } + + &::placeholder { + color: $hint-color; + } + } + + &__submit { + width: 100%; + height: $input-submit-height; + margin-top: 32px; + color: $text-light; + font-size: 16px; + background-color: $main-color; + border-radius: $input-radius; + box-shadow: $submit-shadow; + cursor: pointer; + @include hover( + background-color, + $submit-hover + ); + } + + @media (max-width: 960px) { + width: 280px; + } +} diff --git a/src/styles/blocks/_gallery.scss b/src/styles/blocks/_gallery.scss new file mode 100644 index 0000000000..b818755025 --- /dev/null +++ b/src/styles/blocks/_gallery.scss @@ -0,0 +1,102 @@ +.gallery { + padding: 50px $block-hor-padding; + text-align: center; + + &__title { + margin-bottom: 40px; + @include titleForSection; + } + + &__crown { + margin-bottom: 42px; + } + + &__article { + text-align: left; + margin-bottom: 40px; + } + + &__line { + display: grid; + gap: 20px; + margin-bottom: 24px; + + &--first { + grid-template-columns: 2fr 1fr; + } + + &--second { + grid-template-columns: repeat(2, 1fr); + } + + &--third { + grid-template-columns: 1fr 2fr; + } + } + + &__img { + height: 256px; + width: 100%; + border-radius: $photo-radius; + object-fit: cover; + @include hover(transform, scale(1.05)); + } + + &__address { + font-size: 16px; + font-weight: bold; + color: $text-dark; + } + + &__link { + color: $main-color; + } + + &__button { + width: 184px; + height: 52px; + font-size: 16px; + color: $main-color; + background-color: $text-light; + border: 2px solid $main-color; + border-radius: $button-radius; + cursor: pointer; + transition: color 0.3s, font-size 0.3s, border-color 0.5s; + + &:hover { + color: $submit-hover; + font-size: 17px; + border-color: $submit-hover; + } + } + + @media (max-width: 960px) { + padding: $svp-block-padding; + + &__article { + margin-bottom: 32px; + } + + &__line { + margin-bottom: 16px; + + &--first, + &--third { + grid-template-columns: repeat(2, 1fr); + } + } + + &__img { + height: 131px; + } + + &__button { + width: 100%; + } + } + + @media (min-width: 1300px) { + width: 1260px; + margin: 0 auto; + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 0000000000..a9a128414a --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,172 @@ +.header { + height: $header-height; + padding: 56px $block-hor-padding; + + color: $text-light; + font-size: 12px; + letter-spacing: 2px; + + @include backgroundImage("/images/header.jpg"); + + &__contacts { + @include flexCentering; + margin-bottom: 40vh; + z-index: 2; + } + + &__phone-link { + position: absolute; + top: 61px; + display: none; + @include hover(opacity, 0.8); + } + + &__call { + padding: $link-padding; + color: $text-light; + @include active; + @include hover(opacity, 0.8); + } + + &__link-logo { + @include positionCenteringHorizon; + width: 115px; + height: 76px; + z-index: 2; + } + + &__img-logo { + width: inherit; + } + + &__title { + position: relative; + max-width: 370px; + margin-bottom: 85px; + font-size: 60px; + + &::before { + content: ""; + position: absolute; + top: -8px; + display: block; + width: 35px; + height: 2px; + background-color: $text-light; + } + } + + &__order { + position: relative; + display: inline-block; + padding: $link-padding; + line-height: 28px; + color: $text-light; + text-transform: uppercase; + @include active; + @include hover(opacity, 0.8); + + &::after { + content: ""; + @include positionCenteringHorizon; + bottom: 0; + width: 78%; + height: 1px; + background-color: $text-light; + } + } + + &__menu-label { + display: none; + position: absolute; + top: 71px; + right: 25px; + width: 18px; + height: 12px; + z-index: 2; + cursor: pointer; + @include hover(opacity, 0.8); + + &::after { + content: ""; + position: relative; + bottom: 10px; + display: block; + width: 18px; + height: 18px; + @include backgroundImage("/images/menu.svg"); + } + } + + &__menu-input { + display: none; + } + + @media (max-width: 918px) { + position: relative; + padding: 39px 23px; + + &__contacts { + position: absolute; + bottom: 10vh; + display: none; + margin-bottom: 0; + line-height: 2.5; + } + + &__phone-link { + display: block; + } + + &__link-logo { + width: 73px; + height: 48px; + } + + &__menu-label { + display: block; + } + + &__menu-input { + display: block; + width: 0; + + &:checked ~ .header__navigation { + display: block; + transform: translateX(100%); + animation: appear 1s ease-out forwards; + } + + &:checked ~ .header__contacts { + display: flex; + flex-direction: column; + transform: translateX(100%); + animation: appear 1s ease-out forwards; + } + + &:checked + .header__menu-label { + &::after { + background-image: url("/images/cross.svg"); + } + } + } + + &__title { + max-width: 266px; + margin-top: 60vh; + font-size: 41px; + } + } +} + +@keyframes appear { + from { + transform: translateX(100%); + opacity: 0; + } + + to { + transform: translateX(0); + opacity: 1; + } +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 0000000000..29348dfb89 --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,42 @@ +.nav { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + + &__list { + @include flexCentering; + height: 100px; + padding: 0 $block-hor-padding; + } + + &__item { + list-style: none; + } + + &__link { + padding: $link-padding; + color: $text-light; + text-transform: uppercase; + @include active; + @include hover(opacity, 0.8); + } + + @media (max-width: 918px) { + display: none; + height: 100%; + background-color: $main-color; + + &__list { + flex-direction: column; + padding: 90px 21px; + align-items: start; + font-size: 22px; + line-height: 1; + } + + &__item { + margin-bottom: 28px; + } + } +} diff --git a/src/styles/blocks/_testimonials.scss b/src/styles/blocks/_testimonials.scss new file mode 100644 index 0000000000..fa6568215d --- /dev/null +++ b/src/styles/blocks/_testimonials.scss @@ -0,0 +1,61 @@ +.testimonials { + padding: $block-ver-padding $block-hor-padding; + + &__title { + text-align: center; + margin-bottom: 125px; + @include titleForSection; + } + + &__cards { + @include flexCentering; + align-items: start; + } + + &__item { + max-width: 240px; + margin-bottom: 48px; + text-align: center; + } + + &__img { + margin-bottom: 28px; + border-radius: 50%; + } + + &__name { + margin-bottom: 4px; + color: $main-color; + font-size: 24px; + } + + &__position { + margin-bottom: 13px; + color: $hint-color; + font-size: 14px; + } + + &__comment { + color: $text-dark; + font-size: 16px; + line-height: 1.7; + } + + @media (max-width: 960px) { + padding: $svp-block-padding; + + &__title { + margin-bottom: 53px; + } + + &__cards { + flex-direction: column; + align-items: center; + } + } + + @media (min-width: 1300px) { + width: 1260px; + margin: 0 auto; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4d7..f60de86bbb 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,15 @@ @import "utils"; @import "fonts"; @import "typography"; +@import "reset"; +@import "./utils/vars"; -body { - background: $c-gray; -} +@import "./blocks/header"; +@import "./blocks/nav"; +@import "./blocks/about-us"; +@import "./blocks/gallery"; +@import "./blocks/consult"; +@import "./blocks/form"; +@import "./blocks/testimonials"; +@import "./blocks/contact-us"; +@import "./blocks/footer"; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index a1a5dd0e37..040e1dfc8c 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,9 @@ -%h1 { +%fontNormal { font-family: "Roboto", sans-serif; font-weight: 400; } + +%fontBold { + font-family: "Roboto", sans-serif; + font-weight: 700; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..c05e251583 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,62 @@ #{$_property}: $_toValue; } } + +@mixin backgroundImage ($url) { + background-image: url(#{$url}); + background-size: cover; + background-position: center; +} + +@mixin active { + transition: background-color 0.3s; + &:active { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 8px; + } +} + +@mixin positionCenteringHorizon { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +@mixin positionCenteringAll { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +@mixin flexCentering { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; +} + +@mixin titleForSection { + position: relative; + height: 80px; + font-size: 48px; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + display: block; + width: 13px; + height: 10px; + background-image: url("/images/crown.svg"); + background-size: cover; + background-position: center; + transform: translateX(-50%); + } + + @media (max-width: 960px) { + height: 70px; + font-size: 36px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..d575762f41 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,24 @@ -$c-gray: #eee; +$main-color: #0075ff; +$text-light: #fff; +$hint-color: #9fadc2; +$text-dark: #3e3e3e; +$title-dark: #000; +$title-light: #fff; +$block-hor-padding: 120px; +$block-ver-padding: 90px; +$header-height: 100vh; +$form-width: 415px; +$input-height: 48px; +$input-padding-left: 17px; +$input-submit-height: 56px; +$submit-hover: #0067df; +$submit-shadow: 0 6px 23px rgba(0, 117, 255, 0.46); +$input-background: #f7f8ff; +$input-radius: 8px; +$link-radius: 8px; +$button-radius: 8px; +$photo-radius: 8px; +$footer-height: 360px; +$link-padding: 5px 15px; +$svp-hor-padding: 20px; +$svp-block-padding: 40px $svp-hor-padding;