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

Commitabc81d7

Browse files
committed
add header
1 parent8556c68 commitabc81d7

File tree

4 files changed

+165
-0
lines changed

4 files changed

+165
-0
lines changed

‎100-hulu webpage clone/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!-- Based on Hulu Webpage Clone | HTML & CSS by Brad Traversy (2021)
2+
see: https://www.youtube.com/watch?v=9OVLaEjY-Rc -->
3+
4+
<!DOCTYPE html>
5+
<htmllang="en">
6+
<head>
7+
<metacharset="UTF-8"/>
8+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
9+
<linkrel="stylesheet"href="style.css"/>
10+
<title>Stream TV and Movies Live and Online | Hulu</title>
11+
</head>
12+
<body>
13+
<headerclass="header">
14+
<nav>
15+
<ul>
16+
<li>
17+
<buttonclass="login-btn">Log In</button>
18+
</li>
19+
</ul>
20+
</nav>
21+
<divclass="header-content">
22+
<h4>Try up to one month free</h4>
23+
<img
24+
src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/logo.png?raw=true"
25+
alt="Hulu"
26+
class="logo"
27+
/>
28+
<divclass="header-text-1">Watch thousands of TV shows and movies.</div>
29+
<divclass="header-text-2">
30+
HBO Max™, SHOWTIME®, CINEMAX® and STARZ® available as add-ons.
31+
</div>
32+
<buttonclass="btn btn-cta">Start Your Free Trial</button>
33+
<divclass="legal-text">
34+
Free trial for new & eligible returning subscribers only.
35+
</div>
36+
</div>
37+
</header>
38+
<scriptsrc="script.js"></script>
39+
</body>
40+
</html>

‎100-hulu webpage clone/script.js

Whitespace-only changes.

‎100-hulu webpage clone/style.css

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
@importurl("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin:0;
6+
padding:0;
7+
}
8+
9+
html,
10+
body {
11+
font-family:"Rubik", sans-serif;
12+
background-color:#000;
13+
color:#fff;
14+
line-height:1.7;
15+
overflow-x: hidden;
16+
}
17+
18+
a {
19+
color:#fff;
20+
text-decoration: none;
21+
}
22+
23+
a:hover {
24+
color:#ccc;
25+
}
26+
27+
ul {
28+
list-style-type: none;
29+
}
30+
31+
img {
32+
width:100%;
33+
}
34+
35+
h4 {
36+
color:#00ed82;
37+
font-size:13px;
38+
text-transform: uppercase;
39+
}
40+
41+
.btn {
42+
display: inline-block;
43+
background:#fff;
44+
color:#333;
45+
min-width:135px;
46+
padding:20px32px;
47+
font-size:15px;
48+
font-weight:600;
49+
line-height:14px;
50+
border: none;
51+
border-radius:5px;
52+
letter-spacing:1px;
53+
cursor: pointer;
54+
text-transform: uppercase;
55+
}
56+
57+
.btn-cta:hover {
58+
opacity:0.8;
59+
}
60+
61+
.legal-text {
62+
font-size:10px;
63+
color:#ccc;
64+
margin-top:20px;
65+
}
66+
67+
/* Header */
68+
69+
.header {
70+
height:530px;
71+
background:url(https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/header.jpg?raw=true)
72+
no-repeat center center/ cover;
73+
}
74+
75+
.headernav {
76+
display: flex;
77+
justify-content: flex-end;
78+
padding:20px40px;
79+
}
80+
81+
.headernav .login-btn {
82+
cursor: pointer;
83+
background: none;
84+
border: none;
85+
color:#fff;
86+
font-weight: bold;
87+
text-transform: uppercase;
88+
letter-spacing:1px;
89+
}
90+
91+
.header .header-content {
92+
display: flex;
93+
flex-direction: column;
94+
justify-content: flex-start;
95+
align-items: center;
96+
margin-top:30px;
97+
}
98+
99+
.header .logo {
100+
width:270px;
101+
margin:20px0;
102+
}
103+
104+
.header .header-text-1 {
105+
font-size:22px;
106+
font-weight: bold;
107+
}
108+
109+
.header .header-text-2 {
110+
font-size:18px;
111+
margin:25px0;
112+
}
113+
114+
/* Media Queries */
115+
@media (max-width:768px) {
116+
.header .logo {
117+
width:200px;
118+
}
119+
120+
.header .header-content {
121+
text-align: center;
122+
padding:020px;
123+
}
124+
}

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
| 97|[Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/97-terminal%20style%20landing%20page)|[Live Demo](https://codepen.io/solygambas/full/BaWvXLG)|
106106
| 98|[Magazine Layout](https://github.com/solygambas/html-css-fifty-projects/tree/master/98-magazine%20layout)|[Live Demo](https://codepen.io/solygambas/full/OJpGMyj)|
107107
| 99|[Parallax Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/99-parallax%20website)|[Live Demo](https://codepen.io/solygambas/full/poeBdPr)|
108+
| 100|[Hulu Webpage Clone](https://github.com/solygambas/html-css-fifty-projects/tree/master/100-hulu%20webpage%20clone)|[Live Demo](#)|
108109

109110
This repository is mostly based on 2 courses by Brad Traversy (2020):
110111

0 commit comments

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