├── .gitignore
├── Card-shop
    ├── img
    │   ├── adidas.svg
    │   ├── airmax.png
    │   ├── nike.svg
    │   ├── puma.svg
    │   ├── sakura.png
    │   └── yeezy.png
    ├── index.html
    └── style.css
├── Disney-ui
    ├── img
    │   ├── insideoutlogo.png
    │   ├── logo.png
    │   └── sadness.png
    ├── index.html
    └── style.css
├── Employer Dashboard
    ├── index.html
    └── style.css
├── Login-form
    ├── background.jpg
    ├── index.html
    └── style.css
├── Mario Linkedin
    ├── font
    │   └── PoetsenOne-Regular.ttf
    ├── img
    │   ├── Yoshi.png
    │   ├── banner.jpg
    │   ├── browser.png
    │   ├── donkeykong.png
    │   ├── kamek.png
    │   ├── linkedin.svg
    │   ├── luigi.png
    │   ├── mario.jpg
    │   ├── mariohandsup.png
    │   ├── mariostar.png
    │   ├── peach.png
    │   ├── toad.jpg
    │   ├── wario.jpg
    │   └── zelda.png
    ├── index.html
    └── style.css
├── PlayGame Store
    ├── css
    │   ├── style.css
    │   └── style.css.map
    ├── icons
    │   ├── crown.svg
    │   ├── filter.svg
    │   ├── loupe.svg
    │   ├── menu.svg
    │   ├── on-off-button.svg
    │   ├── right-arrow.svg
    │   ├── settings.svg
    │   ├── shopping-bag.svg
    │   ├── trophy.svg
    │   ├── user.svg
    │   └── windows-logo.svg
    ├── images
    │   ├── Cyberpunk-2077.jpg
    │   ├── GodHood-cover.jpg
    │   ├── civilization_vi.jpg
    │   ├── dead_by_deathlight.jpg
    │   ├── deathgarden.jpg
    │   ├── hollow_night.jpg
    │   ├── logo.png
    │   ├── pagan_online.jpg
    │   ├── playstation-logotype.svg
    │   └── yoshi.jpg
    ├── index.html
    └── sass
    │   └── style.scss
├── Pricing-cards
    ├── index.html
    └── style.css
├── README.md
├── Search-engine
    ├── business.svg
    ├── index.html
    ├── legal.svg
    ├── search.svg
    ├── style.css
    └── team.svg
├── Shoe-View
    ├── img
    │   ├── puma-logo.svg
    │   ├── shoe top.png
    │   ├── shoe.png
    │   ├── shoeback.webp
    │   └── shoeback3.png
    ├── index.html
    └── style.css
├── Shoes-shop
    ├── img
    │   ├── black_shoe.jpeg
    │   ├── nike.svg
    │   ├── red_shoe.png
    │   ├── seta-esquerda.svg
    │   └── white_shoe.png
    ├── index.html
    └── style.css
├── Sonic
    ├── img
    │   ├── paramount.png
    │   ├── ring.png
    │   ├── ringbg.png
    │   ├── sonic1.png
    │   ├── sonic2.png
    │   ├── sonic3.png
    │   └── sonic4.png
    ├── index.html
    ├── js.js
    └── style.css
├── Upload-form
    ├── index.html
    ├── style.css
    └── upload.svg
├── User-type
    ├── index.html
    └── style.css
├── package-lock.json
├── readmeImages
    ├── disney.jpg
    ├── form.jpg
    ├── mario.png
    ├── playgames_store.png
    ├── shoesCard.jpg
    ├── usertype.jpg
    └── vpnFinder.png
├── team-members
    ├── .gitignore
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    ├── src
    │   ├── App.js
    │   ├── components
    │   │   ├── Card
    │   │   │   ├── index.js
    │   │   │   └── style.js
    │   │   ├── ConteudoPrincipal
    │   │   │   ├── index.js
    │   │   │   └── style.js
    │   │   ├── HeaderP
    │   │   │   ├── index.js
    │   │   │   └── style.js
    │   │   └── MenuLateral
    │   │   │   ├── index.js
    │   │   │   └── style.js
    │   ├── index.css
    │   ├── index.js
    │   └── style.js
    └── yarn.lock
└── vpn-finder
    ├── .gitignore
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
        ├── favicon.ico
        ├── index.html
        ├── logo192.png
        ├── logo512.png
        ├── manifest.json
        └── robots.txt
    └── src
        ├── App.js
        ├── App.scss
        ├── assets
            └── img
            │   ├── cloud.png
            │   ├── hidemeVPN.jpg
            │   ├── hidemeVPN.png
            │   ├── nordVPN.png
            │   ├── pureVPN.png
            │   ├── readmeImg.png
            │   └── zenmateVPN.png
        ├── components
            ├── button
            │   ├── button.scss
            │   └── index.jsx
            ├── card
            │   ├── card.scss
            │   └── index.jsx
            ├── header
            │   ├── header.scss
            │   └── index.jsx
            ├── input
            │   ├── index.jsx
            │   └── input.scss
            └── menu
            │   ├── index.jsx
            │   └── menu.scss
        ├── index.js
        └── index.scss


/.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 | 


--------------------------------------------------------------------------------
/Card-shop/img/adidas.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg fill="#fff" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
 5 | <g id="XMLID_1_">
 6 | 	<path id="XMLID_11_" d="M405.1,237.9c-2.2,4.4-6.1,10.5-9.7,14.1H106c-2.1-2.9-7.1-9.4-9.3-14.1H405.1 M383.5,266.7
 7 | 		c-3.6,5-9,9.8-14.8,13H131.7c-4.7-3.2-9.4-8-13.8-13H383.5 M350.7,293.4c-25.6,19.1-53.7,28.8-75,30.2c0-7.9,0-18.7,2.2-30.2H350.7
 8 | 		 M432.1,143.5c2.2,23.4-5.4,51.9-19.8,80.7H305.7c3.9-6.8,9-13.3,14.7-19.9C351.4,168.1,399,145.6,432.1,143.5 M225.3,323.7
 9 | 		c-20.5-1.4-48.7-11.1-74.5-30.2h73.5C225.7,304.9,225.7,315.8,225.3,323.7 M250.9,325.9c-8.3-7.9-15.5-18.7-23-32.4h45.7
10 | 		C266.4,307.1,258.5,318,250.9,325.9 M196.5,224.2h-107C75,195.4,67.9,166.9,70,143.5c32.8,2.1,80.8,24.5,111.8,60.8
11 | 		C187.1,210.9,192.5,217.4,196.5,224.2 M297,224.2h-92.3c-1.4-8.3-1.4-16.2-1.4-25.6c0-50.5,22.3-102.7,47.5-126.1
12 | 		c24.9,23.4,47.6,75.7,47.6,126.1C298.5,208,297.7,216,297,224.2"/>
13 | 	<path id="XMLID_16_" d="M424.2,344.2c4.4,0,7.9,3.6,7.9,8.3c0,4.3-3.5,7.9-7.9,7.9c-4.4,0-7.9-3.6-7.9-7.9
14 | 		C416.3,347.8,419.9,344.2,424.2,344.2z M424.2,345.3c-4,0-6.8,3.2-6.8,7.2c0,3.6,2.9,6.8,6.8,6.8c3.6,0,6.8-3.2,6.8-6.8
15 | 		C431.1,348.6,427.8,345.3,424.2,345.3z M426,352.6c0.4,0,1.4,0.3,1.4,1.8v2.5H426v-1.1c0-1.8-0.4-2.6-1.4-2.6h-1.8v3.6h-1.4v-9h2.9
16 | 		c1.8,0,3.2,1.1,3.2,2.6C427.5,351.4,426.7,352.6,426,352.6z M422.8,349.3v2.5h1.4c0.7,0,1.8-0.4,1.8-1.1c0-0.8-0.8-1.4-1.4-1.4
17 | 		H422.8"/>
18 | 	<path id="XMLID_17_" d="M404.7,427.5c15.1,0,27.8-6.1,27.8-21.2c0-8.6-6.1-14.4-15.9-17c-10.1-2.5-23-2.1-23-8.6
19 | 		c0.7-4.3,4.7-5.4,10.8-5.4c9.4,0,9.8,5,10.2,8.3H430c-1.1-11.9-10.8-20.2-26.3-20.2c-16.2,0-25.6,8.6-25.6,19.9
20 | 		c0,6.5,3.2,12.3,8.6,15.1c3.9,1.8,9.3,3.2,15.9,4.4c6.8,0.7,12.9,1.4,13.3,6.1c0,3.2-3.2,7.2-10.5,7.2c-10.5,0-12.6-5.8-12.6-9.7
21 | 		h-16.2C377,418.8,387.4,427.5,404.7,427.5"/>
22 | 	<path id="XMLID_20_" d="M337,427.5c6.9,0,13-2.2,18.1-5.4v4h15.5v-62H355v4.7c-5-3.6-11.1-5.4-18.1-5.4
23 | 		c-17.6,0-32.4,14.1-32.4,32.1C304.6,413.1,319.4,427.5,337,427.5z M319.8,395.4c0-9.8,8.3-18.1,18-18.1c9.4,0,17.3,8.3,17.3,18.1
24 | 		c0,9.3-7.9,17.7-17.3,17.7C328,413.1,319.8,404.7,319.8,395.4"/>
25 | 	<path id="XMLID_23_" d="M284.4,342.8v25.9c-5.4-3.6-11.5-5.4-18.4-5.4c-17.7,0-32.1,14.1-32.1,32.1c0,17.7,14.4,32,32.1,32
26 | 		c6.8,0,13.3-2.2,18.4-5.4v4h15.1v-83.3H284.4z M248.8,395.4c0-9.8,8.3-18.1,17.6-18.1c9.8,0,18.1,8.3,18.1,18.1
27 | 		c0,9.3-8.3,17.7-18.1,17.7C257,413.1,248.8,404.7,248.8,395.4"/>
28 | 	<path id="XMLID_26_" d="M212.4,426h15.1v-62h-15.1V426z M212.4,358.3h15.1v-15.5h-15.1V358.3"/>
29 | 	<path id="XMLID_29_" d="M170.9,427.5c6.8,0,12.9-2.2,18.4-5.4v4h15.5v-83.3h-15.5v25.9c-5.4-3.6-11.5-5.4-18.4-5.4
30 | 		c-17.7,0-32.4,14.1-32.4,32.1C138.5,413.1,153.2,427.5,170.9,427.5z M153.2,395.4c0-9.8,8.3-18.1,18.4-18.1
31 | 		c9.4,0,17.7,8.3,17.7,18.1c0,9.3-8.3,17.7-17.7,17.7C161.5,413.1,153.2,404.7,153.2,395.4"/>
32 | 	<path id="XMLID_32_" d="M99.5,427.5c7.2,0,13.3-2.2,18.7-5.4v4h15.1v-62h-15.1v4.7c-5.4-3.6-11.9-5.4-18.7-5.4
33 | 		c-17.7,0-32,14.1-32,32.1C67.5,413.1,81.9,427.5,99.5,427.5z M82.2,395.4c0-9.8,8.3-18.1,17.7-18.1c10.1,0,18.4,8.3,18.4,18.1
34 | 		c0,9.3-8.3,17.7-18.4,17.7C90.5,413.1,82.2,404.7,82.2,395.4"/>
35 | </g>
36 | </svg>
37 | 


--------------------------------------------------------------------------------
/Card-shop/img/airmax.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Card-shop/img/airmax.png


--------------------------------------------------------------------------------
/Card-shop/img/nike.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg fill="#fff" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
 5 | <g id="XMLID_20_">
 6 | 	<path id="XMLID_24_" d="M128.7,271.4c-2.9,0-5.2,2-5.2,5c0,3,2.3,5,5.2,5c2.9,0,5.2-2,5.2-5C133.9,273.4,131.6,271.4,128.7,271.4z
 7 | 		 M128.7,279.9c-2.1,0-3.6-1.5-3.6-3.6c0-2,1.5-3.6,3.6-3.6c2.1,0,3.6,1.5,3.6,3.6C132.3,278.4,130.7,279.9,128.7,279.9z"/>
 8 | 	<polygon id="XMLID_25_" points="179,253.9 153.8,253.9 156.7,210.1 140.3,253.9 117,253.9 154.1,155 179,155 176.1,199.3 
 9 | 		192.8,155 216.2,155 	"/>
10 | 	<polygon id="XMLID_26_" points="182.1,253.9 219.2,155 242.6,155 205.5,253.9 	"/>
11 | 	<path id="XMLID_27_" d="M114.3,219.8c-32.7,38.4-63.5,89.5-36.3,113c26.4,22.8,59.4,9.3,81.9,0.3c22.5-9,271.1-117,271.1-117
12 | 		c2.4-1.2,1.9-2.7-1-1.9c-1.2,0.3-270.7,73.3-270.7,73.3C125.1,297.1,86.1,276.2,114.3,219.8z"/>
13 | 	<path id="XMLID_30_" d="M129.6,276.7c0.7,0,1.3-0.4,1.3-1.4c0-1.3-0.8-1.6-2.3-1.6h-2v5.4h1.4v-2.3h0.2l1.2,2.3h1.6L129.6,276.7z
14 | 		 M128.7,275.9h-0.8v-1.2h0.7c0.4,0,0.9,0,0.9,0.6C129.4,275.7,129.2,275.9,128.7,275.9z"/>
15 | 	<path id="XMLID_33_" d="M363.8,154.7c-2.9,0-5.2,2-5.2,5c0,3,2.3,5,5.2,5c2.9,0,5.2-2,5.2-5C369,156.7,366.7,154.7,363.8,154.7z
16 | 		 M363.8,163.2c-2.1,0-3.6-1.5-3.6-3.6c0-2,1.5-3.6,3.6-3.6c2.1,0,3.6,1.5,3.6,3.6C367.4,161.7,365.9,163.2,363.8,163.2z"/>
17 | 	<path id="XMLID_36_" d="M364.7,160c0.7,0,1.3-0.4,1.3-1.4c0-1.3-0.8-1.6-2.3-1.6h-2v5.4h1.4V160h0.2l1.2,2.3h1.6L364.7,160z
18 | 		 M363.9,159.1h-0.8v-1.2h0.7c0.4,0,0.9,0,0.9,0.6C364.6,159,364.3,159.1,363.9,159.1z"/>
19 | 	<path id="XMLID_39_" d="M348.4,171.4l6.3-16.5h-46.9h-0.2h-24.3l-24.5,29.7l11.3-29.7h-23.7l-36.8,99H233l15.7-41.4l1.1,41.4
20 | 		l71.8-0.2l6.8-19h-27.3l9-24h22.5l6.9-18.4H317l7.7-20.8H348.4z M273,247.3l-1.5-51.6l35.4-38.8L273,247.3z"/>
21 | </g>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/Card-shop/img/puma.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#fff;}
 7 | </style>
 8 | <g id="XMLID_19_">
 9 | 	<path id="XMLID_21_" class="st0" d="M264,161.1c-1.2,0.2-2.3,4.5-4.6,6.8c-1.7,1.6-3.7,1.5-4.8,3.5c-0.4,0.8-0.3,2-0.8,3.3
10 | 		c-0.9,2.5-4.2,2.7-4.2,5.4c0,2.9,2.7,3.5,5.1,5.5c1.9,1.7,2,2.8,4.3,3.6c1.9,0.6,4.8-1.5,7.3-0.7c2.1,0.6,4.1,1.1,4.6,3.2
11 | 		c0.4,2,0,5.1-2.6,4.7c-0.9-0.1-4.6-1.4-9.2-0.9c-5.5,0.6-11.8,2.4-12.5,8.6c-0.3,3.4,3.9,7.5,8,6.7c2.8-0.6,1.5-3.9,3-5.5
12 | 		c2-2.1,13.6,7.3,24.3,7.3c4.5,0,7.9-1.1,11.2-4.6c0.3-0.3,0.7-0.8,1.2-0.9c0.5,0,1.2,0.5,1.5,0.7c8.6,6.9,15.1,20.8,46.8,21
13 | 		c4.5,0,9.5,2.2,13.7,5.9c3.7,3.4,5.9,8.7,8,14.1c3.2,8.1,8.9,16,17.5,24.7c0.5,0.5,7.6,6,8.1,6.4c0.1,0.1,0.6,1.3,0.4,2
14 | 		c-0.2,5.3-1,20.5,10.4,21.2c2.8,0.1,2.1-1.8,2.1-3.2c0-2.7-0.5-5.3,0.9-8c1.9-3.7-4.1-5.5-3.9-13.6c0.1-6-5-5-7.5-9.6
15 | 		c-1.5-2.7-2.8-4.1-2.7-7.3c0.6-18.4-3.9-30.4-6.1-33.4c-1.7-2.2-3.2-3.1-1.6-4.2c9.5-6.3,11.7-12.1,11.7-12.1
16 | 		c5.1-11.9,9.6-22.7,15.9-27.5c1.3-1,4.5-3.4,6.5-4.4c5.9-2.8,8.9-4.4,10.6-6.1c2.7-2.6,4.8-8.1,2.2-11.4c-3.2-4.1-8.7-0.8-11.2,0.6
17 | 		c-17.5,10.4-20.1,28.7-26.1,39.2c-4.8,8.4-12.7,14.6-19.7,15.1c-5.3,0.4-10.9-0.7-16.6-3.2c-13.7-6-21.3-13.8-23-15.2
18 | 		c-3.7-2.8-32.3-31-55.6-32.1c0,0-2.9-5.8-3.6-5.9c-1.7-0.2-3.4,3.4-4.7,3.9C267.2,165.3,265.2,160.9,264,161.1"/>
19 | 	<path id="XMLID_25_" class="st0" d="M161.8,329c-2.2-0.1-4-1.8-4-4.1l0-72.4h-23.9v79.8c0,3.9,3.2,7.1,7.1,7.1h41.7
20 | 		c3.9,0,7.1-3.2,7.1-7.1v-79.8h-23.9l0,72.4C165.9,327.2,164,329,161.8,329"/>
21 | 	<path id="XMLID_26_" class="st0" d="M241.7,252.5h-36.1c-4.3,0-7.8,3.5-7.8,7.8v79.1h23.9v-72.6c0-2.2,1.8-4,4-4
22 | 		c2.2,0,4,1.7,4.1,3.9v72.7h23.8v-72.7c0-2.2,1.8-3.9,4-3.9c2.2,0,4,1.8,4,4v72.6h23.9v-79.1c0-4.3-3.5-7.8-7.8-7.8H241.7"/>
23 | 	<path id="XMLID_29_" class="st0" d="M118,317.6H93.9v21.8H70v-86.9h48.1c4.3,0,7.7,3.5,7.7,7.8v49.4
24 | 		C125.8,314.1,122.3,317.6,118,317.6z M102,267c0-2.4-2-4.1-4-4.1h-4.1v44h4.1c2.1,0,4.1-1.7,4-4.1V267"/>
25 | 	<path id="XMLID_32_" class="st0" d="M325.7,339.5v-21.8h-8.1v21.8h-23.8v-79.1c0-4.3,3.5-7.8,7.8-7.8h40.3c4.3,0,7.8,3.5,7.8,7.8
26 | 		v79.1H325.7z M325.7,306.9v-40c-0.1-2.2-1.8-3.9-4.1-3.9c-2.2,0-4,1.8-4,4v40H325.7"/>
27 | </g>
28 | </svg>
29 | 


--------------------------------------------------------------------------------
/Card-shop/img/sakura.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Card-shop/img/sakura.png


--------------------------------------------------------------------------------
/Card-shop/img/yeezy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Card-shop/img/yeezy.png


--------------------------------------------------------------------------------
/Card-shop/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <title>Shop</title>
  9 | </head>
 10 | 
 11 | <body>
 12 | 
 13 |     <div class="banner"></div>
 14 | 
 15 |     <section>
 16 | 
 17 |         <div class="card-container">
 18 | 
 19 | 
 20 |             <div class="card">
 21 | 
 22 |                 <span>Pantone 7433 C</span>
 23 | 
 24 |                 <div class="card-main">
 25 | 
 26 | 
 27 |                     <header>
 28 |                         <img src="./img/puma.svg" alt="puma">
 29 |                     </header>
 30 | 
 31 |                     <span>
 32 |                         <img src="./img/sakura.png">
 33 |                     </span>
 34 | 
 35 |                     <div class="content">
 36 |                         <span>Ronnie Fieg x Puma</span>
 37 |                         <h1>R698 Mid - SAkura</h1>
 38 |                         <p>Ronnie Fieg partners with Puma to redesign the R698. Inspired by Japanese sakura blossoms</p>
 39 |                     </div>
 40 | 
 41 |                     <button>
 42 |                         <span>$220</span> - <span>Add to cart</span>
 43 |                     </button>
 44 |                 </div>
 45 |             </div>
 46 | 
 47 |             <div class="card">
 48 | 
 49 |                 <span>Pantone 710 C</span>
 50 | 
 51 |                 <div class="card-main">
 52 | 
 53 |                     <header>
 54 |                         <img src="./img/nike.svg" alt="nike">
 55 |                     </header>
 56 | 
 57 |                     <span>
 58 |                         <img src="./img/airmax.png">
 59 |                     </span>
 60 | 
 61 |                     <div class="content">
 62 |                         <span>Nike</span>
 63 |                         <h1>Air max 90 Infrared</h1>
 64 |                         <p>The "Infrared" colorway is without any doubt one of the most iconic in the Nike Air Max history.</p>
 65 |                     </div>
 66 | 
 67 |                     <button>
 68 |                         <span>$129</span> - <span>Add to cart</span>
 69 |                     </button>
 70 |                 </div>
 71 |             </div>
 72 | 
 73 |             <div class="card">
 74 | 
 75 |                 <span>Pantone 546 C</span>
 76 | 
 77 |                 <div class="card-main">
 78 | 
 79 | 
 80 |                     <header>
 81 |                         <img src="./img/adidas.svg" alt="adidas">
 82 |                     </header>
 83 | 
 84 |                     <span>    
 85 |                         <img src="./img/yeezy.png">
 86 |                     </span>
 87 | 
 88 |                     <div class="content">
 89 |                         <span>Adidas</span>
 90 |                         <h1>yeezy Boosts 350</h1>
 91 |                         <p>The low-top <span>YEEZY BOOST 350</span> int tan features an upper composed of tornal Primeknit.</p>
 92 |                     </div>
 93 | 
 94 |                     <button>
 95 |                         <span>$220</span> - <span>Add to cart</span>
 96 |                     </button>
 97 |                 </div>
 98 |             </div>
 99 | 
100 |         </div>
101 | 
102 |         <footer>
103 |             <span></span>
104 |             <span></span>
105 |             <span></span>
106 |             <span></span>
107 |             <span></span>
108 |         </footer>
109 | 
110 |     </section>
111 | 
112 | </body>
113 | 
114 | </html>


--------------------------------------------------------------------------------
/Card-shop/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&display=swap');
  2 | 
  3 | 
  4 | :root{
  5 |     --bg-color-one:#131D21;
  6 |     --bg-color-two:#364044;
  7 |     --card-one-bg:#B03B66;
  8 |     --card-one-btn:#B13B6B;
  9 |     --card-two:#EC3951;
 10 |     --card-trhee:#14353F;
 11 |     --white: #fff;
 12 |     --black: #000;
 13 |     --light-gray:#D3D3D3;
 14 | }
 15 | 
 16 | *{
 17 |     border: 0;
 18 |     padding: 0;
 19 |     margin: 0;
 20 |     box-sizing: border-box;
 21 |     outline: none;
 22 |     font-family: 'Oswald';
 23 | }
 24 | 
 25 | button{
 26 |     cursor: pointer;
 27 | }
 28 | 
 29 | body{
 30 |     height: 100vh;
 31 |     width: 100%;
 32 |     background: #eee;
 33 | }
 34 | 
 35 | body > div.banner{
 36 | 
 37 |     height: 50vh;   
 38 |     width: 100%;
 39 |     background: radial-gradient(circle,var(--bg-color-two) 10%,var(--bg-color-one) 80%) ;    
 40 |     background-size: 160% 100%;
 41 |     background-repeat: no-repeat;
 42 | }
 43 | 
 44 | 
 45 | section{
 46 |     display: flex;
 47 |     flex-direction: column;
 48 |     align-items: center;
 49 |     transform: translateY(-296px);
 50 | }
 51 | 
 52 | section div.card-container{
 53 | 
 54 |     display: flex;
 55 |     flex-wrap: wrap;
 56 |     justify-content: space-between;
 57 |     padding: 0 3rem;
 58 | }
 59 | 
 60 | section div.card{
 61 |     max-width: 29%;
 62 |     margin: 0 1rem;
 63 |     height: 88vh;
 64 |     border-radius: 10px;
 65 |     overflow: hidden;
 66 | }
 67 | 
 68 | section div.card > span{
 69 |     
 70 |     color: var(--white);
 71 |     display: flex;
 72 |     align-items: center;
 73 |     text-transform: uppercase;
 74 |     border-radius: 10px;
 75 | }
 76 | 
 77 | section div.card:nth-of-type(1) > span::before,
 78 | section div.card:nth-of-type(2) > span::before,
 79 | section div.card:nth-of-type(3) > span::before{
 80 |     
 81 |     content: "";
 82 |     left: 0;
 83 |     height: 15px;
 84 |     width: 3px;
 85 |     margin: 0 1rem 0 0;
 86 | }
 87 | 
 88 | section div.card:nth-of-type(1) > span::before{
 89 |     
 90 |     background: var(--card-one-bg);
 91 | }
 92 | 
 93 | section div.card:nth-of-type(2) > span::before{
 94 |     
 95 |     background: var(--card-two);
 96 | }
 97 | 
 98 | section div.card:nth-of-type(3) > span::before{
 99 |     
100 |     background: var(--black);
101 | }
102 | 
103 | section div.card div.card-main{
104 |     margin-top: 5rem;
105 |     height: 72%;
106 |     box-shadow: 0 20px 20px -17px #ccc;
107 |     background: var(--white);
108 |     border-radius: 5px;
109 |     display: flex;
110 |     flex-direction: column;
111 |     align-items: center;
112 |     position: relative;
113 |     transition: 1s;
114 | }
115 | 
116 | 
117 | section div.card div.card-main header img{
118 |     width: 40px;
119 |     margin: 1rem;
120 |     position: absolute;
121 |     z-index: 1;
122 |     left: 0;
123 |     transition: .5s ease-in-out;
124 | }
125 | 
126 | section div.card div.card-main:hover header img{
127 |     width: 70px;
128 |     margin: .2rem .5rem;
129 | }
130 | 
131 | section div.card:nth-of-type(3) div.card-main header img{
132 |     width: 25px;
133 |     margin: 1.3rem;
134 |     position: absolute;
135 |     z-index: 1;
136 |     left: 0;
137 | }
138 | 
139 | section div.card:nth-of-type(3) div.card-main:hover header img{
140 |     width: 40px;
141 | }
142 | 
143 | section div.card div.card-main > span{
144 | 
145 |     display: block;
146 |     width: 100%;
147 |     height: 42%;
148 |     position: relative;
149 |     border-top-left-radius: 5px;
150 |     border-top-right-radius: 5px;
151 |     transform: translateY(-1px);
152 | }
153 | 
154 | section div.card:nth-of-type(1) div.card-main > span{
155 | 
156 |     background: var(--card-one-bg);
157 |     border-top: 1px solid var(--card-one-bg);
158 | }
159 | 
160 | section div.card:nth-of-type(2) div.card-main > span{
161 | 
162 |     background: var(--card-two);
163 | }
164 | 
165 | section div.card:nth-of-type(3) div.card-main > span{
166 | 
167 |     background: var(--card-trhee);
168 | }
169 | 
170 | 
171 | 
172 | section div.card div.card-main span img{
173 | 
174 |     position: absolute;
175 |    width: 290px;
176 |    transform: rotateY(180deg) rotateZ(40deg) translate(-15px,-60px);
177 |     filter: drop-shadow(0 20px 20px rgba(0,0,0,0.5));
178 |     transition: .7s  cubic-bezier(0.34, 1.56, 0.64, 1);
179 | }
180 | 
181 | 
182 | section div.card div.card-main:hover > span img{
183 | 
184 |     transform: rotateY(180deg) rotateZ(0deg) scale(1.06) translate(0px,-20px);
185 | }
186 | 
187 | 
188 | section div.card:nth-of-type(1) div.card-main span img,
189 | section div.card:nth-of-type(3) div.card-main span img
190 | {
191 |     
192 |     width: 325px;
193 |     transform: rotateY(180deg) rotateZ(42deg) translate(-15px,-90px);
194 | }
195 | 
196 | 
197 | section div.card:nth-of-type(1) div.card-main:hover span img{
198 | 
199 |     transform: rotateY(180deg) rotateZ(0deg) scale(1.06) translate(15px,-45px);
200 | }
201 | 
202 | section div.card:nth-of-type(3) div.card-main:hover span img{
203 | 
204 |     transform: rotateY(180deg) rotateZ(0deg) scale(1) translate(15px,-35px);
205 | }
206 | 
207 | 
208 | div.card-main > div.content{
209 |     display: flex;
210 |     flex-direction: column;
211 |     align-items: center;
212 |     margin: 2.5rem 1rem 0 1rem;
213 |     text-align: center;
214 | }
215 | 
216 | div.card-main > div.content > span{
217 |     text-transform: uppercase;
218 |     color: #bbb;
219 |     font-size: 1rem;
220 | }
221 | 
222 | div.card-main > div.content > h1{
223 |     text-transform: uppercase;
224 |     color: var(--black);
225 | }
226 | 
227 | div.card-main > div.content > p{
228 |     
229 |     font-weight: 300;
230 |     margin: 1rem 0;
231 |     padding: 0 1rem;
232 |     font-size: .9rem;
233 |     color: #888;
234 | }
235 | 
236 | div.card-main > button{
237 |  
238 |     color: var(--white);
239 |     width: 70%;
240 |     height: 40px;
241 |     margin-top: 2rem;
242 |     border-radius: 100px;
243 |     text-transform: uppercase;
244 |     transition: opacity 1s;
245 | }
246 | div.card-main > button:hover{
247 |     
248 |     opacity: .9;
249 | }
250 | 
251 | div.card:nth-of-type(1) div.card-main > button{
252 |  
253 |     background-color: var(--card-one-btn);
254 | }
255 | 
256 | div.card:nth-of-type(2) div.card-main > button{
257 |  
258 |     background-color: var(--card-two);
259 | }
260 | div.card:nth-of-type(3) div.card-main > button{
261 |  
262 |     background-color: var(--card-trhee);
263 | }
264 | 
265 | section footer{
266 |     width: 11%;
267 |     height: 10px;
268 |     transform: translateY(-30px);
269 |     display: flex;
270 |     justify-content: space-between;
271 | }
272 | 
273 | section footer span{
274 |     border-radius: 50%;
275 |     width: 8px;
276 |     height: 8px;
277 |     display: block;
278 |     background: #ccc;
279 | }
280 | 
281 | section footer span:nth-of-type(2){
282 |     background: var(--black);
283 | }


--------------------------------------------------------------------------------
/Disney-ui/img/insideoutlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Disney-ui/img/insideoutlogo.png


--------------------------------------------------------------------------------
/Disney-ui/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Disney-ui/img/logo.png


--------------------------------------------------------------------------------
/Disney-ui/img/sadness.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Disney-ui/img/sadness.png


--------------------------------------------------------------------------------
/Disney-ui/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 9 |     <title>Dinsey Characters</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <header>
15 |         <figure>
16 |             <img src="./img/logo.png" alt="logo">
17 |             <figcaption>Characters</figcaption>
18 |         </figure>
19 | 
20 |         <div class="inputText">
21 |             <i class="fas fa-search"></i>
22 |             <input type="text" placeholder="Search characters...">
23 |         </div>
24 | 
25 |         <span class="header-menu">
26 |             <p>Menu</p>
27 |             <i class="fas fa-ellipsis-v"></i>
28 |         </span>
29 | 
30 |     </header>
31 | 
32 |     <section>
33 | 
34 |         <aside>
35 |             <nav>
36 |                 <ul>
37 |                     <li>Disgust</li>
38 |                     <li>Sadness</li>
39 |                 </ul>
40 |             </nav>
41 | 
42 |             <footer>
43 |                 <i class="fas fa-chevron-down"></i>
44 |             </footer>
45 | 
46 |         </aside>
47 | 
48 |         <main>
49 | 
50 |             <img src="./img/sadness.png" alt="Sadness">
51 |             <span class="close">
52 |                 <p>Close</p>
53 |                 <i class="fa fa-times"></i>
54 |             </span>
55 |          
56 | 
57 |             <div class="main-content">
58 |             
59 |                 <div>
60 |                     <span>
61 | 
62 |                         <h1>Sadness</h1>
63 |                         <h3>Movie <span>Inside Out</span></h3>
64 |                         <p>
65 |                             Sadness is literally the very definition and being of
66 |                             sarrow and gloom. She is hardly ever used because Joy
67 |                             is the boss and doesn't want Riley to ever be sad, even
68 |                             when she needs.Because of this, Joy treats Sadness badly.
69 |                         </p>
70 |                     </span>
71 | 
72 |                     <img src="./img/insideoutlogo.png" alt="Inside-out-logo">
73 |                 </div>
74 | 
75 |                 <footer class="clips">
76 |                     <h3>Clips</h3>
77 |                     <div class="image-clips">
78 |                         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTC200n4FamYZfeONpqddsQBA6VBCbuCP18zg&usqp=CAU"
79 |                             alt="clip1">
80 |                         <img src="https://i.pinimg.com/originals/e0/a6/59/e0a659a75ca05342c34e7608349c6b45.png"
81 |                             alt="clip2">
82 |                         <img src="https://i.ytimg.com/vi/yXYRFY5GSO8/maxresdefault.jpg" alt="clip3"> 
83 |                     </div>
84 |                 </footer>
85 | 
86 |             </div>
87 |         </main>
88 | 
89 |     </section>
90 | 
91 | </body>
92 | 
93 | </html>


--------------------------------------------------------------------------------
/Employer Dashboard/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  8 |     <title>Employer Dashboard</title>
  9 |     <link rel="stylesheet" href="style.css">
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |     <nav class="top-navbar">
 15 | 
 16 |         <div class="content-navbartop">
 17 | 
 18 |             <span>
 19 |                 <i class="fab fa-joget"></i>
 20 |             </span>
 21 | 
 22 |             <span>
 23 |                 <i class="fas fa-search"></i>
 24 |             </span>
 25 | 
 26 |             <div>
 27 |                 <span>
 28 |                     <i class="far fa-bell"></i>
 29 |                 </span>
 30 |                 <span>
 31 |                     <img src="https://avatars2.githubusercontent.com/u/31545128?s=460&u=2c1e279b6d728d05c70b90a9739ba86f2448bf22&v=4"
 32 |                         alt="Employee photo">
 33 |                     <p>Allief Vinicius</p>
 34 |                 </span>
 35 |             </div>
 36 |         </div>
 37 |     </nav>
 38 | 
 39 |     <div class="dashboard-content">
 40 | 
 41 | 
 42 |         <nav class="left-navbar">
 43 | 
 44 |             <ul>
 45 |                 <li><i class="fas fa-house-user"></i></li>
 46 |                 <li><i class="far fa-clock"></i></li>
 47 |                 <li><i class="far fa-comment"></i></li>
 48 |                 <li><i class="far fa-folder"></i></li>
 49 |                 <li><i class="fas fa-bullhorn"></i></li>
 50 |             </ul>
 51 |         </nav>
 52 | 
 53 |         <section class="dashboard-center">
 54 | 
 55 |             <div class="dashboard-top">
 56 |                 <h1>Dashboard</h1>
 57 |                 <button>+ Add Employee</button>
 58 |             </div>
 59 | 
 60 |             <nav class="dashboard-menu">
 61 |                 <ul>
 62 |                     <li>Employee List</li>
 63 |                     <li>Management</li>
 64 |                     <li>Others</li>
 65 |                 </ul>
 66 |             </nav>
 67 | 
 68 |             <div class="dashboard-profiles">
 69 | 
 70 |                 <ul class="list-header">
 71 |                     <li></li>
 72 |                     <li>Basic Info</li>
 73 |                     <li>Employee Code</li>
 74 |                     <li>Designation</li>
 75 |                     <li>Phone Number</li>
 76 |                     <li>Joining Date</li>
 77 |                     <li></li>
 78 |                 </ul>
 79 | 
 80 |                 <ul class="list-content">
 81 |                     <li class="list-content-item">
 82 |                         <span>1</span>
 83 |                         <span class="aboutuser">
 84 |                             <img src="https://avatars2.githubusercontent.com/u/31545128?s=460&u=2c1e279b6d728d05c70b90a9739ba86f2448bf22&v=4"
 85 |                                 alt="Employee photo">
 86 |                             <h3>Jimmy Henderson</h3>
 87 |                             <p>handerson999@gmail.com</p>
 88 |                         </span>
 89 |                         <span>CA009</span>
 90 |                         <span>Angular Developer</span>
 91 |                         <span>(11) 92343-5942</span>
 92 |                         <span>Mar 27,2020</span>
 93 |                         <span>
 94 |                             <i class="fa fas fa-ellipsis-v"></i>
 95 |                         </span>
 96 |                     </li>
 97 |                 </ul>
 98 | 
 99 |                 
100 |                 <ul class="list-content">
101 |                     <li class="list-content-item">
102 |                         <span>2</span>
103 |                         <span class="aboutuser">
104 |                             <img src="https://avatars2.githubusercontent.com/u/31545128?s=460&u=2c1e279b6d728d05c70b90a9739ba86f2448bf22&v=4"
105 |                                 alt="Employee photo">
106 |                             <h3>Jimmy Henderson</h3>
107 |                             <p>handerson999@gmail.com</p>
108 |                         </span>
109 |                         <span>CA009</span>
110 |                         <span>Angular Developer</span>
111 |                         <span>(11) 92343-5942</span>
112 |                         <span>Mar 27,2020</span>
113 |                         <span>
114 |                             <i class="fa fas fa-ellipsis-v"></i>
115 |                         </span>
116 |                     </li>
117 |                 </ul>
118 | 
119 |                 
120 |                 <ul class="list-content">
121 |                     <li class="list-content-item">
122 |                         <span>3</span>
123 |                         <span class="aboutuser">
124 |                             <img src="https://avatars2.githubusercontent.com/u/31545128?s=460&u=2c1e279b6d728d05c70b90a9739ba86f2448bf22&v=4"
125 |                                 alt="Employee photo">
126 |                             <h3>Jimmy Henderson</h3>
127 |                             <p>handerson999@gmail.com</p>
128 |                         </span>
129 |                         <span>CA009</span>
130 |                         <span>Angular Developer</span>
131 |                         <span>(11) 92343-5942</span>
132 |                         <span>Mar 27,2020</span>
133 |                         <span>
134 |                             <i class="fa fas fa-ellipsis-v"></i>
135 |                         </span>
136 |                     </li>
137 |                 </ul>
138 |             </div>
139 |         </section>
140 |     </div>
141 | </body>
142 | 
143 | </html>


--------------------------------------------------------------------------------
/Employer Dashboard/style.css:
--------------------------------------------------------------------------------
  1 | :root{
  2 | 
  3 |     --background: #F8FAFC;
  4 |     --primary: #00d17a;
  5 |     --text-title:#898F99;
  6 |     --colorText: #D7DAE1;
  7 |     --navbar-bg: #FFFFFF;
  8 | }
  9 | 
 10 | *{
 11 |     margin: 0;
 12 |     padding: 0;
 13 |     box-sizing: border-box;
 14 |     font-family: Arial, Helvetica, sans-serif;
 15 | }
 16 | 
 17 | body{
 18 |     background: var(--background);
 19 |     min-height: 100vh;
 20 | }
 21 | 
 22 | .top-navbar{
 23 |     width:100%;
 24 |     height:3rem;
 25 |     background: var(--navbar-bg);
 26 |     display: flex;
 27 |     justify-content: center;
 28 |     border-bottom: 1px solid #eee;   
 29 |     position: fixed; 
 30 | }
 31 | 
 32 | .content-navbartop{
 33 |     max-width: 1024px;
 34 |     width: 100%;
 35 |     display: grid;
 36 |     grid-template-columns: 3.5rem 3rem 1fr 210px;
 37 |     align-items: center;
 38 |     height: 100%;
 39 | }
 40 | 
 41 | 
 42 | .content-navbartop > span{
 43 | 
 44 |     display: flex;
 45 |     align-items: center;
 46 |     justify-content: center;
 47 |     width: 100%;
 48 | }
 49 | 
 50 | .content-navbartop > span:first-of-type{
 51 |     color: var(--primary);
 52 |     font-size: 1.3rem;
 53 |     border: 1px solid;
 54 |     height: 100%;
 55 |     border-color: transparent #eee #eee transparent;
 56 |     
 57 | }
 58 | 
 59 | .content-navbartop > span:last-of-type{
 60 |     color: var(--colorText);
 61 |     font-size: 1rem;
 62 |     margin-left: 15px;
 63 | }
 64 | 
 65 | .content-navbartop > div{
 66 | 
 67 |     grid-column: 4;
 68 |     display: grid;
 69 |     grid-template-columns: 50px 1fr;
 70 |     column-gap: 30px;
 71 |     justify-content: space-between;
 72 |     align-items: center;
 73 |     height: 100%;
 74 | 
 75 | }
 76 | 
 77 | 
 78 | .content-navbartop > div span:first-of-type{
 79 |     color: var(--colorText);
 80 |     border: 1px solid;
 81 |     width: 3.5rem;
 82 |     height: 100%;
 83 |     display: grid;
 84 |     place-items: center;
 85 |     border-color: transparent #eee transparent #eee;
 86 | }
 87 | 
 88 | .content-navbartop > div span:last-of-type{
 89 |     color: var(--colorText);
 90 |     display: flex;
 91 |     align-items: center;
 92 |     color: #555;
 93 |     font-size: .8rem;
 94 |     font-weight: 500;
 95 | }
 96 | 
 97 | 
 98 | .content-navbartop > div img{
 99 | 
100 |     width: 18%;
101 |     margin-right: 10px;
102 |     border-radius: 5px;
103 | }
104 | 
105 | 
106 | .dashboard-content{
107 |     display: grid;
108 |     grid-template-columns: 3.5rem 1fr;
109 |     grid-template-rows: 120px 1fr 1fr;
110 |     column-gap: 50px;
111 |     max-width: 1024px;
112 |     width: 100%;
113 |     min-height: 80vh;
114 |     height: 100%;
115 | }
116 | 
117 | .dashboard-content .left-navbar{
118 | 
119 |     position: fixed;
120 |     height:100vh;
121 |     width: 3.5rem;
122 |     transform: translateY(3rem);
123 |     grid-row: 1/2;
124 |     display: flex;
125 |     flex-direction: column;
126 |     justify-content: center;
127 |     align-items: center;
128 |     background: var(--navbar-bg);
129 |     border-right: 1px solid #eee;    
130 | }
131 | 
132 | .dashboard-content .left-navbar ul{
133 | 
134 |     list-style: none;
135 |     height: 310px;
136 |     width: 100%;
137 |     transform: translateY(-50px);
138 |     display: flex;
139 |     flex-direction: column;
140 |     justify-content: space-between;
141 |     align-items: center;
142 | }
143 | 
144 | .dashboard-content .left-navbar ul li{
145 | 
146 |     color: var(--colorText);
147 |     font-size: 1.3rem;
148 |     transition: .5s;
149 |     border-right: 2px solid #fff;
150 |     width: 100%;
151 |     height: 40px;
152 |     display: grid;
153 |     place-items: center;
154 |     cursor: pointer;
155 | }
156 | 
157 | .dashboard-content .left-navbar ul li:hover{
158 |     
159 |     color: var(--colorText);
160 |     font-size: 1.3rem;
161 |     border-right: 2px solid var(--primary);
162 |     color: var(--primary);
163 | }
164 | 
165 | .dashboard-center{
166 |     grid-column: 2;
167 |     grid-row: 2;
168 |     max-width: 830px;
169 |     width: 100%;
170 | }
171 | 
172 | .dashboard-center .dashboard-top{
173 |     display: flex;
174 |     justify-content: space-between;
175 | }
176 | 
177 | .dashboard-center .dashboard-top h1{
178 |     color:#444;
179 | }
180 | 
181 | .dashboard-center .dashboard-top button{
182 |     color:#fff;
183 |     background: var(--primary);
184 |     padding:10px 12px;
185 |     border: 0;
186 |     border-radius: 5px;
187 |     outline: 0;
188 |     cursor: pointer;
189 |     transition: .5s;
190 | }
191 | 
192 | .dashboard-center .dashboard-top button:hover{
193 | 
194 |     opacity: 0.7;
195 | }
196 | .dashboard-center .dashboard-menu{
197 |     margin: 20px 0;
198 |     border-bottom: 1px solid #ddd;
199 |     position: relative;
200 | }
201 | 
202 | .dashboard-center .dashboard-menu::after{
203 |     content: "";
204 |     background: var(--primary);
205 |     height: 1.5px;
206 |     width: 100px;
207 |     transform: translateY(1px);
208 |     display: block;
209 | }
210 | 
211 | 
212 | .dashboard-center .dashboard-menu ul{
213 |     
214 |     display: flex;
215 |     justify-content: space-between;
216 |     max-width: 350px;
217 |     width: 100%;
218 |     list-style: none;
219 |     font-size: .8rem;
220 |     padding: 15px 0;
221 |     margin: 0 10px;
222 |     text-align: center;
223 | }
224 | 
225 | .dashboard-center .dashboard-menu ul li{
226 |     
227 |     border-bottom: 2px solid transparent;
228 |     height: 100%;
229 |     cursor: pointer;
230 |     transition: .5s;
231 |     color: var(--text-title);
232 | }
233 | 
234 | .dashboard-center .dashboard-menu ul li:hover{
235 | 
236 |     color: #333;
237 | }
238 | 
239 | .dashboard-center .dashboard-menu ul li:hover  ~{
240 | 
241 |     color: #333;
242 | }
243 | 
244 | 
245 | .dashboard-profiles{
246 |     margin-top: 50px;
247 |     display: flex;
248 |     flex-direction: column;
249 |     align-items: center;
250 | }
251 | 
252 | 
253 | .dashboard-profiles .list-header{
254 |     list-style: none;
255 |     display: grid;
256 |     font-weight: bold;
257 |     color: #bbb;
258 |     width: 100%;
259 |     grid-template-columns: 70px 1.35fr 1fr 1fr .9fr 1fr .2fr;
260 |     font-size: .8rem;
261 |     margin-bottom: 20px;
262 | }
263 | 
264 | 
265 | 
266 | .dashboard-profiles .list-header li{
267 |     text-align:center;
268 | }
269 | 
270 | 
271 | 
272 | .dashboard-profiles .list-content{
273 |     
274 |     width: 100%;
275 |     cursor: pointer;
276 |     margin-bottom: 10px;
277 | }
278 | 
279 | .dashboard-profiles .list-content .list-content-item{
280 |     
281 |     display: grid;
282 |     font-size: .8rem;
283 |     justify-content: space-between;
284 |     grid-template-columns:80px 1.36fr 1fr 1fr 1fr 1fr .2fr;
285 |     width: 100%;
286 |     background: var(--navbar-bg);
287 |     font-size: .8rem;
288 |     align-items: center;
289 |     text-align: center;
290 |     padding: 15px 10px 15px 5px;
291 |     border-radius:5px;
292 |     color: #444;
293 |     transition: .5s ease;
294 | }
295 | 
296 | .dashboard-profiles .list-content .list-content-item:hover{
297 |     
298 |     transform: scale(1.02);
299 |     box-shadow: 5px 5px 10px rgb(226, 226, 226);
300 | }
301 | 
302 | .dashboard-profiles .list-content .list-content-item i{
303 |     
304 |     color: var(--colorText);
305 | }
306 | 
307 | 
308 | .dashboard-profiles .list-content .list-content-item img{
309 |     width: 10px;
310 | }
311 | 
312 | .dashboard-profiles .list-content .list-content-item .aboutuser{
313 |     display:grid;
314 |     column-gap: 15px;
315 |     grid-template-columns: 30px 1fr;
316 |     grid-template-rows: 1fr;
317 |     font-size: .7rem;
318 | }
319 | 
320 | .dashboard-profiles .list-content .list-content-item .aboutuser img{
321 |     
322 |     width: 30px;
323 |     grid-column: 1;
324 |     grid-row: 1/4;
325 |     border-radius: 50%;
326 | }
327 | 
328 | .dashboard-profiles .list-content .list-content-item .aboutuser h3,p{
329 |     
330 |     grid-column: 2;
331 |     text-align: left;
332 | }
333 | 


--------------------------------------------------------------------------------
/Login-form/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Login-form/background.jpg


--------------------------------------------------------------------------------
/Login-form/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  9 |     <title>Sign up</title>
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |     <section>
 15 |         <div class="container-left">
 16 |             <nav>
 17 |                 <span>Photography.</span>
 18 |                 <span></span>
 19 |             </nav>
 20 | 
 21 |             <span class="header">
 22 |                 <p>Click for your shoot</p>
 23 |                 <h2>Photography.</h2>
 24 |             </span>
 25 | 
 26 |             <span class="phrase_near_footer">Jouney Everywhere</span>
 27 | 
 28 |             <footer></footer>
 29 | 
 30 |         </div>
 31 |         <div class="container-right">
 32 |             <span>
 33 |                 <h1>Registration</h1>
 34 |                 <p>Click for your shoot</p>
 35 |             </span>
 36 | 
 37 |             <form action="">
 38 | 
 39 |                 <div class="name">
 40 |                     <input type="text">
 41 |                     <label>Name</label>
 42 |                 </div>
 43 | 
 44 |                 <div class="email">
 45 |                     <input type="text">
 46 |                     <label>Email</label>
 47 |                 </div>
 48 | 
 49 |                 <div class="gender">
 50 | 
 51 |                     <label>Gender</label>
 52 | 
 53 |                     <div class="male-female">
 54 | 
 55 | 
 56 |                         <span class="male">
 57 |                             <input type="radio" name="gender" id="m" checked>
 58 |                             <label for="m"><i class="fa fa-male"></i></label>
 59 |                             <span>Male</span>
 60 |                         </span>
 61 | 
 62 |                         <span class="female">
 63 |                             <input type="radio" name="gender" id="f">
 64 |                             <label for="f"><i class="fa fa-female"></i></label>
 65 |                             <span>Female</span>
 66 |                         </span>
 67 |                     </div>
 68 |                 </div>
 69 | 
 70 |                 <div class="birth">
 71 |                     <input type="text">
 72 |                     <label>Date of Birth</label>
 73 |                 </div>
 74 | 
 75 |                 <div class="city">
 76 |                     <input type="text">
 77 |                     <label>City</label>
 78 |                 </div>
 79 | 
 80 |                 <div class="country">
 81 |                     <input type="text">
 82 |                     <label>Country</label>
 83 |                 </div>
 84 | 
 85 |                 <div class="subscription">
 86 |                     <label>Subscription</label>
 87 | 
 88 |                     <div class="subscription-radios">
 89 | 
 90 |                         <span class="bronze">
 91 |                             <input type="radio" name="subs" id="b">
 92 |                             <label for="b">Bronze</label>
 93 |                         </span>
 94 | 
 95 |                         <span class="silver">
 96 |                             <input type="radio" name="subs" id="s" checked>
 97 |                             <label for="s">Silver</label>
 98 |                         </span>
 99 | 
100 |                         <span class="gold">
101 |                             <input type="radio" name="subs" id="g">
102 |                             <label for="g">Gold</label>
103 |                         </span>
104 |                     </div>
105 |                 </div>
106 | 
107 |                 <span id="buttons">
108 |                     <button>Cancel</button>
109 |                     <button>Confirm</button>
110 |                 </span>
111 | 
112 |             </form>
113 | 
114 |         </div>
115 |     </section>
116 | 
117 | </body>
118 | 
119 | </html>


--------------------------------------------------------------------------------
/Login-form/style.css:
--------------------------------------------------------------------------------
  1 | :root{
  2 |     --primary: #0DA1A1;
  3 |     --secondary:#EEEEEC;
  4 |     --header-form:#9C99AA;
  5 |     --input-header:#7F7A96;
  6 |     --checkobx-bg:#D4D3DB;
  7 |     --form-bg:#FAFAFA;
  8 |     --input-bg: #F3F3F3;
  9 |     --btn-cancel:#312958;
 10 |     --header-footer: #00694167;
 11 | }
 12 | 
 13 | *{
 14 |     margin:0;
 15 |     padding:0;
 16 |     box-sizing: border-box;
 17 |     outline: 0;
 18 |     border: 0;
 19 |     font-family: sans-serif;
 20 | }
 21 | 
 22 | 
 23 | body{
 24 |     display: grid;
 25 | }
 26 | 
 27 | section{
 28 |     height: 100vh;
 29 |     width: 100%;
 30 |     display: flex;
 31 |     flex-wrap: wrap;
 32 | }
 33 | 
 34 | 
 35 | 
 36 | 
 37 | section > div:first-of-type{
 38 | 
 39 |     background: url("./background.jpg") no-repeat;
 40 |     background-size: cover;
 41 |     background-position: 100% 35%;
 42 |     color:var(--secondary);
 43 |     filter: hue-rotate(2deg,50deg,180deg);
 44 |     display: flex;
 45 |     flex-direction: column;
 46 |     align-items: center;
 47 |     justify-content: space-between;
 48 |     width: 47%;
 49 | }
 50 | 
 51 | section > div:first-of-type nav{
 52 | 
 53 |     width: 100%;
 54 |     height: 70px;
 55 |     display: flex;
 56 |     align-items: center;
 57 |     justify-content: space-between;
 58 |     padding: 20px 30px 20px 25px;
 59 | }
 60 | 
 61 | section > div:first-of-type nav span:first-of-type{
 62 |     
 63 |     font-weight: bold;
 64 | }
 65 | 
 66 | section > div:first-of-type nav span:last-of-type{
 67 |     
 68 |     background: var(--secondary);
 69 |     width: 27px;
 70 |     height: 3px;
 71 |     border-radius:5px;
 72 |     position: relative;
 73 | }
 74 | 
 75 | section > div:first-of-type nav span:last-of-type::before,
 76 | section > div:first-of-type nav span:last-of-type::after{
 77 |     
 78 |         content: "";
 79 |         background: var(--secondary);
 80 |         width: 27px;
 81 |         height: 3px;
 82 |         border-radius:5px;
 83 |         display: block;
 84 |     }
 85 |     
 86 | section > div:first-of-type nav span:last-of-type::before{
 87 |     transform: translateY(-8px);
 88 | }
 89 | 
 90 | 
 91 | section > div:first-of-type nav span:last-of-type::after{
 92 |     transform: translateY(5px);
 93 | }
 94 | 
 95 | 
 96 | section > div:first-of-type .header{
 97 |     transform: translateY(-80px);
 98 |     font-style: italic;
 99 |     text-align: center;
100 | }
101 | 
102 | section > div:first-of-type .header p{
103 | 
104 |     font-size: 1.1rem;
105 |     color: #ccc;
106 |     font-weight: 100;
107 |     text-transform: uppercase;
108 | }
109 | 
110 | section > div:first-of-type .header h2{
111 | 
112 |     font-size: 2.5rem;
113 | }
114 | 
115 | section > div:first-of-type .phrase_near_footer{
116 | 
117 |     font-size: 1rem;
118 |     letter-spacing: 3px;
119 |     font-style: italic;
120 |     text-transform: uppercase;
121 |     transform: translateY(140px);    
122 | }
123 | 
124 | section > div:first-of-type footer{
125 | 
126 |     width: 100%;
127 |     height: 50px;
128 |     background: linear-gradient(to right,transparent 60%,var(--header-footer)65%);
129 |     display: flex;
130 |     align-items: center;
131 |     justify-content: space-between;
132 | }
133 | 
134 | 
135 | section > div:last-of-type{
136 |     background: #fff;
137 |     display: flex;
138 |     flex-direction: column;
139 |     align-items: center;
140 |     width: 53%;
141 | }
142 | 
143 | 
144 | section > div:last-of-type > span{
145 |     margin-top: 80px;
146 | }
147 | 
148 | section > div:last-of-type > span h1{
149 |     color: var(--primary);
150 |     font-weight: 800;
151 |     font-size: 2.5rem;
152 | }
153 | 
154 | section > div:last-of-type > span p{
155 | 
156 |     color: var(--header-form);
157 |     letter-spacing: 3.5px;
158 |     font-weight: bold;
159 |     margin-top: 5px;
160 |     font-size: 1rem;
161 |     text-transform: uppercase;
162 | }
163 | 
164 | section > div:last-of-type > form{
165 | 
166 |     width: 75%;
167 |     height: 60%;
168 |     margin-top: 70px;
169 |     display: flex;
170 |     flex-direction: column;
171 |  
172 | }
173 | 
174 | section > div:last-of-type > form > div{
175 | 
176 |     height: 70px;
177 |     display: flex;
178 |     align-items: center;
179 |     justify-content: space-between;
180 |     margin-bottom: 4px;
181 | }
182 | 
183 | form > div.name,
184 | form > div.email,
185 | form > div.birth,
186 | form > div.city,
187 | form > div.country{
188 | 
189 |     flex-direction: row-reverse;
190 | }
191 | 
192 | 
193 | button{
194 |     cursor:pointer;
195 |     transition: .5s;
196 | }
197 | 
198 | button:hover{
199 |     opacity: .85;
200 | }
201 | 
202 | 
203 | input[type="radio"]{
204 |     display: none;
205 | 
206 | }
207 | 
208 | 
209 | section > div:last-of-type > form > div > .male-female{
210 | 
211 |     width: 70%;
212 |     display: flex;
213 | }
214 | 
215 | section > div:last-of-type > form > div > .male-female label{
216 | 
217 |     color: #fff;
218 |     font-size: 1.5rem;
219 |     width: 25px;
220 |     height: 25px;
221 |     margin: 0 10px 0 0;
222 |     display: flex;
223 |     justify-content: center;
224 |     align-items: center;
225 |     background: var(--checkobx-bg);
226 |     border-radius: 50%;
227 |     cursor: pointer;
228 | }
229 | 
230 | section > div:last-of-type > form > div > .male-female > span{
231 |     display: flex;
232 |     align-items: center;
233 | }
234 | 
235 | 
236 | section > div:last-of-type > form > div > .male-female > span > span{
237 |     color:var(--input-header);
238 |     margin-right:20px;
239 |     font-size: .9rem;
240 | }
241 | 
242 | section > div:last-of-type > form > div > .male-female input[type="radio"]:checked ~ label{
243 | 
244 |     color: #fff;
245 |     background: var(--primary);
246 | }
247 | 
248 | 
249 | section > div:last-of-type > form > div > .male-female label i{
250 | 
251 |     color: #fff;
252 |     font-size: 1rem;
253 |  
254 | }
255 | 
256 | 
257 | section > div:last-of-type > form > div  label{
258 | 
259 |     color: #6E6B7C;
260 |     font-family: Arial, Helvetica, sans-serif;
261 |     font-weight: 800;
262 |     font-size: .8rem;
263 | 
264 | 
265 | }
266 | 
267 | div.subscription-radios{
268 | 
269 |     display: flex;
270 |     width: 70%;
271 |     justify-content: center;
272 | }
273 | 
274 | div.subscription-radios span{
275 | 
276 |     margin: 0 30px;
277 | 
278 | }
279 | 
280 | div.subscription-radios label{
281 | 
282 |     cursor: pointer;
283 | 
284 | }
285 | 
286 | 
287 | section > div:last-of-type > form > div.subscription  input[type="radio"]:checked + label{
288 | 
289 |     /* color: #fff; */
290 |     color: var(--primary);
291 | }
292 | 
293 | 
294 | section > div:last-of-type > form > div > input[type="text"]{
295 | 
296 |     width: 70%;
297 |     height: 80%;
298 |     background: var(--input-bg);
299 |     padding: 0 15px;
300 |     color: var(--header-form);
301 |     font-size: 1rem;
302 | }
303 | 
304 | section > div:last-of-type > form > div > input[type="text"]:focus ~ label{
305 | 
306 |     color:var(--primary);
307 | }
308 | 
309 | 
310 | section > div:last-of-type > form > #buttons{
311 | 
312 |     align-self: flex-end;
313 |     width: 70%;
314 |     display: grid;
315 |     grid-template-columns: repeat(2,1fr);
316 |     column-gap: 8px;
317 |     margin-top: 20px;
318 | }
319 | 
320 | 
321 | section > div:last-of-type > form > #buttons button{
322 | 
323 |     background: red;
324 |     align-self: flex-end;
325 |     width: 100%;
326 |     border-radius: 5px;
327 |     color: #fff;
328 |     font-size: .9rem;
329 |     text-transform: uppercase;
330 |     height: 50px;
331 | }
332 | 
333 | section > div:last-of-type > form > #buttons button:first-of-type{
334 | 
335 |     background: var(--btn-cancel);
336 | }
337 | 
338 | section > div:last-of-type > form > #buttons button:last-of-type{
339 | 
340 |     background: var(--primary);
341 | }


--------------------------------------------------------------------------------
/Mario Linkedin/font/PoetsenOne-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/font/PoetsenOne-Regular.ttf


--------------------------------------------------------------------------------
/Mario Linkedin/img/Yoshi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/Yoshi.png


--------------------------------------------------------------------------------
/Mario Linkedin/img/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/banner.jpg


--------------------------------------------------------------------------------
/Mario Linkedin/img/browser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/browser.png


--------------------------------------------------------------------------------
/Mario Linkedin/img/donkeykong.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/donkeykong.png


--------------------------------------------------------------------------------
/Mario Linkedin/img/kamek.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/kamek.png


--------------------------------------------------------------------------------
/Mario Linkedin/img/linkedin.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <g xmlns="http://www.w3.org/2000/svg">
 4 | 	<rect y="160" style="" width="114.496" height="352" fill="#1879fd" data-original="#1976d2" class=""/>
 5 | 	<path style="" d="M426.368,164.128c-1.216-0.384-2.368-0.8-3.648-1.152c-1.536-0.352-3.072-0.64-4.64-0.896   c-6.08-1.216-12.736-2.08-20.544-2.08l0,0l0,0c-66.752,0-109.088,48.544-123.04,67.296V160H160v352h114.496V320   c0,0,86.528-120.512,123.04-32c0,79.008,0,224,0,224H512V274.464C512,221.28,475.552,176.96,426.368,164.128z" fill="#1879fd" data-original="#1976d2" class=""/>
 6 | 	<circle style="" cx="56" cy="56" r="56" fill="#1879fd" data-original="#1976d2" class=""/>
 7 | </g>
 8 | <g xmlns="http://www.w3.org/2000/svg">
 9 | </g>
10 | <g xmlns="http://www.w3.org/2000/svg">
11 | </g>
12 | <g xmlns="http://www.w3.org/2000/svg">
13 | </g>
14 | <g xmlns="http://www.w3.org/2000/svg">
15 | </g>
16 | <g xmlns="http://www.w3.org/2000/svg">
17 | </g>
18 | <g xmlns="http://www.w3.org/2000/svg">
19 | </g>
20 | <g xmlns="http://www.w3.org/2000/svg">
21 | </g>
22 | <g xmlns="http://www.w3.org/2000/svg">
23 | </g>
24 | <g xmlns="http://www.w3.org/2000/svg">
25 | </g>
26 | <g xmlns="http://www.w3.org/2000/svg">
27 | </g>
28 | <g xmlns="http://www.w3.org/2000/svg">
29 | </g>
30 | <g xmlns="http://www.w3.org/2000/svg">
31 | </g>
32 | <g xmlns="http://www.w3.org/2000/svg">
33 | </g>
34 | <g xmlns="http://www.w3.org/2000/svg">
35 | </g>
36 | <g xmlns="http://www.w3.org/2000/svg">
37 | </g>
38 | </g></svg>
39 | 


--------------------------------------------------------------------------------
/Mario Linkedin/img/luigi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/luigi.png


--------------------------------------------------------------------------------
/Mario Linkedin/img/mario.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/mario.jpg


--------------------------------------------------------------------------------
/Mario Linkedin/img/mariohandsup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/mariohandsup.png


--------------------------------------------------------------------------------
/Mario Linkedin/img/mariostar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/mariostar.png


--------------------------------------------------------------------------------
/Mario Linkedin/img/peach.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/peach.png


--------------------------------------------------------------------------------
/Mario Linkedin/img/toad.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/toad.jpg


--------------------------------------------------------------------------------
/Mario Linkedin/img/wario.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/wario.jpg


--------------------------------------------------------------------------------
/Mario Linkedin/img/zelda.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Mario Linkedin/img/zelda.png


--------------------------------------------------------------------------------
/PlayGame Store/icons/crown.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 74 74" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path xmlns="http://www.w3.org/2000/svg" d="m49.376 39.114a.985.985 0 0 1 -.206-.021 1 1 0 0 1 -.67-.493l-10.2-18.31a1 1 0 1 1 1.746-.974l9.644 17.308 13.419-10.136a1 1 0 1 1 1.205 1.6l-14.335 10.824a1 1 0 0 1 -.603.202z" fill="#806ed3" data-original="#000000" style=""/><path xmlns="http://www.w3.org/2000/svg" d="m26.172 39.754a1 1 0 0 1 -.592-.194l-15.798-11.592a1 1 0 1 1 1.184-1.612l14.826 10.878 8.472-17.664a1 1 0 1 1 1.8.865l-8.993 18.75a1 1 0 0 1 -.9.567z" fill="#806ed3" data-original="#000000" style=""/><path xmlns="http://www.w3.org/2000/svg" d="m59.287 55.6h-44.421a1 1 0 0 1 -.966-.739l-6.958-25.747a1 1 0 0 1 1.932-.521l6.758 25.007h42.889l6.729-24.988a1 1 0 0 1 1.932.521l-6.929 25.727a1 1 0 0 1 -.966.74z" fill="#806ed3" data-original="#000000" style=""/><path xmlns="http://www.w3.org/2000/svg" d="m59.287 62.629h-44.5a2.339 2.339 0 0 1 -2.267-2.922l1.373-5.346a1 1 0 0 1 .969-.751h44.349a1 1 0 0 1 .969.751l1.374 5.347a2.341 2.341 0 0 1 -2.267 2.922zm-43.648-7.02-1.18 4.6a.34.34 0 0 0 .329.425h44.5a.34.34 0 0 0 .329-.424l-1.181-4.6z" fill="#806ed3" data-original="#000000" style=""/><path xmlns="http://www.w3.org/2000/svg" d="m37 21.44a5.034 5.034 0 1 1 4.886-3.84 5.008 5.008 0 0 1 -4.886 3.84zm0-8.069a3.04 3.04 0 1 0 .727.088 3.074 3.074 0 0 0 -.737-.088z" fill="#806ed3" data-original="#000000" style=""/><path xmlns="http://www.w3.org/2000/svg" d="m66.965 29.948a5.034 5.034 0 1 1 4.891-3.838 5.014 5.014 0 0 1 -4.891 3.838zm0-8.07a3.04 3.04 0 1 0 .727.088 3.074 3.074 0 0 0 -.732-.088z" fill="#806ed3" data-original="#000000" style=""/><path xmlns="http://www.w3.org/2000/svg" d="m7.035 29.948a5.038 5.038 0 1 1 1.2-.145 5.043 5.043 0 0 1 -1.2.145zm0-8.07a3.074 3.074 0 0 0 -.727.088 3.019 3.019 0 1 0 .727-.088z" fill="#806ed3" data-original="#000000" style=""/></g></svg>
3 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/filter.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g xmlns="http://www.w3.org/2000/svg"><path d="m90.5 0h-30v362h-30v90h30v60h30v-60h30v-90h-30zm0 422h-30v-30h30z" fill="#ffffff" data-original="#000000" style="" class=""/><path d="m481.5 362h-30v-362h-30v362h-30v90h30v60h30v-60h30zm-30 60h-30v-30h30z" fill="#ffffff" data-original="#000000" style="" class=""/><path d="m331.5 0h-30v222h-30v90h30v200h30v-200h30v-90h-30zm0 282h-30v-30h30z" fill="#ffffff" data-original="#000000" style="" class=""/><path d="m210.5 0h-30v53.652h-30v90h30v368.348h30v-368.348h30v-90h-30zm0 113.652h-30v-30h30z" fill="#ffffff" data-original="#000000" style="" class=""/></g></g></svg>
3 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/loupe.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512.005 512.005" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <g xmlns="http://www.w3.org/2000/svg">
 4 | 	<g>
 5 | 		<path d="M505.749,475.587l-145.6-145.6c28.203-34.837,45.184-79.104,45.184-127.317c0-111.744-90.923-202.667-202.667-202.667    S0,90.925,0,202.669s90.923,202.667,202.667,202.667c48.213,0,92.48-16.981,127.317-45.184l145.6,145.6    c4.16,4.16,9.621,6.251,15.083,6.251s10.923-2.091,15.083-6.251C514.091,497.411,514.091,483.928,505.749,475.587z     M202.667,362.669c-88.235,0-160-71.765-160-160s71.765-160,160-160s160,71.765,160,160S290.901,362.669,202.667,362.669z" fill="#ffffff" data-original="#000000" style=""/>
 6 | 	</g>
 7 | </g>
 8 | <g xmlns="http://www.w3.org/2000/svg">
 9 | </g>
10 | <g xmlns="http://www.w3.org/2000/svg">
11 | </g>
12 | <g xmlns="http://www.w3.org/2000/svg">
13 | </g>
14 | <g xmlns="http://www.w3.org/2000/svg">
15 | </g>
16 | <g xmlns="http://www.w3.org/2000/svg">
17 | </g>
18 | <g xmlns="http://www.w3.org/2000/svg">
19 | </g>
20 | <g xmlns="http://www.w3.org/2000/svg">
21 | </g>
22 | <g xmlns="http://www.w3.org/2000/svg">
23 | </g>
24 | <g xmlns="http://www.w3.org/2000/svg">
25 | </g>
26 | <g xmlns="http://www.w3.org/2000/svg">
27 | </g>
28 | <g xmlns="http://www.w3.org/2000/svg">
29 | </g>
30 | <g xmlns="http://www.w3.org/2000/svg">
31 | </g>
32 | <g xmlns="http://www.w3.org/2000/svg">
33 | </g>
34 | <g xmlns="http://www.w3.org/2000/svg">
35 | </g>
36 | <g xmlns="http://www.w3.org/2000/svg">
37 | </g>
38 | </g></svg>
39 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/menu.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <g xmlns="http://www.w3.org/2000/svg">
 4 | 	<g>
 5 | 		<path d="M176.792,0H59.208C26.561,0,0,26.561,0,59.208v117.584C0,209.439,26.561,236,59.208,236h117.584    C209.439,236,236,209.439,236,176.792V59.208C236,26.561,209.439,0,176.792,0z M196,176.792c0,10.591-8.617,19.208-19.208,19.208    H59.208C48.617,196,40,187.383,40,176.792V59.208C40,48.617,48.617,40,59.208,40h117.584C187.383,40,196,48.617,196,59.208    V176.792z" fill="#806ed3" data-original="#000000" style="" class=""/>
 6 | 	</g>
 7 | </g>
 8 | <g xmlns="http://www.w3.org/2000/svg">
 9 | 	<g>
10 | 		<path d="M452,0H336c-33.084,0-60,26.916-60,60v116c0,33.084,26.916,60,60,60h116c33.084,0,60-26.916,60-60V60    C512,26.916,485.084,0,452,0z M472,176c0,11.028-8.972,20-20,20H336c-11.028,0-20-8.972-20-20V60c0-11.028,8.972-20,20-20h116    c11.028,0,20,8.972,20,20V176z" fill="#806ed3" data-original="#000000" style="" class=""/>
11 | 	</g>
12 | </g>
13 | <g xmlns="http://www.w3.org/2000/svg">
14 | 	<g>
15 | 		<path d="M176.792,276H59.208C26.561,276,0,302.561,0,335.208v117.584C0,485.439,26.561,512,59.208,512h117.584    C209.439,512,236,485.439,236,452.792V335.208C236,302.561,209.439,276,176.792,276z M196,452.792    c0,10.591-8.617,19.208-19.208,19.208H59.208C48.617,472,40,463.383,40,452.792V335.208C40,324.617,48.617,316,59.208,316h117.584    c10.591,0,19.208,8.617,19.208,19.208V452.792z" fill="#806ed3" data-original="#000000" style="" class=""/>
16 | 	</g>
17 | </g>
18 | <g xmlns="http://www.w3.org/2000/svg">
19 | 	<g>
20 | 		<path d="M452,276H336c-33.084,0-60,26.916-60,60v116c0,33.084,26.916,60,60,60h116c33.084,0,60-26.916,60-60V336    C512,302.916,485.084,276,452,276z M472,452c0,11.028-8.972,20-20,20H336c-11.028,0-20-8.972-20-20V336c0-11.028,8.972-20,20-20    h116c11.028,0,20,8.972,20,20V452z" fill="#806ed3" data-original="#000000" style="" class=""/>
21 | 	</g>
22 | </g>
23 | <g xmlns="http://www.w3.org/2000/svg">
24 | </g>
25 | <g xmlns="http://www.w3.org/2000/svg">
26 | </g>
27 | <g xmlns="http://www.w3.org/2000/svg">
28 | </g>
29 | <g xmlns="http://www.w3.org/2000/svg">
30 | </g>
31 | <g xmlns="http://www.w3.org/2000/svg">
32 | </g>
33 | <g xmlns="http://www.w3.org/2000/svg">
34 | </g>
35 | <g xmlns="http://www.w3.org/2000/svg">
36 | </g>
37 | <g xmlns="http://www.w3.org/2000/svg">
38 | </g>
39 | <g xmlns="http://www.w3.org/2000/svg">
40 | </g>
41 | <g xmlns="http://www.w3.org/2000/svg">
42 | </g>
43 | <g xmlns="http://www.w3.org/2000/svg">
44 | </g>
45 | <g xmlns="http://www.w3.org/2000/svg">
46 | </g>
47 | <g xmlns="http://www.w3.org/2000/svg">
48 | </g>
49 | <g xmlns="http://www.w3.org/2000/svg">
50 | </g>
51 | <g xmlns="http://www.w3.org/2000/svg">
52 | </g>
53 | </g></svg>
54 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/on-off-button.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 24.303 24.303" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <g xmlns="http://www.w3.org/2000/svg">
 4 | 	<path style="" d="M10.269,11.298V1.883C10.269,0.844,11.113,0,12.152,0s1.883,0.844,1.883,1.883v9.415   c0,1.039-0.844,1.883-1.883,1.883S10.269,12.337,10.269,11.298z M19.616,2.761c-0.61-0.483-1.5-0.377-1.983,0.234   c-0.483,0.612-0.378,1.5,0.234,1.984c2.24,1.767,3.524,4.413,3.524,7.261c0,5.094-4.145,9.239-9.238,9.239   c-5.094,0-9.239-4.145-9.239-9.239c0-2.847,1.283-5.492,3.521-7.258c0.612-0.483,0.717-1.371,0.234-1.984   c-0.483-0.612-1.37-0.716-1.984-0.234C1.764,5.069,0.089,8.523,0.089,12.24c0,6.652,5.412,12.063,12.063,12.063   s12.063-5.412,12.063-12.063C24.215,8.521,22.538,5.067,19.616,2.761z" fill="#f58081" data-original="#030104" class=""/>
 5 | </g>
 6 | <g xmlns="http://www.w3.org/2000/svg">
 7 | </g>
 8 | <g xmlns="http://www.w3.org/2000/svg">
 9 | </g>
10 | <g xmlns="http://www.w3.org/2000/svg">
11 | </g>
12 | <g xmlns="http://www.w3.org/2000/svg">
13 | </g>
14 | <g xmlns="http://www.w3.org/2000/svg">
15 | </g>
16 | <g xmlns="http://www.w3.org/2000/svg">
17 | </g>
18 | <g xmlns="http://www.w3.org/2000/svg">
19 | </g>
20 | <g xmlns="http://www.w3.org/2000/svg">
21 | </g>
22 | <g xmlns="http://www.w3.org/2000/svg">
23 | </g>
24 | <g xmlns="http://www.w3.org/2000/svg">
25 | </g>
26 | <g xmlns="http://www.w3.org/2000/svg">
27 | </g>
28 | <g xmlns="http://www.w3.org/2000/svg">
29 | </g>
30 | <g xmlns="http://www.w3.org/2000/svg">
31 | </g>
32 | <g xmlns="http://www.w3.org/2000/svg">
33 | </g>
34 | <g xmlns="http://www.w3.org/2000/svg">
35 | </g>
36 | </g></svg>
37 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/right-arrow.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <g xmlns="http://www.w3.org/2000/svg">
 4 | 	<g>
 5 | 		<path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12    c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028    c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265    c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z" fill="#ffffff" data-original="#000000" style=""/>
 6 | 	</g>
 7 | </g>
 8 | <g xmlns="http://www.w3.org/2000/svg">
 9 | </g>
10 | <g xmlns="http://www.w3.org/2000/svg">
11 | </g>
12 | <g xmlns="http://www.w3.org/2000/svg">
13 | </g>
14 | <g xmlns="http://www.w3.org/2000/svg">
15 | </g>
16 | <g xmlns="http://www.w3.org/2000/svg">
17 | </g>
18 | <g xmlns="http://www.w3.org/2000/svg">
19 | </g>
20 | <g xmlns="http://www.w3.org/2000/svg">
21 | </g>
22 | <g xmlns="http://www.w3.org/2000/svg">
23 | </g>
24 | <g xmlns="http://www.w3.org/2000/svg">
25 | </g>
26 | <g xmlns="http://www.w3.org/2000/svg">
27 | </g>
28 | <g xmlns="http://www.w3.org/2000/svg">
29 | </g>
30 | <g xmlns="http://www.w3.org/2000/svg">
31 | </g>
32 | <g xmlns="http://www.w3.org/2000/svg">
33 | </g>
34 | <g xmlns="http://www.w3.org/2000/svg">
35 | </g>
36 | <g xmlns="http://www.w3.org/2000/svg">
37 | </g>
38 | </g></svg>
39 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/settings.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path xmlns="http://www.w3.org/2000/svg" d="m272.066 512h-32.133c-25.989 0-47.134-21.144-47.134-47.133v-10.871c-11.049-3.53-21.784-7.986-32.097-13.323l-7.704 7.704c-18.659 18.682-48.548 18.134-66.665-.007l-22.711-22.71c-18.149-18.129-18.671-48.008.006-66.665l7.698-7.698c-5.337-10.313-9.792-21.046-13.323-32.097h-10.87c-25.988 0-47.133-21.144-47.133-47.133v-32.134c0-25.989 21.145-47.133 47.134-47.133h10.87c3.531-11.05 7.986-21.784 13.323-32.097l-7.704-7.703c-18.666-18.646-18.151-48.528.006-66.665l22.713-22.712c18.159-18.184 48.041-18.638 66.664.006l7.697 7.697c10.313-5.336 21.048-9.792 32.097-13.323v-10.87c0-25.989 21.144-47.133 47.134-47.133h32.133c25.989 0 47.133 21.144 47.133 47.133v10.871c11.049 3.53 21.784 7.986 32.097 13.323l7.704-7.704c18.659-18.682 48.548-18.134 66.665.007l22.711 22.71c18.149 18.129 18.671 48.008-.006 66.665l-7.698 7.698c5.337 10.313 9.792 21.046 13.323 32.097h10.87c25.989 0 47.134 21.144 47.134 47.133v32.134c0 25.989-21.145 47.133-47.134 47.133h-10.87c-3.531 11.05-7.986 21.784-13.323 32.097l7.704 7.704c18.666 18.646 18.151 48.528-.006 66.665l-22.713 22.712c-18.159 18.184-48.041 18.638-66.664-.006l-7.697-7.697c-10.313 5.336-21.048 9.792-32.097 13.323v10.871c0 25.987-21.144 47.131-47.134 47.131zm-106.349-102.83c14.327 8.473 29.747 14.874 45.831 19.025 6.624 1.709 11.252 7.683 11.252 14.524v22.148c0 9.447 7.687 17.133 17.134 17.133h32.133c9.447 0 17.134-7.686 17.134-17.133v-22.148c0-6.841 4.628-12.815 11.252-14.524 16.084-4.151 31.504-10.552 45.831-19.025 5.895-3.486 13.4-2.538 18.243 2.305l15.688 15.689c6.764 6.772 17.626 6.615 24.224.007l22.727-22.726c6.582-6.574 6.802-17.438.006-24.225l-15.695-15.695c-4.842-4.842-5.79-12.348-2.305-18.242 8.473-14.326 14.873-29.746 19.024-45.831 1.71-6.624 7.684-11.251 14.524-11.251h22.147c9.447 0 17.134-7.686 17.134-17.133v-32.134c0-9.447-7.687-17.133-17.134-17.133h-22.147c-6.841 0-12.814-4.628-14.524-11.251-4.151-16.085-10.552-31.505-19.024-45.831-3.485-5.894-2.537-13.4 2.305-18.242l15.689-15.689c6.782-6.774 6.605-17.634.006-24.225l-22.725-22.725c-6.587-6.596-17.451-6.789-24.225-.006l-15.694 15.695c-4.842 4.843-12.35 5.791-18.243 2.305-14.327-8.473-29.747-14.874-45.831-19.025-6.624-1.709-11.252-7.683-11.252-14.524v-22.15c0-9.447-7.687-17.133-17.134-17.133h-32.133c-9.447 0-17.134 7.686-17.134 17.133v22.148c0 6.841-4.628 12.815-11.252 14.524-16.084 4.151-31.504 10.552-45.831 19.025-5.896 3.485-13.401 2.537-18.243-2.305l-15.688-15.689c-6.764-6.772-17.627-6.615-24.224-.007l-22.727 22.726c-6.582 6.574-6.802 17.437-.006 24.225l15.695 15.695c4.842 4.842 5.79 12.348 2.305 18.242-8.473 14.326-14.873 29.746-19.024 45.831-1.71 6.624-7.684 11.251-14.524 11.251h-22.148c-9.447.001-17.134 7.687-17.134 17.134v32.134c0 9.447 7.687 17.133 17.134 17.133h22.147c6.841 0 12.814 4.628 14.524 11.251 4.151 16.085 10.552 31.505 19.024 45.831 3.485 5.894 2.537 13.4-2.305 18.242l-15.689 15.689c-6.782 6.774-6.605 17.634-.006 24.225l22.725 22.725c6.587 6.596 17.451 6.789 24.225.006l15.694-15.695c3.568-3.567 10.991-6.594 18.244-2.304z" fill="#806ed3" data-original="#000000" style="" class=""/><path xmlns="http://www.w3.org/2000/svg" d="m256 367.4c-61.427 0-111.4-49.974-111.4-111.4s49.973-111.4 111.4-111.4 111.4 49.974 111.4 111.4-49.973 111.4-111.4 111.4zm0-192.8c-44.885 0-81.4 36.516-81.4 81.4s36.516 81.4 81.4 81.4 81.4-36.516 81.4-81.4-36.515-81.4-81.4-81.4z" fill="#806ed3" data-original="#000000" style="" class=""/></g></svg>
3 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/shopping-bag.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 398.8 398.8" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <g xmlns="http://www.w3.org/2000/svg">
 4 | 	<g>
 5 | 		<path d="M328.6,125.6c-0.8-9.6-4.8-18.4-11.2-24.8c-6.4-6.4-14.8-10.4-24.8-10.4h-21.2V72c0-20-8-38-21.2-50.8    C237,8,219,0,199.4,0c-20,0-38,8-50.8,21.2C135.4,34,127.4,52,127.4,72v18.4h-21.2c-10,0-18.4,4-24.8,10.4    C75,107.2,71,116,70.2,125.6L49,362.4c0,1.2,0,2.4,0,2.8c0,8.8,3.6,17.2,10,23.2c6,5.6,14,9.6,22.4,10.4h0.4c1.2,0,2.4,0,3.2,0    h228.8c0.8,0,2,0,3.2,0c8.8-0.8,16.8-4.8,22.8-10.4c6.4-6,10-14.4,10-23.6c0-0.8,0-1.6,0-2.8L328.6,125.6z M149.4,72    c0-14,5.6-26.4,14.8-35.6c9.2-9.2,21.6-14.8,35.6-14.8s26.4,5.6,35.6,14.8S250.2,58,250.2,72v18.4H149.4V72z M327.4,365.2    c0,3.2-1.2,6-3.6,8c-2.4,2.4-6,4-9.2,4.4c0,0-0.4,0-1.2,0H85c-0.8,0-1.2,0-1.2,0h-0.4c-3.6-0.4-6.8-2-9.2-4.4    c-2.4-2-3.6-4.8-3.6-8V364l21.2-236.4c0.4-4.4,2.4-8.4,5.2-11.2c2.4-2.4,5.6-4,9.2-4h21.2v48.8c0,6,4.8,10.8,10.8,10.8    s10.8-4.8,10.8-10.8v-48.8h100v48.8c0,6,4.8,10.8,10.8,10.8s10.8-4.8,10.8-10.8v-48.8h21.2c3.6,0,6.8,1.6,9.2,4    c2.8,2.8,4.8,6.8,5.2,11.2l21.2,236.8V365.2z" fill="#806ed3" data-original="#000000" style="" class=""/>
 6 | 	</g>
 7 | </g>
 8 | <g xmlns="http://www.w3.org/2000/svg">
 9 | </g>
10 | <g xmlns="http://www.w3.org/2000/svg">
11 | </g>
12 | <g xmlns="http://www.w3.org/2000/svg">
13 | </g>
14 | <g xmlns="http://www.w3.org/2000/svg">
15 | </g>
16 | <g xmlns="http://www.w3.org/2000/svg">
17 | </g>
18 | <g xmlns="http://www.w3.org/2000/svg">
19 | </g>
20 | <g xmlns="http://www.w3.org/2000/svg">
21 | </g>
22 | <g xmlns="http://www.w3.org/2000/svg">
23 | </g>
24 | <g xmlns="http://www.w3.org/2000/svg">
25 | </g>
26 | <g xmlns="http://www.w3.org/2000/svg">
27 | </g>
28 | <g xmlns="http://www.w3.org/2000/svg">
29 | </g>
30 | <g xmlns="http://www.w3.org/2000/svg">
31 | </g>
32 | <g xmlns="http://www.w3.org/2000/svg">
33 | </g>
34 | <g xmlns="http://www.w3.org/2000/svg">
35 | </g>
36 | <g xmlns="http://www.w3.org/2000/svg">
37 | </g>
38 | </g></svg>
39 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/trophy.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512.00099 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
3 | <g xmlns="http://www.w3.org/2000/svg" id="surface1">
4 | <path d="M 497 36.953125 L 431.296875 36.953125 C 431.535156 29.675781 431.667969 22.355469 431.667969 15 C 431.667969 6.714844 424.949219 0 416.667969 0 L 95.332031 0 C 87.050781 0 80.332031 6.714844 80.332031 15 C 80.332031 22.355469 80.464844 29.675781 80.703125 36.953125 L 15 36.953125 C 6.714844 36.953125 0 43.667969 0 51.953125 C 0 119.164062 17.566406 182.574219 49.460938 230.507812 C 80.988281 277.894531 122.984375 305.074219 168.351562 307.71875 C 178.636719 318.910156 189.507812 328.035156 200.832031 334.996094 L 200.832031 401.664062 L 175.667969 401.664062 C 145.246094 401.664062 120.5 426.414062 120.5 456.832031 L 120.5 481.996094 L 119.433594 481.996094 C 111.148438 481.996094 104.433594 488.714844 104.433594 496.996094 C 104.433594 505.28125 111.148438 511.996094 119.433594 511.996094 L 392.566406 511.996094 C 400.851562 511.996094 407.566406 505.28125 407.566406 496.996094 C 407.566406 488.714844 400.851562 481.996094 392.566406 481.996094 L 391.5 481.996094 L 391.5 456.832031 C 391.5 426.414062 366.753906 401.664062 336.332031 401.664062 L 311.167969 401.664062 L 311.167969 334.996094 C 322.492188 328.039062 333.367188 318.910156 343.652344 307.71875 C 389.015625 305.074219 431.011719 277.894531 462.542969 230.507812 C 494.4375 182.574219 512 119.164062 512 51.953125 C 512 43.667969 505.285156 36.953125 497 36.953125 Z M 74.4375 213.890625 C 48.128906 174.355469 32.671875 122.644531 30.316406 66.953125 L 82.378906 66.953125 C 87.789062 135.414062 103.859375 198.695312 128.976562 248.925781 C 132.976562 256.925781 137.160156 264.484375 141.5 271.601562 C 116.550781 262.179688 93.460938 242.484375 74.4375 213.890625 Z M 361.5 456.832031 L 361.5 482 L 150.5 482 L 150.5 456.832031 C 150.5 442.957031 161.789062 431.664062 175.667969 431.664062 L 336.332031 431.664062 C 350.210938 431.664062 361.5 442.957031 361.5 456.832031 Z M 281.167969 401.664062 L 230.832031 401.664062 L 230.832031 348.03125 C 239.078125 350.203125 247.480469 351.332031 256 351.332031 C 264.519531 351.332031 272.921875 350.203125 281.167969 348.03125 Z M 290.457031 312.34375 C 289.78125 312.621094 289.132812 312.957031 288.511719 313.328125 C 277.910156 318.601562 267.015625 321.332031 256 321.332031 C 244.988281 321.332031 234.097656 318.601562 223.5 313.335938 C 222.871094 312.957031 222.21875 312.621094 221.535156 312.335938 C 209.773438 306.117188 198.394531 296.726562 187.632812 284.386719 C 187.066406 283.578125 186.429688 282.832031 185.722656 282.152344 C 175.039062 269.46875 164.988281 253.867188 155.808594 235.507812 C 128.242188 180.378906 112.320312 107.890625 110.507812 30 L 401.492188 30 C 399.675781 107.890625 383.753906 180.382812 356.191406 235.507812 C 347.011719 253.867188 336.960938 269.46875 326.28125 282.152344 C 325.570312 282.832031 324.925781 283.582031 324.363281 284.390625 C 313.601562 296.734375 302.21875 306.121094 290.457031 312.34375 Z M 437.5625 213.890625 C 418.539062 242.484375 395.449219 262.179688 370.5 271.601562 C 374.839844 264.484375 379.023438 256.925781 383.023438 248.925781 C 408.140625 198.695312 424.207031 135.414062 429.621094 66.953125 L 481.683594 66.953125 C 479.328125 122.644531 463.871094 174.355469 437.5625 213.890625 Z M 437.5625 213.890625 " style="" fill="#806ed3" data-original="#000000" class=""/>
5 | </g>
6 | </g></svg>
7 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/user.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512.001" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><path xmlns="http://www.w3.org/2000/svg" d="m210.351562 246.632812c33.882813 0 63.21875-12.152343 87.195313-36.128906 23.96875-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.128906 87.195312 23.980469 23.96875 53.316406 36.125 87.191406 36.125zm-65.972656-189.292968c18.394532-18.394532 39.972656-27.335938 65.972656-27.335938 25.996094 0 47.578126 8.941406 65.976563 27.335938 18.394531 18.398437 27.339844 39.980468 27.339844 65.972656 0 26-8.945313 47.578125-27.339844 65.976562-18.398437 18.398438-39.980469 27.339844-65.976563 27.339844-25.992187 0-47.570312-8.945312-65.972656-27.339844-18.398437-18.394531-27.34375-39.976562-27.34375-65.976562 0-25.992188 8.945313-47.574219 27.34375-65.972656zm0 0" fill="#806ed3" data-original="#000000" style=""/><path xmlns="http://www.w3.org/2000/svg" d="m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.3125-10.339844-7.808594-20.550781-13.375-30.335938-5.769532-10.15625-12.550782-19-20.160157-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.042969 5.339844-10.96875 0-22.085937-1.796876-33.042968-5.339844-11.210938-3.621094-20.300782-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.753906-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.609375 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.0625 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.777344-1.023438 19.953125-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.4375 23.730469 65.066406 23.730469h246.53125c26.621094 0 48.511719-7.984375 65.0625-23.730469 16.757813-15.945312 25.253906-37.589843 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm-44.90625 72.828125c-10.933594 10.40625-25.449218 15.464844-44.378906 15.464844h-246.527344c-18.933594 0-33.449218-5.058594-44.378906-15.460938-10.722656-10.207031-15.933594-24.140625-15.933594-42.585937 0-9.59375.316406-19.066407.949219-28.160157.617187-8.921874 1.878906-18.722656 3.75-29.136718 1.847656-10.285156 4.199219-19.9375 6.996094-28.675782 2.683593-8.378906 6.34375-16.675781 10.882812-24.667968 4.332031-7.617188 9.316407-14.152344 14.816407-19.417969 5.144531-4.925781 11.628906-8.957031 19.269531-11.980469 7.066406-2.796875 15.007812-4.328125 23.628906-4.558594 1.050781.558594 2.921875 1.625 5.953125 3.601563 6.167969 4.019531 13.277344 8.605469 21.136719 13.625 8.859375 5.648437 20.273437 10.75 33.910156 15.152344 13.941406 4.507812 28.160156 6.796875 42.273437 6.796875 14.113282 0 28.335938-2.289063 42.269532-6.792969 13.648437-4.410156 25.058594-9.507813 33.929687-15.164063 8.042969-5.140624 14.953125-9.59375 21.121094-13.617187 3.03125-1.972656 4.902344-3.042969 5.953125-3.601563 8.625.230469 16.566406 1.761719 23.636719 4.558594 7.636719 3.023438 14.121093 7.058594 19.265625 11.980469 5.5 5.261719 10.484375 11.796875 14.816406 19.421875 4.542969 7.988281 8.207031 16.289062 10.886719 24.660156 2.800781 8.75 5.15625 18.398438 7 28.675782 1.867187 10.433593 3.132812 20.238281 3.75 29.144531v.007812c.636719 9.058594.957031 18.527344.960937 28.148438-.003906 18.449219-5.214844 32.378906-15.9375 42.582031zm0 0" fill="#806ed3" data-original="#000000" style=""/></g></svg>
3 | 


--------------------------------------------------------------------------------
/PlayGame Store/icons/windows-logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 22.884 22.884" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <g xmlns="http://www.w3.org/2000/svg">
 4 | 	<g>
 5 | 		<path d="M13.045,1.997l-1.969,7.872C8.68,8.867,5.479,8.429,2.642,9.307c0.574-2.522,1.97-7.31,1.97-7.31    C6.698,0.289,10.756,0.902,13.045,1.997z" fill="#8e96a1" data-original="#000000" style="" class=""/>
 6 | 		<path d="M14.184,3.145c2.147,1.257,5.943,1.645,8.7,0.822l-2.251,7.589c-2.313,1.224-6.735,1.133-8.433-0.563L14.184,3.145z" fill="#8e96a1" data-original="#000000" style="" class=""/>
 7 | 		<path d="M10.398,11.513l-1.967,7.87C5.953,18.243,2.794,17.481,0,18.82c0,0,1.297-5.069,1.966-7.588    C4.131,9.889,8.444,10.286,10.398,11.513z" fill="#8e96a1" data-original="#000000" style="" class=""/>
 8 | 		<path d="M11.746,12.641c2.147,1.518,5.796,1.764,8.493,0.72l-2.247,7.592c-2.176,1.479-6.433,1.252-8.435-0.281L11.746,12.641z" fill="#8e96a1" data-original="#000000" style="" class=""/>
 9 | 	</g>
10 | </g>
11 | <g xmlns="http://www.w3.org/2000/svg">
12 | </g>
13 | <g xmlns="http://www.w3.org/2000/svg">
14 | </g>
15 | <g xmlns="http://www.w3.org/2000/svg">
16 | </g>
17 | <g xmlns="http://www.w3.org/2000/svg">
18 | </g>
19 | <g xmlns="http://www.w3.org/2000/svg">
20 | </g>
21 | <g xmlns="http://www.w3.org/2000/svg">
22 | </g>
23 | <g xmlns="http://www.w3.org/2000/svg">
24 | </g>
25 | <g xmlns="http://www.w3.org/2000/svg">
26 | </g>
27 | <g xmlns="http://www.w3.org/2000/svg">
28 | </g>
29 | <g xmlns="http://www.w3.org/2000/svg">
30 | </g>
31 | <g xmlns="http://www.w3.org/2000/svg">
32 | </g>
33 | <g xmlns="http://www.w3.org/2000/svg">
34 | </g>
35 | <g xmlns="http://www.w3.org/2000/svg">
36 | </g>
37 | <g xmlns="http://www.w3.org/2000/svg">
38 | </g>
39 | <g xmlns="http://www.w3.org/2000/svg">
40 | </g>
41 | </g></svg>
42 | 


--------------------------------------------------------------------------------
/PlayGame Store/images/Cyberpunk-2077.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/PlayGame Store/images/Cyberpunk-2077.jpg


--------------------------------------------------------------------------------
/PlayGame Store/images/GodHood-cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/PlayGame Store/images/GodHood-cover.jpg


--------------------------------------------------------------------------------
/PlayGame Store/images/civilization_vi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/PlayGame Store/images/civilization_vi.jpg


--------------------------------------------------------------------------------
/PlayGame Store/images/dead_by_deathlight.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/PlayGame Store/images/dead_by_deathlight.jpg


--------------------------------------------------------------------------------
/PlayGame Store/images/deathgarden.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/PlayGame Store/images/deathgarden.jpg


--------------------------------------------------------------------------------
/PlayGame Store/images/hollow_night.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/PlayGame Store/images/hollow_night.jpg


--------------------------------------------------------------------------------
/PlayGame Store/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/PlayGame Store/images/logo.png


--------------------------------------------------------------------------------
/PlayGame Store/images/pagan_online.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/PlayGame Store/images/pagan_online.jpg


--------------------------------------------------------------------------------
/PlayGame Store/images/playstation-logotype.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 106.726 106.726" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <g xmlns="http://www.w3.org/2000/svg">
 4 | 	<g>
 5 | 		<path style="" d="M11.703,67.563l-3.6,1.4c-5.4,2.3-8.2,4.7-8.1,6.8c0.3,3.1,3.8,5.4,10.2,7.1    c8.3,2.2,16.7,2.7,25.4,1.4v-8.7l0,0l-6.9,2.6c-7.2,2.5-10.9,0.4-10.9,0.4c-1.1-0.7-1.6-2.4,1.4-3.5l3.8-1.4l12.6-4.5v-10.1    l-3.2,1.1L11.703,67.563z" fill="#ffffff" data-original="#030104" class=""/>
 6 | 		<path style="" d="M64.303,32.463v25.9c5.4,2.6,10.2,2.8,13.8,0.1c3.7-2.6,5.7-7.1,5.7-13.9c0-7.1-1.4-12.5-4.5-16.1    c-2.8-3.8-7.8-7-15.2-9.5c-9.2-3-17-5.6-23.2-6.9v77.5l16.7,5.1v-64.4C57.503,26.363,64.303,26.663,64.303,32.463z" fill="#ffffff" data-original="#030104" class=""/>
 7 | 		<path style="" d="M106.703,72.463c-0.1-2.7-3.3-4.8-9-6.7c-6.4-2.1-11.9-3.1-17.9-2.9c-5.5,0.1-12.1,1.9-18,3.8v9.9    l16.2-5.7c0,0,4.9-1.8,9.1-0.7c3.2,0.8,3,2.6-0.2,3.7l-3.7,1.5l-21.4,7.7v10.1l10-3.6l24-8.5l2.8-1.3    C104.403,77.663,107.003,75.363,106.703,72.463z" fill="#ffffff" data-original="#030104" class=""/>
 8 | 	</g>
 9 | </g>
10 | <g xmlns="http://www.w3.org/2000/svg">
11 | </g>
12 | <g xmlns="http://www.w3.org/2000/svg">
13 | </g>
14 | <g xmlns="http://www.w3.org/2000/svg">
15 | </g>
16 | <g xmlns="http://www.w3.org/2000/svg">
17 | </g>
18 | <g xmlns="http://www.w3.org/2000/svg">
19 | </g>
20 | <g xmlns="http://www.w3.org/2000/svg">
21 | </g>
22 | <g xmlns="http://www.w3.org/2000/svg">
23 | </g>
24 | <g xmlns="http://www.w3.org/2000/svg">
25 | </g>
26 | <g xmlns="http://www.w3.org/2000/svg">
27 | </g>
28 | <g xmlns="http://www.w3.org/2000/svg">
29 | </g>
30 | <g xmlns="http://www.w3.org/2000/svg">
31 | </g>
32 | <g xmlns="http://www.w3.org/2000/svg">
33 | </g>
34 | <g xmlns="http://www.w3.org/2000/svg">
35 | </g>
36 | <g xmlns="http://www.w3.org/2000/svg">
37 | </g>
38 | <g xmlns="http://www.w3.org/2000/svg">
39 | </g>
40 | </g></svg>
41 | 


--------------------------------------------------------------------------------
/PlayGame Store/images/yoshi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/PlayGame Store/images/yoshi.jpg


--------------------------------------------------------------------------------
/Pricing-cards/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Pricing</title>
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 | 
12 |     <h1>Pricing</h1>
13 |     <p>
14 |         Sign-up in less than 30 seconds. Try out our 7 day risk free trial,
15 |         upgrade at any time, no questions, no hassie.
16 |     </p>
17 | 
18 |     <span>
19 |         <button>Monthly</button>
20 |         <button>Annually</button>
21 |     </span>
22 | 
23 |     <section>
24 |         <div class="card">
25 | 
26 |             <h5>Free</h5>
27 | 
28 |             <span>49</span>
29 | 
30 |             <ul>
31 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet   consectetur</li>
32 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet   consectetur</li>
33 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet  consectetur</li>
34 |             </ul>
35 | 
36 |             <button>Sign up today</button>
37 |         </div>
38 | 
39 |         <div class="card">
40 | 
41 |             <h5>Small Business</h5>
42 | 
43 |             <span>99</span>
44 | 
45 |             <ul>
46 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet   consectetur</li>
47 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet   consectetur</li>
48 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet  consectetur</li>
49 |             </ul>
50 | 
51 |             <button>Sign up today</button>
52 |         </div>
53 | 
54 |         <div class="card">
55 | 
56 |             <h5>Professional</h5>
57 | 
58 |             <span>219</span>
59 | 
60 |             <ul>
61 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet   consectetur</li>
62 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet   consectetur</li>
63 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet  consectetur</li>
64 |             </ul>
65 | 
66 |             <button>Sign up today</button>
67 |         </div>
68 | 
69 |         <div class="card">
70 | 
71 |             <h5>Enterprise</h5>
72 | 
73 |             <span>419</span>
74 | 
75 |             <ul>
76 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet   consectetur</li>
77 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet   consectetur</li>
78 |                 <li><i class="fa fa-check"></i> Lorem,  dolor amet  consectetur</li>
79 |             </ul>
80 | 
81 |             <button>Sign up today</button>
82 |         </div>
83 |     </section>
84 | 
85 | </body>
86 | </html>


--------------------------------------------------------------------------------
/Pricing-cards/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
  2 | 
  3 | :root{
  4 |     --body-bg: #F5FAFD;
  5 |     --white: #FFFFFF;
  6 |     --primary:#2B76E1;
  7 |     --recomended:#ffc107;
  8 |     --grayText: rgb(80, 80, 80);
  9 |     --price: #333;
 10 | }
 11 | 
 12 | *{
 13 |     margin: 0;
 14 |     padding:0;
 15 |     box-sizing: border-box;
 16 |     font-family: 'Roboto',sans-serif;
 17 | }
 18 | 
 19 | body{
 20 |     display: flex;
 21 |     align-items: center;
 22 |     /* justify-content: space-around; */
 23 |     flex-direction: column;
 24 |     padding:60px 0;
 25 |     min-height: 100vh;
 26 |     background-color: var(--body-bg);
 27 | }
 28 | 
 29 | h1{
 30 |     color: var(--price);
 31 |     font-weight: 900;
 32 | }
 33 | 
 34 | p{
 35 |     color: #777;
 36 |     font-size: 14px;
 37 |     max-width: 44%;
 38 |     line-height: 30px;
 39 |     margin-top: 20px;
 40 |     text-align: center;
 41 | }
 42 | 
 43 | 
 44 | body > span{
 45 |     display: flex;
 46 |     justify-content: space-between;
 47 |     margin-top: 30px;
 48 | }
 49 | 
 50 | body > span button{
 51 | 
 52 |     padding:17px 50px ;
 53 |     border: 0;
 54 |     outline: 0;
 55 |     text-transform: uppercase;
 56 |     font-weight: bold;
 57 |     font-size: 12px;
 58 |     cursor: pointer;
 59 |     transition: .5s;
 60 | }
 61 | 
 62 | body > span button:first-of-type{
 63 | 
 64 |     color: var(--white);
 65 |     border-top-left-radius: 3px;
 66 |     border-bottom-left-radius: 3px;
 67 |     background-color: var(--primary);
 68 | }
 69 | 
 70 | body > span button:first-of-type:hover{
 71 | 
 72 |         opacity: .8;
 73 | }
 74 | 
 75 | body > span button:last-of-type{
 76 | 
 77 |     color: rgb(133, 133, 133);
 78 |     border-top-right-radius: 3px;
 79 |     border-bottom-right-radius: 3px;
 80 |     background-color: rgb(238, 238, 238);
 81 | }
 82 | body > span button:last-of-type:hover{
 83 | 
 84 |     opacity: .7;
 85 | }
 86 | 
 87 | 
 88 | 
 89 | section{
 90 |     width: 100%;
 91 |     max-width: 1000px;
 92 |     display: grid;
 93 |     grid-template-columns:repeat(4,1fr) ;
 94 |     margin-top: 70px;
 95 | 
 96 | }
 97 | 
 98 | section .card{
 99 |     height: 390px;
100 |     display: flex;
101 |     flex-direction: column;
102 |     align-items: center;
103 |     padding:70px 10px 40px 5px;
104 |     background-color: var(--white);
105 |     border-radius: 5px;
106 |     box-shadow: 0 0 20px #ccc;
107 | }
108 | 
109 | section .card h5{
110 |     font-size: 14px;
111 | }
112 | 
113 | section .card span{
114 |     font-size: 55px;
115 |     font-weight: bolder;
116 |     color: var(--price);
117 |     margin-top: 15px;
118 |     position: relative;
119 |     display: flex;
120 |     justify-content: space-between;
121 | }
122 | 
123 | 
124 | section .card span::after{
125 |     content: "/mo";
126 |     font-size: 15px;
127 |     font-weight: normal;
128 |     color: #777;
129 |     position: relative;
130 |     top: 33px;
131 | }
132 | 
133 | 
134 | section .card span::before{
135 |     content: "$";
136 |     font-size: 25px;
137 |     font-weight: normal;
138 |     color: var(--price);
139 |     position: relative;
140 |     top: 27px;
141 |     margin-right: 2px;
142 | }
143 | 
144 | 
145 | section .card ul{
146 |     list-style: none;
147 |     margin-top: 20px;
148 |     font-size: 13px;
149 | }
150 | 
151 | section .card ul li{
152 |     
153 |     color: #888;
154 |     margin-top: 8px;
155 | }
156 | 
157 | 
158 | section .card ul li i{
159 |     color: var(--primary);
160 |     margin-right: 5px;
161 | }
162 | 
163 | section .card button{
164 |     color: #555;
165 |     border-radius: 5px;
166 |     font-weight: bolder;
167 |     width: 80%;
168 |     padding: 12px 0;    
169 |     margin-top: 45px;
170 |     font-size: 15px;
171 |     border:0;
172 |     outline:0;
173 |     border: 2px solid #aaa;
174 |     background-color: transparent;
175 |     transition: .5s;
176 |     cursor: pointer;
177 | }
178 | 
179 | section .card button:hover{
180 |     color: var(--white);
181 |     border-color: var(--primary);
182 |     background-color: var(--primary);
183 | 
184 | }
185 | 
186 | section .card:nth-of-type(3)
187 | {
188 |     transform: scale(1.15);
189 |     box-shadow: 0 0 30px #ccc;
190 |     border: 2px solid var(--primary);
191 | }
192 | 
193 | section .card:nth-of-type(3):before
194 | {
195 |     content: "Recommended";
196 |     background: var(--recomended);
197 |     color: var(--white);
198 |     font-size: 10px;
199 |     padding: 2px 5px;
200 |     font-weight: bolder;
201 |     position: absolute;
202 |     transform: translateY(-35px);
203 |     text-transform: uppercase;
204 |     border-radius: 3px;
205 | }
206 | 
207 | section .card:nth-of-type(3) button
208 | {
209 |     color: var(--white);
210 |     border-color: var(--primary);
211 |     background-color:var(--primary);
212 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center"> Interfaces Clone</h1>
  2 | <h3 align="center"> README em construção</h3>
  3 | 
  4 | <p align="center">
  5 |  <img src="https://img.shields.io/static/v1?label=PRs&message=welcome&color=5468CE&labelColor=535353" alt="PRs welcome!" />
  6 | 
  7 |   <img alt="License" src="https://img.shields.io/static/v1?label=license&message=MIT&color=5468CE&labelColor=535353">
  8 | 
  9 |   <img alt="languages" src="https://img.shields.io/github/languages/count/DaniloLima122/interfaces-clone?color=5468CE">
 10 | 
 11 |   <img alt="stars" src="https://img.shields.io/github/stars/DaniloLima122/interfaces-clone?color=5468CE">
 12 | 
 13 |   <img alt="forks" src="https://img.shields.io/github/forks/DaniloLima122/interfaces-clone?color=5468CE">
 14 | 
 15 | </p>
 16 | 
 17 | &nbsp;
 18 | 
 19 | ### Serie de projetos de clones de interfaces
 20 | 
 21 | Este repositório possui uma série de diretorios com projetos construídos principalmente em HTML e CSS para eu praticar e de alguma forma ajudar outras pessoas que estão aprendendo HTML e CSS.
 22 | 
 23 | ## Menu
 24 | 
 25 | - [Rodando os projetos](#rodando-os-projetos)
 26 | - [Contribuições](#Contribuições)
 27 | - [Links](#links)
 28 | - [Licença](#licença)
 29 | 
 30 | 
 31 | ## Tecnologias
 32 | 
 33 | - [HTML5]()
 34 | - [CSS3]() 
 35 | - [SASS]()
 36 | - [ReactJS](https://pt-br.reactjs.org/)
 37 | - [Styled Components](https://styled-components.com/)
 38 | 
 39 | 
 40 | ## Projetos nesse repositório
 41 | 
 42 | - [Mario Linkedin](#mario-linkedin)
 43 | - [Card Shoes](#card-shoes)
 44 | - [Disney UI](#disney-ui)
 45 | - [Form UI](#form-ui)
 46 | - [Play Game Store](#play-game-store)
 47 | - [User Type](#user-type)
 48 | - [VPN Finder](#vpn-finder)
 49 | 
 50 | Os outros projetos estão sendo adicionado ao README aos poucos mas pode ficar a vontade pra clonar o repositorio e ver eles ao vivo na sua máquina
 51 | 
 52 | &nbsp;
 53 | &nbsp;
 54 | 
 55 | ## Mario Linkedin
 56 | 
 57 | Linkedin do Mario desenvolvido a partir do layout criado pelo [Daniel Snows](https://dribbble.com/shots/5768210-Linkedin-Super-Mario-Concept)
 58 | 
 59 | &nbsp;
 60 | <img src="./readmeImages/mario.png" style="max-width:950px">
 61 | 
 62 | &nbsp;
 63 | &nbsp;
 64 | 
 65 | ## Card Shoes
 66 | 
 67 | Card de apresentação de produtos criado inspirado em um layout da web
 68 | 
 69 | &nbsp;
 70 | <img src="./readmeImages/shoesCard.jpg" style="max-width:950px">
 71 | 
 72 | 
 73 | &nbsp;
 74 | &nbsp;
 75 | 
 76 | ## Disney UI
 77 | 
 78 | UI da Disney inspirado em um layout da internet
 79 | 
 80 | &nbsp;
 81 | <img src="./readmeImages/disney.jpg" style="max-width:950px">
 82 | 
 83 | &nbsp;
 84 | &nbsp;
 85 | 
 86 | ## Form UI
 87 | 
 88 | Formulario inspirado em um layout da web
 89 | 
 90 | &nbsp;
 91 | <img src="./readmeImages/form.jpg" style="max-width:950px">
 92 | 
 93 | &nbsp;
 94 | &nbsp;
 95 | 
 96 | ## Play Game Store
 97 | 
 98 | Store inspirada em um layout da web
 99 | 
100 | &nbsp;
101 | <img src="./readmeImages/playgames_store.png" style="max-width:950px">
102 | 
103 | 
104 | &nbsp;
105 | &nbsp;
106 | 
107 | ## User Type
108 | 
109 | Radio button customizados inspirado em um layout da web
110 | 
111 | &nbsp;
112 | <img src="./readmeImages/usertype.jpg" style="max-width:950px">
113 | 
114 | &nbsp;
115 | &nbsp;
116 | 
117 | 
118 | ## VPN Finder
119 | 
120 | Clone de interface de um layout da web
121 | 
122 | &nbsp;
123 | <img src="./readmeImages/vpnFinder.png" style="max-width:950px">
124 | 
125 | &nbsp;
126 | &nbsp;
127 | 
128 | ## Rodando os projetos
129 | 
130 | Certifique-se de que você tenha o Git instalado na sua máquina, se não tiver baixe esse repositório em "Download ZIP".
131 | 
132 | 1º- Clone o projeto como git:
133 | 
134 | ```shell
135 | git clone https://github.com/DaniloLima122/interfaces-clone
136 | ```
137 | 
138 | Obs: Alguns projetos foram criados com bibliotecas externas, para estes você precisará ter o Node.Js instalado, se não tiver vá até a seção [Links](#Links) e depois siga os passos abaixo.
139 | 
140 | 2º - Instale as dependencias do projeto:
141 | 
142 | ```shell
143 | npm install
144 | ```
145 | 
146 | ou, se você usa o Yarn como gerenciador de pacotes é só digitar:
147 | 
148 | ```shell
149 | yarn install
150 | ```
151 | 
152 | 4º - Abra a pasta que você clonou/baixou, no seu editor de preferência
153 | 
154 | 5º - Agora, para rodar os projetos feitos só com HTML e CSS, é só abrir o arquivo HTML no seu navegador, e para rodar os projetos feitos com ReactJS digite o seguinte no seu terminal:
155 | 
156 | ```shell
157 | npm start
158 | ```
159 | 
160 | ou, se você usa o Yarn digite:
161 | 
162 | ```shell
163 | yarn start
164 | ```
165 | 
166 | ## Contribuições
167 | 
168 | Fique a vontade para avaliar o repositório dando uma "star" ou contribuir com o projeto, quem sabe criando seus layouts e adicionando neste repositorio para ajudar outras pessoas que estão aprendendo principalmente CSS.
169 | 
170 | Você também pode reportar sobre bugs e dar sugestões de melhorias ou idéias de novos projetos, fique a vontade!!
171 | 
172 | ## Links
173 | 
174 | - Instalação do [Git](https://git-scm.com/)
175 | - Instalação do [Node.js](https://nodejs.org/en/download/)
176 | 
177 | ## Licença
178 | 
179 | - [MIT](LICENSE)
180 | 


--------------------------------------------------------------------------------
/Search-engine/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  8 |     <link rel="stylesheet" href="style.css">
  9 |     <title>Search engine</title>
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |     <aside>
 15 |         <header><span class="logo">/></span></header>
 16 |         <main>
 17 |             <ul>
 18 |                 <li>
 19 |                     <i class="fa fa-search"></i>
 20 |                     <span>Find</span>
 21 |                 </li>
 22 | 
 23 |                 <li>
 24 |                     <i class="far fa-hand-paper"></i>
 25 |                     <span>My intents</span>
 26 |                 </li>
 27 | 
 28 |                 <li>
 29 |                     <i class="fas fa-wallet"></i>
 30 |                     <span>Wallet</span>
 31 |                 </li>
 32 |             </ul>
 33 | 
 34 |             <ul>
 35 |                 <li>
 36 |                     <i class="far fa-thumbs-up"></i>
 37 |                     <span>Give feedback</span>
 38 |                 </li>
 39 | 
 40 |                 <li>
 41 |                     <i class="fa fa-info-circle"></i>
 42 |                     <span>Learn more</span>
 43 |                 </li>
 44 | 
 45 |                 <li>
 46 |                     <i class="fa fas fa-cog"></i>
 47 |                     <span>Settings</span>
 48 |                 </li>
 49 |             </ul>
 50 | 
 51 | 
 52 |         </main>
 53 |     </aside>
 54 | 
 55 |     <main>
 56 |         <header>
 57 |             <div>
 58 |                 <img src="https://avatars2.githubusercontent.com/u/31545128?v=4" alt="User">
 59 |                 <span>Danilo Lima <i class="fas fa-chevron-down"></i></span>
 60 |                 <div class="dropdown">
 61 |                     <span>Profile</span>
 62 |                     <span>Curriculum</span>
 63 |                     <span>Oportunitty</span>
 64 |                 </div>
 65 |             </div>
 66 |         </header>
 67 | 
 68 |         <section>
 69 |             <h1>Welcome to Pulse, Danilo.</h1>
 70 | 
 71 |             <div class="second-header">
 72 |                 <p>What do you need help with?</p>
 73 |                 <div class="input-container">
 74 |                     <i class="fas fa-search"></i>
 75 |                     <input type="text" placeholder="Ex. smart contracts"/>
 76 |                 </div>
 77 |             </div>
 78 | 
 79 | 
 80 |             <h3>Please select a category</h3>
 81 |             <div class="categories">
 82 | 
 83 |                 <label for="radioa">
 84 | 
 85 |                     <input type="radio" name="radio" id="radioa"  checked>
 86 |                     <span>
 87 |                         <i class="fas fa-check-circle"></i>
 88 | 
 89 |                         <img src="search.svg" class="ilustration">
 90 | 
 91 |                         <p>Thecnical services</p>
 92 |                     
 93 |                     </span>
 94 |                 </label>
 95 | 
 96 |                 <label for="radiob">
 97 |                     
 98 |                     <input type="radio" name="radio" id="radiob">
 99 | 
100 |                     <span >
101 | 
102 |                         <i class="fas fa-check-circle"></i>
103 |                         <img src="team.svg" class="ilustration">
104 | 
105 |                         <p>Marketing services</p>
106 |                     
107 |                     </span>
108 |                 </label>
109 | 
110 |                 <label for="radioc">
111 | 
112 |                     <input type="radio" name="radio" id="radioc">
113 |                     <span>
114 |                         <i class="fas fa-check-circle"></i>
115 | 
116 |                         <img src="legal.svg" class="ilustration">
117 | 
118 |                         <p>Legal services</p>
119 |                     
120 |                     </span>
121 |                 </label>
122 | 
123 |                 <label for="radiod">
124 |                     
125 |                     <input type="radio" name="radio" id="radiod">
126 |                     <span>
127 | 
128 |                         <i class="fas fa-check-circle"></i>
129 |                         <img src="business.svg" class="ilustration">
130 | 
131 |                         <p>Advisory services</p>
132 |                     
133 |                     </span>
134 |                 </label>
135 | 
136 | 
137 |             </div>
138 | 
139 |             <button>Next</button>
140 | 
141 |         </section>
142 | 
143 |     </main>
144 | 
145 | </body>
146 | 
147 | </html>


--------------------------------------------------------------------------------
/Search-engine/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');
  2 | 
  3 | :root{
  4 |     --bg-main:#F2F5F8;
  5 |     --primary: #151C52;
  6 |     --bg1-btn:#435CE8;
  7 |     --bg2-btn:#374DCB;
  8 |     --white: #FFFFFF;
  9 |     --font-main-color:#0A0C25;
 10 |     --dorpdown-bg: #e0e0e0;
 11 |     --text-side: #eee;
 12 | }
 13 | 
 14 | *{
 15 |     margin: 0;
 16 |     padding: 0;
 17 |     box-sizing: border-box;
 18 |     outline: 0;
 19 |     border: 0;
 20 |     font-family: "Roboto",sans-serif;
 21 |     list-style: none;
 22 | }
 23 | 
 24 | img{
 25 |     width: 10%;
 26 | }
 27 | 
 28 | body{
 29 |     min-height: 100vh;
 30 |     width: 100%;
 31 |     display: grid;
 32 |     grid-template-columns: 230px 1fr;
 33 | }
 34 | 
 35 | aside{
 36 |     height: 100%;
 37 |     background: var(--primary);
 38 |     color: var(--text-side);
 39 |     padding: 10px 20px;
 40 | }
 41 | 
 42 | aside header{
 43 |     width: 100%;
 44 |     height: 50px;
 45 |     display: flex;
 46 |     align-items: center;
 47 | }
 48 | 
 49 | aside header span{
 50 |     border-radius: 50%;
 51 |     color: #eee;
 52 |     display: block;
 53 |     width: 40px;
 54 |     font-size: 2rem;
 55 |     height: 40px;
 56 | }
 57 | 
 58 | 
 59 | aside main{
 60 |     display: flex;
 61 |     flex-direction: column;
 62 |     justify-content: space-between;
 63 |     height: 87%;
 64 |     margin: 20px 0;
 65 |     font-weight: 300;
 66 | 
 67 |     font-size: .85rem;
 68 | }
 69 | 
 70 | main ul{
 71 | 
 72 |     margin: 0;
 73 | 
 74 | }
 75 | 
 76 | 
 77 | main ul li{
 78 | 
 79 |     padding: .6rem 1.2rem;
 80 |     border-radius: 2px;
 81 |     margin: 0 .5rem .3rem 0;
 82 |     transition: .5s;
 83 |     cursor: pointer;
 84 | }
 85 | 
 86 | 
 87 | main ul li:hover{
 88 | 
 89 |     background: rgba(255, 255, 255, .1);
 90 | }
 91 | 
 92 | main ul:first-of-type li:first-of-type{
 93 | 
 94 |     background: var(--bg1-btn);
 95 |     
 96 | }
 97 | 
 98 | main ul li i{
 99 |     font-size: 1.1rem;
100 | }
101 | 
102 | main ul li span{
103 |     margin-left: 1rem;
104 |     letter-spacing: 1px;
105 | }
106 | 
107 | body > main{
108 |     background: var(--bg-main);
109 | }
110 | 
111 | main header{
112 |     width: 100%;
113 |     height: 70px;
114 |     display: flex;
115 |     justify-content: flex-end;
116 |     padding: 1rem;
117 | }
118 | 
119 | main header > div{
120 |     width: 100%;
121 |     max-width: 190px;
122 |     background: #eee;
123 |     border-radius: 3px;
124 |     display: flex;
125 |     align-items: center;
126 |     height: 50px;
127 |     color: #777;
128 |     font-weight: 600;
129 |     position: relative;
130 | }
131 | 
132 | 
133 | 
134 | main header > div > div.dropdown{
135 |     background: #eee;
136 |     box-shadow: 0 10px 20px -10px #aaa;
137 |     position: absolute;
138 |     transform: translate(0,6.8rem);
139 |     padding: 1rem 1.5rem;
140 |     border: 1px solid #ddd;
141 |     width: 100%;
142 |     display: none;
143 |     opacity: 0;
144 |     transition: 1s linear;
145 | }
146 | 
147 | main header > div > div.dropdown:hover{
148 |     display: block;
149 | }
150 | 
151 | main header > div:hover > div.dropdown{
152 |     display: block;
153 |     animation: animaDorpdown 1s forwards;
154 |     animation-delay: .1s;
155 | }
156 | 
157 | @keyframes animaDorpdown{
158 |     to{opacity: 1;}
159 | }
160 | 
161 | main header > div > div.dropdown span{
162 | 
163 |     display: block;
164 |     margin: 1rem 0;
165 |     cursor: pointer;
166 |     transition: 1s;
167 | }
168 | 
169 | main header > div > div.dropdown span:hover{
170 |     color: var(--bg2-btn);
171 | }
172 | 
173 | main header div img{
174 | 
175 |     width: 2rem;
176 |     border-radius: 50%;
177 |     margin: 1rem;
178 |     border: 1px solid #bbb;
179 | }
180 | 
181 | 
182 | main header div span i{
183 | 
184 |     font-size: .8rem;
185 |     margin: 0 .5rem;
186 | }
187 | 
188 | main section{
189 |     margin: 2rem 5rem;
190 |     display: flex;
191 |     flex-direction: column;
192 |     justify-content: flex-start;
193 | 
194 | }
195 | 
196 | main section h1{
197 |     font-size: 2.3rem;
198 |     color: var(--font-main-color);
199 | }
200 | 
201 | main section > div.second-header{
202 |     margin: 2rem 0;
203 | }
204 | 
205 | main section > div.second-header p{
206 | 
207 |     font-weight: bolder;
208 |     font-size: 1rem;
209 |     color: var(--font-main-color);
210 | }
211 | 
212 | main section > div.second-header div{
213 |     
214 |     border: 1px solid #ddd;
215 |     background: var(--white);
216 |     max-width: 370px;
217 |     height: 50px;
218 |     width: 100%;
219 |     margin: 1rem 0;
220 |     display: flex;
221 |     justify-content: space-between;
222 |     align-items: center;
223 |     padding: 0 0 0 1rem; 
224 |     color: #ddd;
225 | }
226 | 
227 | 
228 | main section > div.second-header div input{
229 |     
230 |     width: 100%;
231 |     height: 100%;
232 |     padding: 0 1rem;
233 |     color: #888;
234 |     font-size: 1rem;
235 | }
236 | 
237 | 
238 | main section > div.second-header div input::placeholder{
239 |     
240 |     color: #ccc;
241 | }
242 | 
243 | 
244 | 
245 | section h3{
246 |     font-size: 1rem;
247 |     margin: 0 0 1.5rem 0;
248 | }
249 | 
250 | div.categories{
251 |     display: grid;
252 |     grid-template-columns: repeat(4,1fr);
253 |     column-gap: 1.5rem;
254 | }
255 | 
256 | 
257 | div.categories  label{
258 |     height: 280px;
259 | }
260 | 
261 | input[type="radio"]{
262 |     display: none;
263 | }
264 | 
265 | div.categories  label input:checked + span{
266 |     background: linear-gradient(var(--bg1-btn),var(--bg2-btn));
267 |     transform: scale(1.04);
268 |     box-shadow: 0 20px 35px -10px #aaa;
269 | }
270 | 
271 | 
272 | 
273 | div.categories  label input:checked + span p{
274 |     
275 |     color: var(--white);
276 | }
277 | 
278 | div.categories  label span{
279 |     display: flex;
280 |     flex-direction: column;
281 |     align-items: center;
282 |     justify-content: center;
283 |     height: 100%;
284 |     border-radius: 5px;
285 |     background: var(--white);
286 |     border: 1px solid #ddd;
287 |     transition: .3s cubic-bezier(0.37, 0, 0.63, 1);
288 | }
289 | 
290 | div.categories  label span i{
291 | 
292 |     color: #0f0;
293 |     opacity: 0;
294 |     display: grid;
295 |     font-size: 1.1rem;
296 |     place-items: center;
297 |     border-radius: 100px;
298 |     position: absolute;
299 |     top: 1rem;
300 |     right: 1.5rem;
301 |     background: var(--white);
302 | }
303 | 
304 | div.categories  label input:checked + span i{
305 |     
306 |     animation: iconSelection .5s ease-in-out forwards;
307 | }
308 |  
309 | 
310 | @keyframes iconSelection{
311 |     to{opacity: 1;}
312 | }
313 |  
314 | 
315 | div.categories  label span img{
316 |     width: 50%;
317 |     margin: 0rem 0 2rem;
318 | }
319 | 
320 | div.categories  label span p{
321 |     color: var(--font-main-color);
322 |     font-weight: 600;
323 | }
324 | 
325 | section > button{
326 |     
327 |     padding: .8rem 2rem;
328 |     border-radius: 3px;
329 |     align-self: flex-end;
330 |     margin: 2rem 0rem;
331 |     background: linear-gradient(var(--bg1-btn),var(--bg2-btn));
332 |     color: var(--white);
333 |     cursor: pointer;
334 | }


--------------------------------------------------------------------------------
/Shoe-View/img/puma-logo.svg:
--------------------------------------------------------------------------------
1 | <svg height="1339" viewBox="35.433 30.331 889.299 446.538" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m512.857 36.99c-2.898.447-5.684 11.118-11.285 16.677-4.096 4.012-9.209 3.761-11.925 8.721-1.031 1.853-.697 5.016-1.867 8.053-2.285 6.074-10.337 6.617-10.337 13.235-.028 7.147 6.715 8.512 12.552 13.583 4.556 4.082 5.002 6.896 10.518 8.874 4.71 1.603 11.717-3.636 18.028-1.755 5.183 1.547 10.142 2.661 11.313 7.983 1.03 4.904-.07 12.51-6.353 11.633-2.118-.237-11.299-3.33-22.583-2.132-13.612 1.547-29.146 5.99-30.664 21.163-.836 8.484 9.654 18.487 19.783 16.453 7.007-1.38 3.692-9.64 7.509-13.653 5.001-5.14 33.338 17.944 59.683 17.944 11.09 0 19.337-2.8 27.53-11.382.765-.655 1.699-2.062 2.883-2.146 1.115.084 3.065 1.184 3.706 1.658 21.218 17.052 37.253 51.255 115.229 51.659 10.964.055 23.46 5.294 33.658 14.6 9.098 8.415 14.42 21.496 19.588 34.773 7.802 19.923 21.79 39.302 42.993 60.868 1.157 1.156 18.613 14.726 20.006 15.743.223.139 1.505 3.204 1.06 4.917-.516 12.929-2.397 50.53 25.633 52.23 6.855.348 5.057-4.472 5.057-7.788-.013-6.548-1.212-13.054 2.244-19.755 4.722-9.222-10.017-13.472-9.585-33.408.306-14.865-12.177-12.33-18.516-23.656-3.65-6.562-6.896-10.044-6.659-18.07 1.421-45.165-9.613-74.84-15.116-82.126-4.29-5.503-7.843-7.69-3.915-10.24 23.392-15.45 28.7-29.828 28.7-29.828 12.44-29.242 23.628-55.95 39.05-67.707 3.107-2.425 11.076-8.373 15.966-10.714 14.391-6.785 21.97-10.894 26.15-14.963 6.617-6.45 11.841-19.894 5.502-28.044-7.885-10.059-21.524-2.076-27.542 1.49-43.007 25.524-49.346 70.55-64.24 96.408-11.883 20.66-31.206 35.832-48.481 37.072-12.957.961-26.916-1.658-40.82-7.76-33.812-14.823-52.314-33.965-56.674-37.35-9.084-7.008-79.606-76.235-136.74-79.063 0 0-7.09-14.196-8.874-14.433-4.18-.53-8.456 8.484-11.521 9.53-2.884.96-7.732-9.767-10.644-9.293m-251.522 413.171c-5.378-.126-9.947-4.542-9.947-10.003l.014-178.214h-58.736v196.45c0 9.627 7.801 17.485 17.372 17.485h102.663c9.64 0 17.345-7.858 17.345-17.485v-196.45h-58.68l-.056 178.214c0 5.461-4.57 9.877-9.975 10.003m196.659-188.217h-88.898c-10.518 0-19.086 8.554-19.086 19.184v194.75h58.79v-178.644c.042-5.475 4.472-9.808 9.934-9.808 5.489 0 9.891 4.235 10.016 9.655v178.798h58.555v-178.8c.07-5.419 4.472-9.654 9.947-9.654 5.434 0 9.92 4.333 9.962 9.808v178.646h58.791v-194.751c0-10.63-8.582-19.184-19.1-19.184zm-343.931 35.665c.042-5.949-4.806-10.184-9.947-10.184h-9.975v108.207h9.975c5.183 0 9.99-4.124 9.947-10.044zm39.413 124.507h-59.335v53.763h-58.708v-213.935h118.42c10.601 0 18.876 8.61 18.876 19.268v121.637c0 10.672-8.595 19.267-19.253 19.267m613.996 5.921c-11.8 0-21.706 10.198-21.706 22.556 0 12.399 9.906 22.513 22.082 22.513 12.079 0 21.859-10.114 21.859-22.513 0-12.386-9.78-22.556-21.86-22.556zm26.442 22.486c0 14.53-11.647 26.345-26.066 26.345-14.573 0-26.275-11.73-26.275-26.345 0-14.336 11.702-26.317 25.843-26.317 14.851 0 26.498 11.62 26.498 26.317"/><path d="m765.131 448.852c4.082 0 6.228-1.449 6.228-4.346 0-2.578-2.076-3.901-6.047-3.901h-1.17v8.247zm15.033 16.913h-7.008l-9.014-11.995v11.995h-5.726v-30.329h6.019c8.178 0 12.524 3.093 12.524 9 0 3.942-2.563 7.44-6.144 8.484l-.418.154zm-115.591-70.09v-98.51c-.14-5.448-4.528-9.627-10.003-9.627-5.42 0-9.906 4.346-9.947 9.78v98.357zm0 80.205v-53.707h-19.95v53.707h-58.68v-194.751c0-10.63 8.567-19.184 19.086-19.184h99.137c10.547 0 19.115 8.554 19.115 19.184v194.75z"/></svg>


--------------------------------------------------------------------------------
/Shoe-View/img/shoe top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Shoe-View/img/shoe top.png


--------------------------------------------------------------------------------
/Shoe-View/img/shoe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Shoe-View/img/shoe.png


--------------------------------------------------------------------------------
/Shoe-View/img/shoeback.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Shoe-View/img/shoeback.webp


--------------------------------------------------------------------------------
/Shoe-View/img/shoeback3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Shoe-View/img/shoeback3.png


--------------------------------------------------------------------------------
/Shoe-View/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  8 |   <link rel="stylesheet" href="style.css">
  9 |   <title>Shoe shopping view</title>
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |   <header>
 15 |     <div class="left">
 16 |       <span class="fas fa-bars"></span>
 17 | 
 18 |       <ul>
 19 |         <li>New</li>
 20 |         <li>Man</li>
 21 |         <li>Woman</li>
 22 |       </ul>
 23 | 
 24 |     </div>
 25 | 
 26 |     <img src="./img/puma-logo.svg" alt="logo" />
 27 | 
 28 |     <div class="right">
 29 | 
 30 |       <ul>
 31 |         <li><span>Search</span></li>
 32 |         <li><span>Bag 08</span></li>
 33 |         <li>
 34 |           <img
 35 |             src="https://avatars2.githubusercontent.com/u/31545128?s=460&u=2c1e279b6d728d05c70b90a9739ba86f2448bf22&v=4"
 36 |             alt="user">
 37 |         </li>
 38 |       </ul>
 39 | 
 40 |     </div>
 41 | 
 42 |   </header>
 43 | 
 44 |   <section>
 45 | 
 46 |     <aside>
 47 |       <header><span>360°</span></header>
 48 | 
 49 |       <div>
 50 |         <img src="./img/shoe.png" alt="shoe">
 51 |       </div>
 52 | 
 53 | 
 54 |       <footer>
 55 |         <img src="./img/shoe.png">
 56 |         <img src="./img/shoe top.png">
 57 |         <img src="./img/shoeback.webp">
 58 |         <img src="./img/shoeback3.png">
 59 |       </footer>
 60 |     </aside>
 61 | 
 62 |     <aside>
 63 | 
 64 |       <main>
 65 | 
 66 | 
 67 |         <h1>Puma Rs-x Toys - Woman Shoes</h1>
 68 | 
 69 |         <h1>$169.00</h1>
 70 | 
 71 |         <div class="sizes">
 72 |           <ul>
 73 |             <li>
 74 |               <label for="r1">
 75 |                 <input type="radio" name="mradio" id="r1">
 76 |                 <span>US7</span>
 77 |               </label>
 78 |             </li>
 79 | 
 80 |             <li>
 81 |               <label for="r2">
 82 |                 <input type="radio" name="mradio" id="r2">
 83 |                 <span>US8</span>
 84 |               </label>
 85 |             </li>
 86 | 
 87 |             <li>
 88 |               <label for="r3">
 89 |                 <input type="radio" name="mradio" id="r3">
 90 |                 <span>US9</span>
 91 |               </label>
 92 |             </li>
 93 | 
 94 |             <li>
 95 |               <label for="r4">
 96 |                 <input type="radio" name="mradio" id="r4" checked>
 97 |                 <span>US10</span>
 98 |               </label>
 99 |             </li>
100 | 
101 |             <li>
102 |               <label for="r5">
103 |                 <input type="radio" name="mradio" id="r5">
104 |                 <span>US11</span>
105 |               </label>
106 |             </li>
107 | 
108 |             <li>
109 |               <label for="r6">
110 |                 <input type="radio" name="mradio" id="r6">
111 |                 <span>US12</span>
112 |               </label>
113 |             </li>
114 | 
115 |           </ul>
116 | 
117 |           <button>ADD <span>+</span></button>
118 | 
119 |         </div>
120 | 
121 |         <div class="text-under-sizes">
122 |           <h4>For orders above $150 standard shopping</h4>
123 |           <h5>is awais free!</h5>
124 |         </div>
125 |       </main>
126 | 
127 |       <footer>
128 | 
129 |         <span>
130 |           Product Details
131 |         </span>
132 | 
133 |         <span class="fas fa-long-arrow-alt-down"></span>
134 | 
135 |       </footer>
136 |     </aside>
137 |   </section>
138 | 
139 | 
140 | 
141 | </body>
142 | 
143 | </html>


--------------------------------------------------------------------------------
/Shoe-View/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&display=swap');
  2 | 
  3 | :root{
  4 |     --white:#FFFFFF;
  5 |     --dark-gray:#35353C;
  6 |     --light-gray:#ACA8A9;
  7 |     --medium-gray:#E6DBD5;
  8 |     --main-bg:#FCF6F3;
  9 |     --primary:#CA2728;
 10 | }
 11 | 
 12 | *{
 13 |     margin: 0;
 14 |     padding: 0;
 15 |     box-sizing: border-box;
 16 |     border: 0;
 17 |     outline: 0;
 18 |     cursor: context-menu;
 19 |     font-family: 'Noto Sans JP';
 20 | }
 21 | 
 22 | button,li,label{
 23 |     cursor: pointer;
 24 | }
 25 | 
 26 | body{
 27 |     background: var(--main-bg);
 28 |     overflow-x: hidden;
 29 |     min-height: 100vh;
 30 | }
 31 | 
 32 | 
 33 | body > header{
 34 |     background: var(--white);
 35 |     display: flex;
 36 |     justify-content: space-between;
 37 |     align-items: center;
 38 |     max-height: 80px;
 39 |     min-height: 80px;
 40 |     padding: 0 3rem;
 41 | }
 42 | 
 43 | body > header > img{
 44 | 
 45 |     max-width: 60px;
 46 |     transform: translateY(-5px);
 47 | }
 48 | 
 49 | body > header ul li{
 50 |     transition: .5s;
 51 | }
 52 | 
 53 | body > header li img{
 54 |     
 55 |     max-width: 30px;
 56 |     border-radius: 50%;
 57 | }
 58 | 
 59 | body > header div.left{
 60 |     display: flex;
 61 |     justify-content: space-between;
 62 |     align-items: center;
 63 | }
 64 | 
 65 | body > header div.left span{
 66 |     font-size: 1.7rem;
 67 |     color: var(--dark-gray);
 68 | }
 69 | 
 70 | body > header div.right{
 71 |     height: 100%;
 72 |     height: 80px;
 73 |     display: flex;
 74 |     align-items: center;
 75 | }
 76 | 
 77 | body > header div.right ul li:nth-of-type(2){
 78 |     background: var(--dark-gray);
 79 |     height: 100%;
 80 |     color: var(--white);
 81 |     display: grid;
 82 |     place-items: center;
 83 |     padding: 1rem 1.5rem;
 84 | }
 85 | 
 86 | body > header div.right ul li:nth-of-type(2):hover{
 87 |     opacity: .8;
 88 | }
 89 | 
 90 | body > header div ul li:hover{
 91 |     color: #aaa;
 92 | }
 93 | 
 94 | header li span{
 95 |     cursor: pointer;
 96 | }
 97 | 
 98 | body > header div ul{
 99 |     display: flex;
100 |     list-style: none;
101 |     width: 100%;
102 |     height: 100%;
103 |     transform: translateX(50px);
104 |     justify-content: space-between;
105 |     align-items: center;
106 | }
107 | 
108 | body > header div ul li{
109 |     margin: 0 2.5rem 0 .5rem;
110 |     font-size: .9rem;
111 |     font-weight: 500;
112 |     cursor: pointer;
113 |     text-transform: uppercase;
114 |     color: var(--dark-gray);
115 | }
116 | 
117 | section{
118 |     display: flex;
119 |     align-items: center;
120 |     justify-content: space-between;
121 |     padding: 4rem 0rem 0 5rem;
122 |     height: calc(100vh - 80px);
123 | }
124 | 
125 | 
126 | section > aside:first-of-type{
127 |     display: flex;
128 |     flex-direction: column;
129 |     align-items: center;
130 |     width: 45%;
131 |     height: auto;
132 |     transform: translateY(-30px);
133 | }
134 | 
135 | section > aside:first-of-type header{
136 | 
137 |     width: 90%;
138 |     display: flex;
139 |     transform: translateY(20px);
140 |     justify-content: flex-end;
141 | }
142 | 
143 | section > aside:first-of-type header span{
144 | 
145 |     color: var(--dark-gray);
146 |     font-size: 1.2rem;
147 |     position: relative;
148 |     background: var(--main-bg);
149 | }
150 | 
151 | section > aside:first-of-type header span::after{
152 | 
153 |     content: "";
154 |     border-radius: 50%;
155 |     border: 1px solid #ddd;
156 |     width: 50px;
157 |     height: 50px;
158 |     display: block;
159 |     position: absolute;
160 |     transform: translate(15px,-40px);
161 | }
162 | 
163 | section > aside:first-of-type > div{
164 | 
165 |     border-radius: 50%;
166 |     height: 500px;
167 |     width: 500px;
168 |     background: var(--primary);
169 |     display: grid;
170 |     place-items: center ;
171 | }
172 | 
173 | section > aside:first-of-type > div img{
174 | 
175 |     width: 650px;
176 |     transform: translate(-80px,-100px);
177 |     filter: drop-shadow(0 40px 20px  rgba(0,0,0,0.5));
178 |     transition: .7s cubic-bezier(0.34, 1.56, 0.64, 1);
179 |     cursor: pointer;
180 |     filter: brightness(125%);
181 | }
182 | 
183 | section > aside:first-of-type > div img:hover{
184 | 
185 |     transform: rotateZ(40deg)  translate(-120px,-70px);
186 | }
187 | 
188 | section > aside:first-of-type > footer{
189 | 
190 |     width: 60%;
191 |     margin-top: 4rem;
192 |     display: flex;
193 |     justify-content: space-between;
194 |     align-items: center;
195 | }
196 | 
197 | section > aside:first-of-type > footer > img{
198 | 
199 |     width: 20%;
200 |     height: 100%;
201 | }
202 | 
203 | section > aside:first-of-type > footer > img:nth-of-type(1){
204 |   
205 |     transform: translate(-10px,-25px);
206 |     position: relative;
207 | }
208 | 
209 | section > aside:first-of-type > footer::after{
210 |   
211 |     content: "";
212 |     position: absolute;
213 |     height: 5px;
214 |     width: 5px;
215 |     margin: 1.5rem 1.5rem 0 1.5rem;
216 |     border-radius: 50%;
217 |     background: var(--primary);
218 | }
219 | 
220 | section > aside:first-of-type > footer > img:nth-of-type(n+2){
221 | 
222 |     filter: grayscale(1);
223 |     opacity: .6;
224 | }
225 | 
226 | section aside:last-of-type{
227 |     width: 46%;
228 |     height: 100%;
229 |     display: flex;
230 |     padding-top: 7rem;
231 |     flex-direction: column;
232 |     justify-content: space-between;
233 | 
234 | }
235 | 
236 | section aside:last-of-type main{
237 |     padding-right: 7rem;
238 | }
239 | 
240 | 
241 | section aside:last-of-type h1{
242 |     font-size: 2.5rem;
243 |     max-width: 70%;
244 |     font-weight: 500;
245 |     color: var(--dark-gray);
246 | }
247 | 
248 | section aside:last-of-type h1:nth-of-type(2){
249 | 
250 |     color: var(--primary);
251 |     font-weight: 300;
252 |     margin: 2rem 0;
253 | }
254 | 
255 | section aside:last-of-type  div.sizes{
256 |     height: 100px;
257 |     display: flex;
258 |     justify-content: space-between;
259 |     align-items: center;
260 | }
261 | 
262 | input[type="radio"]{
263 |     display: none;
264 | }
265 | 
266 | section aside:last-of-type  div.sizes ul{
267 |     list-style: none;
268 |     display: flex;
269 |     width: 70%;
270 |     justify-content: space-between;
271 | }
272 | 
273 | section aside:last-of-type  div.sizes ul li{
274 |     
275 |     font-weight: 500;
276 |     color: var(--dark-gray);
277 | }
278 | 
279 | section aside:last-of-type  div.sizes ul li:nth-child(2n){
280 |     
281 |     color: var(--light-gray);
282 | }
283 | 
284 | input[type="radio"]:checked + span{
285 |     color: var(--primary);
286 | }
287 | 
288 | section aside:last-of-type  div.sizes ul li span{
289 |     cursor: pointer;
290 | }
291 | 
292 | section aside:last-of-type  div.sizes button{
293 |     
294 |     color: var(--white);
295 |     background: var(--primary);
296 |     height: 100%;
297 |     width: 18%;
298 |     transition: opacity .5s ;
299 | }
300 | 
301 | 
302 | section aside:last-of-type  div.sizes button:hover{
303 |     opacity: .8;
304 | }
305 | 
306 | section aside:last-of-type  div.text-under-sizes{
307 |     width: 100%;
308 |     margin: 2rem 0;
309 | }
310 | 
311 | div.text-under-sizes h4,
312 | div.text-under-sizes h5{
313 |     font-weight: 300;
314 |     font-size: 1.2rem;
315 |     color: var(--dark-gray);
316 |     margin-bottom: .5rem;
317 | }
318 | 
319 | aside:last-of-type > footer{
320 |     height: 100px;
321 |     display: flex;
322 |     justify-content: space-between;
323 |     align-items: center;
324 |     padding: 1rem 2rem;
325 |     text-transform: uppercase;
326 |     color: var(--dark-gray);
327 |     background: var(--medium-gray);
328 | }
329 | 
330 | aside:last-of-type > footer span:last-of-type{
331 |     color: #bbb;
332 |     font-size: 2rem;
333 | }
334 | 


--------------------------------------------------------------------------------
/Shoes-shop/img/black_shoe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Shoes-shop/img/black_shoe.jpeg


--------------------------------------------------------------------------------
/Shoes-shop/img/nike.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512.013 512.013" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <path xmlns="http://www.w3.org/2000/svg" style="" d="M255.949,234.146l-88.256,23.104c-31.168,7.712-58.432,17.984-84.704,8.992  c-35.712-15.424-35.072-55.552-8.448-98.24C27.469,206.85-57.235,331.074,57.325,343.618c14.592,1.92,40.576-3.2,68.8-15.072  l129.824-53.28l256.064-104.704l-224.256,55.232L255.949,234.146L255.949,234.146z" fill="#ffffff" data-original="#263238" class=""/>
 4 | <g xmlns="http://www.w3.org/2000/svg">
 5 | </g>
 6 | <g xmlns="http://www.w3.org/2000/svg">
 7 | </g>
 8 | <g xmlns="http://www.w3.org/2000/svg">
 9 | </g>
10 | <g xmlns="http://www.w3.org/2000/svg">
11 | </g>
12 | <g xmlns="http://www.w3.org/2000/svg">
13 | </g>
14 | <g xmlns="http://www.w3.org/2000/svg">
15 | </g>
16 | <g xmlns="http://www.w3.org/2000/svg">
17 | </g>
18 | <g xmlns="http://www.w3.org/2000/svg">
19 | </g>
20 | <g xmlns="http://www.w3.org/2000/svg">
21 | </g>
22 | <g xmlns="http://www.w3.org/2000/svg">
23 | </g>
24 | <g xmlns="http://www.w3.org/2000/svg">
25 | </g>
26 | <g xmlns="http://www.w3.org/2000/svg">
27 | </g>
28 | <g xmlns="http://www.w3.org/2000/svg">
29 | </g>
30 | <g xmlns="http://www.w3.org/2000/svg">
31 | </g>
32 | <g xmlns="http://www.w3.org/2000/svg">
33 | </g>
34 | </g></svg>
35 | 


--------------------------------------------------------------------------------
/Shoes-shop/img/red_shoe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Shoes-shop/img/red_shoe.png


--------------------------------------------------------------------------------
/Shoes-shop/img/seta-esquerda.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 3 | <g xmlns="http://www.w3.org/2000/svg">
 4 | 	<g>
 5 | 		<path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068    l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019    l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492    c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" fill="#494949" data-original="#000000" style="" class=""/>
 6 | 	</g>
 7 | </g>
 8 | <g xmlns="http://www.w3.org/2000/svg">
 9 | </g>
10 | <g xmlns="http://www.w3.org/2000/svg">
11 | </g>
12 | <g xmlns="http://www.w3.org/2000/svg">
13 | </g>
14 | <g xmlns="http://www.w3.org/2000/svg">
15 | </g>
16 | <g xmlns="http://www.w3.org/2000/svg">
17 | </g>
18 | <g xmlns="http://www.w3.org/2000/svg">
19 | </g>
20 | <g xmlns="http://www.w3.org/2000/svg">
21 | </g>
22 | <g xmlns="http://www.w3.org/2000/svg">
23 | </g>
24 | <g xmlns="http://www.w3.org/2000/svg">
25 | </g>
26 | <g xmlns="http://www.w3.org/2000/svg">
27 | </g>
28 | <g xmlns="http://www.w3.org/2000/svg">
29 | </g>
30 | <g xmlns="http://www.w3.org/2000/svg">
31 | </g>
32 | <g xmlns="http://www.w3.org/2000/svg">
33 | </g>
34 | <g xmlns="http://www.w3.org/2000/svg">
35 | </g>
36 | <g xmlns="http://www.w3.org/2000/svg">
37 | </g>
38 | </g></svg>
39 | 


--------------------------------------------------------------------------------
/Shoes-shop/img/white_shoe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Shoes-shop/img/white_shoe.png


--------------------------------------------------------------------------------
/Shoes-shop/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  8 |     <link rel="stylesheet" href="style.css">
  9 |     <title>Nike Shoe</title>
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |     <section class="shoe">
 15 |         <header>
 16 |             <img src="./img/nike.svg" alt="logo">
 17 |         </header>
 18 |         <img src="./img/red_shoe.png" alt="red_shoe">
 19 | 
 20 |         <footer class="shoe_footer">
 21 |             <h1>Nike Air</h1>
 22 |             <h1>Yeezy 2</h1>
 23 |             <h1>Red October</h1>
 24 | 
 25 |             <div>
 26 |                 <label>$ 499 <span>.00</span></label>
 27 |                 <button>+</button>
 28 |             </div>
 29 | 
 30 |         </footer>
 31 |     </section>
 32 | 
 33 | 
 34 |     <section class="others-shoe">
 35 |         <header>
 36 |             <div>
 37 |                 <button><img src="./img/seta-esquerda.svg"></button>
 38 |                 <h1>Most <br><span>Popular</span></h1>
 39 |             </div>
 40 | 
 41 |             <div>
 42 |                 <span>Cart (3)</span>
 43 |                 <i class="fas fa-search"></i>
 44 |             </div>
 45 | 
 46 |         </header>
 47 | 
 48 |         <main>
 49 |             <ul>
 50 |                 <li>Side View</li>
 51 |                 <li>Front View</li>
 52 |             </ul>
 53 | 
 54 |             <article class="cards">
 55 | 
 56 |                 <section class="card_container">
 57 | 
 58 |                     <div class="card">
 59 |                         <img src="./img/black_shoe.jpeg">
 60 | 
 61 | 
 62 |                         <div class="content_card">
 63 | 
 64 |                             <h2>Nike Air Yeezy 2</h2>
 65 |                             <h2>Red October</h2>
 66 | 
 67 |                             <label>$ 499<span>.00</span></label>
 68 | 
 69 |                             <span>
 70 |                                 <a href="#">View</a>
 71 |                                 <button><i class="fas fa-ellipsis-h"></i></button>
 72 |                             </span>
 73 |                         </div>
 74 | 
 75 |                     </div>
 76 |                     <div class="card">
 77 |                         <img src="./img/black_shoe.jpeg">
 78 | 
 79 | 
 80 |                         <div class="content_card">
 81 | 
 82 |                             <h2>Nike Air Yeezy 2</h2>
 83 |                             <h2>Red October</h2>
 84 | 
 85 |                             <label>$ 499<span>.00</span></label>
 86 | 
 87 |                             <span>
 88 |                                 <a href="#">View</a>
 89 |                                 <button><i class="fas fa-ellipsis-h"></i></button>
 90 |                             </span>
 91 |                         </div>
 92 | 
 93 |                     </div>
 94 |                     <div class="card">
 95 |                         <img src="./img/black_shoe.jpeg">
 96 | 
 97 | 
 98 |                         <div class="content_card">
 99 | 
100 |                             <h2>Nike Air Yeezy 2</h2>
101 |                             <h2>Red October</h2>
102 | 
103 |                             <label>$ 499<span>.00</span></label>
104 | 
105 |                             <span>
106 |                                 <a href="#">View</a>
107 |                                 <button><i class="fas fa-ellipsis-h"></i></button>
108 |                             </span>
109 |                         </div>
110 | 
111 |                     </div>
112 | 
113 |            
114 |                 </section>
115 | 
116 | 
117 |                 <footer class="cards_container_footer">
118 |                     <ul>
119 |                         <li>Popular</li>
120 |                         <li>New Arrivals</li>
121 |                         <li>Categories</li>
122 |                     </ul>
123 |                 </footer>
124 | 
125 |             </article>
126 | 
127 |         </main>
128 | 
129 | 
130 |     </section>
131 | 
132 | </body>
133 | 
134 | </html>


--------------------------------------------------------------------------------
/Shoes-shop/style.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap'); */
  2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap');
  3 | 
  4 | :root{
  5 |     --primary:#FA494B;
  6 |     --white:#F7F6F6;
  7 |     --dark-gray:#525252;
  8 |     --light-gray:#BBBBBB;
  9 | }
 10 | 
 11 | *{
 12 |  margin: 0;
 13 |  padding: 0;
 14 |  cursor: context-menu;
 15 |  box-sizing: border-box;
 16 |  outline: 0;
 17 |  border: 0;
 18 |  font-family:'Poppins',sans-serif;
 19 | }
 20 | 
 21 | body{
 22 |     background: white;
 23 |     height: 100vh;
 24 |     width: 100%;
 25 |     display: grid;
 26 |     grid-template-columns: 52% 48%;
 27 | }
 28 | 
 29 | 
 30 | section.shoe{
 31 |     background: var(--primary);
 32 |     color: white;
 33 |     overflow: hidden;
 34 |     display: flex;
 35 |     flex-direction: column;
 36 |     justify-content: space-between;
 37 |     padding: 1.5rem 3rem;
 38 | }
 39 | 
 40 | section.shoe header img{
 41 |     width: 3rem;
 42 | }
 43 | 
 44 | 
 45 | section.shoe > img{
 46 |     width: 680px;
 47 |     transform: translateX(-40px);
 48 | }
 49 | 
 50 | section.shoe footer.shoe_footer{
 51 |    
 52 |     transform: translateY(-30px);
 53 | }
 54 | 
 55 | 
 56 | section.shoe footer.shoe_footer h1{
 57 |     
 58 |     font-weight: 200;
 59 |     line-height: 2rem;
 60 | }
 61 | 
 62 | section.shoe footer.shoe_footer h1:nth-child(n+3){
 63 |     
 64 |     font-weight: 500;
 65 |         
 66 | }
 67 | 
 68 | section.shoe footer.shoe_footer div{
 69 |             
 70 |     margin-top: 2rem;
 71 |     display: flex;
 72 |     justify-content: space-between;
 73 |     align-items: center;
 74 | }
 75 | 
 76 | section.shoe footer.shoe_footer div button{
 77 |             
 78 |     background: none;
 79 |     font-size: 1.6rem;
 80 |     text-align: center;
 81 |     font-weight: 300;
 82 |     color: var(--white);
 83 |     /* transform: translateY(-5px); */
 84 | }
 85 | 
 86 | label span{
 87 |     font-size: .6rem;
 88 |     transform: translateX(-2px);
 89 |     display: inline-flex;
 90 | }
 91 | 
 92 | 
 93 | section.others-shoe{
 94 | 
 95 |     padding: 3rem 0 3rem 1rem;
 96 | }
 97 | 
 98 | section.others-shoe header{
 99 |     display: flex;
100 |     justify-content: space-between;
101 |     align-items: flex-start;
102 |     /* padding-top: 2rem; */
103 | }
104 | 
105 | section.others-shoe header div:first-of-type{
106 | 
107 |     width: 35%;
108 |     height: 100%;
109 |     display: flex;
110 |     justify-content: space-between;
111 | }
112 | 
113 | section.others-shoe header div:first-of-type h1{
114 | 
115 |         font-weight: 300;
116 |     transform: translateY(-8px);
117 | }
118 | 
119 | section.others-shoe header div:first-of-type h1 span{
120 | 
121 |         font-weight: 500;
122 | }
123 | 
124 | section.others-shoe header div:first-of-type button{
125 | 
126 |     width: 35%;
127 |     height: 100%;
128 |     background: none;
129 | }
130 | 
131 | section.others-shoe header div:first-of-type button img{
132 | 
133 |     width: 35%;
134 |     height: 100%;
135 | }
136 | 
137 | section.others-shoe header div:last-of-type{
138 | 
139 |     width: 25%;
140 |     height: 100%;
141 |     display: flex;
142 |     justify-content: space-between;
143 |     margin: 0 2rem;
144 |     align-items: center;
145 | }
146 | 
147 | section.others-shoe header div:last-of-type span{
148 | 
149 |     margin: 0 1rem;
150 |     font-size: .8rem;
151 |     text-transform: uppercase;
152 | }
153 | 
154 | section.others-shoe header div:last-of-type i{
155 | 
156 |         color: #888;
157 | }
158 | 
159 | main{
160 |     margin-top: 3rem;
161 |     padding: 0 0 0 1rem ;
162 |     display: grid;
163 |     grid-template-columns: 20px 1fr;
164 |     overflow: hidden;
165 | }
166 | 
167 | 
168 | 
169 | main > ul{
170 |     display: flex;
171 |     writing-mode: vertical-rl;
172 |     list-style: none;
173 |     transform: translateX(20px);
174 | }
175 | 
176 | main > ul li{
177 |     font-size: .7rem;
178 |     margin: 2rem 0;
179 |     transform: rotate(-180deg);
180 | }
181 | 
182 | main > ul li:last-child{
183 |     color: #888;
184 | }
185 | 
186 | section.card_container{
187 |     display: flex;
188 |     overflow: hidden;
189 |     margin: 0 2rem 2rem 2rem;
190 |     height: 460px;
191 |     width: 100%;
192 |     overflow: scroll;
193 | }
194 | 
195 | section.card_container::-webkit-scrollbar{
196 |     background: none;
197 |     height: 8px;
198 | }
199 | 
200 | 
201 | 
202 | 
203 | section .cards{
204 |     
205 |     overflow: hidden;
206 | }
207 | 
208 | section.card_container div.card{
209 |     width: 100%;
210 |     box-shadow:  10px 10px 30px  #ccc;
211 |     margin: 1rem 2rem 0 1rem;
212 |     width: auto;
213 |     min-width: 220px;
214 |     height: 86%;  
215 |     overflow: hidden;
216 | }
217 | 
218 | div.content_card{
219 |     margin: 1.5rem 0rem;
220 |     display: flex;
221 |     padding: 0 1rem;
222 |     flex-direction: column;
223 |     justify-content: space-between;
224 | }
225 | 
226 | div.content_card h2{
227 |     font-size: 1rem;
228 |     color: var(--dark-gray);
229 | }
230 | 
231 | div.content_card label{
232 |     margin-top: 1rem;
233 |     font-weight: 500;
234 | }
235 | 
236 | div.content_card label span{
237 |     margin-left: .3rem;
238 | 
239 | }
240 | 
241 | div.content_card > span{
242 |     margin: 2rem 0 0 0;
243 |     font-weight: 500;
244 |     display: flex;
245 |     justify-content: space-between;
246 | }
247 | 
248 | div.content_card span a{
249 |     color: var(--light-gray);
250 |     font-size: .8rem;
251 |     text-decoration: none;
252 |     cursor: pointer;
253 | }
254 | 
255 | div.content_card span button{
256 |     color: var(--light-gray);
257 |     background: none;
258 |     cursor: pointer;
259 |     width: 20px;
260 |     height: 20px;
261 | }
262 | 
263 | 
264 | 
265 | 
266 | div.content_card h2:nth-child(1){
267 | 
268 |     font-weight: 300;
269 | }
270 | 
271 | 
272 | section.card_container div.card img{
273 |     width: 17rem;
274 |     transform: translateX(-50px);
275 | }
276 | 
277 | section .cards footer.cards_container_footer ul{
278 |     
279 |     display: flex;
280 |     list-style: none;
281 |     margin-left: 2rem;
282 | }
283 | 
284 | 
285 | section .cards footer.cards_container_footer li{
286 |     
287 |     margin: 0 1rem;
288 |     font-size: .8rem;
289 | }
290 | 


--------------------------------------------------------------------------------
/Sonic/img/paramount.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Sonic/img/paramount.png


--------------------------------------------------------------------------------
/Sonic/img/ring.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Sonic/img/ring.png


--------------------------------------------------------------------------------
/Sonic/img/ringbg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Sonic/img/ringbg.png


--------------------------------------------------------------------------------
/Sonic/img/sonic1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Sonic/img/sonic1.png


--------------------------------------------------------------------------------
/Sonic/img/sonic2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Sonic/img/sonic2.png


--------------------------------------------------------------------------------
/Sonic/img/sonic3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Sonic/img/sonic3.png


--------------------------------------------------------------------------------
/Sonic/img/sonic4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/Sonic/img/sonic4.png


--------------------------------------------------------------------------------
/Sonic/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="style.css">
 7 |     <script defer src="./js.js"></script>
 8 |     <title>Sonic</title>
 9 | </head>
10 | <body>
11 | 
12 |     <header>
13 |         <img src="./img/paramount.png" alt="logo">
14 |         <label for="check">
15 |             <input type="checkbox" id="check" /> 
16 |             <span></span>
17 |             <span></span>
18 |             <span></span>
19 |           </label>
20 |     </header>
21 | 
22 |     <main>
23 |         <header>
24 |             <ul>
25 |                 <li>Character</li>
26 |                 <li>Strength</li>
27 |                 <li>Attack</li>
28 |                 <li>Defense</li>
29 |             </ul>
30 |         </header>
31 | 
32 | 
33 |         <section>
34 |             
35 |             <article>
36 | 
37 |                 <h1>Sonic</h1>
38 |                 <h3>The fastest</h3>
39 |                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque proin orci pellentesque nulla ac. Mi egestas urna tortor, mollis in ullamcorper porta sodales pretium. Vulputate lobortis amet amet erat viverra pellentesque tristique etiam augue. Consequat arcu elementum cras dui ultricies donec nisl lectus sed.</p>
40 |                 
41 |                 <button>Escolher</button>
42 |                 
43 |             </article>
44 | 
45 |             <figure>
46 | 
47 |                 <img src="./img/sonic1.png" alt="sonic1" class="carrousel">
48 |                 <img src="./img/sonic2.png" alt="sonic1" class="carrousel">
49 |                 <img src="./img/sonic3.png" alt="sonic1" class="carrousel">
50 |                 <img src="./img/sonic4.png" alt="sonic1" class="carrousel">
51 | 
52 |                 <figcaption>
53 |                     <span>Classificação</span>
54 | 
55 |                     <div>
56 |                         <img src="./img/ring.png">
57 |                         <img src="./img/ring.png">
58 |                         <img src="./img/ring.png">
59 |                         <img src="./img/ring.png">
60 |                         <img src="./img/ring.png">
61 |                     </div>
62 | 
63 |                 </figcaption>
64 |                         <footer>
65 |                             <label class="markup"></label>
66 |                             <label class="markup"></label>
67 |                             <label class="markup"></label>
68 |                             <label class="markup"></label>
69 |                         </footer>
70 |             </figure>
71 |             
72 |         </section>
73 |     </main>
74 |     
75 | </body>
76 | </html>


--------------------------------------------------------------------------------
/Sonic/js.js:
--------------------------------------------------------------------------------
 1 | let carrouselImages = ["./img/sonic1.png", "./img/sonic2.png"];
 2 | 
 3 | let current = 0;
 4 | 
 5 | let domIMg = document.getElementsByClassName("carrousel");
 6 | let markup = document.getElementsByClassName("markup");
 7 | 
 8 | // console.log((markup.className += "red"));
 9 | 
10 | function sSlides() {
11 |   for (let i = 0; i < domIMg.length; i++) {
12 |     domIMg[i].style.display = "none";
13 |     markup[i].className = markup[i].className.replace("active", "");
14 |   }
15 | 
16 |   if (current >= domIMg.length) {
17 |     current = 0;
18 |   }
19 | 
20 |   markup[current].classList.add("active");
21 | 
22 |   domIMg[current].style.display = "block";
23 |   setTimeout(sSlides, 2000);
24 |   current += 1;
25 | }
26 | 
27 | sSlides();
28 | 


--------------------------------------------------------------------------------
/Sonic/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&family=Ubuntu:wght@300;400;500;700&display=swap");
  2 | 
  3 | :root {
  4 |   --primary: #444cf7;
  5 |   --gradient-one: #454ef9;
  6 |   --gradient-two: #3038e5;
  7 |   --light-gray: #a0a0a0;
  8 |   --very-light-gray: #d2d2d2;
  9 |   --medium-gray: #484848;
 10 | }
 11 | 
 12 | * {
 13 |   margin: 0;
 14 |   padding: 0;
 15 |   box-sizing: border-box;
 16 |   outline: 0;
 17 |   border: 0;
 18 | }
 19 | 
 20 | body {
 21 |   height: 100vh;
 22 | }
 23 | 
 24 | body > header {
 25 |   display: flex;
 26 |   justify-content: space-between;
 27 |   align-items: center;
 28 |   padding: 0.8rem 1rem 0 1.5rem;
 29 | }
 30 | 
 31 | header > img {
 32 |   width: 5%;
 33 | }
 34 | 
 35 | body > header label {
 36 |   display: flex;
 37 |   flex-direction: column;
 38 |   width: 70px;
 39 |   cursor: pointer;
 40 |   align-items: flex-end;
 41 |   transform: scale(0.7);
 42 | }
 43 | 
 44 | body > header label span {
 45 |   background: #3038e5;
 46 |   border-radius: 10px;
 47 |   height: 7px;
 48 |   margin: 7px 0;
 49 |   transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
 50 | }
 51 | 
 52 | body > header label span:nth-of-type(1) {
 53 |   width: 100%;
 54 | }
 55 | 
 56 | body > header label span:nth-of-type(2) {
 57 |   width: 50%;
 58 | }
 59 | 
 60 | body > header label span:nth-of-type(3) {
 61 |   width: 75%;
 62 | }
 63 | 
 64 | body > header label input[type="checkbox"] {
 65 |   display: none;
 66 | }
 67 | 
 68 | input[type="checkbox"]:checked ~ span:nth-of-type(1) {
 69 |   transform-origin: bottom;
 70 |   transform: rotatez(45deg) translate(12px, 13px);
 71 | }
 72 | 
 73 | input[type="checkbox"]:checked ~ span:nth-of-type(2) {
 74 |   transform-origin: top;
 75 |   transform: rotatez(-45deg) translate(5px, -12px);
 76 | }
 77 | 
 78 | input[type="checkbox"]:checked ~ span:nth-of-type(3) {
 79 |   /* background: red; */
 80 |   transform-origin: bottom;
 81 |   width: 50%;
 82 |   transform: translate(-25px, -10px) rotatez(-45deg);
 83 | }
 84 | 
 85 | main {
 86 |   display: flex;
 87 |   align-items: center;
 88 |   height: calc(100vh - 76px);
 89 | }
 90 | 
 91 | main header {
 92 |   max-width: 200px;
 93 |   width: 100%;
 94 |   display: flex;
 95 |   justify-content: center;
 96 | }
 97 | 
 98 | main header ul {
 99 |   list-style: none;
100 |   display: flex;
101 |   flex-direction: row-reverse;
102 |   transform: rotate(-90deg);
103 | }
104 | 
105 | @keyframes animaMenu {
106 |   from {
107 |     transform: translateX(-80px);
108 |     opacity: 0;
109 |   }
110 |   to {
111 |     transform: translateX(0px);
112 |     opacity: 1;
113 |   }
114 | }
115 | 
116 | main header ul li {
117 |   margin: 0 1.5rem;
118 |   font-family: "Roboto";
119 |   color: var(--medium-gray);
120 |   font-weight: normal;
121 |   cursor: pointer;
122 |   font-size: 14px;
123 |   animation: animaMenu 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
124 |   opacity: 0;
125 | }
126 | 
127 | main header ul li:nth-of-type(1) {
128 |   animation-delay: 0.2s;
129 | }
130 | 
131 | main header ul li:nth-of-type(2) {
132 |   animation-delay: 0.8s;
133 | }
134 | 
135 | main header ul li:nth-of-type(3) {
136 |   animation-delay: 1.4s;
137 | }
138 | 
139 | main header ul li:nth-of-type(4) {
140 |   animation-delay: 2s;
141 | }
142 | 
143 | main header ul li:first-of-type {
144 |   color: var(--gradient-one);
145 |   font-weight: 500;
146 | }
147 | 
148 | main section {
149 |   display: flex;
150 |   align-items: center;
151 | }
152 | 
153 | main section article {
154 |   max-width: 45%;
155 |   margin-left: 2rem;
156 | }
157 | 
158 | @keyframes animatexto {
159 |   from {
160 |     transform: translateX(50px);
161 |     opacity: 0;
162 |   }
163 |   to {
164 |     transform: translateX(0);
165 |     opacity: 1;
166 |   }
167 | }
168 | 
169 | main section article h1 {
170 |   color: var(--primary);
171 |   font-family: "Ubuntu";
172 |   font-size: 8rem;
173 |   font-weight: normal;
174 |   margin-bottom: 0.2rem;
175 |   opacity: 0;
176 |   animation: animatexto 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
177 | }
178 | 
179 | main section article h3 {
180 |   color: var(--light-gray);
181 |   font-family: "Ubuntu";
182 |   font-weight: normal;
183 |   margin-bottom: 3rem;
184 |   font-size: 2.6rem;
185 |   opacity: 0;
186 |   animation: animatexto 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
187 | }
188 | 
189 | main section article p {
190 |   color: var(--medium-gray);
191 |   font-family: "Ubuntu";
192 |   font-weight: normal;
193 |   margin-bottom: 3rem;
194 |   font-size: 1.2rem;
195 |   max-width: 82%;
196 |   opacity: 0;
197 |   animation: animatexto 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
198 | }
199 | 
200 | main section article button {
201 |   color: #fff;
202 |   font-family: "Ubuntu";
203 |   font-weight: normal;
204 |   margin-bottom: 3rem;
205 |   font-size: 1.2rem;
206 |   padding: 1rem;
207 |   background: linear-gradient(
208 |     180deg,
209 |     var(--gradient-one) 0%,
210 |     var(--gradient-one) 0.01%,
211 |     var(--gradient-two) 100%
212 |   );
213 |   width: 130px;
214 | 
215 |   border-radius: 70px 30px 100px 70px;
216 |   box-shadow: 0px 4px 10px #454ef9;
217 |   transition: 0.5s box-shadow, 0.5s transform;
218 |   cursor: pointer;
219 |   opacity: 0;
220 |   animation: animatexto 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
221 |   animation-delay: 0.3s;
222 | }
223 | 
224 | main section article button:hover {
225 |   box-shadow: 0px 10px 15px #454ef9;
226 |   transform: scale(1.02);
227 | }
228 | 
229 | figure {
230 |   width: 90%;
231 |   display: flex;
232 |   flex-direction: column;
233 |   justify-content: center;
234 |   align-items: center;
235 |   background: url("./img/ringbg.png") no-repeat;
236 |   background-size: 96% 80%;
237 |   background-position: center -10px;
238 |   transform: translateX(-50px);
239 | }
240 | 
241 | figure > img {
242 |   max-width: 45%;
243 |   height: 540px;
244 |   animation: carrouselEffect 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6);
245 | }
246 | 
247 | figure figcaption {
248 |   display: flex;
249 |   flex-direction: column;
250 |   transform: translate(-80px, -10px);
251 |   margin: 1.2rem 0;
252 | }
253 | 
254 | @keyframes carrouselEffect {
255 |   from {
256 |     opacity: 0;
257 |     transform: translateX(50px);
258 |   }
259 | 
260 |   to {
261 |     opacity: 1;
262 |     transform: translateX(0);
263 |   }
264 | }
265 | 
266 | figure figcaption span {
267 |   color: var(--gradient-one);
268 |   font-family: "Ubuntu";
269 |   margin-bottom: 1rem;
270 | }
271 | 
272 | figure figcaption div img {
273 |   width: 25px;
274 | }
275 | 
276 | figure footer {
277 |   height: 20px;
278 |   display: flex;
279 | }
280 | 
281 | figure footer label {
282 |   background: var(--very-light-gray);
283 |   display: block;
284 |   width: 10px;
285 |   height: 10px;
286 |   border-radius: 50%;
287 |   margin: 0 0.5rem;
288 | }
289 | 
290 | .active {
291 |   background: var(--primary);
292 | }
293 | 


--------------------------------------------------------------------------------
/Upload-form/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  8 |     <link rel="stylesheet" href="style.css">
  9 |     <title>Upload</title>
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |     <section>
 15 | 
 16 |         <header>
 17 |             <h1>Upload files</h1>
 18 |             <span class="close"></span>
 19 |         </header>
 20 | 
 21 |         <main>
 22 | 
 23 |             <div class="upload-area">
 24 |                 <span>
 25 |                     <img src="./upload.svg" alt="Upload icon">
 26 | 
 27 |                     <span class="text-upload">
 28 |                         <p>Drop files to upload or <label for="file">browse</label></p>
 29 |                     </span>
 30 |                     <input type="file" id="file">
 31 | 
 32 |                 </span>
 33 |             </div>
 34 | 
 35 |             <div class="form-container">
 36 | 
 37 |                 <header>
 38 |                     <ul>
 39 |                         <li><label>Options</label></li>
 40 |                         <li><label>Description</label></li>
 41 |                         <li><label>Advanced</label></li>
 42 |                     </ul>
 43 |                 </header>
 44 | 
 45 |                 <form>
 46 | 
 47 |                     <div class="emailNotify">
 48 |                         <label>Notify by email</label>
 49 |                         <span>
 50 |                             <input type="text">
 51 |                             <label class="plusIcon">+</label>
 52 |                         </span>
 53 |                     </div>
 54 |                     
 55 |                     <div class="input-group">
 56 |                         
 57 |                         
 58 |                         <div class="category">
 59 |                             <label>Category</label>
 60 |                             <span>
 61 |                                 
 62 |                                 <input type="text">
 63 |                                 <label class="fas fa-chevron-down"></label>
 64 |                                 <ul>
 65 |                                     <li><span>Image</span></li>
 66 |                                     <li><span>Document</span></li>
 67 |                                     <li><span>Link</span></li>
 68 |                                 </ul>
 69 |                             </span>
 70 |                         </div>
 71 |                         
 72 |                         <div class="privacy">
 73 |                             <label>Privacy</label>
 74 |                             <span>
 75 |                                 <input type="text">
 76 |                                 <label class="fas fa-chevron-down"></label>
 77 |                                 <ul>
 78 |                                     <li><span>Secure</span></li>
 79 |                                     <li><span>Not Secure</span></li>
 80 |                                     <li><span>Default</span></li>
 81 |                                 </ul>
 82 |                             </span>
 83 |                         </div>
 84 |                     </div>
 85 | 
 86 |                     <span class="notfy">
 87 |                         <p>
 88 |                             <b>Nobody</b>
 89 |                             will be notified of this file upload
 90 |                         </p>
 91 |                         <label for="notify">
 92 |                             <input type="checkbox" id="notify">
 93 |                             Send me a copy
 94 |                         </label>
 95 |                     </span>
 96 | 
 97 |                     <div class="buttons">
 98 |                         <button class="upload">Upload</button>
 99 |                         <button class="cancel">Cancel</button>
100 |                     </div>
101 | 
102 |                     <label class="prbl">Having problems? Try the <a href="#">basic uploader</a></label>
103 | 
104 |                 </form>
105 | 
106 |             </div>
107 |         </main>
108 |     </section>
109 | 
110 | </body>
111 | 
112 | </html>


--------------------------------------------------------------------------------
/Upload-form/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
  2 | 
  3 | :root{
  4 | 
  5 |     --primary:#0BB5D9;
  6 |     --title:#242424;
  7 |     --text:#C7C7C7;
  8 |     --white:#FFFFFF;
  9 | }
 10 | 
 11 | *{
 12 |     margin:0;
 13 |     padding:0;
 14 |     box-sizing: border-box;
 15 |     outline: 0;
 16 |     border: 0;
 17 |     font-family: sans-serif;
 18 | }
 19 | 
 20 | button,a{
 21 |     cursor: pointer;
 22 | }
 23 | 
 24 | body{
 25 |     height: 100vh;
 26 |     width: 100%;
 27 |     display: grid;
 28 |     place-items: center;
 29 |     background: var(--primary);
 30 | }
 31 | 
 32 | section{
 33 |     width: 90%;
 34 |     max-height: 740px;
 35 |     height: 100%;
 36 |     background: var(--white);
 37 |     box-shadow:  5px 20px 40px -20px #777;
 38 | }
 39 | 
 40 | section > header{
 41 |     width: 100%;
 42 |     height: 110px;
 43 |     border-bottom: 1px solid;
 44 |     border-color: #ddd;
 45 |     display: flex;
 46 |     justify-content: space-between;
 47 |     align-items: center;
 48 |     padding: 0 4rem 0 3rem;
 49 | }
 50 | 
 51 | section > header h1{
 52 |     color: var(--title);
 53 |     font-size: 2rem;
 54 |     font-weight: 500;
 55 | }
 56 | 
 57 | section > header span.close,
 58 | section > header span.close::after{
 59 | 
 60 |     background: #ccc;
 61 |     width: 2px;
 62 |     height: 35px;
 63 |     display: block;
 64 | }
 65 | 
 66 | section > header span.close{
 67 | 
 68 |     transform: rotate(-45deg);
 69 |     cursor: pointer;
 70 | }
 71 | 
 72 | section > header span.close::after{
 73 |     content: "";
 74 |     transform: rotate(90deg);
 75 | }
 76 | 
 77 | main{
 78 |     display: grid;
 79 |     grid-template-columns: 50% 50%;
 80 |     padding: 4rem 6rem 4rem 4rem;
 81 |     height: 85%;
 82 |     column-gap: 2.5rem;
 83 | }
 84 | 
 85 | 
 86 | main div.upload-area{
 87 |     background: #FCFCFC;
 88 |     display: grid;
 89 |     place-items: center;
 90 |     height: 100%;
 91 |     border: 3.5px dashed #ddd;
 92 |     transition: .5s;
 93 | }
 94 | 
 95 | main div.upload-area:hover{
 96 |     background: #eee;
 97 |     
 98 | }
 99 | 
100 | main div.upload-area span{
101 |     display: flex;
102 |     flex-direction: column;
103 |     align-items: center;
104 |     height: 30%;
105 |     width: 100%;
106 | }
107 | 
108 | main div.upload-area span input{
109 |     display: none;
110 | }
111 | 
112 | main div.upload-area span img{
113 |     max-width: 12%;
114 |     
115 | }
116 | 
117 | main div.upload-area span span.text-upload{
118 |     color: #555;
119 |     font-size: 1.3rem;
120 |     font-weight: 600;
121 |     margin-top: 2rem;
122 |     width: 43%;
123 |     text-align: center;
124 |     line-height: 2rem;
125 | }
126 | 
127 | main div.upload-area span label{
128 |     color: var(--primary);
129 |     font-size: 1.3rem;
130 |     font-weight: 500;
131 |     text-decoration: underline var(--primary);
132 |     cursor: pointer;
133 | }
134 | 
135 | 
136 | main div.form-container header{
137 |     width: 100%;
138 |     height: 2.2rem;
139 |     display: flex;
140 |     justify-content: flex-start;
141 | }
142 | 
143 | 
144 | main div.form-container header ul{
145 |     display: flex;
146 |     list-style: none;
147 |     align-items: center;
148 |     display: flex;
149 |     width: 100%;
150 |     border-bottom: 3px solid #eee;
151 | }
152 | 
153 | 
154 | main div.form-container header ul li{
155 |     text-align: center;
156 |     list-style: none;
157 |     margin: 0 2rem 0 0;
158 |     font-size: 1.1rem;
159 |     height: 100%;
160 |     width: 20%;
161 |     display: grid;
162 |     height: 100%;
163 |     align-items: flex-start;
164 |     position: relative;
165 |     color: var(--text);
166 | }
167 | 
168 | main div.form-container header ul li:first-of-type{
169 | 
170 |     font-weight: 600;
171 |     color: var(--title);    
172 | }
173 | 
174 | main div.form-container header ul li:first-of-type::after{
175 |     content: "";
176 |     background: var(--primary);
177 |     width: 100px;
178 |     height: 4px;
179 |     position: absolute;
180 |     bottom: -3px;
181 | }
182 | 
183 | form{
184 |     margin-top: 3rem;
185 | }
186 | 
187 | 
188 | form  div > label{
189 |     color:Red;
190 |     font-weight: 600;
191 |     color: var(--title);
192 |     font-size: 1.1rem;
193 |     display: block;
194 | }
195 | 
196 | form div.input-group{
197 |     display: grid;
198 |     grid-template-columns: repeat(2,minmax(0,1fr));
199 |     column-gap: 2rem;
200 | }
201 | 
202 | form div.input-group{
203 |     display: grid;
204 |     grid-template-columns: repeat(2,minmax(0,1fr));
205 |     column-gap: 2rem;
206 | }
207 | 
208 | form  div > span{
209 |     display: flex;
210 |     height: 50px;
211 |     width: 100%;
212 |     border: 3px solid #eee;
213 |     align-items: center;
214 |     justify-content: space-between;
215 |     border-radius: 8px;
216 |     margin: .5rem auto 1.2rem auto;
217 |     color: #bbb;
218 |     position: relative;
219 | }
220 | 
221 | .input-group div span input:focus ~ ul{
222 | 
223 |     display: block;
224 |     opacity: 1;
225 | }
226 | 
227 | .input-group div span ul{
228 |     display: none;
229 |     opacity: 0;
230 |     position: absolute;
231 |     background: #fff;
232 |     top:50px;
233 |     width: 100%;
234 |     height: auto;
235 |     list-style:none;
236 |     border-radius: 8px;
237 |     box-shadow: 0 15px 30px -10px #aaa;
238 | }
239 | 
240 | .input-group span ul li{
241 |     width: 100%;
242 |     height: 50px;
243 |     border: .5px solid #eee;
244 |     display: flex;
245 |     align-items: center;
246 |     padding: 0 1rem;
247 |     transition: .5s;
248 |     cursor: context-menu;
249 | }
250 | 
251 | .input-group span ul li:hover{
252 |     background: #eee;
253 | }
254 | 
255 | form  div > span input{
256 |     color: #aaa;
257 |     font-size: 1rem;
258 |     max-width: 90%;
259 |     padding: 0 1rem;
260 | }
261 | 
262 | div.emailNotify input{
263 |     width: 100%;
264 | }
265 | 
266 | form  div > span label{
267 |     transform: translate(-1rem,.1rem);
268 | }
269 | 
270 | span.notfy{
271 |     display: block;
272 |     color: #777;
273 |     margin: 1rem auto;
274 | }
275 | 
276 | span.notfy b{
277 |     color: #444;
278 | }
279 | 
280 | span.notfy label{
281 | 
282 |     color: #555;
283 |     font-size: 1rem;
284 |     display: block;
285 |     margin: 1rem auto auto auto;
286 |     display: flex;
287 |     align-items: center;
288 | }
289 | 
290 | span.notfy label input[type="checkbox"]{
291 | 
292 |     width: 1rem;
293 |     height: 1rem;
294 |     margin-right: .5rem;
295 | }
296 | 
297 | div.buttons{
298 |     display: flex;
299 |     width: 85%;
300 |     height: 60px;
301 |     margin:2.2rem 0 ;
302 | }
303 | 
304 | div.buttons button{
305 |     width: 50%;
306 |     margin: 0 1rem 0 0;
307 |     border-radius: 5px;
308 |     font-size: 1rem;
309 |     background: none;
310 |     transition: opacity 1s;
311 | }
312 | 
313 | div.buttons button:first-of-type{
314 |     background: var(--primary);
315 |     color: var(--white);
316 | }
317 | 
318 | div.buttons button:first-of-type:hover{
319 |     opacity: .7;
320 | }
321 | 
322 | div.buttons button:last-of-type{
323 |     text-align: left;
324 |     color: #777;
325 |     margin-left: 1rem;
326 | }
327 | 
328 | label.prbl{
329 |     color: #aaa;
330 |     font-size: 1.1rem;
331 | }
332 | 
333 | label.prbl a{
334 |     color: var(--primary);
335 | }


--------------------------------------------------------------------------------
/Upload-form/upload.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 480.24 480.24" style="enable-background:new 0 0 480.24 480.24;" fill="#ccc" xml:space="preserve">
 5 | <g>
 6 | 	<g>
 7 | 		<g>
 8 | 			<path d="M391.86,144.552c0.16-2.712,0.248-5.464,0.248-8.312c0.09-59.919-39.046-112.838-96.364-130.3
 9 | 				c-71.85-21.89-147.842,18.61-169.732,90.46c-2.024-0.104-3.976-0.16-5.904-0.16c-66.274,0-120,53.726-120,120s53.726,120,120,120
10 | 				h72.088c4.418,0,8-3.582,8-8s-3.582-8-8-8h-72.088c-57.438,0-104-46.562-104-104s46.562-104,104-104
11 | 				c3.688,0.01,7.373,0.211,11.04,0.6c3.93,0.329,7.534-2.2,8.56-6.008c13.401-53.473,61.51-90.937,116.637-90.828
12 | 				c66.274,0.13,119.894,53.962,119.763,120.236c0.021,4.99-0.303,9.975-0.968,14.92c-0.049,0.358-0.073,0.72-0.073,1.081
13 | 				c0.001,4.418,3.583,7.999,8.001,7.999h1.04c44.183,0,80,35.817,80,80c0,44.183-35.817,80-80,80h-95.464c-4.418,0-8,3.582-8,8
14 | 				s3.582,8,8,8h95.464c50.028,0.01,91.677-38.401,95.707-88.267C484.086,195.127,444.707,148.823,391.86,144.552z"/>
15 | 			<polygon points="336.276,245.088 240.108,148.928 143.94,245.088 155.26,256.408 232.108,179.552 232.108,480.24 248.108,480.24 
16 | 				248.108,179.552 324.956,256.408 			"/>
17 | 		</g>
18 | 	</g>
19 | </g>
20 | <g>
21 | </g>
22 | <g>
23 | </g>
24 | <g>
25 | </g>
26 | <g>
27 | </g>
28 | <g>
29 | </g>
30 | <g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | <g>
45 | </g>
46 | <g>
47 | </g>
48 | <g>
49 | </g>
50 | </svg>
51 | 


--------------------------------------------------------------------------------
/User-type/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 9 |     <title>User type</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <section>
15 |         <h1>Select user type</h1>
16 | 
17 | 
18 |         <main class="cards-container">
19 | 
20 |             <div class="card1">
21 |                 <input type="radio" id="ux" name="type">
22 |                 <label for="ux">
23 |                     <div class="content">
24 |                         <i class="fas fa-clone"></i>
25 |                         <span>UX Designer</span>
26 |                     </div>
27 |                 </label>
28 |             </div>
29 | 
30 |             <div class="card1">
31 | 
32 |                 <input type="radio" id="ui" name="type">
33 |                 <label for="ui">
34 |                     <div class="content">
35 |                         <i class="fas fa-pencil-alt"></i>
36 |                         <span>UI Designer</span>
37 |                     </div>
38 |                 </label>
39 |             </div>
40 | 
41 |             <div class="card1">
42 |                 <input type="radio" id="dev" name="type">
43 |                 <label for="dev">
44 |                     <div class="content">
45 | 
46 |                         <i class="fas fa-code"></i>
47 |                         <span>Developer</span>
48 |                     </div>
49 |                 </label>
50 |             </div>
51 | 
52 |         </main>
53 | 
54 |         <span>
55 |             <button>Back</button>
56 |             <button>
57 |                 <i class="fas fa-arrow-right"></i>
58 |             </button>
59 |         </span>
60 | 
61 |     </section>
62 | 
63 | </body>
64 | 
65 | </html>


--------------------------------------------------------------------------------
/User-type/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
  2 | 
  3 | :root{
  4 |     --primary:#BB66CC;
  5 |     --bg:#EEEFF0;
  6 |     --white:#FBFBFA;
  7 |     --text:#1c2730;
  8 | }
  9 | 
 10 | *{
 11 |     margin:0;
 12 |     padding:0;
 13 |     box-sizing:border-box;
 14 |     border:0;
 15 |     outline: 0;
 16 |     font-family: 'Nunito',sans-serif;
 17 | }
 18 | 
 19 | body{
 20 |     background: var(--bg);
 21 |     display: grid;
 22 |     place-items: center;
 23 |     min-height:100vh;
 24 | }
 25 | 
 26 | button,label{
 27 |     cursor: pointer;
 28 | }
 29 | 
 30 | 
 31 | section{
 32 |     display: flex;
 33 |     flex-direction: column;
 34 |     align-items: center;
 35 |     
 36 | }
 37 | 
 38 | section h1{
 39 | 
 40 |     text-transform: uppercase;
 41 |     color: var(--text);
 42 |     font-size: 2.6rem;
 43 |     font-weight: 800;
 44 |     align-self: flex-start;
 45 | }
 46 | 
 47 | section h1::after{
 48 |     content: "";
 49 |     background: var(--primary);
 50 |     width: 40px;
 51 |     height: 8px;
 52 |     border-radius: 50px;
 53 |     display: block;
 54 | }
 55 | 
 56 | main.cards-container{
 57 |     margin: 5rem auto;
 58 |     display: flex;
 59 |     width: 100%;
 60 |     justify-content: space-between;
 61 | }
 62 | 
 63 | 
 64 | input[type="radio"]{
 65 |     display: none;
 66 | }
 67 | 
 68 | input[type="radio"]:checked + label{
 69 |     color: var(--white);
 70 |     animation: .4s animaRadio ease-in-out forwards;
 71 | }
 72 | 
 73 | input[type="radio"]:checked + label * {
 74 |     
 75 |     animation: .1s animaRadioText ease-in-out forwards;
 76 | }
 77 | 
 78 | @keyframes animaRadio{
 79 | 
 80 |     0%{background: var(--white); color: var(--primary);}
 81 |     100%{
 82 |         background: var(--primary); 
 83 |         color: var(--white);
 84 |         box-shadow: 20px 50px 80px -35px var(--primary);
 85 |         transform: scale(1.02);
 86 |     }
 87 | }
 88 | 
 89 | @keyframes animaRadioText{
 90 |     
 91 |     to{color: var(--white);}
 92 | }
 93 | 
 94 | main label{
 95 |     height: 230px;
 96 |     background: var(--white);
 97 |     width: 235px;
 98 |     border-radius: 45px;
 99 |     margin: 0 2rem 0 0;
100 |     display: grid;
101 |     place-items: center;
102 |     transition: .5s;
103 | }
104 | 
105 | main label div.content {
106 |     display: flex;
107 |     flex-direction: column;
108 |     align-items: center;
109 | }
110 | 
111 | main label div.content i{
112 |     font-size: 2.7rem;
113 |     color: var(--primary);
114 | }
115 | 
116 | main label div.content span{
117 |     font-size: 1.4rem;
118 |     color: var(--text);
119 |     font-weight: 800;
120 |     margin-top: 1rem;
121 | }
122 | 
123 | 
124 | section > span button:first-of-type{
125 |     font-size: 1.2rem;
126 |     padding: 15px 60px;
127 |     border-radius: 40px;
128 |     color: #aaa;
129 |     font-weight: 800;
130 |     transition: .5s;
131 |     background: var(--white);
132 | }
133 | 
134 | section > span button:first-of-type:hover{
135 |     color: var(--white);
136 |     background: var(--primary);
137 | }
138 | 
139 | section > span button:last-of-type{
140 |     font-size: 1.2rem;
141 |     height: 55px;
142 |     width: 55px;
143 |     margin-left: 1rem;
144 |     border-radius: 50%;
145 |     color: var(--white);
146 |     font-weight: 700;
147 |     font-size: 1.5rem;
148 |     transition: .5s;
149 |     background: var(--primary);
150 | }
151 | 
152 | section > span button:last-of-type:hover{
153 |     color: var(--white);
154 |     background: var(--primary);
155 |     box-shadow: 5px 10px 30px -5px var(--primary);
156 |     
157 | }
158 | 
159 | 
160 | 
161 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "requires": true,
 3 |   "lockfileVersion": 1,
 4 |   "dependencies": {
 5 |     "@emotion/is-prop-valid": {
 6 |       "version": "0.8.8",
 7 |       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
 8 |       "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
 9 |       "optional": true,
10 |       "requires": {
11 |         "@emotion/memoize": "0.7.4"
12 |       }
13 |     },
14 |     "@emotion/memoize": {
15 |       "version": "0.7.4",
16 |       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
17 |       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
18 |       "optional": true
19 |     },
20 |     "framer": {
21 |       "version": "1.3.2",
22 |       "resolved": "https://registry.npmjs.org/framer/-/framer-1.3.2.tgz",
23 |       "integrity": "sha512-0KmhUp+JFJr8ttVF5gTIXPy5JLBVb42wXYI6yuyoEK956wsKrpO40db23TBh5AIWKtr9cSyTpDWq7LYSMRj3zA=="
24 |     },
25 |     "framer-motion": {
26 |       "version": "4.1.17",
27 |       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz",
28 |       "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==",
29 |       "requires": {
30 |         "@emotion/is-prop-valid": "^0.8.2",
31 |         "framesync": "5.3.0",
32 |         "hey-listen": "^1.0.8",
33 |         "popmotion": "9.3.6",
34 |         "style-value-types": "4.1.4",
35 |         "tslib": "^2.1.0"
36 |       }
37 |     },
38 |     "framesync": {
39 |       "version": "5.3.0",
40 |       "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz",
41 |       "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==",
42 |       "requires": {
43 |         "tslib": "^2.1.0"
44 |       }
45 |     },
46 |     "hey-listen": {
47 |       "version": "1.0.8",
48 |       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
49 |       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
50 |     },
51 |     "popmotion": {
52 |       "version": "9.3.6",
53 |       "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz",
54 |       "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==",
55 |       "requires": {
56 |         "framesync": "5.3.0",
57 |         "hey-listen": "^1.0.8",
58 |         "style-value-types": "4.1.4",
59 |         "tslib": "^2.1.0"
60 |       }
61 |     },
62 |     "style-value-types": {
63 |       "version": "4.1.4",
64 |       "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz",
65 |       "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==",
66 |       "requires": {
67 |         "hey-listen": "^1.0.8",
68 |         "tslib": "^2.1.0"
69 |       }
70 |     },
71 |     "tslib": {
72 |       "version": "2.2.0",
73 |       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
74 |       "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
75 |     }
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/readmeImages/disney.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/readmeImages/disney.jpg


--------------------------------------------------------------------------------
/readmeImages/form.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/readmeImages/form.jpg


--------------------------------------------------------------------------------
/readmeImages/mario.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/readmeImages/mario.png


--------------------------------------------------------------------------------
/readmeImages/playgames_store.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/readmeImages/playgames_store.png


--------------------------------------------------------------------------------
/readmeImages/shoesCard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/readmeImages/shoesCard.jpg


--------------------------------------------------------------------------------
/readmeImages/usertype.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/readmeImages/usertype.jpg


--------------------------------------------------------------------------------
/readmeImages/vpnFinder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/readmeImages/vpnFinder.png


--------------------------------------------------------------------------------
/team-members/.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 | 


--------------------------------------------------------------------------------
/team-members/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "team-members",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.3.2",
 8 |     "@testing-library/user-event": "^7.1.2",
 9 |     "react": "^16.13.1",
10 |     "react-dom": "^16.13.1",
11 |     "react-icons": "^3.11.0",
12 |     "react-scripts": "3.4.3",
13 |     "styled-components": "^5.2.0"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": "react-app"
23 |   },
24 |   "browserslist": {
25 |     "production": [
26 |       ">0.2%",
27 |       "not dead",
28 |       "not op_mini all"
29 |     ],
30 |     "development": [
31 |       "last 1 chrome version",
32 |       "last 1 firefox version",
33 |       "last 1 safari version"
34 |     ]
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/team-members/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/team-members/public/favicon.ico


--------------------------------------------------------------------------------
/team-members/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap"
14 |       rel="stylesheet"
15 |     />
16 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
17 |     <!--
18 |       manifest.json provides metadata used when your web app is installed on a
19 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
20 |     -->
21 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
22 |     <!--
23 |       Notice the use of %PUBLIC_URL% in the tags above.
24 |       It will be replaced with the URL of the `public` folder during the build.
25 |       Only files inside the `public` folder can be referenced from the HTML.
26 | 
27 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
28 |       work correctly both with client-side routing and a non-root public URL.
29 |       Learn how to configure a non-root public URL by running `npm run build`.
30 |     -->
31 |     <title>React App</title>
32 |   </head>
33 |   <body>
34 |     <noscript>You need to enable JavaScript to run this app.</noscript>
35 |     <div id="root"></div>
36 |     <!--
37 |       This HTML file is a template.
38 |       If you open it directly in the browser, you will see an empty page.
39 | 
40 |       You can add webfonts, meta tags, or analytics to this file.
41 |       The build step will place the bundled scripts into the <body> tag.
42 | 
43 |       To begin the development, run `npm start` or `yarn start`.
44 |       To create a production bundle, use `npm run build` or `yarn build`.
45 |     -->
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/team-members/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/team-members/public/logo192.png


--------------------------------------------------------------------------------
/team-members/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/team-members/public/logo512.png


--------------------------------------------------------------------------------
/team-members/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 | 


--------------------------------------------------------------------------------
/team-members/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/team-members/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ConteudoPrincipal from "./components/ConteudoPrincipal";
 3 | import MenuLateral from "./components/MenuLateral";
 4 | import { Container, GlobalStyle } from "./style";
 5 | 
 6 | const App = () => (
 7 |   <Container>
 8 |     <GlobalStyle />
 9 |     <MenuLateral />
10 |     <ConteudoPrincipal />
11 |   </Container>
12 | );
13 | 
14 | export default App;
15 | 


--------------------------------------------------------------------------------
/team-members/src/components/Card/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { ContainerCard } from "./style";
 4 | 
 5 | const Card = props => (
 6 |   <ContainerCard>
 7 |     <img src="https://avatars2.githubusercontent.com/u/31545128?v=4" />
 8 |     <div>
 9 |       <h1>{props.name}</h1>
10 |       <span>{props.country}</span>
11 |     </div>
12 | 
13 |     <p>Peace on Earth A Wonderful With But No Way</p>
14 |   </ContainerCard>
15 | );
16 | 
17 | export default Card;
18 | 


--------------------------------------------------------------------------------
/team-members/src/components/Card/style.js:
--------------------------------------------------------------------------------
 1 | import styled, { keyframes } from "styled-components";
 2 | 
 3 | import { siteColors } from "../../style";
 4 | 
 5 | const { principalContent } = siteColors;
 6 | 
 7 | const animacaoCard = keyframes`
 8 | 
 9 |     from{transform: translateY(30px);opacity:0}
10 |     to{transform: translateY(0px);opacity:1}
11 | `;
12 | 
13 | export const ContainerCard = styled.div`
14 |   background: #fff;
15 |   width: 200px;
16 |   height: 270px;
17 |   box-shadow: 0 0 1px #ccc;
18 |   padding: 2rem 1.5rem 2.5rem 1.5rem;
19 |   display: flex;
20 |   flex-direction: column;
21 |   justify-content: space-between;
22 |   animation: 0.6s ${animacaoCard} ease-in-out;
23 |   transition: 0.3s ease-in-out;
24 |   border: 1px solid transparent;
25 |   cursor: pointer;
26 | 
27 |   &:hover {
28 |     border: 1px solid #ddd;
29 |   }
30 | 
31 |   img {
32 |     max-width: 28%;
33 |     border-radius: 50%;
34 |   }
35 | 
36 |   div {
37 |     transform: translateY(0px);
38 | 
39 |     h1 {
40 |       color: ${principalContent.primary};
41 |       text-transform: uppercase;
42 |       font-size: 1rem;
43 |       letter-spacing: 1px;
44 |     }
45 | 
46 |     span {
47 |       display: block;
48 |       margin-top: 0.2rem;
49 |       color: #bbb;
50 |       font-size: 0.8rem;
51 |     }
52 |   }
53 | 
54 |   p {
55 |     color: #aaa;
56 |     font-weight: 400;
57 |     font-size: 0.9rem;
58 |   }
59 | `;
60 | 


--------------------------------------------------------------------------------
/team-members/src/components/ConteudoPrincipal/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import HeaderP from "../HeaderP";
 4 | import Card from "../Card";
 5 | import { Container } from "./style";
 6 | 
 7 | const ConteudoPrincipal = () => (
 8 |   <Container>
 9 |     <HeaderP members={102} available={14} />
10 | 
11 |     <section>
12 |       <Card name="Danilo Lima" country="India" />
13 |       <Card name="Marcos Lima" country="Japão" />
14 |       <Card name="Sabrina Matos" country="Estados Unidos" />
15 |       <Card name="Renan Almeida" country="Inglaterra" />
16 |       <Card name="Gonçalo Lopez" country="China" />
17 |       <Card name="Maria Antônia" country="Brasil" />
18 |       <Card name="Maria Antônia" country="Brasil" />
19 |       <Card name="Maria Antônia" country="Brasil" />
20 |       <Card name="Maria Antônia" country="Brasil" />
21 |     </section>
22 |   </Container>
23 | );
24 | 
25 | export default ConteudoPrincipal;
26 | 


--------------------------------------------------------------------------------
/team-members/src/components/ConteudoPrincipal/style.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | import { siteColors } from "../../style";
 4 | 
 5 | const { principalContent } = siteColors;
 6 | 
 7 | export const Container = styled.div`
 8 |   padding: 5rem 3.5rem;
 9 |   background: linear-gradient(
10 |     to right,
11 |     ${principalContent.bg1},
12 |     ${principalContent.bg2}
13 |   );
14 | 
15 |   &::-webkit-scrollbar {
16 |     background: #eee;
17 |     width: 5px;
18 |   }
19 | 
20 |   &::-webkit-scrollbar-thumb {
21 |     background: ${principalContent.primary};
22 |     width: 10px;
23 |   }
24 | 
25 |   overflow-y: scroll;
26 | 
27 |   section {
28 |     margin-top: 3rem;
29 |     display: grid;
30 |     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
31 |     column-gap: 0.7rem;
32 |     row-gap: 1.2rem;
33 |     justify-content: space-between;
34 |     max-width: 100%;
35 |   }
36 | `;
37 | 


--------------------------------------------------------------------------------
/team-members/src/components/HeaderP/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { Header } from "./style";
 4 | 
 5 | const HeaderP = props => (
 6 |   <Header>
 7 |     <div>
 8 |       <h1>Team Members</h1>
 9 |       <span>{props.members + " "} Members</span>
10 |     </div>
11 | 
12 |     <div>
13 |       <span>{props.available} Availbale Now</span>
14 |       <h1>View Members</h1>
15 |     </div>
16 |   </Header>
17 | );
18 | 
19 | export default HeaderP;
20 | 


--------------------------------------------------------------------------------
/team-members/src/components/HeaderP/style.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | import { siteColors } from "../../style";
 4 | 
 5 | const { principalContent } = siteColors;
 6 | 
 7 | export const Header = styled.header`
 8 |   display: flex;
 9 |   align-items: center;
10 |   justify-content: space-between;
11 | 
12 |   div:first-of-type {
13 |     text-align: left;
14 | 
15 |     h1 {
16 |       color: ${principalContent.headerTitle};
17 |       font-size: 1.3rem;
18 |     }
19 | 
20 |     span {
21 |       color: #ccc;
22 |       font-weight: 400;
23 |       font-size: 0.7rem;
24 |       margin-top: 12px;
25 |       display: block;
26 |     }
27 |   }
28 | 
29 |   div:last-of-type {
30 |     text-align: right;
31 | 
32 |     h1 {
33 |       color: ${principalContent.headerTitle};
34 |       font-size: 1.3rem;
35 |       margin-top: 12px;
36 |       text-transform: uppercase;
37 |       color: ${principalContent.primary};
38 |       letter-spacing: 1px;
39 |       font-size: 0.8rem;
40 |       font-weight: 500;
41 |     }
42 | 
43 |     span {
44 |       color: ${principalContent.headerTitle};
45 |       font-weight: 500;
46 |       font-size: 0.7rem;
47 |       display: block;
48 |     }
49 |   }
50 | `;
51 | 


--------------------------------------------------------------------------------
/team-members/src/components/MenuLateral/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import {
 4 |   RiDashboardLine,
 5 |   FaRegUser,
 6 |   RiStackFill,
 7 |   GoGraph,
 8 |   FiSettings,
 9 | } from "react-icons/all";
10 | 
11 | import { Container, Header } from "./style";
12 | 
13 | const MenuLateral = () => (
14 |   <Container>
15 |     <Header>
16 |       <img src="https://avatars2.githubusercontent.com/u/31545128?v=4" />
17 |       <div>
18 |         <h2>Alec Iissigonis</h2>
19 |         <button>Edit</button>
20 |       </div>
21 |     </Header>
22 | 
23 |     <ul>
24 |       <li>
25 |         <RiDashboardLine />
26 |         <a href="#">Dashboard</a>
27 |       </li>
28 |       <li>
29 |         <FaRegUser />
30 |         <a href="#">Members</a>
31 |       </li>
32 |       <li>
33 |         <RiStackFill />
34 |         <a href="#">Database</a>
35 |       </li>
36 |       <li>
37 |         <GoGraph />
38 |         <a href="#">Statistics</a>
39 |       </li>
40 |     </ul>
41 | 
42 |     <footer>
43 |       <div>
44 |         <FiSettings />
45 |         <a href="#">Settings</a>
46 |       </div>
47 |     </footer>
48 |   </Container>
49 | );
50 | 
51 | export default MenuLateral;
52 | 


--------------------------------------------------------------------------------
/team-members/src/components/MenuLateral/style.js:
--------------------------------------------------------------------------------
  1 | import styled from "styled-components";
  2 | 
  3 | import { siteColors } from "../../style";
  4 | 
  5 | const { menuLbg } = siteColors;
  6 | 
  7 | export const Container = styled.div`
  8 |   background: linear-gradient(to top, ${menuLbg.bg2}, ${menuLbg.bg1});
  9 |   height: 100%;
 10 |   padding: 4rem 2.5rem;
 11 |   display: flex;
 12 |   flex-direction: column;
 13 |   justify-content: space-between;
 14 |   font-family: sans-serif;
 15 | 
 16 |   ul {
 17 |     list-style: none;
 18 |     transform: translatex(17px);
 19 | 
 20 |     li {
 21 |       opacity: 0.5;
 22 |       display: flex;
 23 |       margin: 0 0 2rem 0;
 24 |       align-items: center;
 25 | 
 26 |       transition: 0.3s ease-in-out;
 27 | 
 28 |       &:hover {
 29 |         opacity: 1;
 30 |       }
 31 | 
 32 |       svg {
 33 |         fill: ${menuLbg.colorFont};
 34 |         font-size: 1.3rem;
 35 |       }
 36 |     }
 37 |   }
 38 | 
 39 |   a {
 40 |     text-decoration: none;
 41 |     font-size: 0.7rem;
 42 |     margin-left: 1rem;
 43 |     font-weight: 600;
 44 |     letter-spacing: 1px;
 45 |     color: ${menuLbg.colorFont};
 46 |     text-transform: uppercase;
 47 |     cursor: pointer;
 48 |   }
 49 | 
 50 |   footer {
 51 |     transform: translatex(17px);
 52 | 
 53 |     div {
 54 |       opacity: 0.5;
 55 |       display: flex;
 56 |       align-items: center;
 57 |       transition: 0.3s ease-in-out;
 58 | 
 59 |       &:hover {
 60 |         opacity: 1;
 61 |       }
 62 | 
 63 |       svg {
 64 |         color: ${menuLbg.colorFont};
 65 |         font-size: 1.3rem;
 66 |       }
 67 |     }
 68 |   }
 69 | `;
 70 | 
 71 | export const Header = styled.header`
 72 |   display: flex;
 73 |   align-items: center;
 74 |   max-width: 80%;
 75 | 
 76 |   img {
 77 |     border-radius: 50%;
 78 |     max-width: 33%;
 79 |     filter: grayscale(1);
 80 |   }
 81 | 
 82 |   div {
 83 |     margin-left: 1.5rem;
 84 | 
 85 |     * {
 86 |       color: ${menuLbg.colorFont};
 87 |     }
 88 | 
 89 |     h2 {
 90 |       font-size: 1rem;
 91 |       font-weight: 400;
 92 |       line-height: 2rem;
 93 |     }
 94 | 
 95 |     button {
 96 |       background: none;
 97 |       border: 0;
 98 |       font-size: 0.7rem;
 99 |       text-transform: uppercase;
100 |       letter-spacing: 0.1rem;
101 |       cursor: pointer;
102 |       transition: 0.2s ease-in-out;
103 | 
104 |       &:hover {
105 |         font-weight: 600;
106 |       }
107 |     }
108 |   }
109 | `;
110 | 


--------------------------------------------------------------------------------
/team-members/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/team-members/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 | 
6 | ReactDOM.render(<App />, document.getElementById("root"));
7 | 


--------------------------------------------------------------------------------
/team-members/src/style.js:
--------------------------------------------------------------------------------
 1 | import styled, { createGlobalStyle } from "styled-components";
 2 | 
 3 | export const siteColors = {
 4 |   menuLbg: {
 5 |     bg1: "#F9A2A4",
 6 |     bg2: "#E76886",
 7 |     colorFont: "#fff",
 8 |   },
 9 | 
10 |   principalContent: {
11 |     bg1: "#FAFAFC",
12 |     bg2: "#E1E4EB",
13 |     headerTitle: "#555",
14 |     lightgray: "#D7DBE4",
15 |     primary: "#E76886",
16 |   },
17 | };
18 | 
19 | export const GlobalStyle = createGlobalStyle`
20 | 
21 |     *{
22 |         margin:0;
23 |         padding:0;
24 |         box-sizing:border-box;
25 |         outline:0;
26 |         cursor:context-menu;
27 |         font-family: "Roboto";
28 |     
29 |     }
30 | 
31 |     body{
32 |         height:100vh;
33 |     }
34 | `;
35 | 
36 | export const Container = styled.section`
37 |   width: 100%;
38 |   height: 100vh;
39 |   display: grid;
40 |   grid-template-columns: 32% 1fr;
41 | `;
42 | 


--------------------------------------------------------------------------------
/vpn-finder/.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 | 


--------------------------------------------------------------------------------
/vpn-finder/README.md:
--------------------------------------------------------------------------------
 1 | <h1>vpnFinder</h1>
 2 | 
 3 | <br/>
 4 | 
 5 | <img src="./src/assets/img/readmeImg.png">
 6 | 
 7 | ## Project
 8 | 
 9 | This project is a UI clone built from a UI design found on the web.
10 | ## Technologies
11 | - ReactJS
12 | - SASS
13 | - Framer Motion
14 | 
15 | ## Running project
16 | 
17 | - 1º - Clone this project to your local machine
18 | - 2º - Install all dependencies running `npm install`
19 | - 3º - Then run `npm start` for a dev server. 
20 | ## Build
21 | 
22 | Run `npm run build` to build the project.


--------------------------------------------------------------------------------
/vpn-finder/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vpn-finder",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.12.0",
 7 |     "@testing-library/react": "^11.2.7",
 8 |     "@testing-library/user-event": "^12.8.3",
 9 |     "node-sass": "^6.0.0",
10 |     "react": "^17.0.2",
11 |     "react-dom": "^17.0.2",
12 |     "react-icons": "^4.2.0",
13 |     "react-scripts": "4.0.3",
14 |     "web-vitals": "^1.1.2"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": [
24 |       "react-app",
25 |       "react-app/jest"
26 |     ]
27 |   },
28 |   "browserslist": {
29 |     "production": [
30 |       ">0.2%",
31 |       "not dead",
32 |       "not op_mini all"
33 |     ],
34 |     "development": [
35 |       "last 1 chrome version",
36 |       "last 1 firefox version",
37 |       "last 1 safari version"
38 |     ]
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/vpn-finder/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/public/favicon.ico


--------------------------------------------------------------------------------
/vpn-finder/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <link rel="preconnect" href="https://fonts.gstatic.com">
 9 |   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
10 |   <meta name="theme-color" content="#000000" />
11 |   <meta name="description" content="Web site created using create-react-app" />
12 |   <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 |   <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |   <title>React App</title>
28 | </head>
29 | 
30 | <body>
31 |   <noscript>You need to enable JavaScript to run this app.</noscript>
32 |   <div id="root"></div>
33 |   <!--
34 |       This HTML file is a template.
35 |       If you open it directly in the browser, you will see an empty page.
36 | 
37 |       You can add webfonts, meta tags, or analytics to this file.
38 |       The build step will place the bundled scripts into the <body> tag.
39 | 
40 |       To begin the development, run `npm start` or `yarn start`.
41 |       To create a production bundle, use `npm run build` or `yarn build`.
42 |     -->
43 | </body>
44 | 
45 | </html>


--------------------------------------------------------------------------------
/vpn-finder/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/public/logo192.png


--------------------------------------------------------------------------------
/vpn-finder/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/public/logo512.png


--------------------------------------------------------------------------------
/vpn-finder/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 | 


--------------------------------------------------------------------------------
/vpn-finder/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/vpn-finder/src/App.js:
--------------------------------------------------------------------------------
  1 | import { Header } from "./components/header";
  2 | 
  3 | import "./App.scss";
  4 | import { Input } from "./components/input";
  5 | import { Button } from "./components/button";
  6 | import { Card } from "./components/card";
  7 | import { useState } from "react";
  8 | import { BiSearch } from "react-icons/bi";
  9 | import { Menu } from "./components/menu";
 10 | 
 11 | import { motion } from 'framer-motion';
 12 | 
 13 | function App() {
 14 | 
 15 |   const container = {
 16 |     hidden: { opacity: 0 },
 17 |     show: {
 18 |       opacity: 1,
 19 |       transition: {
 20 |         staggerChildren: .15,
 21 |         delayChildren: .3,
 22 |     
 23 |       }
 24 |     }
 25 |   }
 26 | 
 27 |   const item = {
 28 |     hidden: { opacity: 0, y: 25 },
 29 |     show: { 
 30 |       opacity: 1 , 
 31 |       y: 0,
 32 |       transition: {
 33 |         
 34 |         ease: "easeInOut",
 35 |         duration: .5
 36 |       }
 37 |     }
 38 |   }
 39 | 
 40 | 
 41 |   const [cardData, setCardData] = useState([
 42 |     {
 43 |       title: "Web Proxy",
 44 |       text: "360 privacy protection / Hide your IP and surf anonymously"
 45 |     }
 46 |   ]);
 47 | 
 48 | 
 49 |   return (
 50 |     <div className="App">
 51 |       <nav>
 52 |         <header>
 53 |           <h1><span>vpn</span>Finder</h1>
 54 |         </header>
 55 |         <Menu />
 56 |       </nav>
 57 |       <main>
 58 |         <Header></Header>
 59 |         <section className="middle-content">
 60 |           <header>
 61 |             <div className="ips">
 62 |               <label>My Ip address</label>
 63 |               <h1>123.57.329.168</h1>
 64 |               <div className="input-container">
 65 |                 <Input bgColor="#3740DC" placeholder="iPv4, iPv6 or Domanin name" />
 66 |                 <Button typeButton="textButton">Ip Lookup</Button>
 67 |               </div>
 68 |             </div>
 69 |             <div className="data-ip">
 70 |               <span>
 71 |                 <label>Country</label>
 72 |                 <h2>Ukraine</h2>
 73 |               </span>
 74 |               <span>
 75 |                 <label>City</label>
 76 |                 <h2>Kharviv</h2>
 77 |               </span>
 78 |               <span>
 79 |                 <label>State/Province</label>
 80 |                 <h2>Kharvivs'ka Oblast'</h2>
 81 |               </span>
 82 |             </div>
 83 |           </header>
 84 |           <motion.div
 85 |             variants={container}
 86 |             initial="hidden"
 87 |             animate="show"
 88 |             className="cards-container">
 89 | 
 90 |             <motion.div variants={item}>
 91 |               <Card as={motion.div} cardData={cardData[0]}>
 92 |                 <div className="input-card">
 93 |                   <Input placeholder="Search" inputContext="card">
 94 |                     <BiSearch />
 95 |                   </Input>
 96 |                 </div>
 97 |               </Card>
 98 |             </motion.div>
 99 | 
100 |             <motion.div variants={item}>
101 |               <Card as={motion.div} variants={item} cardData={cardData[0]}>
102 |                 <div className="input-card">
103 |                   <Input placeholder="Test" inputContext="card">
104 |                     <BiSearch />
105 |                   </Input>
106 |                 </div>
107 |               </Card>
108 |             </motion.div>
109 | 
110 |             <motion.div variants={item}>
111 |               <Card as={motion.div} variants={item} cardData={cardData[0]}>
112 |                 <div className="input-card">
113 |                   <Button typeButton="textButton">Ip Lookup</Button>
114 |                 </div>
115 |               </Card>
116 |             </motion.div>
117 |           </motion.div>
118 |         </section>
119 |       </main>
120 |     </div>
121 |   );
122 | }
123 | 
124 | export default App;
125 | 


--------------------------------------------------------------------------------
/vpn-finder/src/App.scss:
--------------------------------------------------------------------------------
  1 | $color-ip: var(--white);
  2 | $color-label: var(--light-blue);
  3 | $primary: var(--primary);
  4 | 
  5 | .App {
  6 |   display: grid;
  7 |   grid-template-columns: 23% 77%;
  8 | 
  9 |   nav{
 10 |     background: $color-ip;
 11 |     box-shadow: 0 10px 30px rgba($color: #000000, $alpha: .1);
 12 | 
 13 |     header{
 14 |       border-bottom: 1px solid #eee;
 15 |       height: 5rem;
 16 |       line-height: 5rem;
 17 |       padding-left: 3rem;
 18 | 
 19 |       span{
 20 |         color: $primary;
 21 |       }
 22 |     }
 23 | 
 24 |   }
 25 | 
 26 |   main {
 27 |     padding: 2rem 7rem;
 28 |     height: 100vh;
 29 |     max-width: 1200px;
 30 |     margin: 0 auto;
 31 |     width: 100%;
 32 | 
 33 |     .middle-content {
 34 |       margin-top: 0.5rem;
 35 |       min-height: 47vh;
 36 |       height: 47vh;
 37 | 
 38 |       header {
 39 |         display: flex;
 40 |         column-gap: 6rem;
 41 |         align-items: flex-end;
 42 | 
 43 |         .ips {
 44 |           width: 58%;
 45 | 
 46 |           label,
 47 |           h1,
 48 |           .input-container {
 49 |             margin-top: 1.4rem;
 50 |           }
 51 | 
 52 |           label {
 53 |             color: $color-label;
 54 |             text-transform: uppercase;
 55 |             font-size: 0.8rem;
 56 |             font-weight: 700;
 57 |             display: block;
 58 |             transform: translate(0.5rem, 0.7rem);
 59 |           }
 60 | 
 61 |           h1 {
 62 |             font-size: 3rem;
 63 |             color: $color-ip;
 64 |           }
 65 | 
 66 |           .input-container {
 67 |             display: flex;
 68 |             column-gap: 0.6rem;
 69 |             height: 2.8rem;
 70 |             max-width: 500px;
 71 | 
 72 |             button {
 73 |               padding: 0 2rem;
 74 |             }
 75 |           }
 76 |         }
 77 | 
 78 |         .data-ip {
 79 |           display: grid;
 80 |           grid-template-columns: repeat(2, 1fr);
 81 |           justify-self: stretch;
 82 |           gap: 1.8rem 1rem;
 83 | 
 84 |           & span {
 85 |             display: block;
 86 | 
 87 |             label {
 88 |               font-size: 0.7rem;
 89 |               margin-bottom: 0.7rem;
 90 |               display: block;
 91 |               text-transform: uppercase;
 92 |               color: $color-label;
 93 |               font-weight: 700;
 94 |             }
 95 | 
 96 |             h2 {
 97 |               color: $color-ip;
 98 |               font-weight: 700;
 99 |             }
100 | 
101 |             &:last-child {
102 |               grid-column: 1 / 3;
103 |             }
104 |           }
105 |         }
106 |       }
107 | 
108 |       .cards-container {
109 |         margin-top: 3rem;
110 | 
111 |         height: 100%;
112 | 
113 |         display: grid;
114 |         gap: 2rem;
115 |         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
116 |       }
117 |     }
118 |   }
119 | }
120 | 


--------------------------------------------------------------------------------
/vpn-finder/src/assets/img/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/src/assets/img/cloud.png


--------------------------------------------------------------------------------
/vpn-finder/src/assets/img/hidemeVPN.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/src/assets/img/hidemeVPN.jpg


--------------------------------------------------------------------------------
/vpn-finder/src/assets/img/hidemeVPN.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/src/assets/img/hidemeVPN.png


--------------------------------------------------------------------------------
/vpn-finder/src/assets/img/nordVPN.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/src/assets/img/nordVPN.png


--------------------------------------------------------------------------------
/vpn-finder/src/assets/img/pureVPN.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/src/assets/img/pureVPN.png


--------------------------------------------------------------------------------
/vpn-finder/src/assets/img/readmeImg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/src/assets/img/readmeImg.png


--------------------------------------------------------------------------------
/vpn-finder/src/assets/img/zenmateVPN.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilolmc/interfaces-clone/0da3bbd484a738bffb57b073e0cc667695414397/vpn-finder/src/assets/img/zenmateVPN.png


--------------------------------------------------------------------------------
/vpn-finder/src/components/button/button.scss:
--------------------------------------------------------------------------------
 1 | $button-color: var(--white);
 2 | 
 3 | button{
 4 |     padding: .6rem .9rem;
 5 |     cursor: pointer;
 6 |     border-radius: 5px;
 7 |     display: grid;
 8 |     color: $button-color;
 9 |     place-content: center;
10 |     transition: .5s ease;
11 | 
12 |     &:hover{
13 |         filter: brightness(110%);
14 |     }
15 | 
16 |     
17 |     &[typeButton="iconButton"]{
18 |         font-size: 1.2rem;
19 |         background-color: #676DFF;
20 |     }
21 |     
22 |     &[typeButton="textButton"]{
23 |         font-size: .8rem;
24 |         background-color: #32CBB7;
25 |     }
26 | }


--------------------------------------------------------------------------------
/vpn-finder/src/components/button/index.jsx:
--------------------------------------------------------------------------------
1 | import "./button.scss";
2 | 
3 | export const Button = ({ children, bgColor , typeButton}) => {
4 | 
5 |     return <button typeButton={typeButton} style={{backgroundColor : bgColor}}>{children}</button>
6 | }


--------------------------------------------------------------------------------
/vpn-finder/src/components/card/card.scss:
--------------------------------------------------------------------------------
 1 | $card-background: var(--white);
 2 | $card-title: var(--dark-blue);
 3 | $card-text: var(--light-gray);
 4 | $input-gray: var(--very-light-gray);
 5 | 
 6 | .card {
 7 |   border-radius: 5px;
 8 |   background: $card-background;
 9 |   padding: 3rem 2rem 2.5rem;
10 |   height: auto;
11 | 
12 |   figure {
13 |     display: flex;
14 |     flex-direction: column;
15 |     align-items: center;
16 |     justify-content: space-between;
17 |     row-gap: 1.4rem;
18 | 
19 |     span {
20 |       width: 4rem;
21 |       height: 4rem;
22 |       display: grid;
23 |       place-content: center;
24 |       background: $input-gray;
25 |       border-radius: 50%;
26 |       padding: 0.5rem;
27 | 
28 |       img {
29 |         width: 70%;
30 |         display: block;
31 |         margin: 0 auto;
32 |         filter: saturate(1.5) brightness(.74) contrast(1.8);
33 |       }
34 |     }
35 | 
36 |     h2,
37 |     p {
38 |       text-align: center;
39 |     }
40 | 
41 |     h2 {
42 |       color: $card-title;
43 |       font-size: 1.2rem;
44 |     }
45 | 
46 |     p {
47 |       color: $card-text;
48 |       font-size: 0.8rem;
49 |     }
50 | 
51 |     .input {
52 |       height: 2.5rem;
53 |     }
54 | 
55 |     button {
56 |       padding: 1rem 2.4rem;
57 |     }
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/vpn-finder/src/components/card/index.jsx:
--------------------------------------------------------------------------------
 1 | import "./card.scss";
 2 | 
 3 | import cloud from "../../assets/img/cloud.png"
 4 | 
 5 | export const Card = ({ children, cardData }) => {
 6 | 
 7 |     return (
 8 | 
 9 |         <div className="card">
10 |             <figure>
11 |                 <span>
12 |                     <img src={cloud} alt="card Icon" />
13 |                 </span>
14 |                 <h2>{cardData.title}</h2>
15 |                 <p>{cardData.text}</p>
16 |                 {children}
17 |             </figure>
18 |         </div>
19 |     )
20 | }


--------------------------------------------------------------------------------
/vpn-finder/src/components/header/header.scss:
--------------------------------------------------------------------------------
 1 | $dropdown-font-color: var(--white);
 2 | 
 3 | .header {
 4 |   width: 100%;
 5 |   display: flex;
 6 |   align-items: center;
 7 |   justify-content: space-between;
 8 | 
 9 |   & > div {
10 |     display: flex;
11 |     align-items: center;
12 |     column-gap: 2rem;
13 | 
14 |     .dropdown {
15 |       display: flex;
16 |       align-items: center;
17 |       column-gap: 0.5rem;
18 | 
19 |       color: $dropdown-font-color;
20 |       font-size: .8rem;
21 | 
22 |       img {
23 |         width: 1.5rem;
24 |         border-radius: 50%;
25 |       }
26 |     }
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/vpn-finder/src/components/header/index.jsx:
--------------------------------------------------------------------------------
 1 | import { BiSearch } from 'react-icons/bi';
 2 | import { FiMenu } from 'react-icons/fi';
 3 | import { Button } from '../button';
 4 | import "./header.scss";
 5 | 
 6 | const headerButtonsBg = "#676DFF";
 7 | 
 8 | export const Header = () => {
 9 |     return (
10 |         <header className="header">
11 |             <Button bgColor={ headerButtonsBg } typeButton="iconButton">
12 |                 <BiSearch />
13 |             </Button>
14 | 
15 |             <div>
16 |                 <div className="dropdown">
17 |                     <img src="https://avatars.githubusercontent.com/u/31545128?v=4" alt="Profile" />
18 |                     <span>
19 |                         <label>English</label>
20 |                     </span>
21 |                 </div>
22 |                 <Button bgColor={ headerButtonsBg } typeButton="iconButton">
23 |                     <FiMenu />
24 |                 </Button>
25 |             </div>
26 |         </header>
27 |     )
28 | }


--------------------------------------------------------------------------------
/vpn-finder/src/components/input/index.jsx:
--------------------------------------------------------------------------------
 1 | import "./input.scss";
 2 | 
 3 | export const Input = ({ placeholder, bgColor, children, inputContext }) => {
 4 | 
 5 |     return (
 6 |         <div className="input" style={{ backgroundColor: bgColor }} inputContext={inputContext}>
 7 |             <input placeholder={placeholder}  />
 8 |             {children}
 9 |         </div>
10 | 
11 |     )
12 | }


--------------------------------------------------------------------------------
/vpn-finder/src/components/input/input.scss:
--------------------------------------------------------------------------------
 1 | $input-color: var(--white);
 2 | $icon-color: var(--primary);
 3 | $input-gray: var(--very-light-gray);
 4 | 
 5 | .input {
 6 |   border-radius: 5px;
 7 |   flex: 1;
 8 |   display: flex;
 9 |   align-items: center;
10 |   padding-right: 0.8rem;
11 | 
12 |   svg {
13 |     pointer-events: none;
14 |     color: $icon-color;
15 |   }
16 | 
17 |   input {
18 |     outline: none;
19 |     padding: 0.6rem 0.9rem;
20 |     width: 100%;
21 |     height: 100%;
22 |     display: block;
23 |     background: none;
24 |     color: $input-color;
25 | 
26 |     &::placeholder {
27 |       color: inherit;
28 |       opacity: 0.4;
29 |     }
30 |   }
31 | 
32 |   &[inputContext="card"] {
33 |     background: $input-gray;
34 | 
35 |     input {
36 |       color: $input-gray;
37 |         filter: brightness(70%);
38 | 
39 |       &::placeholder {
40 |         color: inherit;
41 |         filter: brightness(50%);
42 |       }
43 |     }
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/vpn-finder/src/components/menu/index.jsx:
--------------------------------------------------------------------------------
 1 | import "./menu.scss";
 2 | import { FaRegComment, BiLike, AiOutlineTool, AiOutlinePercentage } from 'react-icons/all'
 3 | 
 4 | import pureVPNicon from '../../assets/img/pureVPN.png';
 5 | import hidemeVPNicon from '../../assets/img/hidemeVPN.png';
 6 | import nordVPNicon from '../../assets/img/nordVPN.png';
 7 | import zenmateVPNicon from '../../assets/img/zenmateVPN.png';
 8 | 
 9 | import { useEffect, useRef, useState } from "react";
10 | 
11 | export const Menu = () => {
12 | 
13 |     const itemMenu = useRef();
14 | 
15 |     const [open, setOpen] = useState(false);
16 | 
17 |     const toggleSubMenu = () => {
18 |         setOpen(!open);
19 |     }
20 | 
21 |     useEffect(() => {
22 |         open
23 |             ? itemMenu.current.classList.add('--focused')
24 |             : itemMenu.current.classList.remove('--focused');
25 | 
26 |     }, [open])
27 | 
28 |     return (
29 |         <ul>
30 |             <li className="menu-item">
31 |                 <label>
32 | 
33 |                     <FaRegComment />
34 |                     <span>Blog</span>
35 |                 </label>
36 |             </li>
37 |             <li className="menu-item">
38 |                 <label>
39 |                     <BiLike />
40 |                     <span>Best VPN</span>
41 |                 </label>
42 |             </li >
43 |             <li className="menu-item">
44 |                 <label>
45 |                     <AiOutlineTool />
46 |                     <span>Tools</span>
47 |                 </label>
48 |             </li>
49 |             <li className="menu-item" onClick={toggleSubMenu} >
50 |                 <label ref={itemMenu}>
51 |                     <AiOutlinePercentage />
52 |                     <span>Coupons</span>
53 |                 </label>
54 |                 <div className="subMenu" style={{ display: open ? 'block' : 'none' }}>
55 |                     <span>
56 |                         <img src={pureVPNicon} />
57 |                         <span>Pure VPN</span>
58 |                     </span>
59 |                     <span>
60 |                         <img src={hidemeVPNicon} />
61 |                         <span>Hideme VPN</span>
62 |                     </span>
63 |                     <span>
64 |                         <img src={nordVPNicon} />
65 |                         <span>Nord VPN</span>
66 |                     </span>
67 |                     <span>
68 |                         <img src={zenmateVPNicon} />
69 |                         <span>Zenmate VPN</span>
70 |                     </span>
71 |                 </div>
72 |             </li>
73 |         </ul>
74 | 
75 |     )
76 | }


--------------------------------------------------------------------------------
/vpn-finder/src/components/menu/menu.scss:
--------------------------------------------------------------------------------
 1 | $primary: var(--primary);
 2 | $very-light-blue: var(--very-light-blue);
 3 | 
 4 | ul {
 5 |   padding: 0;
 6 |   margin-top: 2rem;
 7 | 
 8 |   svg {
 9 |     width: 1.5rem;
10 |     transform: scale(1.4);
11 |     opacity: 0.3;
12 |   }
13 | 
14 |   .menu-item {
15 |     height: 4rem;
16 |     cursor: pointer;
17 |     
18 |     label {
19 |         height: 100%;
20 |         display: flex;
21 |         align-items: center;
22 |         column-gap: 1.5rem;
23 |         cursor: inherit;
24 |         padding-left: 3rem;
25 |         border-left: 4px solid transparent;
26 |         transition: background-color 0.5s ease, border-color 0.5s ease;
27 | 
28 |         span {
29 |             display: flex;
30 |           align-items: center;
31 |           color: $primary;
32 |           font-weight: 500;
33 |           filter: brightness(40%);
34 |           font-size: 0.9rem;
35 |         }
36 |     
37 |     }
38 | 
39 |     .subMenu {
40 |       width: 100%;
41 | 
42 |       img {
43 |         width: 1.5rem;
44 |         height: 1.5rem;
45 |         margin-right: 1rem;
46 |       }
47 | 
48 |       & > span {
49 |         padding-left: 5.8rem;
50 |         height: 3.5rem;
51 |         display: flex;
52 |         align-items: center;
53 |         border-left: 4px solid transparent;
54 |         transition: .5s ease;
55 | 
56 |         span {
57 |           color: $primary;
58 |           opacity: 0.8;
59 |           font-size: .9rem;
60 |           font-weight: 500;
61 |           filter: grayscale(80%);
62 |         }
63 |       }
64 |     }
65 |   }
66 | 
67 |   .menu-item label,
68 |   .subMenu > span{
69 |     &:hover {
70 |       border-color: $primary;
71 |       background: $very-light-blue;
72 |     }
73 |   }
74 | }
75 | 
76 | .--focused {
77 | 
78 |   border-color: $primary !important;
79 |   background: $very-light-blue;
80 |   color: $primary;
81 | 
82 |   svg{ 
83 |     opacity: 1;
84 |   }
85 | 
86 |   svg + span{
87 |     filter: brightness(100%) !important;
88 |   }
89 | 
90 | }
91 | 


--------------------------------------------------------------------------------
/vpn-finder/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 | import "./index.scss";
5 | 
6 | ReactDOM.render(<App />, document.getElementById("root"));
7 | 
8 | 


--------------------------------------------------------------------------------
/vpn-finder/src/index.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | :root{
 3 |   --primary: #415CF5;
 4 |   --white: #fff;
 5 |   --light-blue: #8695F4;
 6 |   --very-light-blue: #dcebf5;
 7 |   --dark-blue: #2A4B62;
 8 |   --light-gray: #BEC5C9;
 9 |   --very-light-gray: #ECF0F3;
10 | 
11 | }
12 | 
13 | *{
14 |   border: 0;
15 |   box-sizing: border-box;
16 |   padding: 0;
17 |   margin: 0;
18 |   font-family: 'Roboto';
19 | }
20 | 
21 | body{
22 |   min-height: 100vh;
23 |   background: var(--very-light-gray);
24 | 
25 |   &::after{
26 |     content: "";
27 |     width: 100%;
28 |     height: 55%;
29 |     background: var(--primary);
30 |     position: absolute;
31 |     z-index: -1;
32 |     top: 0;
33 |   }
34 | }


--------------------------------------------------------------------------------