Entrar Ainda não tem acesso?
1
resposta

[Projeto] Projeto pessoal

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Manipulando botões e atividade Lista de exercícios

por Danilo Ali Ramos Dos Santos
| 8.8k xp | 13 posts

Estou querendo uma ajuda na configuração html para implementar o campo de "input email e o botão download" nesse projeto pessoal de uma pagina visual. Consegue me auxiliar nisso? https://www.figma.com/design/iO1DagFPVD6Ub1JXWeNqCn/3d-shape-Landing-page-(Community)?t=2zWvAklFfOraS4oN-0 imagem do botao: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/HTML CSS Position Flexbox/ProjetoFixacao/style.css">
    <title>Document</title>
</head>
<body>
    <header class="cabecalho">
        <img class="cabecalho-imagem" src="/HTML CSS Position Flexbox/ProjetoFixacao/img/studio.png" alt="Logo">
        <ul class="cabecalho-conteudo">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Suport</a></li>
        </ul>
    </header>
    <main class="conteudo">
        
        <section class="apresentacao">
            <h1 class="apresentacao-titulo">A Massive library of free <br> 3D <strong class="apresentacao-titulo-destaque">shapes</strong></h1>
            <p class="apresentacao-texto">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid quod illum eius, nostrum aut ullam.</p>
            <div class="input">
                <input id="email" name="email" required placeholder="Email" type="email" class="input_email" inputmode="email" autocomplete="email">
                <input type="submit" class="botton-donwload" value="Download">
                <img src="/HTML CSS Position Flexbox/ProjetoFixacao/img/btn.png" alt="">
            </div>
        </section>
        <img src="/HTML CSS Position Flexbox/ProjetoFixacao/img/logo.png" alt="" width="900">
    </main>
    <footer>
        <ul class="social-media">
            <img src="/HTML CSS Position Flexbox/ProjetoFixacao/img/Facebook.png" alt=""></li>
            <img src="/HTML CSS Position Flexbox/ProjetoFixacao/img/Instagram.png" alt="">
        </ul>
    </footer>
</body>
</html>

style.css

    margin: 1rem;
}


body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #F8C7C8;
}

.cabecalho {
    width: 96px;
    display: flex;
    align-items: center;
    gap: 657px;
}

.cabecalho-conteudo {
    display: inline-flex;
    text-decoration: none;
}

.conteudo {
    display: flex;
    align-items: center;
}

.apresentacao-titulo {
    width: 621px;
    font-size: 57px;
}

.apresentacao-titulo-destaque {
    color: #8468F5;
}

.apresentacao-texto {
    font-size: 20px;
}

.input {
    width: 511px;
}
1 resposta
por Rafaela Petelin Silvério
| 728.4k xp | 1628 posts
Alura Scuba Team Monitora de Fórum

Oi, Danilo! Como vai?

Você pode usar HTML e CSS para criar um input de e-mail estilizado com um botão de download. Segue um exemplo funcional:

<!-- Estrutura do campo de input e botão -->
<div class="input-container">
    <input 
        id="email" 
        name="email" 
        required 
        placeholder="Your email address" 
        type="email" 
        class="input-email">
    
    <button class="button-download">
        Download <span class="icon">✈️</span>
    </button>
</div>

Agora, a estilização com CSS para que ele fique arredondado e com um efeito moderno:


/* Estilização da página para centralizar o input */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}

/* Container do input */
.input-container {
    display: flex;
    align-items: center;
    width: 450px;
    background: white;
    padding: 10px;
    border-radius: 30px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Campo de email */
.input-email {
    flex: 1;
    padding: 12px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #888;
    border-radius: 30px;
}

/* Botão de download */
.button-download {
    background: linear-gradient(135deg, #8468F5, #C277F2);
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

/* Efeito hover no botão */
.button-download:hover {
    background: linear-gradient(135deg, #6a50e0, #a362d9);
}

/* Ícone dentro do botão */
.icon {
    font-size: 18px;
}

Explicação do código:

  • HTML: Cria um input para e-mail e um botão de download com um ícone ✈️.
  • CSS:
    • Centraliza o conteúdo na tela com display: flex.
    • O input e o botão têm bordas arredondadas para um visual moderno.
    • O botão possui um efeito de gradiente e muda de cor ao passar o mouse.

Resultado:

Campo de e-mail com botão "Download" estilizado em degradê roxo

Se quiser personalizar mais, pode ajustar os tamanhos, cores e até adicionar efeitos de animação!

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado