Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit20a117f

Browse files
committed
add live sports and footer
1 parent80fc011 commit20a117f

File tree

2 files changed

+231
-0
lines changed

2 files changed

+231
-0
lines changed

‎100-hulu webpage clone/index.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,135 @@ <h4>Hulu + Live TV</h4>
104104
<ahref="#">View Channels in Your Area</a>
105105
</div>
106106
</section>
107+
<sectionclass="live-sports">
108+
<divclass="live-sports-content">
109+
<divclass="text-xl">Live Sports</div>
110+
<divclass="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+
<divclass="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+
<divclass="legal-text">
143+
Live TV plan required. Regional restrictions, blackouts and additional
144+
terms apply. See details
145+
</div>
146+
</div>
147+
</section>
148+
<footerclass="footer">
149+
<divclass="footer-container">
150+
<divclass="footer-lists">
151+
<ul>
152+
<liclass="list-head">BROWSE</li>
153+
<li><ahref="#">Streaming Library</a></li>
154+
<li><ahref="#">Live TV</a></li>
155+
<li><ahref="#">Live News</a></li>
156+
<li><ahref="#">Live Sports</a></li>
157+
</ul>
158+
<ul>
159+
<li><ahref="#">TV Shows</a></li>
160+
<li><ahref="#">Movies</a></li>
161+
<li><ahref="#">Originals</a></li>
162+
<li><ahref="#">Networks</a></li>
163+
<li><ahref="#">Kids</a></li>
164+
<li><ahref="#">FX on Hulu</a></li>
165+
</ul>
166+
<ul>
167+
<li><ahref="#">Hulu, Disney+, and ESPN+</a></li>
168+
<li><ahref="#">Disney Bundle</a></li>
169+
<li><ahref="#">HBO Max</a></li>
170+
<li><ahref="#">Cinimax</a></li>
171+
<li><ahref="#">Showtime</a></li>
172+
<li><ahref="#">STARZ</a></li>
173+
</ul>
174+
<ul>
175+
<liclass="list-head">HELP</li>
176+
<li><ahref="#">Account & Billing</a></li>
177+
<li><ahref="#">Plans & Pricing</a></li>
178+
<li><ahref="#">Supported Devices</a></li>
179+
<li><ahref="#">Accesibility</a></li>
180+
</ul>
181+
<ul>
182+
<liclass="list-head">ABOUT US</li>
183+
<li><ahref="#">Press</a></li>
184+
<li><ahref="#">Jobs</a></li>
185+
<li><ahref="#">Contact</a></li>
186+
</ul>
187+
</div>
188+
<divclass="divider"></div>
189+
<divclass="social-icons">
190+
<ahref="#"
191+
><img
192+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/facebook.svg?raw=true"
193+
alt=""
194+
/></a>
195+
<ahref="#"
196+
><img
197+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/twitter.svg?raw=true"
198+
alt=""
199+
/></a>
200+
<ahref="#"
201+
><img
202+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/youtube.svg?raw=true"
203+
alt=""
204+
/></a>
205+
<ahref="#"
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+
<divclass="modal">
214+
<divclass="modal-box">
215+
<divclass="modal-body">
216+
<h3>Log In</h3>
217+
<form>
218+
<divclass="form-control">
219+
<labelfor="email">Email</label>
220+
<inputtype="email"id="email"/>
221+
</div>
222+
<divclass="form-control">
223+
<labelfor="password">Password</label>
224+
<inputtype="password"id="password"/>
225+
</div>
226+
<p><ahref="#">Forgot your email or password</a></p>
227+
<buttonclass="btn btn-dark">Log In</button>
228+
</form>
229+
</div>
230+
<divclass="modal-footer">
231+
<p>Don't have an account?<ahref="#">Start your free trial</a></p>
232+
</div>
233+
<imgclass="close"src="img/close.svg"alt="close"/>
234+
</div>
235+
</div>
107236
<scriptsrc="script.js"></script>
108237
</body>
109238
</html>

‎100-hulu webpage clone/style.css

Lines changed: 102 additions & 0 deletions
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-logosimg {
314+
width:40px;
315+
}
316+
317+
/* Footer */
318+
319+
.footer {
320+
background:#ebedf2;
321+
color:#333;
322+
}
323+
324+
.footera {
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:30px0;
350+
}
351+
352+
.social-iconsimg {
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:30px10px;
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)
[8]ページ先頭
©2009-2025 Movatter.jp