FrankenBuilds

View Live Site

Code Below...

Design Credit: Here

HTML

                            
                                <body>
    <main>
        <div class="nav-main">
            <div class="logo">
                <img src="./imgs/logoTemp.png" alt="">
            </div>
            <div class="nav">
                <ul>
                    <li class="nav-item"><a href="#">_About</a></li>
                    <li class="nav-item"><a href="#">_Contact</a></li>
                    <li class="nav-item"><a href="#">_Blog</a></li>
                    <li class="nav-item" id="hamburger">
                        <div class="hamburger"></div>
                        <div class="hamburger"></div>
                        <div class="hamburger"></div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="bg-spaceman">
            <img id="stars" src="./imgs/stars2.jpg" alt="stars background" class="space">
            <img id="spaceman" src="./imgs/Spaceman.png" alt="spaceman" class="spaceman">
        
            <div class="center-gradient">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, laudantium quas veniam excepturi?</p>
            </div>

            <div class="top-bottom-grad"></div>
        </div>


        <div class="center-content">
            <div class="left">
                <h3>- 01</h3>
                <h3 class="non-active">-</h3>
                <h3 class="non-active">- 02</h3>
                <h3 class="non-active">-</h3>
                <h3 class="non-active">- 03</h3>
            </div>
            <div class="right">
                <h4>01 <hr> 03</h4>
                <h1>Space<br>Exploration.</h1>
            </div>
        </div>

        <div class="footer">
            <div class="footer-section">
                <h2>The Moon</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="footer-section">
                <h2>The Sun</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="footer-section">
                <h2>Mars</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
        </div>
    </main>
    <script src="./js/app.js"></script>
</body>

CSS

                            
                                    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body{
        color: white;
        font-family: "Roboto", sans-serif;
    }
    
    /* Nav */
    .nav-main{
        display: flex;
        padding-top: 5vh;
    }
    
    .logo{
        width: 44%;
    }
    
    .logo img{
        width: 4rem;
        margin-left: 4rem;
    }
    
    .nav{
        width: 56%;
    }
    
    .nav ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    
    .nav-item{
        list-style: none;
    }
    
    #hamburger{
        padding-left: 8rem;
        padding-right: 2rem;
    }
    
    .hamburger{
        width: 25px;
        height: 2px;
        background: white;
        margin: 5px 0;
    }
    
    .nav-item a{
        color: white;
        text-transform: uppercase;
        text-decoration: none;
        transition: 0.5s;
    }
    
    .nav-item a:hover{
        letter-spacing: 3px;
    }
    
    /* Space and Spaceman */
    .bg-spaceman{
        position: relative;
        z-index: -5;
    }
    
    #stars{
        position: fixed;
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        z-index: -3;
    } 
    
    #spaceman{
        position: fixed;
        z-index: -1;
        top: 8%;
        left: 0;
        transform-origin: left;
        animation:rotate 7s ease-in-out alternate infinite;
    }
    
    /* Center Gradient */
    .center-gradient{
        position: fixed;
        z-index: -2;
        height: 80vh;
        width: 28vw;
        top: 0;
        right: 28%;
        background: linear-gradient(rgb(31, 31, 31) 40%, rgba(17, 17, 17, 0.322));
        margin-top: 1rem;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .center-gradient p{
        padding-top: 60VH;
        color: gray;
    }
    
    /* Center Area */
    .non-active{
        color: gray;
    }
    
    .center-content{
        display: flex;
        height: 60vh;
        align-items: center;
    }
    
    .left{
        flex: 44%;
        padding-left: 2.5rem;
        font-size: 0.8rem;
    }
    
    .right{
        flex: 56%;
    }
    
    .right h1{
        font-size: 6rem;
        padding-top: 1rem;
        font-family: "Merriweather", sans-serif;
        font-weight: 400;
        color: rgb(235, 235, 235);
    }
    
    .right h4{
        color: rgba(160, 160, 160, 0.753);
    }
    
    .right hr{
        display: inline-block;
        border-color: rgba(160, 160, 160, 0.753);
        width: 30px;
        height: 100%;
        margin-bottom: 0.3rem;
    }
    
    .top-bottom-grad{
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%, rgb(0, 0, 0, 0.9));
    }
    
    .footer{
        display: flex;
        justify-content: space-around;
        margin-left: 20rem;
        margin-right: 8rem;
        margin-top: 5rem;
    }
    
    .footer-section{
        width: 14vw;
    }
    
    .footer-section h2{
        font-size: 1rem;
        padding-bottom: 0.5rem;
        text-transform: uppercase;
    }
    
    .footer-section p{
        font-size: 0.8rem;
        color: gray;
    }
    
    /* Animations */
        @keyframes rotate {
            from{
                transform: rotate(0deg) translateY(0) translateX(0);
            }
            to{
            transform: rotate(-10deg) translateY(50px) translateX(20px);
            }
        }

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!