add sub header

Author: solygambas

100-hulu webpage clone/index.html

@@ -35,6 +35,21 @@ <h4>Try up to one month free</h4>
         </div>
       </div>
     </header>
+    <section class="sub-header">
+      <img
+        src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/logos.png?raw=true"
+        alt=""
+      />
+      <div>
+        <h4>Bundle with any Hulu plan & save</h4>
+        <h3>Get Hulu, Disney+, and ESPN+.</h3>
+        <a href="#" class="sub-link">Details</a>
+      </div>
+      <div>
+        <a href="#" class="btn btn-outline">Get Bundle</a>
+        <a href="#" class="sub-link">Terms apply</a>
+      </div>
+    </section>
     <script src="script.js"></script>
   </body>
 </html>

100-hulu webpage clone/style.css

@@ -32,6 +32,11 @@ img {
   width: 100%;
 }
 
+h3 {
+  font-size: 26px;
+  font-weight: 300;
+}
+
 h4 {
   color: #00ed82;
   font-size: 13px;
@@ -58,12 +63,31 @@ h4 {
   opacity: 0.8;
 }
 
+.btn-outline {
+  background: none;
+  color: #fff;
+  border: 2px solid #fff;
+}
+
+.btn-outline:hover {
+  color: #fff;
+  border-color: #ccc;
+}
+
 .legal-text {
   font-size: 10px;
   color: #ccc;
   margin-top: 20px;
 }
 
+.sub-link {
+  display: block;
+  color: #ccc;
+  font-size: 12px;
+  margin-top: 5px;
+  text-decoration: underline;
+}
+
 /* Header */
 
 .header {
@@ -111,6 +135,30 @@ h4 {
   margin: 25px 0;
 }
 
+/* Sub Header */
+.sub-header {
+  display: grid;
+  grid-template-columns: 2fr 4fr 2fr;
+  gap: 40px;
+  align-items: center;
+  padding: 30px 40px;
+  background: linear-gradient(
+    318.68deg,
+    #0f495c 0%,
+    #0d3640 49.72%,
+    #08141f 100%
+  );
+}
+
+.sub-header > div:last-of-type {
+  justify-self: end;
+  align-self: end;
+}
+
+.sub-header > div:last-of-type .sub-link {
+  text-align: center;
+}
+
 /* Media Queries */
 @media (max-width: 768px) {
   .header .logo {
@@ -121,4 +169,28 @@ h4 {
     text-align: center;
     padding: 0 20px;
   }
+
+  .header .header-text-1 {
+    margin-bottom: 40px;
+  }
+
+  .header .header-text-2 {
+    display: none;
+  }
+
+  .sub-header {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 20px;
+  }
+
+  .sub-header img {
+    width: 250px;
+    margin: auto;
+  }
+
+  .sub-header > div:last-of-type {
+    justify-self: center;
+    align-self: center;
+  }
 }