Criando uma landing page do zero

custom.css

@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');

body {
    background: #efefef;
}

.banner {
    min-height: 600px;
    background: #41295a;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2F0743, #41295a);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2F0743, #41295a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0 0 20px black;
}
.img-app {
    width: 70%;
    margin-top: 8.6em;
    margin-left: 4em;
}
.div-title {
    padding: 100px 75px;
}
.bigTitle {
    color:#fff;
    font-family: 'Lobster', cursive;
    font-size: 108px;
    text-shadow: 0 0 20px black;
}
.header {
    position: fixed;
    width: 100%;
    min-height: 100px;
    z-index: 2;
}

.header-active {
    background: #fff;
    border-bottom: 2px solid #ccc;
    box-shadow: 0 0 20px black;
    transition: linear 0.1s;
}

.header-active .menu a {
    color: #37164D !important;
    transition: linear 0.1s;
}

.header-active .div-logo .company-name strong {
    color: #333;
}

.menu {
    position: relative;
    top: 38px;
    float: right;
    z-index: 3;
    right: 50px;
    transition: linear 0.3s;
}

.menu a {
    color: #fff;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding: 0px 16px;
    transition: linear 0.3s;
}

.div-logo {
    position: fixed;
    z-index: 3;
    max-width: 90px;
    top: 12px;
    left: 4em;
}

.logo {
    max-width: 90px;
}

.company-name {
    font-family: 'Fredoka One', cursive;
    color: #DD1C6E;
    position: fixed;
    left: 3.5em;
    top: 0.3em;
    font-size: 47px;
}

.company-name strong {
    color: #fff;
}

#funcionalidades h1 {
    font-weight: bold;
    margin-top: 25px;
}

#funcionalidades div {
    margin-top: 40px;
}

#funcionalidades div img {
    width: 220px;
}

.last-icon {
    width: 171px !important;
    margin-top: 25px !important;
}

.btn-baixar-app {
    background: #DD1C6E;
    border: 1px solid transparent;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 0 20px 5px #000;
    text-shadow: 0 0 7px black;
    transition: linear 0.1s;
}

.btn-baixar-app:hover {
    box-shadow: 0 0 20px 5px #DD1C6E;
    color: #fff;
    transition: linear 0.1s;
}

.func {
    font-size: 22px;
    font-weight: 700;
}

.func3-descricao {
    position: relative;
    top: 15px;
}

#funcionalidades p {
    margin-top: 25px !important;
}

.funcionalidade2 {
    position: relative;
    top: 7px;
}

.funcionalidade3 {
    position: relative;
    top: 27px;
}

#depoimentos {
    background: #0051ED;
    min-height: 430px;
    margin-top: 40px;
    border-top: 2px solid #999;
}

.user1, .user2, .user3 {
    position: relative;
    width: 150px;
    border: 6px solid #262638;
    border-radius: 75px;
}

.user1 {
    top: 20px;
}

.user2 {
    top: 143px;
    left: 31rem;
}

.user3 {
    top: 20px;
}

.depo-title1,
.depo-title2,
.depo-title3 {
    position: relative;
    font-size: 28px;
    color: #fff;
}

.depo-title1 {
    top: -99px;
    left: 175px;
}

.depo-title2 {
    left: 172px;
    top: 22px;
}

.depo-title3 {
    top: -100px;
    left: 169px;
}

.depo-text1,
.depo-text2,
.depo-text3 {
    color:#fff;
    position: relative;
    float: left;
    font-size: 16px;
    font-style: italic;
}

.depo-text1 {
    top: -100px;
    left: 176px;
}

.depo-text2 {
    top: 22px;
    left: 18px;
}

.depo-text3 {
    top: -100px;
    left: 169px;
}

custom.js

// Ativa ou desativa a class header-active baseado no scroll
window.onscroll = function(ev) {
    var B = document.body; //IE 'quirks'
    var D = document.documentElement; //IE with doctype
    D = (D.clientHeight)? D: B;

    if (D.scrollTop == 0) {
        $(".header").removeClass('header-active');
    } else {
        $(".header").addClass('header-active');
    }        
};

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Um pouco mais de HTML e CSS</title>
        
        <!-- Boostrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        
        <!-- Font-awesome CSS -->
        <link rel="stylesheet" href="/assets/vendor/css/font-awesome.min.css" />
        
        <!-- Custom CSS -->
        <link rel="stylesheet" href="/assets/src/css/custom.css">
    </head>
    <body>
        <div class="header">
            <div class="div-logo">
                <img src="/assets/src/img/logo.png" class="img-responsive logo" />
                <span class="company-name">Cobrança<strong>Já</strong></span>
            </div>

            <div class="menu">
                <a href="#home">Início</a>
                <a href="#funcionalidades">Funcionalidades</a>
                <a href="#depoimentos">Depoimentos</a>
                <a href="#teste-gratis">Teste Grátis</a>
                <a href="#contato">Contato</a>
            </div>
        </div>
        
        <div class="banner" id="home">
            <div class="col-md-6 div-title">
                <h1 class="bigTitle">O seu app de cobrança na sua mão!</h1>
                <button type="button" class="btn btn-lg btn-block btn-baixar-app">
                    <i class="fa fa-check"></i> Baixar o App
                </button>
            </div>
            <div class="col-md-6">
                <img src="/assets/src/img/app.png" class="img-responsive img-app" />
            </div>
        </div>
        
        <div class="clearfix"></div>
        
        <div class="container">
            <div id="funcionalidades">
                
                <h1 class="text-center">Funcionalidades</h1>
                
                <div class="col-md-4">
                    <center>
                        <img src="/assets/src/img/icon1.png" class="img-circle" />
                        <br>
                        <span class="func funcionalidade1">Interface amigável</span>
                        <p class="func1-descricao">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id tortor scelerisque, scelerisque nunc a, posuere est. In viverra rutrum elit non elementum. Vivamus auctor porttitor tortor.
                        </p>
                    </center>
                </div>
                <div class="col-md-4">
                    <center>
                        <img src="/assets/src/img/icon2.png" class="img-circle" />
                        <br>
                        <span class="func funcionalidade2">Rápido</span>
                        <p class="func2-descricao">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id tortor scelerisque, scelerisque nunc a, posuere est. In viverra rutrum elit non elementum. Vivamus auctor porttitor tortor.
                        </p>
                    </center>
                </div>
                <div class="col-md-4">
                    <center>
                        <img src="/assets/src/img/icon3.png" class="img-circle last-icon" />
                        <br>
                        <span class="func funcionalidade3">Rentável</span>
                        <p class="func3-descricao">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id tortor scelerisque, scelerisque nunc a, posuere est. In viverra rutrum elit non elementum. Vivamus auctor porttitor tortor.
                        </p>
                    </center>
                </div>
            </div>
        </div>
        
        <div class="clearfix"></div>
        
        <div id="depoimentos">
            <div class="col-md-6">
                <div class="col-md-6">
                    <img src="/assets/src/img/user1.png" class="img-responsive user1" />
                    <span class="depo-title1">Rafael</span>
                    <span class="depo-text1">O melhor app da categoria que já experimentei. Assinei o plano premium.</span>
                    
                    <img src="/assets/src/img/user3.png" class="img-responsive user3" />
                    <span class="depo-title3">Letícia</span>
                    <span class="depo-text3">Baixei só pra ver se funcionava e agora não vivo mais sem esse aplicativo.</span>
                </div>
                <div class="col-md-6">
                    <img src="/assets/src/img/user2.png" class="img-responsive user2" />
                    <span class="depo-title2">Rogério</span>
                    <span class="depo-text2">Consegui conquistar mais clientes e o app mais do que se paga, dá lucro!</span>
                </div>
            </div>
            <div class="col-md-6">
                <img src="/assets/src/img/app2.png" class="img-responsive" />
            </div>
        </div>
        
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        
        <!-- Bootstrap JS -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
        <!-- Custom JS -->
        <script src="/assets/src/js/custom.js"></script>
    </body>
</html>