Cool responsive website || 100 subs special

md.shakil hossain

1394

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Space Website</title>
    <link rel="stylesheet" type="text/css" href="space.css">
</head>
<body>
    <div class="img-container">
        <div class="overlay"></div>

        <div class="ham-icon">
            <img src="toggle.png">
        </div>


        <div class="nav-container">
            <h2>Spaced Out</h2>

            <ul class="nav-links">
                <img src="cancel.png">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Friends</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <h5>ENG RUS</h5>
        </div>

        <div class="content">
            <h1>Space Frontiers</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores cum.</p>

            <div class="btn">
                <a href="#">LET'S GO</a>
            </div>
        </div>
    </div>

    <section>
        <div class="content-a">
            <h1>The Space</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est accusantium odio fuga deleniti quibusdam ab perspiciatis laboriosam, modi in temporibus aliquid quos, earum minus. Ut quidem, accusantium. Nisi quam animi nihil laudantium ab sequi, dolorem quia, ipsum nemo quas sunt expedita placeat cupiditate totam pariatur facere ducimus similique tenetur cum doloremque ipsa iste, illo quisquam ex aliquam. Alias iure illo eum minima, rem accusamus quo, autem, quam laboriosam praesentium mollitia porro corporis ipsum delectus excepturi!</p>
        </div>

        <div class="content-b">
            <h1>The Frontiers</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos eveniet molestiae molestias reiciendis eligendi incidunt maiores quia modi, at laborum quaerat magnam! Suscipit facilis atque quia accusamus quam delectus, corporis odio id ipsum consectetur perspiciatis blanditiis amet praesentium, veritatis tenetur architecto dolorem doloribus consequuntur totam minima voluptatem reprehenderit dignissimos, tempore repellat! Non facere, dolor excepturi quae voluptate consequatur sit optio et, consectetur tempora earum, consequuntur ab. Distinctio veniam ipsam consectetur nam dolorum, quibusdam ullam accusantium!</p>
        </div>
    </section>
  </body>
</html>

Try it Yourself >>

 *{
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: gravity;
    color: mintcream;
}

body{
    margin: 0;
    padding: 0;
}

.img-container{
    width: 100%;
    min-height: 550px;
    background: url(ast.jpg) no-repeat;
    background-size: cover;
    position: relative; 
}

.overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
}


.nav-container{
    display: flex;
    justify-content: space-between;
    margin: 0 20px;
}

h2,h5{
    z-index: 1;
}

.nav-links{
    display: flex;
    width: 50%;
    justify-content: space-around;
    align-items: center;
    z-index: 1;

}

.nav-links img{
    display: none;
}

.ham-icon{
    max-width: 30px;
    max-height: 30px;
    display: none;
}

.ham-icon img{
    width: 100%;
    height: 100%;
}




.content{
    width: 700px;
    height: 300px;
    position: absolute;
    top: 120px;
    left: 60px;
}

.content h1{
    font-size: 4.4rem;
    width: 80%;
    margin-bottom: 12px;
}

.content p{
    width: 50%;
    line-height: 1.3rem;
    text-align: center;
}

.btn{
    border: 1px solid mintcream;
    border-radius: 3px;
    width: 160px;
    height: 35px;
    position: relative;
    top: 100px;
    background-color: #145;
}

.btn a{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 10px;
}

section{
    display: flex;
    background-color: #e1e5e6;
}

.content-a,.content-b{
    margin-top: 20px;
}

.content-a h1,.content-b h1{
    color: black;
    font-family: sans-serif;
    font-size: 2.3rem;
    margin: 0;
    text-align: center;
}

.content-a p,.content-b p{
    color: black;
    font-family: sans-serif;
    padding: 8px 15px;
    font-size: 1rem;

}




/*MEDIA QUERIES FOR TABLETS*/

@media screen and (max-width: 768px){
    .content{
        width: 90%;
    }

    .content h1{
        font-size: 2.6rem;
    }


    .content p{
        width: 50%;
    }

    .nav-container{
        justify-content: space-between;
        height: 60px;
        width: 100%;
        margin: 0;
    }

    .nav-container h2{
        margin: 0 auto;
        height: 50%;
        padding-top: 5px;
    }

    .nav-links{
        margin: 0;
        height: 30px;
        position: absolute;
        top: 40px;
        left: 0;
        padding: 0;
    }

    h5{
        margin: 0;
        height: 30px;
        position: absolute;
        top: 40px;
        right: 20px;
        padding-top: 10px;
        font-size: .65rem;
    }


}


/*MEDIA QUERIES FOR MOBILES*/

@media screen and (max-width: 550px){
    .content{
        width: 100%;
        left: 0;
    }

    .content h1{
        text-align: center;
        margin: 0 auto;
    }

    .content p{
        width: 60%;
        font-size: 1rem;
        padding-left: 12px;
        margin: 0 auto;
        padding-top: 15px;
    }

    .btn{
        width: 40%;
        margin-left: auto;
        margin-right: auto;
    }

    .btn a{
        padding-top: 10px;
        font-size: .8rem;
    }

    .nav-links{
        position: absolute;
        top: 30px;
        left: 0;
        flex-flow: column;
        height: 93%;
        background-color: #145;
        border-radius: 2px;
        justify-content: space-evenly;
        align-items: center;
        transform: translateX(-160%);
        width: 45%;
        transition: transform .5s ease;
    }


    .draw{
        transform: translateX(0%);
    }





    .nav-links img{
        display: block;
        width: 12px;
        position: absolute;
        top: 20px;
        right: 12px;
        cursor: pointer;
    }

    .nav-links li a{
        font-size: 1rem;
        text-decoration: underline;
    }


    .ham-icon{
        display: block;
        position: absolute;
        top: 45px;
        left: 12px;
        cursor: pointer;
        width: 600px;
    }

    section{
        flex-flow: column;
    }

    .content-a p,.content-b p{
        padding-left: 20px;
    }



}

Try it Yourself >>

let items = document.querySelector(".nav-links");
        let drawer = document.querySelector(".ham-icon");
        let cancel = document.querySelector(".nav-links img");


        drawer.addEventListener("click",()=>{
            items.classList.add("draw");
        });

        cancel.addEventListener("click",()=>{
            items.classList.remove("draw");
        });

Try it Yourself >>