404 Page

HTML

 <div class="wrapper-404">
        <div class="wrap-404">
            <div class="head-wrap">
                <H2>4</H2>
                <div class="img-straw-hats-holder">
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/11/straw-hat-pirates-logo.png" alt="Straw Hats Pirates Logo">
                </div>
                <h2>4</h2>
            </div>
            <div class="text-wrap">
                <p>
                    We couldn't find that one piece of the internet.
                    <br>
                    But let this be an opportunity to take
                    <br>
                    <color-blue>5 deep breaths.</color-blue>
                </p>
                <p>
                    Then check your internet connection and <color-blue><button class="refresh-btn"><span><img src="https://nuitwebtek.com/wp-content/uploads/2023/11/refresh-icon.png"
                                alt=""></span> refresh</button></color-blue> this page or go <color-blue class="for-home-btn"><a href="#" class="home-btn"><span><img src="https://nuitwebtek.com/wp-content/uploads/2023/11/back-to-home.png"
                                    alt=""></span> back to home.</a></color-blue>
                </p>
            </div>
        </div>
    </div>

CSS

.wrapper-404{
    --font-for-text: 'Comfortaa', sans-serif;
    --font-for-title: 'Raleway', sans-serif;
}
a{
    color: inherit;
    text-decoration: none;
}
.wrapper-404{
    background-color: #F4EDE5;
    height: 100vh;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/11/waves-img-01-300x123.png);
    background-size: 100% 30%;
    background-position: bottom;
    background-repeat: no-repeat;
}
.wrap-404{
    display: grid;
    justify-content: center;
    padding-top: 30px;
    padding-inline: 10px;
}
.head-wrap{
    display: flex;
    align-items: start;
    justify-content: center;
}
.head-wrap h2{
    font-size: 130px;
    font-family: var(--font-for-title);
    font-weight: 700;
    color: #212833;
}
.img-straw-hats-holder{
    max-width: 160px;
}
.img-straw-hats-holder img{
    width: 100%;
}
.text-wrap{
    display: grid;
    justify-content: center;
    padding-top: 10px;
}
.text-wrap p,
button{
    font-family: var(--font-for-text);
    color: #0c0f14;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    line-height: 28px;
}
.text-wrap > p{
    margin-bottom: 25px;
}
color-blue,
button{
    color: #0266C7;
}
color-blue span{
    display: inline-block;
    width: 18px;
    position: relative;
    top: 4px;
}
color-blue span img{
    width: 100%;
}
color-blue button{
    border: none;
    outline: none;
    cursor: pointer;
    background-color:transparent;
    padding:0;
}
.home-btn{
    padding-top: 10px;
}
.home-btn span{
    top: 1px;
    width: 20px;
}
@media only screen and (max-width:900px){
    .wrapper-404{
        background-size: 100% 55%;
    }
    .wrap-404{
        padding-top: 100px;
    }
    .for-home-btn{
        display: grid;
    }
}
@media only screen and (max-width:600px){
    .wrapper-404{
        display: grid;
        align-items: center;
        background-size: 100% 30%;
    }
    .wrap-404{
        padding-top: 30px;
    }
    
}

JS

        let refreshBtnd = document.querySelector('.refresh-btn');

        refreshBtnd.addEventListener('click', () => {
            location.reload();
        })

Links

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Raleway:wght@600;700;800;900&display=swap"
        rel="stylesheet">