Skip to content

Commit

Permalink
responsividade para telas menores pronta
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gustavo-erades
Gustavo-erades committed Aug 17, 2023
1 parent 1183aca commit 511e6da
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 8 deletions.
23 changes: 18 additions & 5 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,14 +284,27 @@ section#home p{
section#quemSomos p.lead{
font-size: 1.3em;
}
#promocao-lista li{
font-size: 1.5em;
ul#promocao-lista li{
font-size: 2em;
}
p#promocao-do-dia{
font-size: 2em;
}
span.preco-promocao{
display: inline;
font-size:1.5em;
}
#promocao-do-dia{
p#promocao-do-dia-obs{
font-size: 1.5em;
}
.preco-promocao{
font-size:xx-large;
#card-medium{
display: none;
}
#card-large{
display: block;
}
h2#promocoes{
font-size: 3.5em;
}
}
@media(min-width:800px){
Expand Down
49 changes: 46 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,15 +177,40 @@ <h2 class="display-3 text-warning ml-auto mr-auto" id="promocoes">King Pizza do
</div>
</div>
</div>
<!-- mostra 3 cards em telas maiores -->
<!-- telas maiores -->
<div id="carousel-controles-promocao" class="carousel slide d-none d-md-block" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex">
<h2 class="display-3 text-warning ml-auto mr-auto" id="promocoes">Promoção real<span> &#9812;</span></h2>
</div>
<div class="row">
<div class="col-md-6 offset-md-3 mb-3">
<!-- até telas medium -->
<div class="col-md-6 offset-md-3 mb-3" id="card-medium">
<div style="text-align: center;" class="card">
<div class="card-body">
<ul id="promocao-lista">
<li class="card-text">
1 pizza <strong>tradicional</strong> grande
</li>
<li class="card-text">
<strong>+</strong> 1 pizza brotinho de chocolate
</li>
<li class="card-text">
<strong>+</strong> 1 refrigerante de 1,5 litros
</li>
</ul>
<p class="card-text" id="promocao-do-dia">por apenas <span class="preco-promocao">R$ 44,99</span></p>
<p id="promocao-do-dia" class="lead card-text mb-1">
<a class="btn botao-promocao" href="#salgada">
sabores tradicionais
</a>
</p>
</div>
</div>
</div>
<!-- telas large pra cima -->
<div class="col-lg-8 offset-lg-2 mb-3" id="card-large">
<div style="text-align: center;" class="card">
<div class="card-body">
<ul id="promocao-lista">
Expand Down Expand Up @@ -215,7 +240,8 @@ <h2 class="display-3 text-warning ml-auto mr-auto" id="promocoes">Promoção rea
<h2 class="display-3 text-warning ml-auto mr-auto" id="promocoes">King Pizza do dia</h2>
</div>
<div class="row">
<div class="col-md-6 offset-md-3 mb-3">
<!-- até telas medium -->
<div class="col-md-6 offset-md-3 mb-3" id="card-medium">
<div style="text-align: center;" class="card">
<div class="card-body">
<p id="promocao-do-dia" class=" lead card-text">
Expand All @@ -231,6 +257,23 @@ <h2 class="display-3 text-warning ml-auto mr-auto" id="promocoes">King Pizza do
</div>
</div>
</div>
<!--telas large pra cima -->
<div class="col-12 mb-3" id="card-large">
<div style="text-align: center;" class="card">
<div class="card-body">
<p id="promocao-do-dia" class=" lead card-text">
Todo dia uma King Pizza diferente, saborosa e com preço especial feita para você!
</p>
<p id="promocao-do-dia" class="lead card-text"> por apenas <span class="preco-promocao">R$ 29,99</span></p>
<p id="promocao-do-dia" class="lead card-text mb-0 mt-0">
<a class="btn botao-promocao" href="https://wa.me/5561994448515/?text=ol%C3%A1,%20gostaria%20de%20saber%20os%20sabores%20da%20king%20pizza%20do%20dia%20" target="_blank">
Confira os sabores
</a>
</p>
<p id="promocao-do-dia-obs"><strong>*confira os sabores e peça por whatsapp*</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 511e6da

Please sign in to comment.