Jump to content

(iniciante) Organizar mais de uma Section lado a lado

rafamear
 Share

Recommended Posts

rafamear

rafamear

Posted
Posted (edited)

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

Edited by rafamear
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing


×
×
  • Create New...