Site formatting problem

0

A test site I've created has huge spacings, I have no idea how to solve this, it's not at all responsive. The problem is probably related to the site's HTML and CSS. Follow both below (they are small codes). Here is the github repository where the site is hosted: link and this is the link to it: link

HTML:

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8">
        <title>Aulas Delivery</title>
        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/mavi.css">
        <link rel="shortcut icon" href="img/icon.png">
    </head>
    <body>

        <header>

            <div class="container">
            <img id="coruja" src="img/coruja.png" alt="coruja">
            </div>

            <div class="header-black">
            </div>

            <div class="container">

                    <nav id="menu" class="pull-left">
                        <li>Aulas Delivery - Reforço Escolar</li>
                    </nav>
            </div>
        </header>

        <section>
            <div class="info1">
                <img id="info1" src="img/livro.png" alt="livro">
                <p>Aulas independentes ou reforço escolar (plano mensal)</p>
            </div>
            <div class="info2">
                <img id="info2" src="img/gongo.png" alt="relogio">
                <p>Aulas independentes ou reforço escolar (plano mensal)</p>
            </div>
            <div class="info3">
                <img id="info3" src="img/mochila.png" alt="aviao-papel">
                <p>Aulas na casa do aluno (dependendo do local)</p>
            </div>
            <div id="materias">
                <img src="img/materias.jpg" alt="materias">
            </div>
            <div id="imagemPerfil">
                <img src="img/mavi.jpg" alt="mavi">
                <h3>Maria Victoria Cabral</h3>
            </div>
            <div id="estrela1">
                <img src="img/estrela.png" alt="estrela">
                <h4>Estudante de Direito da Universidade Católica de Salvador.</h4>
            </div>
            <div id="estrela2">
                <img src="img/estrela.png" alt="estrela">
                <h4>Melhor professora!</h4>
            </div>
            <div id="estrela3">
                <img src="img/estrela.png" alt="estrela">
                <h4>Melhor professora!</h4>
            </div>
            <div id="contato">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <ul><span>Contato -</span>
                            <li><h4>Celular - (71) 983485225</h4></li>
                            <li><a href="https://www.facebook.com/mariavictoria.cabral.3">Facebook</a></li>
                            <li><a href="https://www.facebook.com/mariavictoria.cabral.3">Instagram</a></li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <ul><span>Biografia de aulas -</span>
                            <li><p>bla bla bla bla bla bla bla bla</p></li>
                        </div>
                    </div>
                </div>

            </div>

        </section>

        <script src = "lib/jquery/jquery.min.js"></script>
        <script src = "lib/bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

CSS:

@font-face{

    font-family: 'IndieFlower';
    src: url("../fonts/IndieFlower.ttf");
    font-size: 1em;
}

header {

    width: 100%;
    height: 130px;
    background-color: #FF9F80; 
    z-index: 2;
    position: relative;
}
header .container {
    position: relative;

}

header .header-black {
    background-color: #FFC48C;
    height: 30px;

}


header #coruja {
    position: absolute;
    top: 1px;
}

#menu{
    margin: 30px 140px;
}
#menu li{
    display: inline-block;
    font-family: "IndieFlower";
    color: #0B486B;
    font-size: 30px;
    padding: 0px 25px;
}
section{

background-color: #9DE0AD;
height: 1200px;
}
section .info1{

    background-repeat: no-repeat;
    position: relative;
    top: 420px;
    left: -820px;
}
section .info1 p{

    font-size: 16px;
    color: #490A3D;
    display: inline-block;
    font-family: 'IndieFlower';
    font-weight: bold;
}section .info2{

    background-repeat: no-repeat;
    position: relative;
    top: 420px;
    left: 24px;
}
section .info2 p{

    font-size: 16px;
    color: #490A3D;
    display: inline-block;
    font-family: 'IndieFlower';
    font-weight: bold;
}
section .info3{

    background-repeat: no-repeat;
    position: relative;
    top: 420px;
    left: 24px;
}
section .info3 p{

    font-size: 16px;
    color: #490A3D;
    display: inline-block;
    font-family: 'IndieFlower';
    font-weight: bold;
}
#materias{

    background-repeat: no-repeat;
    position: relative;
    top: -200px;
    right: -830px;
}
#imagemPerfil{
[![inserir a descrição da imagem aqui][1]][1]
    background-repeat: no-repeat;
    position: relative;
    top: -570px;
    right: -50px;
}
#imagemPerfil h3{
    font-size: 24px;
    color: #490A3D;
    font-family: 'IndieFlower';
    font-weight: bold;
}
#estrela1{
    background-repeat: no-repeat;
    position: relative;
    top: -915px;
    right: -365px;
}
#estrela1 h4{
    font-size: 16px;
    color: #490A3D;
    display: inline-block;
    font-family: 'IndieFlower';
    font-weight: bold;
}
#estrela2{
    background-repeat: no-repeat;
    position: relative;
    top: -905px;
    right: -365px;
}
#estrela2 h4{
    font-size: 16px;
    color: #490A3D;
    display: inline-block;
    font-family: 'IndieFlower';
    font-weight: bold;
}
#estrela3{
    background-repeat: no-repeat;
    position: relative;
    top: -895px;
    right: -365px;
}
#estrela3 h4{
    font-size: 16px;
    color: #490A3D;
    display: inline-block;
    font-family: 'IndieFlower';
    font-weight: bold;
}
#contato{
    background-color: #5E299A;
    width: 100%;
    height: 400px;
}
#contato ul{
    margin-top: 36px;
    font-family: 'OpenSans';
}
#contato ul span{
    color: #FDE092;
    font-size: 24px;
}
#contato li a{
    font-size: 19px;
}
#contato li h4{
    color: #FDE092;
    font-size: 19px;
}
#contato p{
    font-family: 'OpenSans';
    font-size: 19px;
    color: #FDE092;
}
    
asked by anonymous 11.07.2017 / 02:51

2 answers

0

I've rewritten some things from your code, check if it's ok for you.

CSS

    @font-face{
        font-family: 'IndieFlower';
        src: url("../fonts/IndieFlower.ttf");
        font-size: 1em;
    }

    header {
        width: 100%;
        height: 130px;
        background-color: #FF9F80; 
        z-index: 2;
        position: relative;

    }
    header .container {
        position: relative;

    }
    header .header-black {
        background-color: #FFC48C;
        height: 30px;

    }
    header #coruja {
        position: absolute;
        top: 1px;
        left: 40px;
    }
    #menu{
        margin: 30px 140px;

    }
    #menu li{
        display: inline-block;
        font-family: "IndieFlower";
        color: #0B486B;
        font-size: 30px;
        padding: 0px 40px;
    }
    ul{
        list-style-type: none;
        margin-left: -40px;
    }

    ul li{
        text-align: left;
        width: 100%;
        margin: 6px 0;
        display: inline-block;
    }

    .img-icon{
        float: left;
        margin-right: 15px;
    }

    #professora h3{
        font-size: 24px;
        color: #490A3D;
        font-family: 'IndieFlower';
        font-weight: bold;
    }

    #professora h4{
        font-size: 16px;
        color: #490A3D;
        font-family: 'IndieFlower';
        font-weight: bold;
    }

    .margin-top-20{
        margin-top: 20px;
    }

    .margin-top-30{
        margin-top: 30px;
    }

    .margin-top-40{
        margin-top: 40px;
    }

    section{
        background-color: #9DE0AD;
        height: auto;
    }

    #competencias p{
        font-size: 16px;
        color: #490A3D;
        display: inline-block;
        font-family: 'IndieFlower';
        font-weight: bold;
        margin-top: 30px
    }

    .padding-left-40{
        padding-left: 40px;
    }

    .padding-left-50{
        padding-left: 50px;
    }

    .padding-left-60{
        padding-left: 60px;
    }

    @media screen and (max-width: 480px) {
        /*Configure seu mobile aqui */
    }

HTML

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Aulas Delivery</title>
    <link rel="stylesheet" href="https://aulasdelivery.github.io/lib/bootstrap/css/bootstrap.min.css">
    <link rel="shortcut icon" href="https://aulasdelivery.github.io/img/icon.png">
</head>
<body>

    <header>

        <div class="container-fluid">
            <img id="coruja" src="https://aulasdelivery.github.io/img/coruja.png"alt="coruja">
        </div>

        <div class="header-black">
        </div>

        <div class="container-fluid">

            <nav id="menu" class="pull-left">
                <li>Aulas Delivery - Reforço Escolar</li>
            </nav>
        </div>
    </header>

    <section id="professora">
        <div class="container-fluid">
            <div class="row margin-top-20">
                <div class="col-md-7">
                    <div class="col-md-5">
                        <img class="img-responsive" src="https://aulasdelivery.github.io/img/mavi.jpg"alt="mavi">
                        <h3>Maria Victoria Cabral</h3>
                    </div>
                    <div class="col-md-7">
                        <ul id="stars">
                            <li>
                                <img class="img-icon" src="https://aulasdelivery.github.io/img/estrela.png"alt="estrela">
                                <h4>Estudante de Direito da Universidade Católica de Salvador.</h4>
                            </li>
                            <li>
                                <img class="img-icon" src="https://aulasdelivery.github.io/img/estrela.png"alt="estrela">
                                <h4>Melhor professora!</h4>
                            </li>
                            <li>
                                <img class="img-icon" src="https://aulasdelivery.github.io/img/estrela.png"alt="estrela">
                                <h4>Melhor professora!</h4>
                            </li>
                            <li>
                                <img class="img-icon" src="https://aulasdelivery.github.io/img/estrela.png"alt="estrela">
                                <h4>Melhor professora!</h4>
                            </li>
                            <li>
                                <img class="img-icon" src="https://aulasdelivery.github.io/img/estrela.png"alt="estrela">
                                <h4>Melhor professora!</h4>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-5">
                    <img class="pull-right img-responsive" src="https://aulasdelivery.github.io/img/materias.jpg"alt="materias">
                </div>

            </div>
        </div>
    </section>

    <section id="competencias">
        <div class="container-fluid">
            <div class="row padding-left-60 margin-top-40">
                <div class="col-md-6">
                    <div>
                        <img class="img-icon" src="https://aulasdelivery.github.io/img/livro.png"alt="livro">
                        <p>Aulas independentes ou reforço escolar (plano mensal)</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <img class="img-icon" src="https://aulasdelivery.github.io/img/gongo.png"alt="relogio">
                        <p>Aulas independentes ou reforço escolar (plano mensal)</p>
                    </div>
                </div>

            </div>
            <div class="row padding-left-60 margin-top-40">
                <div class="col-md-6">
                    <div>
                        <img class="img-icon" src="https://aulasdelivery.github.io/img/mochila.png"alt="aviao-papel">
                        <p>Aulas na casa do aluno (dependendo do local)</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <img class="img-icon" src="https://aulasdelivery.github.io/img/mochila.png"alt="aviao-papel">
                        <p>Aulas na casa do aluno (dependendo do local)</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="contato">
        <div class="container-fluid">
            <div class="row margin-top-40">
                <div class="col-md-12 text-center">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <p>
                                <h4>Celular - (71) 983485225</h4>
                            </p>
                            <a href="https://www.facebook.com/mariavictoria.cabral.3">Facebook</a> - 
                            <a href="https://www.facebook.com/mariavictoria.cabral.3">Instagram</a>

                        </div>
                    </div>
                    <div class="row margin-top-20">
                        <div class="col-md-12">
                            <span>Biografia de aulas - 2017 - Todos os direitos reservados</span>
                            <p>bla bla bla bla bla bla bla bla</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <script src = "https://aulasdelivery.github.io/lib/jquery/jquery.min.js"></script>
    <script src = "https://aulasdelivery.github.io/lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Note: As you can see all the images and scripts inclusions I add the absolute address of your site, I did this to test here on my machine, just remove as you wish. >     

13.07.2017 / 14:42
0

Well, sorry to put as an answer might not be this, I tried to do it in jsfidle but you did not limit the size of the images so it continued with the layout broken, but come on, I found some errors in the code, it might be that the tags are not being closed, notice, I will mark the code may not be this but sorry not to comment, I still do not have enough points ... Another thing I noticed that you repeat a lot of code for example info1, info2, info3 p you'd better create a class instead of id and there I do not know if it would really be necessary to create a div for each one in the part of the stars, could be done with ul and li myself but this is at your discretion, I left broken part of the code to highlight ul what's missing, see if that's it and I repeat, sorry for not commenting

<head>
    <meta charset="utf-8">
    <title>Aulas Delivery</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/mavi.css">
    <link rel="shortcut icon" href="img/icon.png">
</head>
<body>

    <header>

        <div class="container">
        <img id="coruja" src="img/coruja.png" alt="coruja">
        </div>

        <div class="header-black">
        </div>

        <div class="container">

                <nav id="menu" class="pull-left">
                    <li>Aulas Delivery - Reforço Escolar</li>
                </nav>
        </div>
    </header>

    <section>
        <div class="info1">
            <img id="info1" src="img/livro.png" alt="livro">
            <p>Aulas independentes ou reforço escolar (plano mensal)</p>
        </div>
        <div class="info2">
            <img id="info2" src="img/gongo.png" alt="relogio">
            <p>Aulas independentes ou reforço escolar (plano mensal)</p>
        </div>
        <div class="info3">
            <img id="info3" src="img/mochila.png" alt="aviao-papel">
            <p>Aulas na casa do aluno (dependendo do local)</p>
        </div>
        <div id="materias">
            <img src="img/materias.jpg" alt="materias">
        </div>
        <div id="imagemPerfil">
            <img src="img/mavi.jpg" alt="mavi">
            <h3>Maria Victoria Cabral</h3>
        </div>
        <div id="estrela1">
            <img src="img/estrela.png" alt="estrela">
            <h4>Estudante de Direito da Universidade Católica de Salvador.</h4>
        </div>
        <div id="estrela2">
            <img src="img/estrela.png" alt="estrela">
            <h4>Melhor professora!</h4>
        </div>
        <div id="estrela3">
            <img src="img/estrela.png" alt="estrela">
            <h4>Melhor professora!</h4>
        </div>
        <div id="contato">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <ul><span>Contato -</span>
                        <li><h4>Celular - (71) 983485225</h4></li>
                        <li><a href="https://www.facebook.com/mariavictoria.cabral.3">Facebook</a></li>
                        <li><a href="https://www.facebook.com/mariavictoria.cabral.3">Instagram</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4">


                         <ul><span>Biografia de aulas -</span>
                            <li><p>bla bla bla bla bla bla bla bla</p></li>
                        </ul> <--- AQUI FALTA FECHAR A UL

                                     

        </div>

    </section>

    <script src = "lib/jquery/jquery.min.js"></script>
    <script src = "lib/bootstrap/js/bootstrap.min.js"></script>
</body>

    
11.07.2017 / 15:24