Skip to content

Commit 20a117f

Browse files
solygambassolygambas
committed
add live sports and footer
1 parent 80fc011 commit 20a117f

File tree

2 files changed

+231
-0
lines changed

2 files changed

+231
-0
lines changed

‎100-hulu webpage clone/index.html

+129
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,135 @@ <h4>Hulu + Live TV</h4>
104104
<a href="#">View Channels in Your Area</a>
105105
</div>
106106
</section>
107+
<section class="live-sports">
108+
<div class="live-sports-content">
109+
<div class="text-xl">Live Sports</div>
110+
<div class="sub-text">
111+
Catch your games at home or on the go. Stream live games from major
112+
college and pro leagues including the NCAA®, NBA, NHL, NFL, and more.
113+
</div>
114+
115+
<div class="live-sports-logos">
116+
<div>
117+
<img
118+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/live-sports-logo-1.png?raw=true"
119+
alt=""
120+
/>
121+
</div>
122+
<div>
123+
<img
124+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/live-sports-logo-2.png?raw=true"
125+
alt=""
126+
/>
127+
</div>
128+
<div>
129+
<img
130+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/live-sports-logo-3.svg?raw=true"
131+
alt=""
132+
/>
133+
</div>
134+
<div>
135+
<img
136+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/live-sports-logo-4.png?raw=true"
137+
alt=""
138+
/>
139+
</div>
140+
</div>
141+
142+
<div class="legal-text">
143+
Live TV plan required. Regional restrictions, blackouts and additional
144+
terms apply. See details
145+
</div>
146+
</div>
147+
</section>
148+
<footer class="footer">
149+
<div class="footer-container">
150+
<div class="footer-lists">
151+
<ul>
152+
<li class="list-head">BROWSE</li>
153+
<li><a href="#">Streaming Library</a></li>
154+
<li><a href="#">Live TV</a></li>
155+
<li><a href="#">Live News</a></li>
156+
<li><a href="#">Live Sports</a></li>
157+
</ul>
158+
<ul>
159+
<li><a href="#">TV Shows</a></li>
160+
<li><a href="#">Movies</a></li>
161+
<li><a href="#">Originals</a></li>
162+
<li><a href="#">Networks</a></li>
163+
<li><a href="#">Kids</a></li>
164+
<li><a href="#">FX on Hulu</a></li>
165+
</ul>
166+
<ul>
167+
<li><a href="#">Hulu, Disney+, and ESPN+</a></li>
168+
<li><a href="#">Disney Bundle</a></li>
169+
<li><a href="#">HBO Max</a></li>
170+
<li><a href="#">Cinimax</a></li>
171+
<li><a href="#">Showtime</a></li>
172+
<li><a href="#">STARZ</a></li>
173+
</ul>
174+
<ul>
175+
<li class="list-head">HELP</li>
176+
<li><a href="#">Account & Billing</a></li>
177+
<li><a href="#">Plans & Pricing</a></li>
178+
<li><a href="#">Supported Devices</a></li>
179+
<li><a href="#">Accesibility</a></li>
180+
</ul>
181+
<ul>
182+
<li class="list-head">ABOUT US</li>
183+
<li><a href="#">Press</a></li>
184+
<li><a href="#">Jobs</a></li>
185+
<li><a href="#">Contact</a></li>
186+
</ul>
187+
</div>
188+
<div class="divider"></div>
189+
<div class="social-icons">
190+
<a href="#"
191+
><img
192+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/facebook.svg?raw=true"
193+
alt=""
194+
/></a>
195+
<a href="#"
196+
><img
197+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/twitter.svg?raw=true"
198+
alt=""
199+
/></a>
200+
<a href="#"
201+
><img
202+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/youtube.svg?raw=true"
203+
alt=""
204+
/></a>
205+
<a href="#"
206+
><img
207+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/instagram.svg?raw=true"
208+
alt=""
209+
/></a>
210+
</div>
211+
</div>
212+
</footer>
213+
<div class="modal">
214+
<div class="modal-box">
215+
<div class="modal-body">
216+
<h3>Log In</h3>
217+
<form>
218+
<div class="form-control">
219+
<label for="email">Email</label>
220+
<input type="email" id="email" />
221+
</div>
222+
<div class="form-control">
223+
<label for="password">Password</label>
224+
<input type="password" id="password" />
225+
</div>
226+
<p><a href="#">Forgot your email or password</a></p>
227+
<button class="btn btn-dark">Log In</button>
228+
</form>
229+
</div>
230+
<div class="modal-footer">
231+
<p>Don't have an account? <a href="#">Start your free trial</a></p>
232+
</div>
233+
<img class="close" src="img/close.svg" alt="close" />
234+
</div>
235+
</div>
107236
<script src="script.js"></script>
108237
</body>
109238
</html>

‎100-hulu webpage clone/style.css

+102
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,85 @@ h4 {
276276
text-decoration: underline;
277277
}
278278

279+
/* Live Sports */
280+
281+
.live-sports {
282+
background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/live-sports.jpg?raw=true")
283+
no-repeat center center / cover;
284+
height: 800px;
285+
position: relative;
286+
}
287+
288+
.live-sports-content {
289+
position: absolute;
290+
top: 160px;
291+
left: 100px;
292+
max-width: 550px;
293+
}
294+
295+
.live-sports-logos {
296+
width: 300px;
297+
margin-top: 40px;
298+
display: flex;
299+
align-items: center;
300+
justify-content: space-between;
301+
}
302+
303+
.live-sports-logos > div {
304+
background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/network-logo-bg.png?raw=true")
305+
no-repeat center center / cover;
306+
height: 60px;
307+
width: 60px;
308+
display: flex;
309+
justify-content: center;
310+
align-items: center;
311+
}
312+
313+
.live-sports-logos img {
314+
width: 40px;
315+
}
316+
317+
/* Footer */
318+
319+
.footer {
320+
background: #ebedf2;
321+
color: #333;
322+
}
323+
324+
.footer a {
325+
color: #333;
326+
}
327+
328+
.footer-container {
329+
max-width: 1100px;
330+
margin: auto;
331+
padding: 40px;
332+
}
333+
334+
.footer-lists {
335+
display: flex;
336+
justify-content: space-between;
337+
}
338+
339+
.footer-lists .list-head {
340+
text-transform: uppercase;
341+
font-weight: bold;
342+
margin-bottom: 5px;
343+
}
344+
345+
.divider {
346+
width: 100%;
347+
height: 3px;
348+
border-top: 1px solid #ccc;
349+
margin: 30px 0;
350+
}
351+
352+
.social-icons img {
353+
width: 25px;
354+
height: 25px;
355+
margin-right: 25px;
356+
}
357+
279358
/* Media Queries */
280359

281360
@media (max-width: 1300px) {
@@ -340,4 +419,27 @@ h4 {
340419
.live-border {
341420
padding: 30px 10px;
342421
}
422+
423+
.live-sports {
424+
background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/live-sports-small.jpg?raw=true")
425+
no-repeat center center / cover;
426+
}
427+
428+
.live-sports-content {
429+
top: 30px;
430+
left: 30px;
431+
margin-top: 60px;
432+
}
433+
434+
.footer-lists {
435+
flex-direction: column;
436+
}
437+
438+
.footer-lists .list-head {
439+
margin-top: 10px;
440+
}
441+
442+
.modal .modal-box {
443+
width: 350px;
444+
}
343445
}

0 commit comments

Comments
 (0)