---
# System prepended metadata

title: Nivelamento Web

---

# Nivelamento Web

## Estilização com CSS/SCSS

1. Altere o código SCSS abaixo para que apenas a primeira ocorrência de um `.card` não tenha margem à esquerda e apenas o último da sequência não tenha margem à esquerda.
```scss
.card-holder {
    
    .card {
        margin: 0 20px;
    }
}
```
2. Altere o código SCSS abaixo de forma que apenas o `.card` que esteja sendo sobreposto pelo cursor do mouse sofra uma expansão vertical, a menos que esse elemento possua a classe `disabled`.
```css
.card-holder {
    display: flex;
    align-items: flex-start;
    height: 100px;
    
    .card {
        margin: 0 20px;
        min-height: 50px;
    }
}
```

3. Utilize CSS para estilizar o seguinte HTML e deixá-lo similar ao da foto de referência. Sinta-se à vontade para customizar o HTML também. 
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minhas tecnologias</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div class="page">
    <div class="container">
      <ul>
        <li> 
          <img 
            src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png"
            alt="React" 
          />
          <div class="description">
            <h1>React</h1>
            <p>A declarative, efficient, and flexible JavaScript library for building user interfaces.<p>
          </div>
        </li>

        <li> 
          <img 
            src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/javascript/javascript.png"
            alt="JavaScript" 
          />
          <div class="description">
            <h1>JavaScript</h1>
            <p>JavaScript (JS) is a lightweight interpreted programming language with first-class functions.<p>
          </div>
        </li>

        <li> 
          <img 
            src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/html/html.png"
            alt="HTML" 
          />
          <div class="description">
            <h1>HTML</h1>
            <p>HTML is the fundamental markup language for webpages.<p>
          </div>
        </li>

        <li> 
          <img 
            src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/css/css.png"
            alt="CSS" 
          />
          <div class="description">
            <h1>CSS</h1>
            <p>Cascading Style Sheets (CSS) is a language used most often to style and improve upon the appearance of views.<p>
          </div>
        </li>

        <li> 
          <img 
            src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/docker/docker.png"
            alt="Docker" 
          />
          <div class="description">
            <h1>Docker</h1>
            <p>Docker is a platform built for developers to build and run applications.<p>
          </div>
        </li>

      </ul>
    </div>
  </div>
</body>
</html>
```
![foto de referência](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8a096d88-92f4-4d36-a36f-a89222a00a9f%2FUntitled.png?table=block&id=0994ed64-1e24-47e2-9567-4006084ce129&width=7430&userId=&cache=v2)

## Angular Framework
1. Reproduza o layout da questão 3 do tópico de estilização utilizando o angular framework, tornando cada linha (`<li>`) do layout anterior em uma "instância" de um componente separado. Fique à vontade para usar uma ferramenta como o [Stack Blitz](https://stackblitz.com/) ou similar e submeter apenas o link com a resolução.
2. Use a API https://randomuser.me/ para criar um aplicativo simples que mostre 5+ usuários em forma de cards, exibindo sua foto, nome (como título do card) e as informações de email, telefone e endereço (estado e cidade) como conteúdos do card. O objetivo desse exercício é testar seus conhecimentos em angular e autonomia com criação de um layout, portanto, customize da forma como preferir tanto a organização do app como o layout, a adição de qualquer feature não especificada também é livre. Obs: o uso de bibliotecas e frameworks como Material para construção do layout é livre.


