├── README.md
├── css
    └── style.css
├── img
    ├── background.jpg
    ├── logo.png
    ├── tab-content-1.png
    ├── tab-content-2-1.png
    ├── tab-content-2-2.png
    └── tab-content-2-3.png
├── index.html
└── js
    └── main.js


/README.md:
--------------------------------------------------------------------------------
 1 | # Netflix Clone
 2 | 
 3 | Clone of the Netflix website as a light HTML CSS and JS excercise - [Take a look](https://bankole2000.github.io/netflix)
 4 | 
 5 | [![Practice](https://img.shields.io/badge/Practice-HTML/CSS/JS-orange.svg)](https://bankole2000.github.io/netflix)
 6 | 
 7 | _<p align="center">"Eating website for fun... nyom nyom nyom"</p>_
 8 | 
 9 | <div align="center" style="text-align:center; margin:auto;">
10 | <img align="center" src="https://i.imgur.com/EgCvXyK.png" width="150"/>
11 | </div>
12 | 
13 | ## What it is
14 | 
15 | A basic warmup exercise. Simple, practice oriented, clone of the Netflix Homepage. Built with:
16 | 
17 | - HTML
18 | - CSS
19 | - Vanilla JS - ES6
20 | - [Awesomeness](https://www.wikihow.com/Love-Programming) - Strictly for the love of coding :-)
21 | 
22 | ## What it does
23 | 
24 | - Look pretty, that's about it :-)
25 | 
26 | ## Learning Points
27 | 
28 | - CSS Grid
29 | - Styling Tables
30 | - Tabs with Javascript
31 | - Positioning
32 | 
33 | ## Some cool stuff
34 | 
35 | Usually, people tend to run to CSS Frameworks to develop and style tabs and switching tabs. But here's a pretty simple, basic way of creating switchable tab content using Vanilla JS:
36 | 
37 | ```javascript
38 | const tabItems = document.querySelectorAll(".tab-item");
39 | const tabContentItems = document.querySelectorAll(".tab-content-item");
40 | 
41 | // Select tab content
42 | function selectItem(e) {
43 |   removeBorder();
44 |   removeShow();
45 |   // Add border to current tab
46 |   this.classList.add("tab-border");
47 |   // Grab content item from DOM
48 |   const tabContentItem = document.querySelector(`#${this.id}-content`);
49 |   // Add show class
50 |   tabContentItem.classList.add("show");
51 | }
52 | function removeBorder() {
53 |   tabItems.forEach(item => item.classList.remove("tab-border"));
54 | }
55 | function removeShow() {
56 |   tabContentItems.forEach(item => item.classList.remove("show"));
57 | }
58 | // Listen for tab click
59 | tabItems.forEach(item => item.addEventListener("click", selectItem));
60 | ```
61 | 
62 | And for the HTML All you really need is this:
63 | 
64 | ```html
65 | <!-- Content Pretty Long so I'll add later -->
66 | <!-- But this is the basic gist -->
67 | <div class="tab-item">
68 |   <!-- Selectors for the different tab content -->
69 | </div>
70 | <div class="tab-content-item">
71 |   <!-- Content of each tab item -->
72 | </div>
73 | <!-- Simply add more selectors and corresponding 
74 | tab content for each selector -->
75 | ```
76 | 
77 | > Also (Just a thought), You could advance this by adding some animations to the selector borders etc.
78 | 
79 | ## Features in Development
80 | 
81 | I might add the other pages on the Netflix website if I ever come back to refactor ^-^
82 | 
83 | ## Contribution
84 | 
85 | Contributions are highly welcome. Feel free to fork, clone, make pull requests, report issues etc.
86 | 
87 | ## Acknowledgments
88 | 
89 | - Many thanks to [@bradtraversy](https://github.com/bradtraversy) for his awesome courses - _i will not fail you sensei_
90 | - Thanks to [@torvalds](https://github.com/torvalds) For Making the world a better place
91 | - And To anyone reading this... _You're awesome!_
92 | 
93 | That being said
94 | _<p align="center">To the Front... to the Back... End to End... cut no slack. Making ends meet. lol</p>_
95 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --primary-color: #e50914;
  3 |   --dark-color: #141414;
  4 | }
  5 | 
  6 | * {
  7 |   box-sizing: border-box;
  8 |   margin: 0;
  9 |   padding: 0;
 10 | }
 11 | 
 12 | body {
 13 |   font-family: "Arial", sans-serif;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   background: #000;
 16 |   color: #999;
 17 | }
 18 | 
 19 | ul {
 20 |   list-style: none;
 21 | }
 22 | 
 23 | h1,
 24 | h2,
 25 | h3,
 26 | h4 {
 27 |   color: #fff;
 28 | }
 29 | 
 30 | a {
 31 |   color: #fff;
 32 |   text-decoration: none;
 33 | }
 34 | 
 35 | p {
 36 |   margin: 0.5rem 0;
 37 | }
 38 | 
 39 | img {
 40 |   width: 100%;
 41 | }
 42 | 
 43 | .showcase {
 44 |   width: 100%;
 45 |   height: 100vh;
 46 |   position: relative;
 47 |   background: url("../img/background.jpg") no-repeat center center/cover;
 48 | }
 49 | 
 50 | .showcase::after {
 51 |   content: "";
 52 |   position: absolute;
 53 |   top: 0;
 54 |   left: 0;
 55 |   width: 100%;
 56 |   height: 100%;
 57 |   z-index: 1;
 58 |   background: rgba(0, 0, 0, 0.6);
 59 |   box-shadow: inset 120px 100px 250px #000, inset -120px -100px 250px #000;
 60 | }
 61 | 
 62 | .showcase-top {
 63 |   position: relative;
 64 |   height: 90px;
 65 |   z-index: 2;
 66 | }
 67 | 
 68 | .showcase-top img {
 69 |   width: 170px;
 70 |   position: absolute;
 71 |   top: 50%;
 72 |   left: 50%;
 73 |   transform: translate(-50%, -50%);
 74 | }
 75 | 
 76 | .showcase-top a {
 77 |   position: absolute;
 78 |   top: 50%;
 79 |   right: 0;
 80 |   transform: translate(-50%, -50%);
 81 | }
 82 | 
 83 | .showcase-content {
 84 |   position: relative;
 85 |   margin: auto;
 86 |   display: flex;
 87 |   flex-direction: column;
 88 |   justify-content: center;
 89 |   align-items: center;
 90 |   text-align: center;
 91 |   margin-top: 9rem;
 92 |   z-index: 2;
 93 | }
 94 | 
 95 | .showcase-content h1 {
 96 |   font-weight: 600;
 97 |   font-size: 4rem;
 98 |   line-height: 1.1;
 99 |   margin: 0 0 2rem 0;
100 | }
101 | 
102 | .showcase-content p {
103 |   text-transform: uppercase;
104 |   color: #fff;
105 |   font-weight: 400;
106 |   font-size: 1.9rem;
107 |   line-height: 1.1;
108 |   margin: 0 0 2rem;
109 | }
110 | 
111 | /* Utility Classes */
112 | 
113 | /* Tabs */
114 | .tabs {
115 |   background: var(--dark-color);
116 |   padding-top: 1rem;
117 |   border-bottom: 3px solid #3d3d3d;
118 | }
119 | 
120 | .tabs .container {
121 |   display: grid;
122 |   grid-template-columns: repeat(3, 1fr);
123 |   grid-gap: 1rem;
124 |   align-items: center;
125 |   justify-content: center;
126 |   text-align: center;
127 | }
128 | 
129 | .tabs p {
130 |   font-size: 1.2rem;
131 |   padding-top: 0.5rem;
132 | }
133 | 
134 | .tabs .container > div {
135 |   padding: 1.5rem 0;
136 | }
137 | 
138 | .tabs .container > div:hover {
139 |   color: #fff;
140 |   cursor: pointer;
141 | }
142 | 
143 | .tab-border {
144 |   border-bottom: var(--primary-color) 4px solid;
145 | }
146 | 
147 | /* Tab Content */
148 | .tab-content {
149 |   padding: 3rem 0;
150 |   background: #000;
151 |   color: #fff;
152 | }
153 | 
154 | /*  Hide content Initially  */
155 | #tab-1-content,
156 | #tab-2-content,
157 | #tab-3-content {
158 |   display: none;
159 | }
160 | 
161 | .show {
162 |   display: block !important;
163 | }
164 | 
165 | #tab-1-content .tab-1-content-inner {
166 |   display: grid;
167 |   grid-template-columns: repeat(2, 1fr);
168 |   grid-gap: 2rem;
169 |   align-items: center;
170 |   justify-content: center;
171 | }
172 | 
173 | #tab-2-content .tab-2-content-top {
174 |   display: grid;
175 |   grid-template-columns: 2fr 1fr;
176 |   grid-gap: 1rem;
177 |   justify-content: center;
178 |   align-items: center;
179 | }
180 | 
181 | #tab-2-content .tab-2-content-bottom {
182 |   margin-top: 2rem;
183 |   display: grid;
184 |   grid-template-columns: repeat(3, 1fr);
185 |   grid-gap: 2rem;
186 |   justify-content: center;
187 |   align-items: center;
188 |   text-align: center;
189 | }
190 | 
191 | /*  Table  */
192 | .table {
193 |   width: 100%;
194 |   margin-top: 2rem;
195 |   border-collapse: collapse;
196 |   border-spacing: 0;
197 | }
198 | 
199 | .table thead th {
200 |   text-transform: uppercase;
201 |   padding: 0.8rem;
202 | }
203 | 
204 | .table tbody tr td {
205 |   color: #999;
206 |   padding: 0.8rem 1.2rem;
207 |   text-align: center;
208 | }
209 | 
210 | .table tbody tr td:first-child {
211 |   text-align: left;
212 | }
213 | 
214 | .table tbody tr:nth-child(odd) {
215 |   background: #222;
216 | }
217 | 
218 | /* Footer */
219 | .footer {
220 |   max-width: 75%;
221 |   margin: 1rem auto;
222 |   overflow: auto;
223 | }
224 | 
225 | .footer,
226 | .footer a {
227 |   color: #999;
228 |   font-size: 0.9rem;
229 | }
230 | 
231 | .footer p {
232 |   margin-bottom: 1.5rem;
233 | }
234 | 
235 | .footer .footer-cols {
236 |   display: grid;
237 |   grid-template-columns: repeat(4, 1fr);
238 |   grid-gap: 2rem;
239 | }
240 | 
241 | .footer li {
242 |   line-height: 1.9;
243 | }
244 | 
245 | /*  Container  */
246 | .container {
247 |   max-width: 70%;
248 |   margin: auto;
249 |   overflow: hidden;
250 |   padding: 0 2rem;
251 | }
252 | 
253 | /* Text Styles */
254 | .text-xl {
255 |   font-size: 2rem;
256 |   margin-bottom: 1rem;
257 | }
258 | 
259 | .text-lg {
260 |   font-size: 1.8rem;
261 |   margin-bottom: 1rem;
262 | }
263 | 
264 | .text-md {
265 |   font-size: 1.5rem;
266 |   margin-bottom: 1rem;
267 | }
268 | 
269 | .text-center {
270 |   text-align: center;
271 | }
272 | 
273 | .text-dark {
274 |   color: #999;
275 | }
276 | 
277 | /* Buttons */
278 | .btn {
279 |   display: inline-block;
280 |   background: var(--primary-color);
281 |   color: #fff;
282 |   padding: 0.4rem 1.3rem;
283 |   font-size: 1rem;
284 |   text-align: center;
285 |   border: none;
286 |   cursor: pointer;
287 |   margin-right: 0.5rem;
288 |   outline: none;
289 |   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
290 |   border-radius: 2px;
291 | }
292 | 
293 | .btn:hover {
294 |   opacity: 0.9;
295 | }
296 | 
297 | .btn-rounded {
298 |   border-radius: 5px;
299 | }
300 | 
301 | .btn-xl {
302 |   font-size: 1.6rem;
303 |   padding: 1.5rem 2.1rem;
304 |   text-transform: uppercase;
305 | }
306 | 
307 | .btn-lg {
308 |   font-size: 1.5rem;
309 |   padding: 1.2rem 1.7rem;
310 |   text-transform: uppercase;
311 | }
312 | 
313 | .btn-icon {
314 |   margin-left: 0.5rem;
315 | }
316 | 
317 | /*  Media Queries  */
318 | @media (max-width: 960px) {
319 |   .showcase {
320 |     height: 100vh;
321 |   }
322 | 
323 |   .hide-sm {
324 |     display: none;
325 |   }
326 | 
327 |   .showcase-top img {
328 |     top: 30%;
329 |     left: 5%;
330 |     transform: translate(0);
331 |   }
332 | 
333 |   .showcase-top a {
334 |     top: 30%;
335 |     right: 5%;
336 |     transform: translate(0);
337 |   }
338 | 
339 |   .showcase-content h1 {
340 |     font-size: 2rem;
341 |     line-height: 0.5;
342 |   }
343 | 
344 |   .showcase-content p {
345 |     font-size: 1rem;
346 |   }
347 | 
348 |   .footer .footer-cols {
349 |     grid-template-columns: repeat(2, 1fr);
350 |   }
351 | 
352 |   .btn-xl {
353 |     font-size: 1rem;
354 |     padding: 1rem 1.2rem;
355 |   }
356 | 
357 |   .btn-lg {
358 |     font-size: 0.8rem;
359 |     padding: 0.8rem 1rem;
360 |   }
361 | 
362 |   .text-xl {
363 |     font-size: 1.5rem;
364 |   }
365 | 
366 |   .text-lg {
367 |     font-size: 1.2rem;
368 |   }
369 | 
370 |   .text-md {
371 |     font-size: 1rem;
372 |   }
373 | }
374 | 
375 | @media (max-width: 700px) {
376 |   .showcase::after {
377 |     box-shadow: inset 50px 50px 150px #000, inset -50px -50px 150px #000;
378 |   }
379 | 
380 |   .container {
381 |     max-width: 90%;
382 |     margin: auto;
383 |     overflow: hidden;
384 |     padding: 0px 0.1rem;
385 |   }
386 | 
387 |   #tab-1-content .tab-1-content-inner {
388 |     grid-template-columns: 1fr;
389 |     text-align: center;
390 |   }
391 | 
392 |   #tab-2-content .tab-2-content-top {
393 |     display: block;
394 |     text-align: center;
395 |   }
396 | 
397 |   #tab-2-content .tab-2-content-bottom {
398 |     grid-template-columns: 1fr;
399 |   }
400 | 
401 |   .btn-lg {
402 |     font-size: 1rem;
403 |     padding: 0.8rem 1rem;
404 |     text-transform: uppercase;
405 |   }
406 | 
407 |   .tab-item > i {
408 |     font-size: 1.3rem;
409 |   }
410 | 
411 |   .footer .footer-cols {
412 |     grid-template-columns: 1fr;
413 |   }
414 | }
415 | 


--------------------------------------------------------------------------------
/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bankole2000/netflix/5615e5eb36c391c98376232aa6e91433df7d8d8e/img/background.jpg


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bankole2000/netflix/5615e5eb36c391c98376232aa6e91433df7d8d8e/img/logo.png


--------------------------------------------------------------------------------
/img/tab-content-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bankole2000/netflix/5615e5eb36c391c98376232aa6e91433df7d8d8e/img/tab-content-1.png


--------------------------------------------------------------------------------
/img/tab-content-2-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bankole2000/netflix/5615e5eb36c391c98376232aa6e91433df7d8d8e/img/tab-content-2-1.png


--------------------------------------------------------------------------------
/img/tab-content-2-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bankole2000/netflix/5615e5eb36c391c98376232aa6e91433df7d8d8e/img/tab-content-2-2.png


--------------------------------------------------------------------------------
/img/tab-content-2-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Bankole2000/netflix/5615e5eb36c391c98376232aa6e91433df7d8d8e/img/tab-content-2-3.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <link
  8 |       rel="stylesheet"
  9 |       href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
 10 |       integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
 11 |       crossorigin="anonymous"
 12 |     />
 13 |     <link rel="stylesheet" href="css/style.css" />
 14 |     <title></title>
 15 |   </head>
 16 |   <body>
 17 |     <header class="showcase">
 18 |       <div class="showcase-top">
 19 |         <img src="img/logo.png" alt="Netflix" />
 20 |         <a href="#" class="btn btn-rounded">Sign In</a>
 21 |       </div>
 22 |       <div class="showcase-content">
 23 |         <h1>See what's next</h1>
 24 |         <p>Watch anywhere. Cancel anytime</p>
 25 |         <a href="#" class="btn btn-xl"
 26 |           >Watch Free For 30 Days <i class="fas fa-chevron-right btn-icon"></i
 27 |         ></a>
 28 |       </div>
 29 |     </header>
 30 | 
 31 |     <section class="tabs">
 32 |       <div class="container">
 33 |         <div id="tab-1" class="tab-item tab-border">
 34 |           <i class="fas fa-door-open fa-3x"></i>
 35 |           <p class="hide-sm">Cancel Anytime</p>
 36 |         </div>
 37 |         <div id="tab-2" class="tab-item">
 38 |           <i class="fas fa-tablet-alt fa-3x"></i>
 39 |           <p class="hide-sm">Watch anywhere</p>
 40 |         </div>
 41 |         <div id="tab-3" class="tab-item">
 42 |           <i class="fas fa-tags fa-3x"></i>
 43 |           <p class="hide-sm">Pick your price</p>
 44 |         </div>
 45 |       </div>
 46 |     </section>
 47 | 
 48 |     <section class="tab-content">
 49 |       <div class="container">
 50 |         <!-- Tab Content 1 -->
 51 |         <div id="tab-1-content" class="tab-content-item show">
 52 |           <div class="tab-1-content-inner">
 53 |             <div>
 54 |               <p class="text-lg">
 55 |                 If you decide Netflix isn't for you - no problem. No commitment.
 56 |                 Cancel online anytime.
 57 |               </p>
 58 |               <a href="#" class="btn btn-lg">Watch Free for 30 days</a>
 59 |             </div>
 60 |             <img src="img/tab-content-1.png" alt="" />
 61 |           </div>
 62 |         </div>
 63 | 
 64 |         <!-- Tab Content 2 -->
 65 |         <div id="tab-2-content" class="tab-content-item">
 66 |           <div class="tab-2-content-top">
 67 |             <p class="text-lg">
 68 |               Watch TV shows and movies anytime, anywhere - personalized for
 69 |               you.
 70 |             </p>
 71 |             <a href="#" class="btn btn-lg">Watch Free for 30 days</a>
 72 |           </div>
 73 |           <div class="tab-2-content-bottom">
 74 |             <div>
 75 |               <img src="img/tab-content-2-1.png" alt="" />
 76 |               <p class="text-md">Watch on your TV</p>
 77 |               <p class="text-dark">
 78 |                 Smart TVs, PlayStation, Xbox, Chromecase, Apple TV, Blu-ray
 79 |                 players and more.
 80 |               </p>
 81 |             </div>
 82 | 
 83 |             <div>
 84 |               <img src="img/tab-content-2-2.png" alt="" />
 85 |               <p class="text-md">Watch instantly or download for later</p>
 86 |               <p class="text-dark">
 87 |                 Available on phone and tablet, wherever you go
 88 |               </p>
 89 |             </div>
 90 | 
 91 |             <div>
 92 |               <img src="img/tab-content-2-3.png" alt="" />
 93 |               <p class="text-md">Use any computer</p>
 94 |               <p class="text-dark">
 95 |                 Watch right on Netflix.com
 96 |               </p>
 97 |             </div>
 98 |           </div>
 99 |         </div>
100 | 
101 |         <!-- Tab Content 3 -->
102 |         <div id="tab-3-content" class="tab-content-item">
103 |           <div class="text-center">
104 |             <p class="text-lg">
105 |               Choose one pland and watch everything on Netflix
106 |             </p>
107 |             <a href="#" class="btn btn-lg">Watch Free For 30 days</a>
108 |           </div>
109 | 
110 |           <table class="table">
111 |             <thead>
112 |               <tr>
113 |                 <th></th>
114 |                 <th>Basic</th>
115 |                 <th>Standard</th>
116 |                 <th>Premium</th>
117 |               </tr>
118 |             </thead>
119 |             <tbody>
120 |               <tr>
121 |                 <td>Monthly price after free month ends on 6/19/19</td>
122 |                 <td>$8.99</td>
123 |                 <td>$12.99</td>
124 |                 <td>$15.99</td>
125 |               </tr>
126 |               <tr>
127 |                 <td>HD Available</td>
128 |                 <td><i class="fas fa-times"></i></td>
129 |                 <td><i class="fas fa-check"></i></td>
130 |                 <td><i class="fas fa-check"></i></td>
131 |               </tr>
132 |               <tr>
133 |                 <td>Ultra HD Available</td>
134 |                 <td><i class="fas fa-times"></i></td>
135 |                 <td><i class="fas fa-check"></i></td>
136 |                 <td><i class="fas fa-check"></i></td>
137 |               </tr>
138 |               <tr>
139 |                 <td>Screens you can watch at the same time</td>
140 |                 <td><i class="fas fa-times"></i></td>
141 |                 <td><i class="fas fa-check"></i></td>
142 |                 <td><i class="fas fa-check"></i></td>
143 |               </tr>
144 |               <tr>
145 |                 <td>Watch on your laptop, TV, phone and tablet</td>
146 |                 <td><i class="fas fa-check"></i></td>
147 |                 <td><i class="fas fa-check"></i></td>
148 |                 <td><i class="fas fa-check"></i></td>
149 |               </tr>
150 |               <tr>
151 |                 <td>Unlimited Movies and TV shows</td>
152 |                 <td><i class="fas fa-check"></i></td>
153 |                 <td><i class="fas fa-check"></i></td>
154 |                 <td><i class="fas fa-check"></i></td>
155 |               </tr>
156 |               <tr>
157 |                 <td>Cancel anytime</td>
158 |                 <td><i class="fas fa-check"></i></td>
159 |                 <td><i class="fas fa-check"></i></td>
160 |                 <td><i class="fas fa-check"></i></td>
161 |               </tr>
162 |               <tr>
163 |                 <td>First month Free</td>
164 |                 <td><i class="fas fa-check"></i></td>
165 |                 <td><i class="fas fa-check"></i></td>
166 |                 <td><i class="fas fa-check"></i></td>
167 |               </tr>
168 |             </tbody>
169 |           </table>
170 |         </div>
171 |       </div>
172 |     </section>
173 | 
174 |     <footer class="footer">
175 |       <p>Questions? Call 1-866-579-7127</p>
176 |       <div class="footer-cols">
177 |         <ul>
178 |           <li><a href="#">FAQ</a></li>
179 |           <li><a href="#">Investor Relations</a></li>
180 |           <li><a href="#">Ways To Watch</a></li>
181 |           <li><a href="#">Corporate Information</a></li>
182 |           <li><a href="#">Netflix Originals</a></li>
183 |         </ul>
184 |         <ul>
185 |           <li><a href="#">Help Center</a></li>
186 |           <li><a href="#">Jobs</a></li>
187 |           <li><a href="#">Terms Of Use</a></li>
188 |           <li><a href="#">Contact Us</a></li>
189 |         </ul>
190 |         <ul>
191 |           <li><a href="#">Account</a></li>
192 |           <li><a href="#">Redeem Gift Cards</a></li>
193 |           <li><a href="#">Privacy</a></li>
194 |           <li><a href="#">Speed Test</a></li>
195 |         </ul>
196 |         <ul>
197 |           <li><a href="#">Media Center</a></li>
198 |           <li><a href="#">Buy Gift Cards</a></li>
199 |           <li><a href="#">Cookie Preferences</a></li>
200 |           <li><a href="#">Legal Notices</a></li>
201 |         </ul>
202 |       </div>
203 |     </footer>
204 |     <script src="js/main.js"></script>
205 |   </body>
206 | </html>
207 | 


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
 1 | const tabItems = document.querySelectorAll(".tab-item");
 2 | const tabContentItems = document.querySelectorAll(".tab-content-item");
 3 | 
 4 | // Select tab content
 5 | function selectItem(e) {
 6 |   removeBorder();
 7 |   removeShow();
 8 |   // Add border to current tab
 9 |   this.classList.add("tab-border");
10 |   // Grab content item from DOM
11 |   const tabContentItem = document.querySelector(`#${this.id}-content`);
12 |   // Add show class
13 |   tabContentItem.classList.add("show");
14 | }
15 | 
16 | function removeBorder() {
17 |   tabItems.forEach(item => item.classList.remove("tab-border"));
18 | }
19 | 
20 | function removeShow() {
21 |   tabContentItems.forEach(item => item.classList.remove("show"));
22 | }
23 | 
24 | // Listen for tab click
25 | tabItems.forEach(item => item.addEventListener("click", selectItem));
26 | 


--------------------------------------------------------------------------------