add categories and live

Author: solygambas

100-hulu webpage clone/index.html

@@ -50,6 +50,60 @@ <h3>Get Hulu, Disney+, and ESPN+.</h3>
         <a href="#" class="sub-link">Terms apply</a>
       </div>
     </section>
+    <section class="categories">
+      <h4>Included in all plans</h4>
+      <div class="text-xl">All the TV You Love</div>
+      <div class="sub-text">
+        Stream full seasons of exclusive series, current-season episodes, hit
+        movies, Hulu Originals, kids shows, and more.
+      </div>
+      <div class="covers">
+        <div class="cover-1">
+          <div class="cover-grad"></div>
+          <div class="cover-text">
+            <div class="sub-title">Past & Current Seasons</div>
+            <h3>TV Shows</h3>
+          </div>
+        </div>
+        <div class="cover-2">
+          <div class="cover-grad"></div>
+          <div class="cover-text">
+            <div class="sub-title">New & Classics</div>
+            <h3>Movies</h3>
+          </div>
+        </div>
+        <div class="cover-3">
+          <div class="cover-grad"></div>
+          <div class="cover-text">
+            <div class="sub-title">Groundbreaking</div>
+            <h3>Hulu Originals</h3>
+          </div>
+        </div>
+        <div class="cover-4">
+          <div class="cover-grad"></div>
+          <div class="cover-text">
+            <div class="sub-title">Add-On</div>
+            <h3>Premiums</h3>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="live">
+      <div class="live-border">
+        <h4>Hulu + Live TV</h4>
+        <div class="text-xl">Live TV Makes It Better</div>
+        <div class="sub-text">
+          Make the switch from cable. Get 75+ top channels with your favorite
+          live sports, news, and events - plus the entire Hulu streaming
+          library.
+        </div>
+        <div class="legal-text">
+          Live TV plan required. Regional restrictions, blackouts and additional
+          terms apply. See details
+        </div>
+        <a href="#">View Channels in Your Area</a>
+      </div>
+    </section>
     <script src="script.js"></script>
   </body>
 </html>

100-hulu webpage clone/style.css

@@ -88,6 +88,17 @@ h4 {
   text-decoration: underline;
 }
 
+.text-xl {
+  font-size: 70px;
+  font-weight: bold;
+}
+
+.sub-text {
+  max-width: 850px;
+  margin-bottom: 10px;
+  font-size: 24px;
+}
+
 /* Header */
 
 .header {
@@ -100,6 +111,8 @@ h4 {
   display: flex;
   justify-content: flex-end;
   padding: 20px 40px;
+  z-index: 2;
+  position: relative;
 }
 
 .header nav .login-btn {
@@ -135,7 +148,24 @@ h4 {
   margin: 25px 0;
 }
 
+.header::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 180px;
+  z-index: 1;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.76) 15.54%,
+    rgba(0, 0, 0, 0.192) 60.23%,
+    rgba(0, 0, 0, 8e-5) 100%
+  );
+}
+
 /* Sub Header */
+
 .sub-header {
   display: grid;
   grid-template-columns: 2fr 4fr 2fr;
@@ -159,7 +189,107 @@ h4 {
   text-align: center;
 }
 
+/* Categories */
+
+.categories {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 90px 40px;
+}
+
+.categories .covers {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-top: 40px;
+}
+
+.categories .covers > div {
+  height: 500px;
+  width: 300px;
+  position: relative;
+}
+
+.categories .cover-grad {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+      156.82deg,
+      rgba(0, 0, 0, 0.6) 4.58%,
+      rgba(0, 0, 0, 0) 69.61%
+    ),
+    linear-gradient(24.5deg, rgba(0, 0, 0, 0.2) 4.71%, rgba(0, 0, 0, 0) 71.49%);
+}
+
+.categories .cover-text {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  text-align: left;
+}
+
+.categories .cover-1 {
+  background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-1.jpg?raw=true")
+    no-repeat center center / cover;
+}
+.categories .cover-2 {
+  background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-2.jpg?raw=true")
+    no-repeat center center / cover;
+}
+.categories .cover-3 {
+  background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-3.jpg?raw=true")
+    no-repeat center center / cover;
+}
+.categories .cover-4 {
+  background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-4.jpg?raw=true")
+    no-repeat center center / cover;
+}
+
+/* Live */
+
+.live {
+  background-color: #151516;
+  padding: 40px;
+}
+
+.live-border {
+  border: 4px solid #1ce783;
+  border-radius: 16px;
+  padding: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.live a {
+  text-transform: uppercase;
+  font-size: 18px;
+  margin-top: 20px;
+  text-decoration: underline;
+}
+
 /* Media Queries */
+
+@media (max-width: 1300px) {
+  .categories .covers {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1100px) {
+  .categories .covers {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 @media (max-width: 768px) {
   .header .logo {
     width: 200px;
@@ -193,4 +323,21 @@ h4 {
     justify-self: center;
     align-self: center;
   }
+
+  .text-xl {
+    font-size: 40px;
+    line-height: 1.3;
+  }
+
+  .sub-text {
+    font-size: 20px;
+  }
+
+  .categories .covers {
+    grid-template-columns: 1fr;
+  }
+
+  .live-border {
+    padding: 30px 10px;
+  }
 }

README.md

@@ -1,6 +1,6 @@
-# 90 Projects In 90 Days - HTML, CSS & JavaScript
+# 100 Projects In 100 Days - HTML, CSS & JavaScript
 
-90+ mini web projects using HTML, CSS and JavaScript.
+100+ mini web projects using HTML, CSS and JavaScript.
 
 [See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at)