├── .eslintrc.cjs ├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── LICENSE ├── Licence.txt ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public └── favicon.ico ├── src ├── App.jsx ├── assets │ ├── css │ │ ├── LineIcons.2.0.css │ │ ├── animate.css │ │ ├── bootstrap.min.css │ │ └── main.css │ ├── fonts │ │ ├── LineIcons.eot │ │ ├── LineIcons.svg │ │ ├── LineIcons.ttf │ │ ├── LineIcons.woff │ │ └── LineIcons.woff2 │ └── images │ │ └── Jonathan Dominion Template.gif ├── components │ ├── 1. Header Components │ │ ├── Hero │ │ │ ├── Hero.css │ │ │ └── Hero.jsx │ │ ├── Navbar │ │ │ ├── Navbar.css │ │ │ └── Navbar.jsx │ │ └── Typewriter │ │ │ ├── Typewriter.css │ │ │ └── Typewriter.jsx │ ├── 2. Content Components │ │ ├── Achievement │ │ │ ├── Achievement.css │ │ │ └── Achievement.jsx │ │ ├── Projects │ │ │ ├── Projects.css │ │ │ └── Projects.jsx │ │ └── Skillz │ │ │ ├── Skillz.css │ │ │ └── Skillz.jsx │ ├── 3. Footer Components │ │ ├── AboutMe │ │ │ ├── AboutMe.css │ │ │ └── AboutMe.jsx │ │ └── ContactMe │ │ │ ├── ContactMe.css │ │ │ └── ContactMe.jsx │ └── 4. Utility Components │ │ ├── ScrollToTopButton │ │ ├── ScrollToTopButton.css │ │ └── ScrollToTopButton.jsx │ │ └── Spinner │ │ ├── Spinner.css │ │ └── Spinner.jsx ├── main.jsx └── your_info.jsx └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | build: 10 | name: Build 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - name: Checkout repo 15 | uses: actions/checkout@v2 16 | 17 | - name: Setup Node 18 | uses: actions/setup-node@v1 19 | with: 20 | node-version: 16 21 | 22 | - name: Install dependencies 23 | uses: bahmutov/npm-install@v1 24 | 25 | - name: Build project 26 | run: npm run build 27 | 28 | - name: Upload production-ready build files 29 | uses: actions/upload-artifact@v2 30 | with: 31 | name: production-files 32 | path: ./dist 33 | 34 | deploy: 35 | name: Deploy 36 | needs: build 37 | runs-on: ubuntu-latest 38 | if: github.ref == 'refs/heads/main' 39 | 40 | steps: 41 | - name: Download artifact 42 | uses: actions/download-artifact@v2 43 | with: 44 | name: production-files 45 | path: ./dist 46 | 47 | - name: Deploy to GitHub Pages 48 | uses: peaceiris/actions-gh-pages@v3 49 | with: 50 | github_token: ${{ secrets.GITHUB_TOKEN }} 51 | publish_dir: ./dist -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Christoph Pfrommer 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 | -------------------------------------------------------------------------------- /Licence.txt: -------------------------------------------------------------------------------- 1 | Copyright 2023 Christoph Pfrommer // https://github.com/Pfrommer1982 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | *** Complete React Vite Portfolio Template *** 2 | 3 | Welcome to Complete Portfolio! This project provides a customizable template for creating amazing web applications. 4 | 5 | ## Features 6 | 7 | - Personalize your web application by providing your information from just one file: 'your_info.jsx' . 8 | - Color customization: Modify the :root colors in 'src/assets/css/main.css' to easily change the color scheme. 9 | - Integration with emailjs: The project utilizes emailjs for seamless email functionality. (contact form) 10 | - Open-source and free to use: Feel free to use this template for your personal or commercial projects. 11 | - If you use this template and created something awesome, let me know! *I love to see your creativity!* 12 | 13 | ## Installation 14 | 15 | 1. Clone the repository: 16 | 17 | ```shell 18 | git clone https://github.com/Pfrommer1982/Complete_Portfolio 19 | 20 | 2. Navigate to the project directory: 21 | 22 | ```shell 23 | cd Complete_Portfolio 24 | 25 | 3. Install dependencies: 26 | 27 | ```shell 28 | npm install 29 | 30 | ## Usage 31 | 32 | 1. Update your information: 33 | 34 | - Open 'src/your_info.jsx'. 35 | - Customize the variables and content to reflect your own information. (there are extra instructions in the file) 36 | - Save the file. 37 | 38 | 2. Customize colors: 39 | 40 | - Open 'src/assets/css/main.css'. 41 | - Modify the root colors according to your preference. 42 | - Save the file. 43 | 44 | 3. Start the development server: 45 | ```shell 46 | npm run dev 47 | 48 | 4. Access the application at http://localhost:3000. 49 | 50 | ## Contributing 51 | Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request. 52 | 53 | ## License 54 | This project is licensed under the MIT License. 55 | 56 | 57 | ## Examples: 58 | ### Photographer Portfolio Example 59 | ![Photographer Example](https://github.com/Pfrommer1982/Complete_Portfolio/assets/90003610/3d21a27c-472d-4b3a-9a48-1a748b209c26) 60 | 61 | ### Food / Health Blogger Example 62 | ![Food Blogger Example](https://github.com/Pfrommer1982/Complete_Portfolio/assets/90003610/c732e0a2-19f9-4400-adf9-bfe588d6a2fe) 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Complete.Portfolio.Template", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "vite", 9 | "build": "vite build", 10 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 11 | "preview": "vite preview", 12 | "homepage": "https://github.com/Pfrommer1982/Complete_React_Portfolio", 13 | "predeploy": "npm run build", 14 | "deploy": "gh-pages -d build" 15 | }, 16 | "dependencies": { 17 | "emailjs-com": "^3.2.0", 18 | "react": "^18.2.0", 19 | "react-color": "^2.19.3", 20 | "react-countup": "^6.4.2", 21 | "react-dom": "^18.2.0", 22 | "react-intersection-observer": "^9.4.4", 23 | "react-slick": "^0.29.0", 24 | "react-thumbnail": "^1.0.0", 25 | "slick-carousel": "^1.8.1", 26 | "wow.js": "^1.2.2" 27 | }, 28 | "devDependencies": { 29 | "@types/react": "^18.0.37", 30 | "@types/react-dom": "^18.0.11", 31 | "@vitejs/plugin-react": "^4.0.0", 32 | "eslint": "^8.38.0", 33 | "eslint-plugin-react": "^7.32.2", 34 | "eslint-plugin-react-hooks": "^4.6.0", 35 | "eslint-plugin-react-refresh": "^0.3.4", 36 | "gh-pages": "^5.0.0", 37 | "vite": "^4.3.9" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pfrommer1982/Complete_Portfolio/4454476e1cfe6438c6f48e7db883263310cac0f8/public/favicon.ico -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | 3 | // 1. Header Components 4 | import Hero from './components/1. Header Components/Hero/Hero'; 5 | 6 | // 2. Content Components 7 | import Skillz from './components/2. Content Components/Skillz/Skillz'; 8 | import Achievement from './components/2. Content Components/Achievement/Achievement'; 9 | import Projects from './components/2. Content Components/Projects/Projects'; 10 | 11 | 12 | // 3. Footer Component 13 | import AboutMe from './components/3. Footer Components/AboutMe/AboutMe'; 14 | 15 | // 4. Utility Components 16 | import Spinner from './components/4. Utility Components/Spinner/Spinner'; 17 | import { name } from './your_info'; 18 | import ScrollToTopButton from './components/4. Utility Components/ScrollToTopButton/ScrollToTopButton'; 19 | 20 | 21 | function App() { 22 | const [loading, setLoading] = useState(true); 23 | 24 | 25 | useEffect(() => { 26 | document.title = `${name.firstname} ${name.lastname}`; 27 | setTimeout(() => { 28 | setLoading(false); 29 | }, 800); 30 | }, []); 31 | 32 | return ( 33 | <> 34 | {loading ? ( 35 | 36 | ) : ( 37 | <> 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | )} 47 | 48 | ); 49 | } 50 | 51 | export default App; 52 | 53 | 54 | -------------------------------------------------------------------------------- /src/assets/css/LineIcons.2.0.css: -------------------------------------------------------------------------------- 1 | /*-------------------------------- 2 | 3 | LineIcons Free Web Font 4 | Author: lineicons.com 5 | 6 | -------------------------------- */ 7 | @font-face { 8 | font-family: 'LineIcons'; 9 | src: url('../fonts/LineIcons.eot'); 10 | src: url('../fonts/LineIcons.eot') format('embedded-opentype'), url('../fonts/LineIcons.woff2') format('woff2'), url('../fonts/LineIcons.woff') format('woff'), url('../fonts/LineIcons.ttf') format('truetype'), url('../fonts/LineIcons.svg') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | /*------------------------ 15 | base class definition 16 | -------------------------*/ 17 | .lni { 18 | display: inline-block; 19 | font: normal normal normal 1em/1 'LineIcons'; 20 | speak: none; 21 | text-transform: none; 22 | /* Better Font Rendering */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | /*------------------------ 27 | change icon size 28 | -------------------------*/ 29 | /* relative units */ 30 | .lni-sm { 31 | font-size: 0.8em; 32 | } 33 | .lni-lg { 34 | font-size: 1.2em; 35 | } 36 | /* absolute units */ 37 | .lni-16 { 38 | font-size: 16px; 39 | } 40 | .lni-32 { 41 | font-size: 32px; 42 | } 43 | /*---------------------------------- 44 | add a square/circle background 45 | -----------------------------------*/ 46 | .lni-bg-square, 47 | .lni-bg-circle { 48 | padding: 0.35em; 49 | background-color: #eee; 50 | } 51 | .lni-bg-circle { 52 | border-radius: 50%; 53 | } 54 | /*------------------------------------ 55 | use icons as list item markers 56 | -------------------------------------*/ 57 | .lni-ul { 58 | padding-left: 0; 59 | list-style-type: none; 60 | } 61 | .lni-ul > li { 62 | display: flex; 63 | align-items: flex-start; 64 | line-height: 1.4; 65 | } 66 | .lni-ul > li > .lni { 67 | margin-right: 0.4em; 68 | line-height: inherit; 69 | } 70 | /*------------------------ 71 | spinning icons 72 | -------------------------*/ 73 | .lni-is-spinning { 74 | -webkit-animation: lni-spin 2s infinite linear; 75 | -moz-animation: lni-spin 2s infinite linear; 76 | animation: lni-spin 2s infinite linear; 77 | } 78 | @-webkit-keyframes lni-spin { 79 | 0% { 80 | -webkit-transform: rotate(0deg); 81 | } 82 | 100% { 83 | -webkit-transform: rotate(360deg); 84 | } 85 | } 86 | @-moz-keyframes lni-spin { 87 | 0% { 88 | -moz-transform: rotate(0deg); 89 | } 90 | 100% { 91 | -moz-transform: rotate(360deg); 92 | } 93 | } 94 | @keyframes lni-spin { 95 | 0% { 96 | -webkit-transform: rotate(0deg); 97 | -moz-transform: rotate(0deg); 98 | -ms-transform: rotate(0deg); 99 | -o-transform: rotate(0deg); 100 | transform: rotate(0deg); 101 | } 102 | 100% { 103 | -webkit-transform: rotate(360deg); 104 | -moz-transform: rotate(360deg); 105 | -ms-transform: rotate(360deg); 106 | -o-transform: rotate(360deg); 107 | transform: rotate(360deg); 108 | } 109 | } 110 | /*------------------------ 111 | rotated/flipped icons 112 | -------------------------*/ 113 | .lni-rotate-90 { 114 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 115 | -webkit-transform: rotate(90deg); 116 | -moz-transform: rotate(90deg); 117 | -ms-transform: rotate(90deg); 118 | -o-transform: rotate(90deg); 119 | transform: rotate(90deg); 120 | } 121 | .lni-rotate-180 { 122 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 123 | -webkit-transform: rotate(180deg); 124 | -moz-transform: rotate(180deg); 125 | -ms-transform: rotate(180deg); 126 | -o-transform: rotate(180deg); 127 | transform: rotate(180deg); 128 | } 129 | .lni-rotate-270 { 130 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 131 | -webkit-transform: rotate(270deg); 132 | -moz-transform: rotate(270deg); 133 | -ms-transform: rotate(270deg); 134 | -o-transform: rotate(270deg); 135 | transform: rotate(270deg); 136 | } 137 | .lni-flip-y { 138 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); 139 | -webkit-transform: scale(-1, 1); 140 | -moz-transform: scale(-1, 1); 141 | -ms-transform: scale(-1, 1); 142 | -o-transform: scale(-1, 1); 143 | transform: scale(-1, 1); 144 | } 145 | .lni-flip-x { 146 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 147 | -webkit-transform: scale(1, -1); 148 | -moz-transform: scale(1, -1); 149 | -ms-transform: scale(1, -1); 150 | -o-transform: scale(1, -1); 151 | transform: scale(1, -1); 152 | } 153 | /*------------------------ 154 | icons 155 | -------------------------*/ 156 | 157 | .lni-500px::before { 158 | content: "\ea02"; 159 | } 160 | 161 | .lni-add-files::before { 162 | content: "\ea03"; 163 | } 164 | 165 | .lni-alarm-clock::before { 166 | content: "\ea04"; 167 | } 168 | 169 | .lni-alarm::before { 170 | content: "\ea05"; 171 | } 172 | 173 | .lni-airbnb::before { 174 | content: "\ea06"; 175 | } 176 | 177 | .lni-adobe::before { 178 | content: "\ea07"; 179 | } 180 | 181 | .lni-amazon-pay::before { 182 | content: "\ea08"; 183 | } 184 | 185 | .lni-amazon::before { 186 | content: "\ea09"; 187 | } 188 | 189 | .lni-amex::before { 190 | content: "\ea0a"; 191 | } 192 | 193 | .lni-anchor::before { 194 | content: "\ea0b"; 195 | } 196 | 197 | .lni-amazon-original::before { 198 | content: "\ea0c"; 199 | } 200 | 201 | .lni-android-original::before { 202 | content: "\ea0d"; 203 | } 204 | 205 | .lni-android::before { 206 | content: "\ea0e"; 207 | } 208 | 209 | .lni-angellist::before { 210 | content: "\ea0f"; 211 | } 212 | 213 | .lni-angle-double-down::before { 214 | content: "\ea10"; 215 | } 216 | 217 | .lni-angle-double-left::before { 218 | content: "\ea11"; 219 | } 220 | 221 | .lni-angle-double-right::before { 222 | content: "\ea12"; 223 | } 224 | 225 | .lni-angle-double-up::before { 226 | content: "\ea13"; 227 | } 228 | 229 | .lni-angular::before { 230 | content: "\ea14"; 231 | } 232 | 233 | .lni-apartment::before { 234 | content: "\ea15"; 235 | } 236 | 237 | .lni-app-store::before { 238 | content: "\ea16"; 239 | } 240 | 241 | .lni-apple-pay::before { 242 | content: "\ea17"; 243 | } 244 | 245 | .lni-apple::before { 246 | content: "\ea18"; 247 | } 248 | 249 | .lni-archive::before { 250 | content: "\ea19"; 251 | } 252 | 253 | .lni-arrow-down-circle::before { 254 | content: "\ea1a"; 255 | } 256 | 257 | .lni-arrow-left-circle::before { 258 | content: "\ea1b"; 259 | } 260 | 261 | .lni-arrow-left::before { 262 | content: "\ea1c"; 263 | } 264 | 265 | .lni-arrow-right-circle::before { 266 | content: "\ea1d"; 267 | } 268 | 269 | .lni-arrow-right::before { 270 | content: "\ea1e"; 271 | } 272 | 273 | .lni-arrow-top-left::before { 274 | content: "\ea1f"; 275 | } 276 | 277 | .lni-arrow-top-right::before { 278 | content: "\ea20"; 279 | } 280 | 281 | .lni-arrow-up-circle::before { 282 | content: "\ea21"; 283 | } 284 | 285 | .lni-arrow-up::before { 286 | content: "\ea22"; 287 | } 288 | 289 | .lni-arrows-horizontal::before { 290 | content: "\ea23"; 291 | } 292 | 293 | .lni-arrows-vertical::before { 294 | content: "\ea24"; 295 | } 296 | 297 | .lni-atlassian::before { 298 | content: "\ea25"; 299 | } 300 | 301 | .lni-aws::before { 302 | content: "\ea26"; 303 | } 304 | 305 | .lni-arrow-down::before { 306 | content: "\ea27"; 307 | } 308 | 309 | .lni-ambulance::before { 310 | content: "\ea28"; 311 | } 312 | 313 | .lni-agenda::before { 314 | content: "\ea29"; 315 | } 316 | 317 | .lni-backward::before { 318 | content: "\ea2a"; 319 | } 320 | 321 | .lni-baloon::before { 322 | content: "\ea2b"; 323 | } 324 | 325 | .lni-ban::before { 326 | content: "\ea2c"; 327 | } 328 | 329 | .lni-bar-chart::before { 330 | content: "\ea2d"; 331 | } 332 | 333 | .lni-behance-original::before { 334 | content: "\ea2e"; 335 | } 336 | 337 | .lni-bitbucket::before { 338 | content: "\ea2f"; 339 | } 340 | 341 | .lni-bitcoin::before { 342 | content: "\ea30"; 343 | } 344 | 345 | .lni-blackboard::before { 346 | content: "\ea31"; 347 | } 348 | 349 | .lni-blogger::before { 350 | content: "\ea32"; 351 | } 352 | 353 | .lni-bluetooth::before { 354 | content: "\ea33"; 355 | } 356 | 357 | .lni-bold::before { 358 | content: "\ea34"; 359 | } 360 | 361 | .lni-bolt-alt::before { 362 | content: "\ea35"; 363 | } 364 | 365 | .lni-bolt::before { 366 | content: "\ea36"; 367 | } 368 | 369 | .lni-book::before { 370 | content: "\ea37"; 371 | } 372 | 373 | .lni-bookmark-alt::before { 374 | content: "\ea38"; 375 | } 376 | 377 | .lni-bookmark::before { 378 | content: "\ea39"; 379 | } 380 | 381 | .lni-bootstrap::before { 382 | content: "\ea3a"; 383 | } 384 | 385 | .lni-bricks::before { 386 | content: "\ea3b"; 387 | } 388 | 389 | .lni-bridge::before { 390 | content: "\ea3c"; 391 | } 392 | 393 | .lni-briefcase::before { 394 | content: "\ea3d"; 395 | } 396 | 397 | .lni-brush-alt::before { 398 | content: "\ea3e"; 399 | } 400 | 401 | .lni-brush::before { 402 | content: "\ea3f"; 403 | } 404 | 405 | .lni-bubble::before { 406 | content: "\ea40"; 407 | } 408 | 409 | .lni-bug::before { 410 | content: "\ea41"; 411 | } 412 | 413 | .lni-bulb::before { 414 | content: "\ea42"; 415 | } 416 | 417 | .lni-bullhorn::before { 418 | content: "\ea43"; 419 | } 420 | 421 | .lni-burger::before { 422 | content: "\ea44"; 423 | } 424 | 425 | .lni-bus::before { 426 | content: "\ea45"; 427 | } 428 | 429 | .lni-cake::before { 430 | content: "\ea46"; 431 | } 432 | 433 | .lni-calculator::before { 434 | content: "\ea47"; 435 | } 436 | 437 | .lni-calendar::before { 438 | content: "\ea48"; 439 | } 440 | 441 | .lni-camera::before { 442 | content: "\ea49"; 443 | } 444 | 445 | .lni-candy-cane::before { 446 | content: "\ea4a"; 447 | } 448 | 449 | .lni-candy::before { 450 | content: "\ea4b"; 451 | } 452 | 453 | .lni-capsule::before { 454 | content: "\ea4c"; 455 | } 456 | 457 | .lni-car-alt::before { 458 | content: "\ea4d"; 459 | } 460 | 461 | .lni-car::before { 462 | content: "\ea4e"; 463 | } 464 | 465 | .lni-caravan::before { 466 | content: "\ea4f"; 467 | } 468 | 469 | .lni-cart-full::before { 470 | content: "\ea50"; 471 | } 472 | 473 | .lni-cart::before { 474 | content: "\ea51"; 475 | } 476 | 477 | .lni-certificate::before { 478 | content: "\ea52"; 479 | } 480 | 481 | .lni-checkbox::before { 482 | content: "\ea53"; 483 | } 484 | 485 | .lni-checkmark-circle::before { 486 | content: "\ea54"; 487 | } 488 | 489 | .lni-checkmark::before { 490 | content: "\ea55"; 491 | } 492 | 493 | .lni-chef-hat::before { 494 | content: "\ea56"; 495 | } 496 | 497 | .lni-chevron-down-circle::before { 498 | content: "\ea57"; 499 | } 500 | 501 | .lni-chevron-down::before { 502 | content: "\ea58"; 503 | } 504 | 505 | .lni-chevron-left-circle::before { 506 | content: "\ea59"; 507 | } 508 | 509 | .lni-chevron-left::before { 510 | content: "\ea5a"; 511 | } 512 | 513 | .lni-chevron-right-circle::before { 514 | content: "\ea5b"; 515 | } 516 | 517 | .lni-chevron-right::before { 518 | content: "\ea5c"; 519 | } 520 | 521 | .lni-chevron-up-circle::before { 522 | content: "\ea5d"; 523 | } 524 | 525 | .lni-chevron-up::before { 526 | content: "\ea5e"; 527 | } 528 | 529 | .lni-chrome::before { 530 | content: "\ea5f"; 531 | } 532 | 533 | .lni-circle-minus::before { 534 | content: "\ea60"; 535 | } 536 | 537 | .lni-circle-plus::before { 538 | content: "\ea61"; 539 | } 540 | 541 | .lni-clipboard::before { 542 | content: "\ea62"; 543 | } 544 | 545 | .lni-close::before { 546 | content: "\ea63"; 547 | } 548 | 549 | .lni-cloud-check::before { 550 | content: "\ea64"; 551 | } 552 | 553 | .lni-cloud-download::before { 554 | content: "\ea65"; 555 | } 556 | 557 | .lni-cloud-network::before { 558 | content: "\ea66"; 559 | } 560 | 561 | .lni-cloud-sync::before { 562 | content: "\ea67"; 563 | } 564 | 565 | .lni-cloud-upload::before { 566 | content: "\ea68"; 567 | } 568 | 569 | .lni-cloud::before { 570 | content: "\ea69"; 571 | } 572 | 573 | .lni-cloudy-sun::before { 574 | content: "\ea6a"; 575 | } 576 | 577 | .lni-code-alt::before { 578 | content: "\ea6b"; 579 | } 580 | 581 | .lni-code::before { 582 | content: "\ea6c"; 583 | } 584 | 585 | .lni-codepen::before { 586 | content: "\ea6d"; 587 | } 588 | 589 | .lni-coffee-cup::before { 590 | content: "\ea6e"; 591 | } 592 | 593 | .lni-cog::before { 594 | content: "\ea6f"; 595 | } 596 | 597 | .lni-cogs::before { 598 | content: "\ea70"; 599 | } 600 | 601 | .lni-coin::before { 602 | content: "\ea71"; 603 | } 604 | 605 | .lni-comments-alt::before { 606 | content: "\ea72"; 607 | } 608 | 609 | .lni-comments-reply::before { 610 | content: "\ea73"; 611 | } 612 | 613 | .lni-comments::before { 614 | content: "\ea74"; 615 | } 616 | 617 | .lni-compass::before { 618 | content: "\ea75"; 619 | } 620 | 621 | .lni-construction-hammer::before { 622 | content: "\ea76"; 623 | } 624 | 625 | .lni-construction::before { 626 | content: "\ea77"; 627 | } 628 | 629 | .lni-consulting::before { 630 | content: "\ea78"; 631 | } 632 | 633 | .lni-control-panel::before { 634 | content: "\ea79"; 635 | } 636 | 637 | .lni-cpanel::before { 638 | content: "\ea7a"; 639 | } 640 | 641 | .lni-creative-commons::before { 642 | content: "\ea7b"; 643 | } 644 | 645 | .lni-credit-cards::before { 646 | content: "\ea7c"; 647 | } 648 | 649 | .lni-crop::before { 650 | content: "\ea7d"; 651 | } 652 | 653 | .lni-cross-circle::before { 654 | content: "\ea7e"; 655 | } 656 | 657 | .lni-crown::before { 658 | content: "\ea7f"; 659 | } 660 | 661 | .lni-css3::before { 662 | content: "\ea80"; 663 | } 664 | 665 | .lni-cup::before { 666 | content: "\ea81"; 667 | } 668 | 669 | .lni-customer::before { 670 | content: "\ea82"; 671 | } 672 | 673 | .lni-cut::before { 674 | content: "\ea83"; 675 | } 676 | 677 | .lni-dashboard::before { 678 | content: "\ea84"; 679 | } 680 | 681 | .lni-database::before { 682 | content: "\ea85"; 683 | } 684 | 685 | .lni-delivery::before { 686 | content: "\ea86"; 687 | } 688 | 689 | .lni-dev::before { 690 | content: "\ea87"; 691 | } 692 | 693 | .lni-diamond-alt::before { 694 | content: "\ea88"; 695 | } 696 | 697 | .lni-diamond::before { 698 | content: "\ea89"; 699 | } 700 | 701 | .lni-diners-club::before { 702 | content: "\ea8a"; 703 | } 704 | 705 | .lni-dinner::before { 706 | content: "\ea8b"; 707 | } 708 | 709 | .lni-direction-alt::before { 710 | content: "\ea8c"; 711 | } 712 | 713 | .lni-direction-ltr::before { 714 | content: "\ea8d"; 715 | } 716 | 717 | .lni-direction-rtl::before { 718 | content: "\ea8e"; 719 | } 720 | 721 | .lni-direction::before { 722 | content: "\ea8f"; 723 | } 724 | 725 | .lni-discord::before { 726 | content: "\ea90"; 727 | } 728 | 729 | .lni-discover::before { 730 | content: "\ea91"; 731 | } 732 | 733 | .lni-display-alt::before { 734 | content: "\ea92"; 735 | } 736 | 737 | .lni-display::before { 738 | content: "\ea93"; 739 | } 740 | 741 | .lni-docker::before { 742 | content: "\ea94"; 743 | } 744 | 745 | .lni-dollar::before { 746 | content: "\ea95"; 747 | } 748 | 749 | .lni-domain::before { 750 | content: "\ea96"; 751 | } 752 | 753 | .lni-download::before { 754 | content: "\ea97"; 755 | } 756 | 757 | .lni-dribbble::before { 758 | content: "\ea98"; 759 | } 760 | 761 | .lni-drop::before { 762 | content: "\ea99"; 763 | } 764 | 765 | .lni-dropbox-original::before { 766 | content: "\ea9a"; 767 | } 768 | 769 | .lni-dropbox::before { 770 | content: "\ea9b"; 771 | } 772 | 773 | .lni-drupal-original::before { 774 | content: "\ea9c"; 775 | } 776 | 777 | .lni-drupal::before { 778 | content: "\ea9d"; 779 | } 780 | 781 | .lni-dumbbell::before { 782 | content: "\ea9e"; 783 | } 784 | 785 | .lni-edge::before { 786 | content: "\ea9f"; 787 | } 788 | 789 | .lni-emoji-cool::before { 790 | content: "\eaa0"; 791 | } 792 | 793 | .lni-emoji-friendly::before { 794 | content: "\eaa1"; 795 | } 796 | 797 | .lni-emoji-happy::before { 798 | content: "\eaa2"; 799 | } 800 | 801 | .lni-emoji-sad::before { 802 | content: "\eaa3"; 803 | } 804 | 805 | .lni-emoji-smile::before { 806 | content: "\eaa4"; 807 | } 808 | 809 | .lni-emoji-speechless::before { 810 | content: "\eaa5"; 811 | } 812 | 813 | .lni-emoji-suspect::before { 814 | content: "\eaa6"; 815 | } 816 | 817 | .lni-emoji-tounge::before { 818 | content: "\eaa7"; 819 | } 820 | 821 | .lni-empty-file::before { 822 | content: "\eaa8"; 823 | } 824 | 825 | .lni-enter::before { 826 | content: "\eaa9"; 827 | } 828 | 829 | .lni-envato::before { 830 | content: "\eaaa"; 831 | } 832 | 833 | .lni-envelope::before { 834 | content: "\eaab"; 835 | } 836 | 837 | .lni-eraser::before { 838 | content: "\eaac"; 839 | } 840 | 841 | .lni-euro::before { 842 | content: "\eaad"; 843 | } 844 | 845 | .lni-exit-down::before { 846 | content: "\eaae"; 847 | } 848 | 849 | .lni-exit-up::before { 850 | content: "\eaaf"; 851 | } 852 | 853 | .lni-exit::before { 854 | content: "\eab0"; 855 | } 856 | 857 | .lni-eye::before { 858 | content: "\eab1"; 859 | } 860 | 861 | .lni-facebook-filled::before { 862 | content: "\eab2"; 863 | } 864 | 865 | .lni-facebook-messenger::before { 866 | content: "\eab3"; 867 | } 868 | 869 | .lni-facebook-original::before { 870 | content: "\eab4"; 871 | } 872 | 873 | .lni-facebook-oval::before { 874 | content: "\eab5"; 875 | } 876 | 877 | .lni-facebook::before { 878 | content: "\eab6"; 879 | } 880 | 881 | .lni-figma::before { 882 | content: "\eab7"; 883 | } 884 | 885 | .lni-files::before { 886 | content: "\eab8"; 887 | } 888 | 889 | .lni-firefox-original::before { 890 | content: "\eab9"; 891 | } 892 | 893 | .lni-firefox::before { 894 | content: "\eaba"; 895 | } 896 | 897 | .lni-fireworks::before { 898 | content: "\eabb"; 899 | } 900 | 901 | .lni-first-aid::before { 902 | content: "\eabc"; 903 | } 904 | 905 | .lni-flag-alt::before { 906 | content: "\eabd"; 907 | } 908 | 909 | .lni-flag::before { 910 | content: "\eabe"; 911 | } 912 | 913 | .lni-flags::before { 914 | content: "\eabf"; 915 | } 916 | 917 | .lni-flickr::before { 918 | content: "\eac0"; 919 | } 920 | 921 | .lni-basketball::before { 922 | content: "\eac1"; 923 | } 924 | 925 | .lni-behance::before { 926 | content: "\eac2"; 927 | } 928 | 929 | .lni-forward::before { 930 | content: "\eac3"; 931 | } 932 | 933 | .lni-frame-expand::before { 934 | content: "\eac4"; 935 | } 936 | 937 | .lni-flower::before { 938 | content: "\eac5"; 939 | } 940 | 941 | .lni-full-screen::before { 942 | content: "\eac6"; 943 | } 944 | 945 | .lni-funnel::before { 946 | content: "\eac7"; 947 | } 948 | 949 | .lni-gallery::before { 950 | content: "\eac8"; 951 | } 952 | 953 | .lni-game::before { 954 | content: "\eac9"; 955 | } 956 | 957 | .lni-gift::before { 958 | content: "\eaca"; 959 | } 960 | 961 | .lni-git::before { 962 | content: "\eacb"; 963 | } 964 | 965 | .lni-github-original::before { 966 | content: "\eacc"; 967 | } 968 | 969 | .lni-github::before { 970 | content: "\eacd"; 971 | } 972 | 973 | .lni-goodreads::before { 974 | content: "\eace"; 975 | } 976 | 977 | .lni-google-drive::before { 978 | content: "\eacf"; 979 | } 980 | 981 | .lni-google-pay::before { 982 | content: "\ead0"; 983 | } 984 | 985 | .lni-fresh-juice::before { 986 | content: "\ead1"; 987 | } 988 | 989 | .lni-folder::before { 990 | content: "\ead2"; 991 | } 992 | 993 | .lni-bi-cycle::before { 994 | content: "\ead3"; 995 | } 996 | 997 | .lni-graph::before { 998 | content: "\ead4"; 999 | } 1000 | 1001 | .lni-grid-alt::before { 1002 | content: "\ead5"; 1003 | } 1004 | 1005 | .lni-grid::before { 1006 | content: "\ead6"; 1007 | } 1008 | 1009 | .lni-google-wallet::before { 1010 | content: "\ead7"; 1011 | } 1012 | 1013 | .lni-grow::before { 1014 | content: "\ead8"; 1015 | } 1016 | 1017 | .lni-hammer::before { 1018 | content: "\ead9"; 1019 | } 1020 | 1021 | .lni-hand::before { 1022 | content: "\eada"; 1023 | } 1024 | 1025 | .lni-handshake::before { 1026 | content: "\eadb"; 1027 | } 1028 | 1029 | .lni-harddrive::before { 1030 | content: "\eadc"; 1031 | } 1032 | 1033 | .lni-headphone-alt::before { 1034 | content: "\eadd"; 1035 | } 1036 | 1037 | .lni-headphone::before { 1038 | content: "\eade"; 1039 | } 1040 | 1041 | .lni-heart-filled::before { 1042 | content: "\eadf"; 1043 | } 1044 | 1045 | .lni-heart-monitor::before { 1046 | content: "\eae0"; 1047 | } 1048 | 1049 | .lni-heart::before { 1050 | content: "\eae1"; 1051 | } 1052 | 1053 | .lni-helicopter::before { 1054 | content: "\eae2"; 1055 | } 1056 | 1057 | .lni-helmet::before { 1058 | content: "\eae3"; 1059 | } 1060 | 1061 | .lni-help::before { 1062 | content: "\eae4"; 1063 | } 1064 | 1065 | .lni-highlight-alt::before { 1066 | content: "\eae5"; 1067 | } 1068 | 1069 | .lni-highlight::before { 1070 | content: "\eae6"; 1071 | } 1072 | 1073 | .lni-home::before { 1074 | content: "\eae7"; 1075 | } 1076 | 1077 | .lni-hospital::before { 1078 | content: "\eae8"; 1079 | } 1080 | 1081 | .lni-hourglass::before { 1082 | content: "\eae9"; 1083 | } 1084 | 1085 | .lni-html5::before { 1086 | content: "\eaea"; 1087 | } 1088 | 1089 | .lni-image::before { 1090 | content: "\eaeb"; 1091 | } 1092 | 1093 | .lni-inbox::before { 1094 | content: "\eaec"; 1095 | } 1096 | 1097 | .lni-indent-decrease::before { 1098 | content: "\eaed"; 1099 | } 1100 | 1101 | .lni-indent-increase::before { 1102 | content: "\eaee"; 1103 | } 1104 | 1105 | .lni-infinite::before { 1106 | content: "\eaef"; 1107 | } 1108 | 1109 | .lni-information::before { 1110 | content: "\eaf0"; 1111 | } 1112 | 1113 | .lni-instagram-filled::before { 1114 | content: "\eaf1"; 1115 | } 1116 | 1117 | .lni-instagram-original::before { 1118 | content: "\eaf2"; 1119 | } 1120 | 1121 | .lni-instagram::before { 1122 | content: "\eaf3"; 1123 | } 1124 | 1125 | .lni-invention::before { 1126 | content: "\eaf4"; 1127 | } 1128 | 1129 | .lni-graduation::before { 1130 | content: "\eaf5"; 1131 | } 1132 | 1133 | .lni-invest-monitor::before { 1134 | content: "\eaf6"; 1135 | } 1136 | 1137 | .lni-island::before { 1138 | content: "\eaf7"; 1139 | } 1140 | 1141 | .lni-italic::before { 1142 | content: "\eaf8"; 1143 | } 1144 | 1145 | .lni-java::before { 1146 | content: "\eaf9"; 1147 | } 1148 | 1149 | .lni-javascript::before { 1150 | content: "\eafa"; 1151 | } 1152 | 1153 | .lni-jcb::before { 1154 | content: "\eafb"; 1155 | } 1156 | 1157 | .lni-joomla-original::before { 1158 | content: "\eafc"; 1159 | } 1160 | 1161 | .lni-joomla::before { 1162 | content: "\eafd"; 1163 | } 1164 | 1165 | .lni-jsfiddle::before { 1166 | content: "\eafe"; 1167 | } 1168 | 1169 | .lni-juice::before { 1170 | content: "\eaff"; 1171 | } 1172 | 1173 | .lni-key::before { 1174 | content: "\eb00"; 1175 | } 1176 | 1177 | .lni-keyboard::before { 1178 | content: "\eb01"; 1179 | } 1180 | 1181 | .lni-keyword-research::before { 1182 | content: "\eb02"; 1183 | } 1184 | 1185 | .lni-hacker-news::before { 1186 | content: "\eb03"; 1187 | } 1188 | 1189 | .lni-google::before { 1190 | content: "\eb04"; 1191 | } 1192 | 1193 | .lni-laravel::before { 1194 | content: "\eb05"; 1195 | } 1196 | 1197 | .lni-layers::before { 1198 | content: "\eb06"; 1199 | } 1200 | 1201 | .lni-layout::before { 1202 | content: "\eb07"; 1203 | } 1204 | 1205 | .lni-leaf::before { 1206 | content: "\eb08"; 1207 | } 1208 | 1209 | .lni-library::before { 1210 | content: "\eb09"; 1211 | } 1212 | 1213 | .lni-licencse::before { 1214 | content: "\eb0a"; 1215 | } 1216 | 1217 | .lni-life-ring::before { 1218 | content: "\eb0b"; 1219 | } 1220 | 1221 | .lni-line-dashed::before { 1222 | content: "\eb0c"; 1223 | } 1224 | 1225 | .lni-line-dotted::before { 1226 | content: "\eb0d"; 1227 | } 1228 | 1229 | .lni-line-double::before { 1230 | content: "\eb0e"; 1231 | } 1232 | 1233 | .lni-line-spacing::before { 1234 | content: "\eb0f"; 1235 | } 1236 | 1237 | .lni-line::before { 1238 | content: "\eb10"; 1239 | } 1240 | 1241 | .lni-lineicons-alt::before { 1242 | content: "\eb11"; 1243 | } 1244 | 1245 | .lni-lineicons::before { 1246 | content: "\eb12"; 1247 | } 1248 | 1249 | .lni-link::before { 1250 | content: "\eb13"; 1251 | } 1252 | 1253 | .lni-linkedin-original::before { 1254 | content: "\eb14"; 1255 | } 1256 | 1257 | .lni-linkedin::before { 1258 | content: "\eb15"; 1259 | } 1260 | 1261 | .lni-list::before { 1262 | content: "\eb16"; 1263 | } 1264 | 1265 | .lni-lock-alt::before { 1266 | content: "\eb17"; 1267 | } 1268 | 1269 | .lni-lock::before { 1270 | content: "\eb18"; 1271 | } 1272 | 1273 | .lni-magnet::before { 1274 | content: "\eb19"; 1275 | } 1276 | 1277 | .lni-magnifier::before { 1278 | content: "\eb1a"; 1279 | } 1280 | 1281 | .lni-mailchimp::before { 1282 | content: "\eb1b"; 1283 | } 1284 | 1285 | .lni-map-marker::before { 1286 | content: "\eb1c"; 1287 | } 1288 | 1289 | .lni-map::before { 1290 | content: "\eb1d"; 1291 | } 1292 | 1293 | .lni-mashroom::before { 1294 | content: "\eb1e"; 1295 | } 1296 | 1297 | .lni-mastercard::before { 1298 | content: "\eb1f"; 1299 | } 1300 | 1301 | .lni-medall-alt::before { 1302 | content: "\eb20"; 1303 | } 1304 | 1305 | .lni-medall::before { 1306 | content: "\eb21"; 1307 | } 1308 | 1309 | .lni-medium::before { 1310 | content: "\eb22"; 1311 | } 1312 | 1313 | .lni-laptop::before { 1314 | content: "\eb23"; 1315 | } 1316 | 1317 | .lni-investment::before { 1318 | content: "\eb24"; 1319 | } 1320 | 1321 | .lni-laptop-phone::before { 1322 | content: "\eb25"; 1323 | } 1324 | 1325 | .lni-megento::before { 1326 | content: "\eb26"; 1327 | } 1328 | 1329 | .lni-mic::before { 1330 | content: "\eb27"; 1331 | } 1332 | 1333 | .lni-microphone::before { 1334 | content: "\eb28"; 1335 | } 1336 | 1337 | .lni-menu::before { 1338 | content: "\eb29"; 1339 | } 1340 | 1341 | .lni-microscope::before { 1342 | content: "\eb2a"; 1343 | } 1344 | 1345 | .lni-money-location::before { 1346 | content: "\eb2b"; 1347 | } 1348 | 1349 | .lni-minus::before { 1350 | content: "\eb2c"; 1351 | } 1352 | 1353 | .lni-mobile::before { 1354 | content: "\eb2d"; 1355 | } 1356 | 1357 | .lni-more-alt::before { 1358 | content: "\eb2e"; 1359 | } 1360 | 1361 | .lni-mouse::before { 1362 | content: "\eb2f"; 1363 | } 1364 | 1365 | .lni-move::before { 1366 | content: "\eb30"; 1367 | } 1368 | 1369 | .lni-music::before { 1370 | content: "\eb31"; 1371 | } 1372 | 1373 | .lni-network::before { 1374 | content: "\eb32"; 1375 | } 1376 | 1377 | .lni-night::before { 1378 | content: "\eb33"; 1379 | } 1380 | 1381 | .lni-nodejs-alt::before { 1382 | content: "\eb34"; 1383 | } 1384 | 1385 | .lni-nodejs::before { 1386 | content: "\eb35"; 1387 | } 1388 | 1389 | .lni-notepad::before { 1390 | content: "\eb36"; 1391 | } 1392 | 1393 | .lni-npm::before { 1394 | content: "\eb37"; 1395 | } 1396 | 1397 | .lni-offer::before { 1398 | content: "\eb38"; 1399 | } 1400 | 1401 | .lni-opera::before { 1402 | content: "\eb39"; 1403 | } 1404 | 1405 | .lni-package::before { 1406 | content: "\eb3a"; 1407 | } 1408 | 1409 | .lni-page-break::before { 1410 | content: "\eb3b"; 1411 | } 1412 | 1413 | .lni-pagination::before { 1414 | content: "\eb3c"; 1415 | } 1416 | 1417 | .lni-paint-bucket::before { 1418 | content: "\eb3d"; 1419 | } 1420 | 1421 | .lni-paint-roller::before { 1422 | content: "\eb3e"; 1423 | } 1424 | 1425 | .lni-pallet::before { 1426 | content: "\eb3f"; 1427 | } 1428 | 1429 | .lni-paperclip::before { 1430 | content: "\eb40"; 1431 | } 1432 | 1433 | .lni-more::before { 1434 | content: "\eb41"; 1435 | } 1436 | 1437 | .lni-pause::before { 1438 | content: "\eb42"; 1439 | } 1440 | 1441 | .lni-paypal-original::before { 1442 | content: "\eb43"; 1443 | } 1444 | 1445 | .lni-microsoft::before { 1446 | content: "\eb44"; 1447 | } 1448 | 1449 | .lni-money-protection::before { 1450 | content: "\eb45"; 1451 | } 1452 | 1453 | .lni-pencil::before { 1454 | content: "\eb46"; 1455 | } 1456 | 1457 | .lni-paypal::before { 1458 | content: "\eb47"; 1459 | } 1460 | 1461 | .lni-pencil-alt::before { 1462 | content: "\eb48"; 1463 | } 1464 | 1465 | .lni-patreon::before { 1466 | content: "\eb49"; 1467 | } 1468 | 1469 | .lni-phone-set::before { 1470 | content: "\eb4a"; 1471 | } 1472 | 1473 | .lni-phone::before { 1474 | content: "\eb4b"; 1475 | } 1476 | 1477 | .lni-pin::before { 1478 | content: "\eb4c"; 1479 | } 1480 | 1481 | .lni-pinterest::before { 1482 | content: "\eb4d"; 1483 | } 1484 | 1485 | .lni-pie-chart::before { 1486 | content: "\eb4e"; 1487 | } 1488 | 1489 | .lni-pilcrow::before { 1490 | content: "\eb4f"; 1491 | } 1492 | 1493 | .lni-plane::before { 1494 | content: "\eb50"; 1495 | } 1496 | 1497 | .lni-play::before { 1498 | content: "\eb51"; 1499 | } 1500 | 1501 | .lni-plug::before { 1502 | content: "\eb52"; 1503 | } 1504 | 1505 | .lni-plus::before { 1506 | content: "\eb53"; 1507 | } 1508 | 1509 | .lni-pointer-down::before { 1510 | content: "\eb54"; 1511 | } 1512 | 1513 | .lni-pointer-left::before { 1514 | content: "\eb55"; 1515 | } 1516 | 1517 | .lni-pointer-right::before { 1518 | content: "\eb56"; 1519 | } 1520 | 1521 | .lni-pointer-up::before { 1522 | content: "\eb57"; 1523 | } 1524 | 1525 | .lni-play-store::before { 1526 | content: "\eb58"; 1527 | } 1528 | 1529 | .lni-pizza::before { 1530 | content: "\eb59"; 1531 | } 1532 | 1533 | .lni-postcard::before { 1534 | content: "\eb5a"; 1535 | } 1536 | 1537 | .lni-pound::before { 1538 | content: "\eb5b"; 1539 | } 1540 | 1541 | .lni-power-switch::before { 1542 | content: "\eb5c"; 1543 | } 1544 | 1545 | .lni-printer::before { 1546 | content: "\eb5d"; 1547 | } 1548 | 1549 | .lni-producthunt::before { 1550 | content: "\eb5e"; 1551 | } 1552 | 1553 | .lni-protection::before { 1554 | content: "\eb5f"; 1555 | } 1556 | 1557 | .lni-pulse::before { 1558 | content: "\eb60"; 1559 | } 1560 | 1561 | .lni-pyramids::before { 1562 | content: "\eb61"; 1563 | } 1564 | 1565 | .lni-python::before { 1566 | content: "\eb62"; 1567 | } 1568 | 1569 | .lni-pointer::before { 1570 | content: "\eb63"; 1571 | } 1572 | 1573 | .lni-popup::before { 1574 | content: "\eb64"; 1575 | } 1576 | 1577 | .lni-quotation::before { 1578 | content: "\eb65"; 1579 | } 1580 | 1581 | .lni-radio-button::before { 1582 | content: "\eb66"; 1583 | } 1584 | 1585 | .lni-rain::before { 1586 | content: "\eb67"; 1587 | } 1588 | 1589 | .lni-quora::before { 1590 | content: "\eb68"; 1591 | } 1592 | 1593 | .lni-react::before { 1594 | content: "\eb69"; 1595 | } 1596 | 1597 | .lni-question-circle::before { 1598 | content: "\eb6a"; 1599 | } 1600 | 1601 | .lni-php::before { 1602 | content: "\eb6b"; 1603 | } 1604 | 1605 | .lni-reddit::before { 1606 | content: "\eb6c"; 1607 | } 1608 | 1609 | .lni-reload::before { 1610 | content: "\eb6d"; 1611 | } 1612 | 1613 | .lni-restaurant::before { 1614 | content: "\eb6e"; 1615 | } 1616 | 1617 | .lni-road::before { 1618 | content: "\eb6f"; 1619 | } 1620 | 1621 | .lni-rocket::before { 1622 | content: "\eb70"; 1623 | } 1624 | 1625 | .lni-rss-feed::before { 1626 | content: "\eb71"; 1627 | } 1628 | 1629 | .lni-ruler-alt::before { 1630 | content: "\eb72"; 1631 | } 1632 | 1633 | .lni-ruler-pencil::before { 1634 | content: "\eb73"; 1635 | } 1636 | 1637 | .lni-ruler::before { 1638 | content: "\eb74"; 1639 | } 1640 | 1641 | .lni-rupee::before { 1642 | content: "\eb75"; 1643 | } 1644 | 1645 | .lni-save::before { 1646 | content: "\eb76"; 1647 | } 1648 | 1649 | .lni-school-bench-alt::before { 1650 | content: "\eb77"; 1651 | } 1652 | 1653 | .lni-school-bench::before { 1654 | content: "\eb78"; 1655 | } 1656 | 1657 | .lni-scooter::before { 1658 | content: "\eb79"; 1659 | } 1660 | 1661 | .lni-scroll-down::before { 1662 | content: "\eb7a"; 1663 | } 1664 | 1665 | .lni-search-alt::before { 1666 | content: "\eb7b"; 1667 | } 1668 | 1669 | .lni-search::before { 1670 | content: "\eb7c"; 1671 | } 1672 | 1673 | .lni-select::before { 1674 | content: "\eb7d"; 1675 | } 1676 | 1677 | .lni-seo::before { 1678 | content: "\eb7e"; 1679 | } 1680 | 1681 | .lni-service::before { 1682 | content: "\eb7f"; 1683 | } 1684 | 1685 | .lni-share-alt::before { 1686 | content: "\eb80"; 1687 | } 1688 | 1689 | .lni-share::before { 1690 | content: "\eb81"; 1691 | } 1692 | 1693 | .lni-shield::before { 1694 | content: "\eb82"; 1695 | } 1696 | 1697 | .lni-shift-left::before { 1698 | content: "\eb83"; 1699 | } 1700 | 1701 | .lni-shift-right::before { 1702 | content: "\eb84"; 1703 | } 1704 | 1705 | .lni-ship::before { 1706 | content: "\eb85"; 1707 | } 1708 | 1709 | .lni-shopify::before { 1710 | content: "\eb86"; 1711 | } 1712 | 1713 | .lni-shopping-basket::before { 1714 | content: "\eb87"; 1715 | } 1716 | 1717 | .lni-shortcode::before { 1718 | content: "\eb88"; 1719 | } 1720 | 1721 | .lni-shovel::before { 1722 | content: "\eb89"; 1723 | } 1724 | 1725 | .lni-shuffle::before { 1726 | content: "\eb8a"; 1727 | } 1728 | 1729 | .lni-signal::before { 1730 | content: "\eb8b"; 1731 | } 1732 | 1733 | .lni-sketch::before { 1734 | content: "\eb8c"; 1735 | } 1736 | 1737 | .lni-skipping-rope::before { 1738 | content: "\eb8d"; 1739 | } 1740 | 1741 | .lni-skype::before { 1742 | content: "\eb8e"; 1743 | } 1744 | 1745 | .lni-slack::before { 1746 | content: "\eb8f"; 1747 | } 1748 | 1749 | .lni-slice::before { 1750 | content: "\eb90"; 1751 | } 1752 | 1753 | .lni-slideshare::before { 1754 | content: "\eb91"; 1755 | } 1756 | 1757 | .lni-slim::before { 1758 | content: "\eb92"; 1759 | } 1760 | 1761 | .lni-reply::before { 1762 | content: "\eb93"; 1763 | } 1764 | 1765 | .lni-sort-alpha-asc::before { 1766 | content: "\eb94"; 1767 | } 1768 | 1769 | .lni-remove-file::before { 1770 | content: "\eb95"; 1771 | } 1772 | 1773 | .lni-sort-amount-dsc::before { 1774 | content: "\eb96"; 1775 | } 1776 | 1777 | .lni-sort-amount-asc::before { 1778 | content: "\eb97"; 1779 | } 1780 | 1781 | .lni-soundcloud::before { 1782 | content: "\eb98"; 1783 | } 1784 | 1785 | .lni-souncloud-original::before { 1786 | content: "\eb99"; 1787 | } 1788 | 1789 | .lni-spiner-solid::before { 1790 | content: "\eb9a"; 1791 | } 1792 | 1793 | .lni-revenue::before { 1794 | content: "\eb9b"; 1795 | } 1796 | 1797 | .lni-spinner::before { 1798 | content: "\eb9c"; 1799 | } 1800 | 1801 | .lni-spellcheck::before { 1802 | content: "\eb9d"; 1803 | } 1804 | 1805 | .lni-spotify::before { 1806 | content: "\eb9e"; 1807 | } 1808 | 1809 | .lni-spray::before { 1810 | content: "\eb9f"; 1811 | } 1812 | 1813 | .lni-sprout::before { 1814 | content: "\eba0"; 1815 | } 1816 | 1817 | .lni-snapchat::before { 1818 | content: "\eba1"; 1819 | } 1820 | 1821 | .lni-stamp::before { 1822 | content: "\eba2"; 1823 | } 1824 | 1825 | .lni-star-empty::before { 1826 | content: "\eba3"; 1827 | } 1828 | 1829 | .lni-star-filled::before { 1830 | content: "\eba4"; 1831 | } 1832 | 1833 | .lni-star-half::before { 1834 | content: "\eba5"; 1835 | } 1836 | 1837 | .lni-star::before { 1838 | content: "\eba6"; 1839 | } 1840 | 1841 | .lni-stats-down::before { 1842 | content: "\eba7"; 1843 | } 1844 | 1845 | .lni-spinner-arrow::before { 1846 | content: "\eba8"; 1847 | } 1848 | 1849 | .lni-steam::before { 1850 | content: "\eba9"; 1851 | } 1852 | 1853 | .lni-stackoverflow::before { 1854 | content: "\ebaa"; 1855 | } 1856 | 1857 | .lni-stop::before { 1858 | content: "\ebab"; 1859 | } 1860 | 1861 | .lni-strikethrough::before { 1862 | content: "\ebac"; 1863 | } 1864 | 1865 | .lni-sthethoscope::before { 1866 | content: "\ebad"; 1867 | } 1868 | 1869 | .lni-stumbleupon::before { 1870 | content: "\ebae"; 1871 | } 1872 | 1873 | .lni-sun::before { 1874 | content: "\ebaf"; 1875 | } 1876 | 1877 | .lni-support::before { 1878 | content: "\ebb0"; 1879 | } 1880 | 1881 | .lni-surf-board::before { 1882 | content: "\ebb1"; 1883 | } 1884 | 1885 | .lni-swift::before { 1886 | content: "\ebb2"; 1887 | } 1888 | 1889 | .lni-syringe::before { 1890 | content: "\ebb3"; 1891 | } 1892 | 1893 | .lni-tab::before { 1894 | content: "\ebb4"; 1895 | } 1896 | 1897 | .lni-tag::before { 1898 | content: "\ebb5"; 1899 | } 1900 | 1901 | .lni-target-customer::before { 1902 | content: "\ebb6"; 1903 | } 1904 | 1905 | .lni-target-revenue::before { 1906 | content: "\ebb7"; 1907 | } 1908 | 1909 | .lni-target::before { 1910 | content: "\ebb8"; 1911 | } 1912 | 1913 | .lni-taxi::before { 1914 | content: "\ebb9"; 1915 | } 1916 | 1917 | .lni-stats-up::before { 1918 | content: "\ebba"; 1919 | } 1920 | 1921 | .lni-telegram-original::before { 1922 | content: "\ebbb"; 1923 | } 1924 | 1925 | .lni-telegram::before { 1926 | content: "\ebbc"; 1927 | } 1928 | 1929 | .lni-text-align-center::before { 1930 | content: "\ebbd"; 1931 | } 1932 | 1933 | .lni-text-align-justify::before { 1934 | content: "\ebbe"; 1935 | } 1936 | 1937 | .lni-text-align-left::before { 1938 | content: "\ebbf"; 1939 | } 1940 | 1941 | .lni-text-format-remove::before { 1942 | content: "\ebc0"; 1943 | } 1944 | 1945 | .lni-text-align-right::before { 1946 | content: "\ebc1"; 1947 | } 1948 | 1949 | .lni-text-format::before { 1950 | content: "\ebc2"; 1951 | } 1952 | 1953 | .lni-thought::before { 1954 | content: "\ebc3"; 1955 | } 1956 | 1957 | .lni-thumbs-down::before { 1958 | content: "\ebc4"; 1959 | } 1960 | 1961 | .lni-thumbs-up::before { 1962 | content: "\ebc5"; 1963 | } 1964 | 1965 | .lni-thunder-alt::before { 1966 | content: "\ebc6"; 1967 | } 1968 | 1969 | .lni-thunder::before { 1970 | content: "\ebc7"; 1971 | } 1972 | 1973 | .lni-ticket-alt::before { 1974 | content: "\ebc8"; 1975 | } 1976 | 1977 | .lni-ticket::before { 1978 | content: "\ebc9"; 1979 | } 1980 | 1981 | .lni-timer::before { 1982 | content: "\ebca"; 1983 | } 1984 | 1985 | .lni-train-alt::before { 1986 | content: "\ebcb"; 1987 | } 1988 | 1989 | .lni-train::before { 1990 | content: "\ebcc"; 1991 | } 1992 | 1993 | .lni-trash::before { 1994 | content: "\ebcd"; 1995 | } 1996 | 1997 | .lni-travel::before { 1998 | content: "\ebce"; 1999 | } 2000 | 2001 | .lni-tree::before { 2002 | content: "\ebcf"; 2003 | } 2004 | 2005 | .lni-trees::before { 2006 | content: "\ebd0"; 2007 | } 2008 | 2009 | .lni-trello::before { 2010 | content: "\ebd1"; 2011 | } 2012 | 2013 | .lni-trowel::before { 2014 | content: "\ebd2"; 2015 | } 2016 | 2017 | .lni-tshirt::before { 2018 | content: "\ebd3"; 2019 | } 2020 | 2021 | .lni-tumblr::before { 2022 | content: "\ebd4"; 2023 | } 2024 | 2025 | .lni-twitch::before { 2026 | content: "\ebd5"; 2027 | } 2028 | 2029 | .lni-twitter-filled::before { 2030 | content: "\ebd6"; 2031 | } 2032 | 2033 | .lni-twitter-original::before { 2034 | content: "\ebd7"; 2035 | } 2036 | 2037 | .lni-twitter::before { 2038 | content: "\ebd8"; 2039 | } 2040 | 2041 | .lni-ubuntu::before { 2042 | content: "\ebd9"; 2043 | } 2044 | 2045 | .lni-underline::before { 2046 | content: "\ebda"; 2047 | } 2048 | 2049 | .lni-unlink::before { 2050 | content: "\ebdb"; 2051 | } 2052 | 2053 | .lni-unlock::before { 2054 | content: "\ebdc"; 2055 | } 2056 | 2057 | .lni-upload::before { 2058 | content: "\ebdd"; 2059 | } 2060 | 2061 | .lni-user::before { 2062 | content: "\ebde"; 2063 | } 2064 | 2065 | .lni-users::before { 2066 | content: "\ebdf"; 2067 | } 2068 | 2069 | .lni-ux::before { 2070 | content: "\ebe0"; 2071 | } 2072 | 2073 | .lni-vector::before { 2074 | content: "\ebe1"; 2075 | } 2076 | 2077 | .lni-video::before { 2078 | content: "\ebe2"; 2079 | } 2080 | 2081 | .lni-vimeo::before { 2082 | content: "\ebe3"; 2083 | } 2084 | 2085 | .lni-visa::before { 2086 | content: "\ebe4"; 2087 | } 2088 | 2089 | .lni-vk::before { 2090 | content: "\ebe5"; 2091 | } 2092 | 2093 | .lni-volume-high::before { 2094 | content: "\ebe6"; 2095 | } 2096 | 2097 | .lni-volume-low::before { 2098 | content: "\ebe7"; 2099 | } 2100 | 2101 | .lni-volume-medium::before { 2102 | content: "\ebe8"; 2103 | } 2104 | 2105 | .lni-volume-mute::before { 2106 | content: "\ebe9"; 2107 | } 2108 | 2109 | .lni-volume::before { 2110 | content: "\ebea"; 2111 | } 2112 | 2113 | .lni-wallet::before { 2114 | content: "\ebeb"; 2115 | } 2116 | 2117 | .lni-warning::before { 2118 | content: "\ebec"; 2119 | } 2120 | 2121 | .lni-website-alt::before { 2122 | content: "\ebed"; 2123 | } 2124 | 2125 | .lni-website::before { 2126 | content: "\ebee"; 2127 | } 2128 | 2129 | .lni-wechat::before { 2130 | content: "\ebef"; 2131 | } 2132 | 2133 | .lni-weight::before { 2134 | content: "\ebf0"; 2135 | } 2136 | 2137 | .lni-whatsapp::before { 2138 | content: "\ebf1"; 2139 | } 2140 | 2141 | .lni-wheelbarrow::before { 2142 | content: "\ebf2"; 2143 | } 2144 | 2145 | .lni-wheelchair::before { 2146 | content: "\ebf3"; 2147 | } 2148 | 2149 | .lni-windows::before { 2150 | content: "\ebf4"; 2151 | } 2152 | 2153 | .lni-wordpress-filled::before { 2154 | content: "\ebf5"; 2155 | } 2156 | 2157 | .lni-wordpress::before { 2158 | content: "\ebf6"; 2159 | } 2160 | 2161 | .lni-world-alt::before { 2162 | content: "\ebf7"; 2163 | } 2164 | 2165 | .lni-world::before { 2166 | content: "\ebf8"; 2167 | } 2168 | 2169 | .lni-write::before { 2170 | content: "\ebf9"; 2171 | } 2172 | 2173 | .lni-yahoo::before { 2174 | content: "\ebfa"; 2175 | } 2176 | 2177 | .lni-ycombinator::before { 2178 | content: "\ebfb"; 2179 | } 2180 | 2181 | .lni-yen::before { 2182 | content: "\ebfc"; 2183 | } 2184 | 2185 | .lni-youtube::before { 2186 | content: "\ebfd"; 2187 | } 2188 | 2189 | .lni-zip::before { 2190 | content: "\ebfe"; 2191 | } 2192 | 2193 | .lni-zoom-in::before { 2194 | content: "\ebff"; 2195 | } 2196 | 2197 | .lni-zoom-out::before { 2198 | content: "\ec00"; 2199 | } 2200 | 2201 | .lni-teabag::before { 2202 | content: "\ec01"; 2203 | } 2204 | 2205 | .lni-stripe::before { 2206 | content: "\ec02"; 2207 | } 2208 | 2209 | .lni-spotify-original::before { 2210 | content: "\ec03"; 2211 | } 2212 | 2213 | -------------------------------------------------------------------------------- /src/assets/css/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | .animated { 4 | -webkit-animation-duration: 1s; 5 | animation-duration: 1s; 6 | -webkit-animation-fill-mode: both; 7 | animation-fill-mode: both; 8 | } 9 | 10 | .animated.hinge { 11 | -webkit-animation-duration: 2s; 12 | animation-duration: 2s; 13 | } 14 | 15 | @-webkit-keyframes bounce { 16 | 0%, 20%, 50%, 80%, 100% { 17 | -webkit-transform: translateY(0); 18 | transform: translateY(0); 19 | } 20 | 21 | 40% { 22 | -webkit-transform: translateY(-30px); 23 | transform: translateY(-30px); 24 | } 25 | 26 | 60% { 27 | -webkit-transform: translateY(-15px); 28 | transform: translateY(-15px); 29 | } 30 | } 31 | 32 | @keyframes bounce { 33 | 0%, 20%, 50%, 80%, 100% { 34 | -webkit-transform: translateY(0); 35 | -ms-transform: translateY(0); 36 | transform: translateY(0); 37 | } 38 | 39 | 40% { 40 | -webkit-transform: translateY(-30px); 41 | -ms-transform: translateY(-30px); 42 | transform: translateY(-30px); 43 | } 44 | 45 | 60% { 46 | -webkit-transform: translateY(-15px); 47 | -ms-transform: translateY(-15px); 48 | transform: translateY(-15px); 49 | } 50 | } 51 | 52 | .bounce { 53 | -webkit-animation-name: bounce; 54 | animation-name: bounce; 55 | } 56 | 57 | @-webkit-keyframes flash { 58 | 0%, 50%, 100% { 59 | opacity: 1; 60 | } 61 | 62 | 25%, 75% { 63 | opacity: 0; 64 | } 65 | } 66 | 67 | @keyframes flash { 68 | 0%, 50%, 100% { 69 | opacity: 1; 70 | } 71 | 72 | 25%, 75% { 73 | opacity: 0; 74 | } 75 | } 76 | 77 | .flash { 78 | -webkit-animation-name: flash; 79 | animation-name: flash; 80 | } 81 | 82 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 83 | 84 | @-webkit-keyframes pulse { 85 | 0% { 86 | -webkit-transform: scale(1); 87 | transform: scale(1); 88 | } 89 | 90 | 50% { 91 | -webkit-transform: scale(1.1); 92 | transform: scale(1.1); 93 | } 94 | 95 | 100% { 96 | -webkit-transform: scale(1); 97 | transform: scale(1); 98 | } 99 | } 100 | 101 | @keyframes pulse { 102 | 0% { 103 | -webkit-transform: scale(1); 104 | -ms-transform: scale(1); 105 | transform: scale(1); 106 | } 107 | 108 | 50% { 109 | -webkit-transform: scale(1.1); 110 | -ms-transform: scale(1.1); 111 | transform: scale(1.1); 112 | } 113 | 114 | 100% { 115 | -webkit-transform: scale(1); 116 | -ms-transform: scale(1); 117 | transform: scale(1); 118 | } 119 | } 120 | 121 | .pulse { 122 | -webkit-animation-name: pulse; 123 | animation-name: pulse; 124 | } 125 | 126 | @-webkit-keyframes shake { 127 | 0%, 100% { 128 | -webkit-transform: translateX(0); 129 | transform: translateX(0); 130 | } 131 | 132 | 10%, 30%, 50%, 70%, 90% { 133 | -webkit-transform: translateX(-10px); 134 | transform: translateX(-10px); 135 | } 136 | 137 | 20%, 40%, 60%, 80% { 138 | -webkit-transform: translateX(10px); 139 | transform: translateX(10px); 140 | } 141 | } 142 | 143 | @keyframes shake { 144 | 0%, 100% { 145 | -webkit-transform: translateX(0); 146 | -ms-transform: translateX(0); 147 | transform: translateX(0); 148 | } 149 | 150 | 10%, 30%, 50%, 70%, 90% { 151 | -webkit-transform: translateX(-10px); 152 | -ms-transform: translateX(-10px); 153 | transform: translateX(-10px); 154 | } 155 | 156 | 20%, 40%, 60%, 80% { 157 | -webkit-transform: translateX(10px); 158 | -ms-transform: translateX(10px); 159 | transform: translateX(10px); 160 | } 161 | } 162 | 163 | .shake { 164 | -webkit-animation-name: shake; 165 | animation-name: shake; 166 | } 167 | 168 | @-webkit-keyframes swing { 169 | 20% { 170 | -webkit-transform: rotate(15deg); 171 | transform: rotate(15deg); 172 | } 173 | 174 | 40% { 175 | -webkit-transform: rotate(-10deg); 176 | transform: rotate(-10deg); 177 | } 178 | 179 | 60% { 180 | -webkit-transform: rotate(5deg); 181 | transform: rotate(5deg); 182 | } 183 | 184 | 80% { 185 | -webkit-transform: rotate(-5deg); 186 | transform: rotate(-5deg); 187 | } 188 | 189 | 100% { 190 | -webkit-transform: rotate(0deg); 191 | transform: rotate(0deg); 192 | } 193 | } 194 | 195 | @keyframes swing { 196 | 20% { 197 | -webkit-transform: rotate(15deg); 198 | -ms-transform: rotate(15deg); 199 | transform: rotate(15deg); 200 | } 201 | 202 | 40% { 203 | -webkit-transform: rotate(-10deg); 204 | -ms-transform: rotate(-10deg); 205 | transform: rotate(-10deg); 206 | } 207 | 208 | 60% { 209 | -webkit-transform: rotate(5deg); 210 | -ms-transform: rotate(5deg); 211 | transform: rotate(5deg); 212 | } 213 | 214 | 80% { 215 | -webkit-transform: rotate(-5deg); 216 | -ms-transform: rotate(-5deg); 217 | transform: rotate(-5deg); 218 | } 219 | 220 | 100% { 221 | -webkit-transform: rotate(0deg); 222 | -ms-transform: rotate(0deg); 223 | transform: rotate(0deg); 224 | } 225 | } 226 | 227 | .swing { 228 | -webkit-transform-origin: top center; 229 | -ms-transform-origin: top center; 230 | transform-origin: top center; 231 | -webkit-animation-name: swing; 232 | animation-name: swing; 233 | } 234 | 235 | @-webkit-keyframes tada { 236 | 0% { 237 | -webkit-transform: scale(1); 238 | transform: scale(1); 239 | } 240 | 241 | 10%, 20% { 242 | -webkit-transform: scale(0.9) rotate(-3deg); 243 | transform: scale(0.9) rotate(-3deg); 244 | } 245 | 246 | 30%, 50%, 70%, 90% { 247 | -webkit-transform: scale(1.1) rotate(3deg); 248 | transform: scale(1.1) rotate(3deg); 249 | } 250 | 251 | 40%, 60%, 80% { 252 | -webkit-transform: scale(1.1) rotate(-3deg); 253 | transform: scale(1.1) rotate(-3deg); 254 | } 255 | 256 | 100% { 257 | -webkit-transform: scale(1) rotate(0); 258 | transform: scale(1) rotate(0); 259 | } 260 | } 261 | 262 | @keyframes tada { 263 | 0% { 264 | -webkit-transform: scale(1); 265 | -ms-transform: scale(1); 266 | transform: scale(1); 267 | } 268 | 269 | 10%, 20% { 270 | -webkit-transform: scale(0.9) rotate(-3deg); 271 | -ms-transform: scale(0.9) rotate(-3deg); 272 | transform: scale(0.9) rotate(-3deg); 273 | } 274 | 275 | 30%, 50%, 70%, 90% { 276 | -webkit-transform: scale(1.1) rotate(3deg); 277 | -ms-transform: scale(1.1) rotate(3deg); 278 | transform: scale(1.1) rotate(3deg); 279 | } 280 | 281 | 40%, 60%, 80% { 282 | -webkit-transform: scale(1.1) rotate(-3deg); 283 | -ms-transform: scale(1.1) rotate(-3deg); 284 | transform: scale(1.1) rotate(-3deg); 285 | } 286 | 287 | 100% { 288 | -webkit-transform: scale(1) rotate(0); 289 | -ms-transform: scale(1) rotate(0); 290 | transform: scale(1) rotate(0); 291 | } 292 | } 293 | 294 | .tada { 295 | -webkit-animation-name: tada; 296 | animation-name: tada; 297 | } 298 | 299 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 300 | 301 | @-webkit-keyframes wobble { 302 | 0% { 303 | -webkit-transform: translateX(0%); 304 | transform: translateX(0%); 305 | } 306 | 307 | 15% { 308 | -webkit-transform: translateX(-25%) rotate(-5deg); 309 | transform: translateX(-25%) rotate(-5deg); 310 | } 311 | 312 | 30% { 313 | -webkit-transform: translateX(20%) rotate(3deg); 314 | transform: translateX(20%) rotate(3deg); 315 | } 316 | 317 | 45% { 318 | -webkit-transform: translateX(-15%) rotate(-3deg); 319 | transform: translateX(-15%) rotate(-3deg); 320 | } 321 | 322 | 60% { 323 | -webkit-transform: translateX(10%) rotate(2deg); 324 | transform: translateX(10%) rotate(2deg); 325 | } 326 | 327 | 75% { 328 | -webkit-transform: translateX(-5%) rotate(-1deg); 329 | transform: translateX(-5%) rotate(-1deg); 330 | } 331 | 332 | 100% { 333 | -webkit-transform: translateX(0%); 334 | transform: translateX(0%); 335 | } 336 | } 337 | 338 | @keyframes wobble { 339 | 0% { 340 | -webkit-transform: translateX(0%); 341 | -ms-transform: translateX(0%); 342 | transform: translateX(0%); 343 | } 344 | 345 | 15% { 346 | -webkit-transform: translateX(-25%) rotate(-5deg); 347 | -ms-transform: translateX(-25%) rotate(-5deg); 348 | transform: translateX(-25%) rotate(-5deg); 349 | } 350 | 351 | 30% { 352 | -webkit-transform: translateX(20%) rotate(3deg); 353 | -ms-transform: translateX(20%) rotate(3deg); 354 | transform: translateX(20%) rotate(3deg); 355 | } 356 | 357 | 45% { 358 | -webkit-transform: translateX(-15%) rotate(-3deg); 359 | -ms-transform: translateX(-15%) rotate(-3deg); 360 | transform: translateX(-15%) rotate(-3deg); 361 | } 362 | 363 | 60% { 364 | -webkit-transform: translateX(10%) rotate(2deg); 365 | -ms-transform: translateX(10%) rotate(2deg); 366 | transform: translateX(10%) rotate(2deg); 367 | } 368 | 369 | 75% { 370 | -webkit-transform: translateX(-5%) rotate(-1deg); 371 | -ms-transform: translateX(-5%) rotate(-1deg); 372 | transform: translateX(-5%) rotate(-1deg); 373 | } 374 | 375 | 100% { 376 | -webkit-transform: translateX(0%); 377 | -ms-transform: translateX(0%); 378 | transform: translateX(0%); 379 | } 380 | } 381 | 382 | .wobble { 383 | -webkit-animation-name: wobble; 384 | animation-name: wobble; 385 | } 386 | 387 | @-webkit-keyframes bounceIn { 388 | 0% { 389 | opacity: 0; 390 | -webkit-transform: scale(.3); 391 | transform: scale(.3); 392 | } 393 | 394 | 50% { 395 | opacity: 1; 396 | -webkit-transform: scale(1.05); 397 | transform: scale(1.05); 398 | } 399 | 400 | 70% { 401 | -webkit-transform: scale(.9); 402 | transform: scale(.9); 403 | } 404 | 405 | 100% { 406 | -webkit-transform: scale(1); 407 | transform: scale(1); 408 | } 409 | } 410 | 411 | @keyframes bounceIn { 412 | 0% { 413 | opacity: 0; 414 | -webkit-transform: scale(.3); 415 | -ms-transform: scale(.3); 416 | transform: scale(.3); 417 | } 418 | 419 | 50% { 420 | opacity: 1; 421 | -webkit-transform: scale(1.05); 422 | -ms-transform: scale(1.05); 423 | transform: scale(1.05); 424 | } 425 | 426 | 70% { 427 | -webkit-transform: scale(.9); 428 | -ms-transform: scale(.9); 429 | transform: scale(.9); 430 | } 431 | 432 | 100% { 433 | -webkit-transform: scale(1); 434 | -ms-transform: scale(1); 435 | transform: scale(1); 436 | } 437 | } 438 | 439 | .bounceIn { 440 | -webkit-animation-name: bounceIn; 441 | animation-name: bounceIn; 442 | } 443 | 444 | @-webkit-keyframes bounceInDown { 445 | 0% { 446 | opacity: 0; 447 | -webkit-transform: translateY(-2000px); 448 | transform: translateY(-2000px); 449 | } 450 | 451 | 60% { 452 | opacity: 1; 453 | -webkit-transform: translateY(30px); 454 | transform: translateY(30px); 455 | } 456 | 457 | 80% { 458 | -webkit-transform: translateY(-10px); 459 | transform: translateY(-10px); 460 | } 461 | 462 | 100% { 463 | -webkit-transform: translateY(0); 464 | transform: translateY(0); 465 | } 466 | } 467 | 468 | @keyframes bounceInDown { 469 | 0% { 470 | opacity: 0; 471 | -webkit-transform: translateY(-2000px); 472 | -ms-transform: translateY(-2000px); 473 | transform: translateY(-2000px); 474 | } 475 | 476 | 60% { 477 | opacity: 1; 478 | -webkit-transform: translateY(30px); 479 | -ms-transform: translateY(30px); 480 | transform: translateY(30px); 481 | } 482 | 483 | 80% { 484 | -webkit-transform: translateY(-10px); 485 | -ms-transform: translateY(-10px); 486 | transform: translateY(-10px); 487 | } 488 | 489 | 100% { 490 | -webkit-transform: translateY(0); 491 | -ms-transform: translateY(0); 492 | transform: translateY(0); 493 | } 494 | } 495 | 496 | .bounceInDown { 497 | -webkit-animation-name: bounceInDown; 498 | animation-name: bounceInDown; 499 | } 500 | 501 | @-webkit-keyframes bounceInLeft { 502 | 0% { 503 | opacity: 0; 504 | -webkit-transform: translateX(-2000px); 505 | transform: translateX(-2000px); 506 | } 507 | 508 | 60% { 509 | opacity: 1; 510 | -webkit-transform: translateX(30px); 511 | transform: translateX(30px); 512 | } 513 | 514 | 80% { 515 | -webkit-transform: translateX(-10px); 516 | transform: translateX(-10px); 517 | } 518 | 519 | 100% { 520 | -webkit-transform: translateX(0); 521 | transform: translateX(0); 522 | } 523 | } 524 | 525 | @keyframes bounceInLeft { 526 | 0% { 527 | opacity: 0; 528 | -webkit-transform: translateX(-2000px); 529 | -ms-transform: translateX(-2000px); 530 | transform: translateX(-2000px); 531 | } 532 | 533 | 60% { 534 | opacity: 1; 535 | -webkit-transform: translateX(30px); 536 | -ms-transform: translateX(30px); 537 | transform: translateX(30px); 538 | } 539 | 540 | 80% { 541 | -webkit-transform: translateX(-10px); 542 | -ms-transform: translateX(-10px); 543 | transform: translateX(-10px); 544 | } 545 | 546 | 100% { 547 | -webkit-transform: translateX(0); 548 | -ms-transform: translateX(0); 549 | transform: translateX(0); 550 | } 551 | } 552 | 553 | .bounceInLeft { 554 | -webkit-animation-name: bounceInLeft; 555 | animation-name: bounceInLeft; 556 | } 557 | 558 | @-webkit-keyframes bounceInRight { 559 | 0% { 560 | opacity: 0; 561 | -webkit-transform: translateX(2000px); 562 | transform: translateX(2000px); 563 | } 564 | 565 | 60% { 566 | opacity: 1; 567 | -webkit-transform: translateX(-30px); 568 | transform: translateX(-30px); 569 | } 570 | 571 | 80% { 572 | -webkit-transform: translateX(10px); 573 | transform: translateX(10px); 574 | } 575 | 576 | 100% { 577 | -webkit-transform: translateX(0); 578 | transform: translateX(0); 579 | } 580 | } 581 | 582 | @keyframes bounceInRight { 583 | 0% { 584 | opacity: 0; 585 | -webkit-transform: translateX(2000px); 586 | -ms-transform: translateX(2000px); 587 | transform: translateX(2000px); 588 | } 589 | 590 | 60% { 591 | opacity: 1; 592 | -webkit-transform: translateX(-30px); 593 | -ms-transform: translateX(-30px); 594 | transform: translateX(-30px); 595 | } 596 | 597 | 80% { 598 | -webkit-transform: translateX(10px); 599 | -ms-transform: translateX(10px); 600 | transform: translateX(10px); 601 | } 602 | 603 | 100% { 604 | -webkit-transform: translateX(0); 605 | -ms-transform: translateX(0); 606 | transform: translateX(0); 607 | } 608 | } 609 | 610 | .bounceInRight { 611 | -webkit-animation-name: bounceInRight; 612 | animation-name: bounceInRight; 613 | } 614 | 615 | @-webkit-keyframes bounceInUp { 616 | 0% { 617 | opacity: 0; 618 | -webkit-transform: translateY(2000px); 619 | transform: translateY(2000px); 620 | } 621 | 622 | 60% { 623 | opacity: 1; 624 | -webkit-transform: translateY(-30px); 625 | transform: translateY(-30px); 626 | } 627 | 628 | 80% { 629 | -webkit-transform: translateY(10px); 630 | transform: translateY(10px); 631 | } 632 | 633 | 100% { 634 | -webkit-transform: translateY(0); 635 | transform: translateY(0); 636 | } 637 | } 638 | 639 | @keyframes bounceInUp { 640 | 0% { 641 | opacity: 0; 642 | -webkit-transform: translateY(2000px); 643 | -ms-transform: translateY(2000px); 644 | transform: translateY(2000px); 645 | } 646 | 647 | 60% { 648 | opacity: 1; 649 | -webkit-transform: translateY(-30px); 650 | -ms-transform: translateY(-30px); 651 | transform: translateY(-30px); 652 | } 653 | 654 | 80% { 655 | -webkit-transform: translateY(10px); 656 | -ms-transform: translateY(10px); 657 | transform: translateY(10px); 658 | } 659 | 660 | 100% { 661 | -webkit-transform: translateY(0); 662 | -ms-transform: translateY(0); 663 | transform: translateY(0); 664 | } 665 | } 666 | 667 | .bounceInUp { 668 | -webkit-animation-name: bounceInUp; 669 | animation-name: bounceInUp; 670 | } 671 | 672 | @-webkit-keyframes bounceOut { 673 | 0% { 674 | -webkit-transform: scale(1); 675 | transform: scale(1); 676 | } 677 | 678 | 25% { 679 | -webkit-transform: scale(.95); 680 | transform: scale(.95); 681 | } 682 | 683 | 50% { 684 | opacity: 1; 685 | -webkit-transform: scale(1.1); 686 | transform: scale(1.1); 687 | } 688 | 689 | 100% { 690 | opacity: 0; 691 | -webkit-transform: scale(.3); 692 | transform: scale(.3); 693 | } 694 | } 695 | 696 | @keyframes bounceOut { 697 | 0% { 698 | -webkit-transform: scale(1); 699 | -ms-transform: scale(1); 700 | transform: scale(1); 701 | } 702 | 703 | 25% { 704 | -webkit-transform: scale(.95); 705 | -ms-transform: scale(.95); 706 | transform: scale(.95); 707 | } 708 | 709 | 50% { 710 | opacity: 1; 711 | -webkit-transform: scale(1.1); 712 | -ms-transform: scale(1.1); 713 | transform: scale(1.1); 714 | } 715 | 716 | 100% { 717 | opacity: 0; 718 | -webkit-transform: scale(.3); 719 | -ms-transform: scale(.3); 720 | transform: scale(.3); 721 | } 722 | } 723 | 724 | .bounceOut { 725 | -webkit-animation-name: bounceOut; 726 | animation-name: bounceOut; 727 | } 728 | 729 | @-webkit-keyframes bounceOutDown { 730 | 0% { 731 | -webkit-transform: translateY(0); 732 | transform: translateY(0); 733 | } 734 | 735 | 20% { 736 | opacity: 1; 737 | -webkit-transform: translateY(-20px); 738 | transform: translateY(-20px); 739 | } 740 | 741 | 100% { 742 | opacity: 0; 743 | -webkit-transform: translateY(2000px); 744 | transform: translateY(2000px); 745 | } 746 | } 747 | 748 | @keyframes bounceOutDown { 749 | 0% { 750 | -webkit-transform: translateY(0); 751 | -ms-transform: translateY(0); 752 | transform: translateY(0); 753 | } 754 | 755 | 20% { 756 | opacity: 1; 757 | -webkit-transform: translateY(-20px); 758 | -ms-transform: translateY(-20px); 759 | transform: translateY(-20px); 760 | } 761 | 762 | 100% { 763 | opacity: 0; 764 | -webkit-transform: translateY(2000px); 765 | -ms-transform: translateY(2000px); 766 | transform: translateY(2000px); 767 | } 768 | } 769 | 770 | .bounceOutDown { 771 | -webkit-animation-name: bounceOutDown; 772 | animation-name: bounceOutDown; 773 | } 774 | 775 | @-webkit-keyframes bounceOutLeft { 776 | 0% { 777 | -webkit-transform: translateX(0); 778 | transform: translateX(0); 779 | } 780 | 781 | 20% { 782 | opacity: 1; 783 | -webkit-transform: translateX(20px); 784 | transform: translateX(20px); 785 | } 786 | 787 | 100% { 788 | opacity: 0; 789 | -webkit-transform: translateX(-2000px); 790 | transform: translateX(-2000px); 791 | } 792 | } 793 | 794 | @keyframes bounceOutLeft { 795 | 0% { 796 | -webkit-transform: translateX(0); 797 | -ms-transform: translateX(0); 798 | transform: translateX(0); 799 | } 800 | 801 | 20% { 802 | opacity: 1; 803 | -webkit-transform: translateX(20px); 804 | -ms-transform: translateX(20px); 805 | transform: translateX(20px); 806 | } 807 | 808 | 100% { 809 | opacity: 0; 810 | -webkit-transform: translateX(-2000px); 811 | -ms-transform: translateX(-2000px); 812 | transform: translateX(-2000px); 813 | } 814 | } 815 | 816 | .bounceOutLeft { 817 | -webkit-animation-name: bounceOutLeft; 818 | animation-name: bounceOutLeft; 819 | } 820 | 821 | @-webkit-keyframes bounceOutRight { 822 | 0% { 823 | -webkit-transform: translateX(0); 824 | transform: translateX(0); 825 | } 826 | 827 | 20% { 828 | opacity: 1; 829 | -webkit-transform: translateX(-20px); 830 | transform: translateX(-20px); 831 | } 832 | 833 | 100% { 834 | opacity: 0; 835 | -webkit-transform: translateX(2000px); 836 | transform: translateX(2000px); 837 | } 838 | } 839 | 840 | @keyframes bounceOutRight { 841 | 0% { 842 | -webkit-transform: translateX(0); 843 | -ms-transform: translateX(0); 844 | transform: translateX(0); 845 | } 846 | 847 | 20% { 848 | opacity: 1; 849 | -webkit-transform: translateX(-20px); 850 | -ms-transform: translateX(-20px); 851 | transform: translateX(-20px); 852 | } 853 | 854 | 100% { 855 | opacity: 0; 856 | -webkit-transform: translateX(2000px); 857 | -ms-transform: translateX(2000px); 858 | transform: translateX(2000px); 859 | } 860 | } 861 | 862 | .bounceOutRight { 863 | -webkit-animation-name: bounceOutRight; 864 | animation-name: bounceOutRight; 865 | } 866 | 867 | @-webkit-keyframes bounceOutUp { 868 | 0% { 869 | -webkit-transform: translateY(0); 870 | transform: translateY(0); 871 | } 872 | 873 | 20% { 874 | opacity: 1; 875 | -webkit-transform: translateY(20px); 876 | transform: translateY(20px); 877 | } 878 | 879 | 100% { 880 | opacity: 0; 881 | -webkit-transform: translateY(-2000px); 882 | transform: translateY(-2000px); 883 | } 884 | } 885 | 886 | @keyframes bounceOutUp { 887 | 0% { 888 | -webkit-transform: translateY(0); 889 | -ms-transform: translateY(0); 890 | transform: translateY(0); 891 | } 892 | 893 | 20% { 894 | opacity: 1; 895 | -webkit-transform: translateY(20px); 896 | -ms-transform: translateY(20px); 897 | transform: translateY(20px); 898 | } 899 | 900 | 100% { 901 | opacity: 0; 902 | -webkit-transform: translateY(-2000px); 903 | -ms-transform: translateY(-2000px); 904 | transform: translateY(-2000px); 905 | } 906 | } 907 | 908 | .bounceOutUp { 909 | -webkit-animation-name: bounceOutUp; 910 | animation-name: bounceOutUp; 911 | } 912 | 913 | @-webkit-keyframes fadeIn { 914 | 0% { 915 | opacity: 0; 916 | } 917 | 918 | 100% { 919 | opacity: 1; 920 | } 921 | } 922 | 923 | @keyframes fadeIn { 924 | 0% { 925 | opacity: 0; 926 | } 927 | 928 | 100% { 929 | opacity: 1; 930 | } 931 | } 932 | 933 | .fadeIn { 934 | -webkit-animation-name: fadeIn; 935 | animation-name: fadeIn; 936 | } 937 | 938 | @-webkit-keyframes fadeInDown { 939 | 0% { 940 | opacity: 0; 941 | -webkit-transform: translateY(-20px); 942 | transform: translateY(-20px); 943 | } 944 | 945 | 100% { 946 | opacity: 1; 947 | -webkit-transform: translateY(0); 948 | transform: translateY(0); 949 | } 950 | } 951 | 952 | @keyframes fadeInDown { 953 | 0% { 954 | opacity: 0; 955 | -webkit-transform: translateY(-20px); 956 | -ms-transform: translateY(-20px); 957 | transform: translateY(-20px); 958 | } 959 | 960 | 100% { 961 | opacity: 1; 962 | -webkit-transform: translateY(0); 963 | -ms-transform: translateY(0); 964 | transform: translateY(0); 965 | } 966 | } 967 | 968 | .fadeInDown { 969 | -webkit-animation-name: fadeInDown; 970 | animation-name: fadeInDown; 971 | } 972 | 973 | @-webkit-keyframes fadeInDownBig { 974 | 0% { 975 | opacity: 0; 976 | -webkit-transform: translateY(-2000px); 977 | transform: translateY(-2000px); 978 | } 979 | 980 | 100% { 981 | opacity: 1; 982 | -webkit-transform: translateY(0); 983 | transform: translateY(0); 984 | } 985 | } 986 | 987 | @keyframes fadeInDownBig { 988 | 0% { 989 | opacity: 0; 990 | -webkit-transform: translateY(-2000px); 991 | -ms-transform: translateY(-2000px); 992 | transform: translateY(-2000px); 993 | } 994 | 995 | 100% { 996 | opacity: 1; 997 | -webkit-transform: translateY(0); 998 | -ms-transform: translateY(0); 999 | transform: translateY(0); 1000 | } 1001 | } 1002 | 1003 | .fadeInDownBig { 1004 | -webkit-animation-name: fadeInDownBig; 1005 | animation-name: fadeInDownBig; 1006 | } 1007 | 1008 | @-webkit-keyframes fadeInLeft { 1009 | 0% { 1010 | opacity: 0; 1011 | -webkit-transform: translateX(-20px); 1012 | transform: translateX(-20px); 1013 | } 1014 | 1015 | 100% { 1016 | opacity: 1; 1017 | -webkit-transform: translateX(0); 1018 | transform: translateX(0); 1019 | } 1020 | } 1021 | 1022 | @keyframes fadeInLeft { 1023 | 0% { 1024 | opacity: 0; 1025 | -webkit-transform: translateX(-20px); 1026 | -ms-transform: translateX(-20px); 1027 | transform: translateX(-20px); 1028 | } 1029 | 1030 | 100% { 1031 | opacity: 1; 1032 | -webkit-transform: translateX(0); 1033 | -ms-transform: translateX(0); 1034 | transform: translateX(0); 1035 | } 1036 | } 1037 | 1038 | .fadeInLeft { 1039 | -webkit-animation-name: fadeInLeft; 1040 | animation-name: fadeInLeft; 1041 | } 1042 | 1043 | @-webkit-keyframes fadeInLeftBig { 1044 | 0% { 1045 | opacity: 0; 1046 | -webkit-transform: translateX(-2000px); 1047 | transform: translateX(-2000px); 1048 | } 1049 | 1050 | 100% { 1051 | opacity: 1; 1052 | -webkit-transform: translateX(0); 1053 | transform: translateX(0); 1054 | } 1055 | } 1056 | 1057 | @keyframes fadeInLeftBig { 1058 | 0% { 1059 | opacity: 0; 1060 | -webkit-transform: translateX(-2000px); 1061 | -ms-transform: translateX(-2000px); 1062 | transform: translateX(-2000px); 1063 | } 1064 | 1065 | 100% { 1066 | opacity: 1; 1067 | -webkit-transform: translateX(0); 1068 | -ms-transform: translateX(0); 1069 | transform: translateX(0); 1070 | } 1071 | } 1072 | 1073 | .fadeInLeftBig { 1074 | -webkit-animation-name: fadeInLeftBig; 1075 | animation-name: fadeInLeftBig; 1076 | } 1077 | 1078 | @-webkit-keyframes fadeInRight { 1079 | 0% { 1080 | opacity: 0; 1081 | -webkit-transform: translateX(20px); 1082 | transform: translateX(20px); 1083 | } 1084 | 1085 | 100% { 1086 | opacity: 1; 1087 | -webkit-transform: translateX(0); 1088 | transform: translateX(0); 1089 | } 1090 | } 1091 | 1092 | @keyframes fadeInRight { 1093 | 0% { 1094 | opacity: 0; 1095 | -webkit-transform: translateX(20px); 1096 | -ms-transform: translateX(20px); 1097 | transform: translateX(20px); 1098 | } 1099 | 1100 | 100% { 1101 | opacity: 1; 1102 | -webkit-transform: translateX(0); 1103 | -ms-transform: translateX(0); 1104 | transform: translateX(0); 1105 | } 1106 | } 1107 | 1108 | .fadeInRight { 1109 | -webkit-animation-name: fadeInRight; 1110 | animation-name: fadeInRight; 1111 | } 1112 | 1113 | @-webkit-keyframes fadeInRightBig { 1114 | 0% { 1115 | opacity: 0; 1116 | -webkit-transform: translateX(2000px); 1117 | transform: translateX(2000px); 1118 | } 1119 | 1120 | 100% { 1121 | opacity: 1; 1122 | -webkit-transform: translateX(0); 1123 | transform: translateX(0); 1124 | } 1125 | } 1126 | 1127 | @keyframes fadeInRightBig { 1128 | 0% { 1129 | opacity: 0; 1130 | -webkit-transform: translateX(2000px); 1131 | -ms-transform: translateX(2000px); 1132 | transform: translateX(2000px); 1133 | } 1134 | 1135 | 100% { 1136 | opacity: 1; 1137 | -webkit-transform: translateX(0); 1138 | -ms-transform: translateX(0); 1139 | transform: translateX(0); 1140 | } 1141 | } 1142 | 1143 | .fadeInRightBig { 1144 | -webkit-animation-name: fadeInRightBig; 1145 | animation-name: fadeInRightBig; 1146 | } 1147 | 1148 | @-webkit-keyframes fadeInUp { 1149 | 0% { 1150 | opacity: 0; 1151 | -webkit-transform: translateY(20px); 1152 | transform: translateY(20px); 1153 | } 1154 | 1155 | 100% { 1156 | opacity: 1; 1157 | -webkit-transform: translateY(0); 1158 | transform: translateY(0); 1159 | } 1160 | } 1161 | 1162 | @keyframes fadeInUp { 1163 | 0% { 1164 | opacity: 0; 1165 | -webkit-transform: translateY(20px); 1166 | -ms-transform: translateY(20px); 1167 | transform: translateY(20px); 1168 | } 1169 | 1170 | 100% { 1171 | opacity: 1; 1172 | -webkit-transform: translateY(0); 1173 | -ms-transform: translateY(0); 1174 | transform: translateY(0); 1175 | } 1176 | } 1177 | 1178 | .fadeInUp { 1179 | -webkit-animation-name: fadeInUp; 1180 | animation-name: fadeInUp; 1181 | } 1182 | 1183 | @-webkit-keyframes fadeInUpBig { 1184 | 0% { 1185 | opacity: 0; 1186 | -webkit-transform: translateY(2000px); 1187 | transform: translateY(2000px); 1188 | } 1189 | 1190 | 100% { 1191 | opacity: 1; 1192 | -webkit-transform: translateY(0); 1193 | transform: translateY(0); 1194 | } 1195 | } 1196 | 1197 | @keyframes fadeInUpBig { 1198 | 0% { 1199 | opacity: 0; 1200 | -webkit-transform: translateY(2000px); 1201 | -ms-transform: translateY(2000px); 1202 | transform: translateY(2000px); 1203 | } 1204 | 1205 | 100% { 1206 | opacity: 1; 1207 | -webkit-transform: translateY(0); 1208 | -ms-transform: translateY(0); 1209 | transform: translateY(0); 1210 | } 1211 | } 1212 | 1213 | .fadeInUpBig { 1214 | -webkit-animation-name: fadeInUpBig; 1215 | animation-name: fadeInUpBig; 1216 | } 1217 | 1218 | @-webkit-keyframes fadeOut { 1219 | 0% { 1220 | opacity: 1; 1221 | } 1222 | 1223 | 100% { 1224 | opacity: 0; 1225 | } 1226 | } 1227 | 1228 | @keyframes fadeOut { 1229 | 0% { 1230 | opacity: 1; 1231 | } 1232 | 1233 | 100% { 1234 | opacity: 0; 1235 | } 1236 | } 1237 | 1238 | .fadeOut { 1239 | -webkit-animation-name: fadeOut; 1240 | animation-name: fadeOut; 1241 | } 1242 | 1243 | @-webkit-keyframes fadeOutDown { 1244 | 0% { 1245 | opacity: 1; 1246 | -webkit-transform: translateY(0); 1247 | transform: translateY(0); 1248 | } 1249 | 1250 | 100% { 1251 | opacity: 0; 1252 | -webkit-transform: translateY(20px); 1253 | transform: translateY(20px); 1254 | } 1255 | } 1256 | 1257 | @keyframes fadeOutDown { 1258 | 0% { 1259 | opacity: 1; 1260 | -webkit-transform: translateY(0); 1261 | -ms-transform: translateY(0); 1262 | transform: translateY(0); 1263 | } 1264 | 1265 | 100% { 1266 | opacity: 0; 1267 | -webkit-transform: translateY(20px); 1268 | -ms-transform: translateY(20px); 1269 | transform: translateY(20px); 1270 | } 1271 | } 1272 | 1273 | .fadeOutDown { 1274 | -webkit-animation-name: fadeOutDown; 1275 | animation-name: fadeOutDown; 1276 | } 1277 | 1278 | @-webkit-keyframes fadeOutDownBig { 1279 | 0% { 1280 | opacity: 1; 1281 | -webkit-transform: translateY(0); 1282 | transform: translateY(0); 1283 | } 1284 | 1285 | 100% { 1286 | opacity: 0; 1287 | -webkit-transform: translateY(2000px); 1288 | transform: translateY(2000px); 1289 | } 1290 | } 1291 | 1292 | @keyframes fadeOutDownBig { 1293 | 0% { 1294 | opacity: 1; 1295 | -webkit-transform: translateY(0); 1296 | -ms-transform: translateY(0); 1297 | transform: translateY(0); 1298 | } 1299 | 1300 | 100% { 1301 | opacity: 0; 1302 | -webkit-transform: translateY(2000px); 1303 | -ms-transform: translateY(2000px); 1304 | transform: translateY(2000px); 1305 | } 1306 | } 1307 | 1308 | .fadeOutDownBig { 1309 | -webkit-animation-name: fadeOutDownBig; 1310 | animation-name: fadeOutDownBig; 1311 | } 1312 | 1313 | @-webkit-keyframes fadeOutLeft { 1314 | 0% { 1315 | opacity: 1; 1316 | -webkit-transform: translateX(0); 1317 | transform: translateX(0); 1318 | } 1319 | 1320 | 100% { 1321 | opacity: 0; 1322 | -webkit-transform: translateX(-20px); 1323 | transform: translateX(-20px); 1324 | } 1325 | } 1326 | 1327 | @keyframes fadeOutLeft { 1328 | 0% { 1329 | opacity: 1; 1330 | -webkit-transform: translateX(0); 1331 | -ms-transform: translateX(0); 1332 | transform: translateX(0); 1333 | } 1334 | 1335 | 100% { 1336 | opacity: 0; 1337 | -webkit-transform: translateX(-20px); 1338 | -ms-transform: translateX(-20px); 1339 | transform: translateX(-20px); 1340 | } 1341 | } 1342 | 1343 | .fadeOutLeft { 1344 | -webkit-animation-name: fadeOutLeft; 1345 | animation-name: fadeOutLeft; 1346 | } 1347 | 1348 | @-webkit-keyframes fadeOutLeftBig { 1349 | 0% { 1350 | opacity: 1; 1351 | -webkit-transform: translateX(0); 1352 | transform: translateX(0); 1353 | } 1354 | 1355 | 100% { 1356 | opacity: 0; 1357 | -webkit-transform: translateX(-2000px); 1358 | transform: translateX(-2000px); 1359 | } 1360 | } 1361 | 1362 | @keyframes fadeOutLeftBig { 1363 | 0% { 1364 | opacity: 1; 1365 | -webkit-transform: translateX(0); 1366 | -ms-transform: translateX(0); 1367 | transform: translateX(0); 1368 | } 1369 | 1370 | 100% { 1371 | opacity: 0; 1372 | -webkit-transform: translateX(-2000px); 1373 | -ms-transform: translateX(-2000px); 1374 | transform: translateX(-2000px); 1375 | } 1376 | } 1377 | 1378 | .fadeOutLeftBig { 1379 | -webkit-animation-name: fadeOutLeftBig; 1380 | animation-name: fadeOutLeftBig; 1381 | } 1382 | 1383 | @-webkit-keyframes fadeOutRight { 1384 | 0% { 1385 | opacity: 1; 1386 | -webkit-transform: translateX(0); 1387 | transform: translateX(0); 1388 | } 1389 | 1390 | 100% { 1391 | opacity: 0; 1392 | -webkit-transform: translateX(20px); 1393 | transform: translateX(20px); 1394 | } 1395 | } 1396 | 1397 | @keyframes fadeOutRight { 1398 | 0% { 1399 | opacity: 1; 1400 | -webkit-transform: translateX(0); 1401 | -ms-transform: translateX(0); 1402 | transform: translateX(0); 1403 | } 1404 | 1405 | 100% { 1406 | opacity: 0; 1407 | -webkit-transform: translateX(20px); 1408 | -ms-transform: translateX(20px); 1409 | transform: translateX(20px); 1410 | } 1411 | } 1412 | 1413 | .fadeOutRight { 1414 | -webkit-animation-name: fadeOutRight; 1415 | animation-name: fadeOutRight; 1416 | } 1417 | 1418 | @-webkit-keyframes fadeOutRightBig { 1419 | 0% { 1420 | opacity: 1; 1421 | -webkit-transform: translateX(0); 1422 | transform: translateX(0); 1423 | } 1424 | 1425 | 100% { 1426 | opacity: 0; 1427 | -webkit-transform: translateX(2000px); 1428 | transform: translateX(2000px); 1429 | } 1430 | } 1431 | 1432 | @keyframes fadeOutRightBig { 1433 | 0% { 1434 | opacity: 1; 1435 | -webkit-transform: translateX(0); 1436 | -ms-transform: translateX(0); 1437 | transform: translateX(0); 1438 | } 1439 | 1440 | 100% { 1441 | opacity: 0; 1442 | -webkit-transform: translateX(2000px); 1443 | -ms-transform: translateX(2000px); 1444 | transform: translateX(2000px); 1445 | } 1446 | } 1447 | 1448 | .fadeOutRightBig { 1449 | -webkit-animation-name: fadeOutRightBig; 1450 | animation-name: fadeOutRightBig; 1451 | } 1452 | 1453 | @-webkit-keyframes fadeOutUp { 1454 | 0% { 1455 | opacity: 1; 1456 | -webkit-transform: translateY(0); 1457 | transform: translateY(0); 1458 | } 1459 | 1460 | 100% { 1461 | opacity: 0; 1462 | -webkit-transform: translateY(-20px); 1463 | transform: translateY(-20px); 1464 | } 1465 | } 1466 | 1467 | @keyframes fadeOutUp { 1468 | 0% { 1469 | opacity: 1; 1470 | -webkit-transform: translateY(0); 1471 | -ms-transform: translateY(0); 1472 | transform: translateY(0); 1473 | } 1474 | 1475 | 100% { 1476 | opacity: 0; 1477 | -webkit-transform: translateY(-20px); 1478 | -ms-transform: translateY(-20px); 1479 | transform: translateY(-20px); 1480 | } 1481 | } 1482 | 1483 | .fadeOutUp { 1484 | -webkit-animation-name: fadeOutUp; 1485 | animation-name: fadeOutUp; 1486 | } 1487 | 1488 | @-webkit-keyframes fadeOutUpBig { 1489 | 0% { 1490 | opacity: 1; 1491 | -webkit-transform: translateY(0); 1492 | transform: translateY(0); 1493 | } 1494 | 1495 | 100% { 1496 | opacity: 0; 1497 | -webkit-transform: translateY(-2000px); 1498 | transform: translateY(-2000px); 1499 | } 1500 | } 1501 | 1502 | @keyframes fadeOutUpBig { 1503 | 0% { 1504 | opacity: 1; 1505 | -webkit-transform: translateY(0); 1506 | -ms-transform: translateY(0); 1507 | transform: translateY(0); 1508 | } 1509 | 1510 | 100% { 1511 | opacity: 0; 1512 | -webkit-transform: translateY(-2000px); 1513 | -ms-transform: translateY(-2000px); 1514 | transform: translateY(-2000px); 1515 | } 1516 | } 1517 | 1518 | .fadeOutUpBig { 1519 | -webkit-animation-name: fadeOutUpBig; 1520 | animation-name: fadeOutUpBig; 1521 | } 1522 | 1523 | @-webkit-keyframes flip { 1524 | 0% { 1525 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1526 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1527 | -webkit-animation-timing-function: ease-out; 1528 | animation-timing-function: ease-out; 1529 | } 1530 | 1531 | 40% { 1532 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1533 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1534 | -webkit-animation-timing-function: ease-out; 1535 | animation-timing-function: ease-out; 1536 | } 1537 | 1538 | 50% { 1539 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1540 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1541 | -webkit-animation-timing-function: ease-in; 1542 | animation-timing-function: ease-in; 1543 | } 1544 | 1545 | 80% { 1546 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1547 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1548 | -webkit-animation-timing-function: ease-in; 1549 | animation-timing-function: ease-in; 1550 | } 1551 | 1552 | 100% { 1553 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1554 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1555 | -webkit-animation-timing-function: ease-in; 1556 | animation-timing-function: ease-in; 1557 | } 1558 | } 1559 | 1560 | @keyframes flip { 1561 | 0% { 1562 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1563 | -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1564 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1565 | -webkit-animation-timing-function: ease-out; 1566 | animation-timing-function: ease-out; 1567 | } 1568 | 1569 | 40% { 1570 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1571 | -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1572 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1573 | -webkit-animation-timing-function: ease-out; 1574 | animation-timing-function: ease-out; 1575 | } 1576 | 1577 | 50% { 1578 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1579 | -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1580 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1581 | -webkit-animation-timing-function: ease-in; 1582 | animation-timing-function: ease-in; 1583 | } 1584 | 1585 | 80% { 1586 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1587 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1588 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1589 | -webkit-animation-timing-function: ease-in; 1590 | animation-timing-function: ease-in; 1591 | } 1592 | 1593 | 100% { 1594 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1595 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1596 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1597 | -webkit-animation-timing-function: ease-in; 1598 | animation-timing-function: ease-in; 1599 | } 1600 | } 1601 | 1602 | .animated.flip { 1603 | -webkit-backface-visibility: visible; 1604 | -ms-backface-visibility: visible; 1605 | backface-visibility: visible; 1606 | -webkit-animation-name: flip; 1607 | animation-name: flip; 1608 | } 1609 | 1610 | @-webkit-keyframes flipInX { 1611 | 0% { 1612 | -webkit-transform: perspective(400px) rotateX(90deg); 1613 | transform: perspective(400px) rotateX(90deg); 1614 | opacity: 0; 1615 | } 1616 | 1617 | 40% { 1618 | -webkit-transform: perspective(400px) rotateX(-10deg); 1619 | transform: perspective(400px) rotateX(-10deg); 1620 | } 1621 | 1622 | 70% { 1623 | -webkit-transform: perspective(400px) rotateX(10deg); 1624 | transform: perspective(400px) rotateX(10deg); 1625 | } 1626 | 1627 | 100% { 1628 | -webkit-transform: perspective(400px) rotateX(0deg); 1629 | transform: perspective(400px) rotateX(0deg); 1630 | opacity: 1; 1631 | } 1632 | } 1633 | 1634 | @keyframes flipInX { 1635 | 0% { 1636 | -webkit-transform: perspective(400px) rotateX(90deg); 1637 | -ms-transform: perspective(400px) rotateX(90deg); 1638 | transform: perspective(400px) rotateX(90deg); 1639 | opacity: 0; 1640 | } 1641 | 1642 | 40% { 1643 | -webkit-transform: perspective(400px) rotateX(-10deg); 1644 | -ms-transform: perspective(400px) rotateX(-10deg); 1645 | transform: perspective(400px) rotateX(-10deg); 1646 | } 1647 | 1648 | 70% { 1649 | -webkit-transform: perspective(400px) rotateX(10deg); 1650 | -ms-transform: perspective(400px) rotateX(10deg); 1651 | transform: perspective(400px) rotateX(10deg); 1652 | } 1653 | 1654 | 100% { 1655 | -webkit-transform: perspective(400px) rotateX(0deg); 1656 | -ms-transform: perspective(400px) rotateX(0deg); 1657 | transform: perspective(400px) rotateX(0deg); 1658 | opacity: 1; 1659 | } 1660 | } 1661 | 1662 | .flipInX { 1663 | -webkit-backface-visibility: visible !important; 1664 | -ms-backface-visibility: visible !important; 1665 | backface-visibility: visible !important; 1666 | -webkit-animation-name: flipInX; 1667 | animation-name: flipInX; 1668 | } 1669 | 1670 | @-webkit-keyframes flipInY { 1671 | 0% { 1672 | -webkit-transform: perspective(400px) rotateY(90deg); 1673 | transform: perspective(400px) rotateY(90deg); 1674 | opacity: 0; 1675 | } 1676 | 1677 | 40% { 1678 | -webkit-transform: perspective(400px) rotateY(-10deg); 1679 | transform: perspective(400px) rotateY(-10deg); 1680 | } 1681 | 1682 | 70% { 1683 | -webkit-transform: perspective(400px) rotateY(10deg); 1684 | transform: perspective(400px) rotateY(10deg); 1685 | } 1686 | 1687 | 100% { 1688 | -webkit-transform: perspective(400px) rotateY(0deg); 1689 | transform: perspective(400px) rotateY(0deg); 1690 | opacity: 1; 1691 | } 1692 | } 1693 | 1694 | @keyframes flipInY { 1695 | 0% { 1696 | -webkit-transform: perspective(400px) rotateY(90deg); 1697 | -ms-transform: perspective(400px) rotateY(90deg); 1698 | transform: perspective(400px) rotateY(90deg); 1699 | opacity: 0; 1700 | } 1701 | 1702 | 40% { 1703 | -webkit-transform: perspective(400px) rotateY(-10deg); 1704 | -ms-transform: perspective(400px) rotateY(-10deg); 1705 | transform: perspective(400px) rotateY(-10deg); 1706 | } 1707 | 1708 | 70% { 1709 | -webkit-transform: perspective(400px) rotateY(10deg); 1710 | -ms-transform: perspective(400px) rotateY(10deg); 1711 | transform: perspective(400px) rotateY(10deg); 1712 | } 1713 | 1714 | 100% { 1715 | -webkit-transform: perspective(400px) rotateY(0deg); 1716 | -ms-transform: perspective(400px) rotateY(0deg); 1717 | transform: perspective(400px) rotateY(0deg); 1718 | opacity: 1; 1719 | } 1720 | } 1721 | 1722 | .flipInY { 1723 | -webkit-backface-visibility: visible !important; 1724 | -ms-backface-visibility: visible !important; 1725 | backface-visibility: visible !important; 1726 | -webkit-animation-name: flipInY; 1727 | animation-name: flipInY; 1728 | } 1729 | 1730 | @-webkit-keyframes flipOutX { 1731 | 0% { 1732 | -webkit-transform: perspective(400px) rotateX(0deg); 1733 | transform: perspective(400px) rotateX(0deg); 1734 | opacity: 1; 1735 | } 1736 | 1737 | 100% { 1738 | -webkit-transform: perspective(400px) rotateX(90deg); 1739 | transform: perspective(400px) rotateX(90deg); 1740 | opacity: 0; 1741 | } 1742 | } 1743 | 1744 | @keyframes flipOutX { 1745 | 0% { 1746 | -webkit-transform: perspective(400px) rotateX(0deg); 1747 | -ms-transform: perspective(400px) rotateX(0deg); 1748 | transform: perspective(400px) rotateX(0deg); 1749 | opacity: 1; 1750 | } 1751 | 1752 | 100% { 1753 | -webkit-transform: perspective(400px) rotateX(90deg); 1754 | -ms-transform: perspective(400px) rotateX(90deg); 1755 | transform: perspective(400px) rotateX(90deg); 1756 | opacity: 0; 1757 | } 1758 | } 1759 | 1760 | .flipOutX { 1761 | -webkit-animation-name: flipOutX; 1762 | animation-name: flipOutX; 1763 | -webkit-backface-visibility: visible !important; 1764 | -ms-backface-visibility: visible !important; 1765 | backface-visibility: visible !important; 1766 | } 1767 | 1768 | @-webkit-keyframes flipOutY { 1769 | 0% { 1770 | -webkit-transform: perspective(400px) rotateY(0deg); 1771 | transform: perspective(400px) rotateY(0deg); 1772 | opacity: 1; 1773 | } 1774 | 1775 | 100% { 1776 | -webkit-transform: perspective(400px) rotateY(90deg); 1777 | transform: perspective(400px) rotateY(90deg); 1778 | opacity: 0; 1779 | } 1780 | } 1781 | 1782 | @keyframes flipOutY { 1783 | 0% { 1784 | -webkit-transform: perspective(400px) rotateY(0deg); 1785 | -ms-transform: perspective(400px) rotateY(0deg); 1786 | transform: perspective(400px) rotateY(0deg); 1787 | opacity: 1; 1788 | } 1789 | 1790 | 100% { 1791 | -webkit-transform: perspective(400px) rotateY(90deg); 1792 | -ms-transform: perspective(400px) rotateY(90deg); 1793 | transform: perspective(400px) rotateY(90deg); 1794 | opacity: 0; 1795 | } 1796 | } 1797 | 1798 | .flipOutY { 1799 | -webkit-backface-visibility: visible !important; 1800 | -ms-backface-visibility: visible !important; 1801 | backface-visibility: visible !important; 1802 | -webkit-animation-name: flipOutY; 1803 | animation-name: flipOutY; 1804 | } 1805 | 1806 | @-webkit-keyframes lightSpeedIn { 1807 | 0% { 1808 | -webkit-transform: translateX(100%) skewX(-30deg); 1809 | transform: translateX(100%) skewX(-30deg); 1810 | opacity: 0; 1811 | } 1812 | 1813 | 60% { 1814 | -webkit-transform: translateX(-20%) skewX(30deg); 1815 | transform: translateX(-20%) skewX(30deg); 1816 | opacity: 1; 1817 | } 1818 | 1819 | 80% { 1820 | -webkit-transform: translateX(0%) skewX(-15deg); 1821 | transform: translateX(0%) skewX(-15deg); 1822 | opacity: 1; 1823 | } 1824 | 1825 | 100% { 1826 | -webkit-transform: translateX(0%) skewX(0deg); 1827 | transform: translateX(0%) skewX(0deg); 1828 | opacity: 1; 1829 | } 1830 | } 1831 | 1832 | @keyframes lightSpeedIn { 1833 | 0% { 1834 | -webkit-transform: translateX(100%) skewX(-30deg); 1835 | -ms-transform: translateX(100%) skewX(-30deg); 1836 | transform: translateX(100%) skewX(-30deg); 1837 | opacity: 0; 1838 | } 1839 | 1840 | 60% { 1841 | -webkit-transform: translateX(-20%) skewX(30deg); 1842 | -ms-transform: translateX(-20%) skewX(30deg); 1843 | transform: translateX(-20%) skewX(30deg); 1844 | opacity: 1; 1845 | } 1846 | 1847 | 80% { 1848 | -webkit-transform: translateX(0%) skewX(-15deg); 1849 | -ms-transform: translateX(0%) skewX(-15deg); 1850 | transform: translateX(0%) skewX(-15deg); 1851 | opacity: 1; 1852 | } 1853 | 1854 | 100% { 1855 | -webkit-transform: translateX(0%) skewX(0deg); 1856 | -ms-transform: translateX(0%) skewX(0deg); 1857 | transform: translateX(0%) skewX(0deg); 1858 | opacity: 1; 1859 | } 1860 | } 1861 | 1862 | .lightSpeedIn { 1863 | -webkit-animation-name: lightSpeedIn; 1864 | animation-name: lightSpeedIn; 1865 | -webkit-animation-timing-function: ease-out; 1866 | animation-timing-function: ease-out; 1867 | } 1868 | 1869 | @-webkit-keyframes lightSpeedOut { 1870 | 0% { 1871 | -webkit-transform: translateX(0%) skewX(0deg); 1872 | transform: translateX(0%) skewX(0deg); 1873 | opacity: 1; 1874 | } 1875 | 1876 | 100% { 1877 | -webkit-transform: translateX(100%) skewX(-30deg); 1878 | transform: translateX(100%) skewX(-30deg); 1879 | opacity: 0; 1880 | } 1881 | } 1882 | 1883 | @keyframes lightSpeedOut { 1884 | 0% { 1885 | -webkit-transform: translateX(0%) skewX(0deg); 1886 | -ms-transform: translateX(0%) skewX(0deg); 1887 | transform: translateX(0%) skewX(0deg); 1888 | opacity: 1; 1889 | } 1890 | 1891 | 100% { 1892 | -webkit-transform: translateX(100%) skewX(-30deg); 1893 | -ms-transform: translateX(100%) skewX(-30deg); 1894 | transform: translateX(100%) skewX(-30deg); 1895 | opacity: 0; 1896 | } 1897 | } 1898 | 1899 | .lightSpeedOut { 1900 | -webkit-animation-name: lightSpeedOut; 1901 | animation-name: lightSpeedOut; 1902 | -webkit-animation-timing-function: ease-in; 1903 | animation-timing-function: ease-in; 1904 | } 1905 | 1906 | @-webkit-keyframes rotateIn { 1907 | 0% { 1908 | -webkit-transform-origin: center center; 1909 | transform-origin: center center; 1910 | -webkit-transform: rotate(-200deg); 1911 | transform: rotate(-200deg); 1912 | opacity: 0; 1913 | } 1914 | 1915 | 100% { 1916 | -webkit-transform-origin: center center; 1917 | transform-origin: center center; 1918 | -webkit-transform: rotate(0); 1919 | transform: rotate(0); 1920 | opacity: 1; 1921 | } 1922 | } 1923 | 1924 | @keyframes rotateIn { 1925 | 0% { 1926 | -webkit-transform-origin: center center; 1927 | -ms-transform-origin: center center; 1928 | transform-origin: center center; 1929 | -webkit-transform: rotate(-200deg); 1930 | -ms-transform: rotate(-200deg); 1931 | transform: rotate(-200deg); 1932 | opacity: 0; 1933 | } 1934 | 1935 | 100% { 1936 | -webkit-transform-origin: center center; 1937 | -ms-transform-origin: center center; 1938 | transform-origin: center center; 1939 | -webkit-transform: rotate(0); 1940 | -ms-transform: rotate(0); 1941 | transform: rotate(0); 1942 | opacity: 1; 1943 | } 1944 | } 1945 | 1946 | .rotateIn { 1947 | -webkit-animation-name: rotateIn; 1948 | animation-name: rotateIn; 1949 | } 1950 | 1951 | @-webkit-keyframes rotateInDownLeft { 1952 | 0% { 1953 | -webkit-transform-origin: left bottom; 1954 | transform-origin: left bottom; 1955 | -webkit-transform: rotate(-90deg); 1956 | transform: rotate(-90deg); 1957 | opacity: 0; 1958 | } 1959 | 1960 | 100% { 1961 | -webkit-transform-origin: left bottom; 1962 | transform-origin: left bottom; 1963 | -webkit-transform: rotate(0); 1964 | transform: rotate(0); 1965 | opacity: 1; 1966 | } 1967 | } 1968 | 1969 | @keyframes rotateInDownLeft { 1970 | 0% { 1971 | -webkit-transform-origin: left bottom; 1972 | -ms-transform-origin: left bottom; 1973 | transform-origin: left bottom; 1974 | -webkit-transform: rotate(-90deg); 1975 | -ms-transform: rotate(-90deg); 1976 | transform: rotate(-90deg); 1977 | opacity: 0; 1978 | } 1979 | 1980 | 100% { 1981 | -webkit-transform-origin: left bottom; 1982 | -ms-transform-origin: left bottom; 1983 | transform-origin: left bottom; 1984 | -webkit-transform: rotate(0); 1985 | -ms-transform: rotate(0); 1986 | transform: rotate(0); 1987 | opacity: 1; 1988 | } 1989 | } 1990 | 1991 | .rotateInDownLeft { 1992 | -webkit-animation-name: rotateInDownLeft; 1993 | animation-name: rotateInDownLeft; 1994 | } 1995 | 1996 | @-webkit-keyframes rotateInDownRight { 1997 | 0% { 1998 | -webkit-transform-origin: right bottom; 1999 | transform-origin: right bottom; 2000 | -webkit-transform: rotate(90deg); 2001 | transform: rotate(90deg); 2002 | opacity: 0; 2003 | } 2004 | 2005 | 100% { 2006 | -webkit-transform-origin: right bottom; 2007 | transform-origin: right bottom; 2008 | -webkit-transform: rotate(0); 2009 | transform: rotate(0); 2010 | opacity: 1; 2011 | } 2012 | } 2013 | 2014 | @keyframes rotateInDownRight { 2015 | 0% { 2016 | -webkit-transform-origin: right bottom; 2017 | -ms-transform-origin: right bottom; 2018 | transform-origin: right bottom; 2019 | -webkit-transform: rotate(90deg); 2020 | -ms-transform: rotate(90deg); 2021 | transform: rotate(90deg); 2022 | opacity: 0; 2023 | } 2024 | 2025 | 100% { 2026 | -webkit-transform-origin: right bottom; 2027 | -ms-transform-origin: right bottom; 2028 | transform-origin: right bottom; 2029 | -webkit-transform: rotate(0); 2030 | -ms-transform: rotate(0); 2031 | transform: rotate(0); 2032 | opacity: 1; 2033 | } 2034 | } 2035 | 2036 | .rotateInDownRight { 2037 | -webkit-animation-name: rotateInDownRight; 2038 | animation-name: rotateInDownRight; 2039 | } 2040 | 2041 | @-webkit-keyframes rotateInUpLeft { 2042 | 0% { 2043 | -webkit-transform-origin: left bottom; 2044 | transform-origin: left bottom; 2045 | -webkit-transform: rotate(90deg); 2046 | transform: rotate(90deg); 2047 | opacity: 0; 2048 | } 2049 | 2050 | 100% { 2051 | -webkit-transform-origin: left bottom; 2052 | transform-origin: left bottom; 2053 | -webkit-transform: rotate(0); 2054 | transform: rotate(0); 2055 | opacity: 1; 2056 | } 2057 | } 2058 | 2059 | @keyframes rotateInUpLeft { 2060 | 0% { 2061 | -webkit-transform-origin: left bottom; 2062 | -ms-transform-origin: left bottom; 2063 | transform-origin: left bottom; 2064 | -webkit-transform: rotate(90deg); 2065 | -ms-transform: rotate(90deg); 2066 | transform: rotate(90deg); 2067 | opacity: 0; 2068 | } 2069 | 2070 | 100% { 2071 | -webkit-transform-origin: left bottom; 2072 | -ms-transform-origin: left bottom; 2073 | transform-origin: left bottom; 2074 | -webkit-transform: rotate(0); 2075 | -ms-transform: rotate(0); 2076 | transform: rotate(0); 2077 | opacity: 1; 2078 | } 2079 | } 2080 | 2081 | .rotateInUpLeft { 2082 | -webkit-animation-name: rotateInUpLeft; 2083 | animation-name: rotateInUpLeft; 2084 | } 2085 | 2086 | @-webkit-keyframes rotateInUpRight { 2087 | 0% { 2088 | -webkit-transform-origin: right bottom; 2089 | transform-origin: right bottom; 2090 | -webkit-transform: rotate(-90deg); 2091 | transform: rotate(-90deg); 2092 | opacity: 0; 2093 | } 2094 | 2095 | 100% { 2096 | -webkit-transform-origin: right bottom; 2097 | transform-origin: right bottom; 2098 | -webkit-transform: rotate(0); 2099 | transform: rotate(0); 2100 | opacity: 1; 2101 | } 2102 | } 2103 | 2104 | @keyframes rotateInUpRight { 2105 | 0% { 2106 | -webkit-transform-origin: right bottom; 2107 | -ms-transform-origin: right bottom; 2108 | transform-origin: right bottom; 2109 | -webkit-transform: rotate(-90deg); 2110 | -ms-transform: rotate(-90deg); 2111 | transform: rotate(-90deg); 2112 | opacity: 0; 2113 | } 2114 | 2115 | 100% { 2116 | -webkit-transform-origin: right bottom; 2117 | -ms-transform-origin: right bottom; 2118 | transform-origin: right bottom; 2119 | -webkit-transform: rotate(0); 2120 | -ms-transform: rotate(0); 2121 | transform: rotate(0); 2122 | opacity: 1; 2123 | } 2124 | } 2125 | 2126 | .rotateInUpRight { 2127 | -webkit-animation-name: rotateInUpRight; 2128 | animation-name: rotateInUpRight; 2129 | } 2130 | 2131 | @-webkit-keyframes rotateOut { 2132 | 0% { 2133 | -webkit-transform-origin: center center; 2134 | transform-origin: center center; 2135 | -webkit-transform: rotate(0); 2136 | transform: rotate(0); 2137 | opacity: 1; 2138 | } 2139 | 2140 | 100% { 2141 | -webkit-transform-origin: center center; 2142 | transform-origin: center center; 2143 | -webkit-transform: rotate(200deg); 2144 | transform: rotate(200deg); 2145 | opacity: 0; 2146 | } 2147 | } 2148 | 2149 | @keyframes rotateOut { 2150 | 0% { 2151 | -webkit-transform-origin: center center; 2152 | -ms-transform-origin: center center; 2153 | transform-origin: center center; 2154 | -webkit-transform: rotate(0); 2155 | -ms-transform: rotate(0); 2156 | transform: rotate(0); 2157 | opacity: 1; 2158 | } 2159 | 2160 | 100% { 2161 | -webkit-transform-origin: center center; 2162 | -ms-transform-origin: center center; 2163 | transform-origin: center center; 2164 | -webkit-transform: rotate(200deg); 2165 | -ms-transform: rotate(200deg); 2166 | transform: rotate(200deg); 2167 | opacity: 0; 2168 | } 2169 | } 2170 | 2171 | .rotateOut { 2172 | -webkit-animation-name: rotateOut; 2173 | animation-name: rotateOut; 2174 | } 2175 | 2176 | @-webkit-keyframes rotateOutDownLeft { 2177 | 0% { 2178 | -webkit-transform-origin: left bottom; 2179 | transform-origin: left bottom; 2180 | -webkit-transform: rotate(0); 2181 | transform: rotate(0); 2182 | opacity: 1; 2183 | } 2184 | 2185 | 100% { 2186 | -webkit-transform-origin: left bottom; 2187 | transform-origin: left bottom; 2188 | -webkit-transform: rotate(90deg); 2189 | transform: rotate(90deg); 2190 | opacity: 0; 2191 | } 2192 | } 2193 | 2194 | @keyframes rotateOutDownLeft { 2195 | 0% { 2196 | -webkit-transform-origin: left bottom; 2197 | -ms-transform-origin: left bottom; 2198 | transform-origin: left bottom; 2199 | -webkit-transform: rotate(0); 2200 | -ms-transform: rotate(0); 2201 | transform: rotate(0); 2202 | opacity: 1; 2203 | } 2204 | 2205 | 100% { 2206 | -webkit-transform-origin: left bottom; 2207 | -ms-transform-origin: left bottom; 2208 | transform-origin: left bottom; 2209 | -webkit-transform: rotate(90deg); 2210 | -ms-transform: rotate(90deg); 2211 | transform: rotate(90deg); 2212 | opacity: 0; 2213 | } 2214 | } 2215 | 2216 | .rotateOutDownLeft { 2217 | -webkit-animation-name: rotateOutDownLeft; 2218 | animation-name: rotateOutDownLeft; 2219 | } 2220 | 2221 | @-webkit-keyframes rotateOutDownRight { 2222 | 0% { 2223 | -webkit-transform-origin: right bottom; 2224 | transform-origin: right bottom; 2225 | -webkit-transform: rotate(0); 2226 | transform: rotate(0); 2227 | opacity: 1; 2228 | } 2229 | 2230 | 100% { 2231 | -webkit-transform-origin: right bottom; 2232 | transform-origin: right bottom; 2233 | -webkit-transform: rotate(-90deg); 2234 | transform: rotate(-90deg); 2235 | opacity: 0; 2236 | } 2237 | } 2238 | 2239 | @keyframes rotateOutDownRight { 2240 | 0% { 2241 | -webkit-transform-origin: right bottom; 2242 | -ms-transform-origin: right bottom; 2243 | transform-origin: right bottom; 2244 | -webkit-transform: rotate(0); 2245 | -ms-transform: rotate(0); 2246 | transform: rotate(0); 2247 | opacity: 1; 2248 | } 2249 | 2250 | 100% { 2251 | -webkit-transform-origin: right bottom; 2252 | -ms-transform-origin: right bottom; 2253 | transform-origin: right bottom; 2254 | -webkit-transform: rotate(-90deg); 2255 | -ms-transform: rotate(-90deg); 2256 | transform: rotate(-90deg); 2257 | opacity: 0; 2258 | } 2259 | } 2260 | 2261 | .rotateOutDownRight { 2262 | -webkit-animation-name: rotateOutDownRight; 2263 | animation-name: rotateOutDownRight; 2264 | } 2265 | 2266 | @-webkit-keyframes rotateOutUpLeft { 2267 | 0% { 2268 | -webkit-transform-origin: left bottom; 2269 | transform-origin: left bottom; 2270 | -webkit-transform: rotate(0); 2271 | transform: rotate(0); 2272 | opacity: 1; 2273 | } 2274 | 2275 | 100% { 2276 | -webkit-transform-origin: left bottom; 2277 | transform-origin: left bottom; 2278 | -webkit-transform: rotate(-90deg); 2279 | transform: rotate(-90deg); 2280 | opacity: 0; 2281 | } 2282 | } 2283 | 2284 | @keyframes rotateOutUpLeft { 2285 | 0% { 2286 | -webkit-transform-origin: left bottom; 2287 | -ms-transform-origin: left bottom; 2288 | transform-origin: left bottom; 2289 | -webkit-transform: rotate(0); 2290 | -ms-transform: rotate(0); 2291 | transform: rotate(0); 2292 | opacity: 1; 2293 | } 2294 | 2295 | 100% { 2296 | -webkit-transform-origin: left bottom; 2297 | -ms-transform-origin: left bottom; 2298 | transform-origin: left bottom; 2299 | -webkit-transform: rotate(-90deg); 2300 | -ms-transform: rotate(-90deg); 2301 | transform: rotate(-90deg); 2302 | opacity: 0; 2303 | } 2304 | } 2305 | 2306 | .rotateOutUpLeft { 2307 | -webkit-animation-name: rotateOutUpLeft; 2308 | animation-name: rotateOutUpLeft; 2309 | } 2310 | 2311 | @-webkit-keyframes rotateOutUpRight { 2312 | 0% { 2313 | -webkit-transform-origin: right bottom; 2314 | transform-origin: right bottom; 2315 | -webkit-transform: rotate(0); 2316 | transform: rotate(0); 2317 | opacity: 1; 2318 | } 2319 | 2320 | 100% { 2321 | -webkit-transform-origin: right bottom; 2322 | transform-origin: right bottom; 2323 | -webkit-transform: rotate(90deg); 2324 | transform: rotate(90deg); 2325 | opacity: 0; 2326 | } 2327 | } 2328 | 2329 | @keyframes rotateOutUpRight { 2330 | 0% { 2331 | -webkit-transform-origin: right bottom; 2332 | -ms-transform-origin: right bottom; 2333 | transform-origin: right bottom; 2334 | -webkit-transform: rotate(0); 2335 | -ms-transform: rotate(0); 2336 | transform: rotate(0); 2337 | opacity: 1; 2338 | } 2339 | 2340 | 100% { 2341 | -webkit-transform-origin: right bottom; 2342 | -ms-transform-origin: right bottom; 2343 | transform-origin: right bottom; 2344 | -webkit-transform: rotate(90deg); 2345 | -ms-transform: rotate(90deg); 2346 | transform: rotate(90deg); 2347 | opacity: 0; 2348 | } 2349 | } 2350 | 2351 | .rotateOutUpRight { 2352 | -webkit-animation-name: rotateOutUpRight; 2353 | animation-name: rotateOutUpRight; 2354 | } 2355 | 2356 | @-webkit-keyframes slideInDown { 2357 | 0% { 2358 | opacity: 0; 2359 | -webkit-transform: translateY(-2000px); 2360 | transform: translateY(-2000px); 2361 | } 2362 | 2363 | 100% { 2364 | -webkit-transform: translateY(0); 2365 | transform: translateY(0); 2366 | } 2367 | } 2368 | 2369 | @keyframes slideInDown { 2370 | 0% { 2371 | opacity: 0; 2372 | -webkit-transform: translateY(-2000px); 2373 | -ms-transform: translateY(-2000px); 2374 | transform: translateY(-2000px); 2375 | } 2376 | 2377 | 100% { 2378 | -webkit-transform: translateY(0); 2379 | -ms-transform: translateY(0); 2380 | transform: translateY(0); 2381 | } 2382 | } 2383 | 2384 | .slideInDown { 2385 | -webkit-animation-name: slideInDown; 2386 | animation-name: slideInDown; 2387 | } 2388 | 2389 | @-webkit-keyframes slideInLeft { 2390 | 0% { 2391 | opacity: 0; 2392 | -webkit-transform: translateX(-2000px); 2393 | transform: translateX(-2000px); 2394 | } 2395 | 2396 | 100% { 2397 | -webkit-transform: translateX(0); 2398 | transform: translateX(0); 2399 | } 2400 | } 2401 | 2402 | @keyframes slideInLeft { 2403 | 0% { 2404 | opacity: 0; 2405 | -webkit-transform: translateX(-2000px); 2406 | -ms-transform: translateX(-2000px); 2407 | transform: translateX(-2000px); 2408 | } 2409 | 2410 | 100% { 2411 | -webkit-transform: translateX(0); 2412 | -ms-transform: translateX(0); 2413 | transform: translateX(0); 2414 | } 2415 | } 2416 | 2417 | .slideInLeft { 2418 | -webkit-animation-name: slideInLeft; 2419 | animation-name: slideInLeft; 2420 | } 2421 | 2422 | @-webkit-keyframes slideInRight { 2423 | 0% { 2424 | opacity: 0; 2425 | -webkit-transform: translateX(2000px); 2426 | transform: translateX(2000px); 2427 | } 2428 | 2429 | 100% { 2430 | -webkit-transform: translateX(0); 2431 | transform: translateX(0); 2432 | } 2433 | } 2434 | 2435 | @keyframes slideInRight { 2436 | 0% { 2437 | opacity: 0; 2438 | -webkit-transform: translateX(2000px); 2439 | -ms-transform: translateX(2000px); 2440 | transform: translateX(2000px); 2441 | } 2442 | 2443 | 100% { 2444 | -webkit-transform: translateX(0); 2445 | -ms-transform: translateX(0); 2446 | transform: translateX(0); 2447 | } 2448 | } 2449 | 2450 | .slideInRight { 2451 | -webkit-animation-name: slideInRight; 2452 | animation-name: slideInRight; 2453 | } 2454 | 2455 | @-webkit-keyframes slideOutLeft { 2456 | 0% { 2457 | -webkit-transform: translateX(0); 2458 | transform: translateX(0); 2459 | } 2460 | 2461 | 100% { 2462 | opacity: 0; 2463 | -webkit-transform: translateX(-2000px); 2464 | transform: translateX(-2000px); 2465 | } 2466 | } 2467 | 2468 | @keyframes slideOutLeft { 2469 | 0% { 2470 | -webkit-transform: translateX(0); 2471 | -ms-transform: translateX(0); 2472 | transform: translateX(0); 2473 | } 2474 | 2475 | 100% { 2476 | opacity: 0; 2477 | -webkit-transform: translateX(-2000px); 2478 | -ms-transform: translateX(-2000px); 2479 | transform: translateX(-2000px); 2480 | } 2481 | } 2482 | 2483 | .slideOutLeft { 2484 | -webkit-animation-name: slideOutLeft; 2485 | animation-name: slideOutLeft; 2486 | } 2487 | 2488 | @-webkit-keyframes slideOutRight { 2489 | 0% { 2490 | -webkit-transform: translateX(0); 2491 | transform: translateX(0); 2492 | } 2493 | 2494 | 100% { 2495 | opacity: 0; 2496 | -webkit-transform: translateX(2000px); 2497 | transform: translateX(2000px); 2498 | } 2499 | } 2500 | 2501 | @keyframes slideOutRight { 2502 | 0% { 2503 | -webkit-transform: translateX(0); 2504 | -ms-transform: translateX(0); 2505 | transform: translateX(0); 2506 | } 2507 | 2508 | 100% { 2509 | opacity: 0; 2510 | -webkit-transform: translateX(2000px); 2511 | -ms-transform: translateX(2000px); 2512 | transform: translateX(2000px); 2513 | } 2514 | } 2515 | 2516 | .slideOutRight { 2517 | -webkit-animation-name: slideOutRight; 2518 | animation-name: slideOutRight; 2519 | } 2520 | 2521 | @-webkit-keyframes slideOutUp { 2522 | 0% { 2523 | -webkit-transform: translateY(0); 2524 | transform: translateY(0); 2525 | } 2526 | 2527 | 100% { 2528 | opacity: 0; 2529 | -webkit-transform: translateY(-2000px); 2530 | transform: translateY(-2000px); 2531 | } 2532 | } 2533 | 2534 | @keyframes slideOutUp { 2535 | 0% { 2536 | -webkit-transform: translateY(0); 2537 | -ms-transform: translateY(0); 2538 | transform: translateY(0); 2539 | } 2540 | 2541 | 100% { 2542 | opacity: 0; 2543 | -webkit-transform: translateY(-2000px); 2544 | -ms-transform: translateY(-2000px); 2545 | transform: translateY(-2000px); 2546 | } 2547 | } 2548 | 2549 | .slideOutUp { 2550 | -webkit-animation-name: slideOutUp; 2551 | animation-name: slideOutUp; 2552 | } 2553 | 2554 | @-webkit-keyframes hinge { 2555 | 0% { 2556 | -webkit-transform: rotate(0); 2557 | transform: rotate(0); 2558 | -webkit-transform-origin: top left; 2559 | transform-origin: top left; 2560 | -webkit-animation-timing-function: ease-in-out; 2561 | animation-timing-function: ease-in-out; 2562 | } 2563 | 2564 | 20%, 60% { 2565 | -webkit-transform: rotate(80deg); 2566 | transform: rotate(80deg); 2567 | -webkit-transform-origin: top left; 2568 | transform-origin: top left; 2569 | -webkit-animation-timing-function: ease-in-out; 2570 | animation-timing-function: ease-in-out; 2571 | } 2572 | 2573 | 40% { 2574 | -webkit-transform: rotate(60deg); 2575 | transform: rotate(60deg); 2576 | -webkit-transform-origin: top left; 2577 | transform-origin: top left; 2578 | -webkit-animation-timing-function: ease-in-out; 2579 | animation-timing-function: ease-in-out; 2580 | } 2581 | 2582 | 80% { 2583 | -webkit-transform: rotate(60deg) translateY(0); 2584 | transform: rotate(60deg) translateY(0); 2585 | opacity: 1; 2586 | -webkit-transform-origin: top left; 2587 | transform-origin: top left; 2588 | -webkit-animation-timing-function: ease-in-out; 2589 | animation-timing-function: ease-in-out; 2590 | } 2591 | 2592 | 100% { 2593 | -webkit-transform: translateY(700px); 2594 | transform: translateY(700px); 2595 | opacity: 0; 2596 | } 2597 | } 2598 | 2599 | @keyframes hinge { 2600 | 0% { 2601 | -webkit-transform: rotate(0); 2602 | -ms-transform: rotate(0); 2603 | transform: rotate(0); 2604 | -webkit-transform-origin: top left; 2605 | -ms-transform-origin: top left; 2606 | transform-origin: top left; 2607 | -webkit-animation-timing-function: ease-in-out; 2608 | animation-timing-function: ease-in-out; 2609 | } 2610 | 2611 | 20%, 60% { 2612 | -webkit-transform: rotate(80deg); 2613 | -ms-transform: rotate(80deg); 2614 | transform: rotate(80deg); 2615 | -webkit-transform-origin: top left; 2616 | -ms-transform-origin: top left; 2617 | transform-origin: top left; 2618 | -webkit-animation-timing-function: ease-in-out; 2619 | animation-timing-function: ease-in-out; 2620 | } 2621 | 2622 | 40% { 2623 | -webkit-transform: rotate(60deg); 2624 | -ms-transform: rotate(60deg); 2625 | transform: rotate(60deg); 2626 | -webkit-transform-origin: top left; 2627 | -ms-transform-origin: top left; 2628 | transform-origin: top left; 2629 | -webkit-animation-timing-function: ease-in-out; 2630 | animation-timing-function: ease-in-out; 2631 | } 2632 | 2633 | 80% { 2634 | -webkit-transform: rotate(60deg) translateY(0); 2635 | -ms-transform: rotate(60deg) translateY(0); 2636 | transform: rotate(60deg) translateY(0); 2637 | opacity: 1; 2638 | -webkit-transform-origin: top left; 2639 | -ms-transform-origin: top left; 2640 | transform-origin: top left; 2641 | -webkit-animation-timing-function: ease-in-out; 2642 | animation-timing-function: ease-in-out; 2643 | } 2644 | 2645 | 100% { 2646 | -webkit-transform: translateY(700px); 2647 | -ms-transform: translateY(700px); 2648 | transform: translateY(700px); 2649 | opacity: 0; 2650 | } 2651 | } 2652 | 2653 | .hinge { 2654 | -webkit-animation-name: hinge; 2655 | animation-name: hinge; 2656 | } 2657 | 2658 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2659 | 2660 | @-webkit-keyframes rollIn { 2661 | 0% { 2662 | opacity: 0; 2663 | -webkit-transform: translateX(-100%) rotate(-120deg); 2664 | transform: translateX(-100%) rotate(-120deg); 2665 | } 2666 | 2667 | 100% { 2668 | opacity: 1; 2669 | -webkit-transform: translateX(0px) rotate(0deg); 2670 | transform: translateX(0px) rotate(0deg); 2671 | } 2672 | } 2673 | 2674 | @keyframes rollIn { 2675 | 0% { 2676 | opacity: 0; 2677 | -webkit-transform: translateX(-100%) rotate(-120deg); 2678 | -ms-transform: translateX(-100%) rotate(-120deg); 2679 | transform: translateX(-100%) rotate(-120deg); 2680 | } 2681 | 2682 | 100% { 2683 | opacity: 1; 2684 | -webkit-transform: translateX(0px) rotate(0deg); 2685 | -ms-transform: translateX(0px) rotate(0deg); 2686 | transform: translateX(0px) rotate(0deg); 2687 | } 2688 | } 2689 | 2690 | .rollIn { 2691 | -webkit-animation-name: rollIn; 2692 | animation-name: rollIn; 2693 | } 2694 | 2695 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2696 | 2697 | @-webkit-keyframes rollOut { 2698 | 0% { 2699 | opacity: 1; 2700 | -webkit-transform: translateX(0px) rotate(0deg); 2701 | transform: translateX(0px) rotate(0deg); 2702 | } 2703 | 2704 | 100% { 2705 | opacity: 0; 2706 | -webkit-transform: translateX(100%) rotate(120deg); 2707 | transform: translateX(100%) rotate(120deg); 2708 | } 2709 | } 2710 | 2711 | @keyframes rollOut { 2712 | 0% { 2713 | opacity: 1; 2714 | -webkit-transform: translateX(0px) rotate(0deg); 2715 | -ms-transform: translateX(0px) rotate(0deg); 2716 | transform: translateX(0px) rotate(0deg); 2717 | } 2718 | 2719 | 100% { 2720 | opacity: 0; 2721 | -webkit-transform: translateX(100%) rotate(120deg); 2722 | -ms-transform: translateX(100%) rotate(120deg); 2723 | transform: translateX(100%) rotate(120deg); 2724 | } 2725 | } 2726 | 2727 | .rollOut { 2728 | -webkit-animation-name: rollOut; 2729 | animation-name: rollOut; 2730 | } 2731 | @-webkit-keyframes zoomIn { 2732 | from { 2733 | opacity: 0; 2734 | -webkit-transform: scale3d(.3, .3, .3); 2735 | transform: scale3d(.3, .3, .3); 2736 | } 2737 | 2738 | 50% { 2739 | opacity: 1; 2740 | } 2741 | } 2742 | 2743 | @keyframes zoomIn { 2744 | from { 2745 | opacity: 0; 2746 | -webkit-transform: scale3d(.3, .3, .3); 2747 | transform: scale3d(.3, .3, .3); 2748 | } 2749 | 2750 | 50% { 2751 | opacity: 1; 2752 | } 2753 | } 2754 | 2755 | .zoomIn { 2756 | -webkit-animation-name: zoomIn; 2757 | animation-name: zoomIn; 2758 | } 2759 | 2760 | @-webkit-keyframes zoomInDown { 2761 | from { 2762 | opacity: 0; 2763 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2764 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2765 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2766 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2767 | } 2768 | 2769 | 60% { 2770 | opacity: 1; 2771 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2772 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2773 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2774 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2775 | } 2776 | } 2777 | 2778 | @keyframes zoomInDown { 2779 | from { 2780 | opacity: 0; 2781 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2782 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2783 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2784 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2785 | } 2786 | 2787 | 60% { 2788 | opacity: 1; 2789 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2790 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2791 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2792 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2793 | } 2794 | } 2795 | 2796 | .zoomInDown { 2797 | -webkit-animation-name: zoomInDown; 2798 | animation-name: zoomInDown; 2799 | } 2800 | 2801 | @-webkit-keyframes zoomInLeft { 2802 | from { 2803 | opacity: 0; 2804 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2805 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2806 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2807 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2808 | } 2809 | 2810 | 60% { 2811 | opacity: 1; 2812 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2813 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2814 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2815 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2816 | } 2817 | } 2818 | 2819 | @keyframes zoomInLeft { 2820 | from { 2821 | opacity: 0; 2822 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2823 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2824 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2825 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2826 | } 2827 | 2828 | 60% { 2829 | opacity: 1; 2830 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2831 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2832 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2833 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2834 | } 2835 | } 2836 | 2837 | .zoomInLeft { 2838 | -webkit-animation-name: zoomInLeft; 2839 | animation-name: zoomInLeft; 2840 | } 2841 | 2842 | @-webkit-keyframes zoomInRight { 2843 | from { 2844 | opacity: 0; 2845 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2846 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2847 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2848 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2849 | } 2850 | 2851 | 60% { 2852 | opacity: 1; 2853 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2854 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2855 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2856 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2857 | } 2858 | } 2859 | 2860 | @keyframes zoomInRight { 2861 | from { 2862 | opacity: 0; 2863 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2864 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2865 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2866 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2867 | } 2868 | 2869 | 60% { 2870 | opacity: 1; 2871 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2872 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2873 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2874 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2875 | } 2876 | } 2877 | 2878 | .zoomInRight { 2879 | -webkit-animation-name: zoomInRight; 2880 | animation-name: zoomInRight; 2881 | } 2882 | 2883 | @-webkit-keyframes zoomInUp { 2884 | from { 2885 | opacity: 0; 2886 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2887 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2888 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2889 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2890 | } 2891 | 2892 | 60% { 2893 | opacity: 1; 2894 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2895 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2896 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2897 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2898 | } 2899 | } 2900 | 2901 | @keyframes zoomInUp { 2902 | from { 2903 | opacity: 0; 2904 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2905 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2906 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2907 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2908 | } 2909 | 2910 | 60% { 2911 | opacity: 1; 2912 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2913 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2914 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2915 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2916 | } 2917 | } 2918 | 2919 | .zoomInUp { 2920 | -webkit-animation-name: zoomInUp; 2921 | animation-name: zoomInUp; 2922 | } 2923 | 2924 | @-webkit-keyframes zoomOut { 2925 | from { 2926 | opacity: 1; 2927 | } 2928 | 2929 | 50% { 2930 | opacity: 0; 2931 | -webkit-transform: scale3d(.3, .3, .3); 2932 | transform: scale3d(.3, .3, .3); 2933 | } 2934 | 2935 | to { 2936 | opacity: 0; 2937 | } 2938 | } 2939 | 2940 | @keyframes zoomOut { 2941 | from { 2942 | opacity: 1; 2943 | } 2944 | 2945 | 50% { 2946 | opacity: 0; 2947 | -webkit-transform: scale3d(.3, .3, .3); 2948 | transform: scale3d(.3, .3, .3); 2949 | } 2950 | 2951 | to { 2952 | opacity: 0; 2953 | } 2954 | } 2955 | 2956 | .zoomOut { 2957 | -webkit-animation-name: zoomOut; 2958 | animation-name: zoomOut; 2959 | } 2960 | 2961 | @-webkit-keyframes zoomOutDown { 2962 | 40% { 2963 | opacity: 1; 2964 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2965 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2966 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2967 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2968 | } 2969 | 2970 | to { 2971 | opacity: 0; 2972 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2973 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2974 | -webkit-transform-origin: center bottom; 2975 | transform-origin: center bottom; 2976 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2977 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2978 | } 2979 | } 2980 | 2981 | @keyframes zoomOutDown { 2982 | 40% { 2983 | opacity: 1; 2984 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2985 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2986 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2987 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2988 | } 2989 | 2990 | to { 2991 | opacity: 0; 2992 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2993 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2994 | -webkit-transform-origin: center bottom; 2995 | transform-origin: center bottom; 2996 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2997 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2998 | } 2999 | } 3000 | 3001 | .zoomOutDown { 3002 | -webkit-animation-name: zoomOutDown; 3003 | animation-name: zoomOutDown; 3004 | } 3005 | 3006 | @-webkit-keyframes zoomOutLeft { 3007 | 40% { 3008 | opacity: 1; 3009 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 3010 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 3011 | } 3012 | 3013 | to { 3014 | opacity: 0; 3015 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 3016 | transform: scale(.1) translate3d(-2000px, 0, 0); 3017 | -webkit-transform-origin: left center; 3018 | transform-origin: left center; 3019 | } 3020 | } 3021 | 3022 | @keyframes zoomOutLeft { 3023 | 40% { 3024 | opacity: 1; 3025 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 3026 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 3027 | } 3028 | 3029 | to { 3030 | opacity: 0; 3031 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 3032 | transform: scale(.1) translate3d(-2000px, 0, 0); 3033 | -webkit-transform-origin: left center; 3034 | transform-origin: left center; 3035 | } 3036 | } 3037 | 3038 | .zoomOutLeft { 3039 | -webkit-animation-name: zoomOutLeft; 3040 | animation-name: zoomOutLeft; 3041 | } 3042 | 3043 | @-webkit-keyframes zoomOutRight { 3044 | 40% { 3045 | opacity: 1; 3046 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3047 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3048 | } 3049 | 3050 | to { 3051 | opacity: 0; 3052 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 3053 | transform: scale(.1) translate3d(2000px, 0, 0); 3054 | -webkit-transform-origin: right center; 3055 | transform-origin: right center; 3056 | } 3057 | } 3058 | 3059 | @keyframes zoomOutRight { 3060 | 40% { 3061 | opacity: 1; 3062 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3063 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3064 | } 3065 | 3066 | to { 3067 | opacity: 0; 3068 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 3069 | transform: scale(.1) translate3d(2000px, 0, 0); 3070 | -webkit-transform-origin: right center; 3071 | transform-origin: right center; 3072 | } 3073 | } 3074 | 3075 | .zoomOutRight { 3076 | -webkit-animation-name: zoomOutRight; 3077 | animation-name: zoomOutRight; 3078 | } 3079 | 3080 | @-webkit-keyframes zoomOutUp { 3081 | 40% { 3082 | opacity: 1; 3083 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3084 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3085 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3086 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3087 | } 3088 | 3089 | to { 3090 | opacity: 0; 3091 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3092 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3093 | -webkit-transform-origin: center bottom; 3094 | transform-origin: center bottom; 3095 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3096 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3097 | } 3098 | } 3099 | 3100 | @keyframes zoomOutUp { 3101 | 40% { 3102 | opacity: 1; 3103 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3104 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3105 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3106 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3107 | } 3108 | 3109 | to { 3110 | opacity: 0; 3111 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3112 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3113 | -webkit-transform-origin: center bottom; 3114 | transform-origin: center bottom; 3115 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3116 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3117 | } 3118 | } 3119 | 3120 | .zoomOutUp { 3121 | -webkit-animation-name: zoomOutUp; 3122 | animation-name: zoomOutUp; 3123 | } -------------------------------------------------------------------------------- /src/assets/css/main.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Oswald:wght@200&display=swap'); 3 | 4 | @import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Oswald:wght@200&display=swap'); 5 | 6 | @import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap'); 7 | 8 | @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap'); 9 | 10 | :root { 11 | --light-white: #f2fbfc ; 12 | --light-color: #ffffff; 13 | --medium-color: #B9BAB3; 14 | --dark-color: #001F26; 15 | --highlight-color: #cfe5eb; 16 | --accent-color: #6d8a92; 17 | 18 | } 19 | 20 | * { 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | html { 26 | scroll-behavior: smooth; 27 | 28 | } 29 | 30 | body { 31 | 32 | letter-spacing: 0.2em; 33 | font-weight: normal; 34 | font-style: normal; 35 | overflow-x: hidden; 36 | 37 | } 38 | 39 | h1, h2, h3 { 40 | font-family: 'Alex Brush', sans-serif; 41 | } 42 | 43 | p { 44 | font-family: 'Oswald', sans-serif; 45 | } 46 | 47 | /* h2 { 48 | font-family: 'Roboto', sans-serif; 49 | } */ 50 | 51 | h3 { 52 | font-family: 'PT Sans', sans-serif; 53 | } 54 | 55 | 56 | 57 | @media only screen and (min-width: 480px) and (max-width: 767px) { 58 | .container { 59 | width: 450px; 60 | } 61 | } 62 | 63 | .section { 64 | padding-top: 100px; 65 | padding-bottom: 100px; 66 | position: relative; 67 | } 68 | 69 | 70 | 71 | @media only screen and (min-width: 768px) and (max-width: 991px) { 72 | .section { 73 | padding-top: 60px; 74 | padding-bottom: 60px; 75 | } 76 | } 77 | 78 | @media (max-width: 767px) { 79 | .section { 80 | padding-top: 50px; 81 | padding-bottom: 50px; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/assets/fonts/LineIcons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pfrommer1982/Complete_Portfolio/4454476e1cfe6438c6f48e7db883263310cac0f8/src/assets/fonts/LineIcons.eot -------------------------------------------------------------------------------- /src/assets/fonts/LineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pfrommer1982/Complete_Portfolio/4454476e1cfe6438c6f48e7db883263310cac0f8/src/assets/fonts/LineIcons.ttf -------------------------------------------------------------------------------- /src/assets/fonts/LineIcons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pfrommer1982/Complete_Portfolio/4454476e1cfe6438c6f48e7db883263310cac0f8/src/assets/fonts/LineIcons.woff -------------------------------------------------------------------------------- /src/assets/fonts/LineIcons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pfrommer1982/Complete_Portfolio/4454476e1cfe6438c6f48e7db883263310cac0f8/src/assets/fonts/LineIcons.woff2 -------------------------------------------------------------------------------- /src/assets/images/Jonathan Dominion Template.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pfrommer1982/Complete_Portfolio/4454476e1cfe6438c6f48e7db883263310cac0f8/src/assets/images/Jonathan Dominion Template.gif -------------------------------------------------------------------------------- /src/components/1. Header Components/Hero/Hero.css: -------------------------------------------------------------------------------- 1 | @import url('../../../assets/css/main.css'); 2 | 3 | .hero-area { 4 | position: relative; 5 | padding: 25px 0 100px 0; 6 | background-size: 150% auto; 7 | filter: brightness(0.8) contrast(1.2); 8 | background-position: right bottom ; 9 | background-repeat: no-repeat; 10 | } 11 | 12 | .hero-content, 13 | .name-container { 14 | text-align: center; 15 | } 16 | 17 | .hero-content h1 { 18 | font-size: 4rem; 19 | font-weight: bold; 20 | text-transform: uppercase; 21 | color: var(--light-color); 22 | margin: 0; 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | } 27 | 28 | .hero-content h1 span { 29 | border-top: 1px solid var(--light-color); 30 | padding-top: 10px; 31 | } 32 | 33 | .hero-content p { 34 | margin-top: 15px; 35 | margin-bottom: 2em; 36 | 37 | } 38 | 39 | #button { 40 | padding: 0.4em 3em; 41 | margin-top: 0.6em; 42 | border: 1px solid var(--accent-color); 43 | background-color: var(--accent-color); 44 | border-radius: 6px; 45 | } 46 | 47 | #button:hover { 48 | background-color: var(--highlight-color); 49 | border-color: var(--highlight-color); 50 | } 51 | 52 | .btn:hover { 53 | box-shadow: 0px 5px 20px var(--dark-color); 54 | background-color: var(--accent-color); 55 | } 56 | 57 | .hero-area .hero-content { 58 | border-radius: 0; 59 | position: relative; 60 | z-index: 1; 61 | text-align: center; 62 | } 63 | 64 | .hero-area .hero-content h1 { 65 | font-size: 10vh; 66 | padding-bottom: 0.1em; 67 | font-weight: 800; 68 | line-height: 50px; 69 | color: var(--highlight-color); 70 | text-shadow: 0px 3px 8px var(--dark-color); 71 | text-transform: capitalize; 72 | align-items: center; 73 | --text-shadow-color: 0px 3px 8px var(--dark-color); 74 | } 75 | 76 | h1.first-name { 77 | margin-top: 0.8em; 78 | margin-bottom: 0.4em; 79 | padding-bottom: 1em; 80 | letter-spacing: 0.4em; 81 | text-align: center; 82 | color: var(--highlight-color); 83 | } 84 | 85 | h1.last-name { 86 | text-align: center; 87 | padding-bottom: 2.4em; 88 | margin-bottom: 2em; 89 | } 90 | 91 | .hero-area .hero-content h1 span { 92 | display: block; 93 | } 94 | 95 | .hero-area .hero-content p { 96 | margin-top: 2.8em; 97 | font-size: 2em; 98 | color: var(--light-color); 99 | } 100 | 101 | .hero-area .hero-content { 102 | margin-top: 40px; 103 | } 104 | 105 | .hero-area .hero-content .btn { 106 | color: var(--highlight-color); 107 | margin-right: 12px; 108 | } 109 | 110 | .hero-area .hero-content .btn i { 111 | display: flex; 112 | font-size: 1.2em; 113 | text-align: center; 114 | align-items: center; 115 | } 116 | 117 | .hero-area .hero-content .btn:hover { 118 | background-color: var(--highlight-color); 119 | color: var(--light-color); 120 | text-align: center; 121 | } 122 | 123 | @keyframes pulse-border { 124 | 0% { 125 | transform: scale(1); 126 | opacity: 1; 127 | } 128 | 100% { 129 | transform: scale(1.3); 130 | opacity: 0; 131 | } 132 | } 133 | 134 | @keyframes pulse-border-2 { 135 | 0% { 136 | transform: scale(1); 137 | opacity: 1; 138 | } 139 | 100% { 140 | transform: scale(1.5); 141 | opacity: 0; 142 | } 143 | } 144 | 145 | @media only screen and (min-width: 992px) and (max-width: 1199px) { 146 | .hero-area { 147 | position: relative; 148 | padding: 25px 0 100px 0; 149 | background-size: 150% auto; 150 | filter: brightness(0.8) contrast(1.2); 151 | background-position: right bottom ; 152 | background-repeat: no-repeat; 153 | } 154 | .hero-area .hero-content h1 { 155 | font-size: 10vh; 156 | } 157 | 158 | p { 159 | margin-bottom: 250px; 160 | } 161 | } 162 | 163 | @media only screen and (min-width: 768px) and (max-width: 991px) { 164 | 165 | .hero-area { 166 | position: relative; 167 | padding: 25px 0 100px 0; 168 | background-size: 150% auto; 169 | filter: brightness(0.8) contrast(1.2); 170 | background-position: right bottom ; 171 | background-repeat: no-repeat; 172 | } 173 | 174 | .hero-area .hero-content { 175 | text-align: center; 176 | } 177 | 178 | .hero-area .hero-content h1 { 179 | font-size: 8vh; 180 | font-weight: 700; 181 | line-height: 38px; 182 | } 183 | 184 | .hero-area .hero-content p { 185 | font-size: 2.5vh; 186 | } 187 | 188 | h1.first-name { 189 | margin-top: 30px; 190 | } 191 | 192 | h1.last-name { 193 | margin-bottom: 1px; 194 | } 195 | } 196 | 197 | @media (max-width: 767px) { 198 | .hero-area { 199 | position: relative; 200 | padding: 25px 0 100px 0; 201 | background-size: 150% auto; 202 | filter: brightness(0.8) contrast(1.2); 203 | background-position: right bottom ; 204 | background-repeat: no-repeat; 205 | } 206 | .hero-area .hero-content { 207 | padding: 0 10px; 208 | text-align: center; 209 | } 210 | 211 | .hero-area .hero-content h1 { 212 | font-size: 5vh; 213 | line-height: 32px; 214 | } 215 | 216 | .hero-area .hero-content p { 217 | margin-top: 15px; 218 | font-size: 2.5vh; 219 | } 220 | h1.first-name { 221 | margin-top: 0px; 222 | } 223 | 224 | h1.last-name { 225 | margin-bottom: 1px; 226 | } 227 | } 228 | 229 | @media (max-width: 500px) { 230 | .hero-area { 231 | position: relative; 232 | padding: 25px 0 100px 0; 233 | background-size: 150% auto; 234 | filter: brightness(0.8) contrast(1.2); 235 | background-position: right bottom ; 236 | background-repeat: no-repeat; 237 | } 238 | 239 | h1.first-name { 240 | margin-top: 0px; 241 | } 242 | 243 | h1.last-name { 244 | margin-bottom: 1px; 245 | } 246 | } 247 | 248 | 249 | 250 | @media only screen and (max-width: 767px) { 251 | .btn { 252 | margin-bottom: 5px; 253 | } 254 | } 255 | 256 | @media only screen and (min-width: 768px) { 257 | .btn { 258 | margin-right: 5px; 259 | } 260 | } 261 | -------------------------------------------------------------------------------- /src/components/1. Header Components/Hero/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { name, socialProfiles } from '../../../your_info'; 3 | import Navbar from '../Navbar/Navbar'; 4 | import Typewriter from '../Typewriter/Typewriter'; 5 | import './Hero.css'; 6 | import { backgroundImageUrl } from '../../../your_info'; 7 | 8 | 9 | const Hero = () => { 10 | const { firstname, lastname } = name; 11 | 12 | const heroStyle = { 13 | backgroundImage: `url(${backgroundImageUrl})`, 14 | }; 15 | 16 | return ( 17 |
18 | 19 |
20 |
21 |
22 |
23 | 24 |

{firstname}

25 |

{lastname}

26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | {socialProfiles.map((profile, index) => ( 34 | 41 | 42 | 43 | ))} 44 |
45 |
46 |
47 |
48 |
49 | ); 50 | }; 51 | 52 | export default Hero; 53 | -------------------------------------------------------------------------------- /src/components/1. Header Components/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | @import url('../../../assets/css/main.css'); 2 | 3 | .hero-blur { 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | height: 100%; 9 | z-index: 3; 10 | backdrop-filter: blur(8px); 11 | pointer-events: none; 12 | transition: opacity 0.3s ease-in-out; 13 | } 14 | 15 | .hero-blur.blur { 16 | opacity: 0; 17 | pointer-events: auto; 18 | } 19 | 20 | .slide-in { 21 | animation: slide-in 0.3s ease-in-out forwards; 22 | } 23 | 24 | @keyframes slide-in { 25 | from { 26 | transform: translateY(-100%); 27 | } 28 | 29 | to { 30 | transform: translateY(0); 31 | } 32 | } 33 | 34 | .nav-item { 35 | padding-top: 20px; 36 | } 37 | 38 | .navbar-toggler:focus { 39 | box-shadow: none !important; 40 | } 41 | 42 | .nav-link { 43 | font-size: 18px; 44 | text-transform: uppercase; 45 | transition: all 0.3s; 46 | padding: 5px 0; 47 | position: relative; 48 | display: flex; 49 | align-items: center; 50 | } 51 | 52 | .nav-link::before { 53 | content: ''; 54 | position: absolute; 55 | width: 100%; 56 | height: 2px; 57 | bottom: -5px; 58 | left: 0; 59 | transform: scaleX(0); 60 | transform-origin: center; 61 | transition: transform 0.3s; 62 | } 63 | 64 | .nav-link:hover { 65 | text-decoration: none; 66 | } 67 | 68 | .link-span { 69 | color: var(--light-color); 70 | } 71 | 72 | .link-span:hover { 73 | color: var(--light-white); 74 | } 75 | 76 | .nav-link:hover::before { 77 | transform: scaleX(1); 78 | background-color: var(--accent-color); 79 | } 80 | 81 | .navbar-nav li { 82 | padding-left: 35px; 83 | margin-top: -15px; 84 | } 85 | 86 | .icon { 87 | padding-right: 5px; 88 | padding-left: 5px; 89 | transform: translateY(-2px); 90 | } 91 | 92 | .nav-link:hover .icon { 93 | animation: download 0.82s cubic-bezier(0.2, 0.46, 0.69, 0.47) both; 94 | animation-delay: 150ms; 95 | } 96 | 97 | @keyframes download { 98 | 10%, 99 | 90% { 100 | transform: translate3d(0, -2px, 0); 101 | } 102 | 103 | 20%, 104 | 80% { 105 | transform: translate3d(0, 4px, 0); 106 | } 107 | 108 | 30%, 109 | 50%, 110 | 70% { 111 | transform: translate3d(0, -8px, 0); 112 | } 113 | 114 | 40%, 115 | 60% { 116 | transform: translate3d(0, 8px, 0); 117 | } 118 | } 119 | 120 | @media screen and (max-width: 991px) { 121 | #nav-length { 122 | width: 100%; 123 | } 124 | 125 | .border-hover { 126 | border-top: 0; 127 | } 128 | 129 | .nav-item { 130 | padding-top: 15px; 131 | margin-top: 10px; 132 | } 133 | 134 | .navbar-nav { 135 | align-items: center; 136 | margin-top: 40px; 137 | } 138 | 139 | .navbar li { 140 | padding-top: 20px; 141 | } 142 | 143 | .navbar-collapse { 144 | position: fixed; 145 | top: 0; 146 | bottom: 0; 147 | right: -100%; 148 | width: 70%; 149 | max-width: 300px; 150 | background-color: var(--medium-color); 151 | transition: right 0.3s; 152 | z-index: 999; 153 | box-shadow: var(--dark-color) 5px; 154 | } 155 | 156 | .navbar-open .navbar-collapse { 157 | right: 0; 158 | } 159 | 160 | .navbar-toggler.custom-toggler { 161 | position: fixed; 162 | top: 15px; 163 | right: 15px; 164 | z-index: 1000; 165 | background-color: transparent; 166 | border: none; 167 | outline: none; 168 | cursor: pointer; 169 | padding: 0; 170 | width: 30px; 171 | height: 30px; 172 | display: flex; 173 | flex-direction: column; 174 | justify-content: space-between; 175 | } 176 | 177 | .navbar-toggler.custom-toggler span { 178 | display: block; 179 | width: 100%; 180 | height: 2px; 181 | background-color: var(--light-color); 182 | margin-bottom: 4px; 183 | transition: transform 0.3s, opacity 0.3s; 184 | } 185 | 186 | .navbar-toggler.custom-toggler.open span:nth-child(1) { 187 | transform-origin: top left; 188 | transform: rotate(45deg) translate(3px, -1px); 189 | } 190 | 191 | .navbar-toggler.custom-toggler.open span:nth-child(2) { 192 | opacity: 0; 193 | } 194 | 195 | .navbar-toggler.custom-toggler.open span:nth-child(3) { 196 | transform-origin: bottom left; 197 | transform: rotate(-45deg) translate(3px, 1px); 198 | } 199 | 200 | .navbar-toggler.custom-toggler.open span:nth-child(1), 201 | .navbar-toggler.custom-toggler.open span:nth-child(2), 202 | .navbar-toggler.custom-toggler.open span:nth-child(3) { 203 | background-color: var(--light-color); 204 | } 205 | 206 | .navbar-nav { 207 | display: flex; 208 | flex-direction: column; 209 | align-items: flex-start; 210 | height: 100%; 211 | } 212 | 213 | .nav-item { 214 | margin-bottom: 2em; 215 | padding-left: 20px; 216 | } 217 | 218 | .nav-link { 219 | font-size: 18px; 220 | text-transform: uppercase; 221 | transition: all 0.3s; 222 | padding: 5px 0; 223 | position: relative; 224 | display: flex; 225 | align-items: center; 226 | } 227 | 228 | .nav-link::before { 229 | content: ''; 230 | position: absolute; 231 | width: 100%; 232 | height: 2px; 233 | background-color: var(--hightlight-color); 234 | bottom: -5px; 235 | left: 0; 236 | transform: scaleX(0); 237 | transform-origin: center; 238 | transition: transform 0.3s; 239 | } 240 | 241 | .nav-link:hover { 242 | text-decoration: none; 243 | } 244 | 245 | .nav-link:hover::before { 246 | transform: scaleX(1); 247 | } 248 | 249 | @media screen and (min-width: 992px) { 250 | .nav-item:hover .nav-link::before { 251 | transform: scaleX(1); 252 | background-color: var(--accent-color); 253 | } 254 | } 255 | } 256 | 257 | @media screen and (max-width: 500px) { 258 | .navbar-collapse { 259 | position: fixed; 260 | top: 0; 261 | bottom: 0; 262 | right: -100%; 263 | width: 70%; 264 | max-width: 300px; 265 | background-color: var(--medium-color); 266 | transition: right 0.3s; 267 | z-index: 999; 268 | 269 | } 270 | } 271 | -------------------------------------------------------------------------------- /src/components/1. Header Components/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import './Navbar.css'; 3 | import { name } from '../../../your_info'; 4 | 5 | 6 | const Navbar = () => { 7 | const { url } = name; 8 | const [isMenuOpen, setIsMenuOpen] = useState(false); 9 | 10 | const toggleMenu = () => { 11 | setIsMenuOpen(!isMenuOpen); 12 | }; 13 | 14 | useEffect(() => { 15 | const handleResize = () => { 16 | if (window.innerWidth >= 992) { 17 | setIsMenuOpen(false); 18 | } 19 | }; 20 | 21 | window.addEventListener('resize', handleResize); 22 | 23 | return () => { 24 | window.removeEventListener('resize', handleResize); 25 | }; 26 | }, []); 27 | 28 | return ( 29 | <> 30 | 77 | {isMenuOpen &&
} 78 | 79 | ); 80 | }; 81 | 82 | export default Navbar; 83 | -------------------------------------------------------------------------------- /src/components/1. Header Components/Typewriter/Typewriter.css: -------------------------------------------------------------------------------- 1 | @import url('../../../assets/css/main.css'); 2 | 3 | 4 | .section.aboutme p { 5 | color: var(--accent-color); 6 | font-size: 24px; 7 | font-weight: bold; 8 | margin-top: 10px; 9 | 10 | } 11 | 12 | .blinking-cursor { 13 | display: inline-block; 14 | vertical-align: bottom; 15 | width: 0.2em; 16 | height: 1.2em; 17 | margin-left: 0.1em; 18 | background-color: var(--highlight-color); 19 | animation: blink 1s infinite; 20 | } 21 | 22 | @keyframes blink { 23 | 0% { 24 | opacity: 0; 25 | } 26 | 50% { 27 | opacity: 1; 28 | } 29 | 100% { 30 | opacity: 0; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/1. Header Components/Typewriter/Typewriter.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useMemo } from 'react'; 2 | import { typeWriterText } from '../../../your_info' 3 | import './Typewriter.css'; 4 | 5 | 6 | const typing_speed = 150; 7 | const backspace_speed = 50; 8 | 9 | function Typewriter() { 10 | const [skill, setSkill] = useState(""); 11 | const [isDeleting, setIsDeleting] = useState(false); 12 | const [index, setIndex] = useState(0); 13 | const [isFullyDisplayed, setIsFullyDisplayed] = useState(false); 14 | 15 | useEffect(() => { 16 | let interval = setInterval(() => { 17 | if (isDeleting) { 18 | setSkill(prevSkill => prevSkill.substring(0, prevSkill.length - 1)); 19 | if (skill === '') { 20 | setIsDeleting(false); 21 | setIsFullyDisplayed(false); 22 | } 23 | } else { 24 | const nextSkill = typeWriterText[index]; 25 | setSkill(prevSkill => nextSkill.substring(0, prevSkill.length + 1)); 26 | if (skill === nextSkill) { 27 | setIsFullyDisplayed(true); 28 | setTimeout(() => { 29 | setIsDeleting(true); 30 | setTimeout(() => { 31 | setIsFullyDisplayed(false); 32 | setIndex((index + 1) % typeWriterText.length); 33 | }, 500); 34 | }, 1000); 35 | } 36 | } 37 | }, isFullyDisplayed ? backspace_speed : typing_speed); 38 | 39 | return () => clearInterval(interval); 40 | }, [skill, isDeleting, index, isFullyDisplayed]); 41 | 42 | const blinkingCursor = useMemo(() => { 43 | return isFullyDisplayed ? '' : _; 44 | }, [isFullyDisplayed]); 45 | 46 | return ( 47 |

{skill}{blinkingCursor}

48 | ); 49 | } 50 | 51 | export default Typewriter; 52 | -------------------------------------------------------------------------------- /src/components/2. Content Components/Achievement/Achievement.css: -------------------------------------------------------------------------------- 1 | @import url('../../../assets/css/main.css'); 2 | 3 | .our-achievement { 4 | background-color: var(--dark-color); 5 | text-align: center; 6 | padding: 130px 0; 7 | } 8 | 9 | @media only screen and (min-width: 768px) and (max-width: 991px) { 10 | .our-achievement { 11 | padding: 80px 0; 12 | } 13 | } 14 | 15 | @media (max-width: 767px) { 16 | .our-achievement { 17 | padding: 60px 0; 18 | } 19 | } 20 | 21 | .our-achievement .title h2 { 22 | color: var(--light-color); 23 | font-weight: 700; 24 | font-size: 35px; 25 | margin-bottom: 10px; 26 | } 27 | 28 | .our-achievement .title p { 29 | color: var(--light-color); 30 | } 31 | 32 | .our-achievement .single-achievement { 33 | margin-top: 50px; 34 | text-align: center; 35 | padding: 0px 10px; 36 | } 37 | 38 | .our-achievement .single-achievement h3 { 39 | font-size: 35px; 40 | font-weight: 800; 41 | display: block; 42 | margin-bottom: 5px; 43 | color: var(--highlight-color); 44 | } 45 | 46 | .our-achievement .single-achievement p { 47 | font-size: 15px; 48 | color: var(--light-color); 49 | font-weight: 500; 50 | text-transform: capitalize; 51 | } 52 | 53 | @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { 54 | .our-achievement .title h2 { 55 | font-size: 24px; 56 | line-height: 32px; 57 | } 58 | .our-achievement .single-achievement { 59 | margin-top: 30px; 60 | } 61 | .our-achievement .single-achievement h3 { 62 | font-size: 28px; 63 | } 64 | } -------------------------------------------------------------------------------- /src/components/2. Content Components/Achievement/Achievement.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from 'react'; 2 | import CountUp from 'react-countup'; 3 | import { useInView } from 'react-intersection-observer'; 4 | import './Achievement.css'; 5 | import { achievements } from '../../../your_info'; 6 | 7 | const Achievement = () => { 8 | const [isVisible, setIsVisible] = useState(false); 9 | const [ref, inView] = useInView({ 10 | triggerOnce: true, 11 | threshold: 0.1, 12 | }); 13 | 14 | useEffect(() => { 15 | if (inView) { 16 | setIsVisible(true); 17 | } 18 | }, [inView]); 19 | 20 | return ( 21 |
22 |
23 |
24 |
25 |
26 |

"Lorem ipsum dolor sit amet, consectetur adipiscing"

27 |

Fusce at libero id massa ornare molestie sed eu tellus.

28 |
29 |
30 |
31 |
32 |
33 |
34 | {achievements.map((info, index) => ( 35 |
36 |
37 | {isVisible && ( 38 |

39 | 40 | {info.unit} 41 |

42 | )} 43 |

{info.word}

44 |
45 |
46 | ))} 47 |
48 |
49 |
50 |
51 |
52 | ); 53 | }; 54 | 55 | export default Achievement; 56 | -------------------------------------------------------------------------------- /src/components/2. Content Components/Projects/Projects.css: -------------------------------------------------------------------------------- 1 | @import url('../../../assets/css/main.css'); 2 | 3 | .demo-container { 4 | position: relative; 5 | width: 100%; 6 | height: 0; 7 | padding-bottom: 75%; 8 | } 9 | 10 | .demo-container img, 11 | .demo-container iframe { 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | width: 100%; 16 | height: 100%; 17 | } 18 | 19 | h2, h3, p { 20 | text-align: center; 21 | } 22 | 23 | 24 | 25 | .card-content { 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: space-between; 29 | height: 100%; 30 | } 31 | 32 | .card-header { 33 | margin-bottom: 1rem; 34 | background-color: var(--light-color)!important; 35 | 36 | } 37 | 38 | .card-title { 39 | font-size: 1.5rem; 40 | font-weight: bold; 41 | } 42 | 43 | .card-description { 44 | margin-top: 0.5rem; 45 | } 46 | 47 | .card-footer { 48 | display: flex; 49 | justify-content: space-between; 50 | align-items: center; 51 | margin-top: 1rem; 52 | background-color: var(--light-color)!important; 53 | border: none !important; 54 | } 55 | 56 | .card-footer .btn { 57 | flex: 1; 58 | margin: 0 0.5rem; 59 | } 60 | 61 | .card { 62 | background-color: var(--light-color); 63 | width: 100%; 64 | border-radius: 6px; 65 | box-shadow: 0 2px 4px var(--medium-color); 66 | margin-bottom: 20px; 67 | margin-right: 20px; 68 | margin-left: 20px; 69 | } 70 | 71 | 72 | .card:last-child { 73 | margin-right: 0; 74 | } 75 | 76 | .card-content { 77 | margin-left: -20px; 78 | margin-right: 20px; 79 | padding: 20px; 80 | background-color: var(--light-color) !important; 81 | } 82 | 83 | .card-title { 84 | font-size: 18px; 85 | font-weight: bold; 86 | margin-bottom: 10px; 87 | } 88 | 89 | .card-description { 90 | margin-bottom: 20px; 91 | } 92 | 93 | .btn-primary { 94 | background-color: var(--accent-color) !important; 95 | color: var(--dark-color) !important; 96 | border-radius: 4px; 97 | border: none !important; 98 | padding: 8px 16px; 99 | cursor: pointer; 100 | } 101 | 102 | .btn-primary:hover { 103 | background-color: var(--highlight-color) !important; 104 | color: var(--dark-color) !important; 105 | transform: translateY(-1px); 106 | } 107 | 108 | .btn-secondary { 109 | background-color: var(--medium-color) !important; 110 | color: var(--light-color) !important; 111 | border-radius: 4px; 112 | border: none !important; 113 | padding: 8px 16px; 114 | cursor: pointer; 115 | } 116 | 117 | .btn-secondary:hover { 118 | background-color: var(--medium-color) !important; 119 | color: var(--dark-color) !important; 120 | transform: translateY(-1px); 121 | } 122 | 123 | 124 | .iframe-container { 125 | position: relative; 126 | width: 100%; 127 | height: 400px; 128 | } 129 | 130 | .iframe-container iframe { 131 | position: absolute; 132 | top: 0; 133 | left: 0; 134 | width: 100%; 135 | height: 100%; 136 | border: 0; 137 | } 138 | 139 | .button-container { 140 | display: flex; 141 | justify-content: center; 142 | align-items: center; 143 | } 144 | 145 | .button-container .btn { 146 | flex: 1; 147 | margin: 0 5px; 148 | text-align: center; 149 | } 150 | 151 | .slick-prev:before, 152 | .slick-next:before { 153 | color: var(--dark-color); 154 | font-size: 30px; 155 | } 156 | 157 | .slick-prev { 158 | left: -30px; 159 | } 160 | 161 | .slick-next { 162 | right: -30px; 163 | } 164 | -------------------------------------------------------------------------------- /src/components/2. Content Components/Projects/Projects.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Projects.css'; 3 | import { projectData } from '../../../your_info'; 4 | import Slider from 'react-slick'; 5 | import 'slick-carousel/slick/slick.css'; 6 | import 'slick-carousel/slick/slick-theme.css'; 7 | 8 | const Projects = () => { 9 | const settings = { 10 | dots: true, 11 | infinite: true, 12 | speed: 500, 13 | slidesToShow: 1, // Aangepaste waarde 14 | slidesToScroll: 1, 15 | responsive: [ 16 | { 17 | breakpoint: 768, 18 | settings: { 19 | slidesToShow: 1, 20 | }, 21 | }, 22 | { 23 | breakpoint: 992, 24 | settings: { 25 | slidesToShow: 1, 26 | }, 27 | }, 28 | ], 29 | }; 30 | 31 | 32 | const renderDemoContent = (project) => { 33 | if (isImageURL(project.demoUrl)) { 34 | return Project Thumbnail; 35 | } else { 36 | return