Skip to content

Commit de57834

Browse files
garrcastrogarrcastro
committed
Estilização do header e página inicial
1 parent bf29370 commit de57834

File tree

7 files changed

+82
-45
lines changed

7 files changed

+82
-45
lines changed

‎pokedex/public/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<link rel="preconnect" href="https://fonts.googleapis.com">
28+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
29+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@800&family=Montserrat&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
30+
<title>Pokedex do Gabriel Castro - Ozemela</title>
2831
</head>
2932
<body>
3033
<noscript>You need to enable JavaScript to run this app.</noscript>

‎pokedex/src/App.css‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +0,0 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}

‎pokedex/src/App.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,42 @@ import pokemonsListPage from "./Pages/PokemonsListPage/PokemonsListPage";
77
import styled, { createGlobalStyle } from "styled-components";
88
import pokemons from "./pokemon/pokemon.json";
99
import { getColors } from "./utils/ReturnCardColor";
10+
import './index.css'
1011

1112
const GlobalStyle = createGlobalStyle`
1213
*{
1314
padding: 0;
1415
margin: 0;
1516
box-sizing: border-box;
1617
font-family: "Inter", sans-serif;
17-
18+
font-family: "Poppins", sans-serif;
19+
font-family: "Montserrat", sans-serif;
1820
}
1921
`;
2022
const CardsContainer = styled.div`
2123
display: grid;
2224
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
2325
justify-items: center;
26+
background-color: #5E5E5E;
2427
`;
28+
const Title = styled.h1`
29+
font-family: 'Poppins', sans-serif;
30+
font-weight: 700;
31+
font-size: 48px;
32+
color: #FFFFFF;
33+
padding: 1em;
34+
background-color: #5E5E5E;
35+
36+
`
2537

2638
function App() {
2739
return (
2840
<div className="App">
2941
<GlobalStyle/>
3042
{header()}
43+
<Title>Todos Pokémons</Title>
3144
<CardsContainer>
45+
3246
{pokemons.map((pokemon) => {
3347
return <PokemonCard
3448
cardColor={getColors(pokemon.type[0])}

‎pokedex/src/Components/Header/Header.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { HeaderStyle } from "./headerStyle"
1+
import { ButtonPokedex, ButtonVoltar, HeaderStyle } from "./headerStyle"
2+
import logo from '/Users/Dev.Garr/Desktop/Labenu/projeto-react/projeto-react-apis/pokedex/src/assets/logo.png'
23

34
export default function header (){
45
return (
56
<div>
67
<HeaderStyle>
7-
8-
Header
8+
<img src={logo} alt="Logo Pokemon"></img>
9+
<ButtonPokedex>Pokédex</ButtonPokedex>
10+
<ButtonVoltar>Todos Pokémons</ButtonVoltar>
911
</HeaderStyle>
1012
</div>
1113
)

‎pokedex/src/Components/Header/headerStyle.js‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,59 @@
11
import styled from "styled-components";
22

3-
export const HeaderStyle = styled.header`
3+
export const HeaderStyle = styled.section`
4+
display: flex;
5+
justify-content: center;
6+
margin: 1em 0em;
7+
`
8+
export const ButtonPokedex = styled.button`
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
background-color: #33A4F5;
13+
color: #FFFFFF;
14+
padding: 4px 10px;
15+
border-radius: 8px;
16+
width: 287px;
17+
height: 74px;
18+
position: absolute;
19+
left: 1112px;
20+
top: 41px;
21+
font-family: 'Poppins', sans-serif;
22+
font-weight: 700;
23+
font-size: 24px;
24+
`
25+
26+
export const ButtonExcluir = styled.button`
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
background-color: #FF6262;
31+
color: #FFFFFF;
32+
padding: 4px 10px;
33+
border-radius: 8px;
34+
width: 287px;
35+
height: 74px;
36+
position: absolute;
37+
left: 1112px;
38+
top: 41px;
39+
font-family: 'Poppins', sans-serif;
40+
font-weight: 700;
41+
font-size: 24px;
42+
`
43+
44+
export const ButtonVoltar = styled.a`
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
color: #1A1A1A;
49+
padding: 4px 10px;
50+
51+
52+
position: absolute;
53+
left: 100px;
54+
top: 62px;
55+
font-weight: 700;
56+
font-size: 24px;
57+
font-family: 'Poppins', sans-serif;
58+
459
`

‎pokedex/src/assets/logo.png‎

27.5 KB
Loading

‎pokedex/src/index.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
body {
22
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
3+
font-family: -apple-system, BlinkMacSystemFont, 'Poppins', 'Montserrat', 'Inter', 'Segoe UI', 'Roboto', 'Oxygen',
44
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
55
sans-serif;
66
-webkit-font-smoothing: antialiased;
@@ -11,3 +11,4 @@ code {
1111
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
1212
monospace;
1313
}
14+

0 commit comments

Comments
 (0)