mate-academy · Kacper7001 · Feb 13, 2024 · Feb 14, 2024 · Feb 15, 2024 · Feb 15, 2024
diff --git a/src/fonts/Cinzel-Black.ttf b/src/fonts/Cinzel-Black.ttf
diff --git a/src/fonts/Cinzel-Bold.ttf b/src/fonts/Cinzel-Bold.ttf
diff --git a/src/fonts/Cinzel-ExtraBold.ttf b/src/fonts/Cinzel-ExtraBold.ttf
diff --git a/src/fonts/Cinzel-Medium.ttf b/src/fonts/Cinzel-Medium.ttf
diff --git a/src/fonts/Cinzel-Regular.ttf b/src/fonts/Cinzel-Regular.ttf
diff --git a/src/fonts/Cinzel-SemiBold.ttf b/src/fonts/Cinzel-SemiBold.ttf
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,222 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Miami</title>
+    <title>Miami Condo Kings</title>
     <link rel="stylesheet" href="./styles/main.scss">
-    <script src="scripts/main.js" defer></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <header class="header" id="header">
+      <nav class="navigation">
+
+        <a href="#" class="navigation_item">
+          <img src="/src/photos/THE MET.svg" alt="logo"
+          class="navigation_logo">
+        </a>
+
+        <a href="#contact" class="navigation_item">
+          <img src="photos/Icon-Phone-call.svg" alt="Icon-Phone-call"
+          class="navigation_phone">
+        </a>
+
+        <a href="#menu" class="navigation_item">
+          <img src="/src/photos/Icon-Burger-menu.svg" alt="Icon-Burger-menu">
+        </a>
+
+      </nav>
+      <h1 class="title">
+        Welcome<br>to The Met
+      </h1>
+    </header>
+
+    <div class="menu" id="menu">
+
+      <nav class="menu__navigation">
+
+        <a href="#" class="navigation_item">
+          <img src="/src/photos/THE MET.svg" alt="logo"
+          class="navigation_logo">
+        </a>
+
+        <a href="#" class="navigation_item--hidden">
+          <img src="photos/Icon-Phone-call.svg" alt="Icon-Phone-call"
+          class="navigation_phone">
+        </a>
+
+        <a href="#header" class="navigation_item">
+          <img src="/src/photos/Icon-Close.svg" alt="Icon-close-menu">
+        </a>
+
+      </nav>
+      <nav class="links">
+        <ul class="links__list">
+          <li class="links__item"><a class="links__link" href="#">Home</a></li>
+          <li class="links__item"><a class="links__link" href="#plan">About Us</a></li>
+          <li class="links__item"><a class="links__link" href="#view">Now on view</a></li>
+          <li class="links__item"><a class="links__link" href="#explore">Explore Online</a></li>
+          <li class="links__item"><a class="links__link" href="#contact">Contacts</a></li>
+        </ul>
+        <p class="menu__p">The Met Fifth Avenue</p>
+        <p class="menu__p">+1 212-535-7710</p>
+        <p class="menu__p">The Met Cloisters</p>
+        <p class="menu__p last">+1 212-923-3700</p>
+        <a href="#" class="menu__call-link">call to order</a>
+      </nav>
+    </div>
+
+    <main class="main">
+      <h2 class="title title--secondary" id="plan">
+        <span class="title__highlights">Plan your visit</span><br>
+        Museum hours
+      </h2>
+
+      <h3 class="title title--three">The Met Fifth Avenue</h3>
+      <p class="three--hours">10 AM - 5 PM <span class="three--days">SUN, MON, TUE, THU</span></p>
+      <p class="three--hours">10 AM - 9PM
+        <span class="three--days">FRI, SAT</span>
+      </p>
+      <p class="three--hours">CLOSED <span class="three--days">WEN</span></p>
+      <p class="three--hours">CLOSED ON</p>
+      <p class="three--days">THANKSGIVING DAY, DEC 25, JAN 1, AND THE FIRST MONDAY IN MAY.</p>
+
+      <h3 class="title title--three">The Met Cloisters</h3>
+      <p class="three--hours">10 AM - 4.30 PM <span class="three--days">THU - TUE</span></p>
+      <p class="three--hours">CLOSED <span class="three--days">WEN</span></p>
+      <p class="three--hours">CLOSED ON</p>
+      <p class="three--days">THANKSGIVING DAY, DEC 25, JAN 1</p>
+
+      <section class="section">
+        <h3 class="title title-section" id="view">Now On View</h3>
+        <p class="title-section--down">Explore exhibition gallery guides, videos, articles, and more.</p>
+        <article class="article">
+          <div class="pictures1">
+            <img src="/src/photos/1.jpg" alt="1">
+            <img src="/src/photos/2.jpg" alt="2">
+          </div>
+          <p class="article__paragraph">
+            <span class="article__highlights">A New Look at Old Masters
+
+            </span>
+            December 12, 2020 – Through<br> Spring 2023
+          </p>
+        </article>
+
+        <article class="article">
+          <div class="pictures2">
+            <img src="/src/photos/3.jpg" alt="1">
+            <img src="/src/photos/4.jpg" alt="2">
+            <img src="/src/photos/5.jpg" alt="2">
+          </div>
+          <p class="article__paragraph">
+            <span class="article__highlights">Bodhisattvas of Wisdom, Compassion, and Power
+            </span><br>
+            March 27, 2021 – October 30, 2022
+          </p>
+        </article>
+
+        <article class="article">
+          <div class="pictures3">
+            <img src="/src/photos/6.jpg" alt="1">
+            <img src="/src/photos/7.jpg" alt="2">
+          </div>
+          <p class="article__paragraph">
+            <span class="article__highlights">Inspiring Walt Disney:
+              The Animation of French Decorative Arts
+            </span><br>
+            December 10, 2021 – March 6, 2022
+          </p>
+          <a href="#" class="button">View all exhibitions</a>
+        </article>
+      </section>
+
+      <section class="section-2">
+        <h3 class="title title-section" id="explore">More to Explore Online</h3>
+        <article class="article">
+          <div class="pictures4">
+            <img src="/src/photos/8.jpg" alt="1">
+          </div>
+          <p class="article__paragraph-2">
+            <span class="article__highlights-2">Collection Areas
+            </span><br>
+            These collection areas study, exhibit, and care for the objects in The Met collection.
+          </p>
+        </article>
+
+        <article class="article">
+          <div class="pictures5">
+            <img src="/src/photos/9.jpg" alt="1">
+          </div>
+          <p class="article__paragraph-2">
+            <span class="article__highlights-2">Travel
+            </span><br>
+              Travel with The Met connects the Museum's wide and diverse audience to art, inspiration, and historical perspective.
+          </p>
+        </article>
+
+        <article class="article">
+          <div class="pictures6">
+            <img src="/src/photos/10.jpg" alt="1">
+          </div>
+          <p class="article__paragraph-2">
+            <span class="article__highlights-2">Virtual group tours
+            </span><br>
+                Request a guided tour, reserve admission and lead your own small group, or request a live virtual tour led by a Museum guide.
+          </p>
+        </article>
+      </section>
+
+      <section class="section" id="contact">
+        <h3 class="title title-section"> Contact us</h3>
+        <h4 class="title title--three">The Met Fifth Avenue</h4>
+        <address class="address">
+          <h4 class="address__label">Phone</h4>
+          <p class="address_content">+1 212-535-7710</p>
+          <h4 class="address__label">Address</h4>
+          <p class="address_content">1000 Fifth Avenue<br>
+            New York, NY 10028
+          </p>
+        </address>
+        <h4 class="title title--three">The Met Cloisters</h4>
+        <address class="address">
+          <h4 class="address__label">Phone</h4>
+          <p class="address_content">+1 212-923-3700</p>
+          <h4 class="address__label">Address</h4>
+          <p class="address_content">99 Margaret Corbin Drive<br>
+            Fort Tryon Park<br>
+            New York, NY 10040
+          </p>
+        </address>
+
+        <form class="form">
+          <div class="form__item">
+            <label for="name" class="form__label">NAME</label>
+            <input id="name" class="form__input"
+          type="text" placeholder="NAME"
+          required>
+          </div>
+
+          <div class="form__item">
+            <label for="email" class="form__label">Email</label>
+            <input id="email" class="form__input"
+          type="email" placeholder="Email"
+          required>
+          </div>
+
+          <div class="form__item">
+            <label for="message"
+            class="form__label"
+            >MESSAGE</label>
+            <textarea id="message" class="form__textarea"
+           placeholder="Message" required></textarea>
+          </div>
+
+          <!-- <button class="button--primary">SEND</button> -->
+          <a href="#" class="button">SEND</a>
+        </form>
+      </section>
+
+    </main>
+
+    <footer class="footer">
+    </footer>
   </body>
 </html>
diff --git a/src/photos/1.jpg b/src/photos/1.jpg
diff --git a/src/photos/10.jpg b/src/photos/10.jpg
diff --git a/src/photos/11.jpg b/src/photos/11.jpg
diff --git a/src/photos/2.jpg b/src/photos/2.jpg
diff --git a/src/photos/3.jpg b/src/photos/3.jpg
diff --git a/src/photos/4.jpg b/src/photos/4.jpg
diff --git a/src/photos/5.jpg b/src/photos/5.jpg
diff --git a/src/photos/6.jpg b/src/photos/6.jpg
diff --git a/src/photos/7.jpg b/src/photos/7.jpg
diff --git a/src/photos/8.jpg b/src/photos/8.jpg
diff --git a/src/photos/9.jpg b/src/photos/9.jpg
diff --git a/src/photos/Icon-Burger-menu-hover.svg b/src/photos/Icon-Burger-menu-hover.svg
diff --git a/src/photos/Icon-Burger-menu.svg b/src/photos/Icon-Burger-menu.svg
diff --git a/src/photos/Icon-Close.svg b/src/photos/Icon-Close.svg
diff --git a/src/photos/Icon-Phone-call.svg b/src/photos/Icon-Phone-call.svg
diff --git a/src/photos/THE MET.svg b/src/photos/THE MET.svg
diff --git a/src/photos/header-background.jpg b/src/photos/header-background.jpg
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
diff --git a/src/styles/blocks/adress.scss b/src/styles/blocks/adress.scss
@@ -0,0 +1,23 @@
+.address {
+  text-transform: uppercase;
+  font-family: 'Cinzel';
+  font-style: normal;
+
+&__label {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: 0px;
+  text-align: left;
+ }
+
+ &__content {
+  font-family: 'Cinzel';
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 27px;
+  letter-spacing: 0px;
+  text-align: left;
+
+ }
+}
diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss
@@ -0,0 +1,83 @@
+
+.article {
+  padding-top: 40px;
+}
+
+.article__paragraph {
+  font-family: Cinzel, serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: 0;
+  text-align: left;
+
+}
+
+.article__highlights {
+  font-family: Cinzel, serif;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 27px;
+  letter-spacing: 0;
+  text-align: left;
+  color: #D12D35;
+}
+
+.article__paragraph-2 {
+  font-family: Cinzel, serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: 0;
+  text-align: center;
+
+
+}
+
+.article__highlights-2 {
+  font-family: Cinzel, serif;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 34px;
+  letter-spacing: 0;
+  text-align: center;
+  color: #D12D35;
+}
+
+.pictures1 {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.pictures2 {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.pictures3 {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.pictures4 {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.pictures5 {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.pictures6 {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+