├── banner.png ├── assets ├── img │ ├── home │ │ ├── joystick.webp │ │ ├── controller.webp │ │ ├── joystick_2.webp │ │ ├── joystick_3.webp │ │ └── controller2.webp │ ├── decoration │ │ ├── star.webp │ │ ├── controller.webp │ │ ├── controller_2.webp │ │ ├── controller_3.webp │ │ ├── border-produts.webp │ │ ├── controller-produts.webp │ │ ├── email_confirmation.webp │ │ ├── controller-produts-2.webp │ │ ├── controller-produts-3.webp │ │ ├── controller-produts-4.webp │ │ ├── description_controller.webp │ │ └── controller-produts-full.webp │ └── buy │ │ ├── controller_buy.webp │ │ ├── controller_buy-2.webp │ │ └── controller_buy-3.webp ├── css │ ├── utilities │ │ ├── scroll_bar.css │ │ ├── scroll_up.css │ │ ├── colors.css │ │ ├── typography.css │ │ ├── preloader.css │ │ └── components.css │ ├── email │ │ └── email.css │ ├── style.css │ ├── privacy │ │ └── privacy.css │ ├── terms │ │ └── terms.css │ ├── home │ │ ├── functions.css │ │ ├── about.css │ │ ├── faqs.css │ │ ├── introduction.css │ │ └── produts.css │ ├── global │ │ ├── header.css │ │ ├── footer.css │ │ └── global.css │ ├── controllers │ │ └── controllers.css │ ├── produts │ │ └── produts.css │ ├── contact │ │ └── contact.css │ └── buy │ │ └── buy.css ├── svg │ ├── decoration │ │ ├── ellipse.svg │ │ ├── rectangle_secondary.svg │ │ ├── circle.svg │ │ ├── rectangle.svg │ │ └── x.svg │ ├── logo.svg │ └── home │ │ └── sony.svg ├── js │ └── main.js └── html │ ├── email.html │ ├── privacy.html │ ├── terms.html │ ├── produts.html │ ├── controllers.html │ ├── contact.html │ └── buy.html ├── LICENSE ├── README.md └── index.html /banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/banner.png -------------------------------------------------------------------------------- /assets/img/home/joystick.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/home/joystick.webp -------------------------------------------------------------------------------- /assets/img/decoration/star.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/star.webp -------------------------------------------------------------------------------- /assets/img/home/controller.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/home/controller.webp -------------------------------------------------------------------------------- /assets/img/home/joystick_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/home/joystick_2.webp -------------------------------------------------------------------------------- /assets/img/home/joystick_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/home/joystick_3.webp -------------------------------------------------------------------------------- /assets/img/buy/controller_buy.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/buy/controller_buy.webp -------------------------------------------------------------------------------- /assets/img/home/controller2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/home/controller2.webp -------------------------------------------------------------------------------- /assets/img/buy/controller_buy-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/buy/controller_buy-2.webp -------------------------------------------------------------------------------- /assets/img/buy/controller_buy-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/buy/controller_buy-3.webp -------------------------------------------------------------------------------- /assets/img/decoration/controller.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/controller.webp -------------------------------------------------------------------------------- /assets/img/decoration/controller_2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/controller_2.webp -------------------------------------------------------------------------------- /assets/img/decoration/controller_3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/controller_3.webp -------------------------------------------------------------------------------- /assets/img/decoration/border-produts.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/border-produts.webp -------------------------------------------------------------------------------- /assets/img/decoration/controller-produts.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/controller-produts.webp -------------------------------------------------------------------------------- /assets/img/decoration/email_confirmation.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/email_confirmation.webp -------------------------------------------------------------------------------- /assets/img/decoration/controller-produts-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/controller-produts-2.webp -------------------------------------------------------------------------------- /assets/img/decoration/controller-produts-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/controller-produts-3.webp -------------------------------------------------------------------------------- /assets/img/decoration/controller-produts-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/controller-produts-4.webp -------------------------------------------------------------------------------- /assets/img/decoration/description_controller.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/description_controller.webp -------------------------------------------------------------------------------- /assets/img/decoration/controller-produts-full.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kennedybarros/responsive-website-playstation/HEAD/assets/img/decoration/controller-produts-full.webp -------------------------------------------------------------------------------- /assets/css/utilities/scroll_bar.css: -------------------------------------------------------------------------------- 1 | /* Scroll Bar */ 2 | ::-webkit-scrollbar { 3 | width: 0.6rem; 4 | background: transparent; 5 | } 6 | 7 | ::-webkit-scrollbar-thumb { 8 | background: var(--primary-color-hover); 9 | border-radius: 0.5rem; 10 | } 11 | -------------------------------------------------------------------------------- /assets/svg/decoration/ellipse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/decoration/rectangle_secondary.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/svg/decoration/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/decoration/rectangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/css/utilities/scroll_up.css: -------------------------------------------------------------------------------- 1 | /* Scroll Up */ 2 | .scrollup { 3 | position: fixed; 4 | background: var(--primary-color); 5 | right: 1rem; 6 | bottom: -20%; 7 | display: inline-flex; 8 | padding: 0.3rem; 9 | border-radius: 0.25rem; 10 | z-index: var(--z-fixed); 11 | opacity: 0.8; 12 | transition: 0.4s; 13 | } 14 | 15 | .scrollup_icon { 16 | font-size: 1.25rem; 17 | color: var(--white-color); 18 | } 19 | 20 | .scrollup:hover { 21 | background: var(--primary-color-hover); 22 | opacity: 1; 23 | } 24 | 25 | /* Show Scroll Up*/ 26 | .show-scroll { 27 | bottom: 3rem; 28 | } 29 | -------------------------------------------------------------------------------- /assets/svg/decoration/x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/css/utilities/colors.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #362ba9; 3 | --primary-color-hover: #261e7d; 4 | --title-color: #0e0e0e; 5 | --title-color-secondary: #000000; 6 | --text-color: #8d8ea0; 7 | --paragraphy-color-light: #727382; 8 | --body-color: #ffffff; 9 | --black-color: #000000; 10 | --white-color: #ffffff; 11 | --white-color-secondary: #ececec; 12 | --white-color-third: #fefefe; 13 | --gray-color: #cccccc; 14 | --gray-color-secondary: #a4a4a4; 15 | --gray-color-third: #5a5a5a; 16 | --gray-color-fourth: #9f9cb1; 17 | --gray-color-five: #2d2d2d; 18 | --gray-color-sixth: #b4b4b4; 19 | --gray-color-seven: #6b6b7d; 20 | --background-gray: rgba(164, 164, 164, 0.05); 21 | --background-gray-secondary: rgba(164, 164, 164, 0.1); 22 | --background-gray-third: rgba(164, 164, 164, 0.15); 23 | } 24 | -------------------------------------------------------------------------------- /assets/css/utilities/typography.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --tittle-font: 'Poppins', sans-serif; 3 | --paragraphy-font: 'Roboto', sans-serif; 4 | --big-font-size: 2.5rem; 5 | --title-font-size: 2rem; 6 | --icon-font-size: 1.7rem; 7 | 8 | --normalize-font-size: 1.1rem; 9 | --normal-font-size: 0.875rem; 10 | --small-font-size: 0.75rem; 11 | --regularly-font-size: 1.2rem; 12 | --regular-font-size: 0.885rem; 13 | 14 | --font-regular: 400; 15 | --font-medium: 500; 16 | --font-semi-bold: 600; 17 | } 18 | 19 | @media screen and (min-width: 768px) { 20 | :root { 21 | --big-font-size: 4rem; 22 | --title-font-size: 3rem; 23 | --icon-font-size: 2rem; 24 | --normalize-font-size: 1.5rem; 25 | --regularly-font-size: 1.375rem; 26 | --normal-font-size: 1rem; 27 | --small-font-size: 1rem; 28 | --regular-font-size: 0.9375rem; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /assets/css/email/email.css: -------------------------------------------------------------------------------- 1 | .email_data { 2 | margin-top: 2.1875rem; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .email_img { 9 | max-width: 160px; 10 | } 11 | 12 | .email_title { 13 | color: var(--title-color); 14 | font-family: var(--tittle-font); 15 | font-weight: var(--font-semi-bold); 16 | font-size: var(--title-font-size); 17 | margin-top: 20px; 18 | text-align: center; 19 | } 20 | 21 | .email_title-secondary { 22 | color: var(--primary-color); 23 | } 24 | 25 | .email_subtitle { 26 | margin-top: 1.875rem; 27 | font-family: var(--paragraphy-font); 28 | font-weight: var(--font-medium); 29 | font-size: var(--normal-font-size); 30 | color: var(--paragraphy-color-light); 31 | } 32 | 33 | /* MEDIAS QUERIES */ 34 | @media screen and (min-width: 766px) { 35 | .email_data { 36 | margin-top: 8.125rem; 37 | } 38 | .email_img { 39 | max-width: initial; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL */ 2 | @import './global/global.css'; 3 | @import './utilities/typography.css'; 4 | @import './utilities/colors.css'; 5 | 6 | /* UTILITIES */ 7 | @import './utilities/components.css'; 8 | 9 | /* HOME */ 10 | @import './global/header.css'; 11 | @import './home/introduction.css'; 12 | @import './home/about.css'; 13 | @import './home/functions.css'; 14 | @import './home/produts.css'; 15 | @import './home/faqs.css'; 16 | @import './global/footer.css'; 17 | 18 | /* TERMS */ 19 | @import './terms/terms.css'; 20 | 21 | /* PRIVACY */ 22 | @import './privacy/privacy.css'; 23 | 24 | /* CONTACT */ 25 | @import './contact/contact.css'; 26 | 27 | /* CONTROLLERS */ 28 | @import './controllers/controllers.css'; 29 | 30 | /* BUY */ 31 | @import './buy/buy.css'; 32 | 33 | /* PRODUTS */ 34 | @import './produts/produts.css'; 35 | 36 | /* SCROLL UP */ 37 | @import './utilities/scroll_up.css'; 38 | 39 | /* SCROLL BAR */ 40 | @import './utilities/scroll_bar.css'; 41 | 42 | /* PRELOADER */ 43 | @import './utilities/preloader.css'; 44 | 45 | /* EMAIL */ 46 | @import './email/email.css'; 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Kennedy Barros 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /assets/svg/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/css/utilities/preloader.css: -------------------------------------------------------------------------------- 1 | .loading_logo { 2 | margin-bottom: 30px; 3 | } 4 | 5 | .screen_loading { 6 | width: 100%; 7 | height: 100vh; 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | -webkit-transform: translate(-50%, -50%); 12 | transform: translate(-50%, -50%); 13 | z-index: 999; 14 | background-color: #fff; 15 | position: fixed; 16 | pointer-events: none; 17 | } 18 | 19 | .screen_loading .loading { 20 | width: 200px; 21 | height: 4px; 22 | border-radius: 2px; 23 | background-color: rgba(183, 184, 187, 0.3); 24 | position: relative; 25 | } 26 | 27 | .screen_loading .loading:after { 28 | content: ''; 29 | width: 0%; 30 | height: 100%; 31 | border-radius: 2px; 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | background: linear-gradient(225deg, #2b19de 0%, #140d59 100%); 36 | -webkit-animation: bar-loading 2.5s ease 0.5s forwards; 37 | animation: bar-loading 2.5s ease 0.5s forwards; 38 | } 39 | 40 | @-webkit-keyframes bar-loading { 41 | 0% { 42 | width: 0%; 43 | } 44 | 100% { 45 | width: 100%; 46 | } 47 | } 48 | 49 | @keyframes bar-loading { 50 | 0% { 51 | width: 0%; 52 | } 53 | 100% { 54 | width: 100%; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /assets/css/utilities/components.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --header-height: 3.5rem; 3 | --mb-1: 1rem; 4 | --z-fixed: 100; 5 | } 6 | 7 | .container { 8 | max-width: 968px; 9 | margin-left: 1.5rem; 10 | margin-right: 1.5rem; 11 | } 12 | 13 | .bd-container { 14 | max-width: 968px; 15 | margin-left: 2rem; 16 | margin-right: 2rem; 17 | } 18 | 19 | .grid { 20 | display: grid; 21 | } 22 | 23 | .bd-grid { 24 | display: grid; 25 | gap: 1.5rem; 26 | } 27 | 28 | .section { 29 | padding: 4.5rem 0 2rem; 30 | } 31 | 32 | .main { 33 | overflow: hidden; /*For animation*/ 34 | } 35 | 36 | .flex_center { 37 | display: -webkit-box; 38 | display: -ms-flexbox; 39 | display: flex; 40 | -webkit-box-pack: center; 41 | -ms-flex-pack: center; 42 | justify-content: center; 43 | -webkit-box-align: center; 44 | -ms-flex-align: center; 45 | align-items: center; 46 | } 47 | 48 | .flex_column { 49 | -webkit-box-orient: vertical; 50 | -webkit-box-direction: normal; 51 | -ms-flex-direction: column; 52 | flex-direction: column; 53 | } 54 | 55 | @media screen and (max-width: 320px) { 56 | .container { 57 | margin-left: var(--mb-1); 58 | margin-right: var(--mb-1); 59 | } 60 | } 61 | 62 | @media screen and (min-width: 767px) { 63 | body { 64 | margin: 0; 65 | } 66 | .section { 67 | padding: 7rem 0 2rem; 68 | } 69 | } 70 | 71 | @media screen and (min-width: 992px) { 72 | .container { 73 | margin-left: auto; 74 | margin-right: auto; 75 | } 76 | } 77 | 78 | @media screen and (min-width: 1200px) { 79 | .bd-container { 80 | margin-left: auto; 81 | margin-right: auto; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |
6 | 7 | 8 |
9 | 10 |

11 | 12 |

13 | 14 |

You can access the project Clicking here

15 | 16 |

Appliction developed to learning effects. The UI in figma can be seen in Figma

17 | 18 | --- 19 | 20 |
21 | 22 | # 🚀 Technologies 23 | 24 | - [HTML](https://www.w3schools.com/html/) 25 | - [CSS](https://www.w3schools.com/css/) 26 | - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 27 | - [ScrollReveal](https://scrollrevealjs.org/) 28 | - [GSAP](https://greensock.com/gsap/) 29 | - [FORMSUBMIT](https://formsubmit.co/) 30 | 31 | --- 32 | 33 |
34 | 35 | ## 🛠 How to download the project: 36 | 37 | ```bash 38 | # Clone the repository 39 | $ git clone git@github.com:kennedybarros/repsonsive-website-playstation.git 40 | 41 | # Enter directory 42 | $ cd repsonsive-website-playstation 43 | ``` 44 | 45 | --- 46 | 47 |
48 | 49 | ## 📝 Licença: 50 | 51 | This project is under license. see the file [LICENSE](LICENSE.md) for more details. 52 | 53 |
54 | 55 | --- 56 | 57 |
58 | 59 |

Developed by Kennedy Barros ✌🏼

60 | -------------------------------------------------------------------------------- /assets/css/privacy/privacy.css: -------------------------------------------------------------------------------- 1 | .privacy_data { 2 | margin-top: 2.1875rem; 3 | } 4 | 5 | .privacy_title { 6 | position: relative; 7 | color: var(--title-color); 8 | font-family: var(--tittle-font); 9 | font-weight: var(--font-semi-bold); 10 | font-size: var(--title-font-size); 11 | } 12 | 13 | .privacy_title-secondary { 14 | color: var(--primary-color); 15 | } 16 | 17 | .privacy_subtitle { 18 | margin-top: 1.875rem; 19 | text-transform: uppercase; 20 | font-family: var(--paragraphy-font); 21 | font-weight: var(--font-medium); 22 | font-size: var(--small-font-size); 23 | color: var(--paragraphy-color-light); 24 | } 25 | 26 | .privacy_subtitle-secondary { 27 | margin-top: 1.25rem; 28 | margin-bottom: 1.6875rem; 29 | margin-left: 1.25rem; 30 | line-height: 2.25rem; 31 | letter-spacing: 0.015em; 32 | font-family: var(--tittle-font); 33 | font-weight: var(--font-semi-bold); 34 | font-size: var(--normalize-font-size); 35 | color: var(--title-color-secondary); 36 | } 37 | 38 | .privacy_paragraph { 39 | margin-bottom: 2.3125rem; 40 | line-height: 1.1875rem; 41 | letter-spacing: 0.018em; 42 | font-family: var(--paragraphy-font); 43 | font-size: var(--normal-font-size); 44 | color: var(--paragraphy-color-light); 45 | } 46 | 47 | .privacy_list-title { 48 | margin-bottom: 1.5625rem; 49 | line-height: 1.1875rem; 50 | letter-spacing: 0.018em; 51 | font-family: var(--paragraphy-font); 52 | font-size: var(--normal-font-size); 53 | font-weight: var(--font-medium); 54 | color: var(--title-color-secondary); 55 | } 56 | 57 | .privacy_list { 58 | display: flex; 59 | flex-direction: column; 60 | gap: 0.9375rem; 61 | } 62 | 63 | .privacy_data ul:nth-child(6) { 64 | margin-bottom: 3.75rem; 65 | } 66 | 67 | /* MEDIAS QUERIES */ 68 | @media screen and (min-width: 767px) { 69 | .privacy_data { 70 | margin-top: 8.125rem; 71 | } 72 | .privacy_list-title { 73 | margin-left: 0rem; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /assets/css/terms/terms.css: -------------------------------------------------------------------------------- 1 | .terms_data { 2 | margin-top: 2.1875rem; 3 | } 4 | 5 | .terms_title { 6 | position: relative; 7 | color: var(--title-color); 8 | font-family: var(--tittle-font); 9 | font-weight: var(--font-semi-bold); 10 | font-size: var(--title-font-size); 11 | } 12 | 13 | .terms_title-secondary { 14 | color: var(--primary-color); 15 | } 16 | 17 | .terms_subtitle { 18 | margin-top: 1.875rem; 19 | color: var(--paragraphy-color-light); 20 | font-family: var(--paragraphy-font); 21 | font-weight: var(--font-medium); 22 | font-size: var(--small-font-size); 23 | } 24 | 25 | .terms_paragraph { 26 | color: var(--paragraphy-color-light); 27 | font-family: var(--paragraphy-font); 28 | font-weight: var(--font-regular); 29 | font-size: var(--normal-font-size); 30 | line-height: 1.1875rem; 31 | letter-spacing: 0.018em; 32 | } 33 | 34 | .terms_list { 35 | position: relative; 36 | display: flex; 37 | flex-direction: column; 38 | gap: 1.25rem; 39 | margin-top: 2.1875rem; 40 | margin-bottom: 3.125rem; 41 | justify-content: center; 42 | color: var(--paragraphy-color-light); 43 | font-family: var(--paragraphy-font); 44 | font-weight: var(--font-regular); 45 | font-size: var(--normal-font-size); 46 | line-height: 1.1875rem; 47 | letter-spacing: 0.018em; 48 | } 49 | 50 | .terms_list li::before { 51 | content: ''; 52 | display: inline-block; 53 | width: 20px; 54 | height: 3px; 55 | border-radius: 0.3125rem; 56 | margin-bottom: 0.25rem; 57 | margin-right: 0.4375rem; 58 | background-color: var(--primary-color); 59 | } 60 | 61 | .terms_data p:nth-child(3) { 62 | margin-top: 1.5625rem; 63 | } 64 | 65 | .terms_data p:nth-child(4) { 66 | margin-top: 1.5625rem; 67 | } 68 | 69 | .terms_data p:nth-child(6) { 70 | margin-top: 1.875rem; 71 | } 72 | 73 | .terms_data p:nth-child(7) { 74 | margin-top: 1.875rem; 75 | } 76 | 77 | /* MEDIAS QUERIES */ 78 | @media screen and (min-width: 767px) { 79 | .terms_data { 80 | margin-top: 8.125rem; 81 | } 82 | .terms_data p:nth-child(3) { 83 | margin-top: 2.5rem; 84 | } 85 | .terms_data p:nth-child(4), 86 | .terms_list { 87 | margin-top: 2.1875rem; 88 | } 89 | .terms_list li::before { 90 | margin-right: 0.9375rem; 91 | } 92 | .terms_data p:nth-child(6), 93 | .terms_data p:nth-child(7) { 94 | margin-top: 4.375rem; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /assets/css/home/functions.css: -------------------------------------------------------------------------------- 1 | .functions_container { 2 | margin-top: 6.25rem; 3 | } 4 | 5 | .functions_data { 6 | background: var(--background-gray); 7 | border: 0.0625rem solid var(--gray-color); 8 | border-radius: 1.5625rem; 9 | position: relative; 10 | } 11 | 12 | .functions_title { 13 | margin-top: 2.5rem; 14 | text-align: center; 15 | color: var(--title-color); 16 | font-family: var(--tittle-font); 17 | font-weight: var(--font-semi-bold); 18 | font-size: var(--title-font-size); 19 | } 20 | 21 | .functions_title-secondary { 22 | color: var(--primary-color); 23 | } 24 | 25 | .functions_subtitle { 26 | margin-top: 1.5625rem; 27 | margin-bottom: 0.9375rem; 28 | text-align: center; 29 | font-size: var(--normal-font-size); 30 | font-family: var(--paragraphy-font); 31 | font-weight: var(--font-regular); 32 | color: var(--paragraphy-color-light); 33 | } 34 | 35 | .functions_list-container { 36 | display: grid; 37 | gap: 1.875rem; 38 | padding: 2.5rem 3.125rem 2.5rem 3.125rem; 39 | } 40 | 41 | .functions_list { 42 | display: grid; 43 | padding: 1.9375rem 1.9375rem 1.9375rem 1.9375rem; 44 | background: var(--background-gray-secondary); 45 | border: 0.0625rem solid var(--gray-color); 46 | border-radius: 1.9375rem; 47 | text-align: center; 48 | } 49 | 50 | .functions_icons { 51 | font-size: 3.375rem; 52 | transition: 0.3s; 53 | color: var(--primary-color); 54 | } 55 | 56 | .functions_list:hover .functions_icons { 57 | transform: translateY(-0.35rem); 58 | } 59 | 60 | .functions_icons-title { 61 | font-family: var(--tittle-font); 62 | font-weight: var(--font-semi-bold); 63 | font-size: var(--normal-font-size); 64 | color: var(--title-color); 65 | margin-top: 1.25rem; 66 | margin-bottom: 1.875rem; 67 | } 68 | 69 | .functions_img { 70 | max-width: 104px; 71 | margin: 0 auto; 72 | } 73 | 74 | /* MEDIA QUERIES */ 75 | @media screen and (min-width: 576px) { 76 | .functions_list-container { 77 | grid-template-columns: repeat(2, 1fr); 78 | } 79 | } 80 | @media screen and (min-width: 767px) { 81 | .functions_list-container { 82 | grid-template-columns: repeat(2, 1fr); 83 | gap: 5rem; 84 | } 85 | .functions_list { 86 | padding: 3.1875rem 0.625rem 2.6875rem 0.625rem; 87 | } 88 | } 89 | 90 | @media screen and (min-width: 992px) { 91 | .functions_list-container { 92 | grid-template-columns: repeat(3, 1fr); 93 | } 94 | .functions_data::after { 95 | height: 650px; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /assets/css/global/header.css: -------------------------------------------------------------------------------- 1 | /* HEADER */ 2 | .header { 3 | width: 100%; 4 | background-color: var(--body-color); 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | z-index: var(--z-fixed); 9 | } 10 | 11 | /* NAV */ 12 | .nav { 13 | height: var(--header-height); 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | } 18 | 19 | .nav_box { 20 | display: flex; 21 | align-items: center; 22 | gap: 0.625rem; 23 | justify-content: center; 24 | } 25 | 26 | .nav_toggle, 27 | .nav_close { 28 | color: var(--text-color); 29 | } 30 | 31 | .nav_logo { 32 | display: flex; 33 | align-items: center; 34 | gap: 0.625rem; 35 | font-weight: var(--font-semi-bold); 36 | font-family: var(--tittle-font); 37 | color: var(--title-color); 38 | } 39 | 40 | .nav_box img { 41 | width: 30px; 42 | } 43 | 44 | .nav_toggle { 45 | display: inline-flex; 46 | font-size: 1.5rem; 47 | cursor: pointer; 48 | } 49 | 50 | .change-theme { 51 | color: var(--text-color); 52 | font-size: 1.25rem; 53 | cursor: pointer; 54 | } 55 | 56 | .change-theme:hover { 57 | color: var(--title-color); 58 | } 59 | 60 | .nav_btns { 61 | display: inline-flex; 62 | align-items: center; 63 | column-gap: 1rem; 64 | } 65 | 66 | @media screen and (max-width: 790px) { 67 | .nav_menu { 68 | position: fixed; 69 | background-color: var(--body-color); 70 | width: 80%; 71 | height: 100%; 72 | top: 0; 73 | right: -100%; 74 | padding: 4rem 0 0 3rem; 75 | border-radius: 1rem 0 0 1rem; 76 | transition: 0.3s; 77 | z-index: var(--z-fixed); 78 | } 79 | } 80 | 81 | .nav_close { 82 | font-size: 1.5rem; 83 | position: absolute; 84 | top: 1rem; 85 | right: 1.25rem; 86 | cursor: pointer; 87 | } 88 | 89 | .nav_list { 90 | display: flex; 91 | flex-direction: column; 92 | row-gap: 1.5rem; 93 | } 94 | 95 | .nav_link { 96 | color: var(--text-color); 97 | font-weight: var(--font-semi-bold); 98 | font-family: var(--tittle-font); 99 | transition: 0.3s; 100 | } 101 | 102 | .nav_link:hover { 103 | color: var(--title-color); 104 | } 105 | 106 | /* SHOW MENU */ 107 | .show-menu { 108 | right: 0; 109 | } 110 | 111 | /* MEDIA QUERIES */ 112 | @media screen and (min-width: 790px) { 113 | .nav { 114 | height: calc(var(--header-height) + 1.5rem); 115 | column-gap: 6.25rem; 116 | } 117 | .nav_toggle, 118 | .nav_close { 119 | display: none; 120 | } 121 | .nav_list { 122 | flex-direction: row; 123 | column-gap: 2.5rem; 124 | } 125 | .nav_menu { 126 | margin-left: auto; 127 | } 128 | .nav_logo { 129 | font-size: 0.875rem; 130 | } 131 | .nav_box img { 132 | width: 44px; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /assets/css/global/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | overflow: hidden; 3 | } 4 | 5 | .footer_container { 6 | row-gap: 2rem; 7 | } 8 | 9 | .footer_title { 10 | font-family: var(--tittle-font); 11 | font-weight: var(--font-semi-bold); 12 | font-size: var(--normal-font-size); 13 | line-height: 1.5rem; 14 | color: var(--title-color-secondary); 15 | } 16 | 17 | .footer_logo { 18 | display: flex; 19 | align-items: center; 20 | column-gap: 0.5rem; 21 | margin-bottom: 1rem; 22 | font-weight: var(--font-semi-bold); 23 | font-family: var(--tittle-font); 24 | color: var(--title-color); 25 | } 26 | 27 | .footer_logo-img { 28 | width: 35px; 29 | } 30 | 31 | .footer_description { 32 | font-size: var(--regular-font-size); 33 | margin-top: 1.25rem; 34 | margin-bottom: 1.25rem; 35 | font-family: var(--paragraphy-font); 36 | font-weight: var(--font-regular); 37 | line-height: 1.125rem; 38 | letter-spacing: 0.013em; 39 | width: 320px; 40 | color: var(--paragraphy-color-light); 41 | } 42 | 43 | .footer_social { 44 | display: flex; 45 | column-gap: 0.75rem; 46 | } 47 | 48 | .footer_social-link { 49 | display: inline-flex; 50 | color: var(--gray-color-fourth); 51 | font-size: 1.25rem; 52 | } 53 | 54 | .footer_social-link:hover { 55 | color: var(--title-color); 56 | } 57 | 58 | .footer_title { 59 | font-size: var(--normal-font-size); 60 | margin-bottom: 1.5625rem; 61 | } 62 | 63 | .footer_links { 64 | display: grid; 65 | row-gap: 1.125rem; 66 | } 67 | 68 | .footer_link { 69 | font-family: var(--paragraphy-font); 70 | font-weight: var(--font-regular); 71 | font-size: var(-normal-font-size); 72 | line-height: 1.1875rem; 73 | color: var(--paragraphy-color-light); 74 | transition: 0.3s; 75 | } 76 | 77 | .footer_link:hover { 78 | color: var(--title-color); 79 | } 80 | 81 | .footer_copy { 82 | display: block; 83 | text-align: center; 84 | font-family: var(--paragraphy-font); 85 | font-weight: var(--font-regular); 86 | font-size: var(--small-font-size); 87 | line-height: 1.125rem; 88 | letter-spacing: 0.013em; 89 | color: rgba(114, 115, 130, 0.8); 90 | margin-top: 1.5625rem; 91 | } 92 | 93 | .footer_content { 94 | margin-right: 4.1875rem; 95 | } 96 | 97 | .hr_footer { 98 | max-width: 990px; 99 | margin: 0 auto; 100 | margin-top: 6.25rem; 101 | margin-bottom: -3.125rem; 102 | border: 1px solid #cccccc; 103 | position: relative; 104 | } 105 | 106 | .hr_footer-secondary { 107 | width: 990px; 108 | margin: 0 auto; 109 | margin-top: 3.125rem; 110 | border: 1px solid #cccccc; 111 | } 112 | 113 | @media screen and (min-width: 576px) { 114 | .footer_container { 115 | grid-template-columns: repeat(2, 1fr); 116 | } 117 | } 118 | 119 | @media screen and (min-width: 767px) { 120 | .footer_description { 121 | margin-bottom: 3.8125rem; 122 | } 123 | .footer_container { 124 | grid-template-columns: repeat(3, 1fr); 125 | } 126 | } 127 | 128 | @media screen and (min-width: 992px) { 129 | .footer_copy { 130 | margin-top: 1.875rem; 131 | } 132 | .footer_container { 133 | grid-template-columns: max-content 70px 70px 190px; 134 | justify-items: center; 135 | column-gap: 6.1875rem; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /assets/css/home/about.css: -------------------------------------------------------------------------------- 1 | .about_container { 2 | margin-left: 1rem; 3 | margin-right: 1rem; 4 | margin-top: 6.25rem; 5 | align-content: center; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | 10 | .about_title { 11 | font-family: var(--tittle-font); 12 | font-weight: var(--font-semi-bold); 13 | font-size: var(--title-font-size); 14 | color: var(--title-color); 15 | position: relative; 16 | } 17 | 18 | .about_title:before { 19 | content: ''; 20 | position: absolute; 21 | width: 180px; 22 | height: 180px; 23 | background: url('../../svg/decoration/x.svg') no-repeat; 24 | left: 270px; 25 | top: -5rem; 26 | z-index: -1; 27 | } 28 | 29 | .about_title::after { 30 | content: ''; 31 | position: absolute; 32 | width: 278px; 33 | height: 278px; 34 | left: -600px; 35 | top: 70px; 36 | background: radial-gradient( 37 | 53.9% 53.9% at 77.01% 30.21%, 38 | #d6d6d6 0%, 39 | #d8d7d7 100% 40 | ); 41 | opacity: 0.35; 42 | filter: blur(50px); 43 | z-index: -1; 44 | } 45 | 46 | .about_title-secondary { 47 | color: var(--primary-color); 48 | } 49 | 50 | .about_subtitle { 51 | margin-bottom: 2.5rem; 52 | margin-top: 1.875rem; 53 | font-size: var(--normal-font-size); 54 | font-family: var(--paragraphy-font); 55 | color: var(--paragraphy-color-light); 56 | font-weight: var(--font-regular); 57 | } 58 | 59 | .about_list { 60 | display: flex; 61 | flex-direction: column; 62 | position: relative; 63 | gap: 0.9375rem; 64 | margin-bottom: 3.125rem; 65 | justify-content: center; 66 | color: var(--paragraphy-color-light); 67 | font-family: var(--tittle-font); 68 | font-size: var(--small-font-size); 69 | font-weight: var(--font-medium); 70 | } 71 | 72 | .about_list li { 73 | transition: 0.5s; 74 | } 75 | 76 | .about_list li::before { 77 | content: ''; 78 | display: inline-block; 79 | width: 20px; 80 | height: 3px; 81 | border-radius: 0.3125rem; 82 | margin-bottom: 0.25rem; 83 | margin-right: 0.9375rem; 84 | background-color: var(--primary-color); 85 | } 86 | 87 | .about_list li:hover { 88 | margin-left: 8px; 89 | } 90 | 91 | .about_img { 92 | display: none; 93 | } 94 | 95 | .button { 96 | display: inline-block; 97 | background: var(--primary-color); 98 | color: var(--white-color); 99 | padding: 0.562rem 0.937rem; 100 | border-radius: 0.375rem; 101 | font-family: var(--tittle-font); 102 | font-weight: var(--font-medium); 103 | font-size: var(--normal-font-size); 104 | transition: 0.3s; 105 | } 106 | 107 | .button:hover { 108 | background-color: var(--primary-color-hover); 109 | } 110 | 111 | .about_icon { 112 | vertical-align: sub; 113 | font-size: 1.5rem; 114 | transition: 0.5s; 115 | } 116 | 117 | .button:hover .about_icon { 118 | transform: translateX(0.35rem); 119 | } 120 | 121 | /* MEDIA QUERIES */ 122 | @media screen and (min-width: 767px) { 123 | .about_container { 124 | grid-template-columns: repeat(2, 1fr); 125 | } 126 | .about_img { 127 | display: block; 128 | } 129 | .about_data { 130 | justify-self: end; 131 | align-self: center; 132 | } 133 | .about_title:before { 134 | top: -6.25rem; 135 | left: 16.875rem; 136 | } 137 | .about_subtitle { 138 | max-width: 47ch; 139 | } 140 | .about_title::after { 141 | content: ''; 142 | position: absolute; 143 | width: 278px; 144 | height: 278px; 145 | left: -600px; 146 | top: 70px; 147 | background: radial-gradient( 148 | 53.9% 53.9% at 77.01% 30.21%, 149 | #2314b5 0%, 150 | #140d59 100% 151 | ); 152 | opacity: 0.35; 153 | filter: blur(200px); 154 | z-index: -1; 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /assets/css/home/faqs.css: -------------------------------------------------------------------------------- 1 | .faqs_container { 2 | gap: 1.5rem; 3 | padding: 1.5rem 0; 4 | background: var(--background-gray); 5 | border: 1px solid var(--gray-color); 6 | box-sizing: border-box; 7 | border-radius: 1.5625rem; 8 | padding: 1.875rem 1.5625rem 1.875rem 1.5625rem; 9 | } 10 | 11 | .faqs_title { 12 | color: var(--title-color); 13 | font-family: var(--tittle-font); 14 | font-weight: var(--font-semi-bold); 15 | font-size: var(--title-font-size); 16 | position: relative; 17 | } 18 | 19 | .faqs_title::after { 20 | content: ''; 21 | display: block; 22 | position: absolute; 23 | width: 144px; 24 | height: 144px; 25 | top: -1.875rem; 26 | left: 18.75rem; 27 | background: url('../../svg/decoration/circle.svg') no-repeat; 28 | } 29 | 30 | .faqs_title-secondary { 31 | color: var(--primary-color); 32 | } 33 | 34 | .faqs_subtitle { 35 | margin-top: 1.875rem; 36 | font-family: var(--paragraphy-font); 37 | font-weight: var(--font-medium); 38 | font-size: var(--small-font-size); 39 | color: var(--paragraphy-color-light); 40 | } 41 | 42 | .faqs_subtitle-secondary { 43 | margin-top: 0.9375rem; 44 | margin-bottom: 2.75rem; 45 | font-size: var(--normal-font-size); 46 | font-family: var(--paragraphy-font); 47 | font-weight: var(--font-regular); 48 | color: var(--paragraphy-color-light); 49 | } 50 | 51 | .faqs_group { 52 | display: grid; 53 | gap: 0.5625rem; 54 | } 55 | 56 | .faqs_item-title { 57 | font-family: var(--tittle-font); 58 | font-weight: var(--font-semi-bold); 59 | font-size: var(--small-font-size); 60 | color: var(--gray-color-third); 61 | } 62 | 63 | .faqs_icon { 64 | font-size: 1.5rem; 65 | color: var(--gray-color-secondary); 66 | margin-right: 1.25rem; 67 | } 68 | 69 | .faqs_detail-secondary { 70 | margin-top: 0.9375rem; 71 | } 72 | 73 | .faqs_description { 74 | font-family: var(--paragraphy-font); 75 | font-weight: var(--font-regular); 76 | font-size: var(--small-font-size); 77 | line-height: 1.125rem; 78 | letter-spacing: 0.013em; 79 | color: var(--gray-color-third); 80 | box-sizing: border-box; 81 | } 82 | 83 | .faqs_header { 84 | display: flex; 85 | align-items: center; 86 | column-gap: 0.5rem; 87 | padding-top: 0.75rem; 88 | padding-bottom: 0.75rem; 89 | cursor: pointer; 90 | justify-content: space-between; 91 | border-top: 0.0625rem solid var(--gray-color); 92 | transition: 0.5s; 93 | } 94 | 95 | .faqs_header:hover { 96 | margin-left: 0.5rem; 97 | } 98 | 99 | .faqs_detail { 100 | border-bottom: 0.0625rem solid var(--gray-color); 101 | } 102 | 103 | .faqs_content { 104 | overflow: hidden; 105 | height: 0; 106 | } 107 | 108 | .faqs_item, 109 | .faqs_header, 110 | .faqs_item-title, 111 | .faqs_icon, 112 | .faqs_description, 113 | .faqs_content { 114 | transition: 0.3s; 115 | } 116 | 117 | .accordion-open .faqs_icon { 118 | transform: rotate(45deg); 119 | } 120 | 121 | /* MEDIAS QUERIES */ 122 | @media screen and (max-width: 320px) { 123 | .faqs_container { 124 | grid-template-columns: 0.6fr; 125 | justify-content: center; 126 | } 127 | } 128 | 129 | @media screen and (min-width: 767px) { 130 | .faqs_container { 131 | align-items: flex-start; 132 | } 133 | .faqs_header { 134 | border-top: 2px solid var(--gray-color); 135 | } 136 | .faqs_detail { 137 | border-bottom: 2px solid var(--gray-color); 138 | } 139 | .faqs_title::after { 140 | left: 43.75rem; 141 | } 142 | } 143 | 144 | @media screen and (min-width: 992px) { 145 | .faqs_container { 146 | padding: 2.5rem 4.375rem 2.5rem 4.375rem; 147 | } 148 | .faqs_title::after { 149 | left: 57.1875rem; 150 | } 151 | .faqs_description { 152 | padding: 0 3.5rem 2.25rem 2.75rem; 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /assets/svg/home/sony.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/css/global/global.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | html { 8 | scroll-behavior: smooth; 9 | } 10 | 11 | body, 12 | button, 13 | input, 14 | textarea { 15 | font-family: Arial, Helvetica, sans-serif; 16 | font-size: var(--normal-font-size); 17 | } 18 | 19 | body { 20 | margin: 3.5rem 0 0 0; 21 | background-color: var(--body-color); 22 | color: var(--text-color); 23 | } 24 | 25 | button { 26 | cursor: pointer; 27 | border: none; 28 | outline: none; 29 | } 30 | 31 | h1, 32 | h2, 33 | h3 { 34 | color: var(--text-color); 35 | font-weight: var(--font-semi-bold); 36 | } 37 | 38 | ul { 39 | list-style: none; 40 | } 41 | 42 | a { 43 | text-decoration: none; 44 | } 45 | 46 | img { 47 | max-width: 100%; 48 | height: auto; 49 | } 50 | 51 | /* Dark Mode */ 52 | body.dark-theme { 53 | --title-color: #fefefe; 54 | --title-color-secondary: #ffffff; 55 | --text-color: #8d8ea0; 56 | --body-color: #0a081e; 57 | --paragraphy-color-light: #9f9cb1; 58 | --background-gray: #14131a; 59 | --gray-color: transparent; 60 | --gray-color-third: #cacaca; 61 | --background-gray-secondary: #1c1f28; 62 | } 63 | 64 | /* Header */ 65 | .dark-theme .change-theme:hover, 66 | .dark-theme .nav_link:hover, 67 | .dark-theme .nav_logo { 68 | color: #f6f6f6; 69 | } 70 | 71 | /* Functions */ 72 | .dark-theme .functions_list { 73 | border: 0.0625rem solid #313642; 74 | } 75 | 76 | /* Produts */ 77 | .dark-theme .produts_list { 78 | background: radial-gradient(50% 50% at 50% 50%, #20178d 0%, #17124b 100%); 79 | backdrop-filter: blur(56px); 80 | border-radius: 15px; 81 | } 82 | 83 | /* Faqs */ 84 | .dark-theme .faqs_container { 85 | background: rgba(21, 20, 65, 0.2); 86 | border: 2px solid rgba(103, 103, 103, 0.3); 87 | backdrop-filter: blur(56px); 88 | } 89 | 90 | .dark-theme .faqs_header { 91 | border-top: 2px solid rgba(103, 103, 103, 0.3); 92 | } 93 | 94 | .dark-theme .faqs_description { 95 | color: #9f9cb1; 96 | } 97 | 98 | .dark-theme .hr_footer, 99 | .dark-theme .hr_footer-secondary { 100 | border: 1px solid rgba(124, 124, 124, 0.19); 101 | } 102 | 103 | /* Contact */ 104 | .dark-theme .form_mensage textarea, 105 | .dark-theme .form_email input, 106 | .dark-theme .form_name input, 107 | .dark-theme .form_name-2 input, 108 | .dark-theme .form_last-name input, 109 | .dark-theme .form_cpf input, 110 | .dark-theme .form_cep input, 111 | .dark-theme .form_number input, 112 | .dark-theme .form_place input, 113 | .dark-theme .form_neighborhood input, 114 | .dark-theme .form_city input, 115 | .dark-theme .form_state input { 116 | background: rgba(61, 61, 61, 0.05); 117 | border: 1px solid rgba(152, 152, 152, 1); 118 | } 119 | 120 | .dark-theme .form_name label, 121 | .dark-theme .form_email label, 122 | .dark-theme .form_mensage label, 123 | .dark-theme .form_cpf label, 124 | .dark-theme .form_last-name label, 125 | .dark-theme .form_name-2 label, 126 | .dark-theme .form_cep label, 127 | .dark-theme .form_number label, 128 | .dark-theme .form_place label, 129 | .dark-theme .form_neighborhood label, 130 | .dark-theme .form_city label, 131 | .dark-theme .form_state label { 132 | color: #ffffff; 133 | } 134 | 135 | /* Screnn */ 136 | .dark-theme .screen_loading { 137 | background-color: #0a081e; 138 | } 139 | 140 | /* Blur */ 141 | .dark-theme .home_title::after, 142 | .dark-theme .about_title::after, 143 | .dark-theme .faqs_item-title::before, 144 | .dark-theme .ps5_list::after { 145 | background: radial-gradient( 146 | 53.9% 53.9% at 77.01% 30.21%, 147 | #2314b5 0%, 148 | #140d59 100% 149 | ); 150 | } 151 | 152 | /* Controllers */ 153 | .dark-theme .ps5_controller h1 { 154 | color: #ffffff; 155 | } 156 | 157 | .dark-theme .ps5_controller h1 { 158 | color: #ffffff; 159 | } 160 | -------------------------------------------------------------------------------- /assets/css/home/introduction.css: -------------------------------------------------------------------------------- 1 | .home_container { 2 | align-content: center; 3 | align-items: center; 4 | margin-left: 1rem; 5 | margin-right: 1rem; 6 | position: relative; 7 | justify-content: center; 8 | } 9 | 10 | .home_title { 11 | font-family: var(--tittle-font); 12 | font-weight: var(--font-semi-bold); 13 | font-size: var(--big-font-size); 14 | color: var(--title-color); 15 | position: relative; 16 | margin-top: 2.1875rem; 17 | } 18 | 19 | .home_title::before { 20 | content: ''; 21 | position: absolute; 22 | width: 144px; 23 | height: 144px; 24 | background: url('../../svg/decoration/circle.svg') no-repeat; 25 | top: -1.5625rem; 26 | left: -4.375rem; 27 | z-index: -1; 28 | } 29 | 30 | .home_title::after { 31 | content: ''; 32 | position: absolute; 33 | width: 278px; 34 | height: 278px; 35 | left: 300px; 36 | top: 70px; 37 | background: radial-gradient( 38 | 53.9% 53.9% at 77.01% 30.21%, 39 | #d6d6d6 0%, 40 | #d8d7d7 100% 41 | ); 42 | opacity: 0.35; 43 | filter: blur(100px); 44 | z-index: -1; 45 | } 46 | 47 | .home_title-secondary { 48 | color: var(--primary-color); 49 | } 50 | 51 | .home_subtitle { 52 | margin-bottom: 2.1875rem; 53 | margin-top: 0.9375rem; 54 | font-size: var(--normal-font-size); 55 | font-family: var(--paragraphy-font); 56 | font-weight: var(--font-regular); 57 | color: var(--paragraphy-color-light); 58 | } 59 | 60 | .home_img { 61 | justify-self: center; 62 | display: none; 63 | } 64 | 65 | .home_buttons { 66 | display: flex; 67 | align-items: center; 68 | gap: 1.25rem; 69 | } 70 | 71 | .button { 72 | display: inline-block; 73 | background: var(--primary-color); 74 | color: var(--white-color); 75 | padding: 0.562rem 0.937rem; 76 | border-radius: 0.375rem; 77 | font-family: var(--tittle-font); 78 | font-weight: var(--font-medium); 79 | font-size: var(--normal-font-size); 80 | transition: 0.3s; 81 | } 82 | 83 | .button:hover { 84 | background-color: var(--primary-color-hover); 85 | } 86 | 87 | .button_secondary { 88 | display: inline-block; 89 | font-family: var(--tittle-font); 90 | font-weight: var(--font-medium); 91 | font-size: var(--normal-font-size); 92 | color: var(--paragraphy-color-light); 93 | transition: 0.5s; 94 | } 95 | 96 | .button_secondary:hover .button_icon { 97 | transform: translateX(0.35rem); 98 | } 99 | 100 | .button_icon { 101 | vertical-align: sub; 102 | font-size: 1.5rem; 103 | transition: 0.3s; 104 | } 105 | 106 | .home_company { 107 | margin-top: 4.375rem; 108 | display: grid; 109 | grid-template-columns: 1fr 1fr; 110 | gap: 2.5rem 5.625rem; 111 | justify-items: center; 112 | } 113 | 114 | /* MEDIA QUERIES */ 115 | @media screen and (max-width: 320px) { 116 | .home_img { 117 | height: 200px; 118 | } 119 | .home_buttons { 120 | flex-direction: column; 121 | width: max-content; 122 | row-gap: 1rem; 123 | gap: 1.25rem; 124 | align-items: baseline; 125 | } 126 | } 127 | 128 | @media screen and (min-width: 767px) { 129 | .home_container { 130 | height: 100vh; 131 | grid-template-columns: repeat(2, 1fr); 132 | align-items: center; 133 | } 134 | .home_img { 135 | display: block; 136 | } 137 | .home_title::before { 138 | top: -4.0625rem; 139 | } 140 | .home_subtitle { 141 | max-width: 44ch; 142 | } 143 | .home_buttons { 144 | gap: 3.125rem; 145 | } 146 | .home_company { 147 | justify-content: left; 148 | } 149 | .home_company { 150 | display: grid; 151 | grid-template-columns: 70px 70px; 152 | gap: 2.5rem 5.625rem; 153 | } 154 | .home_title::after { 155 | width: 378px; 156 | height: 378px; 157 | left: 600px; 158 | top: 70px; 159 | } 160 | } 161 | 162 | @media screen and (min-width: 1328px) { 163 | .home_title { 164 | margin-top: 7.1875rem; 165 | } 166 | .home_img { 167 | top: 80px; 168 | left: 350px; 169 | position: absolute; 170 | max-width: 650px; 171 | display: block; 172 | } 173 | .home_title::after { 174 | width: 378px; 175 | height: 378px; 176 | left: 600px; 177 | top: 70px; 178 | } 179 | } 180 | 181 | @media screen and (min-width: 1800px) { 182 | .home_img { 183 | top: 150px; 184 | } 185 | } 186 | 187 | @media screen and (min-width: 2000px) { 188 | .home_img { 189 | top: 200px; 190 | } 191 | } 192 | -------------------------------------------------------------------------------- /assets/css/home/produts.css: -------------------------------------------------------------------------------- 1 | .produts_container { 2 | margin-top: 6.25rem; 3 | justify-content: center; 4 | } 5 | 6 | .produts_title { 7 | text-align: center; 8 | color: var(--title-color); 9 | font-family: var(--tittle-font); 10 | font-weight: var(--font-semi-bold); 11 | font-size: var(--title-font-size); 12 | position: relative; 13 | } 14 | 15 | .produts_title::after { 16 | content: ''; 17 | display: block; 18 | position: absolute; 19 | width: 200px; 20 | height: 200px; 21 | top: -1.875rem; 22 | left: -3.75rem; 23 | background-image: url('../../svg/decoration/rectangle.svg'); 24 | } 25 | 26 | .produts_title-2 { 27 | color: var(--primary-color); 28 | } 29 | 30 | .produts_subtitle { 31 | text-align: center; 32 | margin-top: 1.25rem; 33 | margin-bottom: 3.75rem; 34 | font-size: var(--normal-font-size); 35 | font-family: var(--paragraphy-font); 36 | font-weight: var(--font-regular); 37 | color: var(--paragraphy-color-light); 38 | } 39 | 40 | .produts_list-container { 41 | display: grid; 42 | grid-template-columns: 250px; 43 | gap: 1.25rem; 44 | justify-content: center; 45 | } 46 | 47 | .produts_list { 48 | background: var(--background-gray-third); 49 | border: 1px solid var(--gray-color); 50 | box-sizing: border-box; 51 | border-radius: 25px; 52 | position: relative; 53 | } 54 | 55 | .ps5_list::after { 56 | content: ''; 57 | position: absolute; 58 | width: 270px; 59 | height: 410px; 60 | top: -10px; 61 | left: -10px; 62 | background: radial-gradient( 63 | 53.9% 53.9% at 77.01% 30.21%, 64 | #d6d6d6 0%, 65 | #d8d7d7 100% 66 | ); 67 | opacity: 0.35; 68 | filter: blur(150px); 69 | z-index: -1; 70 | } 71 | 72 | .produts_img { 73 | position: relative; 74 | max-width: 180px; 75 | left: 2.5rem; 76 | transition: 0.3s; 77 | } 78 | 79 | .product_circle { 80 | width: 120px; 81 | height: 120px; 82 | background-color: var(--primary-color); 83 | border-radius: 50%; 84 | position: absolute; 85 | z-index: -1; 86 | top: 11%; 87 | left: 25%; 88 | } 89 | 90 | .produts_list-title { 91 | font-family: var(--tittle-font); 92 | font-weight: var(--font-semi-bold); 93 | font-size: var(--normal-font-siz); 94 | margin-left: 2rem; 95 | color: var(--title-color); 96 | } 97 | 98 | .produts_evaluation { 99 | display: flex; 100 | gap: 0rem; 101 | margin-top: 0.625rem; 102 | margin-left: 1.8125rem; 103 | } 104 | 105 | .produts_evaluation-title { 106 | margin-left: 0.3125rem; 107 | } 108 | 109 | .produts_value { 110 | position: relative; 111 | margin-left: 2rem; 112 | top: 1.875rem; 113 | font-family: var(--tittle-font); 114 | font-weight: var(--font-semi-bold); 115 | font-size: var(--normal-font-size); 116 | color: var(--paragraphy-color-light); 117 | } 118 | 119 | .produts_buy { 120 | display: flex; 121 | flex-flow: row-reverse; 122 | } 123 | 124 | .produts_button { 125 | font-size: 2.375rem; 126 | color: var(--white-color); 127 | position: relative; 128 | left: 3.25rem; 129 | top: 0.625rem; 130 | } 131 | 132 | .produts_list:hover .produts_img { 133 | transform: translateY(-0.8rem); 134 | } 135 | 136 | .joystick_2 { 137 | margin-top: 55px; 138 | max-width: 150px; 139 | left: 50px; 140 | top: -20px; 141 | } 142 | 143 | .joystick_3 { 144 | margin-top: 30px; 145 | left: 30px; 146 | top: 10px; 147 | } 148 | 149 | /* MEDIAS QUERIES */ 150 | @media screen and (max-width: 320px) { 151 | .produts_list-container { 152 | grid-template-columns: 1fr; 153 | } 154 | } 155 | 156 | @media screen and (min-width: 576px) { 157 | .produts_list-container { 158 | grid-template-columns: repeat(2, 250px); 159 | gap: 3.75rem; 160 | } 161 | .product_circle { 162 | top: 13%; 163 | left: 24%; 164 | } 165 | .produts_img { 166 | left: 2.125rem; 167 | } 168 | .joystick_2 { 169 | left: 45px; 170 | top: -5px; 171 | } 172 | .joystick_3 { 173 | left: 25px; 174 | } 175 | } 176 | 177 | @media screen and (min-width: 860px) { 178 | .produts_list-container { 179 | grid-template-columns: repeat(3, 250px); 180 | gap: 3.75rem; 181 | } 182 | .produts_img { 183 | max-width: 230px; 184 | left: 0.75rem; 185 | } 186 | .joystick_2 { 187 | left: 20px; 188 | margin-top: 84px; 189 | top: -30px; 190 | } 191 | .joystick_3 { 192 | left: 5px; 193 | margin-top: 56px; 194 | } 195 | .product_circle { 196 | width: 150px; 197 | height: 160px; 198 | top: 15%; 199 | left: 18%; 200 | } 201 | } 202 | 203 | @media screen and (min-width: 1200px) { 204 | .bd-container { 205 | margin-left: auto; 206 | margin-right: auto; 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | // SHOW MENU 2 | const navMenu = document.getElementById('nav-menu'), 3 | navToggle = document.getElementById('nav-toggle'), 4 | navClose = document.getElementById('nav-close'); 5 | 6 | if (navToggle) { 7 | navToggle.addEventListener('click', () => { 8 | navMenu.classList.add('show-menu'); 9 | }); 10 | } 11 | 12 | if (navClose) { 13 | navClose.addEventListener('click', () => { 14 | navMenu.classList.remove('show-menu'); 15 | }); 16 | } 17 | 18 | // REMOVE MENU MOBILE 19 | const navLink = document.querySelectorAll('.nav_link'); 20 | 21 | function linkAction() { 22 | const navMenu = document.getElementById('nav-menu'); 23 | navMenu.classList.remove('show-menu'); 24 | } 25 | navLink.forEach((n) => n.addEventListener('click', linkAction)); 26 | 27 | // FAQS 28 | const accordionItems = document.querySelectorAll('.faqs_item'); 29 | 30 | accordionItems.forEach((item) => { 31 | const accordionHeader = item.querySelector('.faqs_header'); 32 | 33 | accordionHeader.addEventListener('click', () => { 34 | const openItem = document.querySelector('.accordion-open'); 35 | 36 | toggleItem(item); 37 | 38 | if (openItem && openItem !== item) { 39 | toggleItem(openItem); 40 | } 41 | }); 42 | }); 43 | 44 | const toggleItem = (item) => { 45 | const accordionContent = item.querySelector('.faqs_content'); 46 | 47 | if (item.classList.contains('accordion-open')) { 48 | accordionContent.removeAttribute('style'); 49 | item.classList.remove('accordion-open'); 50 | } else { 51 | accordionContent.style.height = accordionContent.scrollHeight + 'px'; 52 | item.classList.add('accordion-open'); 53 | } 54 | }; 55 | 56 | // SCROLL UP 57 | function scrollUp() { 58 | const scrollUp = document.getElementById('scroll-up'); 59 | if (this.scrollY >= 460) scrollUp.classList.add('show-scroll'); 60 | else scrollUp.classList.remove('show-scroll'); 61 | } 62 | window.addEventListener('scroll', scrollUp); 63 | 64 | // DARK MODE 65 | const themeButton = document.getElementById('theme-button'); 66 | const darkTheme = 'dark-theme'; 67 | const iconTheme = 'ri-sun-line'; 68 | const selectedTheme = localStorage.getItem('selected-theme'); 69 | const selectedIcon = localStorage.getItem('selected-icon'); 70 | 71 | const getCurrentTheme = () => 72 | document.body.classList.contains(darkTheme) ? 'dark' : 'light'; 73 | const getCurrentIcon = () => 74 | themeButton.classList.contains(iconTheme) ? 'ri-moon-line' : 'ri-sun-line'; 75 | 76 | if (selectedTheme) { 77 | document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove']( 78 | darkTheme 79 | ); 80 | themeButton.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove']( 81 | iconTheme 82 | ); 83 | } 84 | 85 | themeButton.addEventListener('click', () => { 86 | document.body.classList.toggle(darkTheme); 87 | themeButton.classList.toggle(iconTheme); 88 | localStorage.setItem('selected-theme', getCurrentTheme()); 89 | localStorage.setItem('selected-icon', getCurrentIcon()); 90 | }); 91 | 92 | // SCROLL REVEAL 93 | const sr = ScrollReveal({ 94 | origin: 'top', 95 | distance: '60px', 96 | duration: 2500, 97 | delay: 400, 98 | // reset: true 99 | }); 100 | 101 | sr.reveal(`.home_data`); 102 | sr.reveal( 103 | `.home_img, .ps5_controller-produts h1, .ps5_info-produts h1, 104 | .ps5_info-produts p, .ps5_list-produts li, .ps5_controller-produts a, 105 | .ps5_controller-produts`, 106 | { delay: 500 } 107 | ); 108 | sr.reveal( 109 | `.about_img, .ps5_controller-div, .ps4_controller-div, .squid_controller-div`, 110 | { 111 | origin: 'left', 112 | } 113 | ); 114 | sr.reveal( 115 | `.about_data, .ps5_controller img, .ps4_controller img, 116 | .squid_controller img, .ps4_controller-produts img, 117 | .squid_controller-produts img`, 118 | { 119 | origin: 'right', 120 | } 121 | ); 122 | sr.reveal(`.functions_title, .functions_subtitle`, { delay: 500 }); 123 | sr.reveal(`.functions_list`, { 124 | origin: 'top', 125 | }); 126 | sr.reveal(`.produts_list-container, .produts_title, .produts_subtitle`, { 127 | delay: 500, 128 | }); 129 | sr.reveal(`.faqs_title-center`, { delay: 500 }); 130 | sr.reveal(`.faqs_container, .footer`, { 131 | interval: 100, 132 | }); 133 | sr.reveal( 134 | `.terms_data, .privacy_data, .contact_data, .buy_form p, .buy_product h2, 135 | .buy_product, .email_data, .hr_footer, .hr_footer-secondary`, 136 | { 137 | delay: 500, 138 | } 139 | ); 140 | sr.reveal( 141 | `.contact_dice h2, .contact_dice-subtitle, .contact_adress, .contact_office, 142 | .contact_chat, .contact_networks, .contact_form h2, .contact_form-subtitle, 143 | .form_name, .form_email, .form_mensage, .button_form, .form_state, .form_city, 144 | .form_neighborhood, .form_place, .form_cep, .form_number, .form_cpf, 145 | .form_name-2, .form_last-name`, 146 | { 147 | origin: 'top', 148 | } 149 | ); 150 | 151 | // Activate Budget Items 152 | 153 | const parameters = new URLSearchParams(location.search); 154 | 155 | function activateProduct(parameter) { 156 | const elemento = document.getElementById(parameter); 157 | if (elemento) { 158 | elemento.checked = true; 159 | } 160 | console.log(elemento); 161 | } 162 | 163 | parameters.forEach(activateProduct); 164 | -------------------------------------------------------------------------------- /assets/css/controllers/controllers.css: -------------------------------------------------------------------------------- 1 | .ps5_controller { 2 | margin-top: 2.1875rem; 3 | } 4 | 5 | /* PS5 CONTROLELR */ 6 | .ps5_controller { 7 | display: grid; 8 | grid-template-columns: 1fr 1fr; 9 | } 10 | 11 | .ps5_controller h1 { 12 | font-family: var(--tittle-font); 13 | font-weight: var(--font-semi-bold); 14 | font-size: var(--title-font-size); 15 | line-height: 4.5rem; 16 | color: var(--title-color-secondary); 17 | position: relative; 18 | } 19 | 20 | .produts_produts::before { 21 | content: ''; 22 | position: absolute; 23 | width: 687.54px; 24 | height: 461.99px; 25 | background: url('../../svg/decoration/ellipse.svg') no-repeat center; 26 | top: 140px; 27 | left: -35px; 28 | z-index: -1; 29 | } 30 | 31 | .ps5_controller p { 32 | font-family: var(--paragraphy-font); 33 | font-weight: var(--font-regula); 34 | color: var(--gray-color-seve); 35 | font-size: var(--normal-font-size); 36 | line-height: 19px; 37 | margin-top: 1.5625rem; 38 | } 39 | 40 | .ps5_controller a { 41 | display: inline-block; 42 | margin-top: 2.1875rem; 43 | border-radius: 0.375rem; 44 | color: var(--white-color); 45 | background: var(--primary-color); 46 | font-family: var(--tittle-font); 47 | font-weight: var(--font-medium); 48 | font-size: var(--normal-font-size); 49 | line-height: 1.5rem; 50 | padding: 0.5625rem 0.9375rem; 51 | } 52 | 53 | .ps5_controller a:hover .button_icon-controllers { 54 | transform: translateX(0.35rem); 55 | } 56 | 57 | .button_icon-controllers { 58 | vertical-align: sub; 59 | font-size: 1.5rem; 60 | transition: 0.3s; 61 | } 62 | 63 | /* PS4 CONTROLLER */ 64 | .ps4_controller { 65 | display: grid; 66 | grid-template-columns: 1fr 1fr; 67 | margin-top: 6.25rem; 68 | } 69 | 70 | .ps4_controller div:first-child { 71 | align-self: center; 72 | } 73 | 74 | .ps4_controller h1 { 75 | font-family: var(--tittle-font); 76 | font-weight: var(--font-semi-bold); 77 | font-size: var(--title-font-size); 78 | color: var(--title-color-secondary); 79 | line-height: 4.5rem; 80 | } 81 | 82 | .ps4_controller span { 83 | color: var(--primary-color); 84 | } 85 | 86 | .ps4_controller p { 87 | font-family: var(--paragraphy-font); 88 | font-weight: var(--font-regula); 89 | font-size: var(--normal-font-size); 90 | color: var(--gray-color-seve); 91 | line-height: 1.1875rem; 92 | margin-top: 0.9375rem; 93 | margin-bottom: 2.1875rem; 94 | } 95 | 96 | .ps4_controller a { 97 | font-family: var(--tittle-font); 98 | font-weight: var(--font-medium); 99 | font-size: var(--normal-font-size); 100 | color: var(--primary-color); 101 | line-height: 1.5rem; 102 | } 103 | 104 | .ps4_controller a:hover .button_icon-controllers { 105 | transform: translateX(0.35rem); 106 | } 107 | 108 | .ps4_controller img { 109 | max-width: 250px; 110 | } 111 | 112 | /* SQUID CONTROLELR */ 113 | .squid_controller { 114 | display: grid; 115 | grid-template-columns: 1fr 1fr; 116 | margin-top: 6.25rem; 117 | position: relative; 118 | } 119 | 120 | .squid_controller h1 { 121 | font-family: var(--tittle-font); 122 | font-weight: var(--font-semi-bold); 123 | font-size: var(--title-font-size); 124 | color: var(--title-color-secondary); 125 | line-height: 4.5rem; 126 | position: relative; 127 | } 128 | 129 | .squid_controller span { 130 | color: var(--primary-color); 131 | } 132 | 133 | .squid_controller p { 134 | font-family: var(--paragraphy-font); 135 | font-weight: var(--font-regula); 136 | font-size: var(--normal-font-size); 137 | color: var(--gray-color-seve); 138 | line-height: 1.1875rem; 139 | margin-top: 0.9375rem; 140 | margin-bottom: 2.1875rem; 141 | } 142 | 143 | .squid_controller a { 144 | font-family: var(--tittle-font); 145 | font-weight: var(--font-medium); 146 | font-size: var(--normal-font-size); 147 | color: var(--primary-color); 148 | line-height: 1.5rem; 149 | } 150 | 151 | .squid_controller a:hover .button_icon-controllers { 152 | transform: translateX(0.35rem); 153 | } 154 | 155 | /* MEDIAS QUERIES */ 156 | @media screen and (min-width: 767px) { 157 | .ps5_controller { 158 | margin-top: 12.875rem; 159 | } 160 | .ps4_controller img { 161 | max-width: 400px; 162 | } 163 | } 164 | 165 | @media screen and (max-width: 767px) { 166 | .ps4_controller, 167 | .ps5_controller, 168 | .squid_controller { 169 | grid-template-columns: 1fr; 170 | gap: 3.75rem; 171 | } 172 | .squid_controller h1 br, 173 | .ps4_controller h1 br { 174 | display: none; 175 | } 176 | .squid_controller div:first-child { 177 | grid-row: 2; 178 | } 179 | .ps5_controller h1 span { 180 | color: var(--primary-color); 181 | } 182 | .ps5_controller img { 183 | max-width: 260px; 184 | } 185 | .squid_controller img { 186 | max-width: 290px; 187 | } 188 | .ps4_controller div:last-child, 189 | .ps5_controller div:last-child, 190 | .squid_controller div:first-child { 191 | text-align: -webkit-center; 192 | } 193 | .ps5_controller h1, 194 | .ps4_controller h1, 195 | .squid_controller h1 { 196 | line-height: 2.8125rem; 197 | } 198 | } 199 | @media screen and (min-width: 1350px) { 200 | .ps4_controller img { 201 | margin-left: 5.4375rem; 202 | } 203 | .ps5_controller h1 { 204 | color: var(--white-color-third); 205 | } 206 | .ps5_controller p { 207 | color: #c5c4f0; 208 | } 209 | .ps5_controller a { 210 | color: var(--primary-color); 211 | background-color: var(--white-color); 212 | } 213 | .ps4_controller, 214 | .squid_controller { 215 | margin-top: 15.625rem; 216 | } 217 | .ps5_controller { 218 | margin-top: 12.5rem; 219 | } 220 | .squid_controller img { 221 | margin-left: -1.25rem; 222 | } 223 | .ps5_controller p { 224 | max-width: 43ch; 225 | } 226 | .ps4_controller img { 227 | max-width: 400px; 228 | } 229 | .ps5_controller p, 230 | .ps4_controller p, 231 | .squid_controller p { 232 | margin-top: 1.875rem; 233 | } 234 | .ps5_controller a, 235 | .ps4_controller p, 236 | .squid_controller p { 237 | margin-top: 2.5rem; 238 | } 239 | .squid_controller div:last-child { 240 | justify-self: self-end; 241 | } 242 | } 243 | 244 | @media screen and (max-width: 1350px) { 245 | .produts_produts::before { 246 | display: none; 247 | } 248 | } 249 | 250 | @media screen and (min-width: 1400px) { 251 | .produts_produts::before { 252 | display: none; 253 | } 254 | .ps5_controller h1 { 255 | color: #0e0e0e; 256 | } 257 | .ps5_controller p { 258 | color: #8d8ea0; 259 | } 260 | } 261 | -------------------------------------------------------------------------------- /assets/html/email.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Email Confirmation | Playstation 10 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 122 | 123 |
124 |
125 | 131 |

132 | Thank you for your ! 133 |

134 | 135 |
136 |
137 | 138 |
139 | 231 | 232 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | -------------------------------------------------------------------------------- /assets/css/produts/produts.css: -------------------------------------------------------------------------------- 1 | /* PS4 Controller */ 2 | .ps4_controller-produts { 3 | display: grid; 4 | grid-template-columns: 1fr; 5 | gap: 1.875rem; 6 | margin-top: 3.125rem; 7 | } 8 | 9 | .ps4_controller-produts div { 10 | align-self: center; 11 | justify-self: center; 12 | } 13 | 14 | .ps4_controller-produts h1 { 15 | font-family: var(--tittle-font); 16 | font-weight: var(--font-semi-bold); 17 | font-size: var(--title-font-size); 18 | color: var(--title-color-secondary); 19 | line-height: 3.375rem; 20 | } 21 | 22 | .ps4_controller-produts span { 23 | color: var(--primary-color); 24 | } 25 | 26 | .ps4_controller-produts p { 27 | margin-top: 1.875rem; 28 | font-family: var(--paragraphy-font); 29 | font-weight: var(--font-regular); 30 | font-size: var(--normal-font-size); 31 | line-height: 1.1875rem; 32 | color: var(--gray-color-seven); 33 | } 34 | 35 | .ps4_list-produts { 36 | display: flex; 37 | flex-direction: column; 38 | position: relative; 39 | gap: 0.9375rem; 40 | margin-bottom: 3.125rem; 41 | justify-content: center; 42 | font-family: var(--paragraphy-font); 43 | font-weight: var(--font-regular); 44 | font-size: var(--normal-font-size); 45 | line-height: 1.1875rem; 46 | margin-top: 1.875rem; 47 | color: var(--gray-color-seven); 48 | } 49 | 50 | .ps4_list-produts li { 51 | transition: 0.5s; 52 | cursor: pointer; 53 | } 54 | 55 | .ps4_list-produts li::before { 56 | content: ''; 57 | display: inline-block; 58 | width: 18px; 59 | height: 4px; 60 | border-radius: 0.3125rem; 61 | background-color: var(--primary-color); 62 | margin-bottom: 0.25rem; 63 | margin-right: 0.625rem; 64 | } 65 | 66 | .ps4_list-produts li:hover { 67 | margin-left: 8px; 68 | } 69 | 70 | .produts_button { 71 | cursor: none; 72 | } 73 | 74 | .ps4_controller-produts a { 75 | display: inline-block; 76 | background: var(--primary-color); 77 | border-radius: 0.375rem; 78 | font-family: var(--tittle-font); 79 | font-weight: var(--font-medium); 80 | font-size: var(--normal-font-size); 81 | color: var(--white-color); 82 | line-height: 1.5rem; 83 | padding: 0.5625rem 0.9375rem; 84 | transition: 0.3s; 85 | } 86 | 87 | .ps4_controller-produts a:hover { 88 | background-color: var(--primary-color-hover); 89 | } 90 | 91 | .ps4_controller-produts img { 92 | max-width: 280px; 93 | } 94 | 95 | /* PS5 Controller */ 96 | .ps5_controller-produts { 97 | background-color: var(--primary-color); 98 | position: relative; 99 | margin-top: 6.625rem; 100 | } 101 | 102 | .ps5_info-produts { 103 | display: flex; 104 | padding: 8.125rem 0 8.75rem 0; 105 | flex-direction: column; 106 | align-items: center; 107 | text-align: center; 108 | } 109 | 110 | /* Controler PS5 */ 111 | .ps5_controller-produts::before { 112 | display: none; 113 | content: ''; 114 | position: absolute; 115 | width: 634px; 116 | height: 417px; 117 | background: url('../../img/decoration/controller-produts-2.webp') no-repeat 118 | center; 119 | top: 120px; 120 | left: -160px; 121 | z-index: 1; 122 | } 123 | 124 | /* Controler PS5 */ 125 | .ps5_controller-produts::after { 126 | display: none; 127 | content: ''; 128 | position: absolute; 129 | width: 634px; 130 | height: 417px; 131 | background: url('../../img/decoration/controller-produts-3.webp') no-repeat 132 | center; 133 | top: 120px; 134 | right: -150px; 135 | } 136 | 137 | /* Border */ 138 | .ps5_controller-produts h1::after { 139 | display: none; 140 | content: ''; 141 | position: absolute; 142 | width: 1200px; 143 | height: 550px; 144 | background: url('../../img/decoration/border-produts.webp') no-repeat center; 145 | top: -75px; 146 | left: -390px; 147 | } 148 | 149 | .ps5_info-produts h1 { 150 | font-family: var(--tittle-font); 151 | font-weight: var(--font-semi-bold); 152 | font-size: var(--title-font-size); 153 | color: var(--white-color); 154 | line-height: 4.5rem; 155 | position: relative; 156 | } 157 | 158 | .ps5_info-produts p { 159 | font-family: var(--paragraphy-font); 160 | font-size: var(--normal-font-size); 161 | font-weight: var(--font-regular); 162 | line-height: 1.1875rem; 163 | margin-top: 1.875rem; 164 | color: #c5c4f0; 165 | max-width: 49ch; 166 | } 167 | 168 | .ps5_list-produts { 169 | display: flex; 170 | flex-direction: column; 171 | position: relative; 172 | gap: 0.9375rem; 173 | margin-bottom: 3.125rem; 174 | justify-content: center; 175 | font-family: var(--paragraphy-font); 176 | font-weight: var(--font-regular); 177 | font-size: var(--normal-font-size); 178 | margin-top: 1.875rem; 179 | line-height: 1.1875rem; 180 | color: #c5c4f0; 181 | } 182 | 183 | .ps5_list-produts li { 184 | transition: 0.5s; 185 | cursor: pointer; 186 | } 187 | 188 | .ps5_list-produts li::before { 189 | content: ''; 190 | display: inline-block; 191 | width: 18px; 192 | height: 4px; 193 | border-radius: 0.3125rem; 194 | margin-bottom: 0.25rem; 195 | margin-right: 0.625rem; 196 | background: var(--white-color); 197 | } 198 | 199 | .ps5_list-produts li:hover { 200 | margin-left: 8px; 201 | } 202 | 203 | .ps5_controller-produts a { 204 | background: var(--white-color); 205 | border-radius: 0.375rem; 206 | font-family: var(--tittle-font); 207 | font-weight: var(--font-medium); 208 | font-size: var(--normal-font-size); 209 | color: var(--primary-color); 210 | line-height: 1.5rem; 211 | padding: 0.5625rem 0.9375rem; 212 | } 213 | 214 | .PS5_img { 215 | max-width: 280px; 216 | margin-bottom: 20px; 217 | } 218 | 219 | /* Squid Controller */ 220 | .squid_controller-produts { 221 | display: grid; 222 | grid-template-columns: 1fr; 223 | margin-top: 7.5rem; 224 | gap: 1.25rem; 225 | } 226 | 227 | .squid_controller-produts h1 { 228 | font-family: var(--tittle-font); 229 | font-weight: var(--font-semi-bold); 230 | font-size: var(--title-font-size); 231 | color: var(--title-color-secondary); 232 | line-height: 4.5rem; 233 | } 234 | 235 | .squid_controller-produts span { 236 | color: var(--primary-color); 237 | } 238 | 239 | .squid_controller-produts p { 240 | margin-top: 1.875rem; 241 | font-family: var(--paragraphy-font); 242 | font-weight: var(--font-regular); 243 | font-size: var(--normal-font-size); 244 | color: var(--gray-color-seven); 245 | margin-bottom: 1.875rem; 246 | line-height: 1.1875rem; 247 | } 248 | 249 | .squid_list-produts li { 250 | font-family: var(--paragraphy-font); 251 | font-weight: var(--font-regular); 252 | font-size: var(--normal-font-size); 253 | line-height: 1.1875rem; 254 | margin-bottom: 0.625rem; 255 | color: var(--gray-color-seven); 256 | transition: 0.5s; 257 | cursor: pointer; 258 | } 259 | 260 | .squid_list-produts li::before { 261 | content: ''; 262 | display: inline-block; 263 | width: 18px; 264 | height: 4px; 265 | border-radius: 0.3125rem; 266 | margin-bottom: 0.25rem; 267 | margin-right: 0.625rem; 268 | background-color: var(--primary-color); 269 | } 270 | 271 | .squid_list-produts li:hover { 272 | margin-left: 8px; 273 | } 274 | 275 | .squid_controller-produts a { 276 | display: inline-block; 277 | background: var(--primary-color); 278 | border-radius: 0.375rem; 279 | font-family: var(--tittle-font); 280 | font-weight: var(--font-medium); 281 | font-size: var(--normal-font-size); 282 | color: var(--white-color); 283 | line-height: 1.5rem; 284 | margin-top: 2.1875rem; 285 | padding: 0.5625rem 0.9375rem; 286 | transition: 0.3s; 287 | } 288 | 289 | .squid_controller-produts a:hover { 290 | background-color: var(--primary-color-hover); 291 | } 292 | 293 | .squid_controller-produts div { 294 | justify-self: center; 295 | } 296 | 297 | .squid_controller-produts img { 298 | max-width: 280px; 299 | } 300 | 301 | /* Medias Queries */ 302 | 303 | @media screen and (min-width: 767px) { 304 | .ps4_controller-produts, 305 | .squid_controller-produts { 306 | grid-template-columns: 1fr 1fr; 307 | margin-top: 7.5rem; 308 | } 309 | .ps4_controller-produts img { 310 | max-width: 340px; 311 | } 312 | .squid_controller-produts img { 313 | margin-top: 3.125rem; 314 | max-width: 400px; 315 | } 316 | } 317 | 318 | @media screen and (min-width: 978px) { 319 | .ps4_controller-produts, 320 | .squid_controller-produts { 321 | grid-template-columns: repeat(2, 1fr); 322 | } 323 | .ps5_controller-produts::before, 324 | .ps5_controller-produts::after, 325 | .ps5_controller-produts h1::after { 326 | display: inline-block; 327 | } 328 | .ps5_controller-produts::before, 329 | .ps5_controller-produts::after, 330 | .ps4_controller-produts img { 331 | max-width: 400px; 332 | } 333 | .ps4_controller-produts { 334 | margin-top: 7.5rem; 335 | } 336 | .squid_controller-produts img { 337 | margin-top: 3.125rem; 338 | } 339 | .PS5_img { 340 | display: none; 341 | } 342 | .produts_button { 343 | cursor: pointer; 344 | } 345 | } 346 | 347 | @media screen and (min-width: 1200px) { 348 | .ps4_controller-produts { 349 | margin-top: 7.5rem; 350 | grid-template-columns: repeat(2, 1fr); 351 | gap: 3.75rem; 352 | } 353 | .squid_controller-produts { 354 | grid-template-columns: repeat(2, 1fr); 355 | } 356 | .ps4_controller-produts img, 357 | .squid_controller-produts img { 358 | max-width: 100%; 359 | } 360 | .squid_controller-produts img { 361 | margin-top: 3.125rem; 362 | } 363 | .squid_controller-produts { 364 | gap: 3.75rem; 365 | } 366 | .ps5_controller-produts::before, 367 | .ps5_controller-produts::after { 368 | max-width: 100%; 369 | } 370 | .produts_button { 371 | cursor: pointer; 372 | } 373 | } 374 | -------------------------------------------------------------------------------- /assets/html/privacy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Privacy Policy | Playstation 10 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 122 | 123 |
124 | 125 |
126 |
127 |

Politics

128 |

129 | Privacy 130 | Policy 131 |

132 |

1. Chargeback Policy

133 |

134 | We collect your data according to your access and use of our 135 | websites, applications and services offered by Playstation or by 136 | partners that have been duly authorized by us. 137 |

138 |

1.1 Information will be collected:

139 |
    140 |
  • 141 | (i) When you voluntarily complete the registration available on 142 | our website/application; 143 |
    • 144 |
  • 145 | (ii) During your browsing on our websites, being stored in your 146 | computer's browser; 147 |
    • 148 |
  • 149 | (iii) During your browsing on our websites, being stored in your 150 | computer's browser; 151 |
    • 152 |
  • 153 | (iv) From partners who have obtained authorization to share them 154 | with Playstation. 155 |
    • 156 |
157 | 158 |

159 | 1.2 The information PlayStation collects may include, but is not 160 | limited to: 161 |

162 |
    163 |
  • (i) Registration data¹ and address;
    • 164 |
  • (ii) Data for the verification of the User's identity;
    • 165 |
  • (iii) Data for data management processes; and
    • 166 |
  • (iv) Navigational data.
    • 167 |
168 |
169 |
170 |
171 | 172 |
173 | 265 | 266 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | -------------------------------------------------------------------------------- /assets/css/contact/contact.css: -------------------------------------------------------------------------------- 1 | .contact_data { 2 | margin-top: 2.1875rem; 3 | } 4 | 5 | .contact_title { 6 | position: relative; 7 | color: var(--title-color); 8 | font-family: var(--tittle-font); 9 | font-weight: var(--font-semi-bold); 10 | font-size: var(--title-font-size); 11 | } 12 | 13 | .contact_title-secondary { 14 | color: var(--primary-color); 15 | } 16 | 17 | .contact_subtitle { 18 | margin-top: 1.875rem; 19 | text-transform: uppercase; 20 | font-family: var(--paragraphy-font); 21 | font-weight: var(--font-medium); 22 | font-size: var(--small-font-size); 23 | color: var(--paragraphy-color-light); 24 | } 25 | 26 | .contact { 27 | display: grid; 28 | grid-template-columns: 1fr; 29 | margin-top: 2.75rem; 30 | } 31 | 32 | .contact_dice { 33 | background-color: var(--primary-color); 34 | border-radius: 0.9375rem 0.9375rem 0rem 0rem; 35 | padding: 2.9375rem 3.125rem 63px 3.125rem; 36 | } 37 | 38 | .contact_dice h2 { 39 | font-family: var(--tittle-font); 40 | font-weight: var(--font-semi-bold); 41 | color: var(--white-color); 42 | font-size: var(--regularly-font-size); 43 | line-height: 2.0625rem; 44 | margin-bottom: 1.25rem; 45 | text-align: center; 46 | } 47 | 48 | .contact_dice-subtitle { 49 | font-family: var(--paragraphy-font); 50 | font-weight: var(--font-regular); 51 | font-size: var(--normal-font-size); 52 | color: var(--gray-color-sixth); 53 | line-height: 1.1875rem; 54 | text-align: center; 55 | } 56 | 57 | .contact_office, 58 | .contact_adress, 59 | .contact_chat i { 60 | font-size: 1.5rem; 61 | color: var(--white-color); 62 | } 63 | 64 | .contact_adress { 65 | margin-top: 2.9375rem; 66 | display: flex; 67 | justify-content: center; 68 | } 69 | 70 | .contact_adress div { 71 | margin-left: 1.25rem; 72 | flex-direction: column; 73 | } 74 | 75 | .title_adress { 76 | margin-bottom: 0.9375rem; 77 | font-family: var(--tittle-font); 78 | font-weight: var(--font-semi-bold); 79 | font-size: var(--normal-font-size); 80 | color: var(--white-color); 81 | line-height: 1.5rem; 82 | } 83 | 84 | .content_adress { 85 | margin-bottom: 0.9375rem; 86 | font-family: var(--paragraphy-font); 87 | font-weight: var(--font-regular); 88 | font-size: var(--normal-font-size); 89 | color: var(--gray-color-sixth); 90 | line-height: 1.1875rem; 91 | } 92 | 93 | .content_adress-2 { 94 | font-family: var(--tittle-font); 95 | font-weight: var(--font-semi-bold); 96 | font-size: var(--normal-font-size); 97 | color: var(--white-color-secondary); 98 | line-height: 1.5rem; 99 | } 100 | 101 | .contact_office { 102 | margin-top: 2.9375rem; 103 | display: flex; 104 | justify-content: center; 105 | } 106 | 107 | .contact_office div { 108 | margin-left: 1.25rem; 109 | flex-direction: column; 110 | } 111 | 112 | .title_office { 113 | margin-bottom: 0.9375rem; 114 | font-family: var(--tittle-font); 115 | font-weight: var(--font-semi-bold); 116 | font-size: var(--normal-font-size); 117 | color: var(--white-color); 118 | line-height: 1.5rem; 119 | } 120 | 121 | .content_office { 122 | margin-bottom: 0.9375rem; 123 | font-family: var(--paragraphy-font); 124 | font-weight: var(--font-regular); 125 | font-size: var(--normal-font-size); 126 | color: var(--gray-color-sixth); 127 | line-height: 1.1875rem; 128 | } 129 | 130 | .content_office-2 { 131 | font-family: var(--tittle-font); 132 | font-weight: var(--font-semi-bold); 133 | font-size: var(--normal-font-size); 134 | color: var(--white-color-secondary); 135 | line-height: 1.5rem; 136 | } 137 | 138 | .contact_chat { 139 | margin-top: 2.9375rem; 140 | display: flex; 141 | justify-content: center; 142 | } 143 | 144 | .contact_chat div { 145 | margin-left: 1.25rem; 146 | flex-direction: column; 147 | } 148 | 149 | .title_chat { 150 | margin-bottom: 0.9375rem; 151 | font-family: var(--tittle-font); 152 | font-weight: var(--font-semi-bold); 153 | font-size: var(--normal-font-size); 154 | color: var(--white-color); 155 | line-height: 1.5rem; 156 | } 157 | 158 | .content_chat { 159 | margin-bottom: 0.9375rem; 160 | font-family: var(--paragraphy-font); 161 | font-weight: var(--font-regular); 162 | font-size: var(--normal-font-size); 163 | color: var(--gray-color-sixth); 164 | line-height: 1.1875rem; 165 | } 166 | 167 | .content_chat-2 { 168 | font-family: var(--tittle-font); 169 | font-weight: var(--font-semi-bold); 170 | font-size: var(--normal-font-size); 171 | color: var(--white-color-secondary); 172 | line-height: 1.5rem; 173 | } 174 | 175 | .contact_networks { 176 | margin-top: 3.125rem; 177 | display: flex; 178 | gap: 1.25rem; 179 | font-size: var(--icon-font-size); 180 | justify-content: center; 181 | } 182 | 183 | .contact_networks i { 184 | color: var(--white-color); 185 | transition: 0.3s; 186 | } 187 | 188 | .contact_networks i:hover { 189 | transform: translateY(-0.4rem); 190 | } 191 | 192 | .contact_form { 193 | background: var(--background-gray); 194 | border: 1px solid var(--gray-color); 195 | box-sizing: border-box; 196 | border-radius: 0rem 0rem 0.9375rem 0.9375rem; 197 | padding: 4.4375rem 1.875rem 3.75rem 1.875rem; 198 | } 199 | 200 | .contact_form h2 { 201 | font-family: var(--tittle-font); 202 | font-weight: var(--font-semi-bold); 203 | color: var(--title-color-secondary); 204 | font-size: var(--regularly-font-size); 205 | line-height: 2.0625rem; 206 | text-align: center; 207 | } 208 | 209 | .contact_form-subtitle { 210 | font-family: var(--paragraphy-font); 211 | font-weight: var(--font-regular); 212 | font-size: var(--normal-font-size); 213 | color: var(--paragraphy-color-light); 214 | line-height: 1.1875rem; 215 | letter-spacing: 0.015em; 216 | margin-top: 1.5625rem; 217 | margin-bottom: 2.5rem; 218 | text-align: center; 219 | } 220 | 221 | .contact_form-subtitle span { 222 | font-family: var(--tittle-font); 223 | font-weight: var(--font-semi-bold); 224 | font-size: var(--normal-font-size); 225 | color: var(--primary-color); 226 | line-height: 1.5rem; 227 | letter-spacing: 0.015em; 228 | } 229 | 230 | .form_name { 231 | display: flex; 232 | flex-direction: column; 233 | } 234 | 235 | .form_name label { 236 | font-family: var(--tittle-font); 237 | font-weight: var(--font-semi-bold); 238 | font-size: var(--normal-font-size); 239 | color: var(--gray-color-five); 240 | line-height: 1.5rem; 241 | letter-spacing: 0.015em; 242 | margin-bottom: 0.625rem; 243 | } 244 | 245 | .form_name input { 246 | font-family: var(--paragraphy-font); 247 | font-weight: var(--font-regular); 248 | font-size: var(--normal-font-size); 249 | line-height: 1.1875rem; 250 | letter-spacing: 0.015em; 251 | padding: 0.8125rem; 252 | color: var(--title-color-secondary); 253 | background: var(--background-gray); 254 | border: 1px solid var(--gray-color); 255 | box-sizing: border-box; 256 | outline: 2px solid transparent; 257 | border-radius: 0.3125rem; 258 | transition: 0.3s;+ 259 | } 260 | 261 | .form_name input:focus { 262 | border: 1px solid transparent; 263 | outline: 2px solid var(--primary-color); 264 | } 265 | 266 | .form_name input:-webkit-autofill { 267 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 268 | } 269 | 270 | .form_email { 271 | display: flex; 272 | flex-direction: column; 273 | margin-top: 1.875rem; 274 | } 275 | 276 | .form_email label { 277 | font-family: var(--tittle-font); 278 | font-weight: var(--font-semi-bold); 279 | font-size: var(--normal-font-size); 280 | color: var(--gray-color-five); 281 | line-height: 1.5rem; 282 | letter-spacing: 0.015em; 283 | margin-bottom: 0.625rem; 284 | } 285 | 286 | .form_email input { 287 | font-family: var(--paragraphy-font); 288 | font-weight: var(--font-regular); 289 | font-size: var(--normal-font-size); 290 | line-height: 1.1875rem; 291 | letter-spacing: 0.015em; 292 | padding: 0.8125rem; 293 | color: var(--title-color-secondary); 294 | background: var(--background-gray); 295 | border: 1px solid var(--gray-color); 296 | box-sizing: border-box; 297 | outline: 2px solid transparent; 298 | border-radius: 0.3125rem; 299 | transition: 0.3s; 300 | } 301 | 302 | .form_email input:focus { 303 | outline: 2px solid var(--primary-color); 304 | border: 1px solid transparent; 305 | } 306 | 307 | .form_email input:-webkit-autofill { 308 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 309 | } 310 | 311 | .form_mensage { 312 | display: flex; 313 | flex-direction: column; 314 | margin-top: 1.875rem; 315 | } 316 | 317 | .form_mensage label { 318 | font-family: var(--tittle-font); 319 | font-weight: var(--font-semi-bold); 320 | font-size: var(--normal-font-size); 321 | color: var(--gray-color-five); 322 | line-height: 1.5rem; 323 | letter-spacing: 0.015em; 324 | margin-bottom: 0.625rem; 325 | } 326 | 327 | .form_mensage textarea { 328 | font-family: var(--paragraphy-font); 329 | font-weight: var(--font-regular); 330 | font-size: var(--normal-font-size); 331 | line-height: 1.1875rem; 332 | letter-spacing: 0.015em; 333 | color: var(--title-color-secondary); 334 | padding: 0.8125rem; 335 | background: var(--background-gray); 336 | border: 1px solid var(--gray-color); 337 | box-sizing: border-box; 338 | outline: 2px solid transparent; 339 | border-radius: 0.3125rem; 340 | transition: 0.3s; 341 | } 342 | 343 | .form_mensage textarea:focus { 344 | outline: 2px solid var(--primary-color); 345 | border: 1px solid transparent; 346 | } 347 | 348 | .contact button { 349 | width: 100%; 350 | height: 50px; 351 | color: var(--white-color); 352 | background: var(--primary-color); 353 | font-family: var(--tittle-font); 354 | font-weight: var(--font-medium); 355 | font-size: var(--normal-font-size); 356 | line-height: 1.5rem; 357 | margin-top: 3.125rem; 358 | border-radius: 0.5rem; 359 | transition: 0.3s; 360 | } 361 | 362 | .contact button:hover { 363 | background-color: var(--primary-color-hover); 364 | } 365 | 366 | /* MEDIAS QUERIES */ 367 | @media screen and (min-width: 766px) { 368 | .contact_data { 369 | margin-top: 8.125rem; 370 | } 371 | .contact { 372 | margin-top: 4rem; 373 | } 374 | } 375 | @media screen and (min-width: 1020px) { 376 | .contact { 377 | grid-template-columns: repeat(2, 445px 523px); 378 | } 379 | .contact_dice { 380 | border-radius: 0.9375rem 0rem 0rem 0.9375rem; 381 | padding: 2.9375rem 3.6875rem 3.9375rem 4.375rem; 382 | } 383 | .contact_form { 384 | border-radius: 0rem 0.9375rem 0.9375rem 0rem; 385 | padding: 4.4375rem 1.875rem 3.75rem 4.375rem; 386 | } 387 | 388 | .contact_dice-subtitle, 389 | .contact_form-subtitle, 390 | .contact_form h2, 391 | .contact_dice h2 { 392 | text-align: left; 393 | } 394 | .contact_adress, 395 | .contact_chat, 396 | .contact_office, 397 | .contact_networks { 398 | justify-content: left; 399 | } 400 | .contact_networks { 401 | margin-left: 2.6875rem; 402 | } 403 | } -------------------------------------------------------------------------------- /assets/html/terms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Terms of Service | Playstation 10 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 122 | 123 |
124 | 125 |
126 |
127 |

AGREEMENT

128 |

129 | Terms of 130 | Service 131 |

132 |

133 | We now ts engting to skip these Terms otf Service. ut simportort to 134 | estabish whar yoou can epect tron us as ou use vartage serices, and 135 | what we epect fron you. 136 |

137 |

138 | These Terms of Service reflect the way Vantage business works, the 139 | laws that apply to our company, and certain things we've always 140 | believed to be true. As a result, these Terms of Service help define 141 | Vantage's relationship with you as you interact with our services. 142 | For example, these terms include the following topic headings: 143 |

144 |
    145 |
  • 146 | What you can expect from us, which describes how we provide and 147 | develop our services 148 |
    • 149 |
  • 150 | What we expect from you, which establishes certain rules for using 151 | our services 152 |
    • 153 |
  • 154 | Content in Vantage services, which describes the intellectual 155 | property rights to the content you find in our services - whether 156 | that content belongs to you, Vantage, or others 157 |
    • 158 |
  • 159 | In case of problems or disagreements, which describes other legal 160 | rights you have, and what to expect in case someone violates these 161 | terms 162 |
    • 163 |
164 |

165 | Understanding these terms is important because, to use our services, 166 | you must accept these terms. 167 |

168 |

169 | Besides these terms, we also publish a Privacy Policy. Although it's 170 | not part of these terms, we encourage you to read it to better 171 | understand how you can update, manage, export, and delete your 172 | information. 173 |

174 |
175 |
176 |
177 | 178 |
179 | 271 | 272 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | -------------------------------------------------------------------------------- /assets/html/produts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Produts | Playstation 10 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 121 | 122 |
123 | 124 |
125 |
126 |

PS4 Controller

127 |

128 | Just get the code ond sit tight, you will witness its power and 129 | performance in lead generations. s simple yet Powerful and 130 | productive technology. Experience, then beleve. 131 |

132 |
    133 |
  • Wrihe some feature here
    • 134 |
  • Wrihe some feature here
    • 135 |
  • Wrihe some feature here
    • 136 |
137 | Buy More 138 |
139 |
140 | Controler PS4 144 |
145 |
146 | 147 | 148 |
149 |
150 |
151 | PS5 Controller 156 |

PS5 Controller

157 |

158 | Just get the code ond sit tight, you will witness its power and 159 | performance in lead generations. s simple yet Powerful and 160 | productive technology. Experience, then beleve. 161 |

162 |
    163 |
  • Wrihe some feature here
    • 164 |
  • Wrihe some feature here
    • 165 |
  • Wrihe some feature here
    • 166 |
167 | Buy More 168 |
169 |
170 |
171 | 172 | 173 |
174 |
175 | Controller PS5 179 |
180 |
181 |

Squid Controller

182 |

183 | Just get the code ond sit tight, you will witness its power and 184 | performance in lead generations. s simple yet Powerful and 185 | productive technology. Experience, then beleve. 186 |

187 |
    188 |
  • Wrihe some feature here
    • 189 |
  • Wrihe some feature here
    • 190 |
  • Wrihe some feature here
    • 191 |
192 | Buy More 193 |
194 |
195 |
196 | 197 |
198 | 290 | 291 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | -------------------------------------------------------------------------------- /assets/html/controllers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Controllers | Playstation 10 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 122 | 123 |
124 | 125 |
126 |
127 |

128 | PlayStation
129 | Controller 130 |

131 |

132 | This is a Hyper Ergonomic Playtation Controller Concept Hakes Gaming 133 | Far Hore Comfortable 134 |

135 | Explore Produts 137 | 139 |
140 |
141 | PS5 Controller 147 |
148 |
149 | 150 | 151 |
152 |
153 |

154 | Powerful Game
155 | Controller 156 |

157 |

Playstation Elite Wireless Controller Series 2

158 | Explore Produts 160 | 162 |
163 |
164 | PS4 Controller 170 |
171 |
172 | 173 | 174 |
175 |
176 | Squid Controller 182 |
183 |
184 |

185 | Games play best
186 | on Playstation 187 |

188 |

Playstation Elite Wireless Controller Series 2

189 | Explore Produts 191 | 193 |
194 |
195 | 196 | 197 |
198 |
199 |

200 | Our Functions 201 |

202 |

203 | Playstation controllers contain all these advantages: 204 |

205 |
206 |
207 | 208 | Velocity 209 | Progress Bar 216 |
217 |
218 | 219 | Durable 220 | Progress Bar 227 |
228 |
229 | 230 | Bluetooth 231 | Progress Bar 238 |
239 |
240 |
241 |
242 |
243 | 244 | 245 |
246 | 338 | 339 | 340 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | -------------------------------------------------------------------------------- /assets/html/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Contact | Playstation 10 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 62 | 63 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 118 | 119 |
120 | 121 |
122 |

ANSWERS WITHIN 24H

123 |

124 | Contact 125 | Us 126 |

127 |
128 | 129 | 130 |
131 |
132 |

Get in touch

133 |

134 | We' love to hear from you. Our friendly team is always here to chat. 135 |

136 | 137 |
138 | 139 |
140 |

Chat to us

141 |

Our friendly team is here to help.

142 |

email@playstation.com

143 |
144 |
145 | 146 |
147 | 148 |
149 |

Office

150 |

Come say hello at our office HQ.

151 |

152 | 100 Smith Street
153 | Collingwood VIC 3066 AU 154 |

155 |
156 |
157 | 158 |
159 | 160 |
161 |

Chat to us

162 |

Mon-Fri from 8am to 5pm.

163 |

+1 (555) 000-0000

164 |
165 |
166 | 167 |
168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 181 | 182 | 183 |
184 |
185 | 186 |
187 |

Level up your brand

188 |

189 | You can reach us anytime via email@playstation.com 190 |

191 | 192 |
197 | 202 | 207 | 208 |
209 | 210 | 217 |
218 | 219 |
220 | 221 | 228 |
229 | 230 |
231 | 232 | 239 |
240 | 241 |
242 |
243 |
244 |
245 | 246 | 247 |
248 | 340 | 341 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | -------------------------------------------------------------------------------- /assets/html/buy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Buy More | Playstation 10 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 120 | 121 |
122 |
123 |

QUOTES IN YOUR EMAIL

124 |

125 | Buy 126 | More 127 |

128 |
129 |
130 |
131 |
132 |

Order

133 | 134 | 135 | 136 | 137 |
138 | 139 | 140 |
141 |
142 |
143 |

PS4 Controller

144 |
145 | Star 146 | Star 147 | Star 148 | Star 149 | (11) 150 |
151 |

The best controller gaming

152 |
153 | Controller PS4 158 |
159 |
160 | 161 | 162 | 163 |
164 |
165 |
166 |

PS5 Controller

167 |
168 | Star 169 | Star 170 | Star 171 | Star 172 | Star 173 | (41) 174 |
175 |

The best controller gaming

176 |
177 | Controller PS5 182 |
183 |
184 | 185 | 186 | 187 |
188 |
189 |
190 |

Squid Controller

191 |
192 | Star 193 | Star 194 | (1) 195 |
196 |

The best controller gaming

197 |
198 | Controller Squid 203 |
204 |
205 |
206 |
207 |
208 | 209 | 210 |
211 |

1. Personal Data

212 | 213 |
215 | 220 | 225 | 226 |
227 |
228 |
229 | 230 | 237 |
238 | 239 |
240 | 241 | 248 |
249 |
250 | 251 |
252 | 253 | 260 |
261 | 262 |
263 | 264 | 271 |
272 | 273 |

2. Delivery Method

274 | 275 |
276 |
277 | 278 | 285 |
286 | 287 |
288 | 289 | 295 |
296 | 297 |
298 | 299 |
300 |
301 | 302 | 308 |
309 | 310 |
311 | 312 | 318 |
319 |
320 | 321 |
322 |
323 | 324 | 330 |
331 | 332 |
333 | 334 | 340 |
341 | 342 |
343 | 344 | 345 |
346 |
347 | 348 |
349 | 441 | 442 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | -------------------------------------------------------------------------------- /assets/css/buy/buy.css: -------------------------------------------------------------------------------- 1 | .buy_product label { 2 | cursor: pointer; 3 | display: grid; 4 | grid-template-columns: auto 1fr auto; 5 | align-items: center; 6 | background: #1c1c1c; 7 | border-radius: 0.3125rem; 8 | padding: 0.8125rem 1.25rem; 9 | font-family: var(--tittle-font); 10 | font-weight: var(--font-regular); 11 | font-size: 0.9375rem; 12 | line-height: 1.375rem; 13 | color: #bebebe; 14 | } 15 | 16 | .buy_product input:checked + label { 17 | background: var(--white-color); 18 | border-radius: 0.3125rem; 19 | padding: 0.8125rem 1.25rem; 20 | font-family: var(--tittle-font); 21 | font-weight: var(--font-regular); 22 | font-size: 15px; 23 | line-height: 1.375rem; 24 | color: var(--black-color); 25 | } 26 | 27 | .buy_product label::before { 28 | content: ''; 29 | display: inline-block; 30 | box-sizing: border-box; 31 | width: 12px; 32 | height: 12px; 33 | border: 0.125rem solid #666666; 34 | border-radius: 50%; 35 | margin-right: 0.5rem; 36 | } 37 | 38 | .buy_product label span { 39 | display: none; 40 | } 41 | 42 | .buy_product input:checked + label span { 43 | display: inline-block; 44 | } 45 | 46 | .buy_product input:checked + label::before { 47 | border: #666666; 48 | box-shadow: inset 0 0 0 1px #666666, inset 0 0 0 3.5px #666666; 49 | } 50 | 51 | .buy_product input { 52 | opacity: 0; 53 | position: absolute; 54 | pointer-events: none; 55 | } 56 | 57 | .buy_content { 58 | display: none; 59 | } 60 | 61 | #playstation:checked ~ #orcamento-bikcraft { 62 | display: grid; 63 | gap: 1.25rem; 64 | margin-top: 1.875rem; 65 | } 66 | 67 | .buy_detail-2 { 68 | display: none; 69 | } 70 | 71 | .buy_detail-2 li { 72 | display: flex; 73 | align-items: center; 74 | margin-bottom: 0.5rem; 75 | } 76 | 77 | .buy_detail-2 li img { 78 | width: 16px; 79 | margin-right: 0.5rem; 80 | } 81 | 82 | .buy_product input:checked + label + .buy_detail-2 { 83 | display: grid; 84 | } 85 | 86 | .buy_data { 87 | margin-top: 2.1875rem; 88 | } 89 | 90 | .buy_title { 91 | color: var(--title-color); 92 | font-family: var(--tittle-font); 93 | font-weight: var(--font-semi-bold); 94 | font-size: var(--title-font-size); 95 | } 96 | 97 | .buy_title-secondary { 98 | color: var(--primary-color); 99 | } 100 | 101 | .buy_subtitle { 102 | margin-top: 1.875rem; 103 | text-transform: uppercase; 104 | font-family: var(--paragraphy-font); 105 | font-weight: var(--font-medium); 106 | font-size: var(--small-font-size); 107 | color: var(--paragraphy-color-light); 108 | } 109 | 110 | .buy { 111 | display: grid; 112 | grid-template-columns: 1fr; 113 | margin-top: 2.75rem; 114 | } 115 | 116 | .buy_dice { 117 | background-color: var(--primary-color); 118 | border-radius: 0.9375rem 0.9375rem 0rem 0rem; 119 | padding: 2.9375rem 1.725rem 4rem 1.725rem; 120 | } 121 | 122 | .buy_dice h2 { 123 | font-family: var(--tittle-font); 124 | font-weight: var(--font-semi-bold); 125 | color: var(--white-color); 126 | font-size: var(--regularly-font-size); 127 | line-height: 2.0625rem; 128 | margin-bottom: 1.25rem; 129 | text-align: center; 130 | } 131 | 132 | .buy_info-container { 133 | display: grid; 134 | grid-template-columns: 1fr 110px; 135 | background: radial-gradient(50% 50% at 50% 50%, #17152f 0%, #08052b 100%); 136 | border-radius: 0.9375rem; 137 | padding: 0.8125rem 1.25rem; 138 | } 139 | 140 | .buy_detail { 141 | display: flex; 142 | flex-direction: column; 143 | justify-content: center; 144 | } 145 | 146 | .buy_detail img { 147 | width: 16px; 148 | height: 16px; 149 | } 150 | 151 | .buy_detail-title { 152 | font-family: var(--tittle-font); 153 | font-weight: var(--font-semi-bold); 154 | font-size: 0.875rem; 155 | line-height: 1.3125rem; 156 | letter-spacing: 0.013em; 157 | margin-bottom: 0.75rem; 158 | margin-top: 0.9375rem; 159 | color: #dbd9e7; 160 | } 161 | 162 | .buy_detail-img { 163 | display: flex; 164 | } 165 | 166 | .buy_detail-img span { 167 | padding-left: 0.3125rem; 168 | font-family: var(--paragraphy-font); 169 | font-weight: var(--font-regular); 170 | font-size: 0.75rem; 171 | line-height: 0.875rem; 172 | letter-spacing: 0.013em; 173 | color: var(--gray-color-fourth); 174 | vertical-align: top; 175 | } 176 | 177 | .buy_detail-paragraph { 178 | font-family: var(--tittle-font); 179 | font-weight: var(--font-regular); 180 | font-size: 0.75rem; 181 | line-height: 1.125rem; 182 | margin-top: 0.9375rem; 183 | margin-bottom: 0.9375rem; 184 | letter-spacing: 0.013em; 185 | color: #dbd9e7; 186 | } 187 | 188 | .buy_control-img { 189 | max-width: 130px; 190 | justify-self: right; 191 | } 192 | 193 | .buy_form { 194 | background: var(--background-gray); 195 | border: 1px solid var(--gray-color); 196 | box-sizing: border-box; 197 | border-radius: 0rem 0rem 0.9375rem 0.9375rem; 198 | padding: 4.4375rem 1.875rem 3.75rem 1.875rem; 199 | } 200 | 201 | .buy_form p { 202 | font-family: var(--tittle-font); 203 | font-weight: var(--font-medium); 204 | font-size: 1.1875rem; 205 | line-height: 1.75rem; 206 | color: var(--title-color-secondary); 207 | } 208 | .form_text-2 { 209 | margin-top: 1.875rem; 210 | font-family: var(--tittle-font); 211 | font-weight: var(--font-medium); 212 | font-size: 1.1875rem; 213 | line-height: 1.75rem; 214 | color: var(--title-color-secondary); 215 | } 216 | 217 | .buy_form-names { 218 | display: flex; 219 | gap: 1.5625rem; 220 | margin-top: 1.875rem; 221 | flex-direction: column; 222 | } 223 | 224 | .form_name-2, 225 | .form_last-name { 226 | display: flex; 227 | flex-direction: column; 228 | } 229 | 230 | .form_name-2 label, 231 | .form_last-name label { 232 | font-family: var(--tittle-font); 233 | font-weight: var(--font-semi-bold); 234 | font-size: var(--normal-font-size); 235 | color: var(--gray-color-five); 236 | line-height: 1.5rem; 237 | letter-spacing: 0.015em; 238 | margin-bottom: 0.625rem; 239 | } 240 | 241 | .form_name-2 input, 242 | .form_last-name input { 243 | font-family: var(--paragraphy-font); 244 | font-weight: var(--font-regular); 245 | font-size: var(--normal-font-size); 246 | line-height: 1.1875rem; 247 | letter-spacing: 0.015em; 248 | padding: 0.8125rem; 249 | color: var(--title-color-secondary); 250 | background: var(--background-gray); 251 | border: 1px solid var(--gray-color); 252 | box-sizing: border-box; 253 | outline: 2px solid transparent; 254 | border-radius: 0.3125rem; 255 | max-width: 100%; 256 | transition: 0.3s; 257 | } 258 | 259 | .form_name-2 input:focus, 260 | .form_last-name input:focus { 261 | border: 1px solid transparent; 262 | outline: 2px solid var(--primary-color); 263 | } 264 | 265 | .form_name-2 input:-webkit-autofill, 266 | .form_last-name input:-webkit-autofill { 267 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 268 | } 269 | 270 | /* CPF */ 271 | 272 | .form_cpf { 273 | display: flex; 274 | flex-direction: column; 275 | margin-top: 1.875rem; 276 | } 277 | 278 | .form_cpf label { 279 | font-family: var(--tittle-font); 280 | font-weight: var(--font-semi-bold); 281 | font-size: var(--normal-font-size); 282 | color: var(--gray-color-five); 283 | line-height: 1.5rem; 284 | letter-spacing: 0.015em; 285 | margin-bottom: 0.625rem; 286 | } 287 | 288 | .form_cpf input { 289 | font-family: var(--paragraphy-font); 290 | font-weight: var(--font-regular); 291 | font-size: var(--normal-font-size); 292 | line-height: 1.1875rem; 293 | letter-spacing: 0.015em; 294 | padding: 0.8125rem; 295 | color: var(--title-color-secondary); 296 | background: var(--background-gray); 297 | border: 1px solid var(--gray-color); 298 | box-sizing: border-box; 299 | outline: 2px solid transparent; 300 | border-radius: 0.3125rem; 301 | transition: 0.3s; 302 | } 303 | 304 | .form_cpf input:focus { 305 | outline: 2px solid var(--primary-color); 306 | border: 1px solid transparent; 307 | } 308 | 309 | .form_cpf input:-webkit-autofill { 310 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 311 | } 312 | 313 | /* Email */ 314 | 315 | .form_email { 316 | display: flex; 317 | flex-direction: column; 318 | margin-top: 1.875rem; 319 | } 320 | 321 | .form_email label { 322 | font-family: var(--tittle-font); 323 | font-weight: var(--font-semi-bold); 324 | font-size: var(--normal-font-size); 325 | color: var(--gray-color-five); 326 | line-height: 1.5rem; 327 | letter-spacing: 0.015em; 328 | margin-bottom: 0.625rem; 329 | } 330 | 331 | .form_email input { 332 | font-family: var(--paragraphy-font); 333 | font-weight: var(--font-regular); 334 | font-size: var(--normal-font-size); 335 | line-height: 1.1875rem; 336 | letter-spacing: 0.015em; 337 | padding: 0.8125rem; 338 | color: var(--title-color-secondary); 339 | background: var(--background-gray); 340 | border: 1px solid var(--gray-color); 341 | box-sizing: border-box; 342 | outline: 2px solid transparent; 343 | border-radius: 0.3125rem; 344 | max-width: 100%; 345 | transition: 0.3s; 346 | } 347 | 348 | .form_email input:focus { 349 | outline: 2px solid var(--primary-color); 350 | } 351 | 352 | .form_email input:-webkit-autofill { 353 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 354 | } 355 | 356 | .delivery_container { 357 | display: flex; 358 | flex-direction: column; 359 | gap: 0rem; 360 | } 361 | 362 | /* CEP */ 363 | .form_cep { 364 | display: flex; 365 | flex-direction: column; 366 | margin-top: 1.875rem; 367 | max-width: 100%; 368 | } 369 | 370 | .form_cep label { 371 | font-family: var(--tittle-font); 372 | font-weight: var(--font-semi-bold); 373 | font-size: var(--normal-font-size); 374 | color: var(--gray-color-five); 375 | line-height: 1.5rem; 376 | letter-spacing: 0.015em; 377 | margin-bottom: 0.625rem; 378 | } 379 | 380 | .form_cep input { 381 | font-family: var(--paragraphy-font); 382 | font-weight: var(--font-regular); 383 | font-size: var(--normal-font-size); 384 | line-height: 1.1875rem; 385 | letter-spacing: 0.015em; 386 | padding: 0.8125rem; 387 | color: var(--title-color-secondary); 388 | background: var(--background-gray); 389 | border: 1px solid var(--gray-color); 390 | box-sizing: border-box; 391 | outline: 2px solid transparent; 392 | border-radius: 0.3125rem; 393 | transition: 0.3s; 394 | } 395 | 396 | .form_cep input:focus { 397 | border: 1px solid transparent; 398 | outline: 2px solid var(--primary-color); 399 | } 400 | 401 | .form_cep input:-webkit-autofill { 402 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 403 | } 404 | 405 | /* Number */ 406 | .form_number { 407 | display: flex; 408 | flex-direction: column; 409 | margin-top: 1.875rem; 410 | max-width: 100%; 411 | } 412 | 413 | .form_number label { 414 | font-family: var(--tittle-font); 415 | font-weight: var(--font-semi-bold); 416 | font-size: var(--normal-font-size); 417 | color: var(--gray-color-five); 418 | line-height: 1.5rem; 419 | letter-spacing: 0.015em; 420 | margin-bottom: 0.625rem; 421 | } 422 | 423 | .form_number input { 424 | font-family: var(--paragraphy-font); 425 | font-weight: var(--font-regular); 426 | font-size: var(--normal-font-size); 427 | line-height: 1.1875rem; 428 | letter-spacing: 0.015em; 429 | padding: 0.8125rem; 430 | color: var(--title-color-secondary); 431 | background: var(--background-gray); 432 | border: 1px solid var(--gray-color); 433 | box-sizing: border-box; 434 | outline: 2px solid transparent; 435 | border-radius: 0.3125rem; 436 | transition: 0.3s; 437 | } 438 | 439 | .form_number input:focus { 440 | border: 1px solid transparent; 441 | outline: 2px solid var(--primary-color); 442 | } 443 | 444 | .form_number input:-webkit-autofill { 445 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 446 | } 447 | 448 | /* Place */ 449 | .form_place { 450 | display: flex; 451 | flex-direction: column; 452 | margin-top: 1.875rem; 453 | max-width: 100%; 454 | } 455 | 456 | .form_place label { 457 | font-family: var(--tittle-font); 458 | font-weight: var(--font-semi-bold); 459 | font-size: var(--normal-font-size); 460 | color: var(--gray-color-five); 461 | line-height: 1.5rem; 462 | letter-spacing: 0.015em; 463 | margin-bottom: 0.625rem; 464 | } 465 | 466 | .form_place input { 467 | font-family: var(--paragraphy-font); 468 | font-weight: var(--font-regular); 469 | font-size: var(--normal-font-size); 470 | line-height: 1.1875rem; 471 | letter-spacing: 0.015em; 472 | padding: 0.8125rem; 473 | color: var(--title-color-secondary); 474 | background: var(--background-gray); 475 | border: 1px solid var(--gray-color); 476 | box-sizing: border-box; 477 | outline: 2px solid transparent; 478 | border-radius: 0.3125rem; 479 | transition: 0.3s; 480 | } 481 | 482 | .form_place input:focus { 483 | border: 1px solid transparent; 484 | outline: 2px solid var(--primary-color); 485 | } 486 | 487 | .form_place input:-webkit-autofill { 488 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 489 | } 490 | 491 | /* Neighborhood */ 492 | .form_neighborhood { 493 | display: flex; 494 | flex-direction: column; 495 | margin-top: 1.875rem; 496 | max-width: 100%; 497 | } 498 | 499 | .form_neighborhood label { 500 | font-family: var(--tittle-font); 501 | font-weight: var(--font-semi-bold); 502 | font-size: var(--normal-font-size); 503 | color: var(--gray-color-five); 504 | line-height: 1.5rem; 505 | letter-spacing: 0.015em; 506 | margin-bottom: 0.625rem; 507 | } 508 | 509 | .form_neighborhood input { 510 | font-family: var(--paragraphy-font); 511 | font-weight: var(--font-regular); 512 | font-size: var(--normal-font-size); 513 | line-height: 1.1875rem; 514 | letter-spacing: 0.015em; 515 | padding: 0.8125rem; 516 | color: var(--title-color-secondary); 517 | background: var(--background-gray); 518 | border: 1px solid var(--gray-color); 519 | box-sizing: border-box; 520 | outline: 2px solid transparent; 521 | border-radius: 0.3125rem; 522 | transition: 0.3s; 523 | } 524 | 525 | .form_neighborhood input:focus { 526 | border: 1px solid transparent; 527 | outline: 2px solid var(--primary-color); 528 | } 529 | 530 | .form_neighborhood input:-webkit-autofill { 531 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 532 | } 533 | 534 | /* City */ 535 | .form_city { 536 | display: flex; 537 | flex-direction: column; 538 | margin-top: 1.875rem; 539 | max-width: 100%; 540 | } 541 | 542 | .form_city label { 543 | font-family: var(--tittle-font); 544 | font-weight: var(--font-semi-bold); 545 | font-size: var(--normal-font-size); 546 | color: var(--gray-color-five); 547 | line-height: 1.5rem; 548 | letter-spacing: 0.015em; 549 | margin-bottom: 0.625rem; 550 | } 551 | 552 | .form_city input { 553 | font-family: var(--paragraphy-font); 554 | font-weight: var(--font-regular); 555 | font-size: var(--normal-font-size); 556 | line-height: 1.1875rem; 557 | letter-spacing: 0.015em; 558 | padding: 0.8125rem; 559 | color: var(--title-color-secondary); 560 | background: var(--background-gray); 561 | border: 1px solid var(--gray-color); 562 | box-sizing: border-box; 563 | outline: 2px solid transparent; 564 | border-radius: 0.3125rem; 565 | transition: 0.3s; 566 | } 567 | 568 | .form_city input:focus { 569 | border: 1px solid transparent; 570 | outline: 2px solid var(--primary-color); 571 | } 572 | 573 | .form_city input:-webkit-autofill { 574 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 575 | } 576 | 577 | /* State */ 578 | .form_state { 579 | display: flex; 580 | flex-direction: column; 581 | margin-top: 1.875rem; 582 | max-width: 100%; 583 | } 584 | 585 | .form_state label { 586 | font-family: var(--tittle-font); 587 | font-weight: var(--font-semi-bold); 588 | font-size: var(--normal-font-size); 589 | color: var(--gray-color-five); 590 | line-height: 1.5rem; 591 | letter-spacing: 0.015em; 592 | margin-bottom: 0.625rem; 593 | } 594 | 595 | .form_state input { 596 | font-family: var(--paragraphy-font); 597 | font-weight: var(--font-regular); 598 | font-size: var(--normal-font-size); 599 | line-height: 1.1875rem; 600 | letter-spacing: 0.015em; 601 | padding: 0.8125rem; 602 | color: var(--title-color-secondary); 603 | background: var(--background-gray); 604 | border: 1px solid var(--gray-color); 605 | box-sizing: border-box; 606 | outline: 2px solid transparent; 607 | border-radius: 0.3125rem; 608 | transition: 0.3s; 609 | } 610 | 611 | .form_state input:focus { 612 | outline: 2px solid var(--primary-color); 613 | border: 1px solid transparent; 614 | } 615 | 616 | .form_state input:-webkit-autofill { 617 | -webkit-box-shadow: 0 0 0px 1000px var(--white-color) inset; 618 | } 619 | 620 | .buy button { 621 | width: 100%; 622 | height: 50px; 623 | color: var(--white-color); 624 | background: var(--primary-color); 625 | font-family: var(--tittle-font); 626 | font-weight: var(--font-medium); 627 | font-size: var(--normal-font-size); 628 | line-height: 1.5rem; 629 | margin-top: 3.125rem; 630 | border-radius: 0.5rem; 631 | transition: 0.3s; 632 | } 633 | 634 | .buy button:hover { 635 | background-color: var(--primary-color-hover); 636 | } 637 | 638 | /* MEDIAS QUERIES */ 639 | @media screen and (min-width: 766px) { 640 | .buy_data { 641 | margin-top: 8.125rem; 642 | } 643 | .buy { 644 | margin-top: 4rem; 645 | } 646 | } 647 | @media screen and (min-width: 1020px) { 648 | .buy { 649 | grid-template-columns: repeat(2, 445px 523px); 650 | } 651 | .buy_dice { 652 | border-radius: 0.9375rem 0rem 0rem 0.9375rem; 653 | padding: 2.9375rem 3.6875rem 3.9375rem 4.375rem; 654 | } 655 | .buy_form { 656 | border-radius: 0rem 0.9375rem 0.9375rem 0rem; 657 | padding: 4.4375rem 1.875rem 3.75rem 4.375rem; 658 | } 659 | 660 | .buy_dice h2 { 661 | text-align: left; 662 | } 663 | .buy_form-names { 664 | flex-direction: initial; 665 | gap: 4.0625rem; 666 | } 667 | .delivery_container { 668 | flex-direction: initial; 669 | gap: 3.75rem; 670 | } 671 | .form_state, 672 | .form_city, 673 | .form_neighborhood, 674 | .form_place, 675 | .form_cep, 676 | .form_number, 677 | .form_phone, 678 | .form_name-2 input, 679 | .form_last-name input { 680 | max-width: 177px; 681 | } 682 | .buy_dice-label { 683 | margin-left: -1.875rem; /* Só pra PC */ 684 | } 685 | } 686 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Playstation 10 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 47 | 48 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 124 | 125 | 126 |
127 | 134 |
135 |
136 | 137 | 138 |
139 | 140 |
141 |
142 |
143 |

144 | PlayStation
145 | Controller 146 |

147 |

148 | This is a Hyper Ergonimic PLAYSTATION Controller Concept Makes 149 | Gaming Far More Comfortable 150 |

151 |
152 | About More 157 | Explore Produts 159 | 161 |
162 |
163 | Sony Logo 169 | Sony Logo 175 | Sony Logo 181 | Sony Logo 187 |
188 |
189 | Controller PlayStation 194 |
195 |
196 | 197 | 198 |
199 |
200 | Controllers PlayStation 207 |
208 |

209 | Made with quality 210 |

211 |

212 | Your PlayStation controler isn't just limited to your console, 213 | with integrated Bluetooth supporting iOS, Android, and PCs. We 214 | recommend picking up a phone clip, though. 215 |

216 |
    217 |
  • Great. familiar in-hand feel
    • 218 |
  • Works with PlayStation, iOS, Android, PC
    • 219 |
  • Supports PlayStation controller clips
    • 220 |
  • Easy to use for any enviromment
    • 221 |
222 | Shop Now 225 |
226 |
227 |
228 | 229 | 230 |
231 |
232 |

233 | Our Functions 234 |

235 |

236 | PlayStation Elite Wireless Controller Series 2 237 |

238 |
239 |
240 | 241 | Velocity 242 | Progress Bar 249 |
250 |
251 | 252 | Durable 253 | Progress Bar 260 |
261 |
262 | 263 | Bluetooth 264 | Progress Bar 271 |
272 |
273 |
274 |
275 | 276 | 277 |
278 |
279 |

280 | Top controller Now 281 |

282 |

283 | PlayStation Elite Wireless Controller Series 2 284 |

285 |
286 |
287 |
288 | Joystick 295 |

PS4 Controller

296 |
297 | Star 303 | Star 309 | Star 315 | Star 321 | (11) 322 |
323 | R$ 300 324 |
325 | Recatangle 332 | 333 | 335 |
336 |
337 |
338 |
339 | Joystick 346 |

PS5 Controller

347 |
348 | Star 354 | Star 360 | Star 366 | Star 372 | Star 378 | (41) 379 |
380 | R$ 200 381 |
382 | Recatangle 389 | 390 | 392 |
393 |
394 |
395 |
396 | Joystick 403 |

Squid Controller

404 |
405 | Star 411 | Star 417 | (1) 418 |
419 | R$ 100 420 |
421 | Recatangle 428 | 432 | 434 |
435 |
436 |
437 |
438 |
439 | 440 | 441 |
442 |

443 | SECURELY BUY AND TRACK 444 |

445 |

446 | Frequenly Asked Question 447 |

448 |

449 | We know you have some questions in mind, we have tried
450 | to list the most important ones. 451 |

452 | 453 |
454 |
455 |
456 |
457 |

458 | What form of payment do you accept? 459 |

460 | 461 |
462 | 463 |
464 |

465 | We accept installment payments on all credit cards. For cash 466 | payments we also accept PIX and Boleto through PagSeguro. 467 |

468 |
469 |
470 | 471 |
472 |
473 |

How can I get in touch?

474 | 475 |
476 | 477 |
478 |

479 | We accept installment payments on all credit cards. For cash 480 | payments we also accept PIX and Boleto through PagSeguro. 481 |

482 |
483 |
484 | 485 |
486 |
487 |

Do you have any discounts?

488 | 489 |
490 | 491 |
492 |

493 | We accept installment payments on all credit cards. For cash 494 | payments we also accept PIX and Boleto through PagSeguro. 495 |

496 |
497 |
498 |
499 |
500 |

What guarantee do I have?

501 | 502 |
503 | 504 |
505 |

506 | We accept installment payments on all credit cards. For cash 507 | payments we also accept PIX and Boleto through PagSeguro. 508 |

509 |
510 |
511 | 512 |
513 |
514 |

Can I pay in installments?

515 | 516 |
517 | 518 |
519 |

520 | We accept installment payments on all credit cards. For cash 521 | payments we also accept PIX and Boleto through PagSeguro. 522 |

523 |
524 |
525 |
526 |
527 |
528 |
529 | 530 |
531 | 633 | 634 | 637 | 638 | 639 | 640 | 646 | 652 | 668 | 669 | 670 | 671 | 672 | --------------------------------------------------------------------------------