IMAGENS UMA DO LADO DA OUTRA COM AS CSS?

HTML

CSS

HTML5

CSS3

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"> <!-- link para prosseguir para o site em si -->
<button class="botão">
Prosseguir para o site <!-- O link esta no botão, sendo assim só clicando para prosseguir -->
</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

Dsfsdfd

Curtidas 1

Respostas

Yuri Aguiar

Yuri Aguiar

08/09/2021

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!

GOSTEI 0
POSTAR