How to build a Hulu clone with 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

<section class="top__section">
    <div class="top">
        <button class="login__link">Log in</button>
    </div>

    <div class="middle">
        <div class="title">BUNDLE WITH ANY HULU PLAN & SAVE</div>

        <div class="middle__banner">
            <img src="media/logos.png" alt="" />
        </div>

        <div class="subtitle">
            Get endless entertainment, live sports, and the shows and movies you
            love.
        </div>

        <button class="bundle__button">GET THE DISNEY BUNDLE</button>

        <div class="details">
            <a href="#"> See details </a>
            and
            <a href="#"> Bundle terms </a>
        </div>
    </div>

    <div class="bottom">
        <img src="media/logo.png" alt="" class="logo" />

        <div class="bottom__middle__container">
            <div class="title">TRY UP TO ONE MONTH FREE</div>
            <div class="description">
                Here just for Hulu? Get thousands of TV shows and movies.
            </div>
        </div>

        <a href="#" class="free__trial__button"> start your free trial </a>
    </div>
</section>

.top__section {
    position: relative;
    background-image: url(../media/header.jpg);
    height: 100vh;
    min-height: 80rem;
    background-repeat: no-repeat;
    color: white;
}

.top__section .top {
    position: absolute;
    top: 0;
    left: 0;
    height: 10rem;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: end;
}

.login__link {
    font-size: 1.5rem;
    text-transform: capitalize;
    font-weight: bold;
    margin-right: 2rem;
}

.top__section .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25rem;
    background-color: red;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 2rem;
    background: linear-gradient(
        179.81deg,
        rgba(4, 4, 4, 0.7) 0.17%,
        rgba(4, 4, 4, 0.45) 85.02%,
        rgba(4, 4, 4, 0.3) 112.52%
    );
    text-align: center;
}

.top__section .bottom .logo {
    height: 3rem;
}

.title {
    color: var(--logo-green);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 3;
}

.top__section .bottom .description {
    font-size: 1.5rem;
    font-weight: 300;
}

.free__trial__button {
    display: inline-block;
    padding: 1.5rem 3rem;
    color: white;
    text-transform: uppercase;
    border: 0.2rem solid white;
    border-radius: 0.5rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.top__section .middle {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-top: 15vh;
    margin: 0 auto;
    max-width: 80rem;
}

.middle__banner {
    padding: 0 2rem;
}

.middle__banner img {
    height: 100%;
    width: 100%;
}

.top__section .middle .subtitle {
    margin-top: 0.8rem;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.4;
}

.bundle__button {
    background-color: white;
    color: black;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 0.5rem;
    margin: 2.5rem 0;
    width: 80%;
    max-width: 30rem;
    height: 5rem;
}

.bundle__button:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.top__section .details {
    opacity: 0.7;
}

.top__section .details a {
    color: white;
    text-decoration: underline;
}

Build the login modal

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

<section class="modal__container">
    <div class="modal__overlay"></div>

    <div class="login__modal">
        <div class="modal__header">
            <div class="close__icon"></div>
        </div>

        <form class="login__form" action="">
            <h2 class="title">Log in</h2>

            <label for="email">Email</label>
            <input type="email" id="email" />

            <label for="password">Password</label>
            <input type="password" id="password" />

            <a href="#" class="forget__link">
                Forgot your email or password?
            </a>

            <button type="submit" class="login__button">Log in</button>
        </form>

        <div class="modal__bottom__text">
            Don't have an account?
            <a href="#">Start your free trial</a>
        </div>
    </div>
</section>

.modal__container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: -1;
}

.modal__container.is-open {
    display: block;
}

.login__modal {
    height: 100vh;
    background-color: white;
    max-width: 50rem;
    width: 90%;
    min-width: 20rem;
    padding: 5rem;
    padding-top: 0;
}

.modal__header {
    height: 7rem;
    display: grid;
    place-items: center right;
}

.modal__header .close__icon {
    background-image: url(../media/close.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 2rem;
    width: 2rem;
    cursor: pointer;
}

.login__form {
    display: flex;
    flex-direction: column;
}

.login__form .title {
    color: #272c35;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.25px;
    margin: 3.2rem 0;
}

.login__form label {
    color: #636e85;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 1.25px;
    line-height: 2;
}

.login__form input {
    width: 100%;
    height: 4.8rem;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    text-indent: 1.6rem;
    color: #000;
    margin-top: 0.8rem;
    margin-bottom: 2.4rem;
    border: 1px solid #272c35;
}

.forget__link {
    color: #176ee1;
    font-size: 1.4rem;
    text-decoration: none;
    margin-bottom: 3rem;
}

.forget__link:hover {
    text-decoration: underline;
}

.login__button {
    width: 100%;
    height: 4.8rem;
    border: 0;
    border-radius: 0.4rem;
    background-color: #040405;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-align: center;
    padding: 1.7rem 0;
    margin-bottom: 0.8rem;
    opacity: 0.5;
}

.modal__bottom__text {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 1.25px;
    margin-top: 10rem;
    text-align: center;
}

const modalContainerEl = document.querySelector('.modal__container')
const modalCloseEl = document.querySelector('.close__icon')
const loginLinkEl = document.querySelector('.login__link')
const modalOverlayEl = document.querySelector('.modal__overlay')

const IS_OPEN = 'is-open'

const toggleModal = () => modalContainerEl.classList.toggle(IS_OPEN)

modalOverlayEl.addEventListener('click', toggleModal)
modalCloseEl.addEventListener('click', toggleModal)
loginLinkEl.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

<section class="library">
    <div class="library__header">
        <div class="title">INCLUDED IN ALL PLANS</div>

        <div class="library__title">All The TV You Love</div>

        <div class="library__description">
            Stream full seasons of exclusive series, current-season episodes,
            hit movies, Hulu Originals, kids shows, and more.
        </div>
    </div>

    <div class="library__grid">
        <a href="#" class="library__grid__item">
            <div class="library__text__container">
                <div class="text1">Past and Current Seasons</div>
                <div class="text2">Tv shows</div>
            </div>

            <div class="overlay"></div>

            <img src="media/cover-1.jpg" alt="" />
        </a>

        <a href="#" class="library__grid__item">
            <div class="library__text__container">
                <div class="text1">Past and Current Seasons</div>
                <div class="text2">Tv shows</div>
            </div>

            <div class="overlay"></div>

            <img src="media/cover-2.jpg" alt="" />
        </a>

        <a href="#" class="library__grid__item">
            <div class="library__text__container">
                <div class="text1">Past and Current Seasons</div>
                <div class="text2">Tv shows</div>
            </div>

            <div class="overlay"></div>

            <img src="media/cover-3.jpg" alt="" />
        </a>

        <a href="#" class="library__grid__item">
            <div class="library__text__container">
                <div class="text1">Past and Current Seasons</div>
                <div class="text2">Tv shows</div>
            </div>

            <div class="overlay"></div>

            <img src="media/cover-4.jpg" alt="" />
        </a>
    </div>
</section>

.library {
    min-height: 100vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.library__header {
    color: white;
    text-align: center;
    padding: 5rem 2rem;
}

.library__title {
    font-size: 3.6rem;
    font-weight: bold;
    margin-bottom: 1.6rem;
}

.library__description {
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 500;
}

.library__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    padding: 2rem;
    justify-items: center;
}

.library__grid__item {
    display: block;
    position: relative;
    width: 100%;
}

.library__grid__item img {
    width: 100%;
    height: auto;
    position: relative;
}

.overlay {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            156.82deg,
            rgba(0, 0, 0, 0.6) 4.58%,
            rgba(0, 0, 0, 0) 69.61%
        ), linear-gradient(24.5deg, rgba(0, 0, 0, 0.2) 4.71%, rgba(0, 0, 0, 0) 71.49%);
    z-index: 5;
}

.library__text__container {
    padding: 2rem;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    font-weight: bold;
    text-transform: capitalize;
}

.library__text__container .text1 {
    font-size: 1.2rem;
    line-height: 1.2rem;
    margin-bottom: 0.5rem;
}

.library__text__container .text2 {
    font-size: 1.6rem;
    line-height: 1.6rem;
}

Build the spotlight section

<section class="spotlight">
    <div class="spotlight__content">
        <div class="spotlight__header">
            <h2>Live sports</h2>
        </div>

        <div class="spotlight__title">Live sports</div>

        <div class="spotlight__description">
            Catch your games at home or on the go. Stream live games from major
            college and pro leagues including the NCAA®, NBA, NHL, NFL, and
            more.
        </div>

        <div class="channel__stack">
            <div class="channel__item">
                <img
                    class="channel__icon"
                    src="./media/live-sports-logo-1.png"
                    alt=""
                />
            </div>
            <div class="channel__item">
                <img
                    class="channel__icon"
                    src="./media/live-sports-logo-2.png"
                    alt=""
                />
            </div>
            <div class="channel__item">
                <img
                    class="channel__icon"
                    src="./media/live-sports-logo-3.svg"
                    alt=""
                />
            </div>
            <div class="channel__item">
                <img
                    class="channel__icon"
                    src="./media/live-sports-logo-4.png"
                    alt=""
                />
            </div>
        </div>
    </div>
</section>

.spotlight {
    height: 100vh;
    min-height: 80rem;
    background-image: url(../media/live-sports-small.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    padding: 2rem;
}

.spotlight__content {
    text-align: center;
    padding: 0 2rem;
}

.spotlight__header {
    display: inline-block;
    margin: 6rem 0;
    border-bottom: 0.6rem solid white;
    padding-bottom: 1rem;
    text-transform: uppercase;
}

.spotlight__title {
    font-weight: bold;
    font-size: 3.5rem;
    line-height: 4rem;
    margin: 2rem 0;
}

.spotlight__description {
    font-size: 1.6rem;
    line-height: 2.4rem;
}

.channel__stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 55rem;
}

.channel__item {
    background-image: url(../media/network-logo-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 8rem;
    width: 8rem;
    display: grid;
    place-items: center;
    margin-right: 2rem;
    margin-top: 3rem;
}

.channel__icon {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

Build the footer

<footer class="footer">
    <div class="footer__section__container">
        <div class="footer__section">
            <div class="footer__section__title">
                <div class="title__text">Browse</div>
                <div class="expand__section__icon"></div>
            </div>
            <div class="footer__section__links">
                <div class="section__links__column">
                    <a class="footer__section__link" href="#"
                        >Streaming Library</a
                    >
                    <a class="footer__section__link" href="#">live tv</a>
                    <a class="footer__section__link" href="#">live news</a>
                    <a class="footer__section__link" href="#">live sports</a>
                </div>
                <div class="section__links__column">
                    <a class="footer__section__link" href="#">tv shows</a>
                    <a class="footer__section__link" href="#">movies</a>
                    <a class="footer__section__link" href="#">originals</a>
                    <a class="footer__section__link" href="#">networks</a>
                </div>
                <div class="section__links__column">
                    <a class="footer__section__link" href="#">hbo max</a>
                    <a class="footer__section__link" href="#">cinemax</a>
                    <a class="footer__section__link" href="#">showtime</a>
                    <a class="footer__section__link" href="#">STARZ</a>
                </div>
            </div>
        </div>

        <div class="footer__section">
            <div class="footer__section__title">
                <div class="title__text">Help</div>
                <div class="expand__section__icon"></div>
            </div>
            <div class="footer__section__links">
                <div class="section__links__column">
                    <a class="footer__section__link" href="#"
                        >Account and billing</a
                    >
                    <a class="footer__section__link" href="#"
                        >Plans & Pricing</a
                    >
                    <a class="footer__section__link" href="#">
                        Supported Devices
                    </a>
                    <a class="footer__section__link" href="#">Accessibility</a>
                </div>
            </div>
        </div>

        <div class="footer__section">
            <div class="footer__section__title">
                <div class="title__text">About us</div>
                <div class="expand__section__icon"></div>
            </div>
            <div class="footer__section__links">
                <div class="section__links__column">
                    <a class="footer__section__link" href="#">shop hulu</a>
                    <a class="footer__section__link" href="#">Press</a>
                    <a class="footer__section__link" href="#"> jobs</a>
                    <a class="footer__section__link" href="#">Contact</a>
                </div>
            </div>
        </div>
    </div>

    <section class="social__media__container">
        <a class="social__media__link facebook" href="#"></a>
        <a class="social__media__link twitter" href="#"></a>
        <a class="social__media__link youtube" href="#"></a>
        <a class="social__media__link instagram" href="#"></a>
    </section>

    <section class="footer__legal__links">
        <a href="#" class="footer__section__link">About ads</a>
        <a href="#" class="footer__section__link">Terms of Use</a>
        <a href="#" class="footer__section__link">Privacy Policy</a>
        <a href="#" class="footer__section__link"
            >Do Not Sell My Personal Information</a
        >
        <a href="#" class="footer__section__link"
            >Your California Privacy Rights</a
        >
        <a href="#" class="footer__section__link">TV Parental Guidelines</a>
        <a href="#" class="footer__section__link">Sitemap</a>
        <a href="#" class="footer__section__link">© 2021 Hulu, LLC</a>
    </section>
</footer>

.footer {
    background-color: #f5f6f7;
    padding: 0 4rem;
    text-transform: capitalize;
}

.footer__section {
    border-bottom: 1px solid #dcdfe6;
}

.footer__section__title {
    padding: 5rem 0;
    cursor: pointer;
    display: flex;
}

.footer__section__title .title__text {
    color: #262930;
    flex-grow: 1;
    font-weight: bold;
    font-size: 1.5rem;
}

.expand__section__icon {
    background-image: url(../media/expand-button.png);
    height: 2rem;
    width: 2rem;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 2rem;
    transform: rotateZ(0deg);
    transition: transform 0.3s ease-in-out;
}

.footer__section.is-expanded .expand__section__icon {
    transform: rotateZ(180deg);
}

.footer__section__links {
    display: none;
    grid-template-columns: 1fr;
}

.footer__section.is-expanded .footer__section__links {
    display: grid;
}

.footer__section__links .section__links__column {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.footer__section__link {
    display: block;
    color: #656b7b;
    font-size: 1.4rem;
    padding-right: 1.5rem;
    padding-bottom: 1rem;
    text-transform: capitalize;
}

.social__media__container {
    display: flex;
    justify-content: space-evenly;
    padding: 3rem 0;
    margin: 0 auto;
    max-width: 50rem;
}

.social__media__link {
    display: inline-block;
    height: 3.5rem;
    width: 2rem;
    background-repeat: no-repeat;
}

.social__media__link.facebook {
    background-image: url(../media/facebook.svg);
}

.social__media__link.twitter {
    background-image: url(../media/twitter.svg);
}

.social__media__link.instagram {
    background-image: url(../media/instagram.svg);
}

.social__media__link.youtube {
    background-image: url(../media/youtube.svg);
    width: 3rem;
}

.footer__legal__links {
    display: flex;
    flex-wrap: wrap;
    padding: 3rem 0;
    justify-content: space-evenly;
    max-width: 80rem;
    margin: 0 auto;
}

const footerTitleEl = document.querySelectorAll('.footer__section__title')

const toggleExpandSection = element => () =>
    element.classList.toggle('is-expanded')

footerTitleEl.forEach(el => {
    el.addEventListener('click', toggleExpandSection(el.parentElement))
})

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

/* sm=600 */
/* md=900 */
/* lg=1200 */
/* xl=1600 */

@media screen and (min-width: 600px) {
    .library__title {
        font-size: 6rem;
    }
}

@media screen and (min-width: 900px) {
    .library__grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 300px));
        justify-content: center;
    }

    .spotlight {
        background-image: url(../media/live-sports.jpg);
        display: grid;
        align-items: center;
    }

    .spotlight__content {
        padding: 0;
        text-align: left;
        max-width: 50rem;
        padding-left: 10rem;
    }

    .spotlight__header {
        margin-bottom: 5rem;
    }

    .expand__section__icon {
        display: none;
    }

    .footer__section__links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .footer__section__container {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr;
    }

    .footer__section__title {
        cursor: auto;
    }
}

@media screen and (min-width: 1200px) {
    .login__modal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: auto;
    }
}

@media screen and (min-width: 1200px) {
    .footer {
        padding: 0 15rem;
    }
}

Shameless Plug

Want to create your own blog? Well, I am creating a video series where you will learn about how to create a JAMstack blog with Nextjs and Chakra-UI.

Lessons

• Intro & Setup
• Build Homepage UI
• How our app will work
• MDX, MongoDB, Static Homepage
• Generate Static Blog Page
• Style Blog page with Chakra-UI and MDX-embed
• Build a real-time view counter
• Autocomplete search form with MongoDB Atlas Search Index
• Deploy application to Vercel

Demo

You can demo the website from here

Features

• Static Blog pages will make the website load faster.
• Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Tweets, and so many other things.
• Autocomplete search feature for the blog posts.
• Real-time view counter and so on.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full-stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project. I am available on Upwork

Contacts

• Email: thatanjan@gmail.com
• LinkedIn: @thatanjan
• Portfolio: anjan
• Github: @thatanjan
• Instagram (personal): @thatanjan
• Twitter: @thatanjan
• Upwork: @thatanjan

Blogs you might want to read:

• Eslint, prettier setup with TypeScript and react
• What is Client-Side Rendering?
• What is Server Side Rendering?
• Everything you need to know about tree data structure
• 13 reasons why you should use Nextjs
• Beginners guide to quantum computers

Videos might you might want to watch: