├── .vscode └── settings.json ├── Project 1 - Responsive Card Slider ├── README.md ├── Screenshot.png ├── index.html ├── script.js └── style.css ├── Project 2 - Lux ├── README.md ├── Screen.png ├── css │ ├── all.min.css │ ├── lux.css │ ├── master.css │ └── normalize.css ├── images │ ├── Alquds-2009-08-15-16.pdf │ ├── Course Intro_Memories.pdf │ ├── about.jpg │ ├── landing.jpg │ ├── logo.png │ ├── portfolio-1.jpg │ ├── portfolio-2.jpg │ ├── portfolio-3.jpg │ └── services.jpg ├── index.html └── webfonts │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff2 │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff2 │ ├── fa-v4compatibility.ttf │ └── fa-v4compatibility.woff2 ├── Project 3 - Portfolio ├── README.md ├── home.jpg ├── index.css ├── index.html ├── portfolio-preview.png └── script.js ├── Project 4 - Product-Landing-Page ├── README.md ├── index.html ├── product-landing-preview.png └── style.css ├── Project 5 - Adidas ├── README.md ├── index.html ├── screenshot.png └── shoes.png ├── Project 6 - Weather app ├── README.md ├── Screenshot 2025-04-18 211741.png ├── app.js ├── index.html └── style.css ├── README.md ├── g.png ├── images ├── project1.png ├── project10.png ├── project2.png ├── project3.png ├── project4.png ├── project5.png ├── project6.png ├── project7.png ├── project8.png └── project9.png ├── index.html ├── script.js └── styles.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /Project 1 - Responsive Card Slider/README.md: -------------------------------------------------------------------------------- 1 | # Responsive Card Slider 2 | 3 | A modern, lightweight responsive card slider built with vanilla JavaScript, HTML, and CSS. This slider automatically adapts to different screen sizes, showing the optimal number of cards for each viewport while maintaining smooth transitions. 4 | 5 | ![Responsive Card Slider](Screenshot.png) 6 | 7 | ## Features 8 | 9 | - **Fully Responsive**: Automatically adjusts the number of visible cards based on screen size 10 | - **Touch Support**: Swipe gestures on mobile devices 11 | - **Keyboard Navigation**: Use arrow keys to navigate between slides 12 | - **Pagination**: Visual indicator of current position with clickable dots 13 | - **Smooth Transitions**: CSS transitions for smooth sliding effects 14 | - **No Dependencies**: Built with vanilla JavaScript, no external libraries required 15 | - **Optional Autoplay**: Can be enabled for automatic cycling through cards 16 | - **Customizable**: Easily modify styles to match your project's design 17 | 18 | 19 | 1. Clone the repository: 20 | ```bash 21 | git clone https://github.com/yourusername/responsive-card-slider.git 22 | ``` 23 | 24 | 2. Open `index.html` in your browser to see the slider in action. 25 | -------------------------------------------------------------------------------- /Project 1 - Responsive Card Slider/Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 1 - Responsive Card Slider/Screenshot.png -------------------------------------------------------------------------------- /Project 1 - Responsive Card Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Responsive Card Slider 7 | 8 | 9 | 10 |
11 |

Responsive Card Slider

12 | 13 |
14 |
15 | 20 | 25 |
26 | 27 |
28 |
29 |
30 |
31 |
32 |

Mountain Adventure

33 |

Explore the breathtaking landscapes of the Rocky Mountains.

34 |
35 |
36 | 37 |
38 |
39 |
40 |

Beach Retreat

41 |

Relax and unwind on the pristine shores of tropical paradise.

42 |
43 |
44 | 45 |
46 |
47 |
48 |

City Exploration

49 |

Discover hidden gems and iconic landmarks in vibrant urban centers.

50 |
51 |
52 | 53 |
54 |
55 |
56 |

Forest Escape

57 |

Immerse yourself in the tranquility of lush green forests.

58 |
59 |
60 | 61 |
62 |
63 |
64 |

Desert Journey

65 |

Experience the mystical beauty of vast desert landscapes.

66 |
67 |
68 | 69 |
70 |
71 |
72 |

Island Hopping

73 |

Sail through crystal clear waters and visit stunning islands.

74 |
75 |
76 |
77 |
78 | 79 | 82 |
83 |
84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /Project 1 - Responsive Card Slider/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | // Elements 3 | const slider = document.querySelector(".slider"); 4 | const prevBtn = document.getElementById("prev-btn"); 5 | const nextBtn = document.getElementById("next-btn"); 6 | const pagination = document.querySelector(".pagination"); 7 | const cards = document.querySelectorAll(".card"); 8 | 9 | // State 10 | let currentIndex = 0; 11 | let cardsPerView = getCardsPerView(); 12 | let totalSlides = Math.ceil(cards.length / cardsPerView); 13 | 14 | // Initialize 15 | createPaginationDots(); 16 | updateSlider(); 17 | 18 | // Event listeners 19 | prevBtn.addEventListener("click", goToPrevSlide); 20 | nextBtn.addEventListener("click", goToNextSlide); 21 | window.addEventListener("resize", handleResize); 22 | 23 | // Functions 24 | function getCardsPerView() { 25 | const windowWidth = window.innerWidth; 26 | if (windowWidth >= 1024) return 4; 27 | if (windowWidth >= 768) return 3; 28 | if (windowWidth >= 640) return 2; 29 | return 1; 30 | } 31 | 32 | function createPaginationDots() { 33 | pagination.innerHTML = ""; 34 | for (let i = 0; i < totalSlides; i++) { 35 | const dot = document.createElement("div"); 36 | dot.classList.add("dot"); 37 | if (i === currentIndex) dot.classList.add("active"); 38 | dot.addEventListener("click", () => goToSlide(i)); 39 | pagination.appendChild(dot); 40 | } 41 | } 42 | 43 | function goToSlide(index) { 44 | currentIndex = index; 45 | updateSlider(); 46 | } 47 | 48 | function goToPrevSlide() { 49 | currentIndex = Math.max(currentIndex - 1, 0); 50 | updateSlider(); 51 | } 52 | 53 | function goToNextSlide() { 54 | currentIndex = Math.min(currentIndex + 1, totalSlides - 1); 55 | updateSlider(); 56 | } 57 | 58 | function updateSlider() { 59 | // Calculate the slide position 60 | const slideWidth = cards[0].offsetWidth; 61 | const gapWidth = 16; // 1rem = 16px 62 | const offset = currentIndex * cardsPerView * (slideWidth + gapWidth); 63 | 64 | // Update slider position 65 | slider.style.transform = `translateX(-${offset}px)`; 66 | 67 | // Update pagination 68 | document.querySelectorAll(".dot").forEach((dot, i) => { 69 | dot.classList.toggle("active", i === currentIndex); 70 | }); 71 | 72 | // Update button state 73 | prevBtn.disabled = currentIndex === 0; 74 | nextBtn.disabled = currentIndex === totalSlides - 1; 75 | 76 | // Visual feedback on buttons 77 | prevBtn.style.opacity = currentIndex === 0 ? "0.5" : "1"; 78 | nextBtn.style.opacity = currentIndex === totalSlides - 1 ? "0.5" : "1"; 79 | } 80 | 81 | function handleResize() { 82 | const newCardsPerView = getCardsPerView(); 83 | if (newCardsPerView !== cardsPerView) { 84 | cardsPerView = newCardsPerView; 85 | totalSlides = Math.ceil(cards.length / cardsPerView); 86 | currentIndex = Math.min(currentIndex, totalSlides - 1); 87 | createPaginationDots(); 88 | updateSlider(); 89 | } else { 90 | updateSlider(); 91 | } 92 | } 93 | 94 | // Add touch swipe support 95 | let touchStartX = 0; 96 | let touchEndX = 0; 97 | 98 | slider.addEventListener( 99 | "touchstart", 100 | (e) => { 101 | touchStartX = e.changedTouches[0].screenX; 102 | }, 103 | false 104 | ); 105 | 106 | slider.addEventListener( 107 | "touchend", 108 | (e) => { 109 | touchEndX = e.changedTouches[0].screenX; 110 | handleSwipe(); 111 | }, 112 | false 113 | ); 114 | 115 | function handleSwipe() { 116 | const minSwipeDistance = 50; 117 | if (touchStartX - touchEndX > minSwipeDistance) { 118 | goToNextSlide(); 119 | } else if (touchEndX - touchStartX > minSwipeDistance) { 120 | goToPrevSlide(); 121 | } 122 | } 123 | 124 | // Add keyboard support 125 | document.addEventListener("keydown", (e) => { 126 | if (e.key === "ArrowLeft") { 127 | goToPrevSlide(); 128 | } else if (e.key === "ArrowRight") { 129 | goToNextSlide(); 130 | } 131 | }); 132 | 133 | // Auto-play functionality (optional) 134 | let autoplayInterval; 135 | const autoplayDelay = 5000; // 5 seconds 136 | 137 | function startAutoplay() { 138 | stopAutoplay(); // Clear any existing interval 139 | autoplayInterval = setInterval(() => { 140 | if (currentIndex < totalSlides - 1) { 141 | goToNextSlide(); 142 | } else { 143 | goToSlide(0); 144 | } 145 | }, autoplayDelay); 146 | } 147 | 148 | function stopAutoplay() { 149 | if (autoplayInterval) { 150 | clearInterval(autoplayInterval); 151 | } 152 | } 153 | 154 | // Uncomment the line below to enable autoplay 155 | // startAutoplay(); 156 | 157 | // Stop autoplay on user interaction 158 | slider.addEventListener("mouseenter", stopAutoplay); 159 | slider.addEventListener("touchstart", stopAutoplay); 160 | prevBtn.addEventListener("click", stopAutoplay); 161 | nextBtn.addEventListener("click", stopAutoplay); 162 | pagination.addEventListener("click", stopAutoplay); 163 | }); 164 | -------------------------------------------------------------------------------- /Project 1 - Responsive Card Slider/style.css: -------------------------------------------------------------------------------- 1 | /* Base Styles */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 10 | background-color: #f5f7fa; 11 | color: #333; 12 | line-height: 1.6; 13 | } 14 | 15 | .container { 16 | max-width: 1200px; 17 | margin: 0 auto; 18 | padding: 2rem; 19 | } 20 | 21 | h1 { 22 | text-align: center; 23 | margin-bottom: 2rem; 24 | color: #2d3748; 25 | } 26 | 27 | /* Slider Container */ 28 | .slider-container { 29 | position: relative; 30 | margin-bottom: 2rem; 31 | } 32 | 33 | /* Slider Controls */ 34 | .slider-controls { 35 | display: flex; 36 | justify-content: space-between; 37 | position: absolute; 38 | width: 100%; 39 | top: 50%; 40 | transform: translateY(-50%); 41 | z-index: 10; 42 | pointer-events: none; 43 | } 44 | 45 | .control-btn { 46 | background-color: rgba(255, 255, 255, 0.8); 47 | border: none; 48 | border-radius: 50%; 49 | width: 40px; 50 | height: 40px; 51 | display: flex; 52 | align-items: center; 53 | justify-content: center; 54 | cursor: pointer; 55 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 56 | transition: all 0.3s ease; 57 | pointer-events: auto; 58 | } 59 | 60 | .control-btn:hover { 61 | background-color: #fff; 62 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); 63 | } 64 | 65 | .control-btn svg { 66 | width: 20px; 67 | height: 20px; 68 | color: #444; 69 | } 70 | 71 | /* Slider Wrapper */ 72 | .slider-wrapper { 73 | overflow: hidden; 74 | border-radius: 10px; 75 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); 76 | } 77 | 78 | /* Slider */ 79 | .slider { 80 | display: flex; 81 | transition: transform 0.5s ease; 82 | } 83 | 84 | /* Cards */ 85 | .card { 86 | flex: 0 0 100%; 87 | min-width: 100%; 88 | background-color: #fff; 89 | border-radius: 10px; 90 | overflow: hidden; 91 | transition: all 0.3s ease; 92 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 93 | } 94 | 95 | .card-image { 96 | height: 200px; 97 | background-size: cover; 98 | background-position: center; 99 | } 100 | 101 | .card-content { 102 | padding: 1.5rem; 103 | } 104 | 105 | .card-content h3 { 106 | margin-bottom: 0.5rem; 107 | color: #2d3748; 108 | } 109 | 110 | .card-content p { 111 | color: #718096; 112 | } 113 | 114 | /* Pagination */ 115 | .pagination { 116 | display: flex; 117 | justify-content: center; 118 | margin-top: 1.5rem; 119 | } 120 | 121 | .dot { 122 | width: 10px; 123 | height: 10px; 124 | background-color: #cbd5e0; 125 | border-radius: 50%; 126 | margin: 0 5px; 127 | cursor: pointer; 128 | transition: all 0.3s ease; 129 | } 130 | 131 | .dot.active { 132 | background-color: #4a5568; 133 | transform: scale(1.2); 134 | } 135 | 136 | /* Responsive Breakpoints */ 137 | @media (min-width: 640px) { 138 | .card { 139 | flex: 0 0 calc(50% - 1rem); 140 | min-width: calc(50% - 1rem); 141 | margin: 0 0.5rem; 142 | } 143 | } 144 | 145 | @media (min-width: 768px) { 146 | .card { 147 | flex: 0 0 calc(33.333% - 1rem); 148 | min-width: calc(33.333% - 1rem); 149 | } 150 | } 151 | 152 | @media (min-width: 1024px) { 153 | .card { 154 | flex: 0 0 calc(25% - 1rem); 155 | min-width: calc(25% - 1rem); 156 | } 157 | 158 | .card-image { 159 | height: 150px; 160 | } 161 | } -------------------------------------------------------------------------------- /Project 2 - Lux/README.md: -------------------------------------------------------------------------------- 1 | # Lux | Web Template 2 | ![](Screen.png) 3 | 4 | ## Overview 5 | 6 | Lux is a responsive web template designed for showcasing services, portfolios, and contact information. With its clean and minimalistic design, it is ideal for creative agencies and freelancers. 7 | 8 | ## Features 9 | 10 | - **Responsive Design**: Optimized for various devices (desktops, tablets, mobiles). 11 | - **Easy Navigation**: Intuitive header links to different sections. 12 | - **Service Showcase**: Displays services with icons and descriptions. 13 | - **Portfolio Section**: Features sample projects in a visually appealing format. 14 | - **About and Contact Sections**: Provides agency information and contact details. 15 | 16 | ## Technologies Used 17 | 18 | - HTML 19 | - CSS 20 | - Font Awesome (for icons) 21 | - Google Fonts (for typography) 22 | 23 | ## Getting Started 24 | 25 | To set up the template locally: 26 | 27 | 1. **Clone the repository**: 28 | ```bash 29 | git clone https://github.com/NoureddineBou/Lux.git 30 | -------------------------------------------------------------------------------- /Project 2 - Lux/Screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/Screen.png -------------------------------------------------------------------------------- /Project 2 - Lux/css/all.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | .fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}}@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)} 7 | 8 | .fa-0:before{content:"\30"}.fa-1:before{content:"\31"}.fa-2:before{content:"\32"}.fa-3:before{content:"\33"}.fa-4:before{content:"\34"}.fa-5:before{content:"\35"}.fa-6:before{content:"\36"}.fa-7:before{content:"\37"}.fa-8:before{content:"\38"}.fa-9:before{content:"\39"}.fa-fill-drip:before{content:"\f576"}.fa-arrows-to-circle:before{content:"\e4bd"}.fa-chevron-circle-right:before,.fa-circle-chevron-right:before{content:"\f138"}.fa-at:before{content:"\40"}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-text-height:before{content:"\f034"}.fa-user-times:before,.fa-user-xmark:before{content:"\f235"}.fa-stethoscope:before{content:"\f0f1"}.fa-comment-alt:before,.fa-message:before{content:"\f27a"}.fa-info:before{content:"\f129"}.fa-compress-alt:before,.fa-down-left-and-up-right-to-center:before{content:"\f422"}.fa-explosion:before{content:"\e4e9"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-wave-square:before{content:"\f83e"}.fa-ring:before{content:"\f70b"}.fa-building-un:before{content:"\e4d9"}.fa-dice-three:before{content:"\f527"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-anchor-circle-check:before{content:"\e4aa"}.fa-building-circle-arrow-right:before{content:"\e4d1"}.fa-volleyball-ball:before,.fa-volleyball:before{content:"\f45f"}.fa-arrows-up-to-line:before{content:"\e4c2"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-circle-minus:before,.fa-minus-circle:before{content:"\f056"}.fa-door-open:before{content:"\f52b"}.fa-right-from-bracket:before,.fa-sign-out-alt:before{content:"\f2f5"}.fa-atom:before{content:"\f5d2"}.fa-soap:before{content:"\e06e"}.fa-heart-music-camera-bolt:before,.fa-icons:before{content:"\f86d"}.fa-microphone-alt-slash:before,.fa-microphone-lines-slash:before{content:"\f539"}.fa-bridge-circle-check:before{content:"\e4c9"}.fa-pump-medical:before{content:"\e06a"}.fa-fingerprint:before{content:"\f577"}.fa-hand-point-right:before{content:"\f0a4"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"}.fa-forward-step:before,.fa-step-forward:before{content:"\f051"}.fa-face-smile-beam:before,.fa-smile-beam:before{content:"\f5b8"}.fa-flag-checkered:before{content:"\f11e"}.fa-football-ball:before,.fa-football:before{content:"\f44e"}.fa-school-circle-exclamation:before{content:"\e56c"}.fa-crop:before{content:"\f125"}.fa-angle-double-down:before,.fa-angles-down:before{content:"\f103"}.fa-users-rectangle:before{content:"\e594"}.fa-people-roof:before{content:"\e537"}.fa-people-line:before{content:"\e534"}.fa-beer-mug-empty:before,.fa-beer:before{content:"\f0fc"}.fa-diagram-predecessor:before{content:"\e477"}.fa-arrow-up-long:before,.fa-long-arrow-up:before{content:"\f176"}.fa-burn:before,.fa-fire-flame-simple:before{content:"\f46a"}.fa-male:before,.fa-person:before{content:"\f183"}.fa-laptop:before{content:"\f109"}.fa-file-csv:before{content:"\f6dd"}.fa-menorah:before{content:"\f676"}.fa-truck-plane:before{content:"\e58f"}.fa-record-vinyl:before{content:"\f8d9"}.fa-face-grin-stars:before,.fa-grin-stars:before{content:"\f587"}.fa-bong:before{content:"\f55c"}.fa-pastafarianism:before,.fa-spaghetti-monster-flying:before{content:"\f67b"}.fa-arrow-down-up-across-line:before{content:"\e4af"}.fa-spoon:before,.fa-utensil-spoon:before{content:"\f2e5"}.fa-jar-wheat:before{content:"\e517"}.fa-envelopes-bulk:before,.fa-mail-bulk:before{content:"\f674"}.fa-file-circle-exclamation:before{content:"\e4eb"}.fa-circle-h:before,.fa-hospital-symbol:before{content:"\f47e"}.fa-pager:before{content:"\f815"}.fa-address-book:before,.fa-contact-book:before{content:"\f2b9"}.fa-strikethrough:before{content:"\f0cc"}.fa-k:before{content:"\4b"}.fa-landmark-flag:before{content:"\e51c"}.fa-pencil-alt:before,.fa-pencil:before{content:"\f303"}.fa-backward:before{content:"\f04a"}.fa-caret-right:before{content:"\f0da"}.fa-comments:before{content:"\f086"}.fa-file-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-code-pull-request:before{content:"\e13c"}.fa-clipboard-list:before{content:"\f46d"}.fa-truck-loading:before,.fa-truck-ramp-box:before{content:"\f4de"}.fa-user-check:before{content:"\f4fc"}.fa-vial-virus:before{content:"\e597"}.fa-sheet-plastic:before{content:"\e571"}.fa-blog:before{content:"\f781"}.fa-user-ninja:before{content:"\f504"}.fa-person-arrow-up-from-line:before{content:"\e539"}.fa-scroll-torah:before,.fa-torah:before{content:"\f6a0"}.fa-broom-ball:before,.fa-quidditch-broom-ball:before,.fa-quidditch:before{content:"\f458"}.fa-toggle-off:before{content:"\f204"}.fa-archive:before,.fa-box-archive:before{content:"\f187"}.fa-person-drowning:before{content:"\e545"}.fa-arrow-down-9-1:before,.fa-sort-numeric-desc:before,.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-face-grin-tongue-squint:before,.fa-grin-tongue-squint:before{content:"\f58a"}.fa-spray-can:before{content:"\f5bd"}.fa-truck-monster:before{content:"\f63b"}.fa-w:before{content:"\57"}.fa-earth-africa:before,.fa-globe-africa:before{content:"\f57c"}.fa-rainbow:before{content:"\f75b"}.fa-circle-notch:before{content:"\f1ce"}.fa-tablet-alt:before,.fa-tablet-screen-button:before{content:"\f3fa"}.fa-paw:before{content:"\f1b0"}.fa-cloud:before{content:"\f0c2"}.fa-trowel-bricks:before{content:"\e58a"}.fa-face-flushed:before,.fa-flushed:before{content:"\f579"}.fa-hospital-user:before{content:"\f80d"}.fa-tent-arrow-left-right:before{content:"\e57f"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-binoculars:before{content:"\f1e5"}.fa-microphone-slash:before{content:"\f131"}.fa-box-tissue:before{content:"\e05b"}.fa-motorcycle:before{content:"\f21c"}.fa-bell-concierge:before,.fa-concierge-bell:before{content:"\f562"}.fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-arrows-left-right:before,.fa-people-arrows:before{content:"\e068"}.fa-mars-and-venus-burst:before{content:"\e523"}.fa-caret-square-right:before,.fa-square-caret-right:before{content:"\f152"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-sun-plant-wilt:before{content:"\e57a"}.fa-toilets-portable:before{content:"\e584"}.fa-hockey-puck:before{content:"\f453"}.fa-table:before{content:"\f0ce"}.fa-magnifying-glass-arrow-right:before{content:"\e521"}.fa-digital-tachograph:before,.fa-tachograph-digital:before{content:"\f566"}.fa-users-slash:before{content:"\e073"}.fa-clover:before{content:"\e139"}.fa-mail-reply:before,.fa-reply:before{content:"\f3e5"}.fa-star-and-crescent:before{content:"\f699"}.fa-house-fire:before{content:"\e50c"}.fa-minus-square:before,.fa-square-minus:before{content:"\f146"}.fa-helicopter:before{content:"\f533"}.fa-compass:before{content:"\f14e"}.fa-caret-square-down:before,.fa-square-caret-down:before{content:"\f150"}.fa-file-circle-question:before{content:"\e4ef"}.fa-laptop-code:before{content:"\f5fc"}.fa-swatchbook:before{content:"\f5c3"}.fa-prescription-bottle:before{content:"\f485"}.fa-bars:before,.fa-navicon:before{content:"\f0c9"}.fa-people-group:before{content:"\e533"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-heart-broken:before,.fa-heart-crack:before{content:"\f7a9"}.fa-external-link-square-alt:before,.fa-square-up-right:before{content:"\f360"}.fa-face-kiss-beam:before,.fa-kiss-beam:before{content:"\f597"}.fa-film:before{content:"\f008"}.fa-ruler-horizontal:before{content:"\f547"}.fa-people-robbery:before{content:"\e536"}.fa-lightbulb:before{content:"\f0eb"}.fa-caret-left:before{content:"\f0d9"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-school-circle-xmark:before{content:"\e56d"}.fa-arrow-right-from-bracket:before,.fa-sign-out:before{content:"\f08b"}.fa-chevron-circle-down:before,.fa-circle-chevron-down:before{content:"\f13a"}.fa-unlock-alt:before,.fa-unlock-keyhole:before{content:"\f13e"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-headphones-alt:before,.fa-headphones-simple:before{content:"\f58f"}.fa-sitemap:before{content:"\f0e8"}.fa-circle-dollar-to-slot:before,.fa-donate:before{content:"\f4b9"}.fa-memory:before{content:"\f538"}.fa-road-spikes:before{content:"\e568"}.fa-fire-burner:before{content:"\e4f1"}.fa-flag:before{content:"\f024"}.fa-hanukiah:before{content:"\f6e6"}.fa-feather:before{content:"\f52d"}.fa-volume-down:before,.fa-volume-low:before{content:"\f027"}.fa-comment-slash:before{content:"\f4b3"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-compress:before{content:"\f066"}.fa-wheat-alt:before,.fa-wheat-awn:before{content:"\e2cd"}.fa-ankh:before{content:"\f644"}.fa-hands-holding-child:before{content:"\e4fa"}.fa-asterisk:before{content:"\2a"}.fa-check-square:before,.fa-square-check:before{content:"\f14a"}.fa-peseta-sign:before{content:"\e221"}.fa-header:before,.fa-heading:before{content:"\f1dc"}.fa-ghost:before{content:"\f6e2"}.fa-list-squares:before,.fa-list:before{content:"\f03a"}.fa-phone-square-alt:before,.fa-square-phone-flip:before{content:"\f87b"}.fa-cart-plus:before{content:"\f217"}.fa-gamepad:before{content:"\f11b"}.fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"}.fa-dizzy:before,.fa-face-dizzy:before{content:"\f567"}.fa-egg:before{content:"\f7fb"}.fa-house-medical-circle-xmark:before{content:"\e513"}.fa-campground:before{content:"\f6bb"}.fa-folder-plus:before{content:"\f65e"}.fa-futbol-ball:before,.fa-futbol:before,.fa-soccer-ball:before{content:"\f1e3"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-lock:before{content:"\f023"}.fa-gas-pump:before{content:"\f52f"}.fa-hot-tub-person:before,.fa-hot-tub:before{content:"\f593"}.fa-map-location:before,.fa-map-marked:before{content:"\f59f"}.fa-house-flood-water:before{content:"\e50e"}.fa-tree:before{content:"\f1bb"}.fa-bridge-lock:before{content:"\e4cc"}.fa-sack-dollar:before{content:"\f81d"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-car-side:before{content:"\f5e4"}.fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"}.fa-heart-circle-minus:before{content:"\e4ff"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-microscope:before{content:"\f610"}.fa-sink:before{content:"\e06d"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-arrow-down-z-a:before,.fa-sort-alpha-desc:before,.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-mitten:before{content:"\f7b5"}.fa-person-rays:before{content:"\e54d"}.fa-users:before{content:"\f0c0"}.fa-eye-slash:before{content:"\f070"}.fa-flask-vial:before{content:"\e4f3"}.fa-hand-paper:before,.fa-hand:before{content:"\f256"}.fa-om:before{content:"\f679"}.fa-worm:before{content:"\e599"}.fa-house-circle-xmark:before{content:"\e50b"}.fa-plug:before{content:"\f1e6"}.fa-chevron-up:before{content:"\f077"}.fa-hand-spock:before{content:"\f259"}.fa-stopwatch:before{content:"\f2f2"}.fa-face-kiss:before,.fa-kiss:before{content:"\f596"}.fa-bridge-circle-xmark:before{content:"\e4cb"}.fa-face-grin-tongue:before,.fa-grin-tongue:before{content:"\f589"}.fa-chess-bishop:before{content:"\f43a"}.fa-face-grin-wink:before,.fa-grin-wink:before{content:"\f58c"}.fa-deaf:before,.fa-deafness:before,.fa-ear-deaf:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-road-circle-check:before{content:"\e564"}.fa-dice-five:before{content:"\f523"}.fa-rss-square:before,.fa-square-rss:before{content:"\f143"}.fa-land-mine-on:before{content:"\e51b"}.fa-i-cursor:before{content:"\f246"}.fa-stamp:before{content:"\f5bf"}.fa-stairs:before{content:"\e289"}.fa-i:before{content:"\49"}.fa-hryvnia-sign:before,.fa-hryvnia:before{content:"\f6f2"}.fa-pills:before{content:"\f484"}.fa-face-grin-wide:before,.fa-grin-alt:before{content:"\f581"}.fa-tooth:before{content:"\f5c9"}.fa-v:before{content:"\56"}.fa-bangladeshi-taka-sign:before{content:"\e2e6"}.fa-bicycle:before{content:"\f206"}.fa-rod-asclepius:before,.fa-rod-snake:before,.fa-staff-aesculapius:before,.fa-staff-snake:before{content:"\e579"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-ambulance:before,.fa-truck-medical:before{content:"\f0f9"}.fa-wheat-awn-circle-exclamation:before{content:"\e598"}.fa-snowman:before{content:"\f7d0"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-road-barrier:before{content:"\e562"}.fa-school:before{content:"\f549"}.fa-igloo:before{content:"\f7ae"}.fa-joint:before{content:"\f595"}.fa-angle-right:before{content:"\f105"}.fa-horse:before{content:"\f6f0"}.fa-q:before{content:"\51"}.fa-g:before{content:"\47"}.fa-notes-medical:before{content:"\f481"}.fa-temperature-2:before,.fa-temperature-half:before,.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-dong-sign:before{content:"\e169"}.fa-capsules:before{content:"\f46b"}.fa-poo-bolt:before,.fa-poo-storm:before{content:"\f75a"}.fa-face-frown-open:before,.fa-frown-open:before{content:"\f57a"}.fa-hand-point-up:before{content:"\f0a6"}.fa-money-bill:before{content:"\f0d6"}.fa-bookmark:before{content:"\f02e"}.fa-align-justify:before{content:"\f039"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-helmet-un:before{content:"\e503"}.fa-bullseye:before{content:"\f140"}.fa-bacon:before{content:"\f7e5"}.fa-hand-point-down:before{content:"\f0a7"}.fa-arrow-up-from-bracket:before{content:"\e09a"}.fa-folder-blank:before,.fa-folder:before{content:"\f07b"}.fa-file-medical-alt:before,.fa-file-waveform:before{content:"\f478"}.fa-radiation:before{content:"\f7b9"}.fa-chart-simple:before{content:"\e473"}.fa-mars-stroke:before{content:"\f229"}.fa-vial:before{content:"\f492"}.fa-dashboard:before,.fa-gauge-med:before,.fa-gauge:before,.fa-tachometer-alt-average:before{content:"\f624"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-e:before{content:"\45"}.fa-pen-alt:before,.fa-pen-clip:before{content:"\f305"}.fa-bridge-circle-exclamation:before{content:"\e4ca"}.fa-user:before{content:"\f007"}.fa-school-circle-check:before{content:"\e56b"}.fa-dumpster:before{content:"\f793"}.fa-shuttle-van:before,.fa-van-shuttle:before{content:"\f5b6"}.fa-building-user:before{content:"\e4da"}.fa-caret-square-left:before,.fa-square-caret-left:before{content:"\f191"}.fa-highlighter:before{content:"\f591"}.fa-key:before{content:"\f084"}.fa-bullhorn:before{content:"\f0a1"}.fa-globe:before{content:"\f0ac"}.fa-synagogue:before{content:"\f69b"}.fa-person-half-dress:before{content:"\e548"}.fa-road-bridge:before{content:"\e563"}.fa-location-arrow:before{content:"\f124"}.fa-c:before{content:"\43"}.fa-tablet-button:before{content:"\f10a"}.fa-building-lock:before{content:"\e4d6"}.fa-pizza-slice:before{content:"\f818"}.fa-money-bill-wave:before{content:"\f53a"}.fa-area-chart:before,.fa-chart-area:before{content:"\f1fe"}.fa-house-flag:before{content:"\e50d"}.fa-person-circle-minus:before{content:"\e540"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-camera-rotate:before{content:"\e0d8"}.fa-air-freshener:before,.fa-spray-can-sparkles:before{content:"\f5d0"}.fa-star:before{content:"\f005"}.fa-repeat:before{content:"\f363"}.fa-cross:before{content:"\f654"}.fa-box:before{content:"\f466"}.fa-venus-mars:before{content:"\f228"}.fa-arrow-pointer:before,.fa-mouse-pointer:before{content:"\f245"}.fa-expand-arrows-alt:before,.fa-maximize:before{content:"\f31e"}.fa-charging-station:before{content:"\f5e7"}.fa-shapes:before,.fa-triangle-circle-square:before{content:"\f61f"}.fa-random:before,.fa-shuffle:before{content:"\f074"}.fa-person-running:before,.fa-running:before{content:"\f70c"}.fa-mobile-retro:before{content:"\e527"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-spider:before{content:"\f717"}.fa-hands-bound:before{content:"\e4f9"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-plane-circle-exclamation:before{content:"\e556"}.fa-x-ray:before{content:"\f497"}.fa-spell-check:before{content:"\f891"}.fa-slash:before{content:"\f715"}.fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"}.fa-arrow-right-to-bracket:before,.fa-sign-in:before{content:"\f090"}.fa-shop-slash:before,.fa-store-alt-slash:before{content:"\e070"}.fa-server:before{content:"\f233"}.fa-virus-covid-slash:before{content:"\e4a9"}.fa-shop-lock:before{content:"\e4a5"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-blender-phone:before{content:"\f6b6"}.fa-building-wheat:before{content:"\e4db"}.fa-person-breastfeeding:before{content:"\e53a"}.fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"}.fa-venus:before{content:"\f221"}.fa-passport:before{content:"\f5ab"}.fa-heart-pulse:before,.fa-heartbeat:before{content:"\f21e"}.fa-people-carry-box:before,.fa-people-carry:before{content:"\f4ce"}.fa-temperature-high:before{content:"\f769"}.fa-microchip:before{content:"\f2db"}.fa-crown:before{content:"\f521"}.fa-weight-hanging:before{content:"\f5cd"}.fa-xmarks-lines:before{content:"\e59a"}.fa-file-prescription:before{content:"\f572"}.fa-weight-scale:before,.fa-weight:before{content:"\f496"}.fa-user-friends:before,.fa-user-group:before{content:"\f500"}.fa-arrow-up-a-z:before,.fa-sort-alpha-up:before{content:"\f15e"}.fa-chess-knight:before{content:"\f441"}.fa-face-laugh-squint:before,.fa-laugh-squint:before{content:"\f59b"}.fa-wheelchair:before{content:"\f193"}.fa-arrow-circle-up:before,.fa-circle-arrow-up:before{content:"\f0aa"}.fa-toggle-on:before{content:"\f205"}.fa-person-walking:before,.fa-walking:before{content:"\f554"}.fa-l:before{content:"\4c"}.fa-fire:before{content:"\f06d"}.fa-bed-pulse:before,.fa-procedures:before{content:"\f487"}.fa-shuttle-space:before,.fa-space-shuttle:before{content:"\f197"}.fa-face-laugh:before,.fa-laugh:before{content:"\f599"}.fa-folder-open:before{content:"\f07c"}.fa-heart-circle-plus:before{content:"\e500"}.fa-code-fork:before{content:"\e13b"}.fa-city:before{content:"\f64f"}.fa-microphone-alt:before,.fa-microphone-lines:before{content:"\f3c9"}.fa-pepper-hot:before{content:"\f816"}.fa-unlock:before{content:"\f09c"}.fa-colon-sign:before{content:"\e140"}.fa-headset:before{content:"\f590"}.fa-store-slash:before{content:"\e071"}.fa-road-circle-xmark:before{content:"\e566"}.fa-user-minus:before{content:"\f503"}.fa-mars-stroke-up:before,.fa-mars-stroke-v:before{content:"\f22a"}.fa-champagne-glasses:before,.fa-glass-cheers:before{content:"\f79f"}.fa-clipboard:before{content:"\f328"}.fa-house-circle-exclamation:before{content:"\e50a"}.fa-file-arrow-up:before,.fa-file-upload:before{content:"\f574"}.fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"}.fa-bath:before,.fa-bathtub:before{content:"\f2cd"}.fa-underline:before{content:"\f0cd"}.fa-user-edit:before,.fa-user-pen:before{content:"\f4ff"}.fa-signature:before{content:"\f5b7"}.fa-stroopwafel:before{content:"\f551"}.fa-bold:before{content:"\f032"}.fa-anchor-lock:before{content:"\e4ad"}.fa-building-ngo:before{content:"\e4d7"}.fa-manat-sign:before{content:"\e1d5"}.fa-not-equal:before{content:"\f53e"}.fa-border-style:before,.fa-border-top-left:before{content:"\f853"}.fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"}.fa-jedi:before{content:"\f669"}.fa-poll:before,.fa-square-poll-vertical:before{content:"\f681"}.fa-mug-hot:before{content:"\f7b6"}.fa-battery-car:before,.fa-car-battery:before{content:"\f5df"}.fa-gift:before{content:"\f06b"}.fa-dice-two:before{content:"\f528"}.fa-chess-queen:before{content:"\f445"}.fa-glasses:before{content:"\f530"}.fa-chess-board:before{content:"\f43c"}.fa-building-circle-check:before{content:"\e4d2"}.fa-person-chalkboard:before{content:"\e53d"}.fa-mars-stroke-h:before,.fa-mars-stroke-right:before{content:"\f22b"}.fa-hand-back-fist:before,.fa-hand-rock:before{content:"\f255"}.fa-caret-square-up:before,.fa-square-caret-up:before{content:"\f151"}.fa-cloud-showers-water:before{content:"\e4e4"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\f080"}.fa-hands-bubbles:before,.fa-hands-wash:before{content:"\e05e"}.fa-less-than-equal:before{content:"\f537"}.fa-train:before{content:"\f238"}.fa-eye-low-vision:before,.fa-low-vision:before{content:"\f2a8"}.fa-crow:before{content:"\f520"}.fa-sailboat:before{content:"\e445"}.fa-window-restore:before{content:"\f2d2"}.fa-plus-square:before,.fa-square-plus:before{content:"\f0fe"}.fa-torii-gate:before{content:"\f6a1"}.fa-frog:before{content:"\f52e"}.fa-bucket:before{content:"\e4cf"}.fa-image:before{content:"\f03e"}.fa-microphone:before{content:"\f130"}.fa-cow:before{content:"\f6c8"}.fa-caret-up:before{content:"\f0d8"}.fa-screwdriver:before{content:"\f54a"}.fa-folder-closed:before{content:"\e185"}.fa-house-tsunami:before{content:"\e515"}.fa-square-nfi:before{content:"\e576"}.fa-arrow-up-from-ground-water:before{content:"\e4b5"}.fa-glass-martini-alt:before,.fa-martini-glass:before{content:"\f57b"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-columns:before,.fa-table-columns:before{content:"\f0db"}.fa-lemon:before{content:"\f094"}.fa-head-side-mask:before{content:"\e063"}.fa-handshake:before{content:"\f2b5"}.fa-gem:before{content:"\f3a5"}.fa-dolly-box:before,.fa-dolly:before{content:"\f472"}.fa-smoking:before{content:"\f48d"}.fa-compress-arrows-alt:before,.fa-minimize:before{content:"\f78c"}.fa-monument:before{content:"\f5a6"}.fa-snowplow:before{content:"\f7d2"}.fa-angle-double-right:before,.fa-angles-right:before{content:"\f101"}.fa-cannabis:before{content:"\f55f"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-tablets:before{content:"\f490"}.fa-ethernet:before{content:"\f796"}.fa-eur:before,.fa-euro-sign:before,.fa-euro:before{content:"\f153"}.fa-chair:before{content:"\f6c0"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-circle-stop:before,.fa-stop-circle:before{content:"\f28d"}.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}.fa-plate-wheat:before{content:"\e55a"}.fa-icicles:before{content:"\f7ad"}.fa-person-shelter:before{content:"\e54f"}.fa-neuter:before{content:"\f22c"}.fa-id-badge:before{content:"\f2c1"}.fa-marker:before{content:"\f5a1"}.fa-face-laugh-beam:before,.fa-laugh-beam:before{content:"\f59a"}.fa-helicopter-symbol:before{content:"\e502"}.fa-universal-access:before{content:"\f29a"}.fa-chevron-circle-up:before,.fa-circle-chevron-up:before{content:"\f139"}.fa-lari-sign:before{content:"\e1c8"}.fa-volcano:before{content:"\f770"}.fa-person-walking-dashed-line-arrow-right:before{content:"\e553"}.fa-gbp:before,.fa-pound-sign:before,.fa-sterling-sign:before{content:"\f154"}.fa-viruses:before{content:"\e076"}.fa-square-person-confined:before{content:"\e577"}.fa-user-tie:before{content:"\f508"}.fa-arrow-down-long:before,.fa-long-arrow-down:before{content:"\f175"}.fa-tent-arrow-down-to-line:before{content:"\e57e"}.fa-certificate:before{content:"\f0a3"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-suitcase:before{content:"\f0f2"}.fa-person-skating:before,.fa-skating:before{content:"\f7c5"}.fa-filter-circle-dollar:before,.fa-funnel-dollar:before{content:"\f662"}.fa-camera-retro:before{content:"\f083"}.fa-arrow-circle-down:before,.fa-circle-arrow-down:before{content:"\f0ab"}.fa-arrow-right-to-file:before,.fa-file-import:before{content:"\f56f"}.fa-external-link-square:before,.fa-square-arrow-up-right:before{content:"\f14c"}.fa-box-open:before{content:"\f49e"}.fa-scroll:before{content:"\f70e"}.fa-spa:before{content:"\f5bb"}.fa-location-pin-lock:before{content:"\e51f"}.fa-pause:before{content:"\f04c"}.fa-hill-avalanche:before{content:"\e507"}.fa-temperature-0:before,.fa-temperature-empty:before,.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-bomb:before{content:"\f1e2"}.fa-registered:before{content:"\f25d"}.fa-address-card:before,.fa-contact-card:before,.fa-vcard:before{content:"\f2bb"}.fa-balance-scale-right:before,.fa-scale-unbalanced-flip:before{content:"\f516"}.fa-subscript:before{content:"\f12c"}.fa-diamond-turn-right:before,.fa-directions:before{content:"\f5eb"}.fa-burst:before{content:"\e4dc"}.fa-house-laptop:before,.fa-laptop-house:before{content:"\e066"}.fa-face-tired:before,.fa-tired:before{content:"\f5c8"}.fa-money-bills:before{content:"\e1f3"}.fa-smog:before{content:"\f75f"}.fa-crutch:before{content:"\f7f7"}.fa-cloud-arrow-up:before,.fa-cloud-upload-alt:before,.fa-cloud-upload:before{content:"\f0ee"}.fa-palette:before{content:"\f53f"}.fa-arrows-turn-right:before{content:"\e4c0"}.fa-vest:before{content:"\e085"}.fa-ferry:before{content:"\e4ea"}.fa-arrows-down-to-people:before{content:"\e4b9"}.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}.fa-arrows-alt-h:before,.fa-left-right:before{content:"\f337"}.fa-boxes-packing:before{content:"\e4c7"}.fa-arrow-circle-left:before,.fa-circle-arrow-left:before{content:"\f0a8"}.fa-group-arrows-rotate:before{content:"\e4f6"}.fa-bowl-food:before{content:"\e4c6"}.fa-candy-cane:before{content:"\f786"}.fa-arrow-down-wide-short:before,.fa-sort-amount-asc:before,.fa-sort-amount-down:before{content:"\f160"}.fa-cloud-bolt:before,.fa-thunderstorm:before{content:"\f76c"}.fa-remove-format:before,.fa-text-slash:before{content:"\f87d"}.fa-face-smile-wink:before,.fa-smile-wink:before{content:"\f4da"}.fa-file-word:before{content:"\f1c2"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-arrows-h:before,.fa-arrows-left-right:before{content:"\f07e"}.fa-house-lock:before{content:"\e510"}.fa-cloud-arrow-down:before,.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}.fa-children:before{content:"\e4e1"}.fa-blackboard:before,.fa-chalkboard:before{content:"\f51b"}.fa-user-alt-slash:before,.fa-user-large-slash:before{content:"\f4fa"}.fa-envelope-open:before{content:"\f2b6"}.fa-handshake-alt-slash:before,.fa-handshake-simple-slash:before{content:"\e05f"}.fa-mattress-pillow:before{content:"\e525"}.fa-guarani-sign:before{content:"\e19a"}.fa-arrows-rotate:before,.fa-refresh:before,.fa-sync:before{content:"\f021"}.fa-fire-extinguisher:before{content:"\f134"}.fa-cruzeiro-sign:before{content:"\e152"}.fa-greater-than-equal:before{content:"\f532"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-atlas:before,.fa-book-atlas:before{content:"\f558"}.fa-virus:before{content:"\e074"}.fa-envelope-circle-check:before{content:"\e4e8"}.fa-layer-group:before{content:"\f5fd"}.fa-arrows-to-dot:before{content:"\e4be"}.fa-archway:before{content:"\f557"}.fa-heart-circle-check:before{content:"\e4fd"}.fa-house-chimney-crack:before,.fa-house-damage:before{content:"\f6f1"}.fa-file-archive:before,.fa-file-zipper:before{content:"\f1c6"}.fa-square:before{content:"\f0c8"}.fa-glass-martini:before,.fa-martini-glass-empty:before{content:"\f000"}.fa-couch:before{content:"\f4b8"}.fa-cedi-sign:before{content:"\e0df"}.fa-italic:before{content:"\f033"}.fa-church:before{content:"\f51d"}.fa-comments-dollar:before{content:"\f653"}.fa-democrat:before{content:"\f747"}.fa-z:before{content:"\5a"}.fa-person-skiing:before,.fa-skiing:before{content:"\f7c9"}.fa-road-lock:before{content:"\e567"}.fa-a:before{content:"\41"}.fa-temperature-arrow-down:before,.fa-temperature-down:before{content:"\e03f"}.fa-feather-alt:before,.fa-feather-pointed:before{content:"\f56b"}.fa-p:before{content:"\50"}.fa-snowflake:before{content:"\f2dc"}.fa-newspaper:before{content:"\f1ea"}.fa-ad:before,.fa-rectangle-ad:before{content:"\f641"}.fa-arrow-circle-right:before,.fa-circle-arrow-right:before{content:"\f0a9"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-locust:before{content:"\e520"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-list-1-2:before,.fa-list-numeric:before,.fa-list-ol:before{content:"\f0cb"}.fa-person-dress-burst:before{content:"\e544"}.fa-money-check-alt:before,.fa-money-check-dollar:before{content:"\f53d"}.fa-vector-square:before{content:"\f5cb"}.fa-bread-slice:before{content:"\f7ec"}.fa-language:before{content:"\f1ab"}.fa-face-kiss-wink-heart:before,.fa-kiss-wink-heart:before{content:"\f598"}.fa-filter:before{content:"\f0b0"}.fa-question:before{content:"\3f"}.fa-file-signature:before{content:"\f573"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-house-chimney-user:before{content:"\e065"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-puzzle-piece:before{content:"\f12e"}.fa-money-check:before{content:"\f53c"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-code:before{content:"\f121"}.fa-glass-whiskey:before,.fa-whiskey-glass:before{content:"\f7a0"}.fa-building-circle-exclamation:before{content:"\e4d3"}.fa-magnifying-glass-chart:before{content:"\e522"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-cubes-stacked:before{content:"\e4e6"}.fa-krw:before,.fa-won-sign:before,.fa-won:before{content:"\f159"}.fa-virus-covid:before{content:"\e4a8"}.fa-austral-sign:before{content:"\e0a9"}.fa-f:before{content:"\46"}.fa-leaf:before{content:"\f06c"}.fa-road:before{content:"\f018"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-person-circle-plus:before{content:"\e541"}.fa-chart-pie:before,.fa-pie-chart:before{content:"\f200"}.fa-bolt-lightning:before{content:"\e0b7"}.fa-sack-xmark:before{content:"\e56a"}.fa-file-excel:before{content:"\f1c3"}.fa-file-contract:before{content:"\f56c"}.fa-fish-fins:before{content:"\e4f2"}.fa-building-flag:before{content:"\e4d5"}.fa-face-grin-beam:before,.fa-grin-beam:before{content:"\f582"}.fa-object-ungroup:before{content:"\f248"}.fa-poop:before{content:"\f619"}.fa-location-pin:before,.fa-map-marker:before{content:"\f041"}.fa-kaaba:before{content:"\f66b"}.fa-toilet-paper:before{content:"\f71e"}.fa-hard-hat:before,.fa-hat-hard:before,.fa-helmet-safety:before{content:"\f807"}.fa-eject:before{content:"\f052"}.fa-arrow-alt-circle-right:before,.fa-circle-right:before{content:"\f35a"}.fa-plane-circle-check:before{content:"\e555"}.fa-face-rolling-eyes:before,.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-object-group:before{content:"\f247"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-mask-ventilator:before{content:"\e524"}.fa-arrow-right:before{content:"\f061"}.fa-map-signs:before,.fa-signs-post:before{content:"\f277"}.fa-cash-register:before{content:"\f788"}.fa-person-circle-question:before{content:"\e542"}.fa-h:before{content:"\48"}.fa-tarp:before{content:"\e57b"}.fa-screwdriver-wrench:before,.fa-tools:before{content:"\f7d9"}.fa-arrows-to-eye:before{content:"\e4bf"}.fa-plug-circle-bolt:before{content:"\e55b"}.fa-heart:before{content:"\f004"}.fa-mars-and-venus:before{content:"\f224"}.fa-home-user:before,.fa-house-user:before{content:"\e1b0"}.fa-dumpster-fire:before{content:"\f794"}.fa-house-crack:before{content:"\e3b1"}.fa-cocktail:before,.fa-martini-glass-citrus:before{content:"\f561"}.fa-face-surprise:before,.fa-surprise:before{content:"\f5c2"}.fa-bottle-water:before{content:"\e4c5"}.fa-circle-pause:before,.fa-pause-circle:before{content:"\f28b"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-apple-alt:before,.fa-apple-whole:before{content:"\f5d1"}.fa-kitchen-set:before{content:"\e51a"}.fa-r:before{content:"\52"}.fa-temperature-1:before,.fa-temperature-quarter:before,.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-cube:before{content:"\f1b2"}.fa-bitcoin-sign:before{content:"\e0b4"}.fa-shield-dog:before{content:"\e573"}.fa-solar-panel:before{content:"\f5ba"}.fa-lock-open:before{content:"\f3c1"}.fa-elevator:before{content:"\e16d"}.fa-money-bill-transfer:before{content:"\e528"}.fa-money-bill-trend-up:before{content:"\e529"}.fa-house-flood-water-circle-arrow-right:before{content:"\e50f"}.fa-poll-h:before,.fa-square-poll-horizontal:before{content:"\f682"}.fa-circle:before{content:"\f111"}.fa-backward-fast:before,.fa-fast-backward:before{content:"\f049"}.fa-recycle:before{content:"\f1b8"}.fa-user-astronaut:before{content:"\f4fb"}.fa-plane-slash:before{content:"\e069"}.fa-trademark:before{content:"\f25c"}.fa-basketball-ball:before,.fa-basketball:before{content:"\f434"}.fa-satellite-dish:before{content:"\f7c0"}.fa-arrow-alt-circle-up:before,.fa-circle-up:before{content:"\f35b"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-volume-high:before,.fa-volume-up:before{content:"\f028"}.fa-users-rays:before{content:"\e593"}.fa-wallet:before{content:"\f555"}.fa-clipboard-check:before{content:"\f46c"}.fa-file-audio:before{content:"\f1c7"}.fa-burger:before,.fa-hamburger:before{content:"\f805"}.fa-wrench:before{content:"\f0ad"}.fa-bugs:before{content:"\e4d0"}.fa-rupee-sign:before,.fa-rupee:before{content:"\f156"}.fa-file-image:before{content:"\f1c5"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-plane-departure:before{content:"\f5b0"}.fa-handshake-slash:before{content:"\e060"}.fa-book-bookmark:before{content:"\e0bb"}.fa-code-branch:before{content:"\f126"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-bridge:before{content:"\e4c8"}.fa-phone-alt:before,.fa-phone-flip:before{content:"\f879"}.fa-truck-front:before{content:"\e2b7"}.fa-cat:before{content:"\f6be"}.fa-anchor-circle-exclamation:before{content:"\e4ab"}.fa-truck-field:before{content:"\e58d"}.fa-route:before{content:"\f4d7"}.fa-clipboard-question:before{content:"\e4e3"}.fa-panorama:before{content:"\e209"}.fa-comment-medical:before{content:"\f7f5"}.fa-teeth-open:before{content:"\f62f"}.fa-file-circle-minus:before{content:"\e4ed"}.fa-tags:before{content:"\f02c"}.fa-wine-glass:before{content:"\f4e3"}.fa-fast-forward:before,.fa-forward-fast:before{content:"\f050"}.fa-face-meh-blank:before,.fa-meh-blank:before{content:"\f5a4"}.fa-parking:before,.fa-square-parking:before{content:"\f540"}.fa-house-signal:before{content:"\e012"}.fa-bars-progress:before,.fa-tasks-alt:before{content:"\f828"}.fa-faucet-drip:before{content:"\e006"}.fa-cart-flatbed:before,.fa-dolly-flatbed:before{content:"\f474"}.fa-ban-smoking:before,.fa-smoking-ban:before{content:"\f54d"}.fa-terminal:before{content:"\f120"}.fa-mobile-button:before{content:"\f10b"}.fa-house-medical-flag:before{content:"\e514"}.fa-basket-shopping:before,.fa-shopping-basket:before{content:"\f291"}.fa-tape:before{content:"\f4db"}.fa-bus-alt:before,.fa-bus-simple:before{content:"\f55e"}.fa-eye:before{content:"\f06e"}.fa-face-sad-cry:before,.fa-sad-cry:before{content:"\f5b3"}.fa-audio-description:before{content:"\f29e"}.fa-person-military-to-person:before{content:"\e54c"}.fa-file-shield:before{content:"\e4f0"}.fa-user-slash:before{content:"\f506"}.fa-pen:before{content:"\f304"}.fa-tower-observation:before{content:"\e586"}.fa-file-code:before{content:"\f1c9"}.fa-signal-5:before,.fa-signal-perfect:before,.fa-signal:before{content:"\f012"}.fa-bus:before{content:"\f207"}.fa-heart-circle-xmark:before{content:"\e501"}.fa-home-lg:before,.fa-house-chimney:before{content:"\e3af"}.fa-window-maximize:before{content:"\f2d0"}.fa-face-frown:before,.fa-frown:before{content:"\f119"}.fa-prescription:before{content:"\f5b1"}.fa-shop:before,.fa-store-alt:before{content:"\f54f"}.fa-floppy-disk:before,.fa-save:before{content:"\f0c7"}.fa-vihara:before{content:"\f6a7"}.fa-balance-scale-left:before,.fa-scale-unbalanced:before{content:"\f515"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}.fa-plant-wilt:before{content:"\e5aa"}.fa-diamond:before{content:"\f219"}.fa-face-grin-squint:before,.fa-grin-squint:before{content:"\f585"}.fa-hand-holding-dollar:before,.fa-hand-holding-usd:before{content:"\f4c0"}.fa-bacterium:before{content:"\e05a"}.fa-hand-pointer:before{content:"\f25a"}.fa-drum-steelpan:before{content:"\f56a"}.fa-hand-scissors:before{content:"\f257"}.fa-hands-praying:before,.fa-praying-hands:before{content:"\f684"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-biohazard:before{content:"\f780"}.fa-location-crosshairs:before,.fa-location:before{content:"\f601"}.fa-mars-double:before{content:"\f227"}.fa-child-dress:before{content:"\e59c"}.fa-users-between-lines:before{content:"\e591"}.fa-lungs-virus:before{content:"\e067"}.fa-face-grin-tears:before,.fa-grin-tears:before{content:"\f588"}.fa-phone:before{content:"\f095"}.fa-calendar-times:before,.fa-calendar-xmark:before{content:"\f273"}.fa-child-reaching:before{content:"\e59d"}.fa-head-side-virus:before{content:"\e064"}.fa-user-cog:before,.fa-user-gear:before{content:"\f4fe"}.fa-arrow-up-1-9:before,.fa-sort-numeric-up:before{content:"\f163"}.fa-door-closed:before{content:"\f52a"}.fa-shield-virus:before{content:"\e06c"}.fa-dice-six:before{content:"\f526"}.fa-mosquito-net:before{content:"\e52c"}.fa-bridge-water:before{content:"\e4ce"}.fa-person-booth:before{content:"\f756"}.fa-text-width:before{content:"\f035"}.fa-hat-wizard:before{content:"\f6e8"}.fa-pen-fancy:before{content:"\f5ac"}.fa-digging:before,.fa-person-digging:before{content:"\f85e"}.fa-trash:before{content:"\f1f8"}.fa-gauge-simple-med:before,.fa-gauge-simple:before,.fa-tachometer-average:before{content:"\f629"}.fa-book-medical:before{content:"\f7e6"}.fa-poo:before{content:"\f2fe"}.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-cubes:before{content:"\f1b3"}.fa-divide:before{content:"\f529"}.fa-tenge-sign:before,.fa-tenge:before{content:"\f7d7"}.fa-headphones:before{content:"\f025"}.fa-hands-holding:before{content:"\f4c2"}.fa-hands-clapping:before{content:"\e1a8"}.fa-republican:before{content:"\f75e"}.fa-arrow-left:before{content:"\f060"}.fa-person-circle-xmark:before{content:"\e543"}.fa-ruler:before{content:"\f545"}.fa-align-left:before{content:"\f036"}.fa-dice-d6:before{content:"\f6d1"}.fa-restroom:before{content:"\f7bd"}.fa-j:before{content:"\4a"}.fa-users-viewfinder:before{content:"\e595"}.fa-file-video:before{content:"\f1c8"}.fa-external-link-alt:before,.fa-up-right-from-square:before{content:"\f35d"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-file-pdf:before{content:"\f1c1"}.fa-bible:before,.fa-book-bible:before{content:"\f647"}.fa-o:before{content:"\4f"}.fa-medkit:before,.fa-suitcase-medical:before{content:"\f0fa"}.fa-user-secret:before{content:"\f21b"}.fa-otter:before{content:"\f700"}.fa-female:before,.fa-person-dress:before{content:"\f182"}.fa-comment-dollar:before{content:"\f651"}.fa-briefcase-clock:before,.fa-business-time:before{content:"\f64a"}.fa-table-cells-large:before,.fa-th-large:before{content:"\f009"}.fa-book-tanakh:before,.fa-tanakh:before{content:"\f827"}.fa-phone-volume:before,.fa-volume-control-phone:before{content:"\f2a0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-clipboard-user:before{content:"\f7f3"}.fa-child:before{content:"\f1ae"}.fa-lira-sign:before{content:"\f195"}.fa-satellite:before{content:"\f7bf"}.fa-plane-lock:before{content:"\e558"}.fa-tag:before{content:"\f02b"}.fa-comment:before{content:"\f075"}.fa-birthday-cake:before,.fa-cake-candles:before,.fa-cake:before{content:"\f1fd"}.fa-envelope:before{content:"\f0e0"}.fa-angle-double-up:before,.fa-angles-up:before{content:"\f102"}.fa-paperclip:before{content:"\f0c6"}.fa-arrow-right-to-city:before{content:"\e4b3"}.fa-ribbon:before{content:"\f4d6"}.fa-lungs:before{content:"\f604"}.fa-arrow-up-9-1:before,.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-litecoin-sign:before{content:"\e1d3"}.fa-border-none:before{content:"\f850"}.fa-circle-nodes:before{content:"\e4e2"}.fa-parachute-box:before{content:"\f4cd"}.fa-indent:before{content:"\f03c"}.fa-truck-field-un:before{content:"\e58e"}.fa-hourglass-empty:before,.fa-hourglass:before{content:"\f254"}.fa-mountain:before{content:"\f6fc"}.fa-user-doctor:before,.fa-user-md:before{content:"\f0f0"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-cloud-meatball:before{content:"\f73b"}.fa-camera-alt:before,.fa-camera:before{content:"\f030"}.fa-square-virus:before{content:"\e578"}.fa-meteor:before{content:"\f753"}.fa-car-on:before{content:"\e4dd"}.fa-sleigh:before{content:"\f7cc"}.fa-arrow-down-1-9:before,.fa-sort-numeric-asc:before,.fa-sort-numeric-down:before{content:"\f162"}.fa-hand-holding-droplet:before,.fa-hand-holding-water:before{content:"\f4c1"}.fa-water:before{content:"\f773"}.fa-calendar-check:before{content:"\f274"}.fa-braille:before{content:"\f2a1"}.fa-prescription-bottle-alt:before,.fa-prescription-bottle-medical:before{content:"\f486"}.fa-landmark:before{content:"\f66f"}.fa-truck:before{content:"\f0d1"}.fa-crosshairs:before{content:"\f05b"}.fa-person-cane:before{content:"\e53c"}.fa-tent:before{content:"\e57d"}.fa-vest-patches:before{content:"\e086"}.fa-check-double:before{content:"\f560"}.fa-arrow-down-a-z:before,.fa-sort-alpha-asc:before,.fa-sort-alpha-down:before{content:"\f15d"}.fa-money-bill-wheat:before{content:"\e52a"}.fa-cookie:before{content:"\f563"}.fa-arrow-left-rotate:before,.fa-arrow-rotate-back:before,.fa-arrow-rotate-backward:before,.fa-arrow-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"}.fa-face-grin-squint-tears:before,.fa-grin-squint-tears:before{content:"\f586"}.fa-dumbbell:before{content:"\f44b"}.fa-list-alt:before,.fa-rectangle-list:before{content:"\f022"}.fa-tarp-droplet:before{content:"\e57c"}.fa-house-medical-circle-check:before{content:"\e511"}.fa-person-skiing-nordic:before,.fa-skiing-nordic:before{content:"\f7ca"}.fa-calendar-plus:before{content:"\f271"}.fa-plane-arrival:before{content:"\f5af"}.fa-arrow-alt-circle-left:before,.fa-circle-left:before{content:"\f359"}.fa-subway:before,.fa-train-subway:before{content:"\f239"}.fa-chart-gantt:before{content:"\e0e4"}.fa-indian-rupee-sign:before,.fa-indian-rupee:before,.fa-inr:before{content:"\e1bc"}.fa-crop-alt:before,.fa-crop-simple:before{content:"\f565"}.fa-money-bill-1:before,.fa-money-bill-alt:before{content:"\f3d1"}.fa-left-long:before,.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-dna:before{content:"\f471"}.fa-virus-slash:before{content:"\e075"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-chess:before{content:"\f439"}.fa-arrow-left-long:before,.fa-long-arrow-left:before{content:"\f177"}.fa-plug-circle-check:before{content:"\e55c"}.fa-street-view:before{content:"\f21d"}.fa-franc-sign:before{content:"\e18f"}.fa-volume-off:before{content:"\f026"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before,.fa-hands-american-sign-language-interpreting:before,.fa-hands-asl-interpreting:before{content:"\f2a3"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-droplet-slash:before,.fa-tint-slash:before{content:"\f5c7"}.fa-mosque:before{content:"\f678"}.fa-mosquito:before{content:"\e52b"}.fa-star-of-david:before{content:"\f69a"}.fa-person-military-rifle:before{content:"\e54b"}.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}.fa-vials:before{content:"\f493"}.fa-plug-circle-plus:before{content:"\e55f"}.fa-place-of-worship:before{content:"\f67f"}.fa-grip-vertical:before{content:"\f58e"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-u:before{content:"\55"}.fa-square-root-alt:before,.fa-square-root-variable:before{content:"\f698"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-backward-step:before,.fa-step-backward:before{content:"\f048"}.fa-pallet:before{content:"\f482"}.fa-faucet:before{content:"\e005"}.fa-baseball-bat-ball:before{content:"\f432"}.fa-s:before{content:"\53"}.fa-timeline:before{content:"\e29c"}.fa-keyboard:before{content:"\f11c"}.fa-caret-down:before{content:"\f0d7"}.fa-clinic-medical:before,.fa-house-chimney-medical:before{content:"\f7f2"}.fa-temperature-3:before,.fa-temperature-three-quarters:before,.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-mobile-android-alt:before,.fa-mobile-screen:before{content:"\f3cf"}.fa-plane-up:before{content:"\e22d"}.fa-piggy-bank:before{content:"\f4d3"}.fa-battery-3:before,.fa-battery-half:before{content:"\f242"}.fa-mountain-city:before{content:"\e52e"}.fa-coins:before{content:"\f51e"}.fa-khanda:before{content:"\f66d"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-folder-tree:before{content:"\f802"}.fa-network-wired:before{content:"\f6ff"}.fa-map-pin:before{content:"\f276"}.fa-hamsa:before{content:"\f665"}.fa-cent-sign:before{content:"\e3f5"}.fa-flask:before{content:"\f0c3"}.fa-person-pregnant:before{content:"\e31e"}.fa-wand-sparkles:before{content:"\f72b"}.fa-ellipsis-v:before,.fa-ellipsis-vertical:before{content:"\f142"}.fa-ticket:before{content:"\f145"}.fa-power-off:before{content:"\f011"}.fa-long-arrow-alt-right:before,.fa-right-long:before{content:"\f30b"}.fa-flag-usa:before{content:"\f74d"}.fa-laptop-file:before{content:"\e51d"}.fa-teletype:before,.fa-tty:before{content:"\f1e4"}.fa-diagram-next:before{content:"\e476"}.fa-person-rifle:before{content:"\e54e"}.fa-house-medical-circle-exclamation:before{content:"\e512"}.fa-closed-captioning:before{content:"\f20a"}.fa-hiking:before,.fa-person-hiking:before{content:"\f6ec"}.fa-venus-double:before{content:"\f226"}.fa-images:before{content:"\f302"}.fa-calculator:before{content:"\f1ec"}.fa-people-pulling:before{content:"\e535"}.fa-n:before{content:"\4e"}.fa-cable-car:before,.fa-tram:before{content:"\f7da"}.fa-cloud-rain:before{content:"\f73d"}.fa-building-circle-xmark:before{content:"\e4d4"}.fa-ship:before{content:"\f21a"}.fa-arrows-down-to-line:before{content:"\e4b8"}.fa-download:before{content:"\f019"}.fa-face-grin:before,.fa-grin:before{content:"\f580"}.fa-backspace:before,.fa-delete-left:before{content:"\f55a"}.fa-eye-dropper-empty:before,.fa-eye-dropper:before,.fa-eyedropper:before{content:"\f1fb"}.fa-file-circle-check:before{content:"\e5a0"}.fa-forward:before{content:"\f04e"}.fa-mobile-android:before,.fa-mobile-phone:before,.fa-mobile:before{content:"\f3ce"}.fa-face-meh:before,.fa-meh:before{content:"\f11a"}.fa-align-center:before{content:"\f037"}.fa-book-dead:before,.fa-book-skull:before{content:"\f6b7"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-heart-circle-exclamation:before{content:"\e4fe"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-calendar-week:before{content:"\f784"}.fa-laptop-medical:before{content:"\f812"}.fa-b:before{content:"\42"}.fa-file-medical:before{content:"\f477"}.fa-dice-one:before{content:"\f525"}.fa-kiwi-bird:before{content:"\f535"}.fa-arrow-right-arrow-left:before,.fa-exchange:before{content:"\f0ec"}.fa-redo-alt:before,.fa-rotate-forward:before,.fa-rotate-right:before{content:"\f2f9"}.fa-cutlery:before,.fa-utensils:before{content:"\f2e7"}.fa-arrow-up-wide-short:before,.fa-sort-amount-up:before{content:"\f161"}.fa-mill-sign:before{content:"\e1ed"}.fa-bowl-rice:before{content:"\e2eb"}.fa-skull:before{content:"\f54c"}.fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"}.fa-truck-pickup:before{content:"\f63c"}.fa-long-arrow-alt-up:before,.fa-up-long:before{content:"\f30c"}.fa-stop:before{content:"\f04d"}.fa-code-merge:before{content:"\f387"}.fa-upload:before{content:"\f093"}.fa-hurricane:before{content:"\f751"}.fa-mound:before{content:"\e52d"}.fa-toilet-portable:before{content:"\e583"}.fa-compact-disc:before{content:"\f51f"}.fa-file-arrow-down:before,.fa-file-download:before{content:"\f56d"}.fa-caravan:before{content:"\f8ff"}.fa-shield-cat:before{content:"\e572"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-glass-water:before{content:"\e4f4"}.fa-oil-well:before{content:"\e532"}.fa-vault:before{content:"\e2c5"}.fa-mars:before{content:"\f222"}.fa-toilet:before{content:"\f7d8"}.fa-plane-circle-xmark:before{content:"\e557"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen-sign:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble-sign:before,.fa-ruble:before{content:"\f158"}.fa-sun:before{content:"\f185"}.fa-guitar:before{content:"\f7a6"}.fa-face-laugh-wink:before,.fa-laugh-wink:before{content:"\f59c"}.fa-horse-head:before{content:"\f7ab"}.fa-bore-hole:before{content:"\e4c3"}.fa-industry:before{content:"\f275"}.fa-arrow-alt-circle-down:before,.fa-circle-down:before{content:"\f358"}.fa-arrows-turn-to-dots:before{content:"\e4c1"}.fa-florin-sign:before{content:"\e184"}.fa-arrow-down-short-wide:before,.fa-sort-amount-desc:before,.fa-sort-amount-down-alt:before{content:"\f884"}.fa-less-than:before{content:"\3c"}.fa-angle-down:before{content:"\f107"}.fa-car-tunnel:before{content:"\e4de"}.fa-head-side-cough:before{content:"\e061"}.fa-grip-lines:before{content:"\f7a4"}.fa-thumbs-down:before{content:"\f165"}.fa-user-lock:before{content:"\f502"}.fa-arrow-right-long:before,.fa-long-arrow-right:before{content:"\f178"}.fa-anchor-circle-xmark:before{content:"\e4ac"}.fa-ellipsis-h:before,.fa-ellipsis:before{content:"\f141"}.fa-chess-pawn:before{content:"\f443"}.fa-first-aid:before,.fa-kit-medical:before{content:"\f479"}.fa-person-through-window:before{content:"\e5a9"}.fa-toolbox:before{content:"\f552"}.fa-hands-holding-circle:before{content:"\e4fb"}.fa-bug:before{content:"\f188"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-hand-holding-hand:before{content:"\e4f7"}.fa-book-open-reader:before,.fa-book-reader:before{content:"\f5da"}.fa-mountain-sun:before{content:"\e52f"}.fa-arrows-left-right-to-line:before{content:"\e4ba"}.fa-dice-d20:before{content:"\f6cf"}.fa-truck-droplet:before{content:"\e58c"}.fa-file-circle-xmark:before{content:"\e5a1"}.fa-temperature-arrow-up:before,.fa-temperature-up:before{content:"\e040"}.fa-medal:before{content:"\f5a2"}.fa-bed:before{content:"\f236"}.fa-h-square:before,.fa-square-h:before{content:"\f0fd"}.fa-podcast:before{content:"\f2ce"}.fa-temperature-4:before,.fa-temperature-full:before,.fa-thermometer-4:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-bell:before{content:"\f0f3"}.fa-superscript:before{content:"\f12b"}.fa-plug-circle-xmark:before{content:"\e560"}.fa-star-of-life:before{content:"\f621"}.fa-phone-slash:before{content:"\f3dd"}.fa-paint-roller:before{content:"\f5aa"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-file:before{content:"\f15b"}.fa-greater-than:before{content:"\3e"}.fa-person-swimming:before,.fa-swimmer:before{content:"\f5c4"}.fa-arrow-down:before{content:"\f063"}.fa-droplet:before,.fa-tint:before{content:"\f043"}.fa-eraser:before{content:"\f12d"}.fa-earth-america:before,.fa-earth-americas:before,.fa-earth:before,.fa-globe-americas:before{content:"\f57d"}.fa-person-burst:before{content:"\e53b"}.fa-dove:before{content:"\f4ba"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-socks:before{content:"\f696"}.fa-inbox:before{content:"\f01c"}.fa-section:before{content:"\e447"}.fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"}.fa-envelope-open-text:before{content:"\f658"}.fa-hospital-alt:before,.fa-hospital-wide:before,.fa-hospital:before{content:"\f0f8"}.fa-wine-bottle:before{content:"\f72f"}.fa-chess-rook:before{content:"\f447"}.fa-bars-staggered:before,.fa-reorder:before,.fa-stream:before{content:"\f550"}.fa-dharmachakra:before{content:"\f655"}.fa-hotdog:before{content:"\f80f"}.fa-blind:before,.fa-person-walking-with-cane:before{content:"\f29d"}.fa-drum:before{content:"\f569"}.fa-ice-cream:before{content:"\f810"}.fa-heart-circle-bolt:before{content:"\e4fc"}.fa-fax:before{content:"\f1ac"}.fa-paragraph:before{content:"\f1dd"}.fa-check-to-slot:before,.fa-vote-yea:before{content:"\f772"}.fa-star-half:before{content:"\f089"}.fa-boxes-alt:before,.fa-boxes-stacked:before,.fa-boxes:before{content:"\f468"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-assistive-listening-systems:before,.fa-ear-listen:before{content:"\f2a2"}.fa-tree-city:before{content:"\e587"}.fa-play:before{content:"\f04b"}.fa-font:before{content:"\f031"}.fa-rupiah-sign:before{content:"\e23d"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-ping-pong-paddle-ball:before,.fa-table-tennis-paddle-ball:before,.fa-table-tennis:before{content:"\f45d"}.fa-diagnoses:before,.fa-person-dots-from-line:before{content:"\f470"}.fa-trash-can-arrow-up:before,.fa-trash-restore-alt:before{content:"\f82a"}.fa-naira-sign:before{content:"\e1f6"}.fa-cart-arrow-down:before{content:"\f218"}.fa-walkie-talkie:before{content:"\f8ef"}.fa-file-edit:before,.fa-file-pen:before{content:"\f31c"}.fa-receipt:before{content:"\f543"}.fa-pen-square:before,.fa-pencil-square:before,.fa-square-pen:before{content:"\f14b"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-person-circle-exclamation:before{content:"\e53f"}.fa-chevron-down:before{content:"\f078"}.fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-skull-crossbones:before{content:"\f714"}.fa-code-compare:before{content:"\e13a"}.fa-list-dots:before,.fa-list-ul:before{content:"\f0ca"}.fa-school-lock:before{content:"\e56f"}.fa-tower-cell:before{content:"\e585"}.fa-down-long:before,.fa-long-arrow-alt-down:before{content:"\f309"}.fa-ranking-star:before{content:"\e561"}.fa-chess-king:before{content:"\f43f"}.fa-person-harassing:before{content:"\e549"}.fa-brazilian-real-sign:before{content:"\e46c"}.fa-landmark-alt:before,.fa-landmark-dome:before{content:"\f752"}.fa-arrow-up:before{content:"\f062"}.fa-television:before,.fa-tv-alt:before,.fa-tv:before{content:"\f26c"}.fa-shrimp:before{content:"\e448"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-jug-detergent:before{content:"\e519"}.fa-circle-user:before,.fa-user-circle:before{content:"\f2bd"}.fa-user-shield:before{content:"\f505"}.fa-wind:before{content:"\f72e"}.fa-car-burst:before,.fa-car-crash:before{content:"\f5e1"}.fa-y:before{content:"\59"}.fa-person-snowboarding:before,.fa-snowboarding:before{content:"\f7ce"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-fish:before{content:"\f578"}.fa-user-graduate:before{content:"\f501"}.fa-adjust:before,.fa-circle-half-stroke:before{content:"\f042"}.fa-clapperboard:before{content:"\e131"}.fa-circle-radiation:before,.fa-radiation-alt:before{content:"\f7ba"}.fa-baseball-ball:before,.fa-baseball:before{content:"\f433"}.fa-jet-fighter-up:before{content:"\e518"}.fa-diagram-project:before,.fa-project-diagram:before{content:"\f542"}.fa-copy:before{content:"\f0c5"}.fa-volume-mute:before,.fa-volume-times:before,.fa-volume-xmark:before{content:"\f6a9"}.fa-hand-sparkles:before{content:"\e05d"}.fa-grip-horizontal:before,.fa-grip:before{content:"\f58d"}.fa-share-from-square:before,.fa-share-square:before{content:"\f14d"}.fa-child-combatant:before,.fa-child-rifle:before{content:"\e4e0"}.fa-gun:before{content:"\e19b"}.fa-phone-square:before,.fa-square-phone:before{content:"\f098"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-expand:before{content:"\f065"}.fa-computer:before{content:"\e4e5"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-arrows-up-down-left-right:before,.fa-arrows:before{content:"\f047"}.fa-chalkboard-teacher:before,.fa-chalkboard-user:before{content:"\f51c"}.fa-peso-sign:before{content:"\e222"}.fa-building-shield:before{content:"\e4d8"}.fa-baby:before{content:"\f77c"}.fa-users-line:before{content:"\e592"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-tractor:before{content:"\f722"}.fa-trash-arrow-up:before,.fa-trash-restore:before{content:"\f829"}.fa-arrow-down-up-lock:before{content:"\e4b0"}.fa-lines-leaning:before{content:"\e51e"}.fa-ruler-combined:before{content:"\f546"}.fa-copyright:before{content:"\f1f9"}.fa-equals:before{content:"\3d"}.fa-blender:before{content:"\f517"}.fa-teeth:before{content:"\f62e"}.fa-ils:before,.fa-shekel-sign:before,.fa-shekel:before,.fa-sheqel-sign:before,.fa-sheqel:before{content:"\f20b"}.fa-map:before{content:"\f279"}.fa-rocket:before{content:"\f135"}.fa-photo-film:before,.fa-photo-video:before{content:"\f87c"}.fa-folder-minus:before{content:"\f65d"}.fa-store:before{content:"\f54e"}.fa-arrow-trend-up:before{content:"\e098"}.fa-plug-circle-minus:before{content:"\e55e"}.fa-sign-hanging:before,.fa-sign:before{content:"\f4d9"}.fa-bezier-curve:before{content:"\f55b"}.fa-bell-slash:before{content:"\f1f6"}.fa-tablet-android:before,.fa-tablet:before{content:"\f3fb"}.fa-school-flag:before{content:"\e56e"}.fa-fill:before{content:"\f575"}.fa-angle-up:before{content:"\f106"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-holly-berry:before{content:"\f7aa"}.fa-chevron-left:before{content:"\f053"}.fa-bacteria:before{content:"\e059"}.fa-hand-lizard:before{content:"\f258"}.fa-notdef:before{content:"\e1fe"}.fa-disease:before{content:"\f7fa"}.fa-briefcase-medical:before{content:"\f469"}.fa-genderless:before{content:"\f22d"}.fa-chevron-right:before{content:"\f054"}.fa-retweet:before{content:"\f079"}.fa-car-alt:before,.fa-car-rear:before{content:"\f5de"}.fa-pump-soap:before{content:"\e06b"}.fa-video-slash:before{content:"\f4e2"}.fa-battery-2:before,.fa-battery-quarter:before{content:"\f243"}.fa-radio:before{content:"\f8d7"}.fa-baby-carriage:before,.fa-carriage-baby:before{content:"\f77d"}.fa-traffic-light:before{content:"\f637"}.fa-thermometer:before{content:"\f491"}.fa-vr-cardboard:before{content:"\f729"}.fa-hand-middle-finger:before{content:"\f806"}.fa-percent:before,.fa-percentage:before{content:"\25"}.fa-truck-moving:before{content:"\f4df"}.fa-glass-water-droplet:before{content:"\e4f5"}.fa-display:before{content:"\e163"}.fa-face-smile:before,.fa-smile:before{content:"\f118"}.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}.fa-trophy:before{content:"\f091"}.fa-person-praying:before,.fa-pray:before{content:"\f683"}.fa-hammer:before{content:"\f6e3"}.fa-hand-peace:before{content:"\f25b"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-spinner:before{content:"\f110"}.fa-robot:before{content:"\f544"}.fa-peace:before{content:"\f67c"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-warehouse:before{content:"\f494"}.fa-arrow-up-right-dots:before{content:"\e4b7"}.fa-splotch:before{content:"\f5bc"}.fa-face-grin-hearts:before,.fa-grin-hearts:before{content:"\f584"}.fa-dice-four:before{content:"\f524"}.fa-sim-card:before{content:"\f7c4"}.fa-transgender-alt:before,.fa-transgender:before{content:"\f225"}.fa-mercury:before{content:"\f223"}.fa-arrow-turn-down:before,.fa-level-down:before{content:"\f149"}.fa-person-falling-burst:before{content:"\e547"}.fa-award:before{content:"\f559"}.fa-ticket-alt:before,.fa-ticket-simple:before{content:"\f3ff"}.fa-building:before{content:"\f1ad"}.fa-angle-double-left:before,.fa-angles-left:before{content:"\f100"}.fa-qrcode:before{content:"\f029"}.fa-clock-rotate-left:before,.fa-history:before{content:"\f1da"}.fa-face-grin-beam-sweat:before,.fa-grin-beam-sweat:before{content:"\f583"}.fa-arrow-right-from-file:before,.fa-file-export:before{content:"\f56e"}.fa-shield-blank:before,.fa-shield:before{content:"\f132"}.fa-arrow-up-short-wide:before,.fa-sort-amount-up-alt:before{content:"\f885"}.fa-house-medical:before{content:"\e3b2"}.fa-golf-ball-tee:before,.fa-golf-ball:before{content:"\f450"}.fa-chevron-circle-left:before,.fa-circle-chevron-left:before{content:"\f137"}.fa-house-chimney-window:before{content:"\e00d"}.fa-pen-nib:before{content:"\f5ad"}.fa-tent-arrow-turn-left:before{content:"\e580"}.fa-tents:before{content:"\e582"}.fa-magic:before,.fa-wand-magic:before{content:"\f0d0"}.fa-dog:before{content:"\f6d3"}.fa-carrot:before{content:"\f787"}.fa-moon:before{content:"\f186"}.fa-wine-glass-alt:before,.fa-wine-glass-empty:before{content:"\f5ce"}.fa-cheese:before{content:"\f7ef"}.fa-yin-yang:before{content:"\f6ad"}.fa-music:before{content:"\f001"}.fa-code-commit:before{content:"\f386"}.fa-temperature-low:before{content:"\f76b"}.fa-biking:before,.fa-person-biking:before{content:"\f84a"}.fa-broom:before{content:"\f51a"}.fa-shield-heart:before{content:"\e574"}.fa-gopuram:before{content:"\f664"}.fa-earth-oceania:before,.fa-globe-oceania:before{content:"\e47b"}.fa-square-xmark:before,.fa-times-square:before,.fa-xmark-square:before{content:"\f2d3"}.fa-hashtag:before{content:"\23"}.fa-expand-alt:before,.fa-up-right-and-down-left-from-center:before{content:"\f424"}.fa-oil-can:before{content:"\f613"}.fa-t:before{content:"\54"}.fa-hippo:before{content:"\f6ed"}.fa-chart-column:before{content:"\e0e3"}.fa-infinity:before{content:"\f534"}.fa-vial-circle-check:before{content:"\e596"}.fa-person-arrow-down-to-line:before{content:"\e538"}.fa-voicemail:before{content:"\f897"}.fa-fan:before{content:"\f863"}.fa-person-walking-luggage:before{content:"\e554"}.fa-arrows-alt-v:before,.fa-up-down:before{content:"\f338"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-calendar:before{content:"\f133"}.fa-trailer:before{content:"\e041"}.fa-bahai:before,.fa-haykal:before{content:"\f666"}.fa-sd-card:before{content:"\f7c2"}.fa-dragon:before{content:"\f6d5"}.fa-shoe-prints:before{content:"\f54b"}.fa-circle-plus:before,.fa-plus-circle:before{content:"\f055"}.fa-face-grin-tongue-wink:before,.fa-grin-tongue-wink:before{content:"\f58b"}.fa-hand-holding:before{content:"\f4bd"}.fa-plug-circle-exclamation:before{content:"\e55d"}.fa-chain-broken:before,.fa-chain-slash:before,.fa-link-slash:before,.fa-unlink:before{content:"\f127"}.fa-clone:before{content:"\f24d"}.fa-person-walking-arrow-loop-left:before{content:"\e551"}.fa-arrow-up-z-a:before,.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-fire-alt:before,.fa-fire-flame-curved:before{content:"\f7e4"}.fa-tornado:before{content:"\f76f"}.fa-file-circle-plus:before{content:"\e494"}.fa-book-quran:before,.fa-quran:before{content:"\f687"}.fa-anchor:before{content:"\f13d"}.fa-border-all:before{content:"\f84c"}.fa-angry:before,.fa-face-angry:before{content:"\f556"}.fa-cookie-bite:before{content:"\f564"}.fa-arrow-trend-down:before{content:"\e097"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-draw-polygon:before{content:"\f5ee"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-gauge-simple-high:before,.fa-tachometer-fast:before,.fa-tachometer:before{content:"\f62a"}.fa-shower:before{content:"\f2cc"}.fa-desktop-alt:before,.fa-desktop:before{content:"\f390"}.fa-m:before{content:"\4d"}.fa-table-list:before,.fa-th-list:before{content:"\f00b"}.fa-comment-sms:before,.fa-sms:before{content:"\f7cd"}.fa-book:before{content:"\f02d"}.fa-user-plus:before{content:"\f234"}.fa-check:before{content:"\f00c"}.fa-battery-4:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-house-circle-check:before{content:"\e509"}.fa-angle-left:before{content:"\f104"}.fa-diagram-successor:before{content:"\e47a"}.fa-truck-arrow-right:before{content:"\e58b"}.fa-arrows-split-up-and-left:before{content:"\e4bc"}.fa-fist-raised:before,.fa-hand-fist:before{content:"\f6de"}.fa-cloud-moon:before{content:"\f6c3"}.fa-briefcase:before{content:"\f0b1"}.fa-person-falling:before{content:"\e546"}.fa-image-portrait:before,.fa-portrait:before{content:"\f3e0"}.fa-user-tag:before{content:"\f507"}.fa-rug:before{content:"\e569"}.fa-earth-europe:before,.fa-globe-europe:before{content:"\f7a2"}.fa-cart-flatbed-suitcase:before,.fa-luggage-cart:before{content:"\f59d"}.fa-rectangle-times:before,.fa-rectangle-xmark:before,.fa-times-rectangle:before,.fa-window-close:before{content:"\f410"}.fa-baht-sign:before{content:"\e0ac"}.fa-book-open:before{content:"\f518"}.fa-book-journal-whills:before,.fa-journal-whills:before{content:"\f66a"}.fa-handcuffs:before{content:"\e4f8"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-database:before{content:"\f1c0"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-bottle-droplet:before{content:"\e4c4"}.fa-mask-face:before{content:"\e1d7"}.fa-hill-rockslide:before{content:"\e508"}.fa-exchange-alt:before,.fa-right-left:before{content:"\f362"}.fa-paper-plane:before{content:"\f1d8"}.fa-road-circle-exclamation:before{content:"\e565"}.fa-dungeon:before{content:"\f6d9"}.fa-align-right:before{content:"\f038"}.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-life-ring:before{content:"\f1cd"}.fa-hands:before,.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-calendar-day:before{content:"\f783"}.fa-ladder-water:before,.fa-swimming-pool:before,.fa-water-ladder:before{content:"\f5c5"}.fa-arrows-up-down:before,.fa-arrows-v:before{content:"\f07d"}.fa-face-grimace:before,.fa-grimace:before{content:"\f57f"}.fa-wheelchair-alt:before,.fa-wheelchair-move:before{content:"\e2ce"}.fa-level-down-alt:before,.fa-turn-down:before{content:"\f3be"}.fa-person-walking-arrow-right:before{content:"\e552"}.fa-envelope-square:before,.fa-square-envelope:before{content:"\f199"}.fa-dice:before{content:"\f522"}.fa-bowling-ball:before{content:"\f436"}.fa-brain:before{content:"\f5dc"}.fa-band-aid:before,.fa-bandage:before{content:"\f462"}.fa-calendar-minus:before{content:"\f272"}.fa-circle-xmark:before,.fa-times-circle:before,.fa-xmark-circle:before{content:"\f057"}.fa-gifts:before{content:"\f79c"}.fa-hotel:before{content:"\f594"}.fa-earth-asia:before,.fa-globe-asia:before{content:"\f57e"}.fa-id-card-alt:before,.fa-id-card-clip:before{content:"\f47f"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}.fa-thumbs-up:before{content:"\f164"}.fa-user-clock:before{content:"\f4fd"}.fa-allergies:before,.fa-hand-dots:before{content:"\f461"}.fa-file-invoice:before{content:"\f570"}.fa-window-minimize:before{content:"\f2d1"}.fa-coffee:before,.fa-mug-saucer:before{content:"\f0f4"}.fa-brush:before{content:"\f55d"}.fa-mask:before{content:"\f6fa"}.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-ruler-vertical:before{content:"\f548"}.fa-user-alt:before,.fa-user-large:before{content:"\f406"}.fa-train-tram:before{content:"\e5b4"}.fa-user-nurse:before{content:"\f82f"}.fa-syringe:before{content:"\f48e"}.fa-cloud-sun:before{content:"\f6c4"}.fa-stopwatch-20:before{content:"\e06f"}.fa-square-full:before{content:"\f45c"}.fa-magnet:before{content:"\f076"}.fa-jar:before{content:"\e516"}.fa-note-sticky:before,.fa-sticky-note:before{content:"\f249"}.fa-bug-slash:before{content:"\e490"}.fa-arrow-up-from-water-pump:before{content:"\e4b6"}.fa-bone:before{content:"\f5d7"}.fa-user-injured:before{content:"\f728"}.fa-face-sad-tear:before,.fa-sad-tear:before{content:"\f5b4"}.fa-plane:before{content:"\f072"}.fa-tent-arrows-down:before{content:"\e581"}.fa-exclamation:before{content:"\21"}.fa-arrows-spin:before{content:"\e4bb"}.fa-print:before{content:"\f02f"}.fa-try:before,.fa-turkish-lira-sign:before,.fa-turkish-lira:before{content:"\e2bb"}.fa-dollar-sign:before,.fa-dollar:before,.fa-usd:before{content:"\24"}.fa-x:before{content:"\58"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-users-cog:before,.fa-users-gear:before{content:"\f509"}.fa-person-military-pointing:before{content:"\e54a"}.fa-bank:before,.fa-building-columns:before,.fa-institution:before,.fa-museum:before,.fa-university:before{content:"\f19c"}.fa-umbrella:before{content:"\f0e9"}.fa-trowel:before{content:"\e589"}.fa-d:before{content:"\44"}.fa-stapler:before{content:"\e5af"}.fa-masks-theater:before,.fa-theater-masks:before{content:"\f630"}.fa-kip-sign:before{content:"\e1c4"}.fa-hand-point-left:before{content:"\f0a5"}.fa-handshake-alt:before,.fa-handshake-simple:before{content:"\f4c6"}.fa-fighter-jet:before,.fa-jet-fighter:before{content:"\f0fb"}.fa-share-alt-square:before,.fa-square-share-nodes:before{content:"\f1e1"}.fa-barcode:before{content:"\f02a"}.fa-plus-minus:before{content:"\e43c"}.fa-video-camera:before,.fa-video:before{content:"\f03d"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-person-circle-check:before{content:"\e53e"}.fa-level-up-alt:before,.fa-turn-up:before{content:"\f3bf"} 9 | .fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero:before{content:"\f3d0"}.fa-hooli:before{content:"\f427"}.fa-yelp:before{content:"\f1e9"}.fa-cc-visa:before{content:"\f1f0"}.fa-lastfm:before{content:"\f202"}.fa-shopware:before{content:"\f5b5"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-aws:before{content:"\f375"}.fa-redhat:before{content:"\f7bc"}.fa-yoast:before{content:"\f2b1"}.fa-cloudflare:before{content:"\e07d"}.fa-ups:before{content:"\f7e0"}.fa-pixiv:before{content:"\e640"}.fa-wpexplorer:before{content:"\f2de"}.fa-dyalog:before{content:"\f399"}.fa-bity:before{content:"\f37a"}.fa-stackpath:before{content:"\f842"}.fa-buysellads:before{content:"\f20d"}.fa-first-order:before{content:"\f2b0"}.fa-modx:before{content:"\f285"}.fa-guilded:before{content:"\e07e"}.fa-vnv:before{content:"\f40b"}.fa-js-square:before,.fa-square-js:before{content:"\f3b9"}.fa-microsoft:before{content:"\f3ca"}.fa-qq:before{content:"\f1d6"}.fa-orcid:before{content:"\f8d2"}.fa-java:before{content:"\f4e4"}.fa-invision:before{content:"\f7b0"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-centercode:before{content:"\f380"}.fa-glide-g:before{content:"\f2a6"}.fa-drupal:before{content:"\f1a9"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-unity:before{content:"\e049"}.fa-whmcs:before{content:"\f40d"}.fa-rocketchat:before{content:"\f3e8"}.fa-vk:before{content:"\f189"}.fa-untappd:before{content:"\f405"}.fa-mailchimp:before{content:"\f59e"}.fa-css3-alt:before{content:"\f38b"}.fa-reddit-square:before,.fa-square-reddit:before{content:"\f1a2"}.fa-vimeo-v:before{content:"\f27d"}.fa-contao:before{content:"\f26d"}.fa-square-font-awesome:before{content:"\e5ad"}.fa-deskpro:before{content:"\f38f"}.fa-brave:before{content:"\e63c"}.fa-sistrix:before{content:"\f3ee"}.fa-instagram-square:before,.fa-square-instagram:before{content:"\e055"}.fa-battle-net:before{content:"\f835"}.fa-the-red-yeti:before{content:"\f69d"}.fa-hacker-news-square:before,.fa-square-hacker-news:before{content:"\f3af"}.fa-edge:before{content:"\f282"}.fa-threads:before{content:"\e618"}.fa-napster:before{content:"\f3d2"}.fa-snapchat-square:before,.fa-square-snapchat:before{content:"\f2ad"}.fa-google-plus-g:before{content:"\f0d5"}.fa-artstation:before{content:"\f77a"}.fa-markdown:before{content:"\f60f"}.fa-sourcetree:before{content:"\f7d3"}.fa-google-plus:before{content:"\f2b3"}.fa-diaspora:before{content:"\f791"}.fa-foursquare:before{content:"\f180"}.fa-stack-overflow:before{content:"\f16c"}.fa-github-alt:before{content:"\f113"}.fa-phoenix-squadron:before{content:"\f511"}.fa-pagelines:before{content:"\f18c"}.fa-algolia:before{content:"\f36c"}.fa-red-river:before{content:"\f3e3"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-safari:before{content:"\f267"}.fa-google:before{content:"\f1a0"}.fa-font-awesome-alt:before,.fa-square-font-awesome-stroke:before{content:"\f35c"}.fa-atlassian:before{content:"\f77b"}.fa-linkedin-in:before{content:"\f0e1"}.fa-digital-ocean:before{content:"\f391"}.fa-nimblr:before{content:"\f5a8"}.fa-chromecast:before{content:"\f838"}.fa-evernote:before{content:"\f839"}.fa-hacker-news:before{content:"\f1d4"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-adversal:before{content:"\f36a"}.fa-creative-commons:before{content:"\f25e"}.fa-watchman-monitoring:before{content:"\e087"}.fa-fonticons:before{content:"\f280"}.fa-weixin:before{content:"\f1d7"}.fa-shirtsinbulk:before{content:"\f214"}.fa-codepen:before{content:"\f1cb"}.fa-git-alt:before{content:"\f841"}.fa-lyft:before{content:"\f3c3"}.fa-rev:before{content:"\f5b2"}.fa-windows:before{content:"\f17a"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-square-viadeo:before,.fa-viadeo-square:before{content:"\f2aa"}.fa-meetup:before{content:"\f2e0"}.fa-centos:before{content:"\f789"}.fa-adn:before{content:"\f170"}.fa-cloudsmith:before{content:"\f384"}.fa-opensuse:before{content:"\e62b"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-dribbble-square:before,.fa-square-dribbble:before{content:"\f397"}.fa-codiepie:before{content:"\f284"}.fa-node:before{content:"\f419"}.fa-mix:before{content:"\f3cb"}.fa-steam:before{content:"\f1b6"}.fa-cc-apple-pay:before{content:"\f416"}.fa-scribd:before{content:"\f28a"}.fa-debian:before{content:"\e60b"}.fa-openid:before{content:"\f19b"}.fa-instalod:before{content:"\e081"}.fa-expeditedssl:before{content:"\f23e"}.fa-sellcast:before{content:"\f2da"}.fa-square-twitter:before,.fa-twitter-square:before{content:"\f081"}.fa-r-project:before{content:"\f4f7"}.fa-delicious:before{content:"\f1a5"}.fa-freebsd:before{content:"\f3a4"}.fa-vuejs:before{content:"\f41f"}.fa-accusoft:before{content:"\f369"}.fa-ioxhost:before{content:"\f208"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-app-store:before{content:"\f36f"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-itunes-note:before{content:"\f3b5"}.fa-golang:before{content:"\e40f"}.fa-kickstarter:before{content:"\f3bb"}.fa-grav:before{content:"\f2d6"}.fa-weibo:before{content:"\f18a"}.fa-uncharted:before{content:"\e084"}.fa-firstdraft:before{content:"\f3a1"}.fa-square-youtube:before,.fa-youtube-square:before{content:"\f431"}.fa-wikipedia-w:before{content:"\f266"}.fa-rendact:before,.fa-wpressr:before{content:"\f3e4"}.fa-angellist:before{content:"\f209"}.fa-galactic-republic:before{content:"\f50c"}.fa-nfc-directional:before{content:"\e530"}.fa-skype:before{content:"\f17e"}.fa-joget:before{content:"\f3b7"}.fa-fedora:before{content:"\f798"}.fa-stripe-s:before{content:"\f42a"}.fa-meta:before{content:"\e49b"}.fa-laravel:before{content:"\f3bd"}.fa-hotjar:before{content:"\f3b1"}.fa-bluetooth-b:before{content:"\f294"}.fa-square-letterboxd:before{content:"\e62e"}.fa-sticker-mule:before{content:"\f3f7"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-hips:before{content:"\f452"}.fa-behance:before{content:"\f1b4"}.fa-reddit:before{content:"\f1a1"}.fa-discord:before{content:"\f392"}.fa-chrome:before{content:"\f268"}.fa-app-store-ios:before{content:"\f370"}.fa-cc-discover:before{content:"\f1f2"}.fa-wpbeginner:before{content:"\f297"}.fa-confluence:before{content:"\f78d"}.fa-shoelace:before{content:"\e60c"}.fa-mdb:before{content:"\f8ca"}.fa-dochub:before{content:"\f394"}.fa-accessible-icon:before{content:"\f368"}.fa-ebay:before{content:"\f4f4"}.fa-amazon:before{content:"\f270"}.fa-unsplash:before{content:"\e07c"}.fa-yarn:before{content:"\f7e3"}.fa-square-steam:before,.fa-steam-square:before{content:"\f1b7"}.fa-500px:before{content:"\f26e"}.fa-square-vimeo:before,.fa-vimeo-square:before{content:"\f194"}.fa-asymmetrik:before{content:"\f372"}.fa-font-awesome-flag:before,.fa-font-awesome-logo-full:before,.fa-font-awesome:before{content:"\f2b4"}.fa-gratipay:before{content:"\f184"}.fa-apple:before{content:"\f179"}.fa-hive:before{content:"\e07f"}.fa-gitkraken:before{content:"\f3a6"}.fa-keybase:before{content:"\f4f5"}.fa-apple-pay:before{content:"\f415"}.fa-padlet:before{content:"\e4a0"}.fa-amazon-pay:before{content:"\f42c"}.fa-github-square:before,.fa-square-github:before{content:"\f092"}.fa-stumbleupon:before{content:"\f1a4"}.fa-fedex:before{content:"\f797"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-shopify:before{content:"\e057"}.fa-neos:before{content:"\f612"}.fa-square-threads:before{content:"\e619"}.fa-hackerrank:before{content:"\f5f7"}.fa-researchgate:before{content:"\f4f8"}.fa-swift:before{content:"\f8e1"}.fa-angular:before{content:"\f420"}.fa-speakap:before{content:"\f3f3"}.fa-angrycreative:before{content:"\f36e"}.fa-y-combinator:before{content:"\f23b"}.fa-empire:before{content:"\f1d1"}.fa-envira:before{content:"\f299"}.fa-google-scholar:before{content:"\e63b"}.fa-gitlab-square:before,.fa-square-gitlab:before{content:"\e5ae"}.fa-studiovinari:before{content:"\f3f8"}.fa-pied-piper:before{content:"\f2ae"}.fa-wordpress:before{content:"\f19a"}.fa-product-hunt:before{content:"\f288"}.fa-firefox:before{content:"\f269"}.fa-linode:before{content:"\f2b8"}.fa-goodreads:before{content:"\f3a8"}.fa-odnoklassniki-square:before,.fa-square-odnoklassniki:before{content:"\f264"}.fa-jsfiddle:before{content:"\f1cc"}.fa-sith:before{content:"\f512"}.fa-themeisle:before{content:"\f2b2"}.fa-page4:before{content:"\f3d7"}.fa-hashnode:before{content:"\e499"}.fa-react:before{content:"\f41b"}.fa-cc-paypal:before{content:"\f1f4"}.fa-squarespace:before{content:"\f5be"}.fa-cc-stripe:before{content:"\f1f5"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-bitcoin:before{content:"\f379"}.fa-keycdn:before{content:"\f3ba"}.fa-opera:before{content:"\f26a"}.fa-itch-io:before{content:"\f83a"}.fa-umbraco:before{content:"\f8e8"}.fa-galactic-senate:before{content:"\f50d"}.fa-ubuntu:before{content:"\f7df"}.fa-draft2digital:before{content:"\f396"}.fa-stripe:before{content:"\f429"}.fa-houzz:before{content:"\f27c"}.fa-gg:before{content:"\f260"}.fa-dhl:before{content:"\f790"}.fa-pinterest-square:before,.fa-square-pinterest:before{content:"\f0d3"}.fa-xing:before{content:"\f168"}.fa-blackberry:before{content:"\f37b"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-playstation:before{content:"\f3df"}.fa-quinscape:before{content:"\f459"}.fa-less:before{content:"\f41d"}.fa-blogger-b:before{content:"\f37d"}.fa-opencart:before{content:"\f23d"}.fa-vine:before{content:"\f1ca"}.fa-signal-messenger:before{content:"\e663"}.fa-paypal:before{content:"\f1ed"}.fa-gitlab:before{content:"\f296"}.fa-typo3:before{content:"\f42b"}.fa-reddit-alien:before{content:"\f281"}.fa-yahoo:before{content:"\f19e"}.fa-dailymotion:before{content:"\e052"}.fa-affiliatetheme:before{content:"\f36b"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-bootstrap:before{content:"\f836"}.fa-odnoklassniki:before{content:"\f263"}.fa-nfc-symbol:before{content:"\e531"}.fa-mintbit:before{content:"\e62f"}.fa-ethereum:before{content:"\f42e"}.fa-speaker-deck:before{content:"\f83c"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-patreon:before{content:"\f3d9"}.fa-avianex:before{content:"\f374"}.fa-ello:before{content:"\f5f1"}.fa-gofore:before{content:"\f3a7"}.fa-bimobject:before{content:"\f378"}.fa-brave-reverse:before{content:"\e63d"}.fa-facebook-f:before{content:"\f39e"}.fa-google-plus-square:before,.fa-square-google-plus:before{content:"\f0d4"}.fa-mandalorian:before{content:"\f50f"}.fa-first-order-alt:before{content:"\f50a"}.fa-osi:before{content:"\f41a"}.fa-google-wallet:before{content:"\f1ee"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-periscope:before{content:"\f3da"}.fa-fulcrum:before{content:"\f50b"}.fa-cloudscale:before{content:"\f383"}.fa-forumbee:before{content:"\f211"}.fa-mizuni:before{content:"\f3cc"}.fa-schlix:before{content:"\f3ea"}.fa-square-xing:before,.fa-xing-square:before{content:"\f169"}.fa-bandcamp:before{content:"\f2d5"}.fa-wpforms:before{content:"\f298"}.fa-cloudversify:before{content:"\f385"}.fa-usps:before{content:"\f7e1"}.fa-megaport:before{content:"\f5a3"}.fa-magento:before{content:"\f3c4"}.fa-spotify:before{content:"\f1bc"}.fa-optin-monster:before{content:"\f23c"}.fa-fly:before{content:"\f417"}.fa-aviato:before{content:"\f421"}.fa-itunes:before{content:"\f3b4"}.fa-cuttlefish:before{content:"\f38c"}.fa-blogger:before{content:"\f37c"}.fa-flickr:before{content:"\f16e"}.fa-viber:before{content:"\f409"}.fa-soundcloud:before{content:"\f1be"}.fa-digg:before{content:"\f1a6"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-letterboxd:before{content:"\e62d"}.fa-symfony:before{content:"\f83d"}.fa-maxcdn:before{content:"\f136"}.fa-etsy:before{content:"\f2d7"}.fa-facebook-messenger:before{content:"\f39f"}.fa-audible:before{content:"\f373"}.fa-think-peaks:before{content:"\f731"}.fa-bilibili:before{content:"\e3d9"}.fa-erlang:before{content:"\f39d"}.fa-x-twitter:before{content:"\e61b"}.fa-cotton-bureau:before{content:"\f89e"}.fa-dashcube:before{content:"\f210"}.fa-42-group:before,.fa-innosoft:before{content:"\e080"}.fa-stack-exchange:before{content:"\f18d"}.fa-elementor:before{content:"\f430"}.fa-pied-piper-square:before,.fa-square-pied-piper:before{content:"\e01e"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-palfed:before{content:"\f3d8"}.fa-superpowers:before{content:"\f2dd"}.fa-resolving:before{content:"\f3e7"}.fa-xbox:before{content:"\f412"}.fa-searchengin:before{content:"\f3eb"}.fa-tiktok:before{content:"\e07b"}.fa-facebook-square:before,.fa-square-facebook:before{content:"\f082"}.fa-renren:before{content:"\f18b"}.fa-linux:before{content:"\f17c"}.fa-glide:before{content:"\f2a5"}.fa-linkedin:before{content:"\f08c"}.fa-hubspot:before{content:"\f3b2"}.fa-deploydog:before{content:"\f38e"}.fa-twitch:before{content:"\f1e8"}.fa-ravelry:before{content:"\f2d9"}.fa-mixer:before{content:"\e056"}.fa-lastfm-square:before,.fa-square-lastfm:before{content:"\f203"}.fa-vimeo:before{content:"\f40a"}.fa-mendeley:before{content:"\f7b3"}.fa-uniregistry:before{content:"\f404"}.fa-figma:before{content:"\f799"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-dropbox:before{content:"\f16b"}.fa-instagram:before{content:"\f16d"}.fa-cmplid:before{content:"\e360"}.fa-upwork:before{content:"\e641"}.fa-facebook:before{content:"\f09a"}.fa-gripfire:before{content:"\f3ac"}.fa-jedi-order:before{content:"\f50e"}.fa-uikit:before{content:"\f403"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-phabricator:before{content:"\f3db"}.fa-ussunnah:before{content:"\f407"}.fa-earlybirds:before{content:"\f39a"}.fa-trade-federation:before{content:"\f513"}.fa-autoprefixer:before{content:"\f41c"}.fa-whatsapp:before{content:"\f232"}.fa-slideshare:before{content:"\f1e7"}.fa-google-play:before{content:"\f3ab"}.fa-viadeo:before{content:"\f2a9"}.fa-line:before{content:"\f3c0"}.fa-google-drive:before{content:"\f3aa"}.fa-servicestack:before{content:"\f3ec"}.fa-simplybuilt:before{content:"\f215"}.fa-bitbucket:before{content:"\f171"}.fa-imdb:before{content:"\f2d8"}.fa-deezer:before{content:"\e077"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-jira:before{content:"\f7b1"}.fa-docker:before{content:"\f395"}.fa-screenpal:before{content:"\e570"}.fa-bluetooth:before{content:"\f293"}.fa-gitter:before{content:"\f426"}.fa-d-and-d:before{content:"\f38d"}.fa-microblog:before{content:"\e01a"}.fa-cc-diners-club:before{content:"\f24c"}.fa-gg-circle:before{content:"\f261"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-yandex:before{content:"\f413"}.fa-readme:before{content:"\f4d5"}.fa-html5:before{content:"\f13b"}.fa-sellsy:before{content:"\f213"}.fa-sass:before{content:"\f41e"}.fa-wirsindhandwerk:before,.fa-wsh:before{content:"\e2d0"}.fa-buromobelexperte:before{content:"\f37f"}.fa-salesforce:before{content:"\f83b"}.fa-octopus-deploy:before{content:"\e082"}.fa-medapps:before{content:"\f3c6"}.fa-ns8:before{content:"\f3d5"}.fa-pinterest-p:before{content:"\f231"}.fa-apper:before{content:"\f371"}.fa-fort-awesome:before{content:"\f286"}.fa-waze:before{content:"\f83f"}.fa-cc-jcb:before{content:"\f24b"}.fa-snapchat-ghost:before,.fa-snapchat:before{content:"\f2ab"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-rust:before{content:"\e07a"}.fa-wix:before{content:"\f5cf"}.fa-behance-square:before,.fa-square-behance:before{content:"\f1b5"}.fa-supple:before{content:"\f3f9"}.fa-webflow:before{content:"\e65c"}.fa-rebel:before{content:"\f1d0"}.fa-css3:before{content:"\f13c"}.fa-staylinked:before{content:"\f3f5"}.fa-kaggle:before{content:"\f5fa"}.fa-space-awesome:before{content:"\e5ac"}.fa-deviantart:before{content:"\f1bd"}.fa-cpanel:before{content:"\f388"}.fa-goodreads-g:before{content:"\f3a9"}.fa-git-square:before,.fa-square-git:before{content:"\f1d2"}.fa-square-tumblr:before,.fa-tumblr-square:before{content:"\f174"}.fa-trello:before{content:"\f181"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-get-pocket:before{content:"\f265"}.fa-perbyte:before{content:"\e083"}.fa-grunt:before{content:"\f3ad"}.fa-weebly:before{content:"\f5cc"}.fa-connectdevelop:before{content:"\f20e"}.fa-leanpub:before{content:"\f212"}.fa-black-tie:before{content:"\f27e"}.fa-themeco:before{content:"\f5c6"}.fa-python:before{content:"\f3e2"}.fa-android:before{content:"\f17b"}.fa-bots:before{content:"\e340"}.fa-free-code-camp:before{content:"\f2c5"}.fa-hornbill:before{content:"\f592"}.fa-js:before{content:"\f3b8"}.fa-ideal:before{content:"\e013"}.fa-git:before{content:"\f1d3"}.fa-dev:before{content:"\f6cc"}.fa-sketch:before{content:"\f7c6"}.fa-yandex-international:before{content:"\f414"}.fa-cc-amex:before{content:"\f1f3"}.fa-uber:before{content:"\f402"}.fa-github:before{content:"\f09b"}.fa-php:before{content:"\f457"}.fa-alipay:before{content:"\f642"}.fa-youtube:before{content:"\f167"}.fa-skyatlas:before{content:"\f216"}.fa-firefox-browser:before{content:"\e007"}.fa-replyd:before{content:"\f3e6"}.fa-suse:before{content:"\f7d6"}.fa-jenkins:before{content:"\f3b6"}.fa-twitter:before{content:"\f099"}.fa-rockrms:before{content:"\f3e9"}.fa-pinterest:before{content:"\f0d2"}.fa-buffer:before{content:"\f837"}.fa-npm:before{content:"\f3d4"}.fa-yammer:before{content:"\f840"}.fa-btc:before{content:"\f15a"}.fa-dribbble:before{content:"\f17d"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-internet-explorer:before{content:"\f26b"}.fa-stubber:before{content:"\e5c7"}.fa-telegram-plane:before,.fa-telegram:before{content:"\f2c6"}.fa-old-republic:before{content:"\f510"}.fa-odysee:before{content:"\e5c6"}.fa-square-whatsapp:before,.fa-whatsapp-square:before{content:"\f40c"}.fa-node-js:before{content:"\f3d3"}.fa-edge-legacy:before{content:"\e078"}.fa-slack-hash:before,.fa-slack:before{content:"\f198"}.fa-medrt:before{content:"\f3c8"}.fa-usb:before{content:"\f287"}.fa-tumblr:before{content:"\f173"}.fa-vaadin:before{content:"\f408"}.fa-quora:before{content:"\f2c4"}.fa-square-x-twitter:before{content:"\e61a"}.fa-reacteurope:before{content:"\f75d"}.fa-medium-m:before,.fa-medium:before{content:"\f23a"}.fa-amilia:before{content:"\f36d"}.fa-mixcloud:before{content:"\f289"}.fa-flipboard:before{content:"\f44d"}.fa-viacoin:before{content:"\f237"}.fa-critical-role:before{content:"\f6c9"}.fa-sitrox:before{content:"\e44a"}.fa-discourse:before{content:"\f393"}.fa-joomla:before{content:"\f1aa"}.fa-mastodon:before{content:"\f4f6"}.fa-airbnb:before{content:"\f834"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-buy-n-large:before{content:"\f8a6"}.fa-gulp:before{content:"\f3ae"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-strava:before{content:"\f428"}.fa-ember:before{content:"\f423"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-teamspeak:before{content:"\f4f9"}.fa-pushed:before{content:"\f3e1"}.fa-wordpress-simple:before{content:"\f411"}.fa-nutritionix:before{content:"\f3d6"}.fa-wodu:before{content:"\e088"}.fa-google-pay:before{content:"\e079"}.fa-intercom:before{content:"\f7af"}.fa-zhihu:before{content:"\f63f"}.fa-korvue:before{content:"\f42f"}.fa-pix:before{content:"\e43a"}.fa-steam-symbol:before{content:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a} -------------------------------------------------------------------------------- /Project 2 - Lux/css/lux.css: -------------------------------------------------------------------------------- 1 | /* Start Variables */ 2 | :root { 3 | --main-color: #10cab7; 4 | --secondary-color: #2c4755; 5 | --section-padding: 60px; 6 | --section-background: #f6f6f6; 7 | --main-duration: 0.3s; 8 | } 9 | /* End Variables */ 10 | 11 | /* Start Global Rules */ 12 | * { 13 | -webkit-box-sizing: border-box; 14 | -moz-box-sizing: border-box; 15 | box-sizing: border-box; 16 | } 17 | 18 | html { 19 | scroll-behavior: smooth; 20 | } 21 | 22 | body { 23 | font-family: "Work Sans", sans-serif; 24 | } 25 | 26 | .container { 27 | padding-left: 15px; 28 | padding-right: 15px; 29 | margin-left: auto; 30 | margin-right: auto; 31 | } 32 | 33 | /* Small */ 34 | @media (min-width: 768px) { 35 | .container { 36 | width: 750px; 37 | } 38 | } 39 | /* Medium */ 40 | @media (min-width: 992px) { 41 | .container { 42 | width: 970px; 43 | } 44 | } 45 | /* Large */ 46 | @media (min-width: 1200px) { 47 | .container { 48 | width: 1170px; 49 | } 50 | } 51 | /* End Global Rules */ 52 | 53 | /* Start Components */ 54 | .special-heading { 55 | color: #ebeced; 56 | font-size: 100px; 57 | text-align: center; 58 | font-weight: 800; 59 | letter-spacing: -3px; 60 | margin: 0; 61 | } 62 | 63 | .special-heading + p { 64 | margin: -30px 0 0; 65 | font-size: 20px; 66 | text-align: center; 67 | color: #797979; 68 | } 69 | 70 | @media (max-width: 767px) { 71 | .special-heading { 72 | font-size: 60px; 73 | } 74 | 75 | .special-heading + p { 76 | margin-top: -20px; 77 | } 78 | } 79 | /* End Components */ 80 | 81 | /* Start Header */ 82 | .header { 83 | padding: 20px; 84 | } 85 | 86 | .header .container { 87 | display: flex; 88 | justify-content: space-between; 89 | align-items: center; 90 | } 91 | 92 | .header .logo { 93 | width: 60px; 94 | } 95 | 96 | .header .links { 97 | position: relative; 98 | } 99 | 100 | .header .links .icon { 101 | width: 30px; 102 | display: flex; 103 | flex-wrap: wrap; 104 | justify-content: flex-end; 105 | cursor: pointer; 106 | } 107 | 108 | .header .links .icon span { 109 | background-color: #333; 110 | margin-bottom: 5px; 111 | height: 2px; 112 | } 113 | 114 | .header .links .icon span:first-child { 115 | width: 100%; 116 | } 117 | 118 | .header .links .icon span:nth-child(2) { 119 | width: 60%; 120 | transition: var(--main-duration); 121 | } 122 | 123 | .header .links .icon span:last-child { 124 | width: 100%; 125 | } 126 | 127 | .header .links:hover .icon span:nth-child(2) { 128 | width: 100%; 129 | } 130 | 131 | .header .links ul { 132 | list-style: none; 133 | margin: 0; 134 | padding: 0; 135 | background-color: var(--section-background); 136 | position: absolute; 137 | right: 0; 138 | min-width: 200px; 139 | top: calc(100% + 15px); 140 | display: none; 141 | z-index: 1; 142 | } 143 | 144 | .header .links ul::before { 145 | content: ""; 146 | border-width: 10px; 147 | border-style: solid; 148 | border-color: transparent transparent var(--section-background) transparent; 149 | position: absolute; 150 | right: 5px; 151 | top: -20px; 152 | } 153 | 154 | .header .links:hover ul { 155 | display: block; 156 | } 157 | 158 | .header .links ul li a { 159 | display: block; 160 | padding: 15px; 161 | text-decoration: none; 162 | color: #333; 163 | transition: var(--main-duration); 164 | } 165 | 166 | .header .links ul li a:hover { 167 | padding-left: 25px; 168 | color: var(--main-color); 169 | } 170 | 171 | .header .links ul li:not(:last-child) a { 172 | border-bottom: 1px solid #ddd; 173 | } 174 | /* End Header */ 175 | 176 | /* Start Landing Section */ 177 | .landing { 178 | background-image: url(../images/landing.jpg); 179 | background-size: cover; 180 | height: calc(100vh - 64px); 181 | position: relative; 182 | } 183 | 184 | .landing .intro-text { 185 | position: absolute; 186 | left: 50%; 187 | top: 50%; 188 | text-align: center; 189 | transform: translate(-50%, -50%); 190 | width: 320px; 191 | max-width: 100%; 192 | } 193 | 194 | .landing .intro-text h1 { 195 | margin: 0; 196 | font-weight: bold; 197 | font-size: 50px; 198 | color: var(--main-color); 199 | } 200 | 201 | .landing .intro-text p { 202 | font-size: 19px; 203 | line-height: 1.8; 204 | } 205 | /* End Landing Section */ 206 | 207 | /* Start Features */ 208 | .features { 209 | padding-top: var(--section-padding); 210 | padding-bottom: var(--section-padding); 211 | background-color: var(--section-background); 212 | } 213 | 214 | .features .container { 215 | display: grid; 216 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 217 | grid-gap: 20px; 218 | } 219 | 220 | .features .feat { 221 | padding: 20px; 222 | text-align: center; 223 | } 224 | 225 | .features .feat i { 226 | color: var(--main-color); 227 | font-size: 50px; 228 | } 229 | 230 | .features .feat h3 { 231 | font-weight: 800; 232 | margin: 30px 0; 233 | } 234 | 235 | .features .feat p { 236 | line-height: 1.8; 237 | color: #777; 238 | font-size: 17px; 239 | } 240 | /* End Features */ 241 | 242 | /* Start Services */ 243 | .services { 244 | padding-top: var(--section-padding); 245 | padding-bottom: var(--section-padding); 246 | } 247 | 248 | .services .services-content { 249 | display: grid; 250 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 251 | grid-gap: 30px; 252 | margin-top: 100px; 253 | } 254 | 255 | .services .services-content .srv { 256 | display: flex; 257 | margin-bottom: 40px; 258 | } 259 | 260 | @media (max-width: 767px) { 261 | .services .services-content .srv { 262 | flex-direction: column; 263 | text-align: center; 264 | } 265 | } 266 | 267 | .services .services-content .srv i { 268 | color: var(--main-color); 269 | flex-basis: 60px; 270 | font-size: 30px; 271 | } 272 | 273 | .services .services-content .srv .text { 274 | flex: 1; 275 | } 276 | 277 | .services .services-content .srv .text h3 { 278 | margin: 0 0 20px; 279 | } 280 | 281 | .services .services-content .srv .text p { 282 | color: #777; 283 | font-weight: 300; 284 | line-height: 1.6; 285 | } 286 | 287 | .services .services-content .image { 288 | text-align: center; 289 | position: relative; 290 | } 291 | 292 | .services .services-content .image::before { 293 | content: ""; 294 | background-color: var(--secondary-color); 295 | width: 100px; 296 | height: calc(100% + 100px); 297 | top: -50px; 298 | position: absolute; 299 | right: 0; 300 | z-index: -1; 301 | } 302 | 303 | .services .services-content .image img { 304 | width: 260px; 305 | } 306 | 307 | @media (max-width: 1199px) { 308 | .image-column { 309 | display: none; 310 | } 311 | } 312 | /* End Services */ 313 | 314 | /* Start Portfolio */ 315 | .portfolio { 316 | padding-top: var(--section-padding); 317 | padding-bottom: var(--section-padding); 318 | background-color: var(--section-background); 319 | } 320 | 321 | .portfolio .portfolio-content { 322 | display: grid; 323 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 324 | grid-gap: 30px; 325 | margin-top: 80px; 326 | } 327 | 328 | .portfolio .portfolio-content .card { 329 | background-color: white; 330 | } 331 | 332 | .portfolio .portfolio-content .card img { 333 | max-width: 100%; 334 | } 335 | 336 | .portfolio .portfolio-content .card .info { 337 | padding: 20px; 338 | } 339 | 340 | .portfolio .portfolio-content .card .info h3 { 341 | margin: 0; 342 | } 343 | 344 | .portfolio .portfolio-content .card .info p { 345 | color: #777; 346 | line-height: 1.6; 347 | margin-bottom: 0; 348 | } 349 | /* End Portfolio */ 350 | 351 | /* Start About */ 352 | .about { 353 | padding-top: var(--section-padding); 354 | padding-bottom: calc(var(--section-padding) + 60px); 355 | } 356 | 357 | .about .about-content { 358 | margin-top: 100px; 359 | display: flex; 360 | flex-wrap: wrap; 361 | justify-content: space-between; 362 | } 363 | 364 | @media (max-width: 991px) { 365 | .about .about-content { 366 | flex-direction: column; 367 | text-align: center; 368 | } 369 | } 370 | 371 | .about .about-content .image { 372 | position: relative; 373 | width: 250px; 374 | height: 375px; 375 | } 376 | 377 | @media (max-width: 991px) { 378 | .about .about-content .image { 379 | margin: 0 auto 60px; 380 | } 381 | } 382 | 383 | .about .about-content .image::before { 384 | content: ""; 385 | position: absolute; 386 | background-color: #ebeced; 387 | width: 100px; 388 | height: calc(100% + 80px); 389 | top: -40px; 390 | left: -20px; 391 | z-index: -1; 392 | } 393 | 394 | .about .about-content .image::after { 395 | content: ""; 396 | position: absolute; 397 | width: 120px; 398 | height: 300px; 399 | border-left: 80px solid var(--main-color); 400 | border-bottom: 80px solid var(--main-color); 401 | z-index: -1; 402 | right: -150px; 403 | top: -40px; 404 | } 405 | 406 | @media (max-width: 991px) { 407 | .about .about-content .image::before, 408 | .about .about-content .image::after { 409 | display: none; 410 | } 411 | } 412 | 413 | .about .about-content .image img { 414 | max-width: 100%; 415 | } 416 | 417 | .about .about-content .text { 418 | flex-basis: calc(100% - 500px); 419 | } 420 | 421 | .about .about-content .text p:first-of-type { 422 | font-weight: bold; 423 | line-height: 2; 424 | margin-bottom: 50px; 425 | } 426 | 427 | .about .about-content .text hr { 428 | width: 50%; 429 | display: inline-block; 430 | border-color: var(--main-color); 431 | } 432 | 433 | .about .about-content .text p:last-of-type { 434 | line-height: 2; 435 | color: #777; 436 | } 437 | /* End About */ 438 | 439 | /* Start Contact */ 440 | .contact { 441 | padding-top: var(--section-padding); 442 | padding-bottom: var(--section-padding); 443 | background-color: var(--section-background); 444 | } 445 | 446 | .contact .info { 447 | padding-top: var(--section-padding); 448 | padding-bottom: var(--section-padding); 449 | text-align: center; 450 | } 451 | 452 | .contact .info .label { 453 | font-size: 35px; 454 | font-weight: 800; 455 | color: var(--secondary-color); 456 | letter-spacing: -2px; 457 | margin-bottom: 15px; 458 | } 459 | 460 | .contact .info .link { 461 | display: block; 462 | font-size: 35px; 463 | font-weight: 800; 464 | color: var(--main-color); 465 | text-decoration: none; 466 | margin-bottom: 20px; 467 | } 468 | 469 | .contact .info .social { 470 | display: flex; 471 | justify-content: center; 472 | margin-top: 20px; 473 | font-size: 16px; 474 | } 475 | 476 | .contact .info .social i { 477 | margin-left: 10px; 478 | color: var(--secondary-color); 479 | } 480 | 481 | @media (max-width: 767px) { 482 | .contact .info .label, 483 | .contact .info .link { 484 | font-size: 25px; 485 | } 486 | } 487 | /* End Contact */ 488 | 489 | /* Start Footer */ 490 | .footer { 491 | background-color: var(--secondary-color); 492 | color: white; 493 | padding: 30px 10px; 494 | text-align: center; 495 | font-size: 18px; 496 | } 497 | 498 | .footer span { 499 | font-weight: bold; 500 | color: var(--main-color); 501 | } 502 | /* End Footer */ -------------------------------------------------------------------------------- /Project 2 - Lux/css/master.css: -------------------------------------------------------------------------------- 1 | /* Start Variables */ 2 | :root { 3 | --main-color: #10cab7; 4 | --secondary-color: #2c4755; 5 | --section-padding: 60px; 6 | --section-background: #f6f6f6; 7 | --main-duration: 0.3s; 8 | } 9 | 10 | /* End Variables */ 11 | 12 | 13 | /* ------------------------------------------------------------- */ 14 | 15 | /* START GLOBAL RULES */ 16 | * { 17 | -webkit-box-sizing: border-box; 18 | -moz-box-sizing: border-box; 19 | box-sizing: border-box; 20 | } 21 | 22 | /* le template est conçu avec le font Work Sans */ 23 | body { 24 | font-family: "Work Sans", sans-serif; 25 | } 26 | 27 | /* 28 | on utilise un container pour garder le contenu de la page au milieu , quand on dézoom le contenu reste au 29 | milieu si on faisais pas ça on aura le logo tout à gauche et des informations tout à droite 30 | donc le parent nous permet de mettre un background et le container les informations qui vont suivre 31 | la même ligne verticalement 32 | */ 33 | 34 | .container { 35 | padding-left: 15px; 36 | padding-right: 15px; 37 | margin-left: auto; 38 | margin-right: auto; 39 | } 40 | 41 | /* to have the responsive design */ 42 | /* in mobile our container dont have a width , it takes full screen */ 43 | @media (min-width: 768px) { 44 | .container { 45 | width: 750px; 46 | } 47 | } 48 | 49 | @media (min-width: 992px) { 50 | .container { 51 | width: 970px; 52 | } 53 | } 54 | 55 | @media (min-width: 1200px) { 56 | .container { 57 | width: 1170px; 58 | } 59 | } 60 | 61 | /* END GLOBAL RULES */ 62 | 63 | /* ------------------------------------------------------------ */ 64 | 65 | 66 | /* 67 | font icons => de base une photo si on la redimensionne y'aura un problème de pixel , donc on utilise les font 68 | icons qui nous permettent de manipuler les photos comme si c'était des font (modifier la couleur, dimension..) 69 | visiter le site fontawesome.com => download font awesome 70 | on met le dossier webfonts au même niveau que le dossier css pour que les icones marchent 71 | on aura besoin aussi du file all.min.css(minified all.css, la taille du code est réduite) qui va appeler les 72 | web fonts , on le met avec le file css car il fait (../webfonts/..) pour récupérer un font 73 | 74 | */ 75 | 76 | 77 | /* --------------------------------------------------------- */ 78 | 79 | /* Start Components */ 80 | .special-heading { 81 | color: #ebeced; 82 | font-size: 100px; 83 | text-align: center; 84 | font-weight: 800; 85 | letter-spacing: -3px; 86 | margin: 0; 87 | } 88 | 89 | .special-heading+p { 90 | margin: -30px 0 0; 91 | font-size: 20px; 92 | text-align: center; 93 | color: #797979; 94 | } 95 | 96 | @media (max-width: 767px) { 97 | .special-heading { 98 | font-size: 60px; 99 | } 100 | 101 | .special-heading+p { 102 | margin-top: -20px; 103 | } 104 | } 105 | 106 | /* End Components */ 107 | 108 | /* Start Header */ 109 | .header { 110 | padding: 20px; 111 | } 112 | 113 | .header .container { 114 | display: flex; 115 | align-items: center; 116 | justify-content: space-between; 117 | } 118 | 119 | .header .logo { 120 | width: 60px; 121 | } 122 | 123 | .header .links { 124 | position: relative; 125 | } 126 | 127 | .header .links .icon { 128 | width: 30px; 129 | display: flex; 130 | flex-wrap: wrap; 131 | justify-content: flex-end; 132 | } 133 | 134 | .header .links .icon span { 135 | background-color: #333; 136 | margin-bottom: 5px; 137 | height: 2px; 138 | } 139 | 140 | .header .links .icon span:first-child { 141 | width: 100%; 142 | } 143 | 144 | .header .links .icon span:nth-child(2) { 145 | width: 60%; 146 | transition: var(--main-duration); 147 | } 148 | 149 | .header .links .icon span:last-child { 150 | width: 100%; 151 | } 152 | 153 | /* quand on met le curseur sur les links on change le width du child 2 à 100% */ 154 | .header .links:hover span:nth-child(2) { 155 | width: 100%; 156 | } 157 | 158 | .header .links ul { 159 | list-style: none; 160 | padding: 0; 161 | margin: 0; 162 | background-color: var(--section-backround); 163 | min-width: 200px; 164 | position: absolute; 165 | right: 0; 166 | top: calc(100% + 20px); 167 | display: none; 168 | /* pour qu'on la voit au dessus du landing section */ 169 | z-index: 1; 170 | } 171 | 172 | .header .links ul::before { 173 | content: ""; 174 | position: absolute; 175 | border: 10px solid; 176 | border-color: transparent transparent #f6f6f6 transparent; 177 | /* 5px=>car l'icone du haut est à 30px , et la flèche est à 20x20 dans chaque bordure 10px */ 178 | right: 5px; 179 | top: -20px; 180 | } 181 | 182 | .header .links:hover ul { 183 | display: block; 184 | } 185 | 186 | 187 | .header .links ul li a { 188 | display: block; 189 | padding: 15px; 190 | color: #333; 191 | text-decoration: none; 192 | transition: var(--main-duration); 193 | } 194 | 195 | .header .links ul li a:hover { 196 | padding-left: 25px; 197 | } 198 | 199 | .header .links ul li:not(:last-child) a { 200 | border-bottom: 1px solid #DDD; 201 | } 202 | 203 | /* End Header */ 204 | 205 | 206 | /* Start Landing Section */ 207 | .landing { 208 | background-image: url(../images/landing.jpg); 209 | background-size: cover; 210 | /* 100vh va remplir toute la page et on enlève 64px le height du header */ 211 | height: calc(100vh - 64px); 212 | position: relative; 213 | } 214 | 215 | 216 | .landing .intro-text { 217 | position: absolute; 218 | left: 50%; 219 | top: 50%; 220 | transform: translate(-50%, -50%); 221 | text-align: center; 222 | width: 320px; 223 | max-width: 100%; 224 | } 225 | 226 | .landing .intro-text h1 { 227 | margin: 0; 228 | color: var(--main-color); 229 | font-size: 50px; 230 | font-weight: bold; 231 | } 232 | 233 | .landing .intro-text p { 234 | line-height: 1.8; 235 | } 236 | 237 | /* End Landing Section */ 238 | 239 | /* Start Features */ 240 | .features { 241 | padding-top: var(--section-padding); 242 | padding-bottom: var(--section-padding); 243 | background-color: var(--section-background); 244 | } 245 | 246 | .features .container { 247 | display: grid; 248 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 249 | grid-gap: 20px; 250 | } 251 | 252 | .features .feat { 253 | padding: 20px; 254 | text-align: center; 255 | } 256 | 257 | .features .feat i { 258 | color: var(--main-color); 259 | } 260 | 261 | .features .feat h3 { 262 | font-weight: 800; 263 | margin: 30px 0; 264 | } 265 | 266 | .features .feat p { 267 | margin: 17px 0; 268 | line-height: 1.8; 269 | color: #777; 270 | font-size: 17px; 271 | } 272 | 273 | /* End Features */ 274 | 275 | /* Start Services */ 276 | .services { 277 | padding-top: var(--section-padding); 278 | padding-bottom: var(--section-padding); 279 | } 280 | 281 | .services .services-content { 282 | display: grid; 283 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 284 | grid-gap: 30px; 285 | margin-top: 100px; 286 | } 287 | 288 | .services .services-content .srv { 289 | display: flex; 290 | margin-bottom: 40px; 291 | } 292 | 293 | @media (max-width:767px) { 294 | .services .services-content .srv { 295 | flex-direction: column; 296 | text-align: center; 297 | } 298 | } 299 | 300 | .services .services-content .srv i { 301 | color: var(--main-color); 302 | flex-basis: 60px; 303 | } 304 | 305 | .services .services-content .srv .text { 306 | flex: 1; 307 | } 308 | 309 | .services .services-content .srv .text h3 { 310 | margin: 0 0 20px; 311 | } 312 | 313 | .services .services-content .srv .text p { 314 | color: #444; 315 | line-height: 1.6; 316 | font-weight: 300; 317 | } 318 | 319 | .services .services-content .image { 320 | text-align: center; 321 | position: relative; 322 | } 323 | 324 | .services .services-content .image::before { 325 | content: ""; 326 | position: absolute; 327 | width: 100px; 328 | height: calc(100% + 100px); 329 | background-color: var(--secondary-color); 330 | right: -20px; 331 | top: -50px; 332 | z-index: -1; 333 | } 334 | 335 | .services .services-content .image img { 336 | width: 260px; 337 | } 338 | 339 | @media (max-width:1199px) { 340 | .services .services-content .image-column { 341 | display: none; 342 | } 343 | } 344 | 345 | /* End Services */ 346 | 347 | /* Start Portfolio */ 348 | .portfolio { 349 | padding-top: var(--section-padding); 350 | padding-bottom: var(--section-padding); 351 | background-color: var(--section-background); 352 | } 353 | 354 | .portfolio .portfolio-content { 355 | display: grid; 356 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 357 | grid-gap: 30px; 358 | margin-top: 80px; 359 | } 360 | 361 | .portfolio .portfolio-content .card { 362 | background-color: white; 363 | } 364 | 365 | .portfolio .portfolio-content .card img { 366 | max-width: 100%; 367 | } 368 | 369 | .portfolio .portfolio-content .card .info { 370 | padding: 20px; 371 | } 372 | 373 | .portfolio .portfolio-content .card h3 { 374 | margin: 0; 375 | } 376 | 377 | .portfolio .portfolio-content .card p { 378 | color: #777; 379 | line-height: 1.6; 380 | margin-bottom: 0; 381 | } 382 | 383 | /* End Portfolio */ 384 | 385 | /* Start About */ 386 | .about { 387 | padding-top: var(--section-padding); 388 | padding-bottom: calc(var(--section-padding) + 60px); 389 | } 390 | 391 | .about .about-content { 392 | margin-top: 100px; 393 | display: flex; 394 | flex-wrap: wrap; 395 | justify-content: space-between; 396 | } 397 | 398 | .about .about-content .image { 399 | position: relative; 400 | width: 250px; 401 | height: 375px; 402 | } 403 | 404 | .about .about-content .image img { 405 | max-width: 100%; 406 | } 407 | 408 | .about .about-content .image::before { 409 | content: ""; 410 | position: absolute; 411 | height: calc(100% + 80px); 412 | width: 100px; 413 | top: -40px; 414 | left: -20px; 415 | background-color: #ebeced; 416 | z-index: -1; 417 | } 418 | 419 | .about .about-content .image::after { 420 | content: ""; 421 | position: absolute; 422 | width: 120px; 423 | height: 300px; 424 | border-left: 80px solid var(--main-color); 425 | border-bottom: 75px solid var(--main-color); 426 | z-index: -1; 427 | right: -150px; 428 | top: -40px; 429 | } 430 | 431 | .about .about-content .text { 432 | flex-basis: calc(100% - 500px); 433 | } 434 | 435 | .about .about-content .text p:first-of-type { 436 | font-weight: bold; 437 | line-height: 2; 438 | margin-bottom: 50px; 439 | } 440 | 441 | .about .about-content .text hr { 442 | width: 50%; 443 | display: inline-block; 444 | border-color: var(--main-color); 445 | } 446 | 447 | .about .about-content .text p:last-of-type { 448 | line-height: 2; 449 | color: #777; 450 | } 451 | 452 | @media (max-width:991px) { 453 | .about .about-content { 454 | flex-direction: column; 455 | text-align: center; 456 | } 457 | 458 | .about .about-content .image::before, 459 | .about .about-content .image::after { 460 | display: none; 461 | } 462 | 463 | .about .about-content .image { 464 | margin: 0 auto 60px; 465 | } 466 | } 467 | 468 | /* End About */ 469 | 470 | /* Start Contact */ 471 | .contact { 472 | padding-top: var(--section-padding); 473 | padding-bottom: var(--section-padding); 474 | background-color: var(--section-background); 475 | } 476 | 477 | .contact .info { 478 | padding-top: var(--section-padding); 479 | padding-bottom: var(--section-padding); 480 | text-align: center; 481 | } 482 | 483 | .contact .info .label { 484 | font-size: 35px; 485 | font-weight: 800; 486 | color: var(--secondary-color); 487 | letter-spacing: -2px; 488 | margin-bottom: 15px; 489 | } 490 | 491 | .contact .info .link { 492 | display: block; 493 | font-size: 35px; 494 | font-weight: bold; 495 | color: var(--main-color); 496 | text-decoration: none; 497 | } 498 | 499 | .contact .info .social { 500 | display: flex; 501 | justify-content: center; 502 | margin-top: 20px; 503 | font-size: 16px; 504 | } 505 | 506 | .contact .info .social i { 507 | margin-left: 5px; 508 | color: var(--secondary-color); 509 | } 510 | 511 | @media (max-width:767px) { 512 | 513 | .contact .info .label, 514 | .contact .info .link { 515 | font-size: 25px; 516 | } 517 | } 518 | 519 | /* End Contact */ 520 | 521 | /* Start Footer */ 522 | 523 | .footer { 524 | background-color: var(--secondary-color); 525 | text-align: center; 526 | color: white; 527 | padding: 30px 10px; 528 | font-size: 18px; 529 | } 530 | 531 | .footer span { 532 | font-weight: bold; 533 | color: var(--main-color); 534 | } 535 | 536 | /* End Footer */ 537 | 538 | html { 539 | scroll-behavior: smooth; 540 | } -------------------------------------------------------------------------------- /Project 2 - Lux/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; 13 | /* 1 */ 14 | -webkit-text-size-adjust: 100%; 15 | /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers. 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /** 30 | * Render the `main` element consistently in IE. 31 | */ 32 | 33 | main { 34 | display: block; 35 | } 36 | 37 | /** 38 | * Correct the font size and margin on `h1` elements within `section` and 39 | * `article` contexts in Chrome, Firefox, and Safari. 40 | */ 41 | 42 | h1 { 43 | font-size: 2em; 44 | margin: 0.67em 0; 45 | } 46 | 47 | /* Grouping content 48 | ========================================================================== */ 49 | 50 | /** 51 | * 1. Add the correct box sizing in Firefox. 52 | * 2. Show the overflow in Edge and IE. 53 | */ 54 | 55 | hr { 56 | box-sizing: content-box; 57 | /* 1 */ 58 | height: 0; 59 | /* 1 */ 60 | overflow: visible; 61 | /* 2 */ 62 | } 63 | 64 | /** 65 | * 1. Correct the inheritance and scaling of font size in all browsers. 66 | * 2. Correct the odd `em` font sizing in all browsers. 67 | */ 68 | 69 | pre { 70 | font-family: monospace, monospace; 71 | /* 1 */ 72 | font-size: 1em; 73 | /* 2 */ 74 | } 75 | 76 | /* Text-level semantics 77 | ========================================================================== */ 78 | 79 | /** 80 | * Remove the gray background on active links in IE 10. 81 | */ 82 | 83 | a { 84 | background-color: transparent; 85 | } 86 | 87 | /** 88 | * 1. Remove the bottom border in Chrome 57- 89 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 90 | */ 91 | 92 | abbr[title] { 93 | border-bottom: none; 94 | /* 1 */ 95 | text-decoration: underline; 96 | /* 2 */ 97 | text-decoration: underline dotted; 98 | /* 2 */ 99 | } 100 | 101 | /** 102 | * Add the correct font weight in Chrome, Edge, and Safari. 103 | */ 104 | 105 | b, 106 | strong { 107 | font-weight: bolder; 108 | } 109 | 110 | /** 111 | * 1. Correct the inheritance and scaling of font size in all browsers. 112 | * 2. Correct the odd `em` font sizing in all browsers. 113 | */ 114 | 115 | code, 116 | kbd, 117 | samp { 118 | font-family: monospace, monospace; 119 | /* 1 */ 120 | font-size: 1em; 121 | /* 2 */ 122 | } 123 | 124 | /** 125 | * Add the correct font size in all browsers. 126 | */ 127 | 128 | small { 129 | font-size: 80%; 130 | } 131 | 132 | /** 133 | * Prevent `sub` and `sup` elements from affecting the line height in 134 | * all browsers. 135 | */ 136 | 137 | sub, 138 | sup { 139 | font-size: 75%; 140 | line-height: 0; 141 | position: relative; 142 | vertical-align: baseline; 143 | } 144 | 145 | sub { 146 | bottom: -0.25em; 147 | } 148 | 149 | sup { 150 | top: -0.5em; 151 | } 152 | 153 | /* Embedded content 154 | ========================================================================== */ 155 | 156 | /** 157 | * Remove the border on images inside links in IE 10. 158 | */ 159 | 160 | img { 161 | border-style: none; 162 | } 163 | 164 | /* Forms 165 | ========================================================================== */ 166 | 167 | /** 168 | * 1. Change the font styles in all browsers. 169 | * 2. Remove the margin in Firefox and Safari. 170 | */ 171 | 172 | button, 173 | input, 174 | optgroup, 175 | select, 176 | textarea { 177 | font-family: inherit; 178 | /* 1 */ 179 | font-size: 100%; 180 | /* 1 */ 181 | line-height: 1.15; 182 | /* 1 */ 183 | margin: 0; 184 | /* 2 */ 185 | } 186 | 187 | /** 188 | * Show the overflow in IE. 189 | * 1. Show the overflow in Edge. 190 | */ 191 | 192 | button, 193 | input { 194 | /* 1 */ 195 | overflow: visible; 196 | } 197 | 198 | /** 199 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 200 | * 1. Remove the inheritance of text transform in Firefox. 201 | */ 202 | 203 | button, 204 | select { 205 | /* 1 */ 206 | text-transform: none; 207 | } 208 | 209 | /** 210 | * Correct the inability to style clickable types in iOS and Safari. 211 | */ 212 | 213 | button, 214 | [type="button"], 215 | [type="reset"], 216 | [type="submit"] { 217 | -webkit-appearance: button; 218 | } 219 | 220 | /** 221 | * Remove the inner border and padding in Firefox. 222 | */ 223 | 224 | button::-moz-focus-inner, 225 | [type="button"]::-moz-focus-inner, 226 | [type="reset"]::-moz-focus-inner, 227 | [type="submit"]::-moz-focus-inner { 228 | border-style: none; 229 | padding: 0; 230 | } 231 | 232 | /** 233 | * Restore the focus styles unset by the previous rule. 234 | */ 235 | 236 | button:-moz-focusring, 237 | [type="button"]:-moz-focusring, 238 | [type="reset"]:-moz-focusring, 239 | [type="submit"]:-moz-focusring { 240 | outline: 1px dotted ButtonText; 241 | } 242 | 243 | /** 244 | * Correct the padding in Firefox. 245 | */ 246 | 247 | fieldset { 248 | padding: 0.35em 0.75em 0.625em; 249 | } 250 | 251 | /** 252 | * 1. Correct the text wrapping in Edge and IE. 253 | * 2. Correct the color inheritance from `fieldset` elements in IE. 254 | * 3. Remove the padding so developers are not caught out when they zero out 255 | * `fieldset` elements in all browsers. 256 | */ 257 | 258 | legend { 259 | box-sizing: border-box; 260 | /* 1 */ 261 | color: inherit; 262 | /* 2 */ 263 | display: table; 264 | /* 1 */ 265 | max-width: 100%; 266 | /* 1 */ 267 | padding: 0; 268 | /* 3 */ 269 | white-space: normal; 270 | /* 1 */ 271 | } 272 | 273 | /** 274 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 275 | */ 276 | 277 | progress { 278 | vertical-align: baseline; 279 | } 280 | 281 | /** 282 | * Remove the default vertical scrollbar in IE 10+. 283 | */ 284 | 285 | textarea { 286 | overflow: auto; 287 | } 288 | 289 | /** 290 | * 1. Add the correct box sizing in IE 10. 291 | * 2. Remove the padding in IE 10. 292 | */ 293 | 294 | [type="checkbox"], 295 | [type="radio"] { 296 | box-sizing: border-box; 297 | /* 1 */ 298 | padding: 0; 299 | /* 2 */ 300 | } 301 | 302 | /** 303 | * Correct the cursor style of increment and decrement buttons in Chrome. 304 | */ 305 | 306 | [type="number"]::-webkit-inner-spin-button, 307 | [type="number"]::-webkit-outer-spin-button { 308 | height: auto; 309 | } 310 | 311 | /** 312 | * 1. Correct the odd appearance in Chrome and Safari. 313 | * 2. Correct the outline style in Safari. 314 | */ 315 | 316 | [type="search"] { 317 | -webkit-appearance: textfield; 318 | /* 1 */ 319 | outline-offset: -2px; 320 | /* 2 */ 321 | } 322 | 323 | /** 324 | * Remove the inner padding in Chrome and Safari on macOS. 325 | */ 326 | 327 | [type="search"]::-webkit-search-decoration { 328 | -webkit-appearance: none; 329 | } 330 | 331 | /** 332 | * 1. Correct the inability to style clickable types in iOS and Safari. 333 | * 2. Change font properties to `inherit` in Safari. 334 | */ 335 | 336 | ::-webkit-file-upload-button { 337 | -webkit-appearance: button; 338 | /* 1 */ 339 | font: inherit; 340 | /* 2 */ 341 | } 342 | 343 | /* Interactive 344 | ========================================================================== */ 345 | 346 | /* 347 | * Add the correct display in Edge, IE 10+, and Firefox. 348 | */ 349 | 350 | details { 351 | display: block; 352 | } 353 | 354 | /* 355 | * Add the correct display in all browsers. 356 | */ 357 | 358 | summary { 359 | display: list-item; 360 | } 361 | 362 | /* Misc 363 | ========================================================================== */ 364 | 365 | /** 366 | * Add the correct display in IE 10+. 367 | */ 368 | 369 | template { 370 | display: none; 371 | } 372 | 373 | /** 374 | * Add the correct display in IE 10. 375 | */ 376 | 377 | [hidden] { 378 | display: none; 379 | } -------------------------------------------------------------------------------- /Project 2 - Lux/images/Alquds-2009-08-15-16.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/images/Alquds-2009-08-15-16.pdf -------------------------------------------------------------------------------- /Project 2 - Lux/images/Course Intro_Memories.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/images/Course Intro_Memories.pdf -------------------------------------------------------------------------------- /Project 2 - Lux/images/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/images/about.jpg -------------------------------------------------------------------------------- /Project 2 - Lux/images/landing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/images/landing.jpg -------------------------------------------------------------------------------- /Project 2 - Lux/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/images/logo.png -------------------------------------------------------------------------------- /Project 2 - Lux/images/portfolio-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/images/portfolio-1.jpg -------------------------------------------------------------------------------- /Project 2 - Lux/images/portfolio-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/images/portfolio-2.jpg -------------------------------------------------------------------------------- /Project 2 - Lux/images/portfolio-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/images/portfolio-3.jpg -------------------------------------------------------------------------------- /Project 2 - Lux/images/services.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/images/services.jpg -------------------------------------------------------------------------------- /Project 2 - Lux/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Leon Template One 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 39 |
40 |
41 |
42 | 43 | 44 |
45 |
46 |

Hello There

47 |

We are Leon - Super Creative & Minimal Agency Web Template

48 |
49 |
50 | 51 | 52 |
53 |
54 |
55 | 56 |

Tell Us Your Idea

57 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab

58 |
59 |
60 | 61 |

We Will Do All The Work

62 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab

63 |
64 |
65 | 66 |

Your Product is Worldwide

67 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab

68 |
69 |
70 |
71 | 72 | 73 |
74 |
75 |

Services

76 |

Don't be busy be productive

77 | 78 |
79 |
80 | 81 |
82 | 83 |
84 |

Graphic Design

85 |

Graphic design is the process of visual communication and problem-solving using one or 86 | more 87 | of typography, photography and illustration

88 |
89 |
90 |
91 | 92 |
93 |

UI & UX

94 |

Process of enhancing user satisfaction with a product by improving the usability, 95 | accessibility, and pleasure provided in the interaction.

96 |
97 |
98 | 99 |
100 |
101 | 102 |
103 | 104 |
105 |

Web Design

106 |

Web design encompasses many different skills and disciplines in the production and 107 | maintenance of websites

108 |
109 |
110 |
111 | 112 |
113 |

114 | Web Development

115 |

Web development is a broad term for the work involved in developing a web site for the 116 | Internet or an intranet.

117 |
118 |
119 | 120 |
121 |
122 |
123 | 124 |
125 |
126 |
127 |
128 |
129 | 130 | 131 |
132 |
133 |

Portfolio

134 |

If you do it right, it will last forever.

135 | 136 |
137 |
138 | 139 |
140 |

Project Here

141 |

My creative ability is very difficult to measure because it can manifest in so many 142 | surprising and.

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

Project Here

149 |

My creative ability is very difficult to measure because it can manifest in so many 150 | surprising and.

151 |
152 |
153 |
154 | 155 |
156 |

Project Here

157 |

My creative ability is very difficult to measure because it can manifest in so many 158 | surprising and.

159 |
160 |
161 |
162 |
163 |
164 | 165 | 166 |
167 |
168 |

About

169 |

Less is more work

170 |
171 |
172 | 173 |
174 |
175 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil nemo neque voluptate tempora velit 176 | cum non, fuga vitae architecto delectus sed maxime rerum impedit aliquam obcaecati, aut 177 | excepturi iusto laudantium!

178 |
179 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, sapiente. Velit iure 180 | exercitationem dolores nesciunt dolore. Eum officiis dolorum hic voluptate quaerat minima, 181 | similique inventore esse, alias, sed quo officia?

182 |
183 |
184 |
185 |
186 | 187 | 188 |
189 |
190 |

Contact

191 |

We are born to create

192 |
193 |

Feel free to drop us a line at:

194 | leonagency@mail.com 195 | 201 |
202 |
203 |
204 | 205 | 206 |
207 | © 2021 Leon All Right Reserved 208 |
209 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /Project 2 - Lux/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /Project 2 - Lux/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /Project 2 - Lux/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /Project 2 - Lux/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /Project 2 - Lux/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /Project 2 - Lux/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /Project 2 - Lux/webfonts/fa-v4compatibility.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/webfonts/fa-v4compatibility.ttf -------------------------------------------------------------------------------- /Project 2 - Lux/webfonts/fa-v4compatibility.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 2 - Lux/webfonts/fa-v4compatibility.woff2 -------------------------------------------------------------------------------- /Project 3 - Portfolio/README.md: -------------------------------------------------------------------------------- 1 | # Portfolio 2 | 3 | ## Overview 4 | This portfolio showcases my work and skills as a web developer using HTML, CSS, and JavaScript. 5 | 6 | ## Demo 7 | ![Home Page Screenshot](portfolio-preview.png) 8 | 9 | ## Features 10 | - Visually appealing homepage with a featured photo 11 | - Responsive design for both mobile and desktop views 12 | - Interactive elements to enhance user experience 13 | 14 | ## Technologies Used 15 | - **HTML** 16 | - **CSS** 17 | - **JavaScript** 18 | 19 | ## Installation Instructions 20 | To run this project locally, follow these steps: 21 | 22 | 1. Clone the repository: 23 | ```bash 24 | git clone https://github.com/NoureddineBou/Portfolio.git 25 | -------------------------------------------------------------------------------- /Project 3 - Portfolio/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 3 - Portfolio/home.jpg -------------------------------------------------------------------------------- /Project 3 - Portfolio/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | body { 11 | background: #081b29; 12 | color: #ededed; 13 | } 14 | 15 | .header { 16 | position: fixed; 17 | background: #081b29; 18 | top: 0; 19 | left: 0; 20 | width: 100%; 21 | padding: 20px 10%; 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | z-index: 100; 26 | box-shadow: 0px 5px 20px 0px black; 27 | } 28 | 29 | .logo { 30 | position: relative; 31 | font-size: 25px; 32 | color: #ededed; 33 | text-decoration: none; 34 | font-weight: 600; 35 | } 36 | 37 | 38 | .navbar a { 39 | font-size: 18px; 40 | color: #ededed; 41 | text-decoration: none; 42 | font-weight: 500; 43 | margin-left: 35px; 44 | transition: .3s; 45 | } 46 | 47 | .navbar a:hover, 48 | .navbar a.active{ 49 | color: #00abf0; 50 | } 51 | 52 | .home { 53 | height: 100vh; 54 | background: url('home.jpg') no-repeat; 55 | background-size: cover; 56 | background-position: center; 57 | display: flex; 58 | align-items: center; 59 | padding: 0 10%; 60 | } 61 | 62 | .home-content { 63 | max-width: 600px; 64 | } 65 | 66 | .home-content h1 { 67 | position: relative; 68 | font-size: 56px; 69 | font-weight: 700; 70 | line-height: 1.2; 71 | } 72 | 73 | .home-content h3 { 74 | position: relative; 75 | font-size: 32px; 76 | font-weight: 700; 77 | color: #00abf0; 78 | } 79 | 80 | 81 | .home-content p { 82 | position: relative; 83 | font-size: 16px; 84 | margin: 20px 0 40px; 85 | } 86 | 87 | .home-content .btn-box { 88 | position: relative; 89 | display: flex; 90 | justify-content: space-between; 91 | width: 345px; 92 | height: 50px; 93 | } 94 | 95 | 96 | .btn-box a { 97 | position: relative; 98 | display: inline-flex; 99 | justify-content: center; 100 | align-items: center; 101 | width: 150px; 102 | height: 100%; 103 | background: #00abf0; 104 | border: 2px solid #00abf0; 105 | border-radius: 8px; 106 | font-size: 19px; 107 | color: #081b29; 108 | text-decoration: none; 109 | font-weight: 600; 110 | letter-spacing: 1px; 111 | z-index: 1; 112 | overflow: hidden; 113 | transition: .5s; 114 | } 115 | 116 | .btn-box a:hover { 117 | color: #00abf0; 118 | } 119 | 120 | .btn-box a:nth-child(2) { 121 | background: transparent; 122 | color: #00abf0; 123 | } 124 | 125 | .btn-box a:nth-child(2):hover { 126 | color: #081b29; 127 | } 128 | 129 | .btn-box a:nth-child(2)::before { 130 | background: #00abf0; 131 | } 132 | 133 | .btn-box a::before { 134 | content: ''; 135 | position: absolute; 136 | top: 0; 137 | left: 0; 138 | width: 0; 139 | height: 100%; 140 | background: #081b29; 141 | z-index: -1; 142 | transition: .5s; 143 | } 144 | 145 | .btn-box a:hover::before { 146 | width: 100%; 147 | } 148 | 149 | .home-sci { 150 | position: absolute; 151 | bottom: 40px; 152 | width: 170px; 153 | display: flex; 154 | justify-content: space-between; 155 | } 156 | 157 | .home-sci a { 158 | position: relative; 159 | display: inline-flex; 160 | justify-content: center; 161 | align-items: center; 162 | width: 40px; 163 | height: 40px; 164 | background: transparent; 165 | border: 2px solid #00abf0; 166 | border-radius: 50%; 167 | font-size: 20px; 168 | color: #00abf0; 169 | text-decoration: none; 170 | z-index: 1; 171 | overflow: hidden; 172 | } 173 | 174 | .home-sci a:hover{ 175 | color: #081b29 ; 176 | } 177 | 178 | .home-sci a::before { 179 | content: ''; 180 | position: absolute; 181 | top: 0; 182 | left: 0; 183 | width: 0; 184 | height: 100%; 185 | background: #00abf0; 186 | z-index: -1; 187 | transition: .5s; 188 | } 189 | 190 | .home-sci a:hover::before { 191 | width: 100%; 192 | 193 | } 194 | 195 | 196 | .home-imgHover { 197 | position: absolute; 198 | right: 10%; 199 | bottom: 70px; 200 | width: 35px; 201 | height: 35px; 202 | border-left: 8px solid #00abf0; 203 | border-bottom: 8px solid #00abf0; 204 | animation: imgHover 1.5s linear infinite; 205 | } 206 | 207 | @keyframes imgHover { 208 | 0% { 209 | transform: translateY(0); 210 | } 211 | 100% { 212 | transform: translateY(-25px); 213 | } 214 | } 215 | 216 | .about { 217 | padding: 60px 10%; 218 | background: #f4f4f4; 219 | color: #333; 220 | } 221 | 222 | .about h2 { 223 | font-size: 36px; 224 | margin-bottom: 20px; 225 | } 226 | 227 | .about p { 228 | font-size: 18px; 229 | line-height: 1.6; 230 | } 231 | 232 | .services { 233 | padding: 60px 10%; 234 | background: #ededed; 235 | color: #333; 236 | } 237 | 238 | .services h2 { 239 | font-size: 36px; 240 | margin-bottom: 20px; 241 | } 242 | 243 | .service-box { 244 | margin-bottom: 20px; 245 | } 246 | 247 | .service-box h3 { 248 | font-size: 24px; 249 | } 250 | 251 | .service-box p { 252 | font-size: 18px; 253 | } 254 | 255 | .portfolio { 256 | padding: 60px 10%; 257 | background: #081b29; 258 | color: #ededed; 259 | } 260 | 261 | .portfolio h2 { 262 | font-size: 36px; 263 | margin-bottom: 20px; 264 | } 265 | 266 | .portfolio-item { 267 | margin-bottom: 20px; 268 | } 269 | 270 | .portfolio-item h3 { 271 | font-size: 24px; 272 | } 273 | 274 | .portfolio-item p { 275 | font-size: 18px; 276 | } 277 | 278 | .portfolio-item a { 279 | color: #00abf0; 280 | text-decoration: none; 281 | font-weight: 500; 282 | } 283 | 284 | .contact { 285 | padding: 60px 10%; 286 | background: #f4f4f4; 287 | color: #333; 288 | } 289 | 290 | .contact h2 { 291 | font-size: 36px; 292 | margin-bottom: 20px; 293 | } 294 | 295 | .contact form { 296 | display: flex; 297 | flex-direction: column; 298 | } 299 | 300 | .contact label { 301 | font-size: 18px; 302 | margin-bottom: 5px; 303 | } 304 | 305 | .contact input, 306 | .contact textarea { 307 | margin-bottom: 20px; 308 | padding: 10px; 309 | font-size: 16px; 310 | border: 1px solid #ccc; 311 | border-radius: 4px; 312 | } 313 | 314 | .contact button { 315 | padding: 10px 20px; 316 | font-size: 18px; 317 | background: #00abf0; 318 | color: #fff; 319 | border: none; 320 | border-radius: 4px; 321 | cursor: pointer; 322 | } 323 | 324 | .contact button:hover { 325 | background: #008ecc; 326 | } 327 | 328 | 329 | .scroll-to-top { 330 | position: fixed; 331 | bottom: 20px; 332 | right: 20px; 333 | background-color: #00abf0; 334 | color: #fff; 335 | border: none; 336 | border-radius: 50%; 337 | width: 40px; 338 | height: 40px; 339 | font-size: 24px; 340 | display: none; 341 | cursor: pointer; 342 | justify-content: center; 343 | align-items: center; 344 | z-index: 1000; 345 | } 346 | 347 | .scroll-to-top:hover { 348 | background-color: #008ecc; 349 | } 350 | 351 | -------------------------------------------------------------------------------- /Project 3 - Portfolio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Personal Portfolio Website 8 | 9 | 13 | 14 | 15 |
16 | 17 | 24 |
25 | 26 |
27 |
28 |

Hi, I'm Noureddine Bouderbala

29 |

Full-Stack Developer

30 |

31 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo, 32 | iusto possimus at non modi dolores id quae repellendus nobis quaerat 33 | adipisci ex atque reprehenderit omnis officia placeat. 34 |

35 |
36 | Hire Me 37 | Let's Talk 38 |
39 |
40 |
41 | 42 | 43 | 44 |
45 |
46 | 47 |
48 |
49 |

About Me

50 |

...

51 |

Skills

52 |
53 | 54 |
55 |
56 |

Services

57 |
58 |

Web Development

59 |

...

60 |
61 |
62 |

App Development

63 |

...

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

Projects

71 |
72 |

Project 1

73 |

Brief description of the project.

74 | View Project 77 |
78 |
79 |

project 2

80 |

81 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, 82 | ipsa! 83 |

84 | View Project 87 |
88 |
89 |

Project 3

90 |

91 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium 92 | minima fugiat officia? 93 |

94 | View Project 97 |
98 |
99 |
100 | 101 |
102 |
103 |

Contact

104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 |
117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /Project 3 - Portfolio/portfolio-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 3 - Portfolio/portfolio-preview.png -------------------------------------------------------------------------------- /Project 3 - Portfolio/script.js: -------------------------------------------------------------------------------- 1 | // Smooth scrolling for navigation links 2 | document.querySelectorAll(".navbar a").forEach((anchor) => { 3 | anchor.addEventListener("click", function (e) { 4 | e.preventDefault(); 5 | document.querySelector(this.getAttribute("href")).scrollIntoView({ 6 | behavior: "smooth", 7 | }); 8 | }); 9 | }); 10 | 11 | // Form submission handling 12 | const form = document.querySelector("form"); 13 | if (form) { 14 | form.addEventListener("submit", function (e) { 15 | e.preventDefault(); 16 | alert("Form submitted!"); 17 | }); 18 | } 19 | 20 | // Scroll-to-top button 21 | const scrollToTopBtn = document.createElement("button"); 22 | scrollToTopBtn.textContent = "↑"; 23 | scrollToTopBtn.classList.add("scroll-to-top"); 24 | document.body.appendChild(scrollToTopBtn); 25 | 26 | scrollToTopBtn.addEventListener("click", () => { 27 | window.scrollTo({ 28 | top: 0, 29 | behavior: "smooth", 30 | }); 31 | }); 32 | 33 | window.addEventListener("scroll", () => { 34 | if (window.scrollY > 300) { 35 | scrollToTopBtn.style.display = "block"; 36 | } else { 37 | scrollToTopBtn.style.display = "none"; 38 | } 39 | }); 40 | 41 | // Active link indicator in the navbar 42 | const sections = document.querySelectorAll("section"); 43 | const navLinks = document.querySelectorAll(".navbar a"); 44 | 45 | window.addEventListener("scroll", () => { 46 | let current = ""; 47 | sections.forEach((section) => { 48 | const sectionTop = section.offsetTop; 49 | if (pageYOffset >= sectionTop - 50) { 50 | current = section.getAttribute("id"); 51 | } 52 | }); 53 | 54 | navLinks.forEach((link) => { 55 | link.classList.remove("active"); 56 | if (link.getAttribute("href").includes(current)) { 57 | link.classList.add("active"); 58 | } 59 | }); 60 | }); 61 | 62 | -------------------------------------------------------------------------------- /Project 4 - Product-Landing-Page/README.md: -------------------------------------------------------------------------------- 1 | https://www.urbanears.com/on/demandware.static/-/Sites-zs-master-catalog/default/dw3ea85f87/images/urbanears/headphones/plattan-2-bluetooth/hi-res/Plattan2BT_Image_large_indigo@4x.png 2 | 3 | overlay: 4 | 5 | https://png.pngtree.com/png-vector/20190504/ourlarge/pngtree-headphone-icon-design-template-vector-png-image_1020052.jpg 6 | -------------------------------------------------------------------------------- /Project 4 - Product-Landing-Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern page website 7 | 8 | 9 | 10 |
11 |
12 |

HeadPhone

 13 | 17 |
18 |
19 | 20 |
21 |
22 |
23 |

The Future is Here!

24 |

25 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 26 | Exercitationem quisquam ducimus minus, quam corporis unde culpa 27 | officiis atque nisi maxime, voluptatum dignissimos ea doloribus quod 28 | sint! Ipsam repellendus nesciunt reprehenderit. 29 |

30 | Read More 31 |
32 | 36 |
37 |
38 | 43 | 44 |
45 |
46 |
47 |

Check us out

48 |
  • Lorem, ipsum dolor.
    • 49 |
  • Lorem, ipsum dolor.
    • 50 |
  • Lorem, ipsum dolor.
    • 51 |
    52 |
    53 |

    Check us out

    54 |
  • Lorem, ipsum dolor.
    • 55 |
  • Lorem, ipsum dolor.
    • 56 |
  • Lorem, ipsum dolor.
    • 57 |
    58 |
    59 |

    Check us out

    60 |
  • Lorem, ipsum dolor.
    • 61 |
  • Lorem, ipsum dolor.
    • 62 |
  • Lorem, ipsum dolor.
    • 63 |
    64 |
    65 |

    Check us out

    66 |
  • Lorem, ipsum dolor.
    • 67 |
  • Lorem, ipsum dolor.
    • 68 |
  • Lorem, ipsum dolor.
    • 69 |
    70 | 71 |
    72 |
    73 |
    74 | 75 | 76 | -------------------------------------------------------------------------------- /Project 4 - Product-Landing-Page/product-landing-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 4 - Product-Landing-Page/product-landing-preview.png -------------------------------------------------------------------------------- /Project 4 - Product-Landing-Page/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Nunito, sans-serif"; 9 | } 10 | 11 | a { 12 | text-decoration: none; 13 | } 14 | 15 | li { 16 | list-style: none; 17 | } 18 | 19 | .navbar { 20 | width: 90%; 21 | margin: auto; 22 | } 23 | 24 | .container { 25 | display: grid; 26 | grid-template-columns: repeat(2, 1fr); 27 | } 28 | 29 | .nav-container { 30 | padding: 20px 0; 31 | } 32 | 33 | .nav-container h2 { 34 | color: rgb(29, 29, 29); 35 | } 36 | 37 | .nav-container .nav { 38 | justify-self: flex-end; 39 | display: flex; 40 | } 41 | 42 | .nav-container .nav a { 43 | margin: 0 20px; 44 | color: black; 45 | } 46 | 47 | .nav-container .nav .active { 48 | background: #333; 49 | color: white; 50 | padding: 10px 20px; 51 | border-radius: 30px; 52 | } 53 | 54 | .header { 55 | width: 80%; 56 | margin: 70px auto; 57 | } 58 | 59 | .container img { 60 | width: 100%; 61 | } 62 | 63 | .container div h3 { 64 | font-size: 70px; 65 | } 66 | 67 | .container div h3::after{ 68 | content: ""; 69 | position: absolute; 70 | background: rgb(23,125,165); 71 | height: 3px; 72 | width: 150px; 73 | top: 49%; 74 | left: 10%; 75 | } 76 | 77 | .container div p { 78 | margin: 20px 0; 79 | } 80 | 81 | .container div a { 82 | padding: 15px; 83 | background: #333; 84 | margin: 20px 0; 85 | display: inline-block; 86 | color: #fff; 87 | border-radius: 10px; 88 | } 89 | 90 | .headphone { 91 | position: absolute; 92 | top: -10%; 93 | left: 5%; 94 | opacity: .1; 95 | z-index: -1; 96 | } 97 | 98 | .footer { 99 | margin: 100px 0 0 0; 100 | background: #333; 101 | padding: 100px 100px; 102 | } 103 | 104 | .footer .main-container { 105 | display: grid; 106 | grid-template-columns: repeat(4, 1fr); 107 | grid-gap: 2rem; 108 | } 109 | 110 | .main-container div h4 { 111 | color: rgb(41, 100, 177); 112 | font-size: 25px; 113 | margin: 10px 0; 114 | } 115 | 116 | .main-container div li { 117 | cursor: pointer; 118 | margin: 3px 0; 119 | } 120 | 121 | hr{ 122 | margin: 20px 0; 123 | opacity: .4; 124 | } -------------------------------------------------------------------------------- /Project 5 - Adidas/README.md: -------------------------------------------------------------------------------- 1 | # Joulx Shoes Landing Page 2 | 3 | Welcome to the Joulx Shoes Landing Page project! This is a simple yet elegant landing page created using HTML and CSS, showcasing a fictional shoe brand, Joulx. 4 | 5 | ## Preview 6 | 7 | ![Joulx Shoes Landing Page Preview](screenshot.png) 8 | *Include a screenshot of your project in the repository.* 9 | 10 | ## Features 11 | 12 | - Responsive design that adapts to different screen sizes. 13 | - Modern navigation bar for easy access to different sections. 14 | - Attractive background with a gradient effect and clip-path for unique styling. 15 | - Call-to-action buttons for account creation and product purchase. 16 | 17 | ## Technologies Used 18 | 19 | - HTML 20 | - CSS 21 | 22 | ## Getting Started 23 | 24 | To get a copy of this project up and running on your local machine, follow these simple steps: 25 | 26 | 1. Clone the repository: 27 | ```bash 28 | git clone https://github.com/NoureddineBou/HTML-CSS-JS-mini-projects.git 29 | -------------------------------------------------------------------------------- /Project 5 - Adidas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Shoes | Noureddine Bouderbala 9 | 10 | 175 | 176 | 177 | 178 |
    179 | 188 | 189 |
    190 |
    191 |

    Joulx ALGERIA,
    Running Shoes

    192 |

    hado baskitat mlah chrohom 3la dmanti 193 | nta tmout w houma ma ysralhom walou 194 | sma ghir makalh tkhaf w dir 3lya wchri 195 | kayn nta3 rjal, nsa, drari chouf nta 196 | wach ysa3dek 197 |

    198 |
    199 |
    200 | 201 |
    202 |
    203 | 204 |
    205 | 206 | 207 |
    208 |
    209 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /Project 5 - Adidas/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 5 - Adidas/screenshot.png -------------------------------------------------------------------------------- /Project 5 - Adidas/shoes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 5 - Adidas/shoes.png -------------------------------------------------------------------------------- /Project 6 - Weather app/README.md: -------------------------------------------------------------------------------- 1 | # Weather Dashboard App 2 | 3 | A modern, responsive weather application that allows users to search for current weather conditions in any city worldwide. 4 | 5 | ![Weather App Screenshot](images/weather-app-preview.png) 6 | 7 | ## Features 8 | 9 | - **City Search**: Get weather information for any city worldwide 10 | - **Current Weather Display**: Temperature, weather description, humidity, and wind speed 11 | - **Responsive Design**: Works seamlessly on desktop and mobile devices 12 | - **Weather Icons**: Visual representation of current weather conditions 13 | - **Date Display**: Shows the current date 14 | - **Local Storage**: Remembers the last searched city 15 | - **Error Handling**: Clear error messages for invalid searches or API issues 16 | - **Modern UI**: Clean, attractive interface with smooth animations 17 | 18 | ## Technologies Used 19 | 20 | - HTML5 21 | - CSS3 (with Flexbox) 22 | - Vanilla JavaScript 23 | - OpenWeatherMap API 24 | 25 | ## Setup Instructions 26 | 27 | 1. Clone the repository to your local machine 28 | 2. Open `index.html` in your web browser 29 | 3. Enter a city name in the search box and click "Search" or press Enter 30 | 31 | ## API Information 32 | 33 | This application uses the OpenWeatherMap API to fetch weather data. The free tier API key included in the code has limitations: 34 | - 60 calls per minute 35 | - 1,000,000 calls per month 36 | 37 | If you plan to develop this further or use it extensively, consider getting your own API key from [OpenWeatherMap](https://openweathermap.org/api). 38 | 39 | ## Future Enhancements 40 | 41 | - 5-day weather forecast 42 | - Temperature units toggle (Celsius/Fahrenheit) 43 | - Weather maps integration 44 | - Weather alerts for severe conditions 45 | - Multiple location saving 46 | 47 | ## Credits 48 | 49 | - Weather data provided by [OpenWeatherMap](https://openweathermap.org/) 50 | - Icons from OpenWeatherMap's icon set 51 | - Font: Nunito from Google Fonts -------------------------------------------------------------------------------- /Project 6 - Weather app/Screenshot 2025-04-18 211741.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/Project 6 - Weather app/Screenshot 2025-04-18 211741.png -------------------------------------------------------------------------------- /Project 6 - Weather app/app.js: -------------------------------------------------------------------------------- 1 | // DOM Elements 2 | const button = document.querySelector(".button"); 3 | const inputValue = document.querySelector(".inputValue"); 4 | const nameElement = document.querySelector(".name"); 5 | const tempElement = document.querySelector(".temp"); 6 | const descElement = document.querySelector(".desc"); 7 | const dateElement = document.querySelector(".date"); 8 | const humidityElement = document.querySelector(".humidity"); 9 | const windElement = document.querySelector(".wind"); 10 | const weatherIcon = document.getElementById("weather-img"); 11 | const weatherContainer = document.querySelector(".weather-container"); 12 | const errorMessage = document.querySelector(".error-message"); 13 | 14 | // API Key 15 | const apiKey = "c983aed69b497603ff80d72814dbadd1"; 16 | 17 | // Create suggestions container 18 | const suggestionsContainer = document.createElement("div"); 19 | suggestionsContainer.className = "suggestions"; 20 | document.querySelector(".search-box").appendChild(suggestionsContainer); 21 | 22 | // Cities database for suggestions (common cities) 23 | const cities = [ 24 | "New York", 25 | "London", 26 | "Paris", 27 | "Tokyo", 28 | "Sydney", 29 | "Berlin", 30 | "Moscow", 31 | "Beijing", 32 | "Rome", 33 | "Madrid", 34 | "Amsterdam", 35 | "Dubai", 36 | "Singapore", 37 | "Toronto", 38 | "Los Angeles", 39 | "Chicago", 40 | "Miami", 41 | "San Francisco", 42 | "Las Vegas", 43 | "Barcelona", 44 | "Mumbai", 45 | "Delhi", 46 | "Cairo", 47 | "Istanbul", 48 | "Bangkok", 49 | "Seoul", 50 | "Hong Kong", 51 | "Rio de Janeiro", 52 | "Mexico City", 53 | "Cape Town", 54 | "Casablanca", 55 | "Stockholm", 56 | "Vienna", 57 | "Prague", 58 | "Budapest", 59 | "Athens", 60 | "Dublin", 61 | "Edinburgh", 62 | "Warsaw", 63 | "Helsinki", 64 | "Oslo", 65 | "Copenhagen", 66 | "Brussels", 67 | "Lisbon", 68 | "Marrakech", 69 | "Nairobi", 70 | "Johannesburg", 71 | "Auckland", 72 | "Melbourne", 73 | "Vancouver", 74 | "Montreal", 75 | "Boston", 76 | "Seattle", 77 | "Denver", 78 | "Dallas", 79 | "Houston", 80 | "Atlanta", 81 | "New Orleans", 82 | "Nashville", 83 | "Kyoto", 84 | "Shanghai", 85 | "Manila", 86 | "Jakarta", 87 | "Kuala Lumpur", 88 | "Doha", 89 | "Abu Dhabi", 90 | "Tel Aviv", 91 | "Jerusalem", 92 | "Beirut", 93 | "Ankara", 94 | "Baghdad", 95 | "Tehran", 96 | "Riyadh", 97 | "Zurich", 98 | "Geneva", 99 | "Milan", 100 | "Naples", 101 | "Florence", 102 | "Venice", 103 | "Munich", 104 | "Frankfurt", 105 | "Hamburg", 106 | "Cologne", 107 | "Lyon", 108 | "Nice", 109 | "Marseille", 110 | "Valencia", 111 | "Seville", 112 | "Porto", 113 | "Lisbon", 114 | "Taipei", 115 | "Busan", 116 | "Osaka", 117 | "Sapporo", 118 | "Delhi", 119 | "Kolkata", 120 | "Chennai", 121 | "Bangalore", 122 | "Sydney", 123 | "Melbourne", 124 | "Brisbane", 125 | "Perth", 126 | "Wellington", 127 | "Christchurch", 128 | "Hanoi", 129 | "Ho Chi Minh City", 130 | "Manila", 131 | "Kuala Lumpur", 132 | "Jakarta", 133 | "Bali", 134 | ]; 135 | 136 | // Event Listeners 137 | button.addEventListener("click", getWeatherData); 138 | inputValue.addEventListener("keypress", function (event) { 139 | if (event.key === "Enter") { 140 | getWeatherData(); 141 | } 142 | }); 143 | 144 | // Input event for suggestions 145 | inputValue.addEventListener("input", showSuggestions); 146 | 147 | // Close suggestions when clicking outside 148 | document.addEventListener("click", function (event) { 149 | if (!event.target.closest(".search-box")) { 150 | suggestionsContainer.innerHTML = ""; 151 | } 152 | }); 153 | 154 | // Check if there's a saved city in localStorage 155 | document.addEventListener("DOMContentLoaded", function () { 156 | const savedCity = localStorage.getItem("lastCity"); 157 | if (savedCity) { 158 | inputValue.value = savedCity; 159 | getWeatherData(); 160 | } 161 | }); 162 | 163 | // Show city suggestions 164 | function showSuggestions() { 165 | const input = inputValue.value.trim().toLowerCase(); 166 | 167 | // Clear previous suggestions 168 | suggestionsContainer.innerHTML = ""; 169 | 170 | if (input.length < 2) return; // Only show suggestions after 2 characters 171 | 172 | // Filter cities that match the input 173 | const matches = cities 174 | .filter((city) => city.toLowerCase().includes(input)) 175 | .slice(0, 5); // Limit to 5 suggestions 176 | 177 | // If we have exact API city data, we could fetch from API instead 178 | // For demonstration, we'll use the local array 179 | 180 | if (matches.length > 0) { 181 | matches.forEach((city) => { 182 | const suggestion = document.createElement("div"); 183 | suggestion.className = "suggestion-item"; 184 | suggestion.textContent = city; 185 | 186 | suggestion.addEventListener("click", function () { 187 | inputValue.value = city; 188 | suggestionsContainer.innerHTML = ""; 189 | getWeatherData(); 190 | }); 191 | 192 | suggestionsContainer.appendChild(suggestion); 193 | }); 194 | } 195 | } 196 | 197 | // Main function to get weather data 198 | function getWeatherData() { 199 | const city = inputValue.value.trim(); 200 | 201 | if (!city) { 202 | showError("Please enter a city name"); 203 | return; 204 | } 205 | 206 | // Save to localStorage 207 | localStorage.setItem("lastCity", city); 208 | 209 | // Clear suggestions 210 | suggestionsContainer.innerHTML = ""; 211 | 212 | const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`; 213 | 214 | // Show loading state 215 | weatherContainer.style.opacity = "0.5"; 216 | nameElement.textContent = "Loading..."; 217 | tempElement.textContent = ""; 218 | descElement.textContent = ""; 219 | humidityElement.textContent = ""; 220 | windElement.textContent = ""; 221 | errorMessage.style.display = "none"; 222 | 223 | fetch(url) 224 | .then((response) => { 225 | if (!response.ok) { 226 | throw new Error("City not found"); 227 | } 228 | return response.json(); 229 | }) 230 | .then((data) => { 231 | displayWeatherData(data); 232 | }) 233 | .catch((error) => { 234 | showError( 235 | error.message === "City not found" 236 | ? "City not found. Please check the spelling and try again." 237 | : "Something went wrong. Please try again later." 238 | ); 239 | weatherContainer.style.opacity = "0"; 240 | }); 241 | } 242 | 243 | // Display the weather data 244 | function displayWeatherData(data) { 245 | const { name } = data; 246 | const { temp, humidity } = data.main; 247 | const { description, icon } = data.weather[0]; 248 | const { speed } = data.wind; 249 | 250 | // Format the date 251 | const currentDate = new Date(); 252 | const options = { 253 | weekday: "long", 254 | year: "numeric", 255 | month: "long", 256 | day: "numeric", 257 | }; 258 | const formattedDate = currentDate.toLocaleDateString("en-US", options); 259 | 260 | // Update UI 261 | nameElement.textContent = name; 262 | dateElement.textContent = formattedDate; 263 | tempElement.innerHTML = `${Math.round(temp)}°C`; 264 | descElement.textContent = description; 265 | humidityElement.textContent = `Humidity: ${humidity}%`; 266 | windElement.textContent = `Wind: ${speed} m/s`; 267 | 268 | // Set weather icon 269 | weatherIcon.src = `https://openweathermap.org/img/wn/${icon}@2x.png`; 270 | 271 | // Show weather container with animation 272 | weatherContainer.style.opacity = "1"; 273 | weatherContainer.classList.add("visible"); 274 | } 275 | 276 | // Show error message 277 | function showError(message) { 278 | errorMessage.textContent = message; 279 | errorMessage.style.display = "block"; 280 | } 281 | 282 | // Function to get user's location weather 283 | function getLocationWeather() { 284 | if (navigator.geolocation) { 285 | navigator.geolocation.getCurrentPosition( 286 | (position) => { 287 | const latitude = position.coords.latitude; 288 | const longitude = position.coords.longitude; 289 | 290 | const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${apiKey}`; 291 | 292 | fetch(url) 293 | .then((response) => response.json()) 294 | .then((data) => { 295 | inputValue.value = data.name; 296 | displayWeatherData(data); 297 | }) 298 | .catch((error) => { 299 | showError("Unable to fetch weather for your location"); 300 | }); 301 | }, 302 | () => { 303 | showError("Location permission denied"); 304 | } 305 | ); 306 | } else { 307 | showError("Geolocation is not supported by your browser"); 308 | } 309 | } 310 | 311 | // Advanced city search using OpenWeatherMap's Geo API 312 | function searchCities(query) { 313 | const geocodingUrl = `https://api.openweathermap.org/geo/1.0/direct?q=${query}&limit=5&appid=${apiKey}`; 314 | 315 | fetch(geocodingUrl) 316 | .then((response) => response.json()) 317 | .then((data) => { 318 | suggestionsContainer.innerHTML = ""; 319 | 320 | if (data.length > 0) { 321 | data.forEach((city) => { 322 | const suggestion = document.createElement("div"); 323 | suggestion.className = "suggestion-item"; 324 | 325 | // Format city with country 326 | const cityDisplay = `${city.name}, ${city.country}`; 327 | suggestion.textContent = cityDisplay; 328 | 329 | suggestion.addEventListener("click", function () { 330 | inputValue.value = city.name; 331 | suggestionsContainer.innerHTML = ""; 332 | getWeatherData(); 333 | }); 334 | 335 | suggestionsContainer.appendChild(suggestion); 336 | }); 337 | } 338 | }) 339 | .catch((error) => { 340 | console.error("Error fetching city suggestions:", error); 341 | }); 342 | } 343 | 344 | // Optional: Uncomment to get weather for user's location on page load 345 | // document.addEventListener('DOMContentLoaded', function() { 346 | // getLocationWeather(); 347 | // }); 348 | 349 | // Optional: Advanced API-based city search 350 | // This uses the actual API for real-time city suggestions 351 | inputValue.addEventListener("input", function () { 352 | const query = inputValue.value.trim(); 353 | 354 | if (query.length >= 3) { 355 | // Comment this line if you want to use the local array instead 356 | searchCities(query); 357 | 358 | // Uncomment this line if you want to use the local array 359 | // showSuggestions(); 360 | } else { 361 | suggestionsContainer.innerHTML = ""; 362 | } 363 | }); 364 | -------------------------------------------------------------------------------- /Project 6 - Weather app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weather App 9 | 10 | 11 | 12 |
    13 |
    14 |

    Weather Dashboard

    15 |
    16 | 17 |
    18 | 19 | 20 |
    21 | 22 |
    23 |
    24 | Weather Icon 25 |
    26 | 27 |
    28 |

    29 |
    30 |
    31 |
    32 |
    33 |
    34 |
    35 |
    36 |
    37 |
    38 | 39 |
    40 |
    41 | 42 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Project 6 - Weather app/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Nunito", sans-serif; 9 | background: linear-gradient(135deg, #72afd3, #37538c); 10 | min-height: 100vh; 11 | color: #fff; 12 | } 13 | 14 | .container { 15 | max-width: 800px; 16 | margin: 0 auto; 17 | padding: 20px; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | .app-title { 24 | text-align: center; 25 | margin: 30px 0; 26 | } 27 | 28 | .app-title h1 { 29 | font-size: 2.5em; 30 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 31 | } 32 | 33 | .search-box { 34 | display: flex; 35 | justify-content: center; 36 | margin-bottom: 30px; 37 | position: relative; 38 | z-index: 10; 39 | } 40 | 41 | .inputValue { 42 | height: 50px; 43 | width: 70%; 44 | background-color: rgba(255, 255, 255, 0.8); 45 | font-family: "Nunito", sans-serif; 46 | font-weight: 600; 47 | font-size: 18px; 48 | border: none; 49 | border-radius: 25px 0 0 25px; 50 | padding: 0 20px; 51 | color: #333; 52 | outline: none; 53 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 54 | } 55 | 56 | .button { 57 | height: 50px; 58 | width: 120px; 59 | background-color: #f3b33e; 60 | font-family: "Nunito", sans-serif; 61 | font-weight: 700; 62 | font-size: 18px; 63 | color: #fff; 64 | border: none; 65 | border-radius: 0 25px 25px 0; 66 | cursor: pointer; 67 | transition: background-color 0.3s ease; 68 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 69 | } 70 | 71 | .button:hover { 72 | background-color: #e09c1e; 73 | } 74 | 75 | /* Suggestions container */ 76 | .suggestions { 77 | position: absolute; 78 | top: 55px; 79 | width: 70%; 80 | background-color: white; 81 | border-radius: 10px; 82 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 83 | z-index: 5; 84 | max-height: 250px; 85 | overflow-y: auto; 86 | } 87 | 88 | .suggestion-item { 89 | padding: 12px 20px; 90 | color: #333; 91 | cursor: pointer; 92 | transition: background-color 0.2s; 93 | } 94 | 95 | .suggestion-item:hover { 96 | background-color: #f0f0f0; 97 | } 98 | 99 | .suggestion-item:not(:last-child) { 100 | border-bottom: 1px solid #eee; 101 | } 102 | 103 | .weather-container { 104 | display: flex; 105 | flex-direction: column; 106 | align-items: center; 107 | background-color: rgba(255, 255, 255, 0.15); 108 | backdrop-filter: blur(10px); 109 | border-radius: 20px; 110 | padding: 30px; 111 | margin-top: 10px; 112 | text-align: center; 113 | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 114 | opacity: 0; 115 | transform: translateY(20px); 116 | transition: opacity 0.5s ease, transform 0.5s ease; 117 | } 118 | 119 | .weather-container.visible { 120 | opacity: 1; 121 | transform: translateY(0); 122 | } 123 | 124 | .weather-icon { 125 | margin-bottom: 20px; 126 | } 127 | 128 | .weather-icon img { 129 | width: 120px; 130 | height: 120px; 131 | } 132 | 133 | .weather-info { 134 | width: 100%; 135 | } 136 | 137 | .name { 138 | font-size: 2.2em; 139 | font-weight: 700; 140 | margin-bottom: 5px; 141 | } 142 | 143 | .date { 144 | font-size: 1.2em; 145 | color: rgba(255, 255, 255, 0.8); 146 | margin-bottom: 15px; 147 | } 148 | 149 | .temp { 150 | font-size: 3em; 151 | font-weight: 700; 152 | margin-bottom: 10px; 153 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 154 | } 155 | 156 | .desc { 157 | font-size: 1.5em; 158 | text-transform: capitalize; 159 | margin-bottom: 20px; 160 | } 161 | 162 | .details { 163 | display: flex; 164 | justify-content: space-around; 165 | width: 100%; 166 | margin-top: 20px; 167 | padding-top: 20px; 168 | border-top: 1px solid rgba(255, 255, 255, 0.3); 169 | } 170 | 171 | .humidity, .wind { 172 | font-size: 1.2em; 173 | } 174 | 175 | .error-message { 176 | color: #ff5959; 177 | font-size: 1.2em; 178 | text-align: center; 179 | margin-top: 20px; 180 | background-color: rgba(255, 255, 255, 0.15); 181 | border-radius: 10px; 182 | padding: 10px; 183 | display: none; 184 | } 185 | 186 | footer { 187 | text-align: center; 188 | padding: 20px; 189 | font-size: 0.9em; 190 | color: rgba(255, 255, 255, 0.7); 191 | margin-top: auto; 192 | } 193 | 194 | @media screen and (min-width: 768px) { 195 | .weather-container { 196 | flex-direction: row; 197 | text-align: left; 198 | } 199 | 200 | .weather-icon { 201 | margin-right: 30px; 202 | margin-bottom: 0; 203 | } 204 | } 205 | 206 | @media screen and (max-width: 767px) { 207 | .inputValue { 208 | width: 60%; 209 | } 210 | 211 | .app-title h1 { 212 | font-size: 2em; 213 | } 214 | 215 | .temp { 216 | font-size: 2.5em; 217 | } 218 | 219 | .desc { 220 | font-size: 1.2em; 221 | } 222 | 223 | .suggestions { 224 | width: 60%; 225 | } 226 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Projects Portfolio Showcase 2 | 3 | A clean, responsive website that showcases my web development projects with descriptions, features, and direct links to each project. 4 | ![](g.png) 5 | 6 | ## Overview 7 | 8 | This portfolio website displays my collection of web projects in an organized, visually appealing manner. Each project is presented with: 9 | 10 | - Project image/screenshot 11 | - Brief description 12 | - Technologies used 13 | - Key features 14 | - Link to view the actual project 15 | 16 | ## Projects Included 17 | 18 | 1. **Responsive Card Slider** - A modern card slider with touch support and responsive design 19 | 2. **Lux Web Template** - A responsive web template for services and portfolios 20 | 3. **Portfolio** - A personal web developer portfolio 21 | 4. **Product Landing Page** - A headphones product showcase 22 | 5. **Joulx Shoes Landing Page** - A shoe brand landing page 23 | 6. **Weather App** - A weather forecast application 24 | 25 | ## Structure 26 | 27 | ``` 28 | portfolio-showcase/ 29 | ├── index.html # Main portfolio page 30 | ├── styles.css # CSS styles for the portfolio 31 | ├── script.js # Optional JavaScript for interactivity 32 | ├── images/ # Contains project screenshots 33 | │ ├── project1.jpg 34 | │ ├── project2.jpg 35 | │ └── ... 36 | ├── Project 1 - Responsive Card Slider/ 37 | ├── Project 2 - Lux/ 38 | ├── Project 3 - Portfolio/ 39 | ├── Project 4 - Product-Landing-Page/ 40 | ├── Project 5 - Adidas/ 41 | ├── Project 6 - Weather app/ 42 | └── README.md 43 | ``` 44 | 45 | ## Setup Instructions 46 | 47 | 1. Clone the repository 48 | 2. Ensure all project folders are in the root directory 49 | 3. Add project screenshots to the `images` folder 50 | 4. Open `index.html` in your browser to view the portfolio 51 | 52 | ## Technologies Used 53 | 54 | - HTML5 55 | - CSS3 56 | - JavaScript (optional animations) 57 | 58 | ## Customization 59 | 60 | You can easily customize this portfolio by editing: 61 | 62 | - Color scheme in CSS variables (in `styles.css`) 63 | - Project descriptions and details in `index.html` 64 | - Adding or removing project cards as needed -------------------------------------------------------------------------------- /g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/g.png -------------------------------------------------------------------------------- /images/project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project1.png -------------------------------------------------------------------------------- /images/project10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project10.png -------------------------------------------------------------------------------- /images/project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project2.png -------------------------------------------------------------------------------- /images/project3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project3.png -------------------------------------------------------------------------------- /images/project4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project4.png -------------------------------------------------------------------------------- /images/project5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project5.png -------------------------------------------------------------------------------- /images/project6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project6.png -------------------------------------------------------------------------------- /images/project7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project7.png -------------------------------------------------------------------------------- /images/project8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project8.png -------------------------------------------------------------------------------- /images/project9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nxr-deen/HTML-CSS-JS-mini-projects/ebfe334ca370a8f3b29c2c81b588509976e3b3f1/images/project9.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Html, CSS and JS Mini Projects 7 | 8 | 9 | 10 |
    11 |

    Html, CSS and JS Mini Projects

    12 |

    A showcase of my HTML, CSS, and JavaScript projects

    13 |
    14 | 15 |
    16 |
    17 | 18 |
    19 |
    20 | Responsive Card Slider 21 |
    22 |
    23 |

    Responsive Card Slider

    24 |

    25 | A modern, lightweight responsive card slider that automatically 26 | adapts to different screen sizes. 27 |

    28 |
    29 | HTML 30 | CSS 31 | JavaScript 32 |
    33 |
    34 | Key Features: 35 |
      36 |
    • Fully Responsive Design
      • 37 |
    • Touch & Keyboard Support
      • 38 |
    • Smooth Transitions
      • 39 |
    • No Dependencies
      • 40 |
    41 |
    42 | View Project 45 |
    46 |
    47 | 48 | 49 |
    50 |
    51 | Lux Web Template 52 |
    53 |
    54 |

    Lux Web Template

    55 |

    56 | A responsive web template designed for showcasing services, 57 | portfolios, and contact information. 58 |

    59 |
    60 | HTML 61 | CSS 62 | Font Awesome 63 | Google Fonts 64 |
    65 |
    66 | Key Features: 67 |
      68 |
    • Responsive Design
      • 69 |
    • Easy Navigation
      • 70 |
    • Service Showcase
      • 71 |
    • Portfolio Section
      • 72 |
    73 |
    74 | View Project 75 |
    76 |
    77 | 78 | 79 |
    80 |
    81 | Portfolio 82 |
    83 |
    84 |

    Portfolio

    85 |

    86 | A personal portfolio showcasing work and skills as a web 87 | developer. 88 |

    89 |
    90 | HTML 91 | CSS 92 | JavaScript 93 |
    94 |
    95 | Key Features: 96 |
      97 |
    • Responsive Design
      • 98 |
    • Interactive Elements
      • 99 |
    • Visually Appealing Homepage
      • 100 |
    101 |
    102 | View Project 105 |
    106 |
    107 | 108 | 109 |
    110 |
    111 | Product Landing Page 112 |
    113 |
    114 |

    Product Landing Page

    115 |

    116 | A product landing page for headphones featuring images and overlay 117 | effects. 118 |

    119 |
    120 | HTML 121 | CSS 122 |
    123 |
    124 | Key Features: 125 |
      126 |
    • Product Showcase
      • 127 |
    • Image Overlays
      • 128 |
    • Visual Design
      • 129 |
    130 |
    131 | View Project 134 |
    135 |
    136 | 137 | 138 |
    139 |
    140 | Joulx Shoes Landing Page 141 |
    142 |
    143 |

    Joulx Shoes Landing Page

    144 |

    145 | A simple yet elegant landing page for a fictional shoe brand, 146 | Joulx. 147 |

    148 |
    149 | HTML 150 | CSS 151 |
    152 |
    153 | Key Features: 154 |
      155 |
    • Responsive Design
      • 156 |
    • Modern Navigation
      • 157 |
    • Gradient Effects
      • 158 |
    • Call-to-action Buttons
      • 159 |
    160 |
    161 | View Project 162 |
    163 |
    164 | 165 | 166 |
    167 |
    168 | Weather App 169 |
    170 |
    171 |

    Weather App

    172 |

    173 | A weather application providing current conditions and forecasts. 174 |

    175 |
    176 | HTML 177 | CSS 178 | JavaScript 179 |
    180 |
    181 | Key Features: 182 |
      183 |
    • Weather Data Display
      • 184 |
    • Forecast Information
      • 185 |
    • User-friendly Interface
      • 186 |
    187 |
    188 | View Project 191 |
    192 |
    193 | 194 | 195 | 196 |
    197 |
    198 | QR Code Generator 199 |
    200 |
    201 |

    QR Code Generator

    202 |

    203 | A simple and user-friendly web app that allows users to generate and 204 | download QR codes from text or URLs. 205 |

    206 |
    207 | HTML 208 | CSS 209 | JavaScript 210 | QRCode.js 211 |
    212 |
    213 | Key Features: 214 |
      215 |
    • QR Code Generation from Text or URL
      • 216 |
    • Download QR Code as PNG Image
      • 217 |
    • Responsive and Mobile-Friendly Design
      • 218 |
    • Clean, Modern UI with Styled Buttons
      • 219 |
    220 |
    221 | View Project 224 |
    225 |
    226 | 227 | 228 |
    229 |
    230 | Rock Paper Scissors Game 231 |
    232 |
    233 |

    Rock Paper Scissors

    234 |

    235 | A simple, fun, and responsive Rock Paper Scissors game where you 236 | challenge the computer and see who wins! 237 |

    238 |
    239 | HTML 240 | CSS 241 | jQuery 242 |
    243 |
    244 | Key Features: 245 |
      246 |
    • Interactive Gameplay Using Emojis
      • 247 |
    • Random Computer Choice Logic
      • 248 |
    • Responsive Layout for All Devices
      • 249 |
    • Dark Mode Inspired UI
      • 250 |
    251 |
    252 | View Project 253 |
    254 |
    255 | 256 | 257 |
    258 |
    259 | Animal Sound App 260 |
    261 |
    262 |

    Animal Sound App

    263 |

    264 | A fun and interactive sound board where you can play different animal 265 | sounds by clicking buttons or pressing keys! 266 |

    267 |
    268 | HTML 269 | CSS 270 | JavaScript 271 |
    272 |
    273 | Key Features: 274 |
      275 |
    • Plays Animal Sounds via Key or Button
      • 276 |
    • Visual Button Press Animation
      • 277 |
    • One Sound at a Time
      • 278 |
    • Keys Supported: W, A, S, D, J, K, L
      • 279 |
    280 |
    281 | View Project 282 |
    283 |
    284 | 285 | 286 |
    287 |
    288 | Dice Game 289 |
    290 |
    291 |

    Dice Game

    292 |

    293 | A fun and simple two-player dice game where the player with the higher 294 | roll wins. Perfect for a quick challenge! 295 |

    296 |
    297 | HTML 298 | CSS 299 | JavaScript 300 |
    301 |
    302 | Key Features: 303 |
      304 |
    • Dynamic Dice Roll with Images
      • 305 |
    • Math.random() Based Logic
      • 306 |
    • Win, Lose, or Draw Outcomes
      • 307 |
    • Fully Functional UI with Dice Face Animations
      • 308 |
    309 |
    310 | View Project 311 |
    312 |
    313 |
    314 |
    315 | 316 | 317 | 320 | 321 | 322 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | // Add fade-in animation to project cards 3 | const cards = document.querySelectorAll(".project-card"); 4 | 5 | function checkScroll() { 6 | cards.forEach((card) => { 7 | const cardTop = card.getBoundingClientRect().top; 8 | const windowHeight = window.innerHeight; 9 | 10 | if (cardTop < windowHeight * 0.9) { 11 | card.style.opacity = "1"; 12 | card.style.transform = "translateY(0)"; 13 | } 14 | }); 15 | } 16 | 17 | // Initialize card styles 18 | cards.forEach((card) => { 19 | card.style.opacity = "0"; 20 | card.style.transform = "translateY(20px)"; 21 | card.style.transition = "opacity 0.5s ease, transform 0.5s ease"; 22 | }); 23 | 24 | // Check initial positions 25 | checkScroll(); 26 | 27 | // Check on scroll 28 | window.addEventListener("scroll", checkScroll); 29 | }); 30 | 31 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #4a6de5; 3 | --secondary-color: #f3f4f6; 4 | --dark-color: #2d3748; 5 | --light-color: #ffffff; 6 | --accent-color: #8c54ff; 7 | --shadow: 0 4px 12px rgba(0,0,0,0.1); 8 | } 9 | 10 | * { 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 15 | } 16 | 17 | body { 18 | background-color: #e0e7ff; /* Light blue background to complement the header */ 19 | color: var(--dark-color); 20 | line-height: 1.6; 21 | } 22 | 23 | 24 | 25 | header { 26 | background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); 27 | color: var(--light-color); 28 | text-align: center; 29 | padding: 3rem 1rem; 30 | } 31 | 32 | header h1 { 33 | font-size: 2.5rem; 34 | margin-bottom: 1rem; 35 | } 36 | 37 | header p { 38 | font-size: 1.2rem; 39 | max-width: 800px; 40 | margin: 0 auto; 41 | opacity: 0.9; 42 | } 43 | 44 | .container { 45 | max-width: 1200px; 46 | margin: 2rem auto; 47 | padding: 0 1rem; 48 | } 49 | 50 | .projects-grid { 51 | display: grid; 52 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 53 | gap: 2rem; 54 | margin-top: 2rem; 55 | } 56 | 57 | .project-card { 58 | background-color: var(--light-color); 59 | border-radius: 8px; 60 | overflow: hidden; 61 | box-shadow: var(--shadow); 62 | transition: transform 0.3s ease, box-shadow 0.3s ease; 63 | } 64 | 65 | .project-card:hover { 66 | transform: translateY(-5px); 67 | box-shadow: 0 10px 20px rgba(0,0,0,0.15); 68 | } 69 | 70 | .project-image { 71 | height: 200px; 72 | background-color: var(--secondary-color); 73 | display: flex; 74 | align-items: center; 75 | justify-content: center; 76 | overflow: hidden; 77 | } 78 | 79 | .project-image img { 80 | width: 100%; 81 | height: 100%; 82 | object-fit: cover; 83 | } 84 | 85 | .project-content { 86 | padding: 1.5rem; 87 | } 88 | 89 | .project-content h3 { 90 | font-size: 1.3rem; 91 | margin-bottom: 0.75rem; 92 | color: var(--primary-color); 93 | } 94 | 95 | .project-content p { 96 | color: #4b5563; 97 | margin-bottom: 1rem; 98 | font-size: 0.95rem; 99 | } 100 | 101 | .tech-stack { 102 | display: flex; 103 | flex-wrap: wrap; 104 | gap: 0.5rem; 105 | margin: 1rem 0; 106 | } 107 | 108 | .tech { 109 | background-color: var(--secondary-color); 110 | color: var(--dark-color); 111 | padding: 0.25rem 0.75rem; 112 | border-radius: 20px; 113 | font-size: 0.8rem; 114 | font-weight: 500; 115 | } 116 | 117 | .project-content ul { 118 | margin-left: 1.2rem; 119 | margin-top: 0.5rem; 120 | margin-bottom: 1rem; 121 | } 122 | 123 | .project-content li { 124 | font-size: 0.9rem; 125 | color: #4b5563; 126 | margin-bottom: 0.25rem; 127 | } 128 | 129 | .btn { 130 | display: inline-block; 131 | background-color: var(--primary-color); 132 | color: var(--light-color); 133 | padding: 0.6rem 1.2rem; 134 | border-radius: 4px; 135 | text-decoration: none; 136 | font-weight: 500; 137 | transition: background-color 0.3s ease; 138 | } 139 | 140 | .btn:hover { 141 | background-color: var(--accent-color); 142 | } 143 | 144 | footer { 145 | background-color: var(--dark-color); 146 | color: var(--light-color); 147 | text-align: center; 148 | padding: 2rem 0; 149 | margin-top: 3rem; 150 | } 151 | 152 | @media (max-width: 768px) { 153 | header h1 { 154 | font-size: 2rem; 155 | } 156 | 157 | header p { 158 | font-size: 1rem; 159 | } 160 | 161 | .projects-grid { 162 | grid-template-columns: 1fr; 163 | } 164 | } 165 | 166 | --------------------------------------------------------------------------------