FrankenBuilds

Code Below...

View Live Site

Design Credit: Here

HTML

                            
                                <body>
<div class="main-container">

    <div class="container">

        <div class="nav">
            <ul>
                <li>
                    <div id="div1"></div>
                    <div id="div2"></div>
                </li>
                <li>JOKER</li>
                <li><a href="">Tickets</a></li>
            </ul>
        </div>

        <div class="center">
            <div class="center-left">
                <div class="top">
                    <h2>Joaquin Phoenix</h2>
                    <h2>Robert De Niro</h2>
                    <h3>A TODD PHILLIPS FILM</h3>
                </div>
                <div class="bottom">
                    <h1>JOKER</h1>
                    <h2>"PUT ON A HAPPY FACE"</h2>
                    <h3><span>IN CINEMAS</span> OCTOBER 4</h3>
                </div>
            </div>
            <div class="center-right">
                <a href="https://www.facebook.com/frankenbuilds" target="blank"><img src="./img/Facebook.png" alt="Facebook logo"></a>
                <a href="https://www.instagram.com/_frankenbuilds/" target="blank"><img src="./img/Instagram.png" alt="Instagram logo"></a>
                <a href="https://twitter.com/FrankenBuilds?s=03" target="blank"><img src="./img/Twitter.png" alt="Twitter logo"></a>
            </div>
        </div>

        <div class="footer">
            <div class="footer-left">
                <h2>Trailers</h2>
                <div class="trailers">
                    <div class="trailer-details">
                        <h3>First Trailer</h3>
                        <div id="trailer1"></div>
                    </div>
                    <div class="trailer-details">
                        <h3>Second Trailer</h3>
                        <div id="trailer2"></div>
                    </div>
                </div>
                
            </div>

            <div class="footer-right">
                <p>JOKER and all related characters and elements &copy; DC Comics & Warner Bros. Entertainment Inc.</p>
            </div>
        </div>

    </div>

    <img id="bg1" src="./img/joker_04.jpg" alt="">
    <img id="bg2" src="./img/joker_01.png" alt="">
    <img id="bg3" src="./img/JokerOverlay.png" alt="">
    <img id="close" src="./img/close.png" alt="">

    <iframe id="video">
    </iframe>

    
</div>
<script src="./js/app.js"></script>
</body>

CSS

                            
                                    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body{
        background-color: black;
    }

    /* Absolutes Start*/
    #bg1{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -10;
        /* fadeOut */
    }

    #bg2{
        position: absolute;
        top: -10px;
        right: -220px;
        width: 85%;
        z-index: -9;
        /* fadeOut */
    }

    #bg3{
        position: absolute;
        top: -50px;
        right: 0;
        width: 100%;
        opacity: 30%;
        pointer-events: none;
        /* zoom */
    }

    #video{
        position: absolute;
        top: -100px;
        left: -150px;
        width: 120%;
        height: 120%;
        z-index: -11;
    }

    #close{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 10px;
        left: 20px;
        opacity: 0%;
        cursor: pointer;
    }
    /* Absolutes End*/

    .main-container{
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
        font-family: "Russo One";
    }

        .container{
            padding: 2rem 2rem;
        }

            .nav{
                height: 20vh;
                /* fadeOut */
            }

                .nav ul{
                    display: flex;
                    justify-content: space-between;
                    color: white;
                    list-style: none;
                }

                    #div1{
                        width: 40px;
                        height: 2.5px;
                        background-color: white;
                        margin-bottom: 0.3rem;
                    }

                    #div2{
                        width: 20px;
                        height: 2.5px;
                        background-color: white;
                    }

                    ul a{
                        color: white;
                        text-decoration: none;
                        padding: 0.4rem 2.5rem;
                        background-color: transparent;
                        border: 1px solid rgba(255, 255, 255, 0.425);
                    }

        .center{
            height: 55vh;
            display: flex;
            justify-content: space-around;
            align-items: center;
            /* swipe */
        }

            .center-left{
                flex: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

                .top{
                    display: flex;
                    flex-direction: row;
                    width: 68%;
                }

                    .top h2{
                        color: white;
                        font-family: "Roboto";
                        font-size: 1.2rem;
                        font-weight: 800;
                        width: 50%;
                    }

                    .top h3{
                        color: #434343;
                        font-family: "Roboto";
                        font-size: 1rem;
                        font-weight: 800;
                        width: 100%;
                        text-align: end;
                    }

                .bottom{
                    color: white;
                    margin-top: -1rem;
                }

                    .bottom h1{
                        font-size: 12rem;
                        letter-spacing: 20px;
                    }

                    .bottom h1:hover{
                        text-shadow: 1px 1px 14px white;
                    }

                    .bottom h2{
                        color: #9b3a3f;
                        text-align: end;
                        font-size: 1.8rem;
                        margin-top: -2rem;
                        letter-spacing: 4px;
                    }

                    .bottom h3{
                        text-align: end;
                        font-size: 1.5rem;
                        margin-top: 0.5rem;
                        letter-spacing: 4px;
                    }

                        .bottom h3 span{
                            color: #434343;
                            font-size: 1rem;
                            vertical-align: top;
                        }

            .center-right{
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
            }

                .center-right a{
                    margin: 1rem 0;
                }

                    .center-right img{
                        width: 40px;
                    }


        .footer{
            height: 20vh;
            display: flex;
            flex-direction: row;
            padding-bottom: 1rem;
            /* fallOff */
        }

            .footer-left{
                flex: 60%;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding-left: 10%;
            }

                .footer-left h2{
                    color: white;
                    font-family: "Roboto";
                    font-size: 1rem;
                }

                .trailers{
                    display: flex;
                    flex-direction: row;
                }

                    .trailer-details h3{
                        font-family: "Roboto";
                        text-align: end;
                        color: #434343;
                        font-size: 1rem;
                        padding-bottom: 0.5rem;
                    }


                    .trailer-details div{
                        width: 300px;
                        height: 90px;
                    }

                        #trailer1{
                            background-image: url(../img/joker_02.jpg);
                            background-size: cover;
                            background-position: top;
                            background-repeat: no-repeat;
                        }

                        #trailer2{
                            background-image: url(../img/joker_03.jpg);
                            background-size: cover;
                            background-position: top;
                            background-repeat: no-repeat;
                            margin-left: 2rem;
                            cursor: pointer;
                        }

            .footer-right{
                flex: 40%;
                align-self: flex-end;
                padding-top: 2rem;
            }

                .footer-right p{
                    color: white;
                    font-size: 0.75rem;
                    text-align: center;
                }

    /* Animation classes */
    .fadeOut{
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-name: fadeOut;
    }

    .fadeIn{
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-name: fadeIn;
    }

    .zoom{
        animation-duration: 5s;
        animation-fill-mode: forwards;
        animation-name: zoom;
    }

    .fallOff{
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-name: falloff;
    }

    .swipe{
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-name: swipe;
    }

    /* Animations */
    @keyframes swipe{
        from{
            width: 100%;
        }
        to{
            margin-left: 1000px;
            width: 500%;
        }
    }

    @keyframes zoom{
        from{
            transform: scale(1.0);
        }
        to{
            transform: scale(30.0);
        }
    }

    @keyframes falloff{
        from{
            margin-top: 0px;
        }
        to{
            margin-top: 500px;
        }
    }

    @keyframes fadeOut{
        from{
            opacity: 100%;
        }
        to{
            opacity: 0%;
        }
    }

    @keyframes fadeIn{
        from{
            opacity: 0%;
        }
        to{
            opacity: 50%;
        }
    }

                        
                                const nav = document.querySelector(".nav");
    const center = document.querySelector(".center");
    const footer = document.querySelector(".footer");
    
    const bg1 = document.querySelector("#bg1");
    const bg2 = document.querySelector("#bg2");
    const bg3 = document.querySelector("#bg3");
    
    const video = document.querySelector("#video");
    
    const close = document.querySelector("#close");
    
    document.querySelector("#trailer2").addEventListener("click", watchTrailer);
    document.querySelector("#close").addEventListener("click", watchTrailer);
    
    function watchTrailer(){
        nav.classList.toggle("fadeOut");
        bg1.classList.toggle("fadeOut");
        bg2.classList.toggle("fadeOut");
        bg3.classList.toggle("zoom");
    
        close.classList.toggle("fadeIn");
    
        center.classList.toggle("swipe");
        footer.classList.toggle("fallOff");
    
        video.src = "https://www.youtube.com/embed/t433PEQGErc?autoplay=1&mute=1";
    }

Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.

If you would like to try and build this yourself then you can download the assets here.
Please note FrankenBuilds does not own the right to the assets. You must credit the owner or check the useage rights from the above design credit link!

Code Display

Code Below...

Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.

If you would like to try and build this yourself then you can download the assets here.
Please note FrankenBuilds does not own the right to the assets. You must credit the owner or check the useage rights from the above design credit link!

If you download the files and build this site please share your build with me at @FrankenBuilds. I would love to see how great you did!

Code Below...

**Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.**

If you would like to try and build this yourself then you can download the assets here. **Please note FrankenBuilds does not own the right to the assets. You must credit the owner or check the useage rights from the above design credit link!**

If you download the files and build this site please share your build with me at @FrankenBuilds. I would love to see how great you did!

Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.

If you would like to try and build this yourself then you can download the assets here.
Please note FrankenBuilds does not own the right to the assets. You must credit the owner or check the useage rights from the above design credit link!