Boa tarde pessoal, tudo em paz?
Não estou conseguindo adicionar padding nas laterais da classe .principal. Ele aplica apenas para cima e para baixo. Meu main fica colado na borda.
.principal { padding: 24px 16px; }
Alguém poderia me ajudar?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa tarde pessoal, tudo em paz?
Não estou conseguindo adicionar padding nas laterais da classe .principal. Ele aplica apenas para cima e para baixo. Meu main fica colado na borda.
.principal { padding: 24px 16px; }
Alguém poderia me ajudar?
Bom dia Leonardo,
Poderia colocar seu código aqui ou até mesmo colocar o seu código no github que facilitaria bastante para dar apoio. Depois é só indicar o endereço.
Valeu.
Bom dia Marcelo!
desculpa nao ter colocado, segue o código! obrigado
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HZC | Home</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="cabecalho">
<button class="cabecalho__menu" aria-label="menu"><i></i></button> <!--aria-label para "ler" do que se trata(por causa da acessibilidade)-->
<img src="assets/img/logo.svg" alt="Logotipo da HZC" class="cabecalho__logo">
<button class="cabecalho__notificacao" aria-label="notificação"><i></i></button>
</header>
<nav class="menu-lateral "> <!--nav.menu-lateral>img.menu-lateral__logo+a[href="#"].menu-lateral__link*6 // .=nome da class; > =criar dentro da tag anterior; + =criar no msm nivel hierarquico; * =qtd que queremos criar-->
<img src="assets/img/logo.svg" alt="Logotipo da HZC" class="menu-lateral__logo">
<a href="#" class="menu-lateral__link menu-lateral__link--inicio menu-lateral__link--ativo">Ínicio</a>
<a href="#" class="menu-lateral__link menu-lateral__link--videos">Vídeos</a>
<a href="#" class="menu-lateral__link menu-lateral__link--picos">Picos</a>
<a href="#" class="menu-lateral__link menu-lateral__link--integrantes">Integrantes</a>
<a href="#" class="menu-lateral__link menu-lateral__link--camisas">Camisas</a>
<a href="#" class="menu-lateral__link menu-lateral__link--pintura">Pintura</a>
</nav>
<main class="principal"></main>
<h2 class="titulo-principal">Início</h2>
<article class="cartao">
<img src="assets/img/banner-mobile_1.png" alt="Banner do cartão" class="cartao__imagem">
<div class="cartao__conteudo">
<p class="cartao__destaque">Vídeo em destaque</p>
<h3 class="cartao__titulo">HZC - Título</h3>
<p class="cartao__perfil">Bruno Lopez</p>
<p class="cartao__info cartao__info--tempo">33 minutos</p>
<p class="cartao__info cartao__info--visualizacao">33 visualizações</p>
<button class="cartao__botao cartao__botao--play cartao__botao--destaque">Assistir agora</button>
</div>
</article>
<script src="index.js"></script>
</body>
</html>/* importando fonte "icones" que serão usadas */
@font-face {
font-family: 'icones';
src: url(../font/icones.ttf);
}
body {
background-color: #1D232A;
font-family: 'Open Sans', 'icones', sans-serif;
color: #ffffff;
}
/* cabeçalho */
.cabecalho {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #15191c;
padding: 8px 16px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
}
/* adicionando os icones, usando um pseudo-elemento <i> */
.cabecalho__menu i::before {
content: "\e904";
font-size: 24px; /* como é uma font, usamos o fon-size para aumentar o tamanho do icone */
}
.cabecalho__notificacao i::before {
content: "\e906";
font-size: 24px;
}
.cabecalho__logo {
width: 40px;
}
/* menu lateral*/
.menu-lateral {
display: flex;
flex-direction: column;
background-color: #15191C;
width: 75vw;
height: 100vh;
position: absolute; /*deixar escondido por padrão, e mostrar so quando for cliclado*/
left: -100vw; /*deixar escondido por padrão, e mostrar so quando for cliclado*/
transition: .25s;
}
/* quando clicar no menu vai aparecer */
.menu-lateral--ativo {
left: 0;
transition: .25s;
}
.menu-lateral__logo {
width: 118px;
padding: 16px;
align-self: center;
}
.menu-lateral__link {
height: 64px;
color: #95999C;
padding-left: 64px;
display: flex; /* transformar em display flex os link, p/ poder remanejar os icones */
align-items: center;
}
/* variação da classe - quando for ativa, mudar a cor do icone(font),criar uma borda no left */
.menu-lateral__link--ativo {
color: #ffffff;
padding-left: 56px;
border-left: 8px solid #ffffff;
}
/* pseudo elemento - icones */
.menu-lateral__link::before {
content: "";
width: 24px;
height: 24px;
font-size: 24px;
position: absolute; /* deixar o icone "voando" */
left: 24px;
}
/* icones do menu lateral */
.menu-lateral__link--inicio::before {
content: "\e902";
}
.menu-lateral__link--videos::before {
content: "\e90e";
}
.menu-lateral__link--picos::before {
content: "\e909";
}
.menu-lateral__link--integrantes::before {
content: "\e903";
}
.menu-lateral__link--camisas::before {
content: "\e900";
}
.menu-lateral__link--pintura::before {
content: "\e90a";
}
/* "corpo" da página */
.principal {
padding: 24px 16px;
}
.titulo-principal {
font-size: 1.5rem;
font-weight: 700;
}
.cartao {
width: 100%;
border-radius: 15px;
overflow: hidden; /* esconder qualquer coisa que ultrapasse o limite da borda ou do cartão */
background-color: #2C343A;
}
/* corpo do cartão */
.cartao__conteudo {
padding: 16px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.cartao__destaque {
grid-column: span 2;
}
.cartao__titulo {
font-size: 1.2rem;
font-weight: 700;
grid-column: span 2;
}
.cartao__perfil {
color: #95999C;
font-size: 0.9rem;
grid-column: span 2;
}
.cartao__info {
display: flex;
align-items: center;
color: #95999C;
}
.cartao__info--tempo::before {
content: "\e90c";
margin-right: 8px;
}
.cartao__info--visualizacao::before {
content: "\e90f";
margin-right: 8px;
}
.cartao__botao {
display: flex;
justify-content: center;
align-items: center;
background-color: #0480DC;
width: 40px;
height: 40px;
border-radius: 10px;
font-size: 0.9rem;
}
/* icone (font) play */
.cartao__botao--play::before {
content: "\e90b";
font-size: 24px;
}
.cartao__botao--destaque {
width: 100%;
grid-column: span 2;
}
.cartao__botao--destaque::before {
margin-right: 8px;
}Boa noite Leonardo,
Dei uma olhada no seu código e achei um erro na tag main. Vc abriu e já fechou na mesma linha. Essa tag teria que fechar no final do código antes de fechar a tag body. Assim:
<main class="principal">
<h2 class="titulo-principal">Início</h2>
<article class="cartao">
<img src="assets/img/banner-mobile_1.png" alt="Banner do cartão" class="cartao__imagem">
<div class="cartao__conteudo">
<p class="cartao__destaque">Vídeo em destaque</p>
<h3 class="cartao__titulo">HZC - Título</h3>
<p class="cartao__perfil">Bruno Lopez</p>
<p class="cartao__info cartao__info--tempo">33 minutos</p>
<p class="cartao__info cartao__info--visualizacao">33 visualizações</p>
<button class="cartao__botao cartao__botao--play cartao__botao--destaque">Assistir agora</button>
</div>
</article>
</main>Acredito que isso já resolva seu problema. Se não der avise que continuamos a verificação.
Muito obrigado Marcelo!! Falta de atenção minha! abraços