mate-academy · Bukavyna · Jan 30, 2025
diff --git a/src/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf b/src/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf
diff --git a/src/fonts/OpenSans-VariableFont_wdth,wght.ttf b/src/fonts/OpenSans-VariableFont_wdth,wght.ttf
diff --git a/src/fonts/Poppins-Bold.ttf b/src/fonts/Poppins-Bold.ttf
diff --git a/src/images/Group 19.png b/src/images/Group 19.png
diff --git a/src/images/Photo-1.png b/src/images/Photo-1.png
diff --git a/src/images/Photo-2.png b/src/images/Photo-2.png
diff --git a/src/images/Photo-3.png b/src/images/Photo-3.png
diff --git a/src/images/Shapes-2.png b/src/images/Shapes-2.png
diff --git a/src/images/Shapes.png b/src/images/Shapes.png
diff --git a/src/images/arrow-left.png b/src/images/arrow-left.png
diff --git a/src/images/arrow-right.png b/src/images/arrow-right.png
diff --git a/src/images/arrow.png b/src/images/arrow.png
diff --git a/src/images/facebook.png b/src/images/facebook.png
diff --git a/src/images/favicon.ico b/src/images/favicon.ico
diff --git a/src/images/hire-us-button.png b/src/images/hire-us-button.png
diff --git a/src/images/instagram.png b/src/images/instagram.png
diff --git a/src/images/logo/air-logo.png b/src/images/logo/air-logo.png
diff --git a/src/images/slider/slide-img-1-1.png b/src/images/slider/slide-img-1-1.png
diff --git a/src/images/twitter.png b/src/images/twitter.png
diff --git a/src/images/updated_favicon.ico b/src/images/updated_favicon.ico
diff --git a/src/images/vector.png b/src/images/vector.png
diff --git a/src/images/what-we-do/what-we-do-1-1.png b/src/images/what-we-do/what-we-do-1-1.png
diff --git a/src/images/what-we-do/what-we-do-1-2.png b/src/images/what-we-do/what-we-do-1-2.png
diff --git a/src/images/what-we-do/what-we-do-1-3.png b/src/images/what-we-do/what-we-do-1-3.png
diff --git a/src/index.html b/src/index.html
@@ -1,19 +1,364 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/html">
   <head>
     <meta charset="UTF-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
+    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
     <title>Dia</title>
+
     <link
       rel="stylesheet"
-      href="./styles/main.scss"
+      href="./styles/main.css"
+    />
+
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
     />
   </head>
+
   <body>
-    <h1>Dia</h1>
+    <header class="header">
+      <div class="top-bar">
+        <div class="top-bar__logo-menu">
+          <a href="#" class="logo-link">
+            <img
+              src="images/logo/air-logo.png"
+              alt="Air logo"
+              class="logo"
+            />
+          </a>
+
+          <img
+            src="images/vector.png"
+            alt="Vector"
+            class="vector"
+          />
+
+          <nav class="nav hide">
+            <ul class="nav__list">
+              <li class="nav__item">
+                <a href="#about-us" class="nav__linc">
+                  About us
+                </a>
+              </li>
+              <li class="nav__item">
+                <a href="#services" class="nav__linc">
+                  Services
+                </a>
+              </li>
+              <li class="nav__item">
+                <a href="#testimonials" class="nav__linc">
+                  Testimonials
+                </a>
+              </li>
+              <li class="nav__item">
+                <a href="#contact-us" class="nav__linc">
+                  Contact Us
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+        <button class="top-bar__btn">
+          Hire us
+        </button>
+      </div>
+
+      <div class="header-block">
+        <div class="header-box-info">
+          <h1 class="header-box-info__title">Strategic Agency</h1>
+          <p class="header-box-info__info">We believe in the power of bold ideas that can solve business challenges.</p>
+          <button class="header-box-info__btn">Learn more</button>
+        </div>
+
+        <div class="slide">
+          <div class="slide-info">
+            <div class="slide-info__arrow-box">
+              <img
+                src="images/arrow-left.png"
+                alt="Arrow left"
+                class="slide-info__arrow"
+              />
+              <img
+                src="images/arrow-right.png"
+                alt="Arrow right"
+                class="slide-info__arrow"
+              />
+            </div>
+            <div class="slide-info__details">
+              <p class="slide-info__title">INtro</p>
+              <p class="slide-info__text">
+                By the same illusion which lifts the horizon.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </header>
+
+    <main class="main-content">
+      <div class="who-we-are">
+        <h2 class="who-we-are__title">
+          Who we are
+        </h2>
+        <p class="who-we-are__text">
+          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>
+
+      <section class="what-we-do">
+        <h2 class="what-we-do__title">Our expertise</h2>
+        <div class="what-we-do__blocks">
+          <div class="what-we-do__block">
+            <img src="images/what-we-do/what-we-do-1-1.png" alt="Photo Mask" class="what-we-do__img">
+            <h2 class="what-we-do__block-title">Branding</h2>
+            <p class="what-we-do__block-text">
+              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="what-we-do__block">
+            <img src="images/what-we-do/what-we-do-1-2.png" alt="" class="what-we-do__img">
+            <h2 class="what-we-do__block-title">Communication</h2>
+            <p class="what-we-do__block-text">
+              We strive to create communications that can increase media performance. We use everything — words, meanings, stories, art, movies.
+            </p>
+          </div>
+          <div class="what-we-do__block">
+            <img src="images/what-we-do/what-we-do-1-3.png" alt="" class="what-we-do__img">
+            <h2 class="what-we-do__block-title">Strategy</h2>
+            <p class="what-we-do__block-text">
+              We create business growth strategies, from the moment of its birth to the achievement of the necessary business indicators.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section class="services">
+        <header class="services__header">
+          <h3 class="services__section-title">Services</h3>
+          <h2 class="services__description">
+            Air is a full service creative agency
+          </h2>
+          <p class="services__note">
+            Deep analytics, strong strategy and bright creative ideas.
+          </p>
+          <p class="services__note">
+            We are sure that first-rate job is possible only if all three components are united.
+          </p>
+        </header>
+
+        <div class="services__list">
+          <article class="services__item services__item--1">
+            <span class="services__item-number">001</span>
+            <ul class="services__item-details">
+              <li class="service__name">Brand Development</li>
+              <li class="service__name">Copywriting</li>
+              <li class="service__name">Logo & Webite Design</li>
+              <li class="service__name">Packaging</li>
+            </ul>
+             <a href="#" class="services__item-link">
+              <img src="images/arrow.png">
+              <span>Learn more</span>
+            </a>
+          </article>
+
+          <article class="services__item">
+            <span class="services__item-number">002</span>
+            <ul class="services__item-details">
+              <li class="service__name">Сontent Production</li>
+              <li class="service__name">Graphic Design</li>
+              <li class="service__name">Video Production</li>
+              <li class="service__name">Post Production</li>
+            </ul>
+            <a href="#" class="services__item-link">
+              <img src="images/arrow.png">
+              <span>Learn more</span>
+            </a>
+          </article>
+
+          <article class="services__item">
+            <span class="services__item-number">003</span>
+            <ul class="services__item-details">
+              <li class="service__name">Marketing Strategy</li>
+              <li class="service__name">Email Marketing</li>
+              <li class="service__name">Paid Advertising</li>
+              <li class="service__name">Blog Content & SEO</li>
+            </ul>
+            <a href="#" class="services__item-link">
+              <img src="images/arrow.png">
+              <span>Learn more</span>
+            </a>
+          </article>
+
+          <article class="services__item services__item--4">
+            <span class="services__item-number">004</span>
+            <ul class="services__item-details">
+              <li class="service__name">Digital Communications</li>
+              <li class="service__name">Influencer Marketing</li>
+              <li class="service__name">Product Placements</li>
+              <li class="service__name">Strategic Partnerships</li>
+            </ul>
+            <a href="#" class="services__item-link">
+              <img src="images/arrow.png">
+              <span>Learn more</span>
+            </a>
+          </article>
+
+        </div>
+      </section>
+
+      <section class="testimonials">
+       <header class="testimonials__header">
+         <h3 class="testimonials__section-title">Testimonials</h3>
+         <h2 class="testimonials__description">
+           What people say
+         </h2>
+       </header>
+
+        <div class="testimonials__list">
+          <article class="testimonials__item">
+            <img src="images/Photo-1.png" class="testimonials__img"/>
+            <img src="images/Group 19.png"  class="testimonials__img-double-quotes"/>
+            <p class="testimonials__item-details">
+              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-employee">Tal Gilad</p>
+            <h3 class="testimonials__profession-employee">
+              Teach for America
+            </h3>
+          </article>
+
+          <article class="testimonials__item">
+            <img src="images/Photo-2.png" class="testimonials__img"/>
+            <img src="images/Group 19.png"/>
+            <p class="testimonials__item-details">
+              AIR is an exceptional agency that leads with creative talent, first-class account servicing.
+            </p>
+            <p class="testimonials__name-employee">Azadeh Hawkins</p>
+            <h3 class="testimonials__profession-employee">
+              Hawkins Consulting
+            </h3>
+          </article>
+
+          <article class="testimonials__item">
+            <img src="images/Photo-3.png" class="testimonials__img"/>
+            <img src="images/Group 19.png"/>
+            <p class="testimonials__item-details">
+              AIR raises the agency bar to stratospheric heights on both creative output and client service.
+            </p>
+            <p class="testimonials__name-employee">Michel Grover</p>
+            <h3 class="testimonials__profession-employee">
+              Hulu
+            </h3>
+          </article>
+        </div>
+      </section>
+
+      <section class="vision-passion-results">
+        <h2 class="vision-passion-results__title">Vision, Passion, Results</h2>
+        <p class="vision-passion-results__text">
+          We are sure that first-rate job is possible only if all three components are united.
+        </p>
+        <a href="#" class="vision-passion-results__link">
+          <span>Apply</span>
+        </a>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <div class="info-block">
+        <form action="#" class="form">
+          <h2 class="form__title">Send us a message</h2>
+          <div class="form__inputs-block">
+            <input type="email" name="email" placeholder="email@exa" class="form__input form__input-email">
+            <input type="text" name="name" placeholder="Your name" class="form__input form__input-name">
+            <input type="text" name="message" placeholder="Your message" class="form__input form__input-message">
+          </div>
+          <button class="form__button-submit">Send</button>
+        </form>
+
+        <div class="contact">
+          <h2 class="contact__title-footer">Contact us</h2>
+          <h3 class="contact__span contact__telephone-span">Call us</h3>
+          <p class="contact__info contact__telephone">654 321 987</p>
+          <h3 class="contact__span contact__address-span">Visit us</h3>
+          <p class="contact__info contact__address">2905 West Drive, Buffalo Grove</p>
+          <div class="contact__social">
+            <h3 class="contact__span contact__title">our socials</h3>
+            <div class="contact__social-box">
+              <a href="#" class="contact__facebook">
+                <img src="images/facebook.png" class="contact__message-img contact__facebook-img">
+              </a>
+              <a href="#" class="contact__twitter">
+                <img src="images/twitter.png" class="contact__message-img contact__twitter-img">
+              </a>
+              <a href="#" class="contact__instagram">
+                <img src="images/instagram.png" class="contact__message-img contact__instagram-img">
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="bottom-bar">
+        <a href="#" class="logo-link">
+          <img
+            src="images/logo/air-logo.png"
+            alt="Air logo"
+            class="logo"
+          />
+        </a>
+
+        <nav class="bottom-bar__nav">
+          <ul class="bottom-bar__nav-list">
+            <li class="nav-item">
+              <a href="#about-us" class="nav__linc">
+                About us
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#home" class="nav__linc">
+                Home
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#work" class="nav__linc">
+                Work
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#services" class="nav__linc">
+                Services
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#contact-us" class="nav__linc">
+                Contact Us
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </footer>
     <script src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/styles/blocks/footer/bottom-bar.css.map b/src/styles/blocks/footer/bottom-bar.css.map