<link rel="stylesheet"
href="[Link] />
Tarefa do Justify-Content. Profile, Notifications…
display:flex >>> para a posição ficar flexível, sem isso não haverá mudanças!!!
justify-content: start/end/center/space-between/space-around/space-evenly
border-radius: 20px >>> para os cantos ficarem arredondados
box-shadow:0 10px 25px rgb(99, 97, 97)
margin: auto >>> deixa no centro horizontalmente
text-decoration: none >>> tira bolinhas de listas e tracinhos de links por exemplo
Principais pontos desse código:
1. A div container, que engloba tudo, representada pelo quadrado maior azul claro
2. As divs específicas de cada justify-content diferente, representadas pelos retângulos
brancos. O conteúdo dentro dessas divs são iguais, a única coisa que muda é o
justify-content.
3. Os quadradinhos menores com opções de Profile, Notifications, Payments e Setting.
Nesse caso eles são links (a), mas também poderiam ser listas (li) por exemplo.
4. E a gente também cria uma classe específica para o Perfil, apenas para colocar uma
coloração diferente
<style>
.container{
background:rgb(214, 218, 255);
padding:25px;
border-radius:20px;
box-shadow:0 10px 25px rgb(99, 97, 97);
text-align:center;
width:600px;
margin:auto;
}
a{
background:rgb(214, 218, 255);
color:black;
border-radius:20px;
text-align: center;
text-decoration: none;
padding: 5px;
}
.active{
background:rgb(0, 26, 255);
color:rgb(255, 255, 255);
}
.start{
background-color: white;
border-radius:20px;
display: flex;
justify-content: start;
text-align: center;
gap:10px;
height: 30px;
padding: 10px;
}
.end{
background-color: white;
border-radius:20px;
height: 30px;
padding: 10px;
display: flex;
justify-content: end;
gap:10px;
}
.center{
display: flex;
justify-content: center;
gap:10px;
background-color: white;
border-radius:20px;
height: 30px;
padding: 10px;
}
.between{
display: flex;
justify-content: space-between;
gap:10px;
background-color: white;
border-radius:20px;
height: 30px;
padding: 10px;
}
.around{
display: flex;
justify-content: space-around;
gap:10px;
background-color: white;
border-radius:20px;
height: 30px;
padding: 10px;
}
.evenly{
display: flex;
justify-content: space-evenly;
gap:10px;
background-color: white;
border-radius:20px;
height: 30px;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="start">
<a href="" class="active">Profile</a>
<a href="">Notifications</a>
<a href="">Payments</a>
<a href="">Setting</a>
</div>
<br>
<div class="end">
<a href="" class="active">Profile</a>
<a href="">Notifications</a>
<a href="">Payments</a>
<a href="">Setting</a>
</div>
<br>
<div class="center">
<a href="" class="active">Profile</a>
<a href="">Notifications</a>
<a href="">Payments</a>
<a href="">Setting</a>
</div>
<br>
<div class="between">
<a href="" class="active">Profile</a>
<a href="">Notifications</a>
<a href="">Payments</a>
<a href="">Setting</a>
</div>
<br>
<div class="around">
<a href="" class="active">Profile</a>
<a href="">Notifications</a>
<a href="">Payments</a>
<a href="">Setting</a>
</div>
<br>
<div class="evenly">
<a href="" class="active">Profile</a>
<a href="">Notifications</a>
<a href="">Payments</a>
<a href="">Setting</a>
</div>
</div>
</body>
</html>
- Tarefa do top clients
A ideia aqui é que o grid fique de acordo com o tamanho do dispositivo.
Essa linha @media (max-width: 768px){ é a principal parte pra fazer isso ser possível. Esse
@media funciona como um if aqui.
No pc:
display:grid
grid-template-columns: repeat(4, 1fr)
No celular:
.box{
width:300px;
}
.logos{
grid-template-columns: repeat(2, 1fr);
}
<style>
body{
font-family: Arial, sans-serif;
background:#f2f2f7;
display:flex;
justify-content:center;
padding:40px;
}
.box{
background:white;
padding:25px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
text-align:center;
width:500px;
}
.logos{
display:grid;
/* PC: tudo em linha */
grid-template-columns: repeat(4, 1fr);
gap:20px;
align-items:center;
margin-top:20px;
}
.logos img{
width:100px;
max-width:100%;
margin:auto;
}
/* CELULAR */
@media (max-width: 768px){
.box{
width:300px;
}
.logos{
/* vira um quadrado 2x2 */
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="box">
<h2>Top Clients</h2>
<div class="logos">
<img src="[Link]">
<img src="[Link]">
<img src="[Link]">
<img src="[Link]">
</div>
</div>
</body>
</html>
DETAILS
OUTPUT ONINPUT
<form oninput="[Link] = [Link] + ' ' + [Link]">
<input type="text" id="nome" placeholder="Nome">
<input type="text" id="sobrenome" placeholder="Sobrenome">
<output name="resultado"></output>
</form>
/* Como funciona:
1. oninput dispara a cada tecla digitada
2. [Link] e [Link] pegam o conteúdo dos inputs
3. [Link] escreve dentro do <output> */
MENU COM FLEX-GROW
TABELAS
<table class="planos">
<thead>
<tr>
<th rowspan="2">Plano</th>
<th colspan="2">Valores</th>
</tr>
<tr>
<th>Mensal</th>
<th>Anual</th>
</tr>
</thead>
<tbody>
<tr><td>Basic</td><td>R$29</td><td>R$290</td></tr>
<tr><td>Pro</td><td>R$59</td><td>R$590</td></tr>
<tr><td>Max</td><td>R$99</td><td>R$990</td></tr>
</tbody>
</table>
/* CSS — zebramento + hover */
.planos { border-collapse: collapse; }
.planos th, .planos td {
border: 1px solid #333;
padding: 8px 14px;
}
.planos tbody tr:nth-child(even) {
background: #e8d5b7;
}
.planos tbody tr:hover {
background: #c4502c;
color: #fff;
}
.planos td:hover {
outline: 2px solid #000;
}
LISTA TYPE E START
<ol type="I" start="3">
<li>Primeiro item visível</li>
<li>Segundo item visível</li>
<li>Terceiro item visível</li>
</ol>
CAFÉ AURORA HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet"
href="[Link]
/>
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#especialidades">Especialidades</a></li>
<li><a href="#cardapio">Cardápio</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#reserva">Reserva</a></li>
</ul>
</nav>
<header id="inicio">
<h1>Café Aurora</h1>
<h4>Grãos bonitos, torra especial e alma cearense</h4>
</header>
<section id="especialidades">
<h2>Nossas especialidades</h2>
<div class="cards">
<div class="card">
<span class="material-symbols-outlined">
coffee
</span>
<h3>Grãos especiais</h3>
<h4>Microlotes do Brasil e da Etiópia.</h4>
</div>
<div class="card">
<span class="material-symbols-outlined">
local_fire_department
</span>
<h3>Torra artesanal</h3>
<h4>Tostamos toda terça e sexta.</h4>
</div>
<div class="card">
<span class="material-symbols-outlined">
bakery_dining
</span>
<h3>Confeitaria</h3>
<h4>Pães e bolos sem conservantes.</h4>
</div>
<div class="card">
<span class="material-symbols-outlined">
eco
</span>
<h3>Sustentável</h3>
<h4>Embalagens compostáveis.</h4>
</div>
</div>
</section>
<section id="cardapio">
<h2>Cardapio</h2>
<br><br>
<table>
<thead>
<tr>
<th rowspan="2">Bebida</th>
<th colspan="2">Tamanho</th>
<th rowspan="2">Origem</th>
</tr>
<tr>
<th>Pequeno</th>
<th>Grande</th>
</tr>
</thead>
<tbody>
<tr>
<td>Espresso</td>
<td>R$7</td>
<td>R$10</td>
<td>Sul de Minas</td>
</tr>
<tr>
<td>Capuccino</td>
<td>R$11</td>
<td>R$14</td>
<td>Mogiana</td>
</tr>
<tr>
<td>V6o filtrado</td>
<td>R$13</td>
<td>R$17</td>
<td>Etiópia Yirgacheffe</td>
</tr>
</tbody>
</table>
</section>
<section id="faq">
<h2>Dúvidas frequentes</h2>
<div>
<dl>
<details>
<summary>Vocês servem opções veganas?</summary>
<dt>Leites vegetais</dt>
<dd>Sim — aveia, amêndoas e coco, sem custo extra.</dd>
<dt>Confeitaria</dt>
<dd>Temos pelo menos três opções 100% veganas todos os dias.</dd>
</details>
<details>
<summary>Posso comprar os grãos para levar?</summary>
<dt>Embalagens</dt>
<dd>250g e 500g, com data de torra impressa.</dd>
<dt>Moagem</dt>
<dd>Moemos no momento da compra, conforme seu método.</dd>
</details>
<details>
<summary>Vocês têm Wi-Fi e tomadas?</summary>
<dt>Internet</dt>
<dd>Fibra de 600 Mbps, sem senha.</dd>
<dt>Tomadas</dt>
<dd>Em todas as mesas, inclusive na varanda.</dd>
</details>
<details>
<summary>Como funcionam as reservas?</summary>
<dt>Capacidade</dt>
<dd>Reservamos mesas para até 6 pessoas.</dd>
<dt>Antecedência</dt>
<dd>Pelo menos 2 horas antes pelo formulário abaixo.</dd>
</details>
</dl>
</div>
</section>
<section id="reserva">
<h2>Faça sua reserva</h2>
<form oninput="[Link]= 'Olá, ' + [Link] + ' ' +
[Link] + '! Estamos te esperando.'">
<input type="text" id="nome" placeholder="Nome">
<input type="text" id="sobrenome" placeholder="Sobrenome">
<output name="saudacao">Digite seu nome para confirmar a
reserva...</output>
</form>
</section>
<footer>
<p>© Café Aurora · Fortaleza, Ceará · Aberto das 7h às 22h</p>
</footer>
</body>
</html>
CAFÉ AURORA CSS
*{
margin: 0;
padding: 0;
}
nav{
position: fixed;
top:0;
left:0;
right:0;
background:aqua;
z-index:1;
}
nav ul{
display: flex;
list-style: none;
}
nav li{
flex-grow: 1;
text-align: center;
transition:flex-grow .3s,background .3s;
}
nav li a{
display:block;
padding:18px 10px;
color:#000000;
text-decoration:none;
font-size:20px;
/* letter-spacing:1px; */
}
li:hover{
flex-grow: 3;
background-color: rgb(127, 255, 127);
}
header{
padding: 100px;
display: flex;
flex-direction: column;
align-items: center;
background: blue;
color: white;
text-align: center;
}
h1{
padding-top: 15px;
padding-bottom: 10px;
font-size: 100px;
}
header h4{
font-size: 25px;
}
section{
padding:50px 30px;
max-width:1100px;
margin:0 auto;
}
section h2{
text-align: center;
border-bottom: 2px solid black;
font-size: 40px;
padding:10px;
margin-top:20px;
}
.cards{
display: flex;
gap: 16px;
justify-content: space-around;
}
.card{
margin: 50px 0px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
/* padding: 10px; */
align-items: center;
border: 2px solid black;
background: lightblue;
width:300px;
height:100px;
}
.card:hover{
transform: translateY(-5px);
box-shadow: 0 8px 15px rgb(0,0,0,.5);
}
.card h3{
font-size: 25px;
margin-bottom: 10px;
.material-symbols-outlined{
font-size: 42px !important;
}
table{
margin:auto;
font-size: 30px;
border-collapse: collapse;
text-align: center;
padding: 10px;
}
td:hover{
background-color: rgb(127, 236, 255);
border: 2px solid rgb(255, 255, 255);
cursor: pointer;
}
table th, table td{
padding: 10px;
border: 2px solid rgb(39, 39, 65);
}
th{
background-color: rgb(33, 122, 33);
}
tr:nth-child(odd){
background-color: rgb(127, 255, 127);
}
dl{
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
margin: 20px;
}
details{
display: flex;
border-radius: 10px;
flex-direction: column;
font-size:24px;
width:700px;
border: 2px solid black;
padding: 10px;
background-color: lightblue;
}
summary{
font-weight: bold;
cursor: pointer;
color:#0a1d35;
list-style: none;
}
summary::before {
content: "●";
color: rgb(32, 23, 71);
margin-right: 10px;
}
details[open]{
background-color: rgb(77, 192, 115);
color:rgb(0, 0, 0);
border-left:6px solid #418354;
}
dt{
font-weight: bold;
font-weight: bold;
padding-top:18px;
}
form{
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
padding:50px 30px;
max-width:600px;
margin:50px auto;
border: 2px solid black;
align-items: center;
input, textarea{
width:500px;
height: 30px;
padding-left:10px;
box-sizing: border-box;
}
output{
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
font-size: 20px;
color: rgb(0, 0, 0);
font-weight: bold;
font-style: italic;
background-color: rgb(77, 192, 115);
align-items: center;
width:500px;
height: 60px;
}
::placeholder{
font-size: 15px;
}
footer{
background-color: royalblue;
color: white;
text-align: center;
padding:50px;
}