├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── css
│ ├── bootstrap-grid.css
│ ├── font-awesome.min.css
│ └── font.css
├── favicon.ico
├── fonts
│ ├── roboto-v20-latin-300.eot
│ ├── roboto-v20-latin-300.svg
│ ├── roboto-v20-latin-300.ttf
│ ├── roboto-v20-latin-300.woff
│ ├── roboto-v20-latin-300.woff2
│ ├── roboto-v20-latin-500.eot
│ ├── roboto-v20-latin-500.svg
│ ├── roboto-v20-latin-500.ttf
│ ├── roboto-v20-latin-500.woff
│ ├── roboto-v20-latin-500.woff2
│ ├── roboto-v20-latin-700.eot
│ ├── roboto-v20-latin-700.svg
│ ├── roboto-v20-latin-700.ttf
│ ├── roboto-v20-latin-700.woff
│ ├── roboto-v20-latin-700.woff2
│ ├── roboto-v20-latin-900.eot
│ ├── roboto-v20-latin-900.svg
│ ├── roboto-v20-latin-900.ttf
│ ├── roboto-v20-latin-900.woff
│ ├── roboto-v20-latin-900.woff2
│ ├── roboto-v20-latin-regular.eot
│ ├── roboto-v20-latin-regular.svg
│ ├── roboto-v20-latin-regular.ttf
│ ├── roboto-v20-latin-regular.woff
│ ├── roboto-v20-latin-regular.woff2
│ ├── satisfy-v10-latin-regular.eot
│ ├── satisfy-v10-latin-regular.svg
│ ├── satisfy-v10-latin-regular.ttf
│ ├── satisfy-v10-latin-regular.woff
│ ├── satisfy-v10-latin-regular.woff2
│ ├── varela-round-v12-latin-regular.eot
│ ├── varela-round-v12-latin-regular.svg
│ ├── varela-round-v12-latin-regular.ttf
│ ├── varela-round-v12-latin-regular.woff
│ └── varela-round-v12-latin-regular.woff2
├── images
│ ├── 1.png
│ ├── 2.png
│ ├── 3.png
│ └── headphone.png
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.css
├── App.css.map
├── App.js
├── App.scss
├── App.test.js
├── components
├── footer.js
├── header.js
└── mainContent.js
├── data
└── product_data.js
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `npm test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 |
20 | ### `npm run build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed!
27 |
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 |
30 | ### `npm run eject`
31 |
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 |
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 |
36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 |
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 |
40 | ## Learn More
41 |
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 |
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |
46 | ### Code Splitting
47 |
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 |
50 | ### Analyzing the Bundle Size
51 |
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 |
54 | ### Making a Progressive Web App
55 |
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 |
58 | ### Advanced Configuration
59 |
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 |
62 | ### Deployment
63 |
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 |
66 | ### `npm run build` fails to minify
67 |
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "profile_card",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.5.0",
8 | "@testing-library/user-event": "^7.2.1",
9 | "react": "^16.13.1",
10 | "react-dom": "^16.13.1",
11 | "react-scripts": "3.4.3"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test",
17 | "eject": "react-scripts eject"
18 | },
19 | "eslintConfig": {
20 | "extends": "react-app"
21 | },
22 | "browserslist": {
23 | "production": [
24 | ">0.2%",
25 | "not dead",
26 | "not op_mini all"
27 | ],
28 | "development": [
29 | "last 1 chrome version",
30 | "last 1 firefox version",
31 | "last 1 safari version"
32 | ]
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/public/css/font-awesome.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
5 |
--------------------------------------------------------------------------------
/public/css/font.css:
--------------------------------------------------------------------------------
1 | /* roboto-300 - latin */
2 | @font-face {
3 | font-family: 'Roboto';
4 | font-style: normal;
5 | font-weight: 300;
6 | src: url('../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
7 | src: local('Roboto Light'), local('Roboto-Light'),
8 | url('../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
9 | url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
10 | url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
11 | url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
12 | url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
13 | }
14 | /* roboto-regular - latin */
15 | @font-face {
16 | font-family: 'Roboto';
17 | font-style: normal;
18 | font-weight: 400;
19 | src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
20 | src: local('Roboto'), local('Roboto-Regular'),
21 | url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
22 | url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
23 | url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
24 | url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
25 | url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
26 | }
27 | /* roboto-500 - latin */
28 | @font-face {
29 | font-family: 'Roboto';
30 | font-style: normal;
31 | font-weight: 500;
32 | src: url('../fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
33 | src: local('Roboto Medium'), local('Roboto-Medium'),
34 | url('../fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
35 | url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
36 | url('../fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
37 | url('../fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
38 | url('../fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
39 | }
40 | /* roboto-700 - latin */
41 | @font-face {
42 | font-family: 'Roboto';
43 | font-style: normal;
44 | font-weight: 700;
45 | src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
46 | src: local('Roboto Bold'), local('Roboto-Bold'),
47 | url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
48 | url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
49 | url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
50 | url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
51 | url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
52 | }
53 | /* roboto-900 - latin */
54 | @font-face {
55 | font-family: 'Roboto';
56 | font-style: normal;
57 | font-weight: 900;
58 | src: url('../fonts/roboto-v20-latin-900.eot'); /* IE9 Compat Modes */
59 | src: local('Roboto Black'), local('Roboto-Black'),
60 | url('../fonts/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
61 | url('../fonts/roboto-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
62 | url('../fonts/roboto-v20-latin-900.woff') format('woff'), /* Modern Browsers */
63 | url('../fonts/roboto-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
64 | url('../fonts/roboto-v20-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
65 | }
66 |
67 | /*for cursive*/
68 | /* satisfy-regular - latin */
69 | @font-face {
70 | font-family: 'Satisfy';
71 | font-style: normal;
72 | font-weight: 400;
73 | src: url('../fonts/satisfy-v10-latin-regular.eot'); /* IE9 Compat Modes */
74 | src: local('Satisfy Regular'), local('Satisfy-Regular'),
75 | url('../fonts/satisfy-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
76 | url('../fonts/satisfy-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
77 | url('../fonts/satisfy-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
78 | url('../fonts/satisfy-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
79 | url('../fonts/satisfy-v10-latin-regular.svg#Satisfy') format('svg'); /* Legacy iOS */
80 | }
81 |
82 | /* varela-round-regular - latin */
83 | @font-face {
84 | font-family: 'Varela Round';
85 | font-style: normal;
86 | font-weight: 400;
87 | src: url('../fonts/varela-round-v12-latin-regular.eot'); /* IE9 Compat Modes */
88 | src: local('Varela Round Regular'), local('VarelaRound-Regular'),
89 | url('../fonts/varela-round-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
90 | url('../fonts/varela-round-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
91 | url('../fonts/varela-round-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
92 | url('../fonts/varela-round-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
93 | url('../fonts/varela-round-v12-latin-regular.svg#VarelaRound') format('svg'); /* Legacy iOS */
94 | }
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/favicon.ico
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-300.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-300.eot
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-300.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-300.ttf
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-300.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-300.woff
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-300.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-300.woff2
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-500.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-500.eot
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-500.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
306 |
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-500.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-500.ttf
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-500.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-500.woff
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-500.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-500.woff2
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-700.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-700.eot
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-700.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-700.ttf
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-700.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-700.woff
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-700.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-700.woff2
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-900.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-900.eot
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-900.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
303 |
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-900.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-900.ttf
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-900.woff
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-900.woff2
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-regular.eot
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-regular.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
309 |
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-regular.ttf
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-regular.woff
--------------------------------------------------------------------------------
/public/fonts/roboto-v20-latin-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/roboto-v20-latin-regular.woff2
--------------------------------------------------------------------------------
/public/fonts/satisfy-v10-latin-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/satisfy-v10-latin-regular.eot
--------------------------------------------------------------------------------
/public/fonts/satisfy-v10-latin-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/satisfy-v10-latin-regular.ttf
--------------------------------------------------------------------------------
/public/fonts/satisfy-v10-latin-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/satisfy-v10-latin-regular.woff
--------------------------------------------------------------------------------
/public/fonts/satisfy-v10-latin-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/satisfy-v10-latin-regular.woff2
--------------------------------------------------------------------------------
/public/fonts/varela-round-v12-latin-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/varela-round-v12-latin-regular.eot
--------------------------------------------------------------------------------
/public/fonts/varela-round-v12-latin-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/varela-round-v12-latin-regular.ttf
--------------------------------------------------------------------------------
/public/fonts/varela-round-v12-latin-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/varela-round-v12-latin-regular.woff
--------------------------------------------------------------------------------
/public/fonts/varela-round-v12-latin-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/fonts/varela-round-v12-latin-regular.woff2
--------------------------------------------------------------------------------
/public/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/images/1.png
--------------------------------------------------------------------------------
/public/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/images/2.png
--------------------------------------------------------------------------------
/public/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/images/3.png
--------------------------------------------------------------------------------
/public/images/headphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/images/headphone.png
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
28 | React Product Listing page
29 |
30 |
31 |
32 |
33 |
34 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devamitjha/react_product_listing_page/78a89bb1338483fa908d381ffa784063298dd66f/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | -webkit-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | width: 100%;
10 | height: 100%;
11 | position: relative;
12 | font-family: "Varela Round";
13 | }
14 |
15 | .dFlex, nav, nav ul, .main_content, .main_content .card, .main_content .card .card_header, .btn, .footer, .footer .social, .footer .social .fa {
16 | display: -webkit-box;
17 | display: -ms-flexbox;
18 | display: flex;
19 | -webkit-box-pack: center;
20 | -ms-flex-pack: center;
21 | justify-content: center;
22 | -webkit-box-align: center;
23 | -ms-flex-align: center;
24 | align-items: center;
25 | }
26 |
27 | .container {
28 | display: -webkit-box;
29 | display: -ms-flexbox;
30 | display: flex;
31 | -webkit-box-orient: vertical;
32 | -webkit-box-direction: normal;
33 | -ms-flex-direction: column;
34 | flex-direction: column;
35 | width: 100%;
36 | height: 100%;
37 | padding: 30px 50px 20px 50px;
38 | -webkit-box-sizing: border-box;
39 | box-sizing: border-box;
40 | background-color: #272b34;
41 | }
42 |
43 | nav {
44 | -webkit-box-pack: justify;
45 | -ms-flex-pack: justify;
46 | justify-content: space-between;
47 | width: 100%;
48 | color: #fff;
49 | }
50 |
51 | nav .logo {
52 | font-size: 30px;
53 | text-transform: uppercase;
54 | color: rgba(255, 255, 255, 0.7);
55 | }
56 |
57 | nav ul {
58 | margin: 0;
59 | padding: 0;
60 | list-style-type: none;
61 | }
62 |
63 | nav ul li {
64 | font-size: 14px;
65 | margin-left: 15px;
66 | padding: 10px;
67 | -webkit-box-sizing: border-box;
68 | box-sizing: border-box;
69 | color: rgba(255, 255, 255, 0.7);
70 | cursor: pointer;
71 | }
72 |
73 | nav .search {
74 | color: rgba(255, 255, 255, 0.7);
75 | }
76 |
77 | nav .search .fa {
78 | cursor: pointer;
79 | }
80 |
81 | nav .search .fa + .fa {
82 | margin-left: 15px;
83 | }
84 |
85 | .main_content {
86 | position: relative;
87 | width: 70%;
88 | height: 100%;
89 | margin: 50px auto;
90 | padding: 50px 0 0;
91 | -webkit-box-sizing: border-box;
92 | box-sizing: border-box;
93 | -webkit-box-pack: justify;
94 | -ms-flex-pack: justify;
95 | justify-content: space-between;
96 | -ms-flex-wrap: wrap;
97 | flex-wrap: wrap;
98 | }
99 |
100 | .main_content h3 {
101 | position: absolute;
102 | left: 0;
103 | top: 0;
104 | color: #2d343e;
105 | font-size: 10.5vw;
106 | }
107 |
108 | .main_content .card {
109 | width: 30%;
110 | border-radius: 15px;
111 | -webkit-box-orient: vertical;
112 | -webkit-box-direction: normal;
113 | -ms-flex-direction: column;
114 | flex-direction: column;
115 | position: relative;
116 | -webkit-transform: scale(0.8);
117 | transform: scale(0.8);
118 | -webkit-transition: all .3s ease-in-out;
119 | transition: all .3s ease-in-out;
120 | margin-bottom: 50px;
121 | }
122 |
123 | .main_content .card .card_img {
124 | margin-top: -5vw;
125 | }
126 |
127 | .main_content .card .card_img img {
128 | width: 200px;
129 | }
130 |
131 | .main_content .card .card_header {
132 | -webkit-box-orient: vertical;
133 | -webkit-box-direction: normal;
134 | -ms-flex-direction: column;
135 | flex-direction: column;
136 | color: #fff;
137 | margin: 25px 0;
138 | }
139 |
140 | .main_content .card .card_header h2 {
141 | font-size: 18px;
142 | }
143 |
144 | .main_content .card .card_header p {
145 | font-size: 14px;
146 | text-align: center;
147 | color: rgba(255, 255, 255, 0.3);
148 | margin: 8px 0;
149 | }
150 |
151 | .main_content .card .card_header .price {
152 | font-size: 25px;
153 | color: #fe8033;
154 | }
155 |
156 | .main_content .card .card_header .price span {
157 | font-size: 15px;
158 | display: inline-block;
159 | vertical-align: top;
160 | }
161 |
162 | .main_content .card:hover {
163 | background-color: #2b3039;
164 | -webkit-transform: scale(1.1);
165 | transform: scale(1.1);
166 | cursor: pointer;
167 | }
168 |
169 | .main_content .card:hover .btn {
170 | background-color: #fe8033;
171 | color: #fff;
172 | }
173 |
174 | .btn {
175 | width: 130px;
176 | height: 35px;
177 | font-size: 14px;
178 | border-radius: 35px;
179 | background-color: #2d343e;
180 | color: rgba(255, 255, 255, 0.5);
181 | cursor: pointer;
182 | position: relative;
183 | -webkit-transition: background-color .3s ease;
184 | transition: background-color .3s ease;
185 | overflow: hidden;
186 | }
187 |
188 | .footer {
189 | width: 100%;
190 | -webkit-box-pack: justify;
191 | -ms-flex-pack: justify;
192 | justify-content: space-between;
193 | margin-top: auto;
194 | color: rgba(255, 255, 255, 0.3);
195 | font-size: 12px;
196 | }
197 |
198 | .footer .social .fa {
199 | width: 50px;
200 | height: 50px;
201 | border-radius: 50px;
202 | border: 1px solid rgba(255, 255, 255, 0.3);
203 | font-size: 14px;
204 | color: rgba(255, 255, 255, 0.3);
205 | cursor: pointer;
206 | }
207 |
208 | .footer .social .fa + .fa {
209 | margin-left: 15px;
210 | }
211 | /*# sourceMappingURL=App.css.map */
--------------------------------------------------------------------------------
/src/App.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "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",
4 | "sources": [
5 | "App.scss"
6 | ],
7 | "names": [],
8 | "file": "App.css"
9 | }
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './App.css';
3 | import Header from "./components/header";
4 | import MainContent from "./components/mainContent";
5 | import Footer from "./components/footer";
6 |
7 | function App() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 | );
15 | }
16 |
17 | export default App;
18 |
19 |
--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | $roboto:'Roboto';
7 | $cursive_font:'Satisfy';
8 | $round:'Varela Round';
9 | $cta:#fe8033;
10 | $bg:#272b34;
11 | $light_bg:#2b3039;
12 | $text:#2d343e;
13 | $white:#fff;
14 |
15 | body{
16 | width:100%;
17 | height:100%;
18 | position:relative;
19 | font-family: $round;
20 | }
21 | .dFlex{
22 | display:flex;
23 | justify-content: center;
24 | align-items: center;
25 | }
26 |
27 | .container{
28 | display:flex;
29 | flex-direction: column;
30 | width:100%;
31 | height:100%;
32 | padding:30px 50px 20px 50px;
33 | box-sizing:border-box;
34 | background-color:$bg;
35 | }
36 |
37 | nav{
38 | @extend .dFlex;
39 | justify-content: space-between;
40 | width:100%;
41 | color:$white;
42 | .logo{
43 | font-size:30px;
44 | text-transform: uppercase;
45 | color:rgba($white, .7);
46 | }
47 | ul{
48 | @extend .dFlex;
49 | margin:0;
50 | padding:0;
51 | list-style-type: none;
52 | li{
53 | font-size:14px;
54 | margin-left:15px;
55 | padding:10px;
56 | box-sizing: border-box;
57 | color:rgba($white, .7);
58 | cursor:pointer;
59 | }
60 | }
61 | .search{
62 | color:rgba($white, .7);
63 | .fa{
64 | cursor: pointer;
65 | +.fa{
66 | margin-left:15px;
67 | }
68 | }
69 | }
70 | }
71 |
72 | .main_content{
73 | @extend .dFlex;
74 | position:relative;
75 | width:70%;
76 | height:100%;
77 | margin:50px auto;
78 | padding:50px 0 0;
79 | box-sizing: border-box;
80 | justify-content: space-between;
81 | flex-wrap: wrap;
82 | h3{
83 | position:absolute;
84 | left:0;
85 | top:0;
86 | color:$text;
87 | font-size:10.5vw;
88 | }
89 | .card{
90 | width:30%;
91 | border-radius: 15px;
92 | @extend .dFlex;
93 | flex-direction: column;
94 | position:relative;
95 | transform:scale(.8);
96 | transition:all .3s ease-in-out;
97 | margin-bottom:50px;
98 | .card_img{
99 | margin-top:-5vw;
100 | img{
101 | width:200px;
102 | }
103 | }
104 | .card_header{
105 | @extend .dFlex;
106 | flex-direction: column;
107 | color:$white;
108 | margin:25px 0;
109 | h2{
110 | font-size:18px;
111 | }
112 | p{
113 | font-size:14px;
114 | text-align: center;
115 | color:rgba($white, .3);
116 | margin:8px 0;
117 | }
118 | .price{
119 | font-size:25px;
120 | color:$cta;
121 | span{
122 | font-size:15px;
123 | display:inline-block;
124 | vertical-align: top;
125 | }
126 | }
127 | }
128 | }
129 | .card:hover{
130 | background-color:$light_bg;
131 | transform: scale(1.1);
132 | cursor:pointer;
133 | }
134 | .card:hover{
135 | .btn{
136 | background-color:$cta;
137 | color:$white;
138 | }
139 | }
140 |
141 | }
142 | .btn{
143 | width:130px;
144 | height:35px;
145 | font-size:14px;
146 | border-radius: 35px;
147 | background-color:$text;
148 | color:rgba($white, .5);
149 | @extend .dFlex;
150 | cursor:pointer;
151 | position:relative;
152 | transition:background-color .3s ease;
153 | overflow:hidden;
154 | }
155 |
156 | .footer{
157 | @extend .dFlex;
158 | width:100%;
159 | justify-content: space-between;
160 | margin-top:auto;
161 | color:rgba($white, .3);
162 | font-size:12px;
163 | .social{
164 | @extend .dFlex;
165 | .fa{
166 | width:50px;
167 | height:50px;
168 | border-radius: 50px;
169 | border:1px solid rgba($white, .3);
170 | @extend .dFlex;
171 | font-size:14px;
172 | color:rgba($white, .3);
173 | cursor:pointer;
174 | +.fa{
175 | margin-left:15px;
176 | }
177 | }
178 | }
179 | }
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/src/components/footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function Footer() {
4 | return (
5 |
6 |
copyright @2020
7 |
8 |
9 |
10 |
11 |
8 |
9 |
10 |
11 |
12 |
{item.product_name}
13 |
{item.description}
14 |
{item.price}{item.currency}
15 |
Add to cart
16 |
17 |
22 |
Headphones
23 | {listItems}
24 |
25 | )
26 | }
27 | export default MainContent;
28 |
--------------------------------------------------------------------------------
/src/data/product_data.js:
--------------------------------------------------------------------------------
1 | const product_card = [
2 | {
3 | id: 1,
4 | product_name: "Rayes Alpha",
5 | description: "Hands-free, Hads-on Mushc Experience",
6 | price: 350,
7 | currency: "$",
8 | thumb: "./images/1.png"
9 | },
10 | {
11 | id: 2,
12 | product_name: "Rayes Z30",
13 | description: "Hands-free, Hads-on Mushc Experience",
14 | price: 250,
15 | currency: "$",
16 | thumb: "./images/2.png"
17 | },
18 | {
19 | id: 3,
20 | product_name: "Rayes X30",
21 | description: "Hands-free, Hads-on Mushc Experience",
22 | price: 350,
23 | currency: "$",
24 | thumb: "./images/3.png"
25 | },
26 | {
27 | id: 4,
28 | product_name: "Rayes Alpha",
29 | description: "Hands-free, Hads-on Mushc Experience",
30 | price: 350,
31 | currency: "$",
32 | thumb: "./images/1.png"
33 | },
34 | {
35 | id: 5,
36 | product_name: "Rayes Z30",
37 | description: "Hands-free, Hads-on Mushc Experience",
38 | price: 250,
39 | currency: "$",
40 | thumb: "./images/2.png"
41 | },
42 | {
43 | id: 6,
44 | product_name: "Rayes X30",
45 | description: "Hands-free, Hads-on Mushc Experience",
46 | price: 350,
47 | currency: "$",
48 | thumb: "./images/3.png"
49 | },
50 | {
51 | id: 7,
52 | product_name: "Rayes Alpha",
53 | description: "Hands-free, Hads-on Mushc Experience",
54 | price: 350,
55 | currency: "$",
56 | thumb: "./images/1.png"
57 | },
58 | {
59 | id: 8,
60 | product_name: "Rayes Z30",
61 | description: "Hands-free, Hads-on Mushc Experience",
62 | price: 250,
63 | currency: "$",
64 | thumb: "./images/2.png"
65 | },
66 | {
67 | id: 9,
68 | product_name: "Rayes X30",
69 | description: "Hands-free, Hads-on Mushc Experience",
70 | price: 350,
71 | currency: "$",
72 | thumb: "./images/3.png"
73 | }
74 | ]
75 | export default product_card;
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import * as serviceWorker from './serviceWorker';
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById('root')
11 | );
12 |
13 | // If you want your app to work offline and load faster, you can change
14 | // unregister() to register() below. Note this comes with some pitfalls.
15 | // Learn more about service workers: https://bit.ly/CRA-PWA
16 | serviceWorker.unregister();
17 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { 'Service-Worker': 'script' },
105 | })
106 | .then(response => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get('content-type');
109 | if (
110 | response.status === 404 ||
111 | (contentType != null && contentType.indexOf('javascript') === -1)
112 | ) {
113 | // No service worker found. Probably a different app. Reload the page.
114 | navigator.serviceWorker.ready.then(registration => {
115 | registration.unregister().then(() => {
116 | window.location.reload();
117 | });
118 | });
119 | } else {
120 | // Service worker found. Proceed as normal.
121 | registerValidSW(swUrl, config);
122 | }
123 | })
124 | .catch(() => {
125 | console.log(
126 | 'No internet connection found. App is running in offline mode.'
127 | );
128 | });
129 | }
130 |
131 | export function unregister() {
132 | if ('serviceWorker' in navigator) {
133 | navigator.serviceWorker.ready
134 | .then(registration => {
135 | registration.unregister();
136 | })
137 | .catch(error => {
138 | console.error(error.message);
139 | });
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------