# 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) ## ReactJS 1. Reproduza o layout da questão 3 do tópico de estilização utilizando o ReactJS, 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 ReactJS 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.