meu site, preciso de ajudar.... | HTML5 e CSS3 parte 4: avançando no CSS

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Conclusão

por Douglas Buss Figueiredo

| 99.1k xp | 75 posts

ola pessoal.

estou tentando alinhar lado a lado uma foto e um texto, ja tentei de varias formas e nao estou conseguindo...

se alguem puder dar uma luz, agradeço.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Sol Doce Delicia</title>
        <link rel="stylesheet" href="reset.css/reset.css">
        <link rel="stylesheet" href="style8.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Oooh+Baby&display=swap" rel="stylesheet">
    </head>
        <body>
            <header>
                <div class="caixa">
                    <img src="logo docedelicia.jpeg" alt="logo da empresa">
                    <nav>
                        <ul>
                            <li><a href="index8.html">home</a></li>
                            <li><a href="cardapio8.html">Cardapio</a></li>
                            <li><a href="pedido8.html">Faça seu pedido</a></li>
                        </ul>
                   </nav>
                </div>
                <img class="banner" src="fundo banner docinho.jpg" alt="imagem de doces">
            </header>

            <main>
                <section class="principal">
                    <div class="posiçao-conteudo">
                        <h1 class="conteudo">Tudo criado e preparado com amor e carinho para aquele momento especial.</h1>
                        <p>Qualquer momento seu é único: um aniversário, uma reunião com amigos, festa em família, casamento,
                        comemoração, um café com alguém querido ou até aquele momento que é só seu, tem um sabor especial.</p>

                        <img class="foto-brigadeiro" src="docinhos.jpg" alt="imagem de brigadeiros">
                    </div>
                </section>
            </main>
        </body>
</html>

CSS

body, html {
    overflow-x: hidden !important;
    font-family: 'Montserrat', sans-serif;
font-family: 'Oooh Baby', cursive;
}

header{
    background: burlywood;
    padding: 2em 0;
}
.caixa{
    width: 940px;
    position: relative;
    margin: auto;
}

nav{
    position: absolute;
    top: 110px;
    right: 0;
}

nav li{
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    color: #000000;
}

.banner{
    width: 100%;
    padding: 0 0 3em;
}

.principal{
    padding: 3em 0;
    background: linear-gradient(burlywood, brown)

}

.posição-conteudo{
    display: inline;

}

.conteudo{
    text-align: center;
    font-size: 3em;
    font-weight: bold;
}

p{
    text-align: center;
    font-size: 2em;
}

.foto-brigadeiro{
    width: 35%;
    height: 400px;

}

4 respostas

por Douglas Buss Figueiredo

| 99.1k xp | 75 posts

27/12/2021

alinhar lado a lado ''foto-brigadeiro'' e o texto ''h1''

solução!

por Marciel Antonio dos Santos

| 124.2k xp | 17 posts

Professor

28/12/2021

Ola. Como falta a imagem para fazer uns teste aqui, mais vai la. se você quer colocar a foto no lado do texto pode tentar display: flex; nesse caso você deve criar uma div que tenha como filhos os textos e a imagem. Também pode tentar display: grid; ou ainda dar um float na imagem, não sei qual é sua preferencia.

por ANDRÉ PICARO CHIEREGATO

| 81.4k xp | 26 posts

28/12/2021

Como o Marciel disse acima, eu aconselharia tambem a usar um display:flex ou display:grid na class "conteudo". Primeiramente nao sei muito bem qual sua ideia mas eu colocaria o a tag img logo abaixo da tag h1 , todos os dois em um mesmo div. E depois viria a tag p. Enfim, sò um pequeno exemplo:

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="conteudo">
        <div>
        <h1>Tudo criado e preparado com amor e carinho para aquele momento especial.</h1>
        <p>Qualquer momento seu é único: um aniversário, uma reunião com amigos, festa em família, casamento,
            comemoração, um café com alguém querido ou até aquele momento que é só seu, tem um sabor especial.</p>
        </div>
        <img src="montreux.jpg" alt="">
    </div>

</body>
</html>

-- CSS --

body{
    margin:5% 10%;
}

.conteudo{
    display:flex;
    justify-content: space-between;
}

img{
    width:50%;
}

(https://cdn1.gnarususercontent.com.br/1/885804/b65d6127-f403-43ef-a8ba-40b43807b305.png)

por Douglas Buss Figueiredo

| 99.1k xp | 75 posts

03/01/2022

vlw pessoal