AlinaMatuschak · AlinaMatuschak · Sep 10, 2020 · Sep 10, 2020 · Sep 11, 2020 · Sep 11, 2020
diff --git 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 `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.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
diff --git a/src/images/footer.jpg b/src/images/footer.jpg
diff --git a/src/images/header.jpg b/src/images/header.jpg
diff --git a/src/images/menu.svg b/src/images/menu.svg
diff --git a/src/images/people/1.jpg b/src/images/people/1.jpg
diff --git a/src/images/people/2.jpg b/src/images/people/2.jpg
diff --git a/src/images/people/3.jpg b/src/images/people/3.jpg
diff --git a/src/images/phone.svg b/src/images/phone.svg
diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg
diff --git a/src/images/photos/3.png b/src/images/photos/3.png
diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg
diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg
diff --git a/src/index.html b/src/index.html
@@ -5,9 +5,332 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Miami</title>
     <link rel="stylesheet" href="./styles/main.scss">
+    <link
+      rel="shortcut icon"
+      href="./images/favicon.png"
+      type="image/x-icon"
+    >
   </head>
-  <body>
-    <h1>Miami</h1>
+  <body class="page">
+    <header class="header" id="home">
+      <a href="#" class="header__link-logo">
+        <img
+          src="./images/logo.png"
+          alt="Miami logo"
+          class="header__img-logo"
+        >
+      </a>
+      <a href="tel:+12345555555" class="header__phone-link">
+        <img
+          src="./images/phone.svg"
+          alt="phone icon"
+          class="header__phone-icon"
+        >
+      </a>
+
+      <input
+        type="checkbox"
+        name="menu"
+        id="menu"
+        class="header__menu-input"
+      >
+      <label for="menu" class="header__menu-label"></label>
+
+      <div class="header__contacts">
+        <a href="tel:+12345555555" class="header__call">+1 234 555-55-55</a>
+        <a href="tel:+12345555555" class="header__order">call to order</a>
+      </div>
+
+      <h1 class="header__title">Miami Condo Kings</h1>
+
+      <nav class="header__navigation nav">
+        <ul class="nav__list">
+          <li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
+          <li class="nav__item"><a href="#about-us" class="nav__link">About us</a></li>
+          <li class="nav__item"><a href="#gallery" class="nav__link">Gallery</a></li>
+          <li class="nav__item"><a href="#consultation" class="nav__link">Consultation</a></li>
+          <li class="nav__item"><a href="#testimonials" class="nav__link">Testimonials</a></li>
+          <li class="nav__item"><a href="#contact-us" class="nav__link">Contacts</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main class="main">
+      <section class="main__about-us about-us" id="about-us">
+        <h2 class="about-us__slogan">Miami best <br>Real estate <span class="about-us__emphasis">here</span></h2>
-        <h2 class="about-us__slogan">Miami best <br>Real estate <span class="about-us__emphasis">here</span></h2>
+        <h2 class="about-us__slogan">
+          Miami best <br>Real estate
+          <span class="about-us__emphasis">here</span>
+        </h2>
-        <h2 class="about-us__slogan">Miami best <br>Real estate <span class="about-us__emphasis">here</span></h2>
+        <h2 class="about-us__slogan">
+          Miami best <br>Real estate
+          <span class="about-us__emphasis">here</span>
+        </h2>
+        <div class="about-us__inf">
+          <h3 class="about-us__title">Over 50 years experience in love.</h3>
+          <p class="about-us__text">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.</p>
+          <p class="about-us__text">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.</p>
+          <p class="about-us__text"><strong>We will never be late!<br>Guaranteed secure transaction - 100%</strong></p>
+        </div>
+      </section>
+
+      <section class="main__gallery gallery" id="gallery">
+        <h2 class="gallery__title">Gallery</h2>
+
+        <article class="gallery__article">
+          <div class="gallery__line gallery__line--first">
+            <a href="https://www.google.com/maps/place/%D0%9D%D0%BE%D1%80%D1%82-%D0%9C%D0%B0%D1%8F%D0%BC%D1%96-%D0%91%D1%96%D1%87,+%D0%A4%D0%BB%D0%BE%D1%80%D0%B8%D0%B4%D0%B0+33162,+%D0%A1%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D1%96+%D0%A8%D1%82%D0%B0%D1%82%D0%B8+%D0%90%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B8/@25.9289247,-80.2148991,13z/data=!3m1!4b1!4m5!3m4!1s0x88d9addb1b652001:0x525bd42381a2a4cf!8m2!3d25.9260794!4d-80.1819268">
-            <a href="https://www.google.com/maps/place/%D0%9D%D0%BE%D1%80%D1%82-%D0%9C%D0%B0%D1%8F%D0%BC%D1%96-%D0%91%D1%96%D1%87,+%D0%A4%D0%BB%D0%BE%D1%80%D0%B8%D0%B4%D0%B0+33162,+%D0%A1%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D1%96+%D0%A8%D1%82%D0%B0%D1%82%D0%B8+%D0%90%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B8/@25.9289247,-80.2148991,13z/data=!3m1!4b1!4m5!3m4!1s0x88d9addb1b652001:0x525bd42381a2a4cf!8m2!3d25.9260794!4d-80.1819268">
+            <a href="https://google.com">
-            <a href="https://www.google.com/maps/place/%D0%9D%D0%BE%D1%80%D1%82-%D0%9C%D0%B0%D1%8F%D0%BC%D1%96-%D0%91%D1%96%D1%87,+%D0%A4%D0%BB%D0%BE%D1%80%D0%B8%D0%B4%D0%B0+33162,+%D0%A1%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D1%96+%D0%A8%D1%82%D0%B0%D1%82%D0%B8+%D0%90%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B8/@25.9289247,-80.2148991,13z/data=!3m1!4b1!4m5!3m4!1s0x88d9addb1b652001:0x525bd42381a2a4cf!8m2!3d25.9260794!4d-80.1819268">
+            <a href="https://google.com">
+              <img
+                src="./images/photos/1.jpg"
+                alt="Marina Palms"
+                class="gallery__img"
+              >
+            </a>
+            <a href="https://www.google.com/maps/place/%D0%9D%D0%BE%D1%80%D1%82-%D0%9C%D0%B0%D1%8F%D0%BC%D1%96-%D0%91%D1%96%D1%87,+%D0%A4%D0%BB%D0%BE%D1%80%D0%B8%D0%B4%D0%B0+33162,+%D0%A1%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D1%96+%D0%A8%D1%82%D0%B0%D1%82%D0%B8+%D0%90%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B8/@25.9289247,-80.2148991,13z/data=!3m1!4b1!4m5!3m4!1s0x88d9addb1b652001:0x525bd42381a2a4cf!8m2!3d25.9260794!4d-80.1819268">
+              <img
+                src="./images/photos/2.jpg"
+                alt="Marina Palms"
+                class="gallery__img"
+              >
+            </a>
+          </div>
+          <p class="gallery__address">
+            <a
+              href="https://www.google.com/maps/place/%D0%9D%D0%BE%D1%80%D1%82-%D0%9C%D0%B0%D1%8F%D0%BC%D1%96-%D0%91%D1%96%D1%87,+%D0%A4%D0%BB%D0%BE%D1%80%D0%B8%D0%B4%D0%B0+33162,+%D0%A1%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D1%96+%D0%A8%D1%82%D0%B0%D1%82%D0%B8+%D0%90%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B8/@25.9289247,-80.2148991,13z/data=!3m1!4b1!4m5!3m4!1s0x88d9addb1b652001:0x525bd42381a2a4cf!8m2!3d25.9260794!4d-80.1819268"
+              class="gallery__link"
+            >
+              Marina Palms
+            </a>
+            / North Miami Beach, FL 33162
+          </p>
+        </article>
+
+        <article class="gallery__article">
+          <div class="gallery__line gallery__line--second">
+            <a href="https://www.google.com/maps?rlz=1C1CHBD_ukUA889UA889&sxsrf=ALeKk03bNIne4fxnuKe9RmkAnnpSX_5FWw:1599802832351&gs_lcp=CgZwc3ktYWIQAzIHCCMQsAIQJ1CcVViefGD-igFoAXAAeACAAdECiAGvB5IBBzAuMy4xLjGYAQCgAQGqAQdnd3Mtd2l6wAEB&uact=5&q=%22Edition+Residences%22+/+Miami+Beach,+FL+33139&um=1&ie=UTF-8&sa=X&ved=2ahUKEwigyeqOsuDrAhXR-yoKHa11D-IQ_AUoAXoECBcQAw">
+              <img
+                src="./images/photos/3.png"
+                alt="Edition Residens"
+                class="gallery__img"
+              >
+            </a>
+            <a href="https://www.google.com/maps?rlz=1C1CHBD_ukUA889UA889&sxsrf=ALeKk03bNIne4fxnuKe9RmkAnnpSX_5FWw:1599802832351&gs_lcp=CgZwc3ktYWIQAzIHCCMQsAIQJ1CcVViefGD-igFoAXAAeACAAdECiAGvB5IBBzAuMy4xLjGYAQCgAQGqAQdnd3Mtd2l6wAEB&uact=5&q=%22Edition+Residences%22+/+Miami+Beach,+FL+33139&um=1&ie=UTF-8&sa=X&ved=2ahUKEwigyeqOsuDrAhXR-yoKHa11D-IQ_AUoAXoECBcQAw">
+              <img
+                src="./images/photos/4.jpg"
+                alt="Edition Residens"
+                class="gallery__img"
+              >
+            </a>
+          </div>
+          <p class="gallery__address">
+            <a
+              href="https://www.google.com/maps?rlz=1C1CHBD_ukUA889UA889&sxsrf=ALeKk03bNIne4fxnuKe9RmkAnnpSX_5FWw:1599802832351&gs_lcp=CgZwc3ktYWIQAzIHCCMQsAIQJ1CcVViefGD-igFoAXAAeACAAdECiAGvB5IBBzAuMy4xLjGYAQCgAQGqAQdnd3Mtd2l6wAEB&uact=5&q=%22Edition+Residences%22+/+Miami+Beach,+FL+33139&um=1&ie=UTF-8&sa=X&ved=2ahUKEwigyeqOsuDrAhXR-yoKHa11D-IQ_AUoAXoECBcQAw"
+              class="gallery__link"
+            >
+              Edition Residens
+            </a>
+            / Miami Beach, FL 33139
+          </p>
+        </article>
+
+        <article class="gallery__article">
+          <div class="gallery__line gallery__line--third">
+            <a href="https://www.google.com/maps/search/Faena+House+%2F+Miami+Beach,+FL+33140/@25.8085462,-80.1256859,17z/data=!3m1!4b1">
+              <img
+                src="./images/photos/5.jpg"
+                alt="Faena House"
+                class="gallery__img"
+              >
+            </a>
+            <a href="https://www.google.com/maps/search/Faena+House+%2F+Miami+Beach,+FL+33140/@25.8085462,-80.1256859,17z/data=!3m1!4b1">
+              <img
+                src="./images/photos/6.jpg"
+                alt="Faena House"
+                class="gallery__img"
+              >
+            </a>
+          </div>
+          <p class="gallery__address">
+            <a
+              href="https://www.google.com/maps/search/Faena+House+%2F+Miami+Beach,+FL+33140/@25.8085462,-80.1256859,17z/data=!3m1!4b1"
+              class="gallery__link"
+            >
+              Faena House
+            </a>
+            / Miami Beach, FL 33140
+          </p>
+        </article>
+
+        <button class="gallery__button">View all</button>
+      </section>
+
+      <section class="main__consultation consult" id="consultation">
+        <h2 class="consult__title">Consultation</h2>
+
+        <div class="consult__content">
+          <div class="consult__inf">
+            <h3 class="consult__foreword">How long have you do yourself a gift?</h3>
+            <p class="consult__text">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.</p>
-            <p class="consult__text">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.</p>
+            <p class="consult__text">
+              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.
+            </p>
-            <p class="consult__text">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.</p>
+            <p class="consult__text">
+              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.
+            </p>
+          </div>
+
+          <form
+            action="https://mate-academy-form-lesson.herokuapp.com/create-application"
+            class="consult__form form"
+            method="POST"
+          >
+            <label for="name">
+              <input
+                type="text"
+                id="name"
+                name="name"
+                min="2"
+                placeholder="Name"
+                required
+                class="form__input"
+              >
+            </label>
+
+            <label for="phone">
+              <input
+                type="tel"
+                name="phone"
+                id="phone"
+                pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+                placeholder="Phone"
+                required
+                class="form__input"
+              >
+            </label>
+
+            <label for="email">
+              <input
+                type="email"
+                name="email"
+                id="email"
+                placeholder="Email"
+                pattern=".+@example.com"
+                required
+                class="form__input"
+              >
+            </label>
+
+            <input
+              type="submit"
+              value="Consultation"
+              class="form__submit"
+            >
+          </form>
+        </div>
+      </section>
+
+      <section class="main__testimonials testimonials" id="testimonials">
+        <h2 class="testimonials__title">Testimonials</h2>
+
+        <div class="testimonials__cards">
+          <div class="testimonials__item">
+            <img
+              src="./images/people/1.jpg"
+              alt="Leslie Mckinney"
+              class="testimonials__img"
+              >
+            <h3 class="testimonials__name">Leslie Mckinney</h3>
+            <span class="testimonials__position">CEO</span>
+            <p class="testimonials__comment">Nice work, Certificates National Association of Realtors (USA)</p>
+          </div>
+
+          <div class="testimonials__item">
+            <img
+              src="./images/people/2.jpg"
+              alt="Scarlett Hawkins"
+              class="testimonials__img"
+            >
+            <h3 class="testimonials__name">Scarlett Hawkins</h3>
+            <span class="testimonials__position">Senior Vice President</span>
+            <p class="testimonials__comment">My soul is illuminated by an unearthly joy, as these beautiful spring morning, which I enjoy with all my heart</p>
-            <p class="testimonials__comment">My soul is illuminated by an unearthly joy, as these beautiful spring morning, which I enjoy with all my heart</p>
+            <p class="testimonials__comment">
+              My soul is illuminated by an unearthly joy, as these beautiful spring morning, which I enjoy with all my heart
+            </p>
-            <p class="testimonials__comment">My soul is illuminated by an unearthly joy, as these beautiful spring morning, which I enjoy with all my heart</p>
+            <p class="testimonials__comment">
+              My soul is illuminated by an unearthly joy, as these beautiful spring morning, which I enjoy with all my heart
+            </p>
+          </div>
+
+          <div class="testimonials__item">
+            <img
+              src="./images/people/3.jpg"
+              alt="Max Henry"
+              class="testimonials__img"
+            >
+            <h3 class="testimonials__name">Max Henry</h3>
+            <span class="testimonials__position">Chief Design Officer</span>
+            <p class="testimonials__comment">When my lovely valley of steam rises and half-day sun is above an impermeable</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="main__contact-us contact-us" id="contact-us">
+        <h2 class="contact-us__title">Contact us</h2>
+        <div class="contact-us__content">
+          <div class="contact-us__contacts">
+            <div>
+              <div class="contact-us__method">
+                <span class="contact-us__hint">Phone</span>
+                <p class="contact-us__contact">+1 234 5555-55-55</p>
+              </div>
+              <div class="contact-us__method">
+                <span class="contact-us__hint">Email</span>
+                <p class="contact-us__contact">hello@miami.com</p>
+              </div>
+            </div>
+            <div class="contact-us__method">
+              <span class="contact-us__hint">Address</span>
+              <p class="contact-us__contact">400 first ave. n. suite 700 Minneapolis, MN 55401</p>
+            </div>
+          </div>
+
+          <form
+            action="https://mate-academy-form-lesson.herokuapp.com/create-application"
+            method="POST"
+            class="contact-us__form form"
+          >
+            <label for="Name">
+              <input
+                type="text"
+                id="Name"
+                name="name"
+                min="2"
+                placeholder="Name"
+                required
+                class="form__input"
+              >
+            </label>
+
+            <label for="Email">
+              <input
+                type="email"
+                name="email"
+                id="Email"
+                placeholder="Email"
+                pattern=".+@example.com"
+                required
+                class="form__input"
+              >
+            </label>
+
+            <label for="textarea">
+              <textarea
+                id="textarea"
+                name="textarea"
+                placeholder="Message"
+                class="form__input form__input--big"
+            > </textarea>
+            </label>
+
+            <input
+              type="submit"
+              value="Consultation"
+              class="form__submit"
+            >
+          </form>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <a href="#" class="footer__logo-link">
+        <img
+          src="./images/logo.png"
+          alt="Miami logo"
+          class="footer__logo-img"
+        >
+      </a>
+    </footer>
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>
 </html>