IMAGENS UMA DO LADO DA OUTRA COM AS CSS?

08/09/2021

Ol�, bom estou com duvidas em html/css, estou tentando deixar uma imagem do lado da outra, porem n�o estou conseguindo.

-----------------------------HTML------------------------------
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<meta charset="UTF-8">
<meta name="viewport" contente="width=device-width, initial-scale=1.0">
<title>
ARP
</title>
</head>
<body>
<section>
<div class="container-a" align="center">
<img src="logo/arp_logo_amarelo_vazado.png" alt="ARP LOGO">
<div class="container-b" align="center">
<img src="logo/arp_siglas_amarelo_vazado.png" alt="ARP SIGLAS">
</div>
</div>
<div class="texto" align="center">
<p>
TEXTO AQUI
</p>
</div>
</section>
<div align="center">
<a href="thyt"> 
<button class="bot�o">
Prosseguir para o site 
</button>
</a>
</div>
</body>
</html>

--------------------------------CSS---------------------------------

div.container {
display: inline-block;
}

div.container-a img {
width: 15%;

}

div.container-b img {
width: 20%;
}

p {
text-align: justify;
}

body {
background-color: #00032A;
}

h1 {
font-size: 75px;
}

div {
font-family: Arial, Helvetica, sans-serif;
font-size: 20pt;
color: #E5DE1E;
}

.bot�o {
font-family: arial;
font-size: 25px;
text-transform: uppercase; /* Deixa em caixa alta todas as letras dentro do bot�o */
font-weight: 700; /* deixa o texto em negrito */
border: none; /* remove todas as bordas */
padding: 10px;
cursor: pointer;
color: #00032A;
background: #E5DE1E;
box-shadow: 0px 5px 0px #cccc00
}

.bot�o:hover {
background: #cccc00;
box-shadow: #cccc00;
}

.bot�o:active {
position: relative;
top: 5px;
box-shadow: none;
}

Dsfsdfd

Curtir t�pico + 1

Responder

Posts

16/09/2021

Yuri Aguiar

Fala meu amigo, tudo joia?
Ent�o... existe v�rias formas de realizar isso; colocar uma imagem ao lado de outra.
A forma mais simples seria retirar a segunda imagem de dentro do container 'div'.

O seu HTML est� assim:

<div class="container-a" align="center">
    <img src="logo/arp_logo_amarelo_vazado.png" alt="ARP LOGO">
    <div class="container-b" align="center">
        <img src="logo/arp_siglas_amarelo_vazado.png" alt="ARP SIGLAS">
    </div>
</div>

Ficaria assim:

<div class="container-a" align="center">
    <img src="logo/arp_logo_amarelo_vazado.png" alt="ARP LOGO">
    <img src="logo/arp_siglas_amarelo_vazado.png" alt="ARP SIGLAS">
</div>

Espero que tenha te ajudado. Qualquer d�vida estamos ai.
Abra�o!

Responder

Gostei + 0