FrankenBuilds

Code Below...

View Live Site

Design Credit: Here

HTML

                            
                                <body>
<div class="container">
    <div class="nav">
        <img id="navbg" src="./img/headerbg.png" alt="">
        <div id="logo">
            <h2>atoll</h2>
            <p>Travel Site</p>
        </div>
        <div class="search-menu">
            <div id="search">
                <img src="./img/search.png" alt="Search">
                <input type="text" placeholder="Find Your Destination">
            </div>
            <img src="./img/navigation-menu.png" alt="Menu">
        </div>
    </div>

    <div class="hero">
        <div id="left">
            <div id="catagory">
                <hr>
                <h2>Beaches, Relaxtion</h2>
            </div>

            <div id="header-disc">
                <h2>Magical</h2>
                <h2>Places</h2>
                <h3>Visit and experience</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga voluptate minima unde cum reprehenderit.</p>
                <input type="submit" value="Find More Places" onclick="loadNewBeach()">
            </div>
        </div>

        <div id="right">
            <div class="mask-area">
                <img class="mask-anim shape1" src="./img/Shape2F.png" alt="">
                <img class="mask-anim shape2" src="./img/Shape2F.png" alt="">
                <img class="mask-anim shape3" src="./img/Shape2.png" alt="">
            </div>

            <div id="location">
                <h2></h2>
                <h3></h3>
            </div>
        </div>
    </div>

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

CSS

                            
                                    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .container{
        max-width: 100vw;
        max-height: 100vh;
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(39, 224, 2, 0) 60%), url(../img/beach1.jpg);
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        font-family: "Poppins";
    }
    
        .nav{
            height: 15vh;
            display: flex;
            justify-content: space-between;
            padding: 1.5rem 6rem 0;
            position: relative;
            background-color: white;
            mix-blend-mode: lighten;
            overflow: hidden;
        }
    
            #navbg{
                position: absolute;
                top: -80px;
                left: -120px;
                pointer-events: none;
            }
    
            #logo h2{
                color: rgb(36, 36, 36);
                font-size: 4rem;
            }
    
            #logo p{
                color: rgb(36, 36, 36);
                font-size: 1rem;
                text-align: end;
                margin-top: -1.7rem;
            }
    
            .search-menu{
                display: flex;
                align-items: center;
            }
    
                #search{
                    display: flex;
                }
    
                    #search img{
                        margin-right: 0.5rem;
                    }
    
                    #search input{
                        border: none;
                    }
    
                .search-menu img{
                    width: 22px;
                    margin-left: 4rem;
                }
    
        .hero{
            height: 85vh;
            display: flex
        }
    
            #left{
                flex: 40%;
                background-color: white;
                height: 100%;
                mix-blend-mode: lighten;
            }
    
                #catagory{
                    display: flex;
                    align-items: center;
                    padding-top: 6rem;
                }
    
                    #catagory hr{
                        width: 26%;
                        border: 2px solid #000;
                        margin-right: 2rem;
                    }
    
                    #catagory h2{
                        font-size: 1.1rem;
                        font-weight: 400;
                    }
    
                #header-disc{
                    margin-top: 5%;
                    margin-left: 30%;
                }
    
                    #header-disc h2{
                        font-size: 6rem;
                        line-height: 1;
                    }
    
                    #header-disc h3{
                        font-size: 1.5rem;
                        margin: 1rem 0 0.5rem 0;
                    }
    
                    #header-disc p{
                        font-size: 0.8rem;
                        width: 60%;
                        margin-bottom: 3rem;
                        font-weight: 400;
                    }
    
                    #header-disc input[type="submit"]{
                        padding: 1rem 2.5rem;
                        background-color: white;
                        border: 2px solid #000;
                        text-decoration: none;
                        font-size: 1rem;
                        font-weight: bold;
                        letter-spacing: 1.5px;
                        color: black;
                        cursor: pointer;
                    }
    
            #right{
                flex: 60%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                overflow: hidden;
            }
    
                .mask-area{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: white;
                    mix-blend-mode: lighten;
                }
    
                    .mask-anim{
                        position: absolute;
                        height: 90%;
                        width: 65%;
                    }
    
                    .shape1{
                        animation: rotateAnim1 12s infinite linear;
                        opacity: 0.85;
                    }
    
                    .shape2{
                        animation: rotateAnim2 20s infinite linear;
                        opacity: 0.9;
                    }
    
                    .shape3{
                        height: 85%;
                        width: 60%;
                        animation: rotateAnim3 28s infinite linear;
                    }
    
                #location{
                    position: absolute;
                    bottom: 20%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    color: white;
                }
    
                    #location h2{
                        font-size: 3rem;
                        color: rgb(255, 255, 255);
                        text-shadow: 2px 2px 4px rgba(26, 26, 26, 0.8);
                    }
    
                    #location h3{
                        font-size: 1.2rem;
                        font-weight: 400;
                        margin-top: -0.9rem;
                        text-shadow: 2px 2px 2px rgba(26, 26, 26, 0.7);
                    }
    
    
    /* Keyframes */
    @keyframes rotateAnim1{
        0%{
            transform:rotate(0deg)
        }
        100%{
            transform:rotate(-360deg)
        }
    }
    
    @keyframes rotateAnim2{
        0%{
            transform:rotate(0deg)
        }
        100%{
            transform:rotate(360deg)
        }
    }
    
    @keyframes rotateAnim3{
        0%{
            transform:rotate(0deg)
        }
        100%{
            transform:rotate(360deg)
        }
    }

                        
                                const country = document.querySelector("#location h2");
    const city = document.querySelector("#location h3");
    const beachBg = document.querySelector(".container");
    let currentBeach = 1;
    
    city.innerHTML = "Italy";
    country.innerHTML = "Positano";
    
    
    function loadNewBeach(){
        currentBeach++;
    
        if(currentBeach > 5){
            currentBeach = 1;
        }
    
        switch (currentBeach) {
            case 1:
                city.innerHTML = "Italy";
                country.innerHTML = "Positano";
                beachBg.style.backgroundImage = "linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(39, 224, 2, 0) 60%), url('./img/beach1.jpg')";
                break;
            case 2:
                city.innerHTML = "Brazil";
                country.innerHTML = "Rio de Janeiro";
                beachBg.style.backgroundImage = "linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(39, 224, 2, 0) 60%), url('./img/beach2.jpg')";
                break;
            case 3:
                city.innerHTML = "Florida";
                country.innerHTML = "Miami";
                beachBg.style.backgroundImage = "linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(39, 224, 2, 0) 60%), url('./img/beach3.jpg')";
                break;
            case 4:
                city.innerHTML = "Aruba";
                country.innerHTML = "Renaissance Island";
                beachBg.style.backgroundImage = "linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(39, 224, 2, 0) 60%), url('./img/beach4.jpg')";
                break;
            case 5:
                city.innerHTML = "Thailand";
                country.innerHTML = "Phi Phi Islands";
                beachBg.style.backgroundImage = "linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(39, 224, 2, 0) 60%), url('./img/beach5.jpg')";
                break;
            default:
                break;
        }
    }

Code Display

Code Below...

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

If you 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 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.