<div class="menu-app">

<header class="hero">
<div class="hero-overlay"></div>
<div class="hero-content">
<p class="eyebrow">Sabor que impressiona em cada mordida</p>

<h1>BURGER HOUSE <br>IMPÉRIO</h1>

<p class="tagline">
Os melhores hambúrgueres da cidade.
</p>

<div class="forecast">
🌤 Previsão para Hoje:
<span>90% de fome • 100% de vontade de hambúrguer</span>
</div>
</div>
</header>

<main class="menu-layout">
<section class="menu-section">
<div class="section-title">
<h2>Sanduíche de Destaque</h2>
</div>

<article class="featured-card">
<div class="sticker">O MAIS PEDIDO</div>
<h3>O MONSTRO DA FOME</h3>
<p class="menu-desc">
Hambúrguer artesanal de 180g, queijo cheddar derretido, bacon crocante, cebola caramelizada e molho especial da casa no pão brioche tostado.
</p>
<p class="menu-note">
"Alguns clientes tentaram terminar sozinhos. Nem todos conseguiram."

</p>
<span class="price">R$ 29,90</span>
</article>

<div class="section-title">
<h2>CARDÁPIO DE LANCHES</h2>
</div>

<div class="menu-grid">
<article class="menu-card">
<h3>O CHEF SEM FREIO</h3>
<p class="menu-desc">
Hambúrguer artesanal, cheddar, bacon, alface e tomate.
</p>

<p class="menu-note">
"Pode causar vontade de pedir outro."
</p>
<span>R$ 24,90</span>
</article>

<article class="menu-card">
<h3>DERRETIDO DA CASA</h3>
<p class="menu-desc">Pão australiano, carne grelhada e muito queijo derretido.</p>
<p class="menu-note">"Guardanapos recomendados."</p>
<span>R$ 26,90</span>
</article>

<article class="menu-card">
<h3>WRAP DO ESTAGIÁRIO</h3>
<p class="menu-desc">Frango grelhado, alface, tomate e molho especial.</p>
<p class="menu-note">"Simples, eficiente e sempre entrega."</p>
<span>R$ 19,90</span>
</article>

<article class="menu-card">
<h3>Club do Frango do Farol</h3>
<p class="menu-desc">Sanduíche club de frango em camadas com bacon, tomate, alface e a confiança de quem tem vista para o mar.</p>
<p class="menu-note">Visível de vários telhados famintos ao redor.</p>
<span>R$ 14,00</span>
</article>

<article class="menu-card">
<h3>CLUBE DA FOME</h3>
<p class="menu-desc">Frango empanado, bacon, queijo e salada fresca.</p>
<p class="menu-note""Para quem pulou o café e o almoço.".</p>
<span>R$ 28,90</span>
</article>

<article class="menu-card">
<h3>A Isca do Calçadão</h3>
<p class="menu-desc">Filé de frango crocante com cheddar e molho da casa.</p>
<p class="menu-note">"Ninguém consegue fingir que não gostou."</p>
<span>R$ 23,90</span>
</article>

</div>
</section>

<aside class="sidebar">
<div class="notice-board">
<h2>Avisos da Cabana</h2>
<ul>
<li>⚠ Não discuta com o chef sobre o ponto da carne</li>
<li>⚠ Batatas fritas desaparecem sem explicação</li>
<li>⚠ Pedidos feitos com fome extrema podem ser exagerados</li>
<li>⚠ Último cliente que pediu "só uma batatinha" saiu com combo completo</li>
</ul>
</div>

<div class="drinks-board">
<h2>Bebidas Geladas</h2>

<div class="drink-item">
<span>Refrigerante Tradicional</span>
<strong>R$ 6</strong>
</div>

<div class="drink-item">
<span>Suco Natural do Dia</span>
<strong>R$ 8</strong>
</div>

<div class="drink-item">
<span>Chá Gelado da Casa</span>
<strong>R$ 7</strong>
</div>

<div class="drink-item">
<span>Água Mineral</span>
<strong>R$ 4</strong>
</div>

<div class="drink-item">
<span>Milkshake Cremoso</span>
<strong>R$ 14</strong>
</div>
</div>

<div class="status-box">
<p>Uma mordida e você vai entender por que todo mundo...</p>
<h3>volta</h3>
</div>
</aside>
</main>

<footer class="footer">
<p>Aberto das 18:00 ás 23:00</p>
<p>Bairro Jerônimo N13, rua Jerusalem •</p>
<p>(555) 555-GULL</p>
</footer>
</div>


@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;700&family=Permanent+Marker&display=swap");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #f3ead7;
font-family: "Inter", sans-serif;
color: #1f3a4d;
}

.menu-app {
min-height: 100vh;
}

.hero {
position: relative;
min-height: 60vh;
background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
url("https://i.pinimg.com/1200x/0c/ac/c9/0cacc9abcaa47092e06f6e6bc7cfece4.jpg")
center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
padding-bottom: 120px;
}

.hero::after {
content: "⚠ ZONA DE PERIGO, MUITAS COISAS GOSTOSAS";
position: absolute;
bottom: 25px;
right: 25px;
background: #ff8b6b;
color: white;
padding: 10px 18px;
border-radius: 999px;
font-size: 0.8rem;
letter-spacing: 1px;
}

.hero-content {
position: relative;
z-index: 2;
max-width: 700px;
color: white;
}

.eyebrow {
letter-spacing: 3px;
margin-bottom: 12px;
opacity: 0.8;
}

.hero h1 {
font-family: "Bebas Neue", sans-serif;
font-size: clamp(4rem, 10vw, 7rem);
line-height: 0.9;
letter-spacing: 2px;
}

.tagline {
margin-top: 18px;
font-size: 1.2rem;
}

.forecast {
margin-top: 20px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 14px 30px;
border-radius: 14px;
display: inline-flex;
flex-direction: column;
gap: 5px;
}

.menu-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
padding: 50px 6%;
background: rgba(255,69,0);
}

.section-title {
margin-bottom: 20px;
}

.section-title h2 {
font-family: "Bebas Neue", sans-serif;
font-size: 2.2rem;
letter-spacing: 1px;
color: black;
}

.featured-card {
position: relative;
background: #fffaf1;
border-radius: 24px;
padding: 35px;
margin-bottom: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
overflow: visible;
}

.sticker {
position: absolute;
top: 20px;
right: -35px;
background: #ff8b6b;
color: white;
padding: 8px 40px;
transform: rotate(18deg);
font-size: 0.8rem;
font-weight: bold;
}

.featured-card h3 {
font-family: "Bebas Neue", sans-serif;
font-size: 3rem;
margin-bottom: 12px;
}

.menu-desc {
max-width: 500px;
line-height: 1.7;
margin-bottom: 20px;
}

.menu-desc {
line-height: 1.6;
color: #35566c;
margin-bottom: 12px;
}

.menu-note {
font-size: 0.9rem;
font-style: italic;
opacity: 0.75;
margin-bottom: 20px;
}

.price {
font-size: 1.6rem;
font-weight: bold;
color: #4c89a8;
}

.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 22px;
}

.menu-card {
background: white;
border-radius: 20px;
padding: 24px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
transition: 0.3s ease;
display: flex;
flex-direction: column;
}

.menu-card:hover {
transform: translateY(-6px) rotate(-1deg);
}

.menu-card h3 {
font-family: "Bebas Neue", sans-serif;
font-size: 2rem;
margin-bottom: 10px;
}

.menu-card p {
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}

.menu-card span {
color: #ff8b6b;
font-weight: bold;
margin-top: auto;
}

.sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}

.notice-board,
.drinks-board,
.status-box {
background: white;
border-radius: 22px;
padding: 26px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.notice-board h2,
.drinks-board h2 {
font-family: "Permanent Marker", cursive;
margin-bottom: 18px;
}

.notice-board ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
line-height: 1.5;
}

.drink-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

.drink-item:last-child {
border-bottom: none;
}

.status-box {
text-align: center;
background: #1f3a4d;
color: white;
}

.status-box p {
letter-spacing: 2px;
opacity: 0.7;
margin-bottom: 10px;
}

.status-box h3 {
font-family: "Bebas Neue", sans-serif;
font-size: 3rem;
}

.footer {
text-align: center;
padding: 40px 20px 60px;
line-height: 1.8;
color: #35566c;
}

@media (max-width: 900px) {
.menu-layout {
grid-template-columns: 1fr;
}
}

@media (max-width: 600px) {
.hero h1 {
font-size: 4rem;
}

.hero::after {
left: 50%;
right: auto;
bottom: 25px;
transform: translateX(-50%);
font-size: 0.7rem;
padding: 8px 14px;
}

.featured-card h3 {
font-size: 2.2rem;
}

.menu-card h3 {
font-size: 1.6rem;
}

.menu-layout {
padding: 40px 20px;
}
}

https://codepen.io/lzoahkbn-the-selector/pen/JoEWddX

body {
/* Define a imagem de fundo que ficará por trás de tudo */
background-image: url('sua-imagem.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Isso mantém o fundo fixo */
margin: 0;
}

section {
/* Torna o fundo das seções transparente para ver o body */
background: transparent;
/* Adicione um espaçamento para o conteúdo não ficar colado */
padding: 100px 20px;
}

.logo-imagem {
width: 100%; /* Ocupa 100% da largura do contêiner */
max-width: 300px; /* Limita o tamanho máximo para 400 pixels */
height: auto; /* Mantém a proporção original da imagem */
}

um pouco de duvida

Aula 14 - Busca de Livros
HTML
<input id="pesquisa">

<button onclick="buscar()">
Pesquisar
</button>

<p id="resultado"></p>
JavaScript
function buscar(){

let livro =
document.getElementById("pesquisa").value;

document.getElementById("resultado").innerHTML =
"Você pesquisou: " + livro;

}

Aula 12 - Sistema de Login Visual
HTML
<div class="login">

<h2>Login</h2>

<input type="text"
placeholder="Usuário">

<input type="password"
placeholder="Senha">

<button>Entrar</button>

</div>
CSS

Aula 11 - Calculadora
HTML
<input id="n1">
<input id="n2">

<button onclick="somar()">
Somar
</button>

<p id="resultado"></p>
JavaScript
function somar(){

let n1 =
Number(document.getElementById("n1").value);

let n2 =
Number(document.getElementById("n2").value);

document.getElementById("resultado").innerHTML =
n1 + n2;
}