├── images ├── bg-quotes.png ├── profile-1.jpg ├── profile-2.jpg ├── profile-3.jpg ├── favicon-32x32.png ├── illustration-intro.png ├── illustration-stay-productive.png ├── icon-email.svg ├── icon-location.svg ├── icon-phone.svg ├── bg-curvy-mobile.svg ├── bg-curvy-desktop.svg ├── icon-arrow.svg ├── icon-security.svg ├── icon-any-file.svg ├── icon-access-anywhere.svg ├── logo.svg └── icon-collaboration.svg ├── design ├── active-states.jpg ├── desktop-design.jpg ├── desktop-preview.jpg └── mobile-design.jpg ├── .gitignore ├── LICENSE ├── style-guide.md ├── script.js ├── README.md ├── index.html └── style.css /images/bg-quotes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/images/bg-quotes.png -------------------------------------------------------------------------------- /images/profile-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/images/profile-1.jpg -------------------------------------------------------------------------------- /images/profile-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/images/profile-2.jpg -------------------------------------------------------------------------------- /images/profile-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/images/profile-3.jpg -------------------------------------------------------------------------------- /design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/design/active-states.jpg -------------------------------------------------------------------------------- /design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/design/desktop-design.jpg -------------------------------------------------------------------------------- /design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/design/desktop-preview.jpg -------------------------------------------------------------------------------- /design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/design/mobile-design.jpg -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/illustration-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/images/illustration-intro.png -------------------------------------------------------------------------------- /images/illustration-stay-productive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Fylo-dark-theme-landing-page_frontend_project/HEAD/images/illustration-stay-productive.png -------------------------------------------------------------------------------- /images/icon-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-curvy-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /images/bg-curvy-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-security.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Sarthak Sachdev 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 | -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Dark Blue (intro and email sign up background): hsl(217, 28%, 15%) 15 | - Dark Blue (main background): hsl(218, 28%, 13%) 16 | - Dark Blue (footer background): hsl(216, 53%, 9%) 17 | - Dark Blue (testimonials background): hsl(219, 30%, 18%) 18 | 19 | ### Accent 20 | 21 | - Cyan (inside call-to-action gradient): hsl(176, 68%, 64%) 22 | - Blue (inside call-to-action gradient): hsl(198, 60%, 50%) 23 | - Light Red (error): hsl(0, 100%, 63%) 24 | 25 | ### Neutral 26 | 27 | - White: hsl(0, 0%, 100%) 28 | 29 | ## Typography 30 | 31 | ### Body Copy 32 | 33 | - Font size: 14px 34 | 35 | ### Headings, Call-to-actions, Header Navigation 36 | 37 | - Family: [Raleway](https://fonts.google.com/specimen/Raleway) 38 | - Weights: 400, 700 39 | 40 | ### Body 41 | 42 | - Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans) 43 | - Weights: 400, 700 44 | 45 | ## Icons 46 | 47 | For the social icons, you can use a font icon library. Some suggestions can be found below: 48 | 49 | - [Font Awesome](https://fontawesome.com/) 50 | - [IcoMoon](https://icomoon.io/) 51 | - [Ionicons](https://ionicons.com/) -------------------------------------------------------------------------------- /images/icon-any-file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-access-anywhere.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-collaboration.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | import AttributionFooter from "./attribution-footer-element.js"; 2 | import "./valid-form.js"; 3 | 4 | customElements.define("attribution-footer", AttributionFooter); 5 | 6 | "use strict"; 7 | 8 | const singUpInput = document.querySelector(".sing-up__input"); 9 | const singUpBtn = document.querySelector(".sing-up__btn"); 10 | const singUpError = document.querySelector(".sing-up__error"); 11 | 12 | singUpInput.addEventListener("input", () => { 13 | if (singUpInput.validity.valid && singUpInput.value.length > 0) { 14 | singUpError.innerText = ""; 15 | } 16 | }); 17 | 18 | singUpBtn.addEventListener("click", (e) => { 19 | if (!singUpInput.validity.valid || singUpInput.value.length === 0) { 20 | singUpError.innerText = "Please enter a valid email address"; 21 | e.preventDefault(); 22 | } else { 23 | singUpInput.innerText = ""; 24 | } 25 | }); 26 | 27 | "use strict"; 28 | 29 | export default class AttributionFooter extends HTMLElement { 30 | 31 | static get observedAttributes() { 32 | return ["link-profile", "link-portfolio", "color-label", "color-link"]; 33 | } 34 | 35 | constructor() { 36 | super(); 37 | this.urlProfile = "https://www.frontendmentor.io/profile/rafaeldgeo"; 38 | this.urlPortfolio = "https://www.linkedin.com/in/rafael-dias-de-almeida-devmap/"; 39 | this.colorLabel = "#000000"; 40 | this.colorLink = "#0000FF"; 41 | } 42 | 43 | attributeChangedCallback(attributeName, oldValue, newValue){ 44 | if (attributeName === "link-profile") { 45 | this.urlProfile = newValue; 46 | } else if (attributeName === "link-portfolio") { 47 | this.urlPortfolio = newValue; 48 | } else if (attributeName === "color-label") { 49 | this.colorLabel = newValue; 50 | } else if (attributeName === "color-link") { 51 | this.colorLink = newValue; 52 | } 53 | } 54 | 55 | connectedCallback(){ 56 | 57 | const shadowRoot = this.attachShadow({mode:"open"}); 58 | 59 | shadowRoot.innerHTML = ` Challenge by Frontend Mentor. Code by Rafael Dias de Almeida. 61 | `; 62 | 63 | const style = document.createElement("style"); 64 | style.textContent = ` 65 | 66 | :host { 67 | text-align: center; 68 | font-size: 11px; 69 | color: ${this.colorLabel}; 70 | } 71 | 72 | .attributation__link { color: ${this.colorLink}; } 73 | `; 74 | 75 | shadowRoot.appendChild(style); 76 | } 77 | 78 | set urlProfile(newValue) { 79 | this._urlProfile = newValue; 80 | if (!this.shadowRoot) { 81 | return; 82 | } 83 | 84 | const aProfile = this.shadowRoot.querySelector(".attributation__link--profile"); 85 | if (aProfile) { 86 | aProfile.innerText = this._urlProfile; 87 | } 88 | } 89 | 90 | get urlProfile() { return this._urlProfile; } 91 | 92 | set urlPortfolio(newValue) { 93 | this._urlPortfolio = newValue; 94 | if (!this.shadowRoot) { 95 | return; 96 | } 97 | 98 | const aPortfolio = this.shadowRoot.querySelector(".attributation__link--portfolio"); 99 | if (aPortfolio) { 100 | aPortfolio.innerText = this._urlPortfolio; 101 | } 102 | } 103 | 104 | get urlPortfolio() { return this._urlPortfolio } 105 | 106 | set colorLabel(newValue) { 107 | this._colorLabel = newValue; 108 | if (!this.shadowRoot) { 109 | return; 110 | } 111 | 112 | const spanElement = this.shadowRoot.querySelectorAll(".attributation__wrapper"); 113 | if (spanElement) { 114 | spanElement.innerText = this._colorLabel; 115 | } 116 | } 117 | 118 | get colorLabel() { return this._colorLabel } 119 | 120 | set colorLink(newValue) { 121 | this._colorLink = newValue; 122 | if (!this.shadowRoot) { 123 | return; 124 | } 125 | 126 | const aElement = this.shadowRoot.querySelectorAll(".attributation__link"); 127 | if (aElement) { 128 | aElement.innerText = this._colorLink; 129 | } 130 | } 131 | 132 | get colorLink() { return this._colorLink } 133 | } 134 | 135 | // include in index.js 136 | /* customElements.define("attribution-footer", AttributionFooter); */ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fylo Dark Theme Landing Page 2 | 3 | ## Welcome! 👋 4 | 5 | ## Table of contents 6 | 7 | - [Overview](#overview) 8 | - [The challenge](#the-challenge) 9 | - [How to setup the project](#how-to-setup-the-project) 10 | - [Screenshot](#screenshot) 11 | - [Links](#links) 12 | - [My process](#my-process) 13 | - [Built with](#built-with) 14 | - [What I learned](#what-i-learned) 15 | - [Continued development](#continued-development) 16 | - [Useful resources](#useful-resources) 17 | - [Author](#author) 18 | - [Acknowledgments](#acknowledgments) 19 | 20 | ## Overview 21 | 22 | ### The challenge 23 | 24 | The challenge is to create the Fylo Dark Theme Landing Page, the landing page of a website called Fylo designed for storing and easy accessing of files uploaded on Fylo. 25 | 26 | Users should be able to- 27 | - View the optimal layout for the site depending on their device's screen size 28 | - See hover states for all interactive elements on the page. 29 | 30 | ### How to setup the project 31 | 32 | To set up the project locally, follow these steps: 33 | 34 | 1. Clone the repository using GitHub Desktop or Git Bash: 35 | ```bash 36 | git clone https://github.com/SartHak-0-Sach/Fylo-dark-theme-landing-page_frontend_project.git 37 | ``` 38 | 2. Open the project folder in your code editor. 39 | 3. Run the project using a live server extension or deploy it using Netlify, Vercel, or another web hosting and deployment service. 40 | 41 | ### Screenshot 42 | 43 | ![Design Preview](./design/active-states.jpg) 44 | 45 | ### Links 46 | 47 | - Solution URL: [GitHub Repository](https://github.com/SartHak-0-Sach/Fylo-dark-theme-landing-page_frontend_project) 48 | - Live Site URL: [Live Site](https://fylo-dark-theme-frontend.netlify.app/) 49 | 50 | ## My process 51 | 52 | ### Built with 53 | 54 | - HTML5 55 | - CSS3 56 | 57 | You will find all the required assets in the `/images` folder. The assets are already optimized. 58 | 59 | There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. 60 | 61 | ### What I learned 62 | 63 | This project is my first project of handling error methods in JavaScript for unfilled, or wrongly filled entries, doing input validation at a primitive level in frontend itself before verifying it. 64 | ```js 65 | singUpInput.addEventListener("input", () => { 66 | if (singUpInput.validity.valid && singUpInput.value.length > 0) { 67 | singUpError.innerText = ""; 68 | } 69 | }); 70 | 71 | singUpBtn.addEventListener("click", (e) => { 72 | if (!singUpInput.validity.valid || singUpInput.value.length === 0) { 73 | singUpError.innerText = "Please enter a valid email address"; 74 | e.preventDefault(); 75 | } else { 76 | singUpInput.innerText = ""; 77 | } 78 | }); 79 | ``` 80 | 81 | ### Continued development 82 | 83 | The continuously learning journey of a programmer never ends. This project made me realize that there are many concepts that I need to work upon including fundamentals like flex-box and its properties, to more complex concepts like working with fetch and async await in javascript. These areas are some that I think I need to work more upon in the upcoming future as they highlight some of the most significant regions of web development that are important for every developer to know of. 84 | 85 | These key points mentioned here will help me grow accountable and consistent towards improving at writing good quality code and be a successful full stack developer one day. 86 | 87 | ### Useful resources 88 | 89 | - [Harkirat Singh course notes](https://github.com/SartHak-0-Sach/harkirat-singh-course_code_and_notes) - I have added notes of all lectures along with code and lecture insights of all weeks along with bonus lectures to help you all as much as I can. 90 | - [My development code and notes](https://github.com/SartHak-0-Sach/cwh-web-dev-playlist_code_and_notes) - These are my notes that I made while working on my development skills in initial days and did these courses. Make sure to star the repository if you like it.✨💫 91 | - [mdn documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) - This is an amazing article which helped me finally understand promises, async and await syntax. I'd recommend it to anyone still learning this concept. 92 | 93 | ## Author 94 | 95 | Sarthak Sachdev 96 | - Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/) 97 | - LeetCode - [@sarthak_sachdev](https://leetcode.com/u/sarthak_sachdev/) 98 | - Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69) 99 | 100 | ## Acknowledgments 101 | 102 | I feel like the solutions provided on the website and the continuous doubt solving by industry experts on discord for free is something that is unmatched by anyone else and need to be acknowledged for their efforts in improving me as a developer by suggesting the best practices in your respective tech stack. 103 | 104 | ## Got feedback for me? 105 | 106 | I love receiving feedback! I am always looking to improve my code and take up new innovative ideas to work upon. So if you have anything you'd like to mention, please email 'hi' at saarsaach30[at]gmail[dot]com. 107 | 108 | If you found this project helpful, consider sharing it with others to spread the knowledge! 109 | 110 | **Happy exploring Fylo!** 🌌🚀 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fylo- file management application 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 23 |
24 | 25 |

All your files in one secure location, accessible anywhere.

26 |

Fylo stores all your most important files in one secure location. Access them wherever 27 | you need, share and collaborate with friends family, and co-workers.

28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 |
37 |

Access your files, anywhere

38 |

The ability to use a smartphone, tablet, or computer to access your account means your 39 | files follow you everywhere.

40 |
41 |
42 |
43 | 44 |
45 |

Security you can trust

46 |

2-factor authentication and user-controlled encryption are just a couple of the security 47 | features we allow to help secure your files.

48 |
49 |
50 |
51 | 52 |
53 |

Real-time collaboration

54 |

Securely share files and folders with friends, family and colleagues for live collaboration. 55 | No email attachments required.

56 |
57 |
58 |
59 | 60 |
61 |

Store any type of filen

62 |

Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all 63 | file types to be securely stored and shared.

64 |
65 |
66 |
67 | 68 |
69 |

Stay productive, wherever you are

70 |

Never let location be an issue when accessing your files. Fylo has you covered for all of your file storage needs.

71 |

Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required.

72 |
73 | See how Fylo works 74 | 75 |
76 |
77 |
78 |
79 |
80 |

Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has 81 | become a well-oiled collaboration machine.

82 |
83 | Satish is a young man with black hair and 84 | goatee 85 |
86 | Satish Patel 87 | Founder & CEO, Huddle 88 |
89 |
90 |
91 |
92 |

Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has 93 | become a well-oiled collaboration machine.

94 |
95 | Bruce is a young blonde man 96 |
97 | Bruce McKenzie 98 | Founder & CEO, Huddle 99 |
100 |
101 |
102 |
103 |

Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has 104 | become a well-oiled collaboration machine.

105 |
106 | Iva is a young woman with a long hair 107 |
108 | Iva Boyd 109 | Founder & CEO, Huddle 110 |
111 |
112 |
113 |
114 |
115 |

Get early access today

116 |

It only takes a minute to sign up and our free starter tier is extremely generous. If you have any 117 | questions, our support team would be happy to help you.

118 |
119 |
120 |
121 | 122 | 123 |
124 | 125 |
126 | 127 |
128 |
129 |
130 | 195 |
196 | 197 | 198 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); 4 | 5 | :root { 6 | --dark-blue-intro: hsl(217, 28%, 15%); 7 | /* intro and email sign up background */ 8 | --dark-blue-main: hsl(218, 28%, 13%); 9 | /* main background */ 10 | --dark-blue-footer: hsl(216, 53%, 9%); 11 | /* footer background */ 12 | --dark-blue-testimonials: hsl(219, 30%, 18%); 13 | /* testimonials background */ 14 | --cyan: hsl(176, 68%, 64%); 15 | /* inside call-to-action gradient */ 16 | --blue: hsl(198, 60%, 50%); 17 | /* inside call-to-action gradient */ 18 | --light-red: hsl(0, 100%, 63%); 19 | /* error */ 20 | --white: hsl(0, 0%, 100%); 21 | --shadow: hsl(218, 28%, 10%); 22 | --light-red-form: hsl(0, 80%, 80%); 23 | --font-primary: "Open Sans", sans-serif; 24 | /* Headings, Call-to-actions, Header Navigation */ 25 | --font-secondary: "Raleway", sans-serif; 26 | /* Body */ 27 | } 28 | 29 | *, 30 | *::before, 31 | *::after { 32 | margin: 0; 33 | padding: 0; 34 | box-sizing: border-box; 35 | } 36 | 37 | html, 38 | body { 39 | width: 100%; 40 | } 41 | 42 | body { 43 | display: flex; 44 | flex-direction: column; 45 | align-items: center; 46 | color: var(--white); 47 | background-color: var(--dark-blue-intro); 48 | } 49 | 50 | .container { 51 | display: flex; 52 | flex-direction: column; 53 | max-inline-size: 1440px; 54 | width: 100%; 55 | } 56 | 57 | :is(.intro__description, 58 | .resources__description, 59 | .see-work__description, 60 | .testimonials__user-word, 61 | .testimonials__identification, 62 | .sing-up__instruction, 63 | .sing-up__error, 64 | .footer__address-wrapper, 65 | .footer__contact-wrapper, 66 | .footer__link) { 67 | font-family: var(--font-primary); 68 | } 69 | 70 | :is(.navbar__menu, 71 | .intro__title, 72 | .resources__title, 73 | .see-work__title, 74 | .intro__btn, 75 | .see-work__btn, 76 | .sing-up__title, 77 | .footer__attribution) { 78 | font-family: var(--font-secondary); 79 | } 80 | 81 | .header { 82 | flex: 1 0 auto; 83 | display: flex; 84 | flex-direction: column; 85 | gap: min(10vw, 4.5rem) 0.6rem; 86 | padding: min(5vw, 4.52rem) min(5vw, 5rem) 0 min(5vw, 5rem); 87 | background-image: url("./images/bg-curvy-mobile.svg"); 88 | background-size: contain; 89 | background-repeat: no-repeat; 90 | background-position: bottom; 91 | } 92 | 93 | .navbar { 94 | display: flex; 95 | justify-content: space-between; 96 | flex-wrap: wrap; 97 | } 98 | 99 | .navbar__logo { 100 | max-width: calc(40% - 0.5rem); 101 | block-size: auto; 102 | } 103 | 104 | .navbar__menu { 105 | flex-shrink: 1; 106 | display: flex; 107 | align-items: center; 108 | gap: 0 min(5vw, 3.6rem); 109 | } 110 | 111 | .navbar__list { 112 | list-style-type: none; 113 | } 114 | 115 | .navbar__menu-link { 116 | text-align: center; 117 | font-size: clamp(0.8rem, 2.7vw, 1rem); 118 | text-decoration: none; 119 | color: var(--white); 120 | } 121 | 122 | .navbar__menu-link:hover { 123 | text-decoration: underline; 124 | font-weight: 700; 125 | } 126 | 127 | .main { 128 | position: relative; 129 | flex: 1 0 auto; 130 | display: flex; 131 | flex-direction: column; 132 | align-items: center; 133 | padding: 0 min(2vw, 5rem); 134 | background-color: var(--dark-blue-main); 135 | z-index: 0; 136 | } 137 | 138 | .intro { 139 | display: flex; 140 | flex-direction: column; 141 | align-items: center; 142 | text-align: center; 143 | padding-block-end: min(5.3vw, 8.43rem); 144 | } 145 | 146 | .intro__illustration { 147 | max-inline-size: 100%; 148 | block-size: auto; 149 | } 150 | 151 | .intro__title { 152 | font-size: clamp(1rem, 7.5vw, 1.5rem); 153 | line-height: calc(clamp(1rem, 7.5vw, 1.5rem) * 1.5); 154 | max-inline-size: 35ch; 155 | margin-block-start: min(10vw, 2.5rem); 156 | margin-block-end: min(10vw, 2.2rem); 157 | } 158 | 159 | .intro__description { 160 | font-size: clamp(0.8rem, 4.5vw, 1.25rem); 161 | line-height: calc(clamp(0.8rem, 4.5vw, 1.25rem) * 1.5); 162 | max-inline-size: 55ch; 163 | } 164 | 165 | .intro__btn { 166 | border: none; 167 | border-radius: 1.87rem; 168 | padding: min(5vw, 1.25rem) min(20vw, 5.93rem); 169 | margin-block: 1.75rem; 170 | background: linear-gradient(90deg, var(--cyan), var(--blue)); 171 | font-size: 1rem; 172 | font-weight: 700; 173 | color: var(--white); 174 | cursor: pointer; 175 | } 176 | 177 | .intro__btn:hover { 178 | background: var(--cyan); 179 | } 180 | 181 | .resources { 182 | display: grid; 183 | grid-template-columns: 1fr; 184 | grid-template-rows: repeat(4, auto); 185 | gap: min(23vw, 5.5rem) min(30vw, 7rem); 186 | padding-block-end: min(36vw, 8.6rem); 187 | } 188 | 189 | .resources__wrapper-icon { 190 | display: flex; 191 | align-items: center; 192 | height: 5.5rem; 193 | margin-block-end: 1.5rem; 194 | } 195 | 196 | .resources__item { 197 | text-align: center; 198 | display: flex; 199 | flex-direction: column; 200 | align-items: center; 201 | } 202 | 203 | .resources__title { 204 | margin-block-end: 0.50rem; 205 | font-size: clamp(0.9rem, 5.3vw, 1.25rem); 206 | } 207 | 208 | .resources__description { 209 | font-size: clamp(0.6rem, 5.3vw, 0.87rem); 210 | line-height: calc(clamp(0.6rem, 5.3vw, 0.87rem) * 1.5); 211 | text-align: center; 212 | padding: 0 0.65rem; 213 | } 214 | 215 | .see-work { 216 | display: flex; 217 | align-items: center; 218 | justify-content: center; 219 | flex-wrap: wrap; 220 | padding: 0 1.4rem; 221 | gap: 3.5rem 0; 222 | padding-block-end: min(37vw, 8.7rem); 223 | } 224 | 225 | .see-work__illustration { 226 | max-width: 100%; 227 | block-size: auto; 228 | } 229 | 230 | .see-work__title { 231 | text-align: center; 232 | font-size: clamp(1rem, 5.1vw, 1.2rem); 233 | margin-block-end: 1.3rem; 234 | } 235 | 236 | .see-work__description { 237 | font-size: clamp(0.8rem, 4vw, 0.9rem); 238 | line-height: calc(clamp(0.8rem, 4vw, 0.9rem) * 1.5); 239 | margin-block-end: 1.3rem; 240 | } 241 | 242 | .see-work__wrapper-btn { 243 | display: inline-flex; 244 | align-items: center; 245 | cursor: pointer; 246 | padding-block-end: 0.37rem; 247 | border-block-end: 1px solid var(--cyan); 248 | } 249 | 250 | .see-work__btn { 251 | font-size: 1rem; 252 | font-weight: 700; 253 | color: var(--cyan); 254 | text-decoration: none; 255 | line-height: 1; 256 | margin-inline-end: 0.3rem; 257 | } 258 | 259 | .see-work__icon { 260 | fill: var(--cyan); 261 | } 262 | 263 | .see-work__wrapper-btn:hover .see-work__btn { 264 | color: var(--white); 265 | } 266 | 267 | .see-work__wrapper-btn:hover { 268 | border-block-end: 1px solid var(--white); 269 | } 270 | 271 | .see-work__wrapper-btn:hover .see-work__icon { 272 | fill: var(--white); 273 | } 274 | 275 | .testimonials { 276 | display: flex; 277 | justify-content: center; 278 | gap: 2rem 0; 279 | flex-wrap: wrap; 280 | padding: 2.5rem 1rem min(94vw, 22.1rem) 1rem; 281 | } 282 | 283 | .testimonials__user-brief { 284 | position: relative; 285 | flex: 0 1 360px; 286 | display: flex; 287 | flex-direction: column; 288 | border-radius: 0.3rem; 289 | padding: min(10vw, 2.5rem) min(6.8vw, 1.6rem) min(7.8vw, 1.8rem) min(6.8vw, 1.6rem); 290 | background-color: var(--dark-blue-testimonials); 291 | box-shadow: 8px 10px 4px 2px var(--dark-blue-intro); 292 | } 293 | 294 | .testimonials__user-brief--quotes::before { 295 | position: absolute; 296 | content: url("./images/bg-quotes.png"); 297 | bottom: 95%; 298 | right: 80%; 299 | z-index: -1; 300 | } 301 | 302 | .testimonials__user-word { 303 | font-size: clamp(0.6rem, 3.8vw, 0.9rem); 304 | margin-block-end: 0.9rem; 305 | } 306 | 307 | .testimonials__wrapper-info { 308 | display: flex; 309 | align-items: center; 310 | padding-block-start: 0.62rem; 311 | } 312 | 313 | .testimonials__photo { 314 | max-inline-size: 100%; 315 | block-size: auto; 316 | border-radius: 3rem; 317 | margin-inline-end: 0.5rem; 318 | } 319 | 320 | .testimonials__identification { 321 | text-align: start; 322 | } 323 | 324 | .testimonials__user-name { 325 | font-size: 0.56rem; 326 | font-weight: 900; 327 | display: block; 328 | margin-block-end: 0.25rem; 329 | } 330 | 331 | .testimonials__position { 332 | font-size: 0.43rem; 333 | font-weight: 900; 334 | display: block; 335 | } 336 | 337 | .sing-up { 338 | position: absolute; 339 | top: 95%; 340 | display: flex; 341 | flex-direction: column; 342 | align-items: center; 343 | border-radius: 0.4rem; 344 | padding: 2.86rem 1rem 1.25rem 1rem; 345 | width: 90%; 346 | background-color: var(--dark-blue-intro); 347 | box-shadow: 4px 6px 5px 1px var(--shadow); 348 | } 349 | 350 | .sing-up__title { 351 | text-align: center; 352 | font-size: clamp(1rem, 6vw, 1.2rem); 353 | } 354 | 355 | .sing-up__instruction { 356 | text-align: center; 357 | font-size: clamp(0.6rem, 4vw, 1rem); 358 | max-inline-size: 80ch; 359 | margin-block-start: 1.5rem; 360 | margin-block-end: 2.8rem; 361 | } 362 | 363 | .sing-up__form { 364 | width: 100%; 365 | } 366 | 367 | .sing-up__wrapper-form { 368 | display: flex; 369 | justify-content: center; 370 | flex-wrap: wrap; 371 | gap: 1.5rem 0; 372 | width: 100%; 373 | } 374 | 375 | .sing-up__wrapper-input { 376 | width: 100%; 377 | display: flex; 378 | flex-direction: column; 379 | row-gap: 0.5rem; 380 | } 381 | 382 | .sing-up__input { 383 | border: 0; 384 | width: 100%; 385 | border-radius: 1.5rem; 386 | padding: 1rem 2.18rem; 387 | } 388 | 389 | ::placeholder { 390 | color: var(--dark-blue-intro); 391 | } 392 | 393 | 394 | .sing-up__error { 395 | color: var(--light-red); 396 | font-size: 0.6rem; 397 | font-weight: 900; 398 | padding-inline-start: 2rem; 399 | } 400 | 401 | .sing-up__btn { 402 | border: none; 403 | border-radius: 1.87rem; 404 | width: 100%; 405 | padding: 1rem 0; 406 | background: linear-gradient(90deg, var(--cyan), var(--blue)); 407 | font-size: 0.9rem; 408 | font-weight: 700; 409 | color: var(--white); 410 | cursor: pointer; 411 | } 412 | 413 | .sing-up__btn:hover { 414 | background: var(--cyan); 415 | } 416 | 417 | .footer { 418 | flex: 0 1 auto; 419 | display: flex; 420 | flex-direction: column; 421 | align-items: center; 422 | background-color: var(--dark-blue-footer); 423 | } 424 | 425 | .footer__wrapper { 426 | width: 100%; 427 | padding: calc(18.75rem + 5vw) min(7vw, 7.1rem) min(4vw, 3.75rem) min(7vw, 7.1rem); 428 | } 429 | 430 | .footer__logo-wrapper { 431 | margin-block-end: 2rem; 432 | } 433 | 434 | .footer__logo { 435 | max-width: calc(40% - 0.5rem); 436 | block-size: auto; 437 | } 438 | 439 | .footer__body { 440 | display: flex; 441 | flex-direction: column; 442 | justify-content: center; 443 | flex-wrap: nowrap; 444 | gap: 2rem 0 445 | } 446 | 447 | :is(.footer__address-wrapper, 448 | .footer__phone-wrapper, 449 | .footer__email-wrapper) { 450 | display: flex; 451 | column-gap: 1.5rem; 452 | font-family: var(--font-primary); 453 | font-style: normal; 454 | } 455 | 456 | .footer__address-wrapper { 457 | font-size: clamp(0.8rem, 4.2vw, 1rem); 458 | line-height: calc(clamp(0.8rem, 4.2vw, 1rem) * 1.5); 459 | max-inline-size: none; 460 | } 461 | 462 | .footer__contact-wrapper { 463 | display: flex; 464 | flex-direction: column; 465 | row-gap: 0.5rem; 466 | font-size: clamp(0.6rem, 3.8vw, 0.9rem); 467 | } 468 | 469 | .footer__menu { 470 | display: flex; 471 | gap: 0 5rem; 472 | } 473 | 474 | .footer__item { 475 | list-style-type: none; 476 | margin-block-end: 1rem; 477 | width: min(6.5vw, 5.6rem); 478 | } 479 | 480 | .footer__link { 481 | font-size: clamp(0.6rem, 4.6vw, 1.1rem); 482 | display: block; 483 | color: var(--white); 484 | text-decoration: none; 485 | } 486 | 487 | .footer__link:hover { 488 | font-weight: 600; 489 | } 490 | 491 | .footer__midia-wrapper { 492 | display: flex; 493 | justify-content: center; 494 | flex-wrap: wrap; 495 | gap: 0.65rem 0.65rem; 496 | } 497 | 498 | .footer__midia-icon-wrapper { 499 | padding: 0.3rem; 500 | border: 1px solid var(--white); 501 | border-radius: 3rem; 502 | cursor: pointer; 503 | } 504 | 505 | .footer__midia-icon-wrapper:hover { 506 | border: 1px solid var(--cyan); 507 | } 508 | 509 | .footer__midia-icon { 510 | margin: auto auto; 511 | padding: 0.1rem 0.1rem; 512 | color: var(--white); 513 | } 514 | 515 | .footer__midia-icon-wrapper:hover .footer__midia-icon { 516 | color: var(--cyan); 517 | } 518 | 519 | .footer__midia-icon--facebook { 520 | padding: 0.1rem 0.3rem; 521 | } 522 | 523 | .footer__midia-icon--instagram { 524 | padding: 0.1rem 0.2rem; 525 | } 526 | 527 | .footer__attribution { 528 | margin: 0.6rem 0; 529 | } 530 | 531 | @media only screen and (min-width: 920px) { 532 | 533 | .see-work { 534 | flex-wrap: nowrap; 535 | gap: 0 min(3vw, 3.75rem); 536 | } 537 | 538 | .see-work__illustration { 539 | max-width: calc(50% - 0.5rem); 540 | } 541 | 542 | .see-work__title { 543 | text-align: start; 544 | font-size: clamp(1rem, 3vw, 2.5rem); 545 | max-inline-size: 15ch; 546 | line-height: calc(clamp(1rem, 3vw, 2.5rem) * 1.2); 547 | margin-block-end: 1.3rem; 548 | } 549 | 550 | .see-work__description { 551 | font-size: clamp(0.8rem, 1.5vw, 1rem); 552 | max-inline-size: 60ch; 553 | line-height: calc(clamp(0.8rem, 1.5vw, 1rem) * 1.5); 554 | margin-block-end: 1.3rem; 555 | } 556 | 557 | .sing-up__btn { 558 | width: 15rem; 559 | padding: 1rem 1.87rem; 560 | } 561 | } 562 | 563 | @media only screen and (min-width: 576px) { 564 | 565 | .header { 566 | background-image: url("./images/bg-curvy-desktop.svg"); 567 | } 568 | 569 | .intro { 570 | padding-block-end: 8.43rem; 571 | } 572 | 573 | .intro__title { 574 | font-size: 2.5rem; 575 | line-height: 1.5; 576 | margin-block-start: 2.5rem; 577 | margin-block-end: 2.2rem; 578 | } 579 | 580 | .intro__description { 581 | font-size: 1.25rem; 582 | line-height: 1.5; 583 | } 584 | 585 | .intro__btn { 586 | padding: 1.25rem 5.93rem; 587 | } 588 | 589 | .resources { 590 | grid-template-columns: repeat(2, minmax(1.25rem, 23.75rem)); 591 | grid-template-rows: repeat(2, auto); 592 | gap: 5.5rem 7rem; 593 | padding-block-end: 8.6rem; 594 | } 595 | 596 | .resources__title { 597 | margin-block-end: 0.50rem; 598 | font-size: 1.25rem; 599 | } 600 | 601 | .resources__description { 602 | font-size: 0.87rem; 603 | line-height: 1.5; 604 | } 605 | 606 | .see-work__title { 607 | font-size: clamp(1rem, 4vw, 2.5rem); 608 | margin-block-end: 1.3rem; 609 | } 610 | 611 | .see-work__description { 612 | font-size: clamp(0.8rem, 3vw, 1rem); 613 | line-height: 1.5; 614 | margin-block-end: 1.3rem; 615 | } 616 | 617 | .testimonials { 618 | gap: 1.25rem 2.5rem; 619 | padding: 2.5rem 0 22.1rem 0; 620 | } 621 | 622 | .testimonials__user-brief { 623 | padding: 2.5rem 1.6rem 1.8rem 1.6rem; 624 | } 625 | 626 | .testimonials__user-brief--quotes::before { 627 | right: 87%; 628 | } 629 | 630 | .testimonials__user-word { 631 | font-size: 0.9rem; 632 | margin-block-end: 0.9rem; 633 | } 634 | 635 | .sing-up { 636 | top: 92%; 637 | padding: 2.86rem 1.5rem 1.25rem 1.5rem; 638 | width: calc(46% + 10rem); 639 | } 640 | 641 | .sing-up__title { 642 | font-size: 2rem; 643 | } 644 | 645 | .sing-up__instruction { 646 | font-size: 0.87rem; 647 | } 648 | 649 | .sing-up__form { 650 | width: 85%; 651 | } 652 | 653 | .sing-up__wrapper-form { 654 | flex-wrap: nowrap; 655 | align-items: flex-start; 656 | gap: 1.5rem 1.8rem; 657 | } 658 | 659 | .footer__wrapper { 660 | padding: calc(125px + 10vw) min(7vw, 7.1rem) min(4vw, 3.75rem) min(7vw, 7.1rem); 661 | } 662 | 663 | .footer__body { 664 | flex-direction: row; 665 | justify-content: space-between; 666 | flex-wrap: wrap; 667 | gap: 1.25rem 0; 668 | } 669 | 670 | .footer__address-wrapper { 671 | font-size: 1rem; 672 | line-height: 1.5; 673 | max-inline-size: 43ch; 674 | } 675 | 676 | .footer__contact-wrapper { 677 | font-size: 0.9rem; 678 | } 679 | 680 | .footer__link { 681 | font-size: 1.1rem; 682 | } 683 | 684 | } --------------------------------------------------------------------------------