Download material de apoio
CÓDIGO REFERENCIAL PARA O EXERCÍCIO
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8″>
<title>Layout Exemplo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #0f1a24;
padding: 20px;
}
.container {
border: 3px solid orange;
padding: 15px;
margin-bottom: 20px;
}
/* HEADER */
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
background: #ccc;
padding: 15px 25px;
font-size: 24px;
color: white;
}
.menu {
background: #ccc;
padding: 15px 25px;
font-size: 18px;
color: white;
}
/* MAIN CONTENT */
.main {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto auto;
gap: 15px;
}
.box {
background: #aaa;
padding: 15px;
}
.image {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
font-size: 50px;
}
.text {
font-size: 18px;
line-height: 1.5;
}
.sidebar {
grid-row: span 2;
}
.bottom {
grid-column: span 2;
font-size: 20px;
}
</style>
</head>
<body>
<!– HEADER –>
<div class=”container header”>
<div class=”logo”>logo</div>
<div class=”menu”>Home | sobre | produtos | contato</div>
</div>
<!– MAIN –>
<div class=”container main”>
<div class=”box image”>🖼️</div>
<div class=”box text”>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quam sit distinctio voluptates ducimus accusamus voluptates
ducimus accusamus
</div>
<div class=”box sidebar”></div>
<div class=”box bottom”>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</div>
</div>
</body>
</html>
