mate-academy · yzhyhaliuk · Oct 22, 2024 · Oct 22, 2024 · Oct 22, 2024
diff --git a/src/fonts/OpenSans-Regular.ttf b/src/fonts/OpenSans-Regular.ttf
diff --git a/src/fonts/Poppins-Regular.ttf b/src/fonts/Poppins-Regular.ttf
diff --git a/src/images/icons/Arrow.png b/src/images/icons/Arrow.png
diff --git a/src/images/icons/facebook-1.png b/src/images/icons/facebook-1.png
diff --git a/src/images/icons/facebook.png b/src/images/icons/facebook.png
diff --git a/src/images/icons/icon-close-2x.png b/src/images/icons/icon-close-2x.png
diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png
diff --git a/src/images/icons/instagram-1.png b/src/images/icons/instagram-1.png
diff --git a/src/images/icons/instagram.png b/src/images/icons/instagram.png
diff --git a/src/images/icons/menu-icon.png b/src/images/icons/menu-icon.png
diff --git a/src/images/icons/twitter-1.png b/src/images/icons/twitter-1.png
diff --git a/src/images/icons/twitter.png b/src/images/icons/twitter.png
diff --git a/src/images/logo/Logo.png b/src/images/logo/Logo.png
diff --git a/src/images/our-expertise/card1.png b/src/images/our-expertise/card1.png
diff --git a/src/images/our-expertise/card2.png b/src/images/our-expertise/card2.png
diff --git a/src/images/our-expertise/card3.png b/src/images/our-expertise/card3.png
diff --git a/src/images/slider/arrow-left.png b/src/images/slider/arrow-left.png
diff --git a/src/images/slider/arrow-right.png b/src/images/slider/arrow-right.png
diff --git a/src/images/slider/slide-img-2.png b/src/images/slider/slide-img-2.png
diff --git a/src/images/slider/slide-img-3.png b/src/images/slider/slide-img-3.png
diff --git a/src/images/slider/slide-img-4.png b/src/images/slider/slide-img-4.png
diff --git a/src/images/testimonials/Photo1.png b/src/images/testimonials/Photo1.png
diff --git a/src/images/testimonials/Photo2.png b/src/images/testimonials/Photo2.png
diff --git a/src/images/testimonials/Photo3.png b/src/images/testimonials/Photo3.png
diff --git a/src/images/testimonials/symbol.png b/src/images/testimonials/symbol.png
diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="page">
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -11,9 +11,318 @@
       rel="stylesheet"
       href="./styles/main.scss"
     />
-  </head>
-  <body>
-    <h1>Dia</h1>
     <script src="scripts/main.js"></script>
+  </head>
+  <body class="page__body">
+    <header class="header">
+      <div class="header__content">
+        <div class="top-bar">
+          <div class="top-bar__home">
+            <a href="#" class="top-bar__logo-link">
+              <img src="./images/logo/Logo.png" class="top-bar__logo"
+                     alt="Dia Logo">
+            </a>
+            <a href="#menu" class="top-bar__icon"></a>
+          </div>
+          <nav class="nav">
+            <ul class="nav__list">
+              <li class="nav__item">
+                <a href="#about-us" class="nav__link">About us</a>
+              </li>
+              <li class="nav__item">
+                <a href="#services" class="nav__link">Services</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">Contact us</a>
+              </li>
+            </ul>
+          </nav>
+          <a href="#vision-passion-results" class="top-bar__link">Hire us</a>
+        </div>
+
+        <section class="strategic-agency container">
+          <div class="strategic-agency__position">
+            <div class="strategic-agency__content ">
+              <h1 class="strategic-agency__title">
+                  Strategic Agency
+              </h1>
+              <h3 class="strategic-agency__subtitle">
+                  We believe in the power of bold ideas that
+                  can solve business challenges.
+              </h3>
+              <a
+                  href="#expertise"
+                  class="strategic-agency__link"
+                  >
+                  Learn more
+              </a>
+            </div>
+            <div class="slider">
+              <div class="slider__photo slider__photo--1" id="slide1">
+              </div>
+              <div class="slider__photo slider__photo-slide slider__photo--2" id="slide2">
+              </div>
+              <div class="slider__content">
+                <div class="slider__buttons">
+                  <div class="slider__arrow slider__arrow--left">
+                    <a href="#slide1" class="slider__link">
+                    </a>
+                  </div>
+                  <div class="slider__arrow slider__arrow--right">
+                    <a href="#slide2" class="slider__link">
+                    </a>
+                  </div>
+                </div>
+                <div class="slider__text">
+                  <p class="slider__text-title">
+                      Intro
+                  </p>
+                  <p class="slider__text-paragraph">
+                      By the same illusion which lifts the
+                    <br>
+                      horizon.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <aside class="page__menu menu" id="menu">
+          <div class="top-bar menu__top">
+            <a
+              href="#"
+              class="top-bar__logo-link"
+            >
+              <img
+                src="./images/logo/dia-logo.svg"
+                alt="Dia Logo"
+                class="top-bar__logo"
+                  />
+            </a>
+            <a
+              href="#"
+              class="menu__icon"
+            ></a>
+          </div>
+          <div class="menu__bottom">
+            <nav class="menu__nav">
+              <ul class="menu__list">
+                <li class="menu__item">
+                  <a class="menu__link" href="#about-us">About us</a>
+                </li>
+                <li class="menu__item">
+                  <a class="menu__link" href="#services">Services</a>
+                </li>
+                <li class="menu__item">
+                  <a class="menu__link" href="#testimonials">Testimonials</a>
+                </li>
+                <li class="menu__item">
+                  <a class="menu__link" href="#contact-us">Contact us</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </aside>
+      </div>
+    </header>
+
+    <main class="main">
+
+      <div class="container">
+        <div class="who-we-are" id="about-us">
+          <h1 class="who-we-are__title">Who we are</h1>
+          <p class="who-we-are__info">We embrace a strategic approach to creative ideas. We are interested in people and human relationships. This is the main thing you need to know about us. We believe in the power of bold ideas that can solve business challenges.</p>
+        </div>
+      </div>
+
+
+      <div class="our-expertise" id="expertise">
+        <div class="container">
+          <h1 class="our-expertise__title">Our expertise</h1>
+          <div class="our-expertise__cards">
+            <div class="our-expertise__card">
+              <img class="our-expertise__image" src="./images/our-expertise/card1.png"
+                    alt="Our expertise image">
+              <h2 class="our-expertise__subtitle">Branding</h2>
+              <p class="our-expertise__info">We create additional value for companies, products, services as well as verbal and visual ways to deliver it to the audience.</p>
+            </div>
+            <div class="our-expertise__card">
+              <img class="our-expertise__image" src="./images/our-expertise/card2.png"
+                    alt="Our expertise image">
+              <h2 class="our-expertise__subtitle">Communication</h2>
+              <p class="our-expertise__info">We strive to create communications that can increase media performance. We use everything — words, meanings, stories, art, movies.</p>
+            </div>
+            <div class="our-expertise__card">
+              <img class="our-expertise__image" src="./images/our-expertise/card3.png"
+                    alt="Our expertise image">
+              <h2 class="our-expertise__subtitle">Strategy</h2>
+              <p class="our-expertise__info">We create business growth strategies, from the moment of its birth to the achievement of the necessary business indicators.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="services" id="services">
+        <div class="container">
+          <h1 class="services__title">Services</h1>
+          <h2 class="services__subtitle">Air is a full service creative agency</h2>
+          <p class="services__info">Deep analytics, strong strategy and bright creative ideas. <br> <br> We are sure that first-rate job is possible only if all three components are united.</p>
+          <div class="services__learn-more services__learn-more--01">
+            <h3 class="services__learn-more-title">001</h3>
+            <p class="services__learn-more-info">Brand Development<br> Copywriting<br> Logo & Webite Design<br> Packaging</p>
+            <div class="services__learn-more-links">
+              <a href="#expertise" class="services__learn-more-text">
+                <img src="./images/icons/Arrow.png" alt="image">
+                      Learn more
+              </a>
+            </div>
+          </div>
+          <div class="services__learn-more services__learn-more--02">
+            <h3 class="services__learn-more-title">002</h3>
+            <p class="services__learn-more-info">Сontent Production<br> Graphic Design<br> Video Production<br> Post Production</p>
+            <div class="services__learn-more-links">
+              <a href="#expertise" class="services__learn-more-text">
+                <img src="./images/icons/Arrow.png" alt="image">
+                      Learn more
+              </a>
+            </div>
+          </div>
+          <div class="services__learn-more services__learn-more--03">
+            <h3 class="services__learn-more-title">003</h3>
+            <p class="services__learn-more-info">Marketing Strategy<br> Email Marketing<br> Paid Advertising<br> Blog Content & SEO</p>
+            <div class="services__learn-more-links">
+              <a href="#expertise" class="services__learn-more-text">
+                <img src="./images/icons/Arrow.png" alt="image">
+                      Learn more
+              </a>
+            </div>
+          </div>
+          <div class="services__learn-more services__learn-more--04">
+            <h3 class="services__learn-more-title">004</h3>
+            <p class="services__learn-more-info">Digital Communications<br> Influencer Marketing<br> Product Placements<br> Strategic Partnerships</p>
+            <div class="services__learn-more-links">
+              <a href="#expertise" class="services__learn-more-text">
+                <img src="./images/icons/Arrow.png" alt="image">
+                      Learn more
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="testimonials" id="testimonials">
+        <div class="container">
+          <h1 class="testimonials__title">Testimonials</h1>
+          <h2 class="testimonials__subtitle">What people say</h2>
+          <div class="testimonials__card testimonials__card--1">
+            <div class="testimonials__image testimonials__image--1">
+              <img src="./images/testimonials/Photo1.png" alt="image">
+            </div>
+            <div class="testimonials__symbol"></div>
+            <p class="testimonials__text">AIR’s ideas are refreshing and out of the box. Authentic team that focuses on the important path of the brand.</p>
+            <p class="testimonials__name">Tal Gilad</p>
+            <p class="testimonials__occupation">Teach for America</p>
+          </div>
+          <div class="testimonials__card testimonials__card--2">
+            <div class="testimonials__image testimonials__image--2">
+              <img src="./images/testimonials/Photo2.png" alt="image">
+            </div>
+            <div class="testimonials__symbol"></div>
+            <p class="testimonials__text">AIR is an exceptional agency that leads with creative talent, first-class account servicing.</p>
+            <p class="testimonials__name">Azadeh Hawkins</p>
+            <p class="testimonials__occupation">Hawkins Consulting</p>
+          </div>
+          <div class="testimonials__card testimonials__card--3">
+            <div class="testimonials__image testimonials__image--3">
+              <img src="./images/testimonials/Photo3.png" alt="image">
+            </div>
+            <div class="testimonials__symbol"></div>
+            <p class="testimonials__text">AIR raises the agency bar to stratospheric heights on both creative output and client service.</p>
+            <p class="testimonials__name">Michel Grover</p>
+            <p class="testimonials__occupation">Hulu</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="vision-passion-results" id="vision-passion-results">
+        <div class="container">
+          <h1 class="vision-passion-results__title">Vision, Passion, Results</h1>
+          <p class="vision-passion-results__info">We are sure that first-rate job is possible only if all three components are united.</p>
+          <div class="vision-passion-results__button">
+            <a href="#contact-us" class="vision-passion-results__link">Apply</a>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="container">
+        <form class="form" action="/submit"
+        method="POST">
+          <h1 class="form__title">Send us a message</h1>
+          <input type="email" id="email"
+          name="email" class="form__email"
+          placeholder="Your email" required>
+          <input type="text" id="name"
+          name="name" class="form__name"
+          placeholder="Your name" required>
+          <textarea id="message" name="message"
+          class="form__message"
+          placeholder="Your message" required>
+          </textarea>
+          <button class="form__button" type="submit">Send</button>
+        </form>
+
+        <div class="contact-us" id="contact-us">
+          <h1 class="contact-us__title">Contact us</h1>
+          <h2 class="contact-us__subtitle">Call us</h2>
+          <a href="tel:654 321 987" class="contact-us__number">654 321 987</a>
+          <h2 class="contact-us__subtitle">Visit us</h2>
+          <a class="contact-us__address" href="https://www.google.com/maps/search/?api=1&query=2905+West+Drive,+Buffalo+Grove">2905 West Drive, Buffalo Grove</a>
+          <h2 class="contact-us__subtitle">Our socials</h2>
+          <div class="contact-us__icons">
+            <div class="contact-us__facebook"></div>
+            <div class="contact-us__twitter"></div>
+            <div class="contact-us__instagram"></div>
+          </div>
+        </div>
+
+        <div class="bottom-bar">
+          <div class="bottom-bar__logo">
+            <a href="#" class="bottom-bar__home">
+              <img src="./images/logo/Logo.png" class="bottom-bar__image"
+            alt="Air logo">
+            </a>
+          </div>
+          <nav class="bottom-bar__nav">
+            <ul class="bottom-bar__list">
+              <li class="bottom-bar__item">
+                <a class="bottom-bar__link" href="#about-us">About us</a>
+              </li>
+              <li class="bottom-bar">
+                <a class="bottom-bar__link" href="#">Home</a>
+              </li>
+              <li class="bottom-bar">
+                <a class="bottom-bar__link" href="#expertise">Work</a>
+              </li>
+              <li class="bottom-bar">
+                <a class="bottom-bar__link" href="#services">Services</a>
+              </li>
+              <li class="bottom-bar">
+                <a class="bottom-bar__link" href="#contact-us">Contact us</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+      </div>
+    </footer>
+
+
+
   </body>
 </html>
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -4,3 +4,17 @@
   font-weight: normal;
   font-style: normal;
 }
+
+@font-face {
+  font-family: Poppins, sans-serif;
+  src: url('../fonts/Poppins-Regular.ttf') format('ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: OpenSans, sans-serif;
+  src: url('../fonts/OpenSans-Regular.ttf') format('ttf');
+  font-weight: normal;
+  font-style: normal;
+}