# Exercício de Frontend - 14/07
O exercício de frontend resolvido.
Segue o código do HTML
```
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
<title>Exercicio 01</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-title">
<h2>Apenas um card</h2>
</div>
<div class="card-content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, eos est id non, expedita natus facere eveniet pariatur maxime rerum iste culpa reprehenderit obcaecati aut omnis assumenda! Maiores, dignissimos impedit.</p>
</div>
<div class="card-footer">
<span>Comentários // Curtidas</span>
</div>
</div>
<div class="card">
<div class="card-title">
<h2>Apenas um card</h2>
</div>
<div class="card-content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, eos est id non, expedita natus facere eveniet pariatur maxime rerum iste culpa reprehenderit obcaecati aut omnis assumenda! Maiores, dignissimos impedit.</p>
</div>
<div class="card-footer">
<span>Comentários // Curtidas</span>
</div>
</div>
<div class="card">
<div class="card-title">
<h2>Apenas um card</h2>
</div>
<div class="card-content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, eos est id non, expedita natus facere eveniet pariatur maxime rerum iste culpa reprehenderit obcaecati aut omnis assumenda! Maiores, dignissimos impedit.</p>
</div>
<div class="card-footer">
<span>Comentários // Curtidas</span>
</div>
</div>
<div class="card">
<div class="card-title">
<h2>Apenas um card</h2>
</div>
<div class="card-content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, eos est id non, expedita natus facere eveniet pariatur maxime rerum iste culpa reprehenderit obcaecati aut omnis assumenda! Maiores, dignissimos impedit.</p>
</div>
<div class="card-footer">
<span>Comentários // Curtidas</span>
</div>
</div>
<div class="card">
<div class="card-title">
<h2>Apenas um card</h2>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quisquam maxime sit atque modi sint tenetur, illo corporis debitis hic soluta error animi! Reiciendis sit labore nulla autem aut maxime. </p>
</div>
<div class="card-footer">
<span>Comentários // Curtidas</span>
</div>
</div>
<div class="card">
<div class="card-title">
<h2>Apenas um card</h2>
</div>
<div class="card-content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, eos est id non, expedita natus facere eveniet pariatur maxime rerum iste culpa reprehenderit obcaecati aut omnis assumenda! Maiores, dignissimos impedit.</p>
</div>
<div class="card-footer">
<span>Comentários // Curtidas</span>
</div>
</div>
</div>
</body>
</html>
```
Utilzei [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) para deixar os cards responsivos e a [propriedade vw](https://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/) para o pegar o tamanho da tela. Segue abaixo o código CSS.
```
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,500;0,600;1,500&display=swap');
* {
box-sizing: border-box;
margin: 0px;
padding: 0xp;
font-family: 'Epilogue', sans-serif;
}
body {
background-color: #30323D;
margin-top: 100px;
}
.container {
width: 90vw;
margin: 0 auto;
display: flex;
flex-flow:row wrap;
}
.card {
margin: 10px;
height: 100%;
background-color: #FBFCFF;
color: #30323D;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
flex: 1 1 420px;
}
.card-title {
text-align: center;
font-size:0.9em;
border-bottom: 1px solid #D0CCD0;
margin: 5px 10px;
padding: 8px;
}
.card-content {
padding: 8px;
}
.card-footer {
text-align: center;
background-color: #E8C547;
padding: 8px;
}
```
Um print da tela.
Sign in with Wallet
Connect another wallet