Skip to content

Commit abc81d7

Browse files
solygambassolygambas
committed
add header
1 parent 8556c68 commit abc81d7

File tree

4 files changed

+165
-0
lines changed

4 files changed

+165
-0
lines changed

‎100-hulu webpage clone/index.html

+40
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+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Stream TV and Movies Live and Online | Hulu</title>
11+
</head>
12+
<body>
13+
<header class="header">
14+
<nav>
15+
<ul>
16+
<li>
17+
<button class="login-btn">Log In</button>
18+
</li>
19+
</ul>
20+
</nav>
21+
<div class="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+
<div class="header-text-1">Watch thousands of TV shows and movies.</div>
29+
<div class="header-text-2">
30+
HBO Max™, SHOWTIME®, CINEMAX® and STARZ® available as add-ons.
31+
</div>
32+
<button class="btn btn-cta">Start Your Free Trial</button>
33+
<div class="legal-text">
34+
Free trial for new & eligible returning subscribers only.
35+
</div>
36+
</div>
37+
</header>
38+
<script src="script.js"></script>
39+
</body>
40+
</html>

‎100-hulu webpage clone/script.js

Whitespace-only changes.

‎100-hulu webpage clone/style.css

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
@import url("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: 20px 32px;
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+
.header nav {
76+
display: flex;
77+
justify-content: flex-end;
78+
padding: 20px 40px;
79+
}
80+
81+
.header nav .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: 20px 0;
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: 25px 0;
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: 0 20px;
123+
}
124+
}

‎README.md

+1
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)