Olá tudo bem ?
Estou criando uma página do zero, e estou acomanhando alguns vídeos no youtube para ir aprendo aos poucos. Entretando para não ficar igual, acabei montando do meu jeito que planejei. E em determinada parte não consigo alinhar no centro deterninado trecho da página. alguém pode me ajudar?
Vou deixar a imagem qual está desalinhado.
Esses 6 quadradados eram para ficr no centro, sendo do jeito que estão!
vou deixar os códigos. Caso necessário tenho Discord, que por onde consigo compartilhar tela.
html
<html>
<head>
<title>Primeiro projeto HTML</title>
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</head>
<body>
<header class="menu-principal">
<main>
<div class="header-1">
<div class="logo">
<a href="Index.html"><img src="./img/Logo_site_branco.png" /></a>
</div>
<div class="redes-sociais">
<ul>
<li>
<a href="https://wa.me/5547997266078?text=Mande+uma+mensagem%2C+logo+irei+atender%21+Muito+Obrigado+pelo+seu+contato%21">
<img src="./img/whatsapp.png"/>
</a>
</li>
<li>
<a href="https://www.instagram.com/micaelbeilke_/">
<img src="./img/instagram.png"/>
</a>
</li>
<li><a href="">
<img src="./img/twitter.png"/>
</a>
</li>
<li>
<a href="malito:micaelbeilke@gmail.com?subject=SITE">
<img src="./img/email.png"/>
</a>
</li>
</ul>
</div>
</div>
</main>
</header>
<main class="col-100 menu-urls">
<div class="header-2">
<div class="menu">
<ul>
<li><a href="#topo">Home</a></li>
<li><a href="">Pacotes</a></li>
<li><a href="Destinos.html">Destinos</a></li>
<li><a href="">Contato</a></li>
<li><a href="">Sobre Nós</a></li>
</ul>
</div>
<div class="busca">
<input placeholder="PESQUISAR" type="text" />
</div>
</div>
</main>
<div class="col-100">
<div class="slider-principal">
<img src="./img/slider.png">
<img src="./img/slider2.png">
<img src="./img/slider3.png">
</div>
</div>
<div class="col-100 ">
<div class="content texto-destaque">
<h1>Seus <strong>sonhos</strong> em apenas um lugar !</h1>
<div class="teste">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maeacenas accumsan lacus vel facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
</div>
<div class="cool-3 bloco-texto">
<img src="./img/America.png">
<h3>América</h3>
</div>
<div class="cool-3 bloco-texto">
<img src="./img/africa.png">
<h3>África</h3>
</div>
<div class="cool-3 bloco-texto">
<img src="./img/europa.png">>
<h3>Europa</h3>
</div>
<div class="cool-4 bloco-texto">
<img src="./img/Oceania.png">
<h3>Oceania</h3>
</div>
<div class="cool-4 bloco-texto">
<img src="./img/Asia.png">
<h3>Ásia</h3>
</div>
</div>
</div>
<div class="col-100 bloco-imagens-texto">
<div class="content" style="margin-left: 24%; float: left;">
<div class="col-3 bloco-texto bloco-imagem">
<img src="./img/China.png">
<p><b>China</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the
industry. Lorem
Ipsum has been
the and scrambled it.
atype specimen
</p>
</div>
<div class="col-3 bloco-texto bloco-imagem">
<img src="./img/Coreia do sul.png">
<p><b>Coreia do Sul</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the
industry. Lorem
Ipsum has been
the and scrambled it.
atype specimen
</p>
</div>
<div class="col-3 bloco-texto bloco-imagem">
<img src="./img/India.png">
<p><b>Índia</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the
industry. Lorem
Ipsum has been
the and scrambled it.
atype specimen
</p>
</div>
</div>
</div>
<div class="content" style="margin-left: 24%; float: left;">
<div class="col-3 bloco-texto bloco-imagem">
<img src="./img/Israel.png">
<p><b>Israel</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the
industry. Lorem
Ipsum has been
the and scrambled it.
atype specimen
</p>
</div>
<div class="col-3 bloco-texto bloco-imagem">
<img src="./img/maldivas.png">
<p><b>Maldivas</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the
industry. Lorem
Ipsum has been
the and scrambled it.
atype specimen
</p>
</div>
<div class="col-3 bloco-texto bloco-imagem">
<img src="./img/tailandia.png">
<p><b>Tailândia</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the
industry. Lorem
Ipsum has been
the and scrambled it.
atype specimen
</p>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>
css
body {
width: 100%;
height: 100%;
margin: 0 auto;
}
ul {
padding: 0px !important;
}
.menu-principal {
width: 100%;
background-color: #00008e;
height: 70px;
}
main,
.content {
margin: 0 auto;
width: 980px;
position: relative;
}
.logo {
float: left;
padding: 16px;
width: 70%;
}
.redes-sociais ul li {
margin-left: 16px;
display: inline-block;
float: left;
list-style: none;
}
.redes-sociais {
width: 25%;
float: right;
}
.header-2 {
background-color: #fff;
width: 980px;
margin: 0 auto;
padding: 2px;
}
.menu-urls {
height: 80px;
border-bottom: 3px solid #efefef;
}
/*
**Não mexer pq zoa o site**
.col-100 {
height: 65px;
border-bottom: 3px solid #d2d3d2
}
*/
.menu ul li {
display: inline-block;
color: #3e3e3e;
margin-left: 35px;
height: 47px;
}
.menu ul li:hover {
border-bottom: 3px solid #00008e;
}
.menu ul li a:hover {
color: #00008e;
}
.menu ul li a {
color: #3e3e3e;
text-decoration: none;
font-size: 24px;
font-variant: small-caps;
font-family: "Century Gothic";
font-weight: 300;
}
.menu {
width: 70%;
float: left;
}
.busca {
text-align: center;
width: 30%;
float: right;
}
.busca input {
background-image: url(../img/search.png);
background-repeat: no-repeat;
background-position: 90%;
height: 30px;
margin-top: 13;
padding: 15;
width: 190;
letter-spacing: 5px;
border: 1px solid #bdbdbd;
border-radius: 15px;
}
.col-100 {
width: 100%;
float: left;
position: relative;
}
.slick-track {
opacity: 1;
width: 9520px;
transform: translate3d(-1360px, 0px, 0px);
height: 454;
}
button.slick-prev {
font-size: 0px;
border: none;
width: 42px;
height: 72px;
z-index: 9;
background-color: transparent;
position: absolute;
background-image: url(../img/anterior.png);
top: 35%;
left: 14%;
}
button.slick-next {
font-size: 0px;
border: none;
width: 41px;
height: 76px;
z-index: 9;
background-color: transparent;
position: absolute;
background-image: url(../img/proximo.png);
top: 35%;
right: 14%;
}
.slick-list {
width: 100% !important;
}
.slick-initialized {
overflow: hidden;
}
.slick-dots li button {
font-size: 0px;
border: 5px solid #ffffff;
width: 20;
height: 20;
background: transparent;
border-radius: 50%;
cursor: pointer;
}
.slick-dots {
margin: 0 auto;
width: 50%;
position: absolute;
left: 50%;
top: 420px;
}
li.slick-active button {
background: #00bac6;
}
.slick-dots li {
padding-left: 10px;
display: inline-block;
}
.texto-destaque {
text-align: center;
}
.texto-destaque strong {
color: #646464;
}
.texto-destaque p {
font-size: 18px;
color: #9a9a9a;
}
.texto-destaque h1 {
font-family: "Myriad Pro";
font-size: 60px;
color: #818181;
}
.teste {
column-count: 2;
column-gap: 3rem;
}
.cool-3 {
padding-left: 15px;
padding-right: 15px;
width: 29%;
float: left;
position: relative;
}
.cool-4 {
padding-left: 15px;
padding-right: 15px;
width: 46%;
float: right;
position: relative;
}
.bloco-texto {
margin-top: 3em;
}
h3 {
padding: 2px;
font-size: 20px;
text-align: center;
font-weight: normal !important;
}
.col-3 {
text-align: center;
padding-left: 15px;
padding-right: 15px;
width: 29%;
float: left;
position: relative;
}
.bloco-imagem img {
margin: 0 auto;
width: 100%;
height: auto;
}
.bloco-imagem {
height: 300px;
border: 1px solid #c5c5c5;
padding-top: 15px;
padding-bottom: 15px;
margin-left: 10px;
}
.bloco-imagem b,
p {
text-align: left;
}
.bloco-texto {
margin-top: 3em;
}
h3 {
font-weight: normal !important;
}
.bloco-imagens-texto {
background-color: #eeeeee;
}
.bloco-imagens-texto:before {
width: 100%;
display: inline-block;
content: '';
height: 52px;
background: #ffffff;
background-image: url('../img/setinha.png');
background-repeat: no-repeat;
background-position: center;
}
.bloco-imagens-texto:after {
width: 100%;
display: inline-block;
content: '';
height: 70px;
background: #eeeeee;
}