Jump to content

(iniciante) Organizar mais de uma Section lado a lado

rafamear

Por rafamear
em HTML & CSS

 Compartilhar

Postagens Recomendadas

rafamear

rafamear

Postado
Postado (editado)

Estou fazendo um site que vai armazenar outros links de sites em pequenos "blocos", consegui fazer uma linha mas quero fazer outras ao lado dela e nao descobri como fazer isso usando o section que divide cada site, e eu quero que seja dessa forma, quero colunas de 3 e que o proximo ou seja o bloco canva esteja ao lado do PicWish mas nao sei como move-lo até la 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Site pessoal com programas que uso, sites e muito mais">
  <title>Site Rafa - Sites</title>
  <link rel="stylesheet" type="text/css" href="Style3.css">
</head>
<body>
  <header class="cabecalho">
	<img class="cabecalho-logo" src="logorafa.png" alt="Image" height="68" width="68">
	<nav class="cabecalho-menu">
	<a class="cabecalho-menu-item" href="index2.html">Home</a>
	<a class="cabecalho-menu-item">biblioteca</a>
	<a class="cabecalho-menu-item">Projetos</a>
	<a class="cabecalho-menu-item" href="sites.html">Sites</a>
	</nav>
  </header>
  
  <main class="conteudo-sites">
  
    <section class="conteudo-site1">
	<div class="conteudo-site1-Nome">
	<h1 class="conteudo-site-titulo">Site - </h1>
	<h1 class="conteudo-site-titulo">PicWish</h1>
	<h2 class="conteudo-site-subtitulo">Edição de fotos</h2>
	<a href='https://picwish.com/pt/' target="_blank" rel="noopener noreferrer"><button class="conteudo-sites-botao">Abrir</button></a>
	</div>
	<img class="conteudo-sites-imagem" src="PicWish.png" alt="Image" height="88" width="88">
	</section>
	
	<section class="conteudo-site2">
	<div class="conteudo-site2-Nome">
	<h1 class="conteudo-site-titulo">Site - </h1>
	<h1 class="conteudo-site-titulo">123Apps</h1>
	<h2 class="conteudo-site-subtitulo">Edite e Converta</h2>
	<a href='https://123apps.com/pt/' target="_blank" rel="noopener noreferrer"><button class="conteudo-sites-botao">Abrir</button></a>
	</div>
	<img class="conteudo-sites-imagem" src="123Apps.png" alt="Image" height="88" width="88">
	</section>
	
	<section class="conteudo-site3">
	<div class="conteudo-site2-Nome">
	<h1 class="conteudo-site-titulo">Site - </h1>
	<h1 class="conteudo-site-titulo">Any Color</h1>
	<h2 class="conteudo-site-subtitulo">Cor Aleatoria</h2>
	<a href='http://randomcolour.com/' target="_blank" rel="noopener noreferrer"><button class="conteudo-sites-botao">Abrir</button></a>
	</div>
	<img class="conteudo-sites-imagem" src="Color.png" alt="Image" height="88" width="88">
	</section>
	
    <section class="conteudo-site4">
	<div class="conteudo-site4-Nome">
	<h1 class="conteudo-site-titulo">Site - </h1>
	<h1 class="conteudo-site-titulo">Canvas</h1>
	<h2 class="conteudo-site-subtitulo">Arte e Design</h2>
	<a href='http:/canvas.com/' target="_blank" rel="noopener noreferrer"><button class="conteudo-sites-botao">Abrir</button></a>
	</div>
	<img class="conteudo-sites-imagem" src="Color.png" alt="Image" height="88" width="88">
	</section>
  </main>
</body>
</html>

GeNXVsK.png

Editado por rafamear
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...