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

Commit80fc011

Browse files
committed
add categories and live
1 parentdaf41a0 commit80fc011

File tree

3 files changed

+203
-2
lines changed

3 files changed

+203
-2
lines changed

‎100-hulu webpage clone/index.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,60 @@ <h3>Get Hulu, Disney+, and ESPN+.</h3>
5050
<ahref="#"class="sub-link">Terms apply</a>
5151
</div>
5252
</section>
53+
<sectionclass="categories">
54+
<h4>Included in all plans</h4>
55+
<divclass="text-xl">All the TV You Love</div>
56+
<divclass="sub-text">
57+
Stream full seasons of exclusive series, current-season episodes, hit
58+
movies, Hulu Originals, kids shows, and more.
59+
</div>
60+
<divclass="covers">
61+
<divclass="cover-1">
62+
<divclass="cover-grad"></div>
63+
<divclass="cover-text">
64+
<divclass="sub-title">Past & Current Seasons</div>
65+
<h3>TV Shows</h3>
66+
</div>
67+
</div>
68+
<divclass="cover-2">
69+
<divclass="cover-grad"></div>
70+
<divclass="cover-text">
71+
<divclass="sub-title">New & Classics</div>
72+
<h3>Movies</h3>
73+
</div>
74+
</div>
75+
<divclass="cover-3">
76+
<divclass="cover-grad"></div>
77+
<divclass="cover-text">
78+
<divclass="sub-title">Groundbreaking</div>
79+
<h3>Hulu Originals</h3>
80+
</div>
81+
</div>
82+
<divclass="cover-4">
83+
<divclass="cover-grad"></div>
84+
<divclass="cover-text">
85+
<divclass="sub-title">Add-On</div>
86+
<h3>Premiums</h3>
87+
</div>
88+
</div>
89+
</div>
90+
</section>
91+
<sectionclass="live">
92+
<divclass="live-border">
93+
<h4>Hulu + Live TV</h4>
94+
<divclass="text-xl">Live TV Makes It Better</div>
95+
<divclass="sub-text">
96+
Make the switch from cable. Get 75+ top channels with your favorite
97+
live sports, news, and events - plus the entire Hulu streaming
98+
library.
99+
</div>
100+
<divclass="legal-text">
101+
Live TV plan required. Regional restrictions, blackouts and additional
102+
terms apply. See details
103+
</div>
104+
<ahref="#">View Channels in Your Area</a>
105+
</div>
106+
</section>
53107
<scriptsrc="script.js"></script>
54108
</body>
55109
</html>

‎100-hulu webpage clone/style.css

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,17 @@ h4 {
8888
text-decoration: underline;
8989
}
9090

91+
.text-xl {
92+
font-size:70px;
93+
font-weight: bold;
94+
}
95+
96+
.sub-text {
97+
max-width:850px;
98+
margin-bottom:10px;
99+
font-size:24px;
100+
}
101+
91102
/* Header */
92103

93104
.header {
@@ -100,6 +111,8 @@ h4 {
100111
display: flex;
101112
justify-content: flex-end;
102113
padding:20px40px;
114+
z-index:2;
115+
position: relative;
103116
}
104117

105118
.headernav .login-btn {
@@ -135,7 +148,24 @@ h4 {
135148
margin:25px0;
136149
}
137150

151+
.header::after {
152+
content:"";
153+
position: absolute;
154+
top:0;
155+
left:0;
156+
width:100%;
157+
height:180px;
158+
z-index:1;
159+
background:linear-gradient(
160+
180deg,
161+
rgba(0,0,0,0.76)15.54%,
162+
rgba(0,0,0,0.192)60.23%,
163+
rgba(0,0,0,8e-5)100%
164+
);
165+
}
166+
138167
/* Sub Header */
168+
139169
.sub-header {
140170
display: grid;
141171
grid-template-columns:2fr4fr2fr;
@@ -159,7 +189,107 @@ h4 {
159189
text-align: center;
160190
}
161191

192+
/* Categories */
193+
194+
.categories {
195+
display: flex;
196+
flex-direction: column;
197+
align-items: center;
198+
justify-content: center;
199+
text-align: center;
200+
padding:90px40px;
201+
}
202+
203+
.categories .covers {
204+
display: grid;
205+
grid-template-columns:repeat(4,1fr);
206+
gap:20px;
207+
margin-top:40px;
208+
}
209+
210+
.categories .covers>div {
211+
height:500px;
212+
width:300px;
213+
position: relative;
214+
}
215+
216+
.categories .cover-grad {
217+
position: absolute;
218+
top:0;
219+
left:0;
220+
width:100%;
221+
height:100%;
222+
background:linear-gradient(
223+
156.82deg,
224+
rgba(0,0,0,0.6)4.58%,
225+
rgba(0,0,0,0)69.61%
226+
),
227+
linear-gradient(24.5deg,rgba(0,0,0,0.2)4.71%,rgba(0,0,0,0)71.49%);
228+
}
229+
230+
.categories .cover-text {
231+
position: absolute;
232+
top:20px;
233+
left:20px;
234+
text-align: left;
235+
}
236+
237+
.categories .cover-1 {
238+
background:url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-1.jpg?raw=true")
239+
no-repeat center center/ cover;
240+
}
241+
.categories .cover-2 {
242+
background:url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-2.jpg?raw=true")
243+
no-repeat center center/ cover;
244+
}
245+
.categories .cover-3 {
246+
background:url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-3.jpg?raw=true")
247+
no-repeat center center/ cover;
248+
}
249+
.categories .cover-4 {
250+
background:url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-4.jpg?raw=true")
251+
no-repeat center center/ cover;
252+
}
253+
254+
/* Live */
255+
256+
.live {
257+
background-color:#151516;
258+
padding:40px;
259+
}
260+
261+
.live-border {
262+
border:4px solid#1ce783;
263+
border-radius:16px;
264+
padding:100px;
265+
display: flex;
266+
flex-direction: column;
267+
align-items: center;
268+
justify-content: center;
269+
text-align: center;
270+
}
271+
272+
.livea {
273+
text-transform: uppercase;
274+
font-size:18px;
275+
margin-top:20px;
276+
text-decoration: underline;
277+
}
278+
162279
/* Media Queries */
280+
281+
@media (max-width:1300px) {
282+
.categories .covers {
283+
grid-template-columns:repeat(3,1fr);
284+
}
285+
}
286+
287+
@media (max-width:1100px) {
288+
.categories .covers {
289+
grid-template-columns:1fr1fr;
290+
}
291+
}
292+
163293
@media (max-width:768px) {
164294
.header .logo {
165295
width:200px;
@@ -193,4 +323,21 @@ h4 {
193323
justify-self: center;
194324
align-self: center;
195325
}
326+
327+
.text-xl {
328+
font-size:40px;
329+
line-height:1.3;
330+
}
331+
332+
.sub-text {
333+
font-size:20px;
334+
}
335+
336+
.categories .covers {
337+
grid-template-columns:1fr;
338+
}
339+
340+
.live-border {
341+
padding:30px10px;
342+
}
196343
}

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
#90 Projects In90 Days - HTML, CSS & JavaScript
1+
#100 Projects In100 Days - HTML, CSS & JavaScript
22

3-
90+ mini web projects using HTML, CSS and JavaScript.
3+
100+ mini web projects using HTML, CSS and JavaScript.
44

55
[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at)
66

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp