added: case & energy

Author: rahmanoff

css/styles.css

@@ -184,3 +184,30 @@ body {
 .composition__inner-text p {
   width: 230px;
 }
+
+.case {
+  background-color: #fafafa;
+  padding: 80px 0 100px;
+  text-align: center;
+}
+
+.case__text {
+  max-width: 825px;
+  margin: 0 auto 40px;
+}
+
+.energy__title {
+  padding-top: 160px;
+  margin-bottom: 40px;
+}
+
+.energy__num {
+  font-size: 210px;
+  font-weight: 700;
+  margin-bottom: 40px;
+}
+
+.energy__text {
+  max-width: 400px;
+  margin: 0 auto;
+}

index.html

@@ -163,23 +163,65 @@ <h2 class="composition__title main__title">
               alt="apple airpods max side blue" />
             <!-- <img
               class=""
-              src="./images/airpods-max-side-blue.jpg"
-              alt="apple airpods max side blue" />
+              src="./images/airpods-max-side-red.jpg"
+              alt="apple airpods max side red" />
             <img
               class=""
-              src="./images/airpods-max-side-blue.jpg"
-              alt="apple airpods max side blue" />
+              src="./images/airpods-max-side-white.jpg"
+              alt="apple airpods max side white" />
             <img
               class=""
-              src="./images/airpods-max-side-blue.jpg"
-              alt="apple airpods max side blue" />
+              src="./images/airpods-max-side-green.jpg"
+              alt="apple airpods max side green" />
             <img
               class=""
-              src="./images/airpods-max-side-blue.jpg"
-              alt="apple airpods max side blue" /> -->
+              src="./images/airpods-max-side-black.jpg"
+              alt="apple airpods max side black" /> -->
           </div>
         </div>
       </section>
+      <section class="case">
+        <div class="container">
+          <h2 class="main__title case__title">
+            It even preserves the battery.
+          </h2>
+          <p class="case__text">
+            When stored in the sleek and lightweight
+            <span>Smart Case</span>, AirPods Max enter a low-power state
+            to save energy.
+          </p>
+          <img
+            src="./images/airpods-max-case-blue.jpg"
+            alt="apple airpods max case blue"
+            class="" />
+          <!-- <img
+            src="./images/airpods-max-case-red.jpg"
+            alt="apple airpods max case red"
+            class="" />
+          <img
+            src="./images/airpods-max-case-green.jpg"
+            alt="apple airpods max case green"
+            class="" />
+          <img
+            src="./images/airpods-max-case-white.jpg"
+            alt="apple airpods max case white"
+            class="" />
+          <img
+            src="./images/airpods-max-case-black.jpg"
+            alt="apple airpods max case black"
+            class="" /> -->
+          <h2 class="main__title energy__title">
+            Stayin' alive, stayin' alive.
+          </h2>
+          <p class="energy__num">20</p>
+          <p class="energy__text">
+            hours of music, movies and calls with Active Noise
+            Cancellation and Custom Spatial Audio turned on. 5 And just
+            5 minutes of charging via the Lightning connector gives you
+            an hour and a half of sound. 6
+          </p>
+        </div>
+      </section>
     </main>
     <script src="./js/main.js"></script>
   </body>