Entrar Ainda não tem acesso?
3
respostas

[Dúvida] Queria mudar a imagem para a direita da tela e colocar os botões na direita superior, como faço?

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

por Mariana Luiza de Oliveira Silveira
| 66.3k xp | 85 posts

A última imagem eu fiz no Canva de como gostaria que ficasse no final

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <main>
           <h1>Natal Mágico</h1>
               <h1> Duquesa Doces</h1>
            <p><span>Venha experimentar o gostinho doce do Natal!
                <p><span>Lembrancinhas, presentes e tortas para te encantar!
                    <p><span> Pedidos até 20/12 </p>
                <a href="https://www.instagram.com/duquesadocesjf/"class="insta"><strong>Instagram</strong></a>
            <a href="https://drive.google.com/file/d/1MvMgAJqqScD6rowE41GFhO8wbmsxGURm/view?usp=drive_link"class="menu"><strong>Cardápio</strong></a>
            <img src="C:\Users\maril\Desktop\alura\hmtl e css\image.jpg" width="400px" alt="imagem do mini panetone" align="middle-right">
        </main>
    </header>
    <footer></footer>
</body>

</html>

body {
    background-color: beige;
}

h1 {
    color: goldenrod;
}
span {
    color: rgb(96, 23, 23);
    font-weight: bold;
}

.insta {
        padding: 10px 20px;
        border: 1px solid black;
        background-color: beige;
        color: black;
}

.menu {
    padding: 10px 20px;
        border: 1px solid black;
        background-color: beige;
        color: black;
}

Atualmente está assim Como está agora

Gostaria que a página ficasse assim:

Exemplo canva

3 respostas
por Algacyr Silva de Melo Junior
| 84k xp | 41 posts

Boa noite, Mariana! tentei chegar próximo do posicionamento, depois você pode ajustar melhor, espero ter ajudado.

<body>
    <header></header>
    <main>
        <section class="content">
            <h1>Natal Mágico</h1>
            <h2> Duquesa Doces</h2>
            <p>Venha experimentar o gostinho doce do Natal!</p>
            <p>Lembrancinhas, presentes e tortas para te encantar!</p>
            <p>Pedidos até 20/12</p>
        </section>
        <aside>
            <section class="links">
                <a href="https://www.instagram.com/duquesadocesjf/"class="insta"><strong>Instagram</strong></a>
                <a href="https://drive.google.com/file/d/1MvMgAJqqScD6rowE41GFhO8wbmsxGURm/view?usp=drive_link"class="menu"><strong>Cardápio</strong></a>
            </section>
            <img src="./html.png" width="400px" alt="imagem do mini panetone" align="middle-right">
        </aside>
    </main>
    <footer></footer>
</body>

body {
    background-color: beige;
}

main {
    display: flex;
    justify-content: center;
}

.links {
    display: flex;
    justify-content: space-evenly;
}

img {
    margin-top: 1rem;
}

h1 {
    color: goldenrod;
}
span {
    color: rgb(96, 23, 23);
    font-weight: bold;
}

.insta {
        padding: 10px 20px;
        border: 1px solid black;
        background-color: beige;
        color: black;
}

*Deixei o header e footer vazios visto que não vi necessidade de usá-los no layout.

por Mariana Luiza de Oliveira Silveira
| 66.3k xp | 85 posts

Oi, copiei seu código e ficou assim

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Algacyr Silva de Melo Junior
| 84k xp | 41 posts

Bom dia! dei uma olhada aqui pra entender, no seu CSS tem as classes insta e menu, substitua elas por um único seletor com a tag 

a {
    padding: 10px 20px;
    border: 1px solid black;
    background-color: beige;
    color: black;
}

Percebi que você utilizou os mesmos estilos nas duas classes, então podemos evitar repetição estilizando os 2 links com um único conjunto de declarações CSS usando o seletor 'a', como no exemplo acima.

O link da imagem eu alterei pra testar com uma imagem q tenho aqui, você tem que colocar o da sua imagem de volta la na propriedade src da tag . A posição dos elementos que queria era mais ou menos essa? Se quiser centralizar o conteúdo na vertical você pode adicionar no seletor da main a propriedade align-items com valor center, mantendo as declarações que ja estão lá:

main {
    align-items: center;
}

Se quiser podemos fazer uma chamada no Discord também, compartilhando tela pra ficar mais fácil de comunicar. Meu usuário é alga00101010