Skip to content

Commit 55deeee

Browse files
ruanrfruanrf
committed
second day of development
1 parent cc56c5d commit 55deeee

File tree

20 files changed

+356
-107
lines changed

20 files changed

+356
-107
lines changed

‎package-lock.json

Lines changed: 133 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
"@testing-library/user-event": "^7.2.1",
99
"react": "^16.13.1",
1010
"react-dom": "^16.13.1",
11+
"react-router-dom": "^5.2.0",
1112
"react-scripts": "3.4.1",
13+
"react-slick": "^0.27.1",
1214
"styled-components": "^5.1.1"
1315
},
1416
"scripts": {

‎public/index.html

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,19 @@
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
8+
129
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
1910

20-
<!--
21-
Notice the use of %PUBLIC_URL% in the tags above.
22-
It will be replaced with the URL of the `public` folder during the build.
23-
Only files inside the `public` folder can be referenced from the HTML.
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12+
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
2415

25-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
26-
work correctly both with client-side routing and a non-root public URL.
27-
Learn how to configure a non-root public URL by running `npm run build`.
28-
-->
2916
<title> Primecode</title>
3017
</head>
3118
<body>
32-
<noscript>You need to enable JavaScript to run this app.</noscript>
33-
<div id="root"></div>
34-
<!--
35-
This HTML file is a template.
36-
If you open it directly in the browser, you will see an empty page.
3719

38-
You can add webfonts, meta tags, or analytics to this file.
39-
The build step will place the bundled scripts into the <body> tag.
40-
41-
To begin the development, run `npm start` or `yarn start`.
42-
To create a production bundle, use `npm run build` or `yarn build`.
43-
-->
20+
<div id="root"></div>
21+
4422
</body>
4523
</html>

‎src/assets/img/erro404.png

366 KB
Loading

‎src/assets/img/vaporbg.jpg

478 KB
Loading

‎src/components/Button/index.js

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,29 @@ const Button = styled.button`
1313
border-radius: 1px;
1414
text-decoration: none;
1515
display: inline-block;
16-
transition: opacity .2s;
16+
transition: opacity .05s;
1717
1818
&:hover,
1919
&:focus {
20-
opacity: .5;
20+
opacity: .8;
2121
}
22-
`;
23-
24-
export default Button
2522
23+
@media (max-width: 800px) {
24+
position: fixed;
25+
left: 0;
26+
right: 0;
27+
bottom: 0;
28+
background: var(--black);
29+
border-radius: 0;
30+
border: 0;
31+
text-align: center;
32+
font-size: 14px;
33+
&:hover,
34+
&:focus {
35+
opacity: .95;
36+
}
37+
/* height: 25px; */
38+
}
39+
`;
2640

41+
export default Button

‎src/components/Carousel/components/Slider/index.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* eslint-disable react/jsx-props-no-spreading */
2+
import React from 'react';
3+
import SlickSlider from 'react-slick';
4+
import styled from 'styled-components';
5+
6+
const Container = styled.ul`
7+
padding: 0;
8+
margin: 0;
9+
.slick-prev,
10+
.slick-next {
11+
z-index: 50;
12+
top: 0;
13+
bottom: 0;
14+
margin: auto;
15+
width: 30px;
16+
height: 30px;
17+
transform: initial;
18+
&:before {
19+
font-size: 30px;
20+
}
21+
}
22+
23+
.slick-prev {
24+
left: 0;
25+
}
26+
.slick-next {
27+
right: 16px;
28+
}
29+
`;
30+
31+
export const SliderItem = styled.li`
32+
margin-right: 16px;
33+
img {
34+
margin: 16px;
35+
width: 298px;
36+
height: 197px;
37+
object-fit: cover;
38+
}
39+
`;
40+
41+
42+
const Slider = ({ children }) => (
43+
<Container>
44+
<SlickSlider {...{
45+
dots: false,
46+
infinite: false,
47+
speed: 300,
48+
centerMode: false,
49+
variableWidth: true,
50+
adaptiveHeight: true,
51+
}}
52+
>
53+
{children}
54+
</SlickSlider>
55+
</Container>
56+
);
57+
58+
export default Slider;

0 commit comments

Comments
 (0)