Skip to content

Commit

Permalink
style: responsividade para desktop e uso do hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@valencprado
valencprado committed Nov 14, 2023
1 parent ee6f2b1 commit ed11b29
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 48 deletions.
87 changes: 46 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<header class="cabecalho">
<div class="container">
<input type="checkbox" name="" id="menu" class="container__botao">
<label for="menu">
<label for="menu" class="container__rotulo">
<span class="cabecalho__menu-hamburguer container__imagem"></span>
</label>
<ul class="lista-menu">
Expand All @@ -33,7 +33,7 @@
<h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
<ul class="opcoes">
<input type="checkbox" name="" id="opcoes-menu" class="opcoes__botao">
<label for="opcoes-menu">
<label for="opcoes-menu" class="opcoes__rotulo">

<li class="opcoes__item">Categorias</li>
</label>
Expand Down Expand Up @@ -67,53 +67,57 @@ <h2 class="banner__titulo">Já sabe por onde começar?</h2>
</section>
<section class="carrossel">
<h2 class="carrossel__titulo">Novos lançamentos</h2>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<!-- If we need pagination -->
<div class="swiper-pagination" id="swiper-pagination"></div>

<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="./img/ApacheKafka.svg" alt="Livro sobre ApacheKafka e Spring Boot">
<div class="carrossel__container">

<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<!-- If we need pagination -->
<div class="swiper-pagination" id="swiper-pagination"></div>

<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="./img/ApacheKafka.svg" alt="Livro sobre ApacheKafka e Spring Boot">
</div>
<div class="swiper-slide"><img src="./img/Liderança.svg" alt="Livro sobre kliderança em design"></div>
<div class="swiper-slide"><img src="./img/Javascript.svg" alt="Livro sobre Javascript assertivo"></div>
<div class="swiper-slide"><img src="./img/Guia Front-end.svg" alt="Livro guia de Front-End"></div>
<div class="swiper-slide"><img src="./img/Portugol.svg" alt="Livro sobre Portugol"></div>
<div class="swiper-slide"><img src="./img/Acessibilidade.svg" alt="Livro sobre Acessibilidade web">
</div>

</div>
<div class="swiper-slide"><img src="./img/Liderança.svg" alt="Livro sobre kliderança em design"></div>
<div class="swiper-slide"><img src="./img/Javascript.svg" alt="Livro sobre Javascript assertivo"></div>
<div class="swiper-slide"><img src="./img/Guia Front-end.svg" alt="Livro guia de Front-End"></div>
<div class="swiper-slide"><img src="./img/Portugol.svg" alt="Livro sobre Portugol"></div>
<div class="swiper-slide"><img src="./img/Acessibilidade.svg" alt="Livro sobre Acessibilidade web">
</div>


<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

</div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

</div>
<div class="card">
<div class="card__descricao">
<div class="descricao">
<h3 class="descricao__titulo">
Talvez você também se interesse por...
</h3>
<h2 class="descricao__titulo-livro">Angular 11 e firebase</h2>
<p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google</p>
<div class="card">
<div class="card__descricao">
<div class="descricao">
<h3 class="descricao__titulo">
Talvez você também se interesse por...
</h3>
<h2 class="descricao__titulo-livro">Angular 11 e firebase</h2>
<p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google</p>
</div>
<img src="./img/Angular.svg" alt="Ícone do Angular" class="descricao__imagem">
</div>
<div class="card__botoes">
<ul class="botoes">
<li class="botoes__item"><img src="./img/Favoritos.svg" alt="Favoritar"></li>
<li class="botoes__item"><img src="./img/Compras.svg" alt=""></li>
<li class="botoes__item"><img src="" alt=""></li>
</ul>
<a href="" class="botoes__ancora">Saiba mais</a>
</div>
<img src="./img/Angular.svg" alt="Ícone do Angular" class="descricao__imagem">
</div>
<div class="card__botoes">
<ul class="botoes">
<li class="botoes__item"><img src="./img/Favoritos.svg" alt="Favoritar"></li>
<li class="botoes__item"><img src="./img/Compras.svg" alt=""></li>
<li class="botoes__item"><img src="" alt=""></li>
</ul>
<a href="" class="botoes__ancora">Saiba mais</a>
</div>
</div>
</section>
<section class="carrossel">
<h2 class="carrossel__titulo">Mais vendidos</h2>
<div class="carrossel__container">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
Expand Down Expand Up @@ -160,6 +164,7 @@ <h2 class="descricao__titulo-livro">Juliana Agarikov</h2>
<a href="" class="botoes__ancora">Saiba mais</a>
</div>
</div>
</div>
</section>
<section class="topicos">
<h2 class="topicos__titulo">Tópicos visitados recentemente</h2>
Expand Down
12 changes: 12 additions & 0 deletions styles/banner.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,16 @@
.banner__pesquisa::placeholder {
background-position: 6em;
}
}

@media screen and (min-width:1728px) {
.banner__pesquisa {
width: 35%;
}
.banner__pesquisa::placeholder {
background-position: 12em;
}
.banner {
padding: 6em 0;
}
}
52 changes: 45 additions & 7 deletions styles/carrossel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1em 0 .5em 0 ;
padding: 1em 0 .5em 0;
}

.swiper-slide img {
Expand All @@ -16,6 +16,7 @@
.swiper-button-prev::after, .swiper-button-next::after {
display: none;
}

#swiper-pagination {
position: initial;
margin: .5em 0;
Expand All @@ -25,18 +26,21 @@
display: flex;
justify-content: space-between;
}

.botoes {
display: flex;
}

.card__descricao {
margin-bottom: 0.5em;
}

.card {
background-color: var(--branco);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
margin: 1em;
padding: 1em;
background-color: var(--branco);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
margin: 1em;
padding: 1em;
}

.descricao__titulo {
Expand Down Expand Up @@ -72,19 +76,53 @@ padding: 1em;
font-size: 26px;

}

.swiper-pagination {
margin: 2em 0 3em 0;
margin: 2em 0 3em 0;
}

.swiper {
width: 60%;
}

.swiper-button-prev::after, .swiper-button-next::after {
display: block;
top: 60%;
}

.card {
width: 40%;
margin: 2em auto;
}
}

@media screen and (min-width:1728px) {
.carrossel__container {
display: flex;
margin: 0 20vw 3em 20vw;
}

.swiper-pagination {
margin: 1em 0;
}

.swiper {
width: 50%;
}

.descricao__titulo{
font-size: 32px;
}
.descricao__texto {
font-size: 1rem;
}
.descricao {
margin-right: 2em;
}
.card {
width: 60%;
margin-left: 3em;
}


}
6 changes: 6 additions & 0 deletions styles/contato.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,10 @@
.contato__email {
width: 30%;
}
}

@media screen and (min-width:1728px) {
.contato {
padding: 3em 20vw;
}
}
29 changes: 29 additions & 0 deletions styles/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,13 @@
display: block;
}

.container__botao:checked ~ .container__rotulo > .cabecalho__menu-hamburguer {
background-image: url('../img/Menu\ Aberto.svg');
}

.container__botao:checked ~.container__rotulo {
background: var(--azul-degrade);
}
.lista-menu__titulo, .lista-menu__item {
padding: 1em;
background-color: var(--branco);
Expand Down Expand Up @@ -84,6 +91,9 @@
padding: 0 1em;
text-transform: uppercase;
}
.opcoes__link:hover {
color: var(--laranja);
}
.opcoes__link {
text-decoration: none;
color: var(--preto);
Expand All @@ -101,6 +111,25 @@
.opcoes__botao {
display: none;
}
.opcoes__botao:checked~.opcoes__rotulo > .opcoes__item {
background: var(--azul-degrade);
color: var(--branco);

}
.opcoes__item {
padding: 2em 1em;
}
.lista-menu__item:hover {
background: var(--azul-degrade);
}
.lista-menu__item {
transition: all .6s;

}
.lista-menu__item:hover > .lista-menu__link {
-webkit-text-fill-color: var(--branco);
text-decoration: none;
}
}

@media screen and (min-width:1728px) {
Expand Down
10 changes: 10 additions & 0 deletions styles/rodape.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,14 @@ hr {
font-size: 14px;
color: var(--cinza-claro);
}
}

@media screen and (min-width:1728px) {
.lista-rodape {
border-left: 1px solid var(--cinza);
padding-left: 1em;
}
.rodape {
padding: 3em 0;
}
}
13 changes: 13 additions & 0 deletions styles/topicos.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,17 @@
.topicos__link {
font-size: 24px;
}
.topicos__link {
transition: background .8s;
}
.topicos__link:hover {
background-color: var(--branco);
color: var(--laranja);
}
}

@media screen and (min-width:1728px) {
.topicos {
padding: 3em 30vw;
}
}

0 comments on commit ed11b29

Please sign in to comment.