-1

Estou com dificuldade para deixar o background correto, pois, tem uma grande parte sobrando e eu não queria que ele tivesse a barra de rolagem tão grande na parte embaixo. Se eu alterar o width e o height do .cadastrobox, eu somente altero o fundo preto e não a imagem do salão. Antes, aparecia uma parte do fundo em branco. Aí coloquei o (background-attachment: fixed;) e isso resolveu essa parte do meu problema, mas, agora tem uma grande parte desnecessária do fundo dando continuidade. E eu gostaria que aonde existia a parte em branco, era aonde deveria ser o limite final da imagem. E eu não sei muito bem como alterar isso, pois sou iniciante nesse assunto. [![Antes do background-attachment: fixed][1]][1] [![Depois do background-attachment: fixed][2]][2]

    border: 0;
   
}

body {
    margin: 0;
    padding: 0;
    background-image: url(../imagens/salao.jpg);
    background-attachment: fixed;
    font-family: sans-serif;
    background-size: cover;
    justify-content: center;
    background-repeat: no-repeat;
}


h1 {
    margin: 0;
    padding: 0, 0, 20px;
    text-align: center;
    font-size: 22px;
}

h2, h4 {
    text-align: center;
}


.cadastrobox {
    width: 870px;
    height: 780px;
    background: rgba(0, 0, 0, .8);
    box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
    color: white;
    top: 60%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 40px 30px;
}

.cadastrobox i {
    width: 26px;
}

.cadastrobox p {
    margin: 0;
    padding: 0;
    font-weight: bold;
    display: inline-block;
}

.cadastrobox input {
    width: 100%;
    margin-bottom: 20px;
    display: block;
}


.cadastrobox input[type="email"],
input[type="password"], input[type="date"], input[type="text"] {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
    width: 40%;
}

.cadastrobox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    background: #d84b6b;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
    width: 25%;
    margin-left: 37.5%;
}

.cadastrobox input[type="submit"]:hover {
    cursor: pointer;
    background-color: #c54e6a;
    color: #fff;
}

.cadastrobox a {
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
}

.cadastrobox a:hover, input:hover, i:hover, p:hover{
    color: #d84b6b;
    border-bottom-color: #d84b6b;
}

.links {
    text-align: center;
}

.flex{
    display: flex;
    gap: 30px;
}

.flex .input-wrapper{
    width: 50%;
}

.flex .input-wrapper .input-img{
    position: relative;
}

.flex .input-wrapper input{
    width: 90%;
    text-indent: 30px;
}

.flex .input-wrapper .input-img i{
    position: absolute;
    top: 11px;
    left: 0;
}
.input-cadastre {
    margin-left: 18%;
    width: 80rem;
}
.input-cadastre .input-imgs{
    position: relative;
}

.input-cadastre input{
    text-indent: 30px;
}

.input-cadastre .input-imgs i{
    position: absolute;
    top: 11px;
    left: 0;
}

.cadastrobox  #politic{
    margin-left: 25% ;
}


/* Responsivo utilizado para tamanho de ipad */
@media only screen and (max-width: 800px){
    .form {
        width: 100%;
    }
}


/* Responsivo utilizado para tamanho de celular */
@media only screen and ( max-width: 480px) {
    .container .name h1 {
        font-size: 30px
    }

    .container .name h5 {
        font-size: 15px
    }

    /* é melhor colocar em porcentagem, para que o texto tenha respiro na tela */
    #about p{
        max-width: 80%;  
        text-align: justify;
    }
    
}```



```        <!DOCTYPE html>
        <html lang="pt-br">

        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="Imagens/R.png" rel="icon" />
            <link rel="stylesheet" href="css/cadastro.css">
            <title>Royal Hair</title>
        </head>

        <body>
            <div class="cadastrobox">
                <h1>Quero Criar uma Conta</h1>
                <h4>Precisamos coletar algumas informações para seu tratamento de realeza, vamos lá?</h4>
                <br>

                
                <form>
                    <div class="input-cadastre">
                        <p>Email </p>
                     <div class="input-imgs">
                        <input type="email" name="Email" placeholder= "Email">
                        <i class="fas fa-envelope"></i>
                     </div>
                    </div>
                   
                    
                    <div class="input-cadastre">
                        <p>Senha </p>
                        <div class="input-imgs">
                            <input type="password" name="senha" placeholder="*********"> 
                            <i class="fas fa-lock" aria-hidden="true"></i>
                    </div>
                    </div><br>
                    

                    <h2>Dados Pessoais</h2>
                    <br>
            <fieldset class="flex">
                <div class="input-wrapper">
                    <p>Nome </p>
                <div class="input-img">
                    <input type="text" name="Nome" placeholder="Nome">
                    <i class="fas fa-user"></i>
                </div>
            </div> 

                    <div class="input-wrapper">
                        <p>Sobrenome </p>
                        <div class="input-img">
                            <input type="text" name="Senha" placeholder="Sobrenome">
                            <i class="fas fa-user"></i>
                        </div>   
                    </div>
                  
            </fieldset>
            <fieldset class="flex">
                <div class="input-wrapper">
                    <p>CPF</p>
                    <div class="input-img">
                        <input type="text" name="CPF" placeholder="CPF">
                        <i class="far fa-address-card"></i>
                    </div>
                </div>
    
                    <div class="input-wrapper">
                        <p>Data de nascimento</p>
                        <div class="input-img">
                            <input type="text" name="Data" placeholder="dd/mm/aaaa">
                            <i class="far fa-calendar-alt"></i>
                        </div>   
                    </div>

            </fieldset>
            
            <fieldset class="flex">
                <div class="input-wrapper">
                    <p>Telefone </p>
                    <div class="input-img">
                        <input type="text" name="Telefone" placeholder="Telefone">
                        <i class="fas fa-phone-square-alt"></i>
                    </div>
                    
                </div>

                    <div class="input-wrapper">
                        <p>CEP </p>
                        <div class="input-img">
                            <input type="text" name="CEP" placeholder="CEP">
                            <i class="fas fa-map-marked"></i>
                        </div>
                    </div>
            </fieldset>

                <div>
                    <input class="form-check-input" type="checkbox" id="gridCheck">
                    <label for="gridCheck" id="politic">
                        Li e aceito a <a href="Politica.html">Politica de Privacidade</a> da empresa Royal Hair
                    </label>
                </div><br>
                <br>

                    <input type="submit" name="Enviar" value="Cadastrar">
                    <br>
                    
                </form>
            </div>
            <script src="https://kit.fontawesome.com/d010f99425.js" crossorigin="anonymous"></script>
        </body>

        </html>```


  [1]: https://i.sstatic.net/6QM8C.jpg
  [2]: https://i.sstatic.net/I1WHZ.jpg

1 Resposta 1

-1

O que está prejudicando desenvolver a tela como você gostaria é o atributo width: 80rem na classe .input-cadastre.

Fiz alguns testes aqui aplicando o atributo max-width: 100% na classe e o layout se ajustou como você gostaria. No final a classe ficou assim:

.input-cadastre {
    margin-left: 18%;
    width: 80rem;
    max-width: 100%;
}
1
  • Sérgio, deu super certo. Realmente era isso que eu queria e ficou perfeito... Muito obrigada pela ajuda em solucionar meu problema.
    – Ana Farias
    Commented 2/09/2021 às 23:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .