FrankenBuilds

View Live Site

Code Below...

Design Credit: Here

HTML

                            
                                <body>
    <div class="above-fold">
        <div class="nav">
            <div id="logo-div">
                <img src="./img/Logo.png" alt="" id="logo">
            </div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">App</a></li>
                <li><a href="#">Info</a></li>
            </ul>
        </div>
        <div class="hero">
            <h1>Choose a better way to<br>represent your app</h1>
            <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
            <div class="hero-btns">
                <a id="download" href="#">Download Free</a>
                <a id="contact" href="#">Contact Us</a>
            </div>
            <div id="header-phone-img">
                <img src="./img/Phone.png" alt="">
            </div>
            <img id="wavy-bg" src="./img/WavyBg.png" alt="">
        </div>
    </div>

    <div class="first-marketing-sec">
        <div class="center-divs">
            <div class="left-div"></div>
            
            <div class="right-div">
                <div class="grid-item up-right">
                    <img src="./img/Cart.png" alt=""> 
                    <h2>First 7 Days Free</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam quaerat obcaecati placeat delectus velit? Ad?</p>
                </div>
                <div class="grid-item">
                    <img src="./img/Support.png" alt="">
                    <h2>Full Support</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam quaerat obcaecati placeat delectus velit? Ad?</p>
                </div>
                <div class="grid-item left">
                    <img src="./img/Design.png" alt="">
                    <h2>Modern Flat Design</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam quaerat obcaecati placeat delectus velit? Ad?</p>
                </div>
                <div class="grid-item down-left">
                    <img src="./img/MiniPhone.png" alt="">
                    <h2>User Friendly</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam quaerat obcaecati placeat delectus velit? Ad?</p>
                </div>
            </div>
        </div>
    </div>

    <div class="second-marketing-sec">
        <div class="sms-left-div">
            <h2>Stable And Ready</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam deleniti molestiae, fugit nemo alias vero explicabo sunt, dolorem libero distinctio omnis vel quas mollitia nihil ea necessitatibus nisi aliquam doloremque dolores quo numquam quaerat eius? Illo aspernatur modi hic rem!</p>
            <a href="#">Download Free</a>
        </div>
        <div class="sms-right-div">
            <div class="perk-list">
                <div><img src="./img/Heart.png" alt=""></div>
                <div>
                    <h2>Made With Love</h2>
                </div>
            </div>
            <div class="perk-list" id="active">
                <div><img src="./img/FreeTag.png" alt=""></div>
                <div>
                    <h2>Free of Use</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate veritatis repudiandae perspiciatis fugit. Odit, rem omnis iusto eligendi harum voluptatem?</p>
                </div>
            </div>
            <div class="perk-list">
                <div><img src="./img/Briefcase.png" alt=""></div>
                <div>
                    <h2>Full Support Available</h2>
                </div>
            </div>
            <div class="perk-list">
                <div><img src="./img/Pencil.png" alt=""></div>
                <div>
                    <h2>Flat and Modern UI & UX</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="tech-sec">
        <div class="ts-left"></div>
        <div class="ts-right">
            <div class="right-main">
                <h2>Everything You Need</h2>
                <div class="devices">
                    <img src="./img/GreenCheck.png" alt="">
                    <h3>Andriod</h3>
                </div>
                <div class="devices">
                    <img src="./img/GreenCheck.png" alt="">
                    <h3>iPhone</h3>
                </div>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure amet delectus eligendi qui optio accusantium sed sit et? Facilis laborum deleniti quia error, exercitationem magnam consequuntur maxime, natus, odit dolorum recusandae? Porro praesentium, vitae adipisci error quae illo magnam qui voluptate delectus, distinctio laboriosam est veniam iste, doloremque repellendus quidem!</p>
            </div>
        </div>
    </div>

    <div class="call-to-action-sec">
        <div class="flex-div">
            <div class="cta-left"></div>
            <div class="cta-right">
                <h2>Now Available</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam culpa suscipit optio eligendi doloremque, voluptates dolorem minus ipsum! Ex, dicta quisquam? Ratione dolorem odit similique necessitatibus, dolore aperiam in totam.</p>
                <div class="store-btns">
                    <img src="./img/GooglePlay.png" alt="">
                    <img src="./img/iOS.png" alt="">
                </div>
            </div>
        </div>
        <a href="#">Get the app today</a>
    </div>

    <div class="bottom-contact">
        <div class="bc-top">
            <div class="contact-list">
                <h2>Company</h2>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Jobs</a></li>
                    <li><a href="#">Press</a></li>
                </ul>
            </div>
            <div class="contact-list">
                <h2>Development</h2>
                <ul>
                    <li><a href="#">iOS</a></li>
                <li><a href="#">Android</a></li>
                </ul>
            </div>
            <div class="contact-list">
                <h2>Community</h2>
                <ul>
                    <li><a href="#">Social</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#FAQ"></a></li>
                </ul>
            </div>
            <div class="contact-list">
                <h2>Info</h2>
                <ul>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
        <div class="bc-bottom">
            <h2>Get In Touch</h2>
            <p>Subscribe to our newsletter and get notification for upcoming cool stuff.</p>
            <a href="#">Count me in</a>
        </div>
    </div>

    <footer>
        <div class="copyright">
            &copy; 2018 - Appo, All Right Reserved
        </div>
        <div class="socials">
            <img src="./img/Facebook.png" alt="">
            <img src="./img/Twitter.png" alt="">
            <img src="./img/Dribble.png" alt="">
            <img src="./img/Google.png" alt="">
            <img src="./img/Youtube.png" alt="">
        </div>
    </footer>
</body>

CSS

                            
                                    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* Hero and Nav */
    .above-fold{
        height: 130vh;
        background-image: url("../img/HeaderBg.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
    }
    
        /* Nav */
        .nav{
            display: flex;
            padding: 2rem 6rem 0 6rem;
        }
    
            #logo-div{
                flex: 2;
            }
    
                #logo-div img{
                    height: 40px;
                    width: 100px;
                }
    
            .nav ul{
                flex: 1;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
    
                .nav ul li{
                    list-style: none;
                }
    
                    .nav ul a{
                        text-decoration: none;
                        color: white;
                    }
    
        /* Hero */
        .hero{
            width: 80%;
            margin: auto;
        }
            .hero h1{
                margin-top: 6rem;
                font-size: 4rem;
                text-align: center;
                color: white;
            }
    
            .hero h3{
                text-align: center;
                margin-top: 1.2rem;
                color: white;
            }
    
            .hero-btns{
                display: flex;
                justify-content: space-between;
                width: 30%;
                margin: 2rem auto;
            }
    
                .hero-btns a{
                    padding: 0.5rem 2.5rem;
                    border-radius: 5px;
                }
    
                #download{
                    background-color: white;
                    text-decoration: none;
                    color: #233148;
                    font-weight: bold;
                }
    
                #contact{
                    background-color: transparent;
                    text-decoration: none;
                    color: white;
                    font-weight: bold;
                    border: solid 2px white;
                }
    
            #header-phone-img{
                display: flex;
                justify-content: center;
                padding-top: 2rem;
            }
    
            #wavy-bg{
                position: absolute;
                width: 100vw;
                bottom: -100px;
                right: 0;
            }
    
    /* First Marketing Sec */
    .first-marketing-sec{
        background-color: #fafafc;
        z-index: 5;
    }
    
        .center-divs{
            display: flex;
            padding: 6rem 6rem 0 6rem;
            justify-content: space-around;
            align-content: center;
            height: 130vh;
        }
            .left-div{
                flex: 1;
                display: flex;
                background-image: url("../img/Phone.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: 40%;
            }
    
            .right-div{
                flex: 1;
                display: grid;
                grid-template-columns: auto auto;
            }
    
                .grid-item{
                    background-color: white;
                    width: 18rem;
                    height: 25rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-content: center;
                    padding: 0 1rem;
                    border-radius: 5px;
                    box-shadow: 0 6px 4px #18181821;
                }
    
                    .grid-item img{
                        width: 50px;
                        margin: 0 auto;
                    }
    
                    .grid-item h2{
                        padding: 2rem 0;
                        font-size: 1.1 rem;
                        text-align: center;
                    }
    
                    .grid-item p{
                        text-align: center;
                        line-height: 1.5;
                    }
    
                .down-left{
                    transform: translate3d(-50px, 50px, 0);
                }
    
                .left{
                    transform: translateX(-50px);
                }
    
                .up-right{
                    transform: translateY(-50px);
                }
    
                .bottom-div{
                    display: flex;
                    flex: 1;
                }
    
    /* Second Marketing */
    .second-marketing-sec{
        display: flex;
        height: 100vh;
        padding: 8rem 8rem 2rem 8rem;
        background-color: #fafafc;
    }
    
        .sms-left-div{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #233148;
            text-align: end;
        }
    
            .sms-left-div h2{
                font-size: 2rem;
                padding-right: 2rem;
            }
    
            .sms-left-div p{
                padding: 2.5rem 2rem 2.5rem 0;
                width: 80%;
                align-self: flex-end;
                font-size: 1rem;
                line-height: 1.5;
            }
    
            .sms-left-div a{
                margin-right: 2rem;
                width: 40%;
                background-color: #33d2fd;
                padding: 1rem 2rem;
                text-align: center;
                align-self: flex-end;
                color: white;
                text-decoration: none;
                font-weight: bold;
                border-radius: 5px;
            }
    
        .sms-right-div{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-content: center;
            color: #233148;
        }
    
            .sms-right-div img{
                padding-right: 1.5rem;
            }
    
            .sms-right-div h2{
                font-size: 1rem;
            }
    
            .perk-list{
                display: flex;
                padding: 2.5rem;
                margin-left: 2rem;
                height: 15%;
            }
    
            #active{
                background-color: #33d2fd;
                height: 30%;
                border-radius: 5px;
            }
    
            #active h2{
                padding-bottom: 1rem;
            }
    
            #active p{
                color: white;
            }
    
    /* Tech Sec */
    .tech-sec{
        display: flex;
        height: 80vh;
        background-color: #fafafc;
        color: #233148;
    }
    
        .ts-left{
            flex: 1;
            background-image: url("../img/Code.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 80%;
        }
    
        .ts-right{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    
            .right-main{
                width: 70%;
                margin-left: 4rem;
            }
    
                .ts-right div h2{
                    padding: 2rem 0;
                    font-weight: bold;
                }
    
                .ts-right div p{
                    padding: 2rem 0;
                    line-height: 1.8;
                }
    
                    .devices{
                        display: flex;
                        justify-content: start;
                        padding: 1rem 0;
                    }
    
                        .devices img{
                            padding-right: 1rem;
                        }
    
                        .devices h3{
                            font-size: 1rem;
                        }
    
    /* Call To Action Sec */
    .call-to-action-sec{
        height: 100vh;
        background-image: url("../img/HeaderBg.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
        .flex-div{
            display: flex;
            height: 100%;
        }
    
            .cta-left{
                flex: 1;
                background-image: url("../img/Phone.png");
                background-position: center;
                background-size: 35%;
                background-repeat: no-repeat;
            }
    
            .cta-right{
                flex: 1;
                margin: auto;
            }
    
                .cta-right h2{
                    font-size: 2rem;
                    color: #233148;
                    padding-bottom: 2rem;
                }
    
                .cta-right p{
                    color: white;
                    line-height: 1.5;
                    width: 60%;
                    padding-bottom: 2rem;
                }
    
                .store-btns img{
                    padding: 0 1rem;
                }
    
            .call-to-action-sec a{
                display: block;
                background: linear-gradient(#fe7470, #f6387d);
                padding: 1rem 0;
                width: 18%;
                text-align: center;
                margin: -2rem auto 0 auto;
                color: white;
                text-decoration: none;
                font-size: 1rem;
                font-weight: bold;
                text-transform: uppercase;
            }
    
    /* Get in touch */
    .bottom-contact{
        display: flex;
        flex-direction: column;
        height: 90vh;
    }
    
        .bc-top{
            flex: 1;
            display: flex;
            width: 80%;
            justify-content: space-evenly;
            align-items: center;
            margin: auto;
        }
    
            .contact-list{
                display: flex;
                flex-direction: column;
                padding-top: 6rem;
                height: 100%;
                color: #233148;
                font-size: 0.8rem;
            }
    
            .contact-list ul{
                padding-top: 2rem;
            }
    
                .contact-list ul li{
                    list-style: none;
                    padding: 0.5rem 0;
                    font-size: 1rem;
                }
    
                    .contact-list ul li a{
                        text-decoration: none;
                        color: #233148;
                    }
    
        .bc-bottom{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; 
            width: 60%;
            margin: auto;
        }
    
            .bc-bottom h2{
                font-size: 2rem;
                color: #233148;
                padding-bottom: 2rem;
            }
    
            .bc-bottom p{
                color: #233148;
                padding-bottom: 6rem;
            }
    
            .bc-bottom a{
                padding: 1rem 3rem;
                background-color: #33d2fd;
                text-decoration: none;
                color: #233148;
                text-transform: uppercase;
                font-weight: bold;
                align-self: flex-end;
            }
    
    /* Footer */
    footer{
        display: flex;
        height: 10vh;
        background-color: #233148;
        padding: 0 6rem;
        justify-content: space-between;
        align-items: center;
        color: white;
    }
    
        .socials img{
            padding: 0 1rem;
        }

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!