├── README.md ├── counter.js ├── images ├── avatar-ali.png ├── avatar-anisha.png ├── avatar-richard.png ├── avatar-shanai.png ├── bg-simplify-section-desktop.svg ├── bg-simplify-section-mobile.svg ├── bg-tablet-pattern.svg ├── favicon-32x32.png ├── icon-close.svg ├── icon-facebook.svg ├── icon-hamburger.svg ├── icon-instagram.svg ├── icon-pinterest.svg ├── icon-twitter.svg ├── icon-youtube.svg ├── illustration-intro.svg ├── logo.svg └── social-icons.svg ├── index.html ├── javascript.svg ├── main.js ├── package-lock.json ├── package.json ├── public └── vite.svg ├── style-guide.md └── style.css /README.md: -------------------------------------------------------------------------------- 1 | 2 | ![M](https://github.com/muhsansattar/Mange-fem-HTML-Template/assets/90345731/1099e5b4-8ff8-4451-b05d-92ba83e0488c) 3 | 4 | ## Getting Started 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /counter.js: -------------------------------------------------------------------------------- 1 | export function setupCounter(element) { 2 | let counter = 0 3 | const setCounter = (count) => { 4 | counter = count 5 | element.innerHTML = `count is ${counter}` 6 | } 7 | element.addEventListener('click', () => setCounter(counter + 1)) 8 | setCounter(0) 9 | } 10 | -------------------------------------------------------------------------------- /images/avatar-ali.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhsansattar/Mange-fem-HTML-Template/bfa0812c4434f0696a1917c77b9b24019b2cd249/images/avatar-ali.png -------------------------------------------------------------------------------- /images/avatar-anisha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhsansattar/Mange-fem-HTML-Template/bfa0812c4434f0696a1917c77b9b24019b2cd249/images/avatar-anisha.png -------------------------------------------------------------------------------- /images/avatar-richard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhsansattar/Mange-fem-HTML-Template/bfa0812c4434f0696a1917c77b9b24019b2cd249/images/avatar-richard.png -------------------------------------------------------------------------------- /images/avatar-shanai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhsansattar/Mange-fem-HTML-Template/bfa0812c4434f0696a1917c77b9b24019b2cd249/images/avatar-shanai.png -------------------------------------------------------------------------------- /images/bg-simplify-section-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-simplify-section-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-tablet-pattern.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhsansattar/Mange-fem-HTML-Template/bfa0812c4434f0696a1917c77b9b24019b2cd249/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-intro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/social-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |

Bring everyone 46 | together to build better products. 47 |

48 |

Manage makes it simple for software teams to plan day-to-day tasks while 49 | keeping the larger team goals in view.

50 | 51 |
52 |
53 | illustration 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |

What's different about Manage?

63 |

Manage provides all the functionality your team needs, without the complexity. Our 64 | software is tailor-made for modern digital product teams.

65 |
66 |
67 |
    68 |
  • 69 |
    70 |

    Track company-wide progress

    71 |

    See how your day-to-day tasks fit into the wider vision. Go from tracking progress at the milestone level all the way done to the smallest of details. 72 | Never lose sight of the bigger picture again.

    73 |
    74 |
  • 75 |
  • 76 |
    77 |

    Advanced built-in reports

    78 |

    Advanced built-in reports 79 | Set internal delivery estimates and track progress 80 | toward company goals. Our customisable 81 | dashboard helps you build out the reports you 82 | need to keep key stakeholders informed.

    83 |
    84 |
  • 85 |
  • 86 |
    87 | 88 |

    Everything you need in one place

    89 |

    Stop jumping from one service to another to 90 | communicate, store files, track tasks and share 91 | documents. Manage offers an all-in-one team productivity solution.

    92 |
    93 |
  • 94 |
95 |
96 |
97 |
98 |
99 | 143 |
144 |
145 |
146 |
147 |

Simplify how 148 | your team works today.

149 | 150 |
151 |
152 |
153 |
154 |
155 |
156 | 212 | 213 | 214 | 215 | -------------------------------------------------------------------------------- /javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const primaryHeader = document.querySelector(".primary-header"); 2 | const navToggle = document.querySelector(".mobile-nav-toggle"); 3 | const primaryNav = document.querySelector(".primary-navigation"); 4 | navToggle.addEventListener('click', ()=>{ 5 | primaryNav.hasAttribute("data-visible") 6 | ? navToggle.setAttribute("aria-expended", false) 7 | : navToggle.setAttribute("aria-expended", true); 8 | primaryNav.toggleAttribute("data-visible"); 9 | primaryHeader.toggleAttribute("data-overlay"); 10 | }); 11 | const slider = new A11YSlider(document.querySelector('.slider'), { 12 | adaptiveHeight: false, 13 | dots: true, 14 | centerMode: true, 15 | arrows: false, 16 | responsive: { 17 | 480: { 18 | dots: false, 19 | 20 | } 21 | } 22 | }); 23 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fem-manage-landing-page-master", 3 | "version": "0.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "fem-manage-landing-page-master", 9 | "version": "0.0.0", 10 | "devDependencies": { 11 | "vite": "^5.2.0" 12 | } 13 | }, 14 | "node_modules/@esbuild/aix-ppc64": { 15 | "version": "0.20.2", 16 | "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", 17 | "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==", 18 | "cpu": [ 19 | "ppc64" 20 | ], 21 | "dev": true, 22 | "optional": true, 23 | "os": [ 24 | "aix" 25 | ], 26 | "engines": { 27 | "node": ">=12" 28 | } 29 | }, 30 | "node_modules/@esbuild/android-arm": { 31 | "version": "0.20.2", 32 | "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz", 33 | "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==", 34 | "cpu": [ 35 | "arm" 36 | ], 37 | "dev": true, 38 | "optional": true, 39 | "os": [ 40 | "android" 41 | ], 42 | "engines": { 43 | "node": ">=12" 44 | } 45 | }, 46 | "node_modules/@esbuild/android-arm64": { 47 | "version": "0.20.2", 48 | "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz", 49 | "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==", 50 | "cpu": [ 51 | "arm64" 52 | ], 53 | "dev": true, 54 | "optional": true, 55 | "os": [ 56 | "android" 57 | ], 58 | "engines": { 59 | "node": ">=12" 60 | } 61 | }, 62 | "node_modules/@esbuild/android-x64": { 63 | "version": "0.20.2", 64 | "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz", 65 | "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==", 66 | "cpu": [ 67 | "x64" 68 | ], 69 | "dev": true, 70 | "optional": true, 71 | "os": [ 72 | "android" 73 | ], 74 | "engines": { 75 | "node": ">=12" 76 | } 77 | }, 78 | "node_modules/@esbuild/darwin-arm64": { 79 | "version": "0.20.2", 80 | "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz", 81 | "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==", 82 | "cpu": [ 83 | "arm64" 84 | ], 85 | "dev": true, 86 | "optional": true, 87 | "os": [ 88 | "darwin" 89 | ], 90 | "engines": { 91 | "node": ">=12" 92 | } 93 | }, 94 | "node_modules/@esbuild/darwin-x64": { 95 | "version": "0.20.2", 96 | "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz", 97 | "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==", 98 | "cpu": [ 99 | "x64" 100 | ], 101 | "dev": true, 102 | "optional": true, 103 | "os": [ 104 | "darwin" 105 | ], 106 | "engines": { 107 | "node": ">=12" 108 | } 109 | }, 110 | "node_modules/@esbuild/freebsd-arm64": { 111 | "version": "0.20.2", 112 | "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz", 113 | "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==", 114 | "cpu": [ 115 | "arm64" 116 | ], 117 | "dev": true, 118 | "optional": true, 119 | "os": [ 120 | "freebsd" 121 | ], 122 | "engines": { 123 | "node": ">=12" 124 | } 125 | }, 126 | "node_modules/@esbuild/freebsd-x64": { 127 | "version": "0.20.2", 128 | "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz", 129 | "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==", 130 | "cpu": [ 131 | "x64" 132 | ], 133 | "dev": true, 134 | "optional": true, 135 | "os": [ 136 | "freebsd" 137 | ], 138 | "engines": { 139 | "node": ">=12" 140 | } 141 | }, 142 | "node_modules/@esbuild/linux-arm": { 143 | "version": "0.20.2", 144 | "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz", 145 | "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==", 146 | "cpu": [ 147 | "arm" 148 | ], 149 | "dev": true, 150 | "optional": true, 151 | "os": [ 152 | "linux" 153 | ], 154 | "engines": { 155 | "node": ">=12" 156 | } 157 | }, 158 | "node_modules/@esbuild/linux-arm64": { 159 | "version": "0.20.2", 160 | "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz", 161 | "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==", 162 | "cpu": [ 163 | "arm64" 164 | ], 165 | "dev": true, 166 | "optional": true, 167 | "os": [ 168 | "linux" 169 | ], 170 | "engines": { 171 | "node": ">=12" 172 | } 173 | }, 174 | "node_modules/@esbuild/linux-ia32": { 175 | "version": "0.20.2", 176 | "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz", 177 | "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==", 178 | "cpu": [ 179 | "ia32" 180 | ], 181 | "dev": true, 182 | "optional": true, 183 | "os": [ 184 | "linux" 185 | ], 186 | "engines": { 187 | "node": ">=12" 188 | } 189 | }, 190 | "node_modules/@esbuild/linux-loong64": { 191 | "version": "0.20.2", 192 | "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz", 193 | "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==", 194 | "cpu": [ 195 | "loong64" 196 | ], 197 | "dev": true, 198 | "optional": true, 199 | "os": [ 200 | "linux" 201 | ], 202 | "engines": { 203 | "node": ">=12" 204 | } 205 | }, 206 | "node_modules/@esbuild/linux-mips64el": { 207 | "version": "0.20.2", 208 | "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz", 209 | "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==", 210 | "cpu": [ 211 | "mips64el" 212 | ], 213 | "dev": true, 214 | "optional": true, 215 | "os": [ 216 | "linux" 217 | ], 218 | "engines": { 219 | "node": ">=12" 220 | } 221 | }, 222 | "node_modules/@esbuild/linux-ppc64": { 223 | "version": "0.20.2", 224 | "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz", 225 | "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==", 226 | "cpu": [ 227 | "ppc64" 228 | ], 229 | "dev": true, 230 | "optional": true, 231 | "os": [ 232 | "linux" 233 | ], 234 | "engines": { 235 | "node": ">=12" 236 | } 237 | }, 238 | "node_modules/@esbuild/linux-riscv64": { 239 | "version": "0.20.2", 240 | "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz", 241 | "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==", 242 | "cpu": [ 243 | "riscv64" 244 | ], 245 | "dev": true, 246 | "optional": true, 247 | "os": [ 248 | "linux" 249 | ], 250 | "engines": { 251 | "node": ">=12" 252 | } 253 | }, 254 | "node_modules/@esbuild/linux-s390x": { 255 | "version": "0.20.2", 256 | "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz", 257 | "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==", 258 | "cpu": [ 259 | "s390x" 260 | ], 261 | "dev": true, 262 | "optional": true, 263 | "os": [ 264 | "linux" 265 | ], 266 | "engines": { 267 | "node": ">=12" 268 | } 269 | }, 270 | "node_modules/@esbuild/linux-x64": { 271 | "version": "0.20.2", 272 | "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz", 273 | "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==", 274 | "cpu": [ 275 | "x64" 276 | ], 277 | "dev": true, 278 | "optional": true, 279 | "os": [ 280 | "linux" 281 | ], 282 | "engines": { 283 | "node": ">=12" 284 | } 285 | }, 286 | "node_modules/@esbuild/netbsd-x64": { 287 | "version": "0.20.2", 288 | "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz", 289 | "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==", 290 | "cpu": [ 291 | "x64" 292 | ], 293 | "dev": true, 294 | "optional": true, 295 | "os": [ 296 | "netbsd" 297 | ], 298 | "engines": { 299 | "node": ">=12" 300 | } 301 | }, 302 | "node_modules/@esbuild/openbsd-x64": { 303 | "version": "0.20.2", 304 | "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz", 305 | "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==", 306 | "cpu": [ 307 | "x64" 308 | ], 309 | "dev": true, 310 | "optional": true, 311 | "os": [ 312 | "openbsd" 313 | ], 314 | "engines": { 315 | "node": ">=12" 316 | } 317 | }, 318 | "node_modules/@esbuild/sunos-x64": { 319 | "version": "0.20.2", 320 | "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz", 321 | "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==", 322 | "cpu": [ 323 | "x64" 324 | ], 325 | "dev": true, 326 | "optional": true, 327 | "os": [ 328 | "sunos" 329 | ], 330 | "engines": { 331 | "node": ">=12" 332 | } 333 | }, 334 | "node_modules/@esbuild/win32-arm64": { 335 | "version": "0.20.2", 336 | "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz", 337 | "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==", 338 | "cpu": [ 339 | "arm64" 340 | ], 341 | "dev": true, 342 | "optional": true, 343 | "os": [ 344 | "win32" 345 | ], 346 | "engines": { 347 | "node": ">=12" 348 | } 349 | }, 350 | "node_modules/@esbuild/win32-ia32": { 351 | "version": "0.20.2", 352 | "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz", 353 | "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==", 354 | "cpu": [ 355 | "ia32" 356 | ], 357 | "dev": true, 358 | "optional": true, 359 | "os": [ 360 | "win32" 361 | ], 362 | "engines": { 363 | "node": ">=12" 364 | } 365 | }, 366 | "node_modules/@esbuild/win32-x64": { 367 | "version": "0.20.2", 368 | "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz", 369 | "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==", 370 | "cpu": [ 371 | "x64" 372 | ], 373 | "dev": true, 374 | "optional": true, 375 | "os": [ 376 | "win32" 377 | ], 378 | "engines": { 379 | "node": ">=12" 380 | } 381 | }, 382 | "node_modules/@rollup/rollup-android-arm-eabi": { 383 | "version": "4.18.0", 384 | "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", 385 | "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==", 386 | "cpu": [ 387 | "arm" 388 | ], 389 | "dev": true, 390 | "optional": true, 391 | "os": [ 392 | "android" 393 | ] 394 | }, 395 | "node_modules/@rollup/rollup-android-arm64": { 396 | "version": "4.18.0", 397 | "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz", 398 | "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==", 399 | "cpu": [ 400 | "arm64" 401 | ], 402 | "dev": true, 403 | "optional": true, 404 | "os": [ 405 | "android" 406 | ] 407 | }, 408 | "node_modules/@rollup/rollup-darwin-arm64": { 409 | "version": "4.18.0", 410 | "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz", 411 | "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==", 412 | "cpu": [ 413 | "arm64" 414 | ], 415 | "dev": true, 416 | "optional": true, 417 | "os": [ 418 | "darwin" 419 | ] 420 | }, 421 | "node_modules/@rollup/rollup-darwin-x64": { 422 | "version": "4.18.0", 423 | "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz", 424 | "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==", 425 | "cpu": [ 426 | "x64" 427 | ], 428 | "dev": true, 429 | "optional": true, 430 | "os": [ 431 | "darwin" 432 | ] 433 | }, 434 | "node_modules/@rollup/rollup-linux-arm-gnueabihf": { 435 | "version": "4.18.0", 436 | "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz", 437 | "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==", 438 | "cpu": [ 439 | "arm" 440 | ], 441 | "dev": true, 442 | "optional": true, 443 | "os": [ 444 | "linux" 445 | ] 446 | }, 447 | "node_modules/@rollup/rollup-linux-arm-musleabihf": { 448 | "version": "4.18.0", 449 | "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz", 450 | "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==", 451 | "cpu": [ 452 | "arm" 453 | ], 454 | "dev": true, 455 | "optional": true, 456 | "os": [ 457 | "linux" 458 | ] 459 | }, 460 | "node_modules/@rollup/rollup-linux-arm64-gnu": { 461 | "version": "4.18.0", 462 | "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz", 463 | "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==", 464 | "cpu": [ 465 | "arm64" 466 | ], 467 | "dev": true, 468 | "optional": true, 469 | "os": [ 470 | "linux" 471 | ] 472 | }, 473 | "node_modules/@rollup/rollup-linux-arm64-musl": { 474 | "version": "4.18.0", 475 | "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz", 476 | "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==", 477 | "cpu": [ 478 | "arm64" 479 | ], 480 | "dev": true, 481 | "optional": true, 482 | "os": [ 483 | "linux" 484 | ] 485 | }, 486 | "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { 487 | "version": "4.18.0", 488 | "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz", 489 | "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==", 490 | "cpu": [ 491 | "ppc64" 492 | ], 493 | "dev": true, 494 | "optional": true, 495 | "os": [ 496 | "linux" 497 | ] 498 | }, 499 | "node_modules/@rollup/rollup-linux-riscv64-gnu": { 500 | "version": "4.18.0", 501 | "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz", 502 | "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==", 503 | "cpu": [ 504 | "riscv64" 505 | ], 506 | "dev": true, 507 | "optional": true, 508 | "os": [ 509 | "linux" 510 | ] 511 | }, 512 | "node_modules/@rollup/rollup-linux-s390x-gnu": { 513 | "version": "4.18.0", 514 | "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz", 515 | "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==", 516 | "cpu": [ 517 | "s390x" 518 | ], 519 | "dev": true, 520 | "optional": true, 521 | "os": [ 522 | "linux" 523 | ] 524 | }, 525 | "node_modules/@rollup/rollup-linux-x64-gnu": { 526 | "version": "4.18.0", 527 | "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz", 528 | "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==", 529 | "cpu": [ 530 | "x64" 531 | ], 532 | "dev": true, 533 | "optional": true, 534 | "os": [ 535 | "linux" 536 | ] 537 | }, 538 | "node_modules/@rollup/rollup-linux-x64-musl": { 539 | "version": "4.18.0", 540 | "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz", 541 | "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==", 542 | "cpu": [ 543 | "x64" 544 | ], 545 | "dev": true, 546 | "optional": true, 547 | "os": [ 548 | "linux" 549 | ] 550 | }, 551 | "node_modules/@rollup/rollup-win32-arm64-msvc": { 552 | "version": "4.18.0", 553 | "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz", 554 | "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==", 555 | "cpu": [ 556 | "arm64" 557 | ], 558 | "dev": true, 559 | "optional": true, 560 | "os": [ 561 | "win32" 562 | ] 563 | }, 564 | "node_modules/@rollup/rollup-win32-ia32-msvc": { 565 | "version": "4.18.0", 566 | "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz", 567 | "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==", 568 | "cpu": [ 569 | "ia32" 570 | ], 571 | "dev": true, 572 | "optional": true, 573 | "os": [ 574 | "win32" 575 | ] 576 | }, 577 | "node_modules/@rollup/rollup-win32-x64-msvc": { 578 | "version": "4.18.0", 579 | "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz", 580 | "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==", 581 | "cpu": [ 582 | "x64" 583 | ], 584 | "dev": true, 585 | "optional": true, 586 | "os": [ 587 | "win32" 588 | ] 589 | }, 590 | "node_modules/@types/estree": { 591 | "version": "1.0.5", 592 | "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", 593 | "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", 594 | "dev": true 595 | }, 596 | "node_modules/esbuild": { 597 | "version": "0.20.2", 598 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", 599 | "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==", 600 | "dev": true, 601 | "hasInstallScript": true, 602 | "bin": { 603 | "esbuild": "bin/esbuild" 604 | }, 605 | "engines": { 606 | "node": ">=12" 607 | }, 608 | "optionalDependencies": { 609 | "@esbuild/aix-ppc64": "0.20.2", 610 | "@esbuild/android-arm": "0.20.2", 611 | "@esbuild/android-arm64": "0.20.2", 612 | "@esbuild/android-x64": "0.20.2", 613 | "@esbuild/darwin-arm64": "0.20.2", 614 | "@esbuild/darwin-x64": "0.20.2", 615 | "@esbuild/freebsd-arm64": "0.20.2", 616 | "@esbuild/freebsd-x64": "0.20.2", 617 | "@esbuild/linux-arm": "0.20.2", 618 | "@esbuild/linux-arm64": "0.20.2", 619 | "@esbuild/linux-ia32": "0.20.2", 620 | "@esbuild/linux-loong64": "0.20.2", 621 | "@esbuild/linux-mips64el": "0.20.2", 622 | "@esbuild/linux-ppc64": "0.20.2", 623 | "@esbuild/linux-riscv64": "0.20.2", 624 | "@esbuild/linux-s390x": "0.20.2", 625 | "@esbuild/linux-x64": "0.20.2", 626 | "@esbuild/netbsd-x64": "0.20.2", 627 | "@esbuild/openbsd-x64": "0.20.2", 628 | "@esbuild/sunos-x64": "0.20.2", 629 | "@esbuild/win32-arm64": "0.20.2", 630 | "@esbuild/win32-ia32": "0.20.2", 631 | "@esbuild/win32-x64": "0.20.2" 632 | } 633 | }, 634 | "node_modules/fsevents": { 635 | "version": "2.3.3", 636 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", 637 | "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", 638 | "dev": true, 639 | "hasInstallScript": true, 640 | "optional": true, 641 | "os": [ 642 | "darwin" 643 | ], 644 | "engines": { 645 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 646 | } 647 | }, 648 | "node_modules/nanoid": { 649 | "version": "3.3.7", 650 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", 651 | "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", 652 | "dev": true, 653 | "funding": [ 654 | { 655 | "type": "github", 656 | "url": "https://github.com/sponsors/ai" 657 | } 658 | ], 659 | "bin": { 660 | "nanoid": "bin/nanoid.cjs" 661 | }, 662 | "engines": { 663 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 664 | } 665 | }, 666 | "node_modules/picocolors": { 667 | "version": "1.0.1", 668 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", 669 | "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", 670 | "dev": true 671 | }, 672 | "node_modules/postcss": { 673 | "version": "8.4.38", 674 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", 675 | "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", 676 | "dev": true, 677 | "funding": [ 678 | { 679 | "type": "opencollective", 680 | "url": "https://opencollective.com/postcss/" 681 | }, 682 | { 683 | "type": "tidelift", 684 | "url": "https://tidelift.com/funding/github/npm/postcss" 685 | }, 686 | { 687 | "type": "github", 688 | "url": "https://github.com/sponsors/ai" 689 | } 690 | ], 691 | "dependencies": { 692 | "nanoid": "^3.3.7", 693 | "picocolors": "^1.0.0", 694 | "source-map-js": "^1.2.0" 695 | }, 696 | "engines": { 697 | "node": "^10 || ^12 || >=14" 698 | } 699 | }, 700 | "node_modules/rollup": { 701 | "version": "4.18.0", 702 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", 703 | "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==", 704 | "dev": true, 705 | "dependencies": { 706 | "@types/estree": "1.0.5" 707 | }, 708 | "bin": { 709 | "rollup": "dist/bin/rollup" 710 | }, 711 | "engines": { 712 | "node": ">=18.0.0", 713 | "npm": ">=8.0.0" 714 | }, 715 | "optionalDependencies": { 716 | "@rollup/rollup-android-arm-eabi": "4.18.0", 717 | "@rollup/rollup-android-arm64": "4.18.0", 718 | "@rollup/rollup-darwin-arm64": "4.18.0", 719 | "@rollup/rollup-darwin-x64": "4.18.0", 720 | "@rollup/rollup-linux-arm-gnueabihf": "4.18.0", 721 | "@rollup/rollup-linux-arm-musleabihf": "4.18.0", 722 | "@rollup/rollup-linux-arm64-gnu": "4.18.0", 723 | "@rollup/rollup-linux-arm64-musl": "4.18.0", 724 | "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0", 725 | "@rollup/rollup-linux-riscv64-gnu": "4.18.0", 726 | "@rollup/rollup-linux-s390x-gnu": "4.18.0", 727 | "@rollup/rollup-linux-x64-gnu": "4.18.0", 728 | "@rollup/rollup-linux-x64-musl": "4.18.0", 729 | "@rollup/rollup-win32-arm64-msvc": "4.18.0", 730 | "@rollup/rollup-win32-ia32-msvc": "4.18.0", 731 | "@rollup/rollup-win32-x64-msvc": "4.18.0", 732 | "fsevents": "~2.3.2" 733 | } 734 | }, 735 | "node_modules/source-map-js": { 736 | "version": "1.2.0", 737 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", 738 | "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", 739 | "dev": true, 740 | "engines": { 741 | "node": ">=0.10.0" 742 | } 743 | }, 744 | "node_modules/vite": { 745 | "version": "5.2.11", 746 | "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz", 747 | "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==", 748 | "dev": true, 749 | "dependencies": { 750 | "esbuild": "^0.20.1", 751 | "postcss": "^8.4.38", 752 | "rollup": "^4.13.0" 753 | }, 754 | "bin": { 755 | "vite": "bin/vite.js" 756 | }, 757 | "engines": { 758 | "node": "^18.0.0 || >=20.0.0" 759 | }, 760 | "funding": { 761 | "url": "https://github.com/vitejs/vite?sponsor=1" 762 | }, 763 | "optionalDependencies": { 764 | "fsevents": "~2.3.3" 765 | }, 766 | "peerDependencies": { 767 | "@types/node": "^18.0.0 || >=20.0.0", 768 | "less": "*", 769 | "lightningcss": "^1.21.0", 770 | "sass": "*", 771 | "stylus": "*", 772 | "sugarss": "*", 773 | "terser": "^5.4.0" 774 | }, 775 | "peerDependenciesMeta": { 776 | "@types/node": { 777 | "optional": true 778 | }, 779 | "less": { 780 | "optional": true 781 | }, 782 | "lightningcss": { 783 | "optional": true 784 | }, 785 | "sass": { 786 | "optional": true 787 | }, 788 | "stylus": { 789 | "optional": true 790 | }, 791 | "sugarss": { 792 | "optional": true 793 | }, 794 | "terser": { 795 | "optional": true 796 | } 797 | } 798 | } 799 | } 800 | } 801 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fem-manage-landing-page-master", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^5.2.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | > 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens. 11 | 12 | ## Colors 13 | 14 | ### Primary 15 | 16 | Bright Red: hsl(12, 88%, 59%) 17 | Dark Blue: hsl(228, 39%, 23%) 18 | 19 | ### Neutral 20 | 21 | Dark Grayish Blue: hsl(227, 12%, 61%) 22 | Very Dark Blue: hsl(233, 12%, 13%) 23 | Very Pale Red: hsl(13, 100%, 96%) 24 | Very Light Gray: hsl(0, 0%, 98%) 25 | 26 | ## Typography 27 | 28 | ### Body Copy 29 | 30 | - Font size: 16px 31 | 32 | ### Font 33 | 34 | - Family: [Be Vietnam Pro](https://fonts.google.com/specimen/Be+Vietnam+Pro) 35 | - Weights: 400, 500, 700 36 | 37 | ## Icons 38 | 39 | For the social icons, you can use the icons provided or a font icon library. Some suggestions for font icon libraries can be found below: 40 | 41 | - [Font Awesome](https://fontawesome.com) 42 | - [IcoMoon](https://icomoon.io) 43 | - [Ionicons](https://ionicons.com) 44 | 45 | > 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma. 46 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | :root{ 3 | --clr-accent-500: hsl(12, 60%, 45%); 4 | --clr-accent-400: hsl(12, 88%, 59%); 5 | --clr-accent-300: hsl(12, 88%, 75%); 6 | --clr-accent-100: hsl(13, 100%, 96%); 7 | --clr-primary-400: hsl(228, 39%, 23%); 8 | --clr-neutral-900: hsl(233, 12%, 13%); 9 | --clr-neutral-200:hsl(0, 0%, 97%); 10 | --clr-neutral-100:hsl(0, 0%, 100%); 11 | 12 | --ff-primary: "Be Vietnam Pro", sans-serif; 13 | --ff-body: var(--ff-primary); 14 | --ff-heading: var(--ff-primary); 15 | 16 | --fw-regular:400; 17 | --fw-semi-bold:500; 18 | --fw-bold:700; 19 | 20 | --fs-300: 0.8125rem; 21 | --fs-400: .875rem; 22 | --fs-500: 0.9375rem; 23 | --fs-600: 1rem; 24 | --fs-700: 1.875rem; 25 | --fs-800: 2.5rem; 26 | --fs-900: 3.5rem; 27 | 28 | --fs-body: var(--fs-400); 29 | --fs-primary-heading: var(--fs-800); 30 | --fs-secondary-heading: var(--fs-700); 31 | --fs-vav: var(--fs-500); 32 | --fs-button: var(--fs-300); 33 | 34 | --size-100:0.25rem; 35 | --size-200:0.5rem; 36 | --size-300:0.75rem; 37 | --size-400:1rem; 38 | --size-500:1.5rem; 39 | --size-600:2rem; 40 | --size-700:3rem; 41 | --size-800:4rem; 42 | --size-900:5rem; 43 | } 44 | @media(min-width:50em){ 45 | :root{ 46 | --fs-body: var(--fs-500); 47 | --fs-primary-heading: var(--fs-900); 48 | --fs-secondary-heading: var(--fs-800); 49 | --fs-vav: var(--fs-300); 50 | 51 | 52 | } 53 | } 54 | 55 | 56 | /* // nphttps://piccalil.li/blog/a-modern-css-reset */ 57 | 58 | /* Box sizing rules */ 59 | *, 60 | *::before, 61 | *::after { 62 | box-sizing: border-box; 63 | } 64 | 65 | /* Remove default margin */ 66 | *{ 67 | margin: 0; 68 | padding: 0; 69 | font: inherit; 70 | } 71 | 72 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 73 | ul[role='list'], 74 | ol[role='list'] { 75 | list-style: none; 76 | } 77 | 78 | /* Set core root defaults */ 79 | html:focus-within { 80 | scroll-behavior: smooth; 81 | } 82 | 83 | /* Set core body defaults */ 84 | html, 85 | body{ 86 | min-height: 100%; 87 | overflow-x: hidden; 88 | } 89 | body { 90 | text-rendering: optimizeSpeed; 91 | line-height: 1.5; 92 | } 93 | 94 | /* A elements that don't have a class get default styles */ 95 | a:not([class]) { 96 | text-decoration-skip-ink: auto; 97 | } 98 | 99 | /* Make images easier to work with */ 100 | img, 101 | picture, 102 | svg { 103 | max-width: 100%; 104 | display: block; 105 | } 106 | 107 | /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ 108 | @media (prefers-reduced-motion: reduce) { 109 | html:focus-within { 110 | scroll-behavior: auto; 111 | } 112 | 113 | *, 114 | *::before, 115 | *::after { 116 | animation-duration: 0.01ms !important; 117 | animation-iteration-count: 1 !important; 118 | transition-duration: 0.01ms !important; 119 | scroll-behavior: auto !important; 120 | } 121 | } 122 | 123 | /* general styling */ 124 | body{ 125 | font-size: var(--fs-body); 126 | font-family: var(--ff-body); 127 | color: var(--clr-primary-400); 128 | } 129 | p:not([class]){ 130 | opacity: 0.7; 131 | max-width: 32ch; 132 | } 133 | p[data-width="wide"]{ 134 | max-width: 42ch; 135 | } 136 | .button{ 137 | display: inline-flex; 138 | cursor: pointer; 139 | text-decoration: none; 140 | border: 0; 141 | border-radius: 100vmax; 142 | padding: 1.25em 2.5em; 143 | font-weight: var(--fw-bold); 144 | font-size: var(--fs-button); 145 | line-height: 1; 146 | color: var(--clr-neutral-100); 147 | background-color: var(--clr-accent-400); 148 | box-shadow: 0 1.125em 1em -1em var(--clr-accent-500); 149 | } 150 | .button[data-type="inverted"]{ 151 | background-color: var(--clr-accent-100); 152 | color: var(--clr-accent-400); 153 | } 154 | .button[data-type="none"]{ 155 | box-shadow: none; 156 | } 157 | .button:hover, 158 | .button:focus-visible{ 159 | background-color: var(--clr-accent-300); 160 | } 161 | .button[data-type="inverted"]:hover, 162 | .button[data-type="inverted"]:focus-visible{ 163 | background-color: var(--clr-accent-100); 164 | color: var(--clr-accent-400); 165 | } 166 | /* Navigations */ 167 | .primary-header{ 168 | padding-top: var(--size-700); 169 | 170 | } 171 | .nav-wrapper{ 172 | display: flex; 173 | justify-content: space-between; 174 | align-items: center; 175 | } 176 | .mobile-nav-toggle{ 177 | display: none; 178 | } 179 | .nav-list{ 180 | font-size: var(--fs-nav); 181 | } 182 | .nav-list { 183 | display: flex; 184 | gap: clamp( var(--size-400), 5vw, var(--size-700)); 185 | font-weight: var(--fw-semi-bold); 186 | list-style: none; 187 | } 188 | 189 | 190 | .nav-list a{ 191 | text-decoration: none; 192 | color: var(--clr-primary-400); 193 | } 194 | .nav-list a:hover, 195 | .nav-list a:focus{ 196 | color: var(--clr-accent-400); 197 | } 198 | 199 | @media(max-width: 47em){ 200 | .primary-header[data-overlay]{ 201 | position: relative; 202 | z-index: 999; 203 | } 204 | .primary-navigation{ 205 | display: none; 206 | position: fixed; 207 | padding: var(--size-700); 208 | inset: 7em var(--size-400) auto; 209 | max-width: 25rem; 210 | margin-inline: auto; 211 | background: var(--clr-neutral-100); 212 | border-radius: var(--size-100); 213 | box-shadow: 0 0 0.75em rgb(0, 0, 0,0.05); 214 | } 215 | 216 | } 217 | .icon-hamburger { 218 | display: inline-block; 219 | } 220 | 221 | .icon-close { 222 | display: none; 223 | } 224 | 225 | @media(min-width: 47em){ 226 | .icon-hamburger{ 227 | display: none; 228 | /* position: absolute; */ 229 | } 230 | .icon-close { 231 | display: inline-block; 232 | /* position: absolute; */ 233 | } 234 | } 235 | 236 | .primary-header[data-overlay]::before { 237 | content: " "; 238 | position: fixed; 239 | inset: 0; 240 | background-image : linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.8)); 241 | } 242 | 243 | 244 | .nav-list li{ 245 | display: block; 246 | /* grid-template-rows: 1fr; */ 247 | gap: var(--size-600); 248 | text-align: center; 249 | font-weight: var(--fw-bold); 250 | inline-size: none; 251 | } 252 | @media(max-width:50em){ 253 | .nav-list{ 254 | display: inline-block; 255 | gap: var(--size-800); 256 | justify-content: center; 257 | padding-left: 100px; 258 | line-height: 4; 259 | margin: 5px; 260 | } 261 | } 262 | .primary-navigation[data-visible]{ 263 | display: block; 264 | } 265 | /* .primary-navigation[data-visible] .mobile-nav-toggle{ 266 | background-image: url("images/icon-close.svg"); */ 267 | /* } */ 268 | .mobile-nav-toggle{ 269 | display: none; 270 | } 271 | @media(max-width:47em){ 272 | .mobile-nav-toggle{ 273 | display: block; 274 | position: sticky; 275 | top: var(--size-600); 276 | right: var(--size-400); 277 | z-index: 100; 278 | cursor: pointer; 279 | background: transparent; 280 | border: 0; 281 | width: 1.7em; 282 | padding: 0.5em; 283 | aspect-ratio: 1; 284 | background-image: url("images/icon-hamburger.svg"); 285 | background-size: contain; 286 | background-repeat: no-repeat; 287 | background-position: center; 288 | } 289 | .mobile-nav-toggle[aria-expended="true"]{ 290 | background-image: url("images/icon-close.svg"); 291 | } 292 | } 293 | /* footer */ 294 | .primary-footer__logo{ 295 | --logo-color: var(--clr-neutral-100); 296 | } 297 | 298 | .primary-footer__wrapper { 299 | display: grid; 300 | gap: var(--size-700) ; 301 | align-items: start; 302 | justify-content: center; 303 | grid-template-areas: 'form' 304 | 'nav' 305 | 'social' 306 | 'logo' 307 | 'copyright' 308 | ; 309 | } 310 | .logo{ 311 | align-items: start; 312 | } 313 | .primary-footer__form{ 314 | grid-area: form;} 315 | .primary-footer__nav{ 316 | grid-area: nav; 317 | margin-inline: auto; 318 | } 319 | .primary-footer__logo{ 320 | grid-area: logo; 321 | margin-top: -50px; 322 | } 323 | .primary-footer__copyright{ 324 | grid-area: copyright; 325 | opacity: 0.7; 326 | } 327 | 328 | .footer-nav{ 329 | columns: 2; 330 | gap: clamp(4rem,10vw,7rem); 331 | } 332 | .primary-footer__form{ 333 | grid-area: "form"; 334 | display: grid; 335 | justify-content: space-between; 336 | 337 | } 338 | input:where([type="text"], [type="email"],){ 339 | border-radius: 100vw; 340 | border: 0; 341 | padding: var(--size-300) var(--size-400); 342 | min-width: 14rem; 343 | } 344 | @media(min-width:47em){ 345 | .primary-footer__wrapper { 346 | grid-template-areas: 347 | "logo nav form" 348 | "social nav copyright"; 349 | grid-template-columns: min-content 1fr auto; 350 | .primary-footer__copyright { 351 | text-align: right; 352 | } 353 | } 354 | } 355 | /* .primary-footer__logo{ 356 | align-items: start; 357 | justify-content: space-between; 358 | vertical-align: top; 359 | gap: var(--size-700); 360 | } */ 361 | /* .primary-footer-logo-social{ 362 | grid-area: "logo-social"; 363 | display: flex; 364 | flex-direction: column-reverse; 365 | align-items: center; 366 | gap: var(--size-700); 367 | } */ 368 | @media(max-width:47em){ 369 | .primary-footer__wrapper > *{ 370 | margin-inline: auto; 371 | } 372 | } 373 | /* footer navigation */ 374 | .footer-nav{ 375 | columns: 2; 376 | gap: clamp(var(--size-200), 30vw, var(--size-900)); 377 | } 378 | .footer-nav a{ 379 | color: var(--clr-neutral-100); 380 | text-decoration: none; 381 | } 382 | .footer-nav a:is( :hover, :focus){ 383 | color: var(--clr-accent-400); 384 | 385 | } 386 | /* social list */ 387 | .social-list{ 388 | display: flex; 389 | gap: var(--size-300); 390 | } 391 | .social-icon{ 392 | width: var(--size-600); 393 | aspect-ratio: 1; 394 | fill: var(--clr-neutral-100); 395 | } 396 | @media(min-width:47em){ 397 | .social-list{ 398 | gap: var(--size-300); 399 | } 400 | .social-icon{ 401 | width:var(--size-500); 402 | max-width: revert; 403 | } 404 | } 405 | .social-icon :hover{ 406 | fill: var(--clr-accent-400); 407 | } 408 | 409 | .social-list a:is(:hover, :focus).social-icon{ 410 | fill: var(--clr-accent-400); 411 | /* fill:red; */ 412 | } 413 | /* @media(min-width:47em){ 414 | .social-icon{ 415 | width: var(--size-500); 416 | } 417 | } */ 418 | 419 | /* cta */ 420 | .cta{ 421 | position: relative; 422 | isolation: isolate; 423 | text-align: center; 424 | } 425 | @media (min-width:50em){ 426 | .cta{ 427 | text-align: left; 428 | } 429 | } 430 | .cta::before{ 431 | content: ""; 432 | position: absolute; 433 | z-index: -1; 434 | inset: 0; 435 | background-image: url(images/bg-tablet-pattern.svg) 436 | , url(images/bg-tablet-pattern.svg); 437 | background-position: -15rem -5rem, 80rem -42rem ; 438 | background-repeat: no-repeat; 439 | opacity: 0.1; 440 | } 441 | /* numbered items */ 442 | .numbered-items{ 443 | counter-reset: count; 444 | width: fit-content; 445 | margin-inline: auto; 446 | } 447 | .numbered-items li{ 448 | counter-increment: count; 449 | } 450 | .numbered-items div{ 451 | display: grid; 452 | position: relative; 453 | align-items: center; 454 | column-gap: var(--size-300); 455 | grid-template-columns: min-content 4fr 1fr; 456 | } 457 | .numbered-items-title{ 458 | grid-row: 1 / 2; 459 | grid-column: 2 / 3; 460 | } 461 | .numbered-items-body{ 462 | grid-column: 1 / -1; 463 | } 464 | @media(min-width:30em){ 465 | .numbered-items-body{ 466 | grid-column: 2 / -1; 467 | } 468 | } 469 | .numbered-items div::before, 470 | .numbered-items div::after{ 471 | height: 50px; 472 | } 473 | .numbered-items div::before{ 474 | content:"0" counter(count); 475 | display: flex; 476 | align-items: center; 477 | background-color: var(--clr-accent-400); 478 | color: var(--clr-accent-100); 479 | font-weight: var(--fw-bold); 480 | padding: 0 var(--size-500); 481 | height: 40px; 482 | border-radius: 100vw; 483 | grid-row: 1 / 2; 484 | grid-column: 1 / 2; 485 | } 486 | @media (max-width:30em){ 487 | .numbered-items div::after{ 488 | --bg:var(--clr-accent-100); 489 | content: ""; 490 | display: block; 491 | z-index: -1; 492 | border-radius: 100vw 0 0 100vw; 493 | /* inset: 0; */ 494 | grid-column: 1 /-1; 495 | grid-row: 1 / 2; 496 | box-shadow: 5em 0 0 var(--bg); 497 | /* height: 40px; */ 498 | /* width:100% */ 499 | background: var(--bg); 500 | } 501 | } 502 | 503 | /* slider */ 504 | .slider { 505 | display: flex; 506 | gap: var(--size-600); 507 | list-style: none; 508 | } 509 | .a11y-slider-container{ 510 | margin-block: var(--size-700); 511 | margin-inline: var(--size-400); 512 | } 513 | 514 | .slider > * { 515 | position: relative; 516 | /* width: 100%; */ 517 | flex: 0 0 auto; 518 | 519 | width: 100%; 520 | } 521 | @media(min-width:30em){ 522 | .slider{ 523 | scroll-padding-inline: 25px; 524 | 525 | } 526 | .a11y-slider-container{ 527 | margin-inline: 0; 528 | } 529 | .slider > * { 530 | width: 50%; 531 | } 532 | } 533 | @media(min-width:50em){ 534 | .slider > * { 535 | width: 35%; 536 | } 537 | } 538 | .slider-content{ 539 | border-radius: var(--size-300); 540 | padding: var(--size-800) var(--size-600) var(--size-600); 541 | background: var(--clr-neutral-200); 542 | } 543 | .slider img{ 544 | width: var(--size-800); 545 | position: relative; 546 | top: calc(var(--size-800)/2); 547 | /* inset: 0; */ 548 | margin-inline: auto; 549 | /* transform: translatey(50%); */ 550 | } 551 | .a11y-slider-dots{ 552 | display: flex; 553 | justify-content: center; 554 | margin-block: var(--size-500); 555 | gap: var(--size-300); 556 | } 557 | .a11y-slider-dots li{ 558 | /* list-style: none; */ 559 | display: block; 560 | width: 12px; 561 | height: 12px; 562 | padding: 0; 563 | /* border: 1px solid var(--clr-accent-400); */ 564 | } 565 | .a11y-slider-dots li button{ 566 | display: block; 567 | font-size: 0; 568 | text-indent: -9999px; 569 | background: transparent; 570 | border: 1px solid var(--clr-accent-400)!important ; 571 | width: 100%; 572 | height: 100%; 573 | border-radius: 100%; 574 | 575 | } 576 | .a11y-slider-dots li button.active{ 577 | background: var(--clr-accent-400); 578 | } 579 | /* image with blob bg */ 580 | 581 | @media(max-width:50em){ 582 | .hero-image{ 583 | /* position: relative; */ 584 | order: -1; 585 | } 586 | } 587 | .hero-image::before{ 588 | content: ""; 589 | position: absolute; 590 | z-index: -1; 591 | right: 0; 592 | top: 0; 593 | width: 87%; 594 | max-height: 75vh; 595 | max-height: 140dvh; 596 | aspect-ratio: 1 / 1.2; 597 | background-image: url("images/bg-tablet-pattern.svg"); 598 | background-repeat: no-repeat; 599 | background-position: bottom left; 600 | } 601 | @media(min-width:47em){ 602 | .hero-image::before{ 603 | width: 45%; 604 | } 605 | } 606 | /* sales points */ 607 | .sales-points-blog{ 608 | position: relative; 609 | } 610 | .sales-points-blog::before{ 611 | content: url("images/bg-tablet-pattern.svg"); 612 | zoom:40%; 613 | position: absolute; 614 | z-index: -1; 615 | left: 70%; 616 | bottom: 120%; 617 | width: 100px; 618 | } 619 | @media(min-width:47em){ 620 | .sales-points-blog::before{ 621 | zoom:70%; 622 | z-index: -1; 623 | left: -500px; 624 | top: 42%; 625 | width: 100px; 626 | } 627 | } 628 | 629 | /* utility classes */ 630 | .visually-hidden{ 631 | position: absolute; 632 | width: 1px; 633 | height: 1px; 634 | padding: 0; 635 | margin: -1px; 636 | overflow: hidden; 637 | clip: rect(0 , 0 , 0 , 0); 638 | white-space: nowrap; 639 | border: 0; 640 | } 641 | .container{ 642 | --max-width:1110px; 643 | --container-padding:1rem; 644 | width: min(var(--max-width) , 100% - (var(--container-padding)*2)); 645 | margin-inline: auto; 646 | } 647 | .vertical-align-center{ 648 | align-items: center; 649 | } 650 | 651 | .justify-self-end{ 652 | justify-self: end; 653 | } 654 | @media(min-width:50em){ 655 | .justify-self-end-md{ 656 | justify-self: end; 657 | } 658 | } 659 | :where(.flow :not(:first-child)){ 660 | margin-top: var(--flow-spacer,3em); 661 | } 662 | .text-center{ 663 | text-align: center; 664 | } 665 | .text-center p{ 666 | margin-inline: auto; 667 | } 668 | @media(max-width:47em){ 669 | .text-center-sm-only{ 670 | text-align: center; 671 | } 672 | } 673 | .text-center-sm-only p{ 674 | margin-inline: auto; 675 | } 676 | .even-columns{ 677 | display: grid; 678 | gap: 1rem; 679 | } 680 | @media(min-width:50em){ 681 | .even-columns{ 682 | grid-auto-flow: column; 683 | grid-auto-columns: 1fr; 684 | } 685 | } 686 | .text-primary-400{ 687 | color: var(--clr-primary-400); 688 | } 689 | .text-accent-400{ 690 | color: var(--clr-accent-400); 691 | } 692 | .text-accent-100{ 693 | color: var(--clr-accent-100); 694 | } 695 | .text-neutral-100{ 696 | color: var(--clr-neutral-100); 697 | } 698 | .text-neutral-900{ 699 | color: var(--clr-neutral-900); 700 | } 701 | /* background color */ 702 | .bg-primary-400{ 703 | background-color: var(--clr-primary-400); 704 | } 705 | .bg-accent-400{ 706 | background-color: var(--clr-accent-400); 707 | } 708 | .bg-accent-100{ 709 | background-color: var(--clr-accent-100); 710 | } 711 | .bg-neutral-100{ 712 | background-color: var(--clr-neutral-100); 713 | } 714 | .bg-neutral-900{ 715 | background-color: var(--clr-neutral-900);} 716 | 717 | .fw-bold { font-weight: var(--fw-bold);} 718 | .fw-semi-bold { font-weight: var(--fw-semi-bold);} 719 | .fw-regular { font-weight: var(--fw-regular);} 720 | .fs-primary-heading { 721 | font-size: var(--fs-primary-heading); 722 | line-height: 1.1; 723 | } 724 | .fs-secondary-heading { 725 | font-size: var(--fs-secondary-heading); 726 | line-height: 1.1; 727 | } 728 | .fs-300 { font-size: var(--fs-300);} 729 | .fs-400 { font-size: var(--fs-400);} 730 | .fs-500 { font-size: var(--fs-500);} 731 | .fs-600 { font-size: var(--fs-600);} 732 | .padding-block-900{ 733 | padding-block: var(--size-900); 734 | } 735 | .padding-block-700{ 736 | padding-block: var(--size-700); 737 | } 738 | .margin-bottom-700{ 739 | margin-block-end: var(--size-700); 740 | } 741 | .margin-top-900 { 742 | margin-block-start: var(--size-900); 743 | } 744 | .mx-auto{ 745 | margin-inline: auto; 746 | } 747 | .display-sm-none { 748 | display: none; 749 | } 750 | @media (min-width: 50em){ 751 | .display-md-inline-flex{ 752 | display: inline-flex; 753 | } 754 | } 755 | --------------------------------------------------------------------------------