---
# System prepended metadata

title: Exercício de Frontend - 14/07

---

# 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.

![](https://i.imgur.com/091XqZH.png)
