IMAGENS UMA DO LADO DA OUTRA COM AS CSS?
08/09/2021
0
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;
}
-----------------------------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
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:
Ficaria assim:
Espero que tenha te ajudado. Qualquer dúvida estamos ai.
Abraço!
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
Clique aqui para fazer login e interagir na Comunidade :)