CSS Problemas , em deixar site responsivo com mediaquery

Augusto Whitaker · 1 de outubro de 2020

Olá, estou com problemas e não consigo resolver já tentei de tudo .Meu site não fica responsivo

repositório

<!DOCTYPE html>
<html lang="pt-br">
        <head>
            <title> Tarefa Final </title>
            <meta charset="UTF-8">
            <meta name="description"
            content="hospedaria para gatos,com banho e tosa de forma cuidadosa e profissional">
            <meta name="keywords" content="gatos,hotel gato,tosa gato,banho gato,amor a gato">
            <meta name="viewport" content="width=device-width,  initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
            <link rel="stylesheet" type="text/css" href="css/reset.css">
            <link rel="stylesheet" type="text/css" href="css/style.css">
            <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,300;1,400;1,600&display=swap" rel="stylesheet">
        </head>
        
    <body>
        <div class="responsivo">
           <div class="container">
            <div id="sidebar">
               <div class="sidebar-container">
                   <img class="logo-gato" src="imagens/logo-gato.jpg" alt="Logo gato">
                    <h1>Hotel para Gatos</h1>
                    <nav>
                        <ul>
                            <li><a href="#sessao-bem-vindo">Bem vindo</a></li>
                            <li><a href="#sessao-sobre">Sobre a Empresa</a></li>
                            <li><a href="#sessao-hotel">Hotel</a></li>
                            <li><a href="#sessao-banho">Banho e Tosa</a></li>
                            <li><a href="#sessao-estrutura">Estrutura</a></li>
                            <li><a href="#sessao-contato">Entre em contato</a></li>
                        </ul>
                    </nav>
               </div> 

            </div>
            <div class="content">
                <main>
                    <section id="sessao-bem-vindo">
                        <div class="banner"></div>
                        <div class="sessao-bem-vindo-content">
                        <h1 >Seja Bem vindo ao Hotel</h1>
                        <div class="sessao-minibanner"></div>
                        <div class="sessao-descricao">
                        <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor metus vitae sollicitudin rhoncus. Sed porttitor lorem a rutrum cursus. Integer porta, ligula dignissim tincidunt auctor, feliz mi pretium velit, sed pellentesque ante ex sit amet sem. Donec cursus urna ac rhoncus maximus. Vivamus blandit, lectus ut lacinia viverra, ipsum ex rutrum lorem, sed sagittis turpis augue id velit. Vivamus vitae purus sit amet turpis luctus dictum. Fusce non turpis sed purus porttitor mattis. Suspendisse egestas vehicula aliquam. Ut vitae euismod ipsum.</p>
                        <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor metus vitae sollicitudin rhoncus. Sed porttitor lorem a rutrum cursus. Integer porta, ligula dignissim tincidunt auctor, feliz mi pretium velit, sed pellentesque ante ex sit amet sem. Donec cursus urna ac rhoncus maximus. Vivamus blandit, lectus ut lacinia viverra, ipsum ex rutrum lorem, sed sagittis turpis augue id velit. Vivamus vitae purus sit amet turpis luctus dictum. Fusce non turpis sed purus porttitor mattis. Suspendisse egestas vehicula aliquam. Ut vitae euismod ipsum.</p>
                        <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor metus vitae sollicitudin rhoncus. Sed porttitor lorem a rutrum cursus. Integer porta, ligula dignissim tincidunt auctor, feliz mi pretium velit, sed pellentesque ante ex sit amet sem. Donec cursus urna ac rhoncus maximus. Vivamus blandit, lectus ut lacinia viverra, ipsum ex rutrum lorem, sed sagittis turpis augue id velit. Vivamus vitae purus sit amet turpis luctus dictum. Fusce non turpis sed purus porttitor mattis. Suspendisse egestas vehicula aliquam. Ut vitae euismod ipsum.</p>
                        <a href="#" class="sessao-bem-vindo-btn"> Leia Mais</a>
                        </div>
                        </div>
                    </section>
                      <br><br><br><br><br><br><br><br><br>
                    <section id="sessao-sobre">
                        <div class="sessao-content">
                        <h1>Sobre Nós</h1>    
                        <div class="sessao-minibanner"></div>   
                        <div class="sessao-descricao">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor metus vitae sollicitudin rhoncus. Sed porttitor lorem a rutrum cursus. Integer porta, ligula dignissim tincidunt auctor, feliz mi pretium velit, sed pellentesque ante ex sit amet sem. Donec cursus urna ac rhoncus maximus. Vivamus blandit, lectus ut lacinia viverra, ipsum ex rutrum lorem, sed sagittis turpis augue id velit. Vivamus vitae purus sit amet turpis luctus dictum. Fusce non turpis sed purus porttitor mattis. Suspendisse egestas vehicula aliquam. Ut vitae euismod ipsum.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor metus vitae sollicitudin rhoncus. Sed porttitor lorem a rutrum cursus. Integer porta, ligula dignissim tincidunt auctor, feliz mi pretium velit, sed pellentesque ante ex sit amet sem. Donec cursus urna ac rhoncus maximus. Vivamus blandit, lectus ut lacinia viverra, ipsum ex rutrum lorem, sed sagittis turpis augue id velit. Vivamus vitae purus sit amet turpis luctus dictum. Fusce non turpis sed purus porttitor mattis. Suspendisse egestas vehicula aliquam. Ut vitae euismod ipsum.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor metus vitae sollicitudin rhoncus. Sed porttitor lorem a rutrum cursus. Integer porta, ligula dignissim tincidunt auctor, feliz mi pretium velit, sed pellentesque ante ex sit amet sem. Donec cursus urna ac rhoncus maximus. Vivamus blandit, lectus ut lacinia viverra, ipsum ex rutrum lorem, sed sagittis turpis augue id velit. Vivamus vitae purus sit amet turpis luctus dictum. Fusce non turpis sed purus porttitor mattis. Suspendisse egestas vehicula aliquam. Ut vitae euismod ipsum.</p>
                            
                            </div> 
                        </div>
                    </section>
                    <section id="sessao-hotel">
                        <h2>Hotel</h2>
                        <div class="hotel-imgs banner-galeria" id="img1"></div>
                        <div class="hotel-imgs banner-galeria" id="img2"></div>
                        <div class="hotel-imgs banner-galeria" id="img3"></div>
                        <div class="hotel-imgs banner-galeria" id="img4"></div>
                    </section>
                    <section id="sessao-banho">
                        <h2>Banho</h2>
                        <div class="banho-imgs banner-galeria" id="img5"></div>
                        <div class="banho-imgs banner-galeria" id="img6"></div>
                        <div class="banho-imgs banner-galeria" id="img7"></div>
                        
                    </section>
                    <section id="sessao-estrutura">
                        <h2>Estrutura</h2>
                        <div class="estrutura-imgs banner-galeria" id="img8"></div>
                        <div class="estrutura-imgs banner-galeria" id="img9"></div>
                        <div class="estrutura-imgs banner-galeria" id="img10"></div>
                    </section>
                    <section id="sessao-contato">
                        <h2>Entre em contato</h2>
                        <form id="form-contato">
                            <input type="text" name="name" placeholder="Nome">
                            <input type="email" name="email" placeholder="E-mail">
                            <textarea name="message" placeholder="Escreva sua mensagem..." ></textarea>
                            <input type="submit" value="Enviar">
                        </form>
                    </section>
                    <footer>
                        <p> Augusto Whitaker @ 2020</p>
                    </footer>
                </main>
            </div>
          </div>
        </div>
    </body>
</html>

no css


/*geral*/
html{
    font-family: 'Open sans', sans-serif ;
    color:#373a3c;
}

a{
    transition: 5s;
}

/*sidebar*/

#sidebar{
    position: fixed;
    height: 100%;
    width: 300px;
    background-color: #635c81;
    padding-top: 40px;
}
#sidebar h1{
     color: #fff;
     font-size: 32px;
     text-align: center;
     margin-top: 20px;
     margin-bottom: 30px;
}

#sidebar a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}
#sidebar a:hover{
    color: #d1df0c;
}
#sidebar li{
    padding: 20px;
}
.sidebar-container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}
.logo-gato{
    width: 60px;
    height: 60px;
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

/*conteudo*/
.content{
    position: absolute;
    left: 300px;
    width: calc(100% - 300px);
}
.content h1, .content h2{
    color: #006599;
    margin-bottom: 30px;
}
.content h1{
    font-size: 48px;
}
.content h2{
    font-size: 35px;
}
section{
    padding-left: 50px ;
}

/*bem vindo*/

#sessao-bem-vindo{
    padding-left: 0;
}
.sessao-bem-vindo-content{
    padding-left: 50px;
    
}
#sessao-bem-vindo .banner{
    height: 500px;
    background-image: url('../imagens/2.png');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
#sessao-bem-vindo h1{
    margin-top: 70px;
}
#sessao-bem-vindo::after, #sessao-sobre::after{
    content: "";
    display: block;
    clear: both;
    margin-bottom: 100px;
}

.sessao-minibanner{
    width: 300px;
    height: 400px;
    background-image:url(../imagens/10.jpg) ;
    background-position: center;
    background-size: cover;
    float: left;
}
.sessao-descricao{
    position: absolute;
    left: 370px;
    padding-right: 30px;
}
.sessao-descricao p{
    line-height: 2;
    font-size: 16px;
    margin-bottom: 30px;
    margin-left: 25px;
}

.sessao-bem-vindo-btn, form input[type=submit]{
    background-color: #006599 ;
    color: #fff;
    text-decoration: none;
    padding: 20px 40px;
    transition: .5s;
    display: block;
    width: 100px;
    text-align: center;
    border: none;
    cursor: pointer;
    margin-left: 30px;
}
.sessao-bem-vindo-btn:hover, form input[type=submit]:hover {
    background-color: #2790c6;
}

/*sessao sobre*/
#sessao-sobre .sessao-minibanner{
    float: right;
    margin-right: 50px;
    background-image: url(../imagens/5.jpg);
}

#sessao-sobre .sessao-descricao {
    position: absolute;
    left: 25px;
    width: calc(100% - 400px);
}

/* galerias*/
.banner-galeria {
    background-position: center;
    background-size: cover;
    display: inline-block;
    height: 200px;
}

#sessao-hotel, #sessao-banho, #sessao-estrutura{
       padding-right: 50px;
       margin-bottom: 50px;
}
.hotel-imgs{
    width: 18.8%;
    margin-left: .5%;
    margin-right: .5%;
}

#img1{
    background-image: url(../imagens/7.jpg);
    margin-left: 0;
}
#img2{
    background-image: url(../imagens/6.jpg);
   
}
#img3{
    background-image: url(../imagens/8.jpg);
    
}
#img4{
    background-image: url(../imagens/10.jpg);
    margin-right: 0;
}

.banho-imgs{
   width: 32.3%;
   margin-left: .5%;
    margin-right: .5%;
}
#img5{
    background-image: url(../imagens/1.jpg);
    margin-left: 0;
}
#img6{
    background-image: url(../imagens/2.png);
   
}
#img7{
    background-image: url(../imagens/3.jpg);
    margin-right: 0;
}
.estrutura-imgs{
    width: 23.9%;
    margin-left: .5%;
    margin-right: .5%;
}
#img8{
    background-image: url(../imagens/6.jpg);
    margin-left: 0;
}
#img9{
    background-image: url(../imagens/9.jpg);
   
}
#img10{
    background-image: url(../imagens/7.jpg);
    margin-right: 0;
}

/*contato*/

#form-contato{
    width: 500px;
}

#form-contato input[type=text], #form-contato input[type=email], #form-contato textarea{
    display: block;
    border: 1px solid#006599;
    padding: 10px;
    margin-bottom: 20px;
    width: 100%;
    font-size: 16px;
    font-family: 'Open sans', sans-serif;
}
#form-contato input[type=text]:focus, #form-contato input[type=email]:focus, #form-contato textarea:focus{
    border-color: #2790c6 ;
}
#form-contato textarea{
    height: 150px;

}

#form-contato ::placeholder{
    color: #2790c6;
}

#form-contato input[type=submit]{
    margin-left: 0;
    font-size: 16px;
    width: 180px;
}

/*footer*/

footer{
    height: 100px;
    padding-top: 150px;
    color: #006599;
}
footer p{
    text-align: center;
    font-weight: bold;
}

/*media query*/

@media screen and (max-width: 600px){
    .sidebar-container, .content, .content h1, .content h2, section, .sessao-bem-vindo-content, .banner, .sessao-minibanner, .sessao-descricao, .sessao-bem-vindo-btn, form input, .banner-galeria  {
        width: 100%;
        background-color: rgb(24, 128, 55);
        display: inline-block;
    }
    
}
@media screen and (max-width: 900px){
    .sidebar-container, .content, .content h1, .content h2, section, .sessao-bem-vindo-content, .banner, .sessao-minibanner, .sessao-descricao, .sessao-bem-vindo-btn, form input, .banner-galeria  {
        width: 100%;
        background-color: rgb(231, 32, 5);
        display: inline-block;
    }
    
}
@media screen and (max-width: 480px){
    .sidebar-container, .content, .content h1, .content h2, section, .sessao-bem-vindo-content, .banner, .sessao-minibanner, .sessao-descricao, .sessao-bem-vindo-btn, form input, .banner-galeria  {
        width: 100%;
        background-color: rgb(72, 0, 241);
        display: inline-block;
    }
    
}