In this blog, you will learn how to build a Hulu clone using vanilla HTML, CSS, and JavaScript.

Video tutorial

I have already made a video about it on my youtube channel.

Please like and subscribe to my channel. It motivates me to create more content like this.

Live Preview

You can preview this website by visiting this link

Source Code

https://github.com/thatanjan/hulu-landing-page-clone-yt

Knowledge Requirements(Basic):

• Html
• CSS
• JavaScript

So, Let's start. We are going to build the page using the mobile-first approach.

Build the top section

Copy
1<section class="top__section">
2    <div class="top">
3        <button class="login__link">Log in</button>
4    </div>
5
6    <div class="middle">
7        <div class="title">BUNDLE WITH ANY HULU PLAN & SAVE</div>
8
9        <div class="middle__banner">
10            <img src="media/logos.png" alt="" />
11        </div>
12
13        <div class="subtitle">
14            Get endless entertainment, live sports, and the shows and movies you
15            love.
16        </div>
17
18        <button class="bundle__button">GET THE DISNEY BUNDLE</button>
19
20        <div class="details">
21            <a href="#"> See details </a>
22            and
23            <a href="#"> Bundle terms </a>
24        </div>
25    </div>
26
27    <div class="bottom">
28        <img src="media/logo.png" alt="" class="logo" />
29
30        <div class="bottom__middle__container">
31            <div class="title">TRY UP TO ONE MONTH FREE</div>
32            <div class="description">
33                Here just for Hulu? Get thousands of TV shows and movies.
34            </div>
35        </div>
36
37        <a href="#" class="free__trial__button"> start your free trial </a>
38    </div>
39</section>

Copy
1.top__section {
2    position: relative;
3    background-image: url(../media/header.jpg);
4    height: 100vh;
5    min-height: 80rem;
6    background-repeat: no-repeat;
7    color: white;
8}
9
10.top__section .top {
11    position: absolute;
12    top: 0;
13    left: 0;
14    height: 10rem;
15    width: 100%;
16    display: grid;
17    align-items: center;
18    justify-content: end;
19}
20
21.login__link {
22    font-size: 1.5rem;
23    text-transform: capitalize;
24    font-weight: bold;
25    margin-right: 2rem;
26}
27
28.top__section .bottom {
29    position: absolute;
30    bottom: 0;
31    left: 0;
32    width: 100%;
33    height: 25rem;
34    background-color: red;
35    display: grid;
36    grid-template-columns: 1fr;
37    place-items: center;
38    padding: 2rem;
39    background: linear-gradient(
40        179.81deg,
41        rgba(4, 4, 4, 0.7) 0.17%,
42        rgba(4, 4, 4, 0.45) 85.02%,
43        rgba(4, 4, 4, 0.3) 112.52%
44    );
45    text-align: center;
46}
47
48.top__section .bottom .logo {
49    height: 3rem;
50}
51
52.title {
53    color: var(--logo-green);
54    font-size: 1.3rem;
55    font-weight: 600;
56    letter-spacing: 0.5px;
57    line-height: 3;
58}
59
60.top__section .bottom .description {
61    font-size: 1.5rem;
62    font-weight: 300;
63}
64
65.free__trial__button {
66    display: inline-block;
67    padding: 1.5rem 3rem;
68    color: white;
69    text-transform: uppercase;
70    border: 0.2rem solid white;
71    border-radius: 0.5rem;
72    font-size: 1.3rem;
73    font-weight: 600;
74}
75
76.top__section .middle {
77    display: grid;
78    grid-template-columns: 1fr;
79    justify-items: center;
80    text-align: center;
81    padding-top: 15vh;
82    margin: 0 auto;
83    max-width: 80rem;
84}
85
86.middle__banner {
87    padding: 0 2rem;
88}
89
90.middle__banner img {
91    height: 100%;
92    width: 100%;
93}
94
95.top__section .middle .subtitle {
96    margin-top: 0.8rem;
97    font-size: 1.8rem;
98    font-weight: 600;
99    line-height: 1.4;
100}
101
102.bundle__button {
103    background-color: white;
104    color: black;
105    font-size: 1.5rem;
106    font-weight: 700;
107    border-radius: 0.5rem;
108    margin: 2.5rem 0;
109    width: 80%;
110    max-width: 30rem;
111    height: 5rem;
112}
113
114.bundle__button:hover {
115    background-color: rgba(255, 255, 255, 0.8);
116}
117
118.top__section .details {
119    opacity: 0.7;
120}
121
122.top__section .details a {
123    color: white;
124    text-decoration: underline;
125}

Build the login modal

On a small screen size, the login modal will act as a side section.

Copy
1<section class="modal__container">
2    <div class="modal__overlay"></div>
3
4    <div class="login__modal">
5        <div class="modal__header">
6            <div class="close__icon"></div>
7        </div>
8
9        <form class="login__form" action="">
10            <h2 class="title">Log in</h2>
11
12            <label for="email">Email</label>
13            <input type="email" id="email" />
14
15            <label for="password">Password</label>
16            <input type="password" id="password" />
17
18            <a href="#" class="forget__link">
19                Forgot your email or password?
20            </a>
21
22            <button type="submit" class="login__button">Log in</button>
23        </form>
24
25        <div class="modal__bottom__text">
26            Don't have an account?
27            <a href="#">Start your free trial</a>
28        </div>
29    </div>
30</section>

Copy
1.modal__container {
2    position: fixed;
3    top: 0;
4    left: 0;
5    width: 100%;
6    height: 100%;
7    display: none;
8}
9
10.modal__overlay {
11    position: absolute;
12    top: 0;
13    left: 0;
14    width: 100%;
15    height: 100%;
16    background-color: black;
17    opacity: 0.5;
18    z-index: -1;
19}
20
21.modal__container.is-open {
22    display: block;
23}
24
25.login__modal {
26    height: 100vh;
27    background-color: white;
28    max-width: 50rem;
29    width: 90%;
30    min-width: 20rem;
31    padding: 5rem;
32    padding-top: 0;
33}
34
35.modal__header {
36    height: 7rem;
37    display: grid;
38    place-items: center right;
39}
40
41.modal__header .close__icon {
42    background-image: url(../media/close.svg);
43    background-repeat: no-repeat;
44    background-size: cover;
45    height: 2rem;
46    width: 2rem;
47    cursor: pointer;
48}
49
50.login__form {
51    display: flex;
52    flex-direction: column;
53}
54
55.login__form .title {
56    color: #272c35;
57    font-size: 2.4rem;
58    font-weight: 500;
59    letter-spacing: 0.25px;
60    margin: 3.2rem 0;
61}
62
63.login__form label {
64    color: #636e85;
65    font-size: 1.5rem;
66    font-weight: 800;
67    letter-spacing: 1.25px;
68    line-height: 2;
69}
70
71.login__form input {
72    width: 100%;
73    height: 4.8rem;
74    border-radius: 0.4rem;
75    font-size: 1.6rem;
76    text-indent: 1.6rem;
77    color: #000;
78    margin-top: 0.8rem;
79    margin-bottom: 2.4rem;
80    border: 1px solid #272c35;
81}
82
83.forget__link {
84    color: #176ee1;
85    font-size: 1.4rem;
86    text-decoration: none;
87    margin-bottom: 3rem;
88}
89
90.forget__link:hover {
91    text-decoration: underline;
92}
93
94.login__button {
95    width: 100%;
96    height: 4.8rem;
97    border: 0;
98    border-radius: 0.4rem;
99    background-color: #040405;
100    font-size: 1.4rem;
101    font-weight: 500;
102    letter-spacing: 1.5px;
103    text-align: center;
104    padding: 1.7rem 0;
105    margin-bottom: 0.8rem;
106    opacity: 0.5;
107}
108
109.modal__bottom__text {
110    font-size: 1.4rem;
111    font-weight: 500;
112    letter-spacing: 1.25px;
113    margin-top: 10rem;
114    text-align: center;
115}

Copy
1const modalContainerEl = document.querySelector('.modal__container')
2const modalCloseEl = document.querySelector('.close__icon')
3const loginLinkEl = document.querySelector('.login__link')
4const modalOverlayEl = document.querySelector('.modal__overlay')
5
6const IS_OPEN = 'is-open'
7
8const toggleModal = () => modalContainerEl.classList.toggle(IS_OPEN)
9
10modalOverlayEl.addEventListener('click', toggleModal)
11modalCloseEl.addEventListener('click', toggleModal)
12loginLinkEl.addEventListener('click', toggleModal)

Explanation:

1. If the modal container has an is-open class then the modal will be shown.
2. If a close icon or overlay is clicked then it will hide the modal.

Build the library section

Copy
1<section class="library">
2    <div class="library__header">
3        <div class="title">INCLUDED IN ALL PLANS</div>
4
5        <div class="library__title">All The TV You Love</div>
6
7        <div class="library__description">
8            Stream full seasons of exclusive series, current-season episodes,
9            hit movies, Hulu Originals, kids shows, and more.
10        </div>
11    </div>
12
13    <div class="library__grid">
14        <a href="#" class="library__grid__item">
15            <div class="library__text__container">
16                <div class="text1">Past and Current Seasons</div>
17                <div class="text2">Tv shows</div>
18            </div>
19
20            <div class="overlay"></div>
21
22            <img src="media/cover-1.jpg" alt="" />
23        </a>
24
25        <a href="#" class="library__grid__item">
26            <div class="library__text__container">
27                <div class="text1">Past and Current Seasons</div>
28                <div class="text2">Tv shows</div>
29            </div>
30
31            <div class="overlay"></div>
32
33            <img src="media/cover-2.jpg" alt="" />
34        </a>
35
36        <a href="#" class="library__grid__item">
37            <div class="library__text__container">
38                <div class="text1">Past and Current Seasons</div>
39                <div class="text2">Tv shows</div>
40            </div>
41
42            <div class="overlay"></div>
43
44            <img src="media/cover-3.jpg" alt="" />
45        </a>
46
47        <a href="#" class="library__grid__item">
48            <div class="library__text__container">
49                <div class="text1">Past and Current Seasons</div>
50                <div class="text2">Tv shows</div>
51            </div>
52
53            <div class="overlay"></div>
54
55            <img src="media/cover-4.jpg" alt="" />
56        </a>
57    </div>
58</section>

Copy
1.library {
2    min-height: 100vh;
3    background-color: black;
4    display: flex;
5    flex-direction: column;
6    justify-content: center;
7}
8
9.library__header {
10    color: white;
11    text-align: center;
12    padding: 5rem 2rem;
13}
14
15.library__title {
16    font-size: 3.6rem;
17    font-weight: bold;
18    margin-bottom: 1.6rem;
19}
20
21.library__description {
22    font-size: 1.6rem;
23    line-height: 2.4rem;
24    font-weight: 500;
25}
26
27.library__grid {
28    display: grid;
29    grid-template-columns: 1fr 1fr;
30    grid-gap: 2rem;
31    padding: 2rem;
32    justify-items: center;
33}
34
35.library__grid__item {
36    display: block;
37    position: relative;
38    width: 100%;
39}
40
41.library__grid__item img {
42    width: 100%;
43    height: auto;
44    position: relative;
45}
46
47.overlay {
48    content: '';
49    display: block;
50    position: absolute;
51    top: 0;
52    left: 0;
53    width: 100%;
54    height: 100%;
55    background: linear-gradient(
56            156.82deg,
57            rgba(0, 0, 0, 0.6) 4.58%,
58            rgba(0, 0, 0, 0) 69.61%
59        ), linear-gradient(24.5deg, rgba(0, 0, 0, 0.2) 4.71%, rgba(0, 0, 0, 0) 71.49%);
60    z-index: 5;
61}
62
63.library__text__container {
64    padding: 2rem;
65    color: white;
66    position: absolute;
67    top: 0;
68    left: 0;
69    z-index: 10;
70    font-weight: bold;
71    text-transform: capitalize;
72}
73
74.library__text__container .text1 {
75    font-size: 1.2rem;
76    line-height: 1.2rem;
77    margin-bottom: 0.5rem;
78}
79
80.library__text__container .text2 {
81    font-size: 1.6rem;
82    line-height: 1.6rem;
83}

Build the spotlight section

Copy
1<section class="spotlight">
2    <div class="spotlight__content">
3        <div class="spotlight__header">
4            <h2>Live sports</h2>
5        </div>
6
7        <div class="spotlight__title">Live sports</div>
8
9        <div class="spotlight__description">
10            Catch your games at home or on the go. Stream live games from major
11            college and pro leagues including the NCAA®, NBA, NHL, NFL, and
12            more.
13        </div>
14
15        <div class="channel__stack">
16            <div class="channel__item">
17                <img
18                    class="channel__icon"
19                    src="./media/live-sports-logo-1.png"
20                    alt=""
21                />
22            </div>
23            <div class="channel__item">
24                <img
25                    class="channel__icon"
26                    src="./media/live-sports-logo-2.png"
27                    alt=""
28                />
29            </div>
30            <div class="channel__item">
31                <img
32                    class="channel__icon"
33                    src="./media/live-sports-logo-3.svg"
34                    alt=""
35                />
36            </div>
37            <div class="channel__item">
38                <img
39                    class="channel__icon"
40                    src="./media/live-sports-logo-4.png"
41                    alt=""
42                />
43            </div>
44        </div>
45    </div>
46</section>

Copy
1.spotlight {
2    height: 100vh;
3    min-height: 80rem;
4    background-image: url(../media/live-sports-small.jpg);
5    background-repeat: no-repeat;
6    background-size: cover;
7    background-position: center;
8    color: white;
9    padding: 2rem;
10}
11
12.spotlight__content {
13    text-align: center;
14    padding: 0 2rem;
15}
16
17.spotlight__header {
18    display: inline-block;
19    margin: 6rem 0;
20    border-bottom: 0.6rem solid white;
21    padding-bottom: 1rem;
22    text-transform: uppercase;
23}
24
25.spotlight__title {
26    font-weight: bold;
27    font-size: 3.5rem;
28    line-height: 4rem;
29    margin: 2rem 0;
30}
31
32.spotlight__description {
33    font-size: 1.6rem;
34    line-height: 2.4rem;
35}
36
37.channel__stack {
38    display: flex;
39    flex-wrap: wrap;
40    justify-content: center;
41    align-items: center;
42    margin: 0 auto;
43    max-width: 55rem;
44}
45
46.channel__item {
47    background-image: url(../media/network-logo-bg.png);
48    background-repeat: no-repeat;
49    background-size: cover;
50    background-position: center;
51    height: 8rem;
52    width: 8rem;
53    display: grid;
54    place-items: center;
55    margin-right: 2rem;
56    margin-top: 3rem;
57}
58
59.channel__icon {
60    width: 70%;
61    height: 70%;
62    object-fit: contain;
63}

Build the footer

Copy
1<footer class="footer">
2    <div class="footer__section__container">
3        <div class="footer__section">
4            <div class="footer__section__title">
5                <div class="title__text">Browse</div>
6                <div class="expand__section__icon"></div>
7            </div>
8            <div class="footer__section__links">
9                <div class="section__links__column">
10                    <a class="footer__section__link" href="#"
11                        >Streaming Library</a
12                    >
13                    <a class="footer__section__link" href="#">live tv</a>
14                    <a class="footer__section__link" href="#">live news</a>
15                    <a class="footer__section__link" href="#">live sports</a>
16                </div>
17                <div class="section__links__column">
18                    <a class="footer__section__link" href="#">tv shows</a>
19                    <a class="footer__section__link" href="#">movies</a>
20                    <a class="footer__section__link" href="#">originals</a>
21                    <a class="footer__section__link" href="#">networks</a>
22                </div>
23                <div class="section__links__column">
24                    <a class="footer__section__link" href="#">hbo max</a>
25                    <a class="footer__section__link" href="#">cinemax</a>
26                    <a class="footer__section__link" href="#">showtime</a>
27                    <a class="footer__section__link" href="#">STARZ</a>
28                </div>
29            </div>
30        </div>
31
32        <div class="footer__section">
33            <div class="footer__section__title">
34                <div class="title__text">Help</div>
35                <div class="expand__section__icon"></div>
36            </div>
37            <div class="footer__section__links">
38                <div class="section__links__column">
39                    <a class="footer__section__link" href="#"
40                        >Account and billing</a
41                    >
42                    <a class="footer__section__link" href="#"
43                        >Plans & Pricing</a
44                    >
45                    <a class="footer__section__link" href="#">
46                        Supported Devices
47                    </a>
48                    <a class="footer__section__link" href="#">Accessibility</a>
49                </div>
50            </div>
51        </div>
52
53        <div class="footer__section">
54            <div class="footer__section__title">
55                <div class="title__text">About us</div>
56                <div class="expand__section__icon"></div>
57            </div>
58            <div class="footer__section__links">
59                <div class="section__links__column">
60                    <a class="footer__section__link" href="#">shop hulu</a>
61                    <a class="footer__section__link" href="#">Press</a>
62                    <a class="footer__section__link" href="#"> jobs</a>
63                    <a class="footer__section__link" href="#">Contact</a>
64                </div>
65            </div>
66        </div>
67    </div>
68
69    <section class="social__media__container">
70        <a class="social__media__link facebook" href="#"></a>
71        <a class="social__media__link twitter" href="#"></a>
72        <a class="social__media__link youtube" href="#"></a>
73        <a class="social__media__link instagram" href="#"></a>
74    </section>
75
76    <section class="footer__legal__links">
77        <a href="#" class="footer__section__link">About ads</a>
78        <a href="#" class="footer__section__link">Terms of Use</a>
79        <a href="#" class="footer__section__link">Privacy Policy</a>
80        <a href="#" class="footer__section__link"
81            >Do Not Sell My Personal Information</a
82        >
83        <a href="#" class="footer__section__link"
84            >Your California Privacy Rights</a
85        >
86        <a href="#" class="footer__section__link">TV Parental Guidelines</a>
87        <a href="#" class="footer__section__link">Sitemap</a>
88        <a href="#" class="footer__section__link">© 2021 Hulu, LLC</a>
89    </section>
90</footer>

Copy
1.footer {
2    background-color: #f5f6f7;
3    padding: 0 4rem;
4    text-transform: capitalize;
5}
6
7.footer__section {
8    border-bottom: 1px solid #dcdfe6;
9}
10
11.footer__section__title {
12    padding: 5rem 0;
13    cursor: pointer;
14    display: flex;
15}
16
17.footer__section__title .title__text {
18    color: #262930;
19    flex-grow: 1;
20    font-weight: bold;
21    font-size: 1.5rem;
22}
23
24.expand__section__icon {
25    background-image: url(../media/expand-button.png);
26    height: 2rem;
27    width: 2rem;
28    background-size: cover;
29    background-repeat: no-repeat;
30    margin: 0 2rem;
31    transform: rotateZ(0deg);
32    transition: transform 0.3s ease-in-out;
33}
34
35.footer__section.is-expanded .expand__section__icon {
36    transform: rotateZ(180deg);
37}
38
39.footer__section__links {
40    display: none;
41    grid-template-columns: 1fr;
42}
43
44.footer__section.is-expanded .footer__section__links {
45    display: grid;
46}
47
48.footer__section__links .section__links__column {
49    display: flex;
50    flex-direction: column;
51    margin-bottom: 2rem;
52}
53
54.footer__section__link {
55    display: block;
56    color: #656b7b;
57    font-size: 1.4rem;
58    padding-right: 1.5rem;
59    padding-bottom: 1rem;
60    text-transform: capitalize;
61}
62
63.social__media__container {
64    display: flex;
65    justify-content: space-evenly;
66    padding: 3rem 0;
67    margin: 0 auto;
68    max-width: 50rem;
69}
70
71.social__media__link {
72    display: inline-block;
73    height: 3.5rem;
74    width: 2rem;
75    background-repeat: no-repeat;
76}
77
78.social__media__link.facebook {
79    background-image: url(../media/facebook.svg);
80}
81
82.social__media__link.twitter {
83    background-image: url(../media/twitter.svg);
84}
85
86.social__media__link.instagram {
87    background-image: url(../media/instagram.svg);
88}
89
90.social__media__link.youtube {
91    background-image: url(../media/youtube.svg);
92    width: 3rem;
93}
94
95.footer__legal__links {
96    display: flex;
97    flex-wrap: wrap;
98    padding: 3rem 0;
99    justify-content: space-evenly;
100    max-width: 80rem;
101    margin: 0 auto;
102}

Copy
1const footerTitleEl = document.querySelectorAll('.footer__section__title')
2
3const toggleExpandSection = element => () =>
4    element.classList.toggle('is-expanded')
5
6footerTitleEl.forEach(el => {
7    el.addEventListener('click', toggleExpandSection(el.parentElement))
8})

Explanation:

1. Footer will have different sections. Each section will be an accordion when the screen size is small.
2. When we will click on the footer title, then the is-expanded class will be attached to that section. And our accordion will be expanded.

Responsive

Copy
1/* sm=600 */
2/* md=900 */
3/* lg=1200 */
4/* xl=1600 */
5
6@media screen and (min-width: 600px) {
7    .library__title {
8        font-size: 6rem;
9    }
10}
11
12@media screen and (min-width: 900px) {
13    .library__grid {
14        grid-template-columns: repeat(auto-fit, minmax(100px, 300px));
15        justify-content: center;
16    }
17
18    .spotlight {
19        background-image: url(../media/live-sports.jpg);
20        display: grid;
21        align-items: center;
22    }
23
24    .spotlight__content {
25        padding: 0;
26        text-align: left;
27        max-width: 50rem;
28        padding-left: 10rem;
29    }
30
31    .spotlight__header {
32        margin-bottom: 5rem;
33    }
34
35    .expand__section__icon {
36        display: none;
37    }
38
39    .footer__section__links {
40        display: grid;
41        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
42    }
43
44    .footer__section__container {
45        display: grid;
46        grid-template-columns: 3fr 1fr 1fr;
47    }
48
49    .footer__section__title {
50        cursor: auto;
51    }
52}
53
54@media screen and (min-width: 1200px) {
55    .login__modal {
56        position: absolute;
57        top: 50%;
58        left: 50%;
59        transform: translate(-50%, -50%);
60        height: auto;
61    }
62}
63
64@media screen and (min-width: 1200px) {
65    .footer {
66        padding: 0 15rem;
67    }
68}