├── index.html
├── style.css
└── app.jsx
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Document
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | margin: 0;
3 | background-color: #222831;
4 | color: #EEEEEE;
5 | overflow: hidden;
6 | }
7 |
8 | .bandas {
9 | height: 100vh;
10 | width: 100%;
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | flex-wrap: wrap;
15 | }
16 |
17 | .cartao {
18 | display: flex;
19 | border: 1px solid #76ABAE;
20 | justify-content: center;
21 | flex-direction: column;
22 | text-align: center;
23 | font-size: 1.1rem;
24 | width: 10rem;
25 | height: 5rem;
26 | margin: 1rem;
27 | }
28 |
29 | .cartao:hover h2 {
30 | transform: scale(1.2);
31 | }
32 |
33 | .cartao:hover {
34 | color: #222831;
35 | background-color: #76ABAE;
36 | }
37 |
--------------------------------------------------------------------------------
/app.jsx:
--------------------------------------------------------------------------------
1 | // Banda nome = "U2"
2 | // https://legacy.reactjs.org/docs/cdn-links.html?
3 | //
4 |
5 | function Banda(props) {
6 | return (
7 |
8 |
{props.nome}
9 |
10 | )
11 | }
12 |
13 | let bandas = (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | )
29 |
30 |
31 | let root = ReactDOM.createRoot(document.getElementById('app'))
32 | root.render(bandas)
33 |
--------------------------------------------------------------------------------