Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

imagem ao lado do texto

Eu fiz o html do curso e quis fazer um só meu, para testar meus conhecimentos, só que não estou conseguindo colocar o logo ao lado do texto... Alguém poderia me ajudar? Desculpa se isso não tiver nada haver com o tópico.

Eu sei que não tem nda do tipo display: inline-block , porque não estava dando certo e resolvi perguntar...

HTML:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="application-name" content="VITI WebSite">
        <meta name="description" content="Essa página é para informações da escola VITI">
        <meta name="keywords" content="Escola,Viticultura,Cursos Profissionais,Enologia">
        <meta name="author" content="Vitor Produções">
        <title>VITI</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h2 class="cabeça">Escola Profissional de Viticultura e Enologia da Bairrada</h2>
        </header>
        <img id="escola" src="escola.png">
        <div class="principal">
            <h1 class="titulo-principal">V.I.T.I.</h1>

            <h2 class="titulo-cursos">Cursos Profissionais</h2>

            <p>
                <strong>Cozinha/Pastelaria:</strong> Onde vais aprender a cozinhar, a como funciona a cozinha num restaurante, trabalho em equipa e 
            muitos afins do mundo da restauração, se escolheres, iras ter o chefe <em>Jorge</em> como instrutor chefe (e talvez o <i>Tomas</i> 
            se ele não se for embora).
            </p>

            <p>
                <strong>Restaurante/Bar:</strong> O mundo ao lado, onde aprendes a servir a mesa. O mundo do restaurante e como conversar com os clientes
            e muitos afins, se escolheres terás o chefe <em>Vasco</em>, grande amigalhaço e que tem o maior truque com a garrafa de vinho que
            tu vais ver na vida e a chefe <em>Liliana</em>, que digasse de passagem, é uma ótima pessoa.
            </p>

            <p>
                <strong>Saúde:</strong> Vais aprender a ser um ótimo enfermeiro e quisá medico. Da anatomia humana ao como funciona um laboratório na sua
            totalidade.
            </p>

            <p>
                <strong>Gestão:</strong> Se o mundo do empreendedorismo é a tua "praia", então gestão encaixa como uma luva: economia, gestão, direito...
            Sairas completamente preparado para enfrentar o chefe  empresarial mais cheio e exigente que existe.
            </p>

            <p>
                <strong>Viticultura:</strong> Sabes aqueles enólogos que vemos por ai? Aqueles que abanam o copinho de vinho e bebem e ganham a vida com isso?
            então a <em>"Viti"</em> é a 1ª das duas escolas no país que te formará em tal.
            </p> 

            <img src="viti_logo.png" class="logo">
        </div>
    </body>
</html>

CSS:

body {
    background: #91AFD4;
    font-family:Arial, Helvetica, sans-serif;
}

.cabeça {
    padding-left: 20px;
    color: #093F66;
}

#escola {
    width: 100%;
}

.principal {
    background: #5F86B4;
    padding: 20px;
}

.titulo-principal {
    text-align: center;
}

.titulo-cursos {
    text-align: center;
}

p {
    text-align: justify;
}

.logo {
    width: 15%;
}
2 respostas
solução!

Olá Vitor! Você pode tentar englobar o seu texto dentro de uma outra div e transformar o display dela em inline-block com um widht de 50%, e escrever no HTML, sua img em cima dessa div

<div class="principal">
            <h1 class="titulo-principal">V.I.T.I.</h1>

            <h2 class="titulo-cursos">Cursos Profissionais</h2>
            <img src="viti_logo.png" class="logo">

            <div class="texto">
                <p>
                    <strong>Cozinha/Pastelaria:</strong> Onde vais aprender a cozinhar, a como funciona a cozinha num restaurante, trabalho em equipa e 
                muitos afins do mundo da restauração, se escolheres, iras ter o chefe <em>Jorge</em> como instrutor chefe (e talvez o <i>Tomas</i> 
                se ele não se for embora).
                </p>

                <p>
                    <strong>Restaurante/Bar:</strong> O mundo ao lado, onde aprendes a servir a mesa. O mundo do restaurante e como conversar com os clientes
                e muitos afins, se escolheres terás o chefe <em>Vasco</em>, grande amigalhaço e que tem o maior truque com a garrafa de vinho que
                tu vais ver na vida e a chefe <em>Liliana</em>, que digasse de passagem, é uma ótima pessoa.
                </p>

                <p>
                    <strong>Saúde:</strong> Vais aprender a ser um ótimo enfermeiro e quisá medico. Da anatomia humana ao como funciona um laboratório na sua
                totalidade.
                </p>

                <p>
                    <strong>Gestão:</strong> Se o mundo do empreendedorismo é a tua "praia", então gestão encaixa como uma luva: economia, gestão, direito...
                Sairas completamente preparado para enfrentar o chefe  empresarial mais cheio e exigente que existe.
                </p>

                <p>
                    <strong>Viticultura:</strong> Sabes aqueles enólogos que vemos por ai? Aqueles que abanam o copinho de vinho e bebem e ganham a vida com isso?
                então a <em>"Viti"</em> é a 1ª das duas escolas no país que te formará em tal.
                </p> 
        </div>
        </div>

No CSS ficaria ssim

body {
    background: #91AFD4;
    font-family:Arial, Helvetica, sans-serif;
}

.cabeça {
    padding-left: 20px;
    color: #093F66;
}

#escola {
    width: 100%;
}

.principal {
    background: #5F86B4;
    padding: 20px;
}

.titulo-principal {
    text-align: center;
}

.titulo-cursos {
    text-align: center;
}

p {
    text-align: justify;
}

.logo {
    vertical-align: top;
    width: 30%;
}

.texto{
    display:inline-block;
    width:50%;
}

Não sei se era esse resultado que você queria, mas você pode tentar uns paddings e margins para ficar mais parecido com oq vc imagina :)

Espero ter ajudado de alguma forma.

MEU DEUS, muito obrigado, estava tentando resolver isso desde ontem! Muito obrigado mesmo ficou muito bom... se quiser posso mandar aqui para ver como ficou... ahahahaahhaa