Olá, pessoal.
Eu segui os passos sugeridos pelo prof porém o layout ficou diferente após a quebra. Já vi, revi e nao consigo encontrar meu erro.
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!
Olá, pessoal.
Eu segui os passos sugeridos pelo prof porém o layout ficou diferente após a quebra. Já vi, revi e nao consigo encontrar meu erro.
@font-face {
font-family: "icones";
src: url(../font/icones.ttf);
}
body{
background-color: #1D232A;
font-family: "Open Sans", sans-serif, "icones";
color: white;
}
@media screen and (min-width: 1440px) {
body{
display: grid;
grid-template-columns: auto 1fr;
}
}
.cabecalho{
background-color:#15191C;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
display:flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
}
.cabecalho_menu::before{
content:"\e904";
font-size: 24px;
}
.cabecalho_logo{
width: 40px;
}
.cabecalho_notificacao::before{
content:"\e906";
font-size: 24px
}
.cabecalho_perfil{
display: none;
}
@media screen and (min-width: 1440px) {
.cabecalho{
background-color: #1D232A;
display: grid;
grid-template-columns: 1fr auto;
padding: 16px 60px;
height: 80px;
box-sizing: border-box;
column-gap: 32px;
}
.cabecalho_menu{
display: none;
}
.cabecalho_logo{
display: none;
}
.cabecalho_perfil{
display:grid;
grid-template-columns: repeat(3, auto);
column-gap: 8px;
align-items: center;
justify-self: flex-end;
color: #95999C;
padding: 8px 32px;
border-right: 1px solid #95999C;
}
.cabecalho_perfil::before{
content:"";
display: block;
width: 32px;
height: 32px;
background-image: url(../img/profile_2.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.cabecalho_perfil::after{
content:'\e90d';
color: white;
font-size: 1.5rem;
}
}
.menu_lateral{
display:flex;
flex-direction: column;
width: 74vw;
height: 100vh;
position:absolute;
left:-100vw;
transition:1s;
}
.menu_lateral--ativo{
left:0;
transition:1s;
}
.menu_lateral_imagem{
width:118px;
align-self: center;
padding: 16px;
}
.menu_lateral_link{
height: 64px;
color:#95999C;
padding-left: 64px;
display: flex;
align-items: center;
}
.menu_lateral_link::before{
content:"";
width: 24px;
height: 24px;
font-size: 24px;
position: absolute;
left: 24px;
}
.menu_lateral_link--ativo{
color: white;
border-left: 16px solid white;
padding-left: 48px;
}
.inicio::before{
content:'\e902'
}
.videos::before{
content:'\e90e'
}
.picos::before{
content:'\e909'
}
.integrantes::before{
content:'\e903'
}
.camisas::before{
content:'\e900'
}
.pinturas::before{
content:'\e90a'
}
@media screen and (min-width: 1440px) {
.menu_lateral{
position: static;
width: 200px;
}
}
.principal{
padding: 24px 16px;
display: grid;
gap: 16px;
}
.titulo_pagina{
font-weight: bold;
font-size: 1.5rem;
}
.titulo_secao{
font-size: 1.2rem;
font-weight: bold;
}
@media screen and (min-width: 1440px) {
.principal{
display: grid;
grid-template-columns: auto 1fr auto;
column-gap: 32px;
padding: 16px 60px;
}
}
.cartao{
width: 100%;
border-radius: 15px;
overflow: hidden;
background-color: #2C343A;
}
.cartao--destaque{
margin-bottom: 16px;
}
.cartao_conteudo{
padding:16px;
display:grid;
grid-template-columns: auto 1fr;
gap: 8px
}
.cartao_destaque{
grid-column: span 2;
}
.titulo_cartao{
font-size: 1.2rem;
font-weight: bold;
grid-column: span 2;
}
.secao{
display:grid;
gap:16px;
}
.cartao_autor{
color:#95999C;
font-size: 0.9rem;
grid-column: span 2;
}
.cartao_info{
display: flex;
align-items: center;
color:#95999C;
}
.cartao_minutos::before{
content:"\e90c";
margin-right: 8px;
}
.cartao_visualizacoes::before{
content:"\e90f";
margin-right: 8px;
}
.cartao_botao{
background-color: #0480DC;
display:flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 10px;
font-size: 0.9rem;
justify-self: flex-end;
}
.botao_play::before{
content:"\e90b";
font-size: 24px;
}
.cartao_botao--destaque{
width: 100%;
align-items: center ;
grid-column: span 2;
}
.cartao_botao--destaque::before{
margin-right: 8px;
}
precisaria do código html e o modelo do professor para ver no que posso te ajudar.
<!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">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
<link rel="stylesheet" href="assets/css/estilos.css">
<title>HZC | Home</title>
</head>
<body>
<header class="cabecalho">
<button class="cabecalho_menu"><i></i></button>
<img class="cabecalho_logo" src="assets/img/logo.svg" alt="logo">
<button class="cabecalho_notificacao"><i></i></button>
</header>
<nav class="menu">
<img class= "menu_imagem" src="assets/img/logo.svg" alt="logo">
<a class="menu_link menu_link_inicio" href="index.html">Inicio</a>
<a class="menu_link menu_link_videos" href="#">Videos</a>
<a class="menu_link menu_link_picos" href="picos.html">Picos</a>
<a class="menu_link menu_link_integrantes" href="#">Integrantes</a>
<a class="menu_link menu_link_camisas" href="#">Camisas</a>
<a class="menu_link menu_link_pinturas" href="#">Pinturas</a>
</nav>
<main class="principal">
<h2 class="titulo_pagina">Início</h2>
<article class="cartao">
<img src="assets/img/banner-mobile_1.png" alt="banner">
<div class="conteudo_cartao">
<p class="cartao_destaque">Vídeo em destaque</p>
<h3 class="titulo_cartao">HZC - life is.../2021</h3>
<p class="autor_cartao">Bruno Lopes</p>
<p class="cartao_info cartao_minutos">33 minutos</p>
<p class="cartao_info cartao_visualizacoes">53 visualizacoes</p>
<button class="botao botao_play botao_destaque">Assistir agora</button>
</div>
</article>
<section class="secao">
<h2 class="titulo_secao">Vídeos mais vistos</h2>
<article class="cartao">
<img src="assets/img/video_1.png" alt="video">
<div class="conteudo_cartao">
<p class="autor_cartao">Andre Soares</p>
<h3 class="titulo_cartao">HZC - Tudo sem padrin...</h3>
<p class="cartao_info cartao_minutos cartao_secao">33 minutos</p>
<button class="botao botao_secao"></button>
</div>
</article>
<article class="cartao">
<img src="assets/img/video_2.png" alt="video">
<div class="conteudo_cartao">
<p class="autor_cartao">Bruno Lopes</p>
<h3 class="titulo_cartao">HZC - Enter the Hu-flez</h3>
<p class="cartao_info cartao_minutos cartao_secao">33 minutos</p>
<button class="botao botao_secao"></button>
</div>
</article>
<article class="cartao">
<img src="assets/img/video_3.png" alt="video">
<div class="conteudo_cartao">
<p class="autor_cartao">Luiza Sampaio</p>
<h3 class="titulo_cartao">HZC - Vol.3</h3>
<p class="cartao_info cartao_minutos cartao_secao">33 minutos</p>
<button class="botao botao_secao"></button>
</div>
</article>
<article class="cartao">
<img src="assets/img/video_4.png" alt="video">
<div class="conteudo_cartao">
<p class="autor_cartao">Bruno Lopes</p>
<h3 class="titulo_cartao">HZC - Love machine</h3>
<p class="cartao_info cartao_minutos cartao_secao">33 minutos</p>
<button class="botao botao_secao"></button>
</div>
</article>
</section>
<article class="cartao">
<img src="assets/img/banner-mobile_2.png" alt="banner">
<div class="conteudo_cartao">
<p class="cartao_destaque">Nova arte</p>
<h3 class="titulo_cartao">Only zicas - Lagoa Dompa Club</h3>
<p class="autor_cartao">Bruno Lopes</p>
<p class="cartao_info cartao_compras">33,33</p>
<p class="cartao_info cartao_minutos">33 minutos</p>
<button class="botao_comprar botao_comprar_destaque">Comprar agora</button>
</div>
segue:
</article>
<section class="secao">
<h2 class="titulo_secao">Camisas mais recentes</h2>
<article class="cartao">
<img src="assets/img/produto_1.png" alt="video">
<div class="conteudo_cartao">
<p class="autor_cartao">Andre Soares</p>
<h3 class="titulo_cartao">IBM</h3>
<p class="cartao_info cartao_compras">33,33</p>
<button class="botao_comprar"></button>
</div>
</article>
<article class="cartao">
<img src="assets/img/produto_2.png" alt="video">
<div class="conteudo_cartao">
<p class="autor_cartao">Bruno Lopes</p>
<h3 class="titulo_cartao">Huflex Crew Philosophy CLub</h3>
<p class="cartao_info cartao_compras">33,33</p>
<button class="botao_comprar"></button>
</div>
</article>
<article class="cartao">
<img src="assets/img/produto_3.png" alt="video">
<div class="conteudo_cartao">
<p class="autor_cartao">Luiza Sampaio</p>
<h3 class="titulo_cartao">Corujita noturna</h3>
<p class="cartao_info cartao_compras">33,33</p>
<button class="botao_comprar"></button>
</div>
</article>
<article class="cartao">
<img src="assets/img/produto_4.png" alt="video">
<div class="conteudo_cartao">
<p class="autor_cartao">Bruno Lopes</p>
<h3 class="titulo_cartao">GGG - Gatin G Gorro</h3>
<p class="cartao_info cartao_compras">33,33</p>
<button class="botao_comprar"></button>
</div>
</article>
</section>
</main>
<script src="index.js"></script>
</body>
</html>Layout demonstrado pelo prof:
