├── LICENSE
├── README.md
├── assets
    ├── css
    │   ├── components
    │   │   ├── btn.css
    │   │   ├── card.css
    │   │   └── slider.css
    │   ├── main.css
    │   ├── pages
    │   │   ├── contact.css
    │   │   ├── portfolio.css
    │   │   └── service.css
    │   └── require.css
    ├── images
    │   ├── Thumbs.db
    │   ├── about-banner.png
    │   ├── client-1.svg
    │   ├── client-2.svg
    │   ├── client-3.svg
    │   ├── client-4.svg
    │   ├── client-5.svg
    │   ├── contact-bg.png
    │   ├── hero-banner.png
    │   ├── logo.svg
    │   ├── portfolio-1.jpg
    │   ├── portfolio-2.jpg
    │   ├── portfolio-3.jpg
    │   ├── portfolio-4.jpg
    │   ├── quote-left.svg
    │   ├── service-bg.png
    │   ├── skill-banner.png
    │   ├── testi-1.jpg
    │   ├── testi-2.jpg
    │   ├── testi-3.jpg
    │   └── testi-4.jpg
    └── js
    │   └── script.js
├── contact.html
├── favicon.svg
├── index.html
├── index.txt
├── portfolio.html
├── readme-images
    ├── Thumbs.db
    └── desktop.png
├── service.html
└── style-guide.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Sadee
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 |   ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/annie)
 4 |   ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/annie?style=social)
 5 |   ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/annie?style=social)
 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)
 7 |   [![YouTube Video Views](https://img.shields.io/youtube/views/lD-hxm19ncs?style=social)](https://youtu.be/lD-hxm19ncs)
 8 | 
 9 |   <br />
10 |   <br />
11 | 
12 |   <h2 align="center">Annie - Personal Portfolio</h2>
13 | 
14 |   Annie is a fully responsive personal portfolio, <br />Responsive for all devices, build using HTML, CSS, and JavaScript.
15 | 
16 |   <a href="https://codewithsadee.github.io/annie/"><strong>➥ Live Demo</strong></a>
17 | 
18 | </div>
19 | 
20 | <br />
21 | 
22 | ### Demo Screeshots
23 | 
24 | ![Annie Desktop Demo](./readme-images/desktop.png "Desktop Demo")
25 | 
26 | ### Prerequisites
27 | 
28 | Before you begin, ensure you have met the following requirements:
29 | 
30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
31 | 
32 | ### Run Locally
33 | 
34 | To run **Annie** locally, run this command on your git bash:
35 | 
36 | Linux and macOS:
37 | 
38 | ```bash
39 | sudo git clone https://github.com/codewithsadee/annie.git
40 | ```
41 | 
42 | Windows:
43 | 
44 | ```bash
45 | git clone https://github.com/codewithsadee/annie.git
46 | ```
47 | 
48 | ### Contact
49 | 
50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
51 | 
52 | ### License
53 | 
54 | This project is **free to use** and does not contains any license.
55 | 


--------------------------------------------------------------------------------
/assets/css/components/btn.css:
--------------------------------------------------------------------------------
 1 | /*-----------------------------------*\
 2 |   #btn.css
 3 | \*-----------------------------------*/
 4 | 
 5 | /**
 6 |  * copyright 2022 codewithsadee
 7 |  */
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 | .btn {
14 |   background-color: var(--orange-red);
15 |   font-size: var(--fs-14);
16 |   font-weight: var(--fw-500);
17 |   text-transform: uppercase;
18 |   max-width: max-content;
19 |   letter-spacing: 2px;
20 |   padding: 10px 22px;
21 |   box-shadow: 6px 6px 0 -1px var(--shadow-color, var(--jet));
22 |   transition: var(--transition-1);
23 | }
24 | 
25 | .btn:is(:hover, :focus-visible) {
26 |   background-color: var(--hover-bg, var(--jet));
27 |   box-shadow: 5px 5px 0 -2px var(--hover-shadow-color, var(--orange-red));
28 | }
29 | 
30 | .btn-primary,
31 | .btn-secondary { color: var(--white); }
32 | 
33 | .btn-secondary {
34 |   background-color: var(--jet);
35 |   --shadow-color: var(--orange-red);
36 |   --hover-bg: var(--orange-red);
37 |   --hover-shadow-color: var(--jet);
38 | }
39 | 
40 | .btn-tertiary {
41 |   color: var(--jet);
42 |   background-color: var(--maximum-yellow-red);
43 |   --shadow-color: var(--orange-red);
44 |   --hover-bg: var(--orange-red);
45 |   --hover-shadow-color: var(--maximum-yellow-red);
46 | }
47 | 
48 | .btn-tertiary:is(:hover, :focus-visible) { color: var(--white); }


--------------------------------------------------------------------------------
/assets/css/components/card.css:
--------------------------------------------------------------------------------
 1 | /*-----------------------------------*\
 2 |   #card.css
 3 | \*-----------------------------------*/
 4 | 
 5 | /**
 6 |  * copyright 2022 codewithsadee
 7 |  */
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 | .card {
14 |   box-shadow: 0 0 0 var(--jet);
15 |   display: flex;
16 |   transition: var(--transition-1);
17 | }
18 | 
19 | .card-md:is(:hover, :focus-within) { box-shadow: 5px 5px 0 var(--jet); }
20 | 
21 | :is(.card-lg, .card-sm):is(:hover, :focus-within) {
22 |   box-shadow: 3px 3px 0 var(--jet);
23 | }
24 | 
25 | .card,
26 | .card-media { border: 2px solid var(--jet); }
27 | 
28 | .card-lg { padding: 25px; }
29 | 
30 | .card-md { padding: 30px; }
31 | 
32 | .card-sm {
33 |   padding: 10px;
34 |   align-items: center;
35 |   gap: 15px;
36 | }
37 | 
38 | .card-lg,
39 | .card-md {
40 |   align-items: flex-start;
41 |   flex-direction: column;
42 |   gap: 20px;
43 | }
44 | 
45 | .card-lg .card-media {
46 |   width: 100px;
47 |   height: 100px;
48 | }
49 | 
50 | .card-md .card-media {
51 |   width: 70px;
52 |   height: 70px;
53 | }
54 | 
55 | .card-sm .card-media {
56 |   width: 50px;
57 |   height: 50px;
58 | }
59 | 
60 | .card-media {
61 |   background-color: var(--white);
62 |   color: var(--jet);
63 |   display: grid;
64 |   place-items: center;
65 |   flex-shrink: 0;
66 | }
67 | 
68 | 
69 | 
70 | /**
71 |  * RESPONSIVE CONTAINER QUERY
72 |  */
73 | 
74 | .card-container { container-type: inline-size; }
75 | 
76 | @container (min-width: 500px) {
77 |   .card-lg,
78 |   .card-md { flex-direction: row; }
79 | }
80 | 
81 | 
82 | 
83 | /**
84 |  * RESPONSIVE MEDIA QUERY
85 |  */
86 | 
87 | @media (min-width: 768px) {
88 | 
89 |   .card-lg { padding: 35px; }
90 | 
91 |   .card-md { padding: 40px; }
92 | 
93 |   .card-sm { padding: 15px; }
94 | 
95 | }


--------------------------------------------------------------------------------
/assets/css/components/slider.css:
--------------------------------------------------------------------------------
 1 | /*-----------------------------------*\
 2 |   #slider.css
 3 | \*-----------------------------------*/
 4 | 
 5 | /**
 6 |  * copyright 2022 codewithsadee
 7 |  */
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 | .slider {
14 |   display: flex;
15 |   align-items: center;
16 |   gap: 30px;
17 |   overflow-x: auto;
18 |   scroll-snap-type: inline mandatory;
19 | }
20 | 
21 | .slider-item { scroll-snap-align: start; }


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
  1 | /*-----------------------------------*\
  2 |   #main.css
  3 | \*-----------------------------------*/
  4 | 
  5 | /**
  6 |  * copyright 2022 codewithsadee
  7 |  */
  8 | 
  9 | /**
 10 |  * TABLE OF CONTENT
 11 |  *
 12 |  * COMPONENTS
 13 |  * Btn............................Buttons style
 14 |  * Slider.........................Slider style
 15 |  * Card...........................Cards style
 16 |  *
 17 |  * MAIN CONTENT
 18 |  * Header.........................Modify header style
 19 |  * Hero...........................Hero styles
 20 |  * Client.........................Client style
 21 |  * About..........................About style
 22 |  * Skills.........................Skills style
 23 |  * Cta............................Cta style
 24 |  * Testimonials...................Testimonials style
 25 |  * Media queries..................Responsive for all devices
 26 |  */
 27 | 
 28 | 
 29 | 
 30 | 
 31 | 
 32 | /*-----------------------------------*\
 33 |   #COMPONENTS
 34 | \*-----------------------------------*/
 35 | 
 36 | @import url("./components/btn.css");
 37 | @import url("./components/slider.css");
 38 | @import url("./components/card.css");
 39 | 
 40 | 
 41 | 
 42 | 
 43 | 
 44 | /*-----------------------------------*\
 45 |   #HEADER
 46 | \*-----------------------------------*/
 47 | 
 48 | .header { background-color: transparent; }
 49 | 
 50 | .header.active { background-color: var(--white); }
 51 | 
 52 | 
 53 | 
 54 | 
 55 | 
 56 | /*-----------------------------------*\
 57 |   #HERO
 58 | \*-----------------------------------*/
 59 | 
 60 | .hero {
 61 |   position: relative;
 62 |   background-color: var(--maximum-yellow-red_a10);
 63 |   padding-block-start: calc(var(--section-padding) + 60px);
 64 |   text-align: center;
 65 |   overflow: hidden;
 66 | }
 67 | 
 68 | .hero::after {
 69 |   content: "";
 70 |   position: absolute;
 71 |   top: 0;
 72 |   left: 10%;
 73 |   bottom: 70%;
 74 |   right: -75%;
 75 |   background-color: var(--maximum-yellow-red_a40);
 76 |   transform: rotate(-45deg);
 77 |   border-radius: var(--radius-50);
 78 |   z-index: -1;
 79 | }
 80 | 
 81 | .hero .container {
 82 |   display: grid;
 83 |   gap: 70px;
 84 | }
 85 | 
 86 | .hero-subtitle {
 87 |   color: var(--jet);
 88 |   text-transform: uppercase;
 89 |   font-weight: var(--fw-600);
 90 |   letter-spacing: 3px;
 91 |   margin-block-end: 20px;
 92 | }
 93 | 
 94 | .hero-text { margin-block: 25px; }
 95 | 
 96 | .hero .btn { margin-inline: auto; }
 97 | 
 98 | .hero-banner {
 99 |   max-width: max-content;
100 |   margin-inline: auto;
101 | }
102 | 
103 | 
104 | 
105 | 
106 | 
107 | /*-----------------------------------*\
108 |   #CLIENT
109 | \*-----------------------------------*/
110 | 
111 | .client {
112 |   background-color: var(--jet);
113 |   padding-block: 30px;
114 | }
115 | 
116 | .client .slider-item { min-width: calc(50% - 15px); }
117 | 
118 | .client .slider::-webkit-scrollbar { display: none; }
119 | 
120 | 
121 | 
122 | 
123 | 
124 | /*-----------------------------------*\
125 |   #ABOUT
126 | \*-----------------------------------*/
127 | 
128 | .about .container {
129 |   display: grid;
130 |   gap: 50px;
131 | }
132 | 
133 | .about .section-text { margin-block: 25px 16px; }
134 | 
135 | .about-list {
136 |   display: flex;
137 |   align-items: center;
138 |   gap: 25px;
139 | }
140 | 
141 | .about-list .list-text {
142 |   color: var(--jet);
143 |   font-weight: var(--fw-500);
144 | }
145 | 
146 | .about-list .strong {
147 |   color: var(--orange-red);
148 |   display: block;
149 | }
150 | 
151 | .about .wrapper {
152 |   margin-block-start: 25px;
153 |   display: flex;
154 |   flex-wrap: wrap;
155 |   align-items: center;
156 |   gap: 15px 25px;
157 | }
158 | 
159 | 
160 | 
161 | 
162 | 
163 | /*-----------------------------------*\
164 |   #SKILLS
165 | \*-----------------------------------*/
166 | 
167 | .skill { padding-block-end: 0; }
168 | 
169 | .skill .container,
170 | .skill-list { display: grid; }
171 | 
172 | .skill .container { gap: 50px; }
173 | 
174 | .skill-list {
175 |   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
176 |   gap: 15px;
177 | }
178 | 
179 | .skill .card ion-icon { font-size: 3rem; }
180 | 
181 | .skill .card .card-title {
182 |   color: var(--jet);
183 |   font-size: 1.6rem;
184 |   font-weight: var(--fw-500);
185 | }
186 | 
187 | 
188 | 
189 | 
190 | 
191 | /*-----------------------------------*\
192 |   #CTA
193 | \*-----------------------------------*/
194 | 
195 | .cta {
196 |   background-color: var(--jet);
197 |   text-align: center;
198 |   padding-block: 46px 50px;
199 | }
200 | 
201 | .cta .container {
202 |   display: flex;
203 |   flex-wrap: wrap;
204 |   justify-content: center;
205 |   align-items: center;
206 |   gap: 12px;
207 | }
208 | 
209 | .cta .title-lg {
210 |   color: var(--white);
211 |   font-weight: var(--fw-500);
212 | }
213 | 
214 | 
215 | 
216 | 
217 | 
218 | /*-----------------------------------*\
219 |   #TESTIMONIALS
220 | \*-----------------------------------*/
221 | 
222 | .testi .slider-item {
223 |   min-width: 100%;
224 |   scroll-margin-inline-start: 16px;
225 | }
226 | 
227 | .testi .card {
228 |   position: relative;
229 |   z-index: 1;
230 | }
231 | 
232 | .testi .card::after {
233 |   content: url("../images/quote-left.svg");
234 |   position: absolute;
235 |   bottom: 15px;
236 |   right: 25px;
237 | }
238 | 
239 | .testi .client-name {
240 |   margin-block-start: 15px;
241 |   color: var(--jet);
242 |   font-weight: var(--fw-600);
243 | }
244 | 
245 | .testi .client-title { font-size: var(--fs-14); }
246 | 
247 | .testi .slider {
248 |   margin-inline: -16px;
249 |   padding-inline: 16px;
250 |   padding-block-end: 35px;
251 | }
252 | 
253 | .testi .slider::-webkit-scrollbar { height: 12px; }
254 | 
255 | .testi .slider::-webkit-scrollbar-track {
256 |   border: 1px solid var(--jet);
257 |   border-radius: var(--radius-pill);
258 | }
259 | 
260 | .testi .slider::-webkit-scrollbar-thumb {
261 |   background-color: var(--jet);
262 |   border-radius: var(--radius-pill);
263 | }
264 | 
265 | .testi .slider::-webkit-scrollbar-button { width: calc(25% - 20px); }
266 | 
267 | 
268 | 
269 | 
270 | 
271 | /*-----------------------------------*\
272 |   #MEDIA QUERIES
273 | \*-----------------------------------*/
274 | 
275 | /**
276 |  * responsive for large than 575px screen
277 |  */
278 | 
279 | @media (min-width: 575px) {
280 | 
281 |   /**
282 |    * CLIENT, ABOUT & SKILL
283 |    */
284 | 
285 |   .client .slider-item { min-width: calc(33.33% - 20px); }
286 | 
287 |   .client .slider-item .w-100,
288 |   .about-banner,
289 |   .skill-banner {
290 |     max-width: max-content;
291 |     margin-inline: auto;
292 |   }
293 | 
294 | 
295 | 
296 |   /**
297 |    * CTA
298 |    */
299 | 
300 |   .cta .container { justify-content: space-between; }
301 | 
302 | }
303 | 
304 | 
305 | 
306 | 
307 | 
308 | /**
309 |  * responsive for large than 768px screen
310 |  */
311 | 
312 | @media (min-width: 768px) {
313 | 
314 |   /**
315 |    * HERO
316 |    */
317 | 
318 |   .hero-text { --fs-18: 2rem; }
319 | 
320 |   .hero::after {
321 |     top: -20%;
322 |     bottom: 50%;
323 |     left: 48%;
324 |     right: -15%;
325 |   }
326 | 
327 | 
328 | 
329 |   /**
330 |    * CLIENT
331 |    */
332 | 
333 |   .client .slider-item { min-width: calc(25% - 22.5px); }
334 | 
335 | 
336 | 
337 |   /**
338 |    * TESTIMONIALS
339 |    */
340 | 
341 |   .testi .slider-item { min-width: calc(50% - 15px); }
342 | 
343 | }
344 | 
345 | 
346 | 
347 | 
348 | 
349 | /**
350 |  * responsive for large than 992px screen
351 |  */
352 | 
353 | @media (min-width: 992px) {
354 | 
355 |   /**
356 |    * HERO, ABOUT, SKILL
357 |    */
358 | 
359 |   :is(.hero, .about, .skill) .container {
360 |     grid-template-columns: 1fr 1fr;
361 |     align-items: center;
362 |   }
363 | 
364 | 
365 | 
366 |   /**
367 |    * HERO
368 |    */
369 | 
370 |   .hero { text-align: left; }
371 | 
372 |   .hero .btn { margin-inline: 0; }
373 | 
374 | 
375 | 
376 |   /**
377 |    * CLIENT
378 |    */
379 | 
380 |   .client .slider-item { min-width: calc(20% - 24px); }
381 | 
382 | 
383 | 
384 |   /**
385 |    * SKILL
386 |    */
387 | 
388 |   .skill .container { align-items: flex-start; }
389 | 
390 | }
391 | 
392 | 
393 | 
394 | 
395 | 
396 | /**
397 |  * responsive for large than 1200px screen
398 |  */
399 | 
400 | @media (min-width: 1200px) {
401 | 
402 |   /**
403 |    * ABOUT
404 |    */
405 | 
406 |   .about-list { gap: 40px; }
407 | 
408 | }


--------------------------------------------------------------------------------
/assets/css/pages/contact.css:
--------------------------------------------------------------------------------
  1 | /*-----------------------------------*\
  2 |   #service.css
  3 | \*-----------------------------------*/
  4 | 
  5 | /**
  6 |  * copyright 2022 codewithsadee
  7 |  */
  8 |  
  9 | /**
 10 |  * TABLE OF CONTENT
 11 |  *
 12 |  * COMPONENTS
 13 |  * Btn............................Buttons style
 14 |  *
 15 |  * MAIN CONTENT
 16 |  * Contact........................Contact style
 17 |  * Media queries..................Responsive for all devices
 18 |  */
 19 | 
 20 | 
 21 | 
 22 | 
 23 | 
 24 | /*-----------------------------------*\
 25 |   #COMPONENTS
 26 | \*-----------------------------------*/
 27 | 
 28 | @import url("../components/btn.css");
 29 | 
 30 | 
 31 | 
 32 | 
 33 | 
 34 | /*-----------------------------------*\
 35 |   #CONTACT
 36 | \*-----------------------------------*/
 37 | 
 38 | .contact {
 39 |   background-color: var(--jet);
 40 |   padding-block-start: calc(var(--section-padding) + 60px);
 41 | }
 42 | 
 43 | .contact .container {
 44 |   display: grid;
 45 |   gap: 48px;
 46 | }
 47 | 
 48 | .contact-form {
 49 |   background-color: var(--white);
 50 |   padding: 25px;
 51 | }
 52 | 
 53 | .contact-text { margin-block: 5px 30px; }
 54 | 
 55 | .contact .label { margin-block-end: 8px; }
 56 | 
 57 | .input-field {
 58 |   padding: 10px 12px;
 59 |   border: 1px solid var(--jet);
 60 |   margin-block-end: 24px;
 61 |   outline: none;
 62 |   transition: box-shadow var(--transition-1);
 63 | }
 64 | 
 65 | .input-field:focus { box-shadow: inset 0 0 0 1px var(--jet); }
 66 | 
 67 | textarea {
 68 |   resize: vertical;
 69 |   min-height: 100px;
 70 |   max-height: 150px;
 71 | }
 72 | 
 73 | 
 74 | .contact-list .contact-item {
 75 |   display: flex;
 76 |   align-items: flex-start;
 77 |   gap: 15px;
 78 | }
 79 | 
 80 | .contact-list .contact-item:not(:last-child) { margin-block-end: 35px; }
 81 | 
 82 | .contact-list .item-icon {
 83 |   color: var(--jet);
 84 |   width: 55px;
 85 |   height: 55px;
 86 |   display: grid;
 87 |   place-items: center;
 88 |   flex-shrink: 0;
 89 | }
 90 | 
 91 | .contact-list .item-icon ion-icon { font-size: 2.5rem; }
 92 | 
 93 | .contact .label-lg {
 94 |   color: var(--white_a80);
 95 |   text-transform: uppercase;
 96 |   letter-spacing: 2px;
 97 |   font-weight: var(--fw-400);
 98 |   margin-block-end: 5px;
 99 | }
100 | 
101 | .contact .body-lg {
102 |   color: var(--white);
103 |   word-break: break-all;
104 | }
105 | 
106 | 
107 | 
108 | 
109 | /*-----------------------------------*\
110 |   #MEDIA QUERIES
111 | \*-----------------------------------*/
112 | 
113 | /**
114 |  * responsive for large than 768px screen
115 |  */
116 | 
117 | @media (min-width: 768px) {
118 | 
119 |   .contact-form { padding: 35px; }
120 | 
121 |   .wrapper {
122 |     display: grid;
123 |     grid-template-columns: 1fr 1fr;
124 |     gap: 20px;
125 |   }
126 | 
127 | }
128 | 
129 | 
130 | 
131 | 
132 | 
133 | /**
134 |  * responsive for large than 992px screen
135 |  */
136 | 
137 | @media (min-width: 992px) {
138 | 
139 |   .contact .container {
140 |     grid-template-columns: 1fr 0.9fr;
141 |     align-items: center;
142 |     gap: 20px;
143 |   }
144 | 
145 |   .contact-content {
146 |     width: 70%;
147 |     margin-inline: auto;
148 |   }
149 | 
150 | }


--------------------------------------------------------------------------------
/assets/css/pages/portfolio.css:
--------------------------------------------------------------------------------
  1 | /*-----------------------------------*\
  2 |   #service.css
  3 | \*-----------------------------------*/
  4 | 
  5 | /**
  6 |  * copyright 2022 codewithsadee
  7 |  */
  8 |  
  9 | /**
 10 |  * TABLE OF CONTENT
 11 |  *
 12 |  * COMPONENTS
 13 |  * Btn............................Buttons style
 14 |  *
 15 |  * MAIN CONTENT
 16 |  * Portfolio......................Portfolio style
 17 |  * Media queries..................Responsive for all devices
 18 |  */
 19 | 
 20 | 
 21 | 
 22 | 
 23 | 
 24 | /*-----------------------------------*\
 25 |   #COMPONENTS
 26 | \*-----------------------------------*/
 27 | 
 28 | @import url('../components/btn.css');
 29 | 
 30 | 
 31 | 
 32 | 
 33 | 
 34 | /*-----------------------------------*\
 35 |   #PORTFOLIO
 36 | \*-----------------------------------*/
 37 | 
 38 | .portfolio {
 39 |   background-color: var(--maximum-yellow-red_a10);
 40 |   padding-block-start: calc(var(--section-padding) + 60px);
 41 | }
 42 | 
 43 | .portfolio-list,
 44 | .portfolio-card { display: grid; }
 45 | 
 46 | .portfolio-list { gap: 50px; }
 47 | 
 48 | .portfolio-card { gap: 25px; }
 49 | 
 50 | .portfolio-card .card-banner {
 51 |   position: relative;
 52 |   border: 2px solid var(--jet);
 53 |   box-shadow: 0 0 0 var(--jet);
 54 |   transition: var(--transition-1);
 55 | }
 56 | 
 57 | .portfolio-card .card-banner:is(:hover, :focus-within) {
 58 |   box-shadow: 3px 3px 0 var(--jet);
 59 | }
 60 | 
 61 | .portfolio-card .btn-icon {
 62 |   position: absolute;
 63 |   top: 15px;
 64 |   left: 0;
 65 |   background-color: var(--white);
 66 |   color: var(--jet);
 67 |   font-size: 2rem;
 68 |   padding: 8px;
 69 |   border: 2px solid var(--jet);
 70 |   opacity: 0;
 71 |   transition: var(--transition-1);
 72 |   will-change: transform;
 73 | }
 74 | 
 75 | .portfolio-card .card-banner:is(:hover, :focus-within) .btn-icon {
 76 |   transform: translateX(15px);
 77 |   opacity: 1;
 78 | }
 79 | 
 80 | .portfolio-card .chip {
 81 |   background-color: var(--orange-red_a20);
 82 |   max-width: max-content;
 83 |   color: var(--jet);
 84 |   font-weight: var(--fw-500);
 85 |   text-transform: uppercase;
 86 |   letter-spacing: 3px;
 87 |   padding: 6px 20px;
 88 |   border-radius: var(--radius-pill);
 89 |   margin-block-end: 18px;
 90 | }
 91 | 
 92 | .portfolio-card .card-text { margin-block: 10px 25px; }
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | /*-----------------------------------*\
 99 |   #MEDIA QUERIES
100 | \*-----------------------------------*/
101 | 
102 | /**
103 |  * responsive for large than 768px screen
104 |  */
105 | 
106 | @media (min-width: 768px) {
107 | 
108 |   .portfolio-card {
109 |     grid-template-columns: 1fr 1fr;
110 |     align-items: center;
111 |   }
112 | 
113 |   .portfolio-list > li:nth-child(2n) .card-banner { order: 1; }
114 | 
115 |   .portfolio-card > * {
116 |     width: 80%;
117 |     margin-inline: auto;
118 |   }
119 | 
120 |   .portfolio-card .card-text { margin-block-start: 20px; }
121 | 
122 | }


--------------------------------------------------------------------------------
/assets/css/pages/service.css:
--------------------------------------------------------------------------------
 1 | /*-----------------------------------*\
 2 |   #service.css
 3 | \*-----------------------------------*/
 4 | 
 5 | /**
 6 |  * copyright 2022 codewithsadee
 7 |  */
 8 |  
 9 | /**
10 |  * TABLE OF CONTENT
11 |  *
12 |  * COMPONENTS
13 |  * Card...........................Cards style
14 |  * Btn............................Button style
15 |  *
16 |  * MAIN CONTENT
17 |  * Service........................Service style
18 |  * Media queries..................Responsive for all devices
19 |  */
20 | 
21 | 
22 | 
23 | 
24 | 
25 | /*-----------------------------------*\
26 |   #COMPONENTS
27 | \*-----------------------------------*/
28 | 
29 | @import url('../components/card.css');
30 | @import url('../components/btn.css');
31 | 
32 | 
33 | 
34 | 
35 | 
36 | /*-----------------------------------*\
37 |   #SERVICES
38 | \*-----------------------------------*/
39 | 
40 | .service { padding-block-start: calc(var(--section-padding) + 60px); }
41 | 
42 | .service-list {
43 |   display: grid;
44 |   gap: 25px;
45 | }
46 | 
47 | .card-title { margin-block-end: 10px; }
48 | 
49 | .card ion-icon { font-size: 3.2rem; }
50 | 
51 | .card .body-sm { color: var(--jet); }
52 | 
53 | 
54 | 
55 | 
56 | 
57 | /*-----------------------------------*\
58 |   #MEDIA QUERIES
59 | \*-----------------------------------*/
60 | 
61 | /**
62 |  * responsive for large than 768px screen
63 |  */
64 | 
65 | @media (min-width: 768px) {
66 | 
67 |   .service-list { grid-template-columns: 1fr 1fr; }
68 | 
69 | }


--------------------------------------------------------------------------------
/assets/css/require.css:
--------------------------------------------------------------------------------
  1 | /*-----------------------------------*\
  2 |   #require.css
  3 | \*-----------------------------------*/
  4 | 
  5 | /**
  6 |  * copyright 2022 codewithsadee
  7 |  */
  8 | 
  9 | /**
 10 |  * TABLE OF CONTENT
 11 |  *
 12 |  * Custom properties..............Global variables
 13 |  * Reset..........................Removed browser default style
 14 |  * Typography.....................Typography style
 15 |  * Reused.........................Reused classes
 16 |  * Preloader......................Preload style
 17 |  * Header.........................Header style
 18 |  * Footer.........................Footer style
 19 |  * Media queries..................Responsive for all devices
 20 |  */
 21 | 
 22 | 
 23 | 
 24 | 
 25 | 
 26 | /*-----------------------------------*\
 27 |   #CUSTOM PROPERTY
 28 | \*-----------------------------------*/
 29 | 
 30 | :root {
 31 | 
 32 |   /**
 33 |    * colors
 34 |    */
 35 | 
 36 |   --maximum-yellow-red_a10: hsla(41, 99%, 64%, 0.1);
 37 |   --maximum-yellow-red_a40: hsla(41, 99%, 64%, 0.4);
 38 |   --maximum-yellow-red: hsl(41, 99%, 64%);
 39 |   --orange-red_a20: hsla(19, 100%, 55%, 0.2);
 40 |   --eerie-black: hsl(210, 11%, 15%);
 41 |   --orange-red: hsl(19, 100%, 55%);
 42 |   --davys-gray: hsl(0, 0%, 33%);
 43 |   --white_a80: hsla(0, 0%, 100%, 0.8);
 44 |   --white_a75: hsla(0, 0%, 100%, 0.75);
 45 |   --white_a10: hsla(0, 0%, 100%, 0.1);
 46 |   --jet_a10: hsla(0, 0%, 22%, 0.1);
 47 |   --black: hsl(0, 0%, 0%);
 48 |   --white: hsl(0, 0%, 100%);
 49 |   --jet: hsl(0, 0%, 22%);
 50 | 
 51 |   /**
 52 |    * typography
 53 |    */
 54 | 
 55 |   --ff-jost: 'Jost', sans-serif;
 56 | 
 57 |   --fs-45: 4.5rem;
 58 |   --fs-38: 3.8rem;
 59 |   --fs-32: 3.2rem;
 60 |   --fs-27: 2.7rem;
 61 |   --fs-26: 2.6rem;
 62 |   --fs-22: 2.2rem;
 63 |   --fs-20: 2rem;
 64 |   --fs-18: 1.8rem;
 65 |   --fs-17: 1.7rem;
 66 |   --fs-14: 1.4rem;
 67 |   --fs-12: 1.2rem;
 68 |   
 69 |   --fw-400: 400;
 70 |   --fw-500: 500;
 71 |   --fw-600: 600;
 72 | 
 73 |   /**
 74 |    * spacing
 75 |    */
 76 | 
 77 |   --section-padding: 60px;
 78 | 
 79 |   /**
 80 |    * shadow
 81 |    */
 82 | 
 83 |   --shadow: 0 2px 2px hsla(0, 0%, 22%, 0.08);
 84 | 
 85 |   /**
 86 |    * border radius
 87 |    */
 88 | 
 89 |   --radius-50: 50px;
 90 |   --radius-pill: 100px;
 91 |   --radius-circle: 50%;
 92 | 
 93 |   /**
 94 |    * transition
 95 |    */
 96 | 
 97 |   --transition-1: 0.25s ease;
 98 |   --transition-2: 0.5s ease;
 99 |   --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);
100 | 
101 | }
102 | 
103 | 
104 | 
105 | 
106 | 
107 | /*-----------------------------------*\
108 |   #RESET
109 | \*-----------------------------------*/
110 | 
111 | *,
112 | *::before,
113 | *::after {
114 |   margin: 0;
115 |   padding: 0;
116 |   box-sizing: border-box;
117 | }
118 | 
119 | li { list-style: none; }
120 | 
121 | a,
122 | img,
123 | span,
124 | label,
125 | button,
126 | ion-icon { display: block; }
127 | 
128 | a {
129 |   color: inherit;
130 |   text-decoration: none;
131 | }
132 | 
133 | img { height: auto; }
134 | 
135 | input,
136 | button,
137 | textarea {
138 |   background: none;
139 |   border: none;
140 |   font: inherit;
141 | }
142 | 
143 | button { cursor: pointer; }
144 | 
145 | input,
146 | textarea { width: 100%; }
147 | 
148 | ion-icon { pointer-events: none; }
149 | 
150 | address { font-style: normal; }
151 | 
152 | html {
153 |   font-family: var(--ff-jost);
154 |   font-size: 10px;
155 |   scroll-behavior: smooth;
156 | }
157 | 
158 | body {
159 |   background-color: var(--white);
160 |   color: var(--davys-gray);
161 |   font-size: 1.6rem;
162 |   line-height: 1.5;
163 |   overflow: hidden;
164 | }
165 | 
166 | body.loaded { overflow: visible; }
167 | 
168 | :focus-visible { outline-offset: 4px; }
169 | 
170 | ::-webkit-scrollbar { width: 10px; }
171 | 
172 | ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
173 | 
174 | ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
175 | 
176 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
177 | 
178 | 
179 | 
180 | 
181 | 
182 | /*-----------------------------------*\
183 |   #TYPOGRAPHY
184 | \*-----------------------------------*/
185 | 
186 | .headline-lg { font-size: var(--fs-45); }
187 | 
188 | .headline-md { font-size: var(--fs-38); }
189 | 
190 | .headline-sm { font-size: var(--fs-32); }
191 | 
192 | .title-lg { font-size: var(--fs-27); }
193 | 
194 | .title-md { font-size: var(--fs-26); }
195 | 
196 | .title-sm { font-size: var(--fs-22); }
197 | 
198 | .body-lg { font-size: var(--fs-20); }
199 | 
200 | .body-md { font-size: var(--fs-18); }
201 | 
202 | .body-sm { font-size: var(--fs-17); }
203 | 
204 | .label-lg { font-size: var(--fs-14); }
205 | 
206 | .label-md { font-size: var(--fs-12); }
207 | 
208 | /**
209 |  * font weight
210 |  */
211 | 
212 | .headline-lg,
213 | .headline-md,
214 | .headline-sm,
215 | .title-lg,
216 | .title-md,
217 | .title-sm,
218 | .label-lg {
219 |   color: var(--jet);
220 |   font-weight: var(--fw-600);
221 |   line-height: 1.2;
222 | }
223 | 
224 | .body-lg { font-weight: var(--fw-500); }
225 | 
226 | 
227 | 
228 | 
229 | 
230 | /*-----------------------------------*\
231 |   #REUSED STYLE
232 | \*-----------------------------------*/
233 | 
234 | .container { padding-inline: 16px; }
235 | 
236 | .section { padding-block: var(--section-padding); }
237 | 
238 | .w-100 { width: 100%; }
239 | 
240 | .section-title {
241 |   margin-block-end: 30px;
242 |   text-transform: uppercase;
243 |   letter-spacing: 3px;
244 | }
245 | 
246 | .text-center { text-align: center; }
247 | 
248 | .img-cover {
249 |   width: 100%;
250 |   height: 100%;
251 |   object-fit: cover;
252 | }
253 | 
254 | .has-bg-image {
255 |   background-repeat: no-repeat;
256 |   background-size: cover;
257 |   background-position: center;
258 | }
259 | 
260 | .img-holder {
261 |   aspect-ratio: var(--width) / var(--height);
262 |   background-color: var(--light-gray);
263 |   overflow: hidden;
264 | }
265 | 
266 | 
267 | 
268 | 
269 | 
270 | /*-----------------------------------*\
271 |   #PRELOADER
272 | \*-----------------------------------*/
273 | 
274 | .preloader {
275 |   position: fixed;
276 |   top: 0;
277 |   left: 0;
278 |   width: 100%;
279 |   height: 100vh;
280 |   background-color: var(--orange-red);
281 |   display: grid;
282 |   place-items: center;
283 |   z-index: 6;
284 | }
285 | 
286 | .preloader.loaded { display: none; }
287 | 
288 | .preloader-circle {
289 |   width: 60px;
290 |   height: 60px;
291 |   border: 8px solid transparent;
292 |   border-block-color: var(--white);
293 |   border-radius: var(--radius-circle);
294 |   animation: loading 1s linear infinite;
295 | }
296 | 
297 | @keyframes loading {
298 |   0% { transform: rotate(0); }
299 |   100% { transform: rotate(1turn); }
300 | }
301 | 
302 | 
303 | 
304 | 
305 | 
306 | /*-----------------------------------*\
307 |   #HEADER
308 | \*-----------------------------------*/
309 | 
310 | .header .btn { display: none; }
311 | 
312 | .header {
313 |   position: fixed;
314 |   top: 0;
315 |   left: 0;
316 |   width: 100%;
317 |   background-color: var(--white);
318 |   padding-block: 16px;
319 |   z-index: 4;
320 |   transition: var(--transition-1);
321 | }
322 | 
323 | .header.active { box-shadow: var(--shadow); }
324 | 
325 | .header .container {
326 |   display: flex;
327 |   justify-content: space-between;
328 |   align-items: center;
329 | }
330 | 
331 | .nav-toggle-btn {
332 |   color: var(--jet);
333 |   font-size: 3.8rem;
334 | }
335 | 
336 | .navbar {
337 |   position: absolute;
338 |   top: 100%;
339 |   left: 0;
340 |   width: 100%;
341 |   background-color: var(--white);
342 |   border-block: 2px solid var(--jet);
343 |   transition: 0.25s var(--cubic-out);
344 |   transition-delay: 0.15s;
345 |   transform: scaleY(0);
346 |   transform-origin: top;
347 |   visibility: hidden;
348 | }
349 | 
350 | .navbar.active {
351 |   transform: scaleY(1);
352 |   visibility: visible;
353 |   transition-duration: 0.5s;
354 |   transition-delay: 0s;
355 | }
356 | 
357 | .navbar > * {
358 |   opacity: 0;
359 |   transition: var(--transition-1);
360 | }
361 | 
362 | .navbar.active > * {
363 |   opacity: 1;
364 |   transition-delay: 0.4s;
365 | }
366 | 
367 | .navbar-item:not(:last-child) { border-block-end: 1px solid var(--jet_a10); }
368 | 
369 | .navbar-link {
370 |   text-transform: uppercase;
371 |   letter-spacing: 3px;
372 |   padding: 16px 15px;
373 |   transition: var(--transition-1);
374 | }
375 | 
376 | .navbar-link:is(:hover, :focus-visible, .active) { color: var(--orange-red); }
377 | 
378 | 
379 | 
380 | 
381 | 
382 | /*-----------------------------------*\
383 |   #FOOTER
384 | \*-----------------------------------*/
385 | 
386 | .footer {
387 |   background-color: var(--jet);
388 |   color: var(--white_a75);
389 |   border-block-start: 1px solid var(--white_a10);
390 |   padding-block: 18px;
391 | }
392 | 
393 | .social-list {
394 |   display: flex;
395 |   justify-content: center;
396 |   gap: 18px;
397 |   margin-block-end: 15px;
398 | }
399 | 
400 | .social-link { font-size: 1.8rem; }
401 | 
402 | .social-link:is(:hover, :focus-visible) { color: var(--orange-red); }
403 | 
404 | 
405 | 
406 | 
407 | 
408 | /*-----------------------------------*\
409 |   #MEDIA QUEREIS
410 | \*-----------------------------------*/
411 | 
412 | /**
413 |  * responsive for large than 575px screen
414 |  */
415 | 
416 | @media (min-width: 575px) {
417 | 
418 |   .title-lg { --fs-27: 3.5rem; }
419 | 
420 | }
421 | 
422 | 
423 | 
424 | 
425 | 
426 | /**
427 |  * responsive for large than 768px screen
428 |  */
429 | 
430 | @media (min-width: 768px) {
431 | 
432 |   /**
433 |    * TYPOGRAPHY
434 |    */
435 | 
436 |   .headline-lg { --fs-45: 6rem; }
437 | 
438 |   .headline-md { --fs-38: 4.5rem; }
439 | 
440 |   .title-md { --fs-26: 3.2rem; }
441 | 
442 | 
443 | 
444 |   /**
445 |    * REUSED STYLE
446 |    */
447 | 
448 |   .section { --section-padding: 100px; }
449 | 
450 |   .section-title { margin-block-end: 40px; }
451 | 
452 | 
453 | 
454 |   /**
455 |    * FOOTER
456 |    */
457 | 
458 |   .footer { padding-block: 25px; }
459 | 
460 |   .footer .container {
461 |     display: flex;
462 |     justify-content: space-between;
463 |     align-items: center;
464 |   }
465 | 
466 |   .social-list { margin-block-end: 0; }
467 | 
468 | }
469 | 
470 | 
471 | 
472 | 
473 | 
474 | /**
475 |  * responsive for large than 992px screen
476 |  */
477 | 
478 | @media (min-width: 992px) {
479 |   
480 |   /**
481 |    * TYPOGRAPHY
482 |    */
483 | 
484 |   .headline-md { --fs-38: 5rem; }
485 | 
486 |   .title-lg { --fs-27: 4rem; }
487 | 
488 |   .title-sm { --fs-22: 2.4rem; }
489 | 
490 | 
491 | 
492 |   /**
493 |    * REUSED STYLE
494 |    */
495 | 
496 |   .section-title { margin-block-end: 60px; }
497 | 
498 | 
499 | 
500 |   /**
501 |    * HEADER
502 |    */
503 | 
504 |   .nav-toggle-btn { display: none; }
505 | 
506 |   .navbar,
507 |   .navbar.active,
508 |   .navbar > * {
509 |     all: unset;
510 |     display: block;
511 |   }
512 | 
513 |   .navbar-list { display: flex; }
514 | 
515 |   .navbar-item:not(:last-child) { border-block-end: none; }
516 | 
517 |   .navbar-link { position: relative; }
518 | 
519 |   .navbar-link::after {
520 |     content: "";
521 |     position: absolute;
522 |     bottom: 5px;
523 |     left: 50%;
524 |     transform: translateX(-50%) scaleX(0);
525 |     transform-origin: right;
526 |     width: 80%;
527 |     height: 2px;
528 |     background-color: var(--orange-red);
529 |     transition: transform var(--transition-1);
530 |   }
531 | 
532 |   .navbar-link:is(:hover, :focus-visible, .active)::after {
533 |     transform: translateX(-50%) scaleX(1);
534 |     transform-origin: left;
535 |   }
536 | 
537 |   .header .btn { display: block; }
538 | 
539 | }
540 | 
541 | 
542 | 
543 | 
544 | 
545 | /**
546 |  * responsive for large than 1200px screen
547 |  */
548 | 
549 | @media (min-width: 1200px) {
550 | 
551 |   /**
552 |    * TYPOGRAPHY
553 |    */
554 | 
555 |   .headline-lg { --fs-45: 7rem; }
556 | 
557 |   
558 | 
559 |   /**
560 |    * REUSED STYLE
561 |    */
562 | 
563 |   .container {
564 |     max-width: 1240px;
565 |     width: 100%;
566 |     margin-inline: auto;
567 |   }
568 | 
569 | }


--------------------------------------------------------------------------------
/assets/images/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/Thumbs.db


--------------------------------------------------------------------------------
/assets/images/about-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/about-banner.png


--------------------------------------------------------------------------------
/assets/images/client-1.svg:
--------------------------------------------------------------------------------
 1 | <svg width="130" height="40" viewBox="0 0 130 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_3_81)">
 3 | <path d="M22.8393 29.495V11.0746H30.1067C31.5038 11.0746 32.6941 11.3415 33.6775 11.8751C34.6609 12.4028 35.4103 13.1373 35.9261 14.0787C36.4477 15.0141 36.7085 16.0934 36.7085 17.3167C36.7085 18.5399 36.4448 19.6193 35.917 20.5546C35.3894 21.49 34.6248 22.2186 33.6235 22.7402C32.6281 23.2619 31.4229 23.5228 30.0078 23.5228H25.3757V20.4017H29.3782C30.1277 20.4017 30.7453 20.2728 31.231 20.015C31.7227 19.7511 32.0884 19.3884 32.3283 18.9266C32.5741 18.459 32.697 17.9223 32.697 17.3167C32.697 16.7051 32.5741 16.1714 32.3283 15.7157C32.0884 15.254 31.7227 14.8972 31.231 14.6454C30.7393 14.3875 30.1157 14.2586 29.3602 14.2586H26.7338V29.495H22.8393Z" fill="white"/>
 4 | <path d="M39.2382 29.495V11.0746H46.5056C47.8968 11.0746 49.084 11.3235 50.0674 11.8211C51.0568 12.3128 51.8093 13.0114 52.3249 13.9168C52.8467 14.8163 53.1075 15.8746 53.1075 17.0918C53.1075 18.3151 52.8436 19.3674 52.316 20.2488C51.7883 21.1243 51.0238 21.7958 50.0224 22.2635C49.0271 22.7313 47.8218 22.9651 46.4067 22.9651H41.5408V19.8351H45.7771C46.5206 19.8351 47.1383 19.7331 47.63 19.5293C48.1216 19.3254 48.4874 19.0196 48.7272 18.6118C48.9731 18.2041 49.096 17.6974 49.096 17.0918C49.096 16.4802 48.9731 15.9645 48.7272 15.5448C48.4874 15.1251 48.1186 14.8073 47.6209 14.5914C47.1292 14.3695 46.5087 14.2586 45.7591 14.2586H43.1328V29.495H39.2382ZM49.1859 21.1123L53.7641 29.495H49.4648L44.9856 21.1123H49.1859Z" fill="white"/>
 5 | <path d="M72.787 20.2848C72.787 22.2936 72.4063 24.0025 71.6447 25.4116C70.8892 26.8207 69.8579 27.897 68.5507 28.6405C67.2495 29.3781 65.7864 29.7468 64.1615 29.7468C62.5245 29.7468 61.0554 29.3751 59.7542 28.6316C58.4531 27.888 57.4247 26.8117 56.6692 25.4026C55.9136 23.9934 55.5359 22.2875 55.5359 20.2848C55.5359 18.2761 55.9136 16.5672 56.6692 15.158C57.4247 13.7489 58.4531 12.6756 59.7542 11.9381C61.0554 11.1946 62.5245 10.8228 64.1615 10.8228C65.7864 10.8228 67.2495 11.1946 68.5507 11.9381C69.8579 12.6756 70.8892 13.7489 71.6447 15.158C72.4063 16.5672 72.787 18.2761 72.787 20.2848ZM68.8385 20.2848C68.8385 18.9837 68.6436 17.8863 68.2538 16.9929C67.8701 16.0995 67.3275 15.4219 66.6259 14.9602C65.9243 14.4985 65.1028 14.2676 64.1615 14.2676C63.22 14.2676 62.3986 14.4985 61.697 14.9602C60.9955 15.4219 60.4498 16.0995 60.0601 16.9929C59.6763 17.8863 59.4844 18.9837 59.4844 20.2848C59.4844 21.586 59.6763 22.6833 60.0601 23.5768C60.4498 24.4702 60.9955 25.1477 61.697 25.6095C62.3986 26.0711 63.22 26.302 64.1615 26.302C65.1028 26.302 65.9243 26.0711 66.6259 25.6095C67.3275 25.1477 67.8701 24.4702 68.2538 23.5768C68.6436 22.6833 68.8385 21.586 68.8385 20.2848Z" fill="white"/>
 6 | <path d="M75.6719 11.0746H80.4749L85.5474 23.4508H85.7638L90.8363 11.0746H95.6397V29.495H91.8615V17.5056H91.7084L86.942 29.405H84.3692L79.6025 17.4606H79.4496V29.495H75.6719V11.0746Z" fill="white"/>
 7 | <path d="M98.8477 29.495V11.0746H106.115C107.512 11.0746 108.703 11.3415 109.686 11.8751C110.669 12.4028 111.419 13.1373 111.935 14.0787C112.457 15.0141 112.717 16.0934 112.717 17.3167C112.717 18.5399 112.453 19.6193 111.926 20.5546C111.398 21.49 110.633 22.2186 109.632 22.7402C108.637 23.2619 107.432 23.5228 106.017 23.5228H101.384V20.4017H105.387C106.137 20.4017 106.754 20.2728 107.24 20.015C107.731 19.7511 108.097 19.3884 108.337 18.9266C108.583 18.459 108.706 17.9223 108.706 17.3167C108.706 16.7051 108.583 16.1714 108.337 15.7157C108.097 15.254 107.731 14.8972 107.24 14.6454C106.748 14.3875 106.124 14.2586 105.369 14.2586H102.743V29.495H98.8477Z" fill="white"/>
 8 | <path d="M114.546 14.2856V11.0746H129.674V14.2856H124.035V29.495H120.185V14.2856H114.546Z" fill="white"/>
 9 | <path d="M10.2848 28.8555C15.0183 28.8555 18.8555 25.0183 18.8555 20.2848C18.8555 15.5514 15.0183 11.7141 10.2848 11.7141C5.55139 11.7141 1.71417 15.5514 1.71417 20.2848C1.71417 25.0183 5.55139 28.8555 10.2848 28.8555Z" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
10 | <path d="M12.2646 16.8565L17.1842 25.3758" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
11 | <path d="M8.30502 16.8565H18.1441" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
12 | <path d="M6.32516 20.2848L11.2448 11.7656" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
13 | <path d="M8.30501 23.7131L3.38544 15.1938" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
14 | <path d="M12.2646 23.7131H2.42548" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
15 | <path d="M14.2445 20.2848L9.32495 28.8041" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
16 | </g>
17 | <defs>
18 | <clipPath id="clip0_3_81">
19 | <rect width="130" height="20.5696" fill="white" transform="translate(0 10)"/>
20 | </clipPath>
21 | </defs>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/assets/images/client-2.svg:
--------------------------------------------------------------------------------
 1 | <svg width="130" height="40" viewBox="0 0 130 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <mask id="mask0_3_74" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="3" width="32" height="35">
 3 | <path d="M31.0377 3H0V37.1414H31.0377V3Z" fill="white"/>
 4 | </mask>
 5 | <g mask="url(#mask0_3_74)">
 6 | <path d="M6.20752 4.55188L1.55188 10.7594V32.4857C1.55188 33.3089 1.87888 34.0984 2.46095 34.6805C3.04302 35.2626 3.83247 35.5895 4.65564 35.5895H26.382C27.2052 35.5895 27.9946 35.2626 28.5768 34.6805C29.1587 34.0984 29.4857 33.3089 29.4857 32.4857V10.7594L24.8301 4.55188H6.20752Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 7 | <path d="M1.55188 10.7594H29.4857" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 8 | <path opacity="0.5" d="M21.7264 16.967C21.7264 18.6133 21.0723 20.1922 19.9082 21.3564C18.744 22.5205 17.1651 23.1744 15.5188 23.1744C13.8724 23.1744 12.2936 22.5205 11.1294 21.3564C9.96528 20.1922 9.31128 18.6133 9.31128 16.967" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 9 | </g>
10 | <path d="M45.1487 20.6322L41.5427 23.2298C42.0316 24.2486 42.7142 25.1858 43.5902 26.0414C44.4663 26.897 45.4951 27.5796 46.6768 28.089C47.8788 28.5778 49.1725 28.8223 50.5579 28.8223C51.5563 28.8223 52.5239 28.6696 53.4611 28.3639C54.4186 28.0787 55.2642 27.6509 55.9977 27.0805C56.7514 26.51 57.3423 25.8071 57.7701 24.9718C58.2183 24.1161 58.4425 23.1484 58.4425 22.0686C58.4425 21.1722 58.2999 20.3776 58.0146 19.6849C57.7294 18.9922 57.3321 18.381 56.8227 17.8513C56.3338 17.3215 55.7633 16.8734 55.1114 16.5066C54.4595 16.1195 53.7566 15.7834 53.0027 15.4982C52.0044 15.1518 51.1488 14.8258 50.4356 14.5202C49.743 14.2146 49.2031 13.8785 48.816 13.5117C48.4493 13.145 48.266 12.7172 48.266 12.2282C48.266 11.7596 48.4595 11.3725 48.8465 11.0669C49.2336 10.741 49.7939 10.578 50.5273 10.578C51.0775 10.578 51.5867 10.69 52.0554 10.9141C52.5443 11.1179 52.9823 11.4133 53.3694 11.8004C53.7769 12.1671 54.1334 12.6051 54.4391 13.1145L58.3813 10.9141C58.0146 10.1807 57.4849 9.45744 56.7923 8.74435C56.0994 8.0313 55.2235 7.44047 54.164 6.97187C53.1249 6.50328 51.8924 6.26898 50.4662 6.26898C49.0809 6.26898 47.8177 6.51347 46.6768 7.00243C45.5563 7.47102 44.6598 8.16371 43.9875 9.08053C43.3355 9.99733 43.0096 11.0873 43.0096 12.3505C43.0096 13.4099 43.2032 14.3165 43.5902 15.0703C43.9773 15.8037 44.4663 16.4353 45.0571 16.965C45.648 17.4744 46.2693 17.892 46.9213 18.218C47.5936 18.5439 48.1844 18.7987 48.6938 18.982C49.7329 19.3691 50.5681 19.7155 51.1996 20.0211C51.8312 20.3266 52.2897 20.6527 52.5749 20.999C52.8601 21.325 53.0027 21.7629 53.0027 22.313C53.0027 22.965 52.7583 23.4846 52.2693 23.8716C51.7803 24.2383 51.1589 24.4218 50.4052 24.4218C49.692 24.4218 49.0096 24.2689 48.3576 23.9634C47.726 23.6577 47.1352 23.2197 46.5851 22.6492C46.0554 22.0788 45.5767 21.4064 45.1487 20.6322Z" fill="white"/>
11 | <path d="M66.0825 4.31314H61.4373V28.15H66.0825V4.31314ZM70.5749 19.5933V28.15H75.1894V18.9209C75.1894 17.7596 75.0264 16.7817 74.7005 15.9871C74.3744 15.1926 73.8549 14.5915 73.1419 14.1841C72.4492 13.7766 71.5222 13.5729 70.3608 13.5729C69.1996 13.5729 68.2421 13.8479 67.4882 14.398C66.7548 14.9277 66.2048 15.651 65.838 16.5678C65.4713 17.4642 65.2879 18.4726 65.2879 19.5933H66.0825C66.0825 19.0432 66.1843 18.5848 66.3881 18.218C66.5917 17.8309 66.8771 17.5355 67.2437 17.3318C67.6105 17.1076 68.0383 16.9956 68.5273 16.9956C69.281 16.9956 69.8108 17.2196 70.1165 17.6679C70.422 18.1161 70.5749 18.7578 70.5749 19.5933Z" fill="white"/>
12 | <path d="M78.0112 21.1212C78.0112 22.5881 78.3576 23.8716 79.0502 24.9719C79.7429 26.072 80.7005 26.9276 81.923 27.5389C83.1454 28.15 84.5205 28.4557 86.0486 28.4557C87.5765 28.4557 88.9415 28.15 90.1436 27.5389C91.366 26.9276 92.3235 26.072 93.0163 24.9719C93.7294 23.8716 94.0859 22.5881 94.0859 21.1212C94.0859 19.634 93.7294 18.3403 93.0163 17.2401C92.3235 16.1399 91.366 15.2842 90.1436 14.673C88.9415 14.0618 87.5765 13.7562 86.0486 13.7562C84.5205 13.7562 83.1454 14.0618 81.923 14.673C80.7005 15.2842 79.7429 16.1399 79.0502 17.2401C78.3576 18.3403 78.0112 19.634 78.0112 21.1212ZM82.748 21.1212C82.748 20.3878 82.9009 19.7562 83.2064 19.2265C83.512 18.6968 83.9094 18.2893 84.3982 18.0041C84.8872 17.7189 85.4373 17.5763 86.0486 17.5763C86.6394 17.5763 87.1793 17.7189 87.6682 18.0041C88.1776 18.2893 88.5749 18.6968 88.8601 19.2265C89.1657 19.7562 89.3185 20.3878 89.3185 21.1212C89.3185 21.8546 89.1657 22.4862 88.8601 23.0159C88.5749 23.5253 88.1776 23.9225 87.6682 24.2077C87.1793 24.4931 86.6394 24.6357 86.0486 24.6357C85.4373 24.6357 84.8872 24.4931 84.3982 24.2077C83.9094 23.9225 83.512 23.5253 83.2064 23.0159C82.9009 22.4862 82.748 21.8546 82.748 21.1212Z" fill="white"/>
13 | <path d="M101.446 34.8732V14.0924H96.8315V34.8732H101.446ZM112.937 21.1212C112.937 19.471 112.611 18.0958 111.959 16.9956C111.327 15.8751 110.502 15.0296 109.483 14.4591C108.485 13.8886 107.405 13.6034 106.244 13.6034C105.022 13.6034 103.962 13.9192 103.066 14.5508C102.19 15.162 101.517 16.0279 101.049 17.1483C100.58 18.269 100.346 19.5933 100.346 21.1212C100.346 22.6288 100.58 23.9531 101.049 25.0941C101.517 26.2146 102.19 27.0906 103.066 27.7222C103.962 28.3335 105.022 28.639 106.244 28.639C107.405 28.639 108.485 28.3538 109.483 27.7834C110.502 27.2128 111.327 26.3674 111.959 25.2468C112.611 24.1263 112.937 22.7511 112.937 21.1212ZM108.078 21.1212C108.078 21.8546 107.925 22.4761 107.619 22.9853C107.314 23.4947 106.906 23.8818 106.397 24.1467C105.887 24.4115 105.327 24.5439 104.716 24.5439C104.186 24.5439 103.667 24.4218 103.157 24.1773C102.668 23.9124 102.261 23.5253 101.935 23.0159C101.609 22.5066 101.446 21.8751 101.446 21.1212C101.446 20.3674 101.609 19.7359 101.935 19.2265C102.261 18.7171 102.668 18.3403 103.157 18.0958C103.667 17.8309 104.186 17.6985 104.716 17.6985C105.327 17.6985 105.887 17.8309 106.397 18.0958C106.906 18.3606 107.314 18.7477 107.619 19.2571C107.925 19.7663 108.078 20.3878 108.078 21.1212Z" fill="white"/>
14 | <path d="M129.67 14.0924H124.933L120.44 25.3385L122.824 25.3691L118.271 14.0924H113.198L119.279 27.0193L115.856 34.8732H120.501L129.67 14.0924Z" fill="white"/>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/assets/images/client-3.svg:
--------------------------------------------------------------------------------
 1 | <svg width="130" height="40" viewBox="0 0 130 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_3_94)">
 3 | <path d="M35.6852 31.9369V8.08762H40.7276V27.7796H50.952V31.9369H35.6852Z" fill="white"/>
 4 | <path d="M61.6939 32.2863C59.854 32.2863 58.2702 31.9136 56.9427 31.1683C55.6229 30.4152 54.6059 29.3517 53.8917 27.9776C53.1774 26.5957 52.8203 24.9614 52.8203 23.0749C52.8203 21.235 53.1774 19.6202 53.8917 18.2306C54.6059 16.8409 55.6113 15.7579 56.9078 14.9816C58.212 14.2052 59.7415 13.817 61.496 13.817C62.6761 13.817 63.7745 14.0072 64.7916 14.3877C65.8163 14.7603 66.7091 15.3232 67.4699 16.0762C68.2385 16.8293 68.8363 17.7764 69.2633 18.9176C69.6903 20.0511 69.9038 21.3786 69.9038 22.9003V24.2627H54.8001V21.1884H65.2341C65.2341 20.4742 65.0788 19.8414 64.7683 19.2903C64.4578 18.7391 64.0269 18.3083 63.4756 17.9977C62.9322 17.6793 62.2995 17.5202 61.5775 17.5202C60.8245 17.5202 60.1568 17.6949 59.5746 18.0443C59 18.3858 58.5498 18.8478 58.2237 19.43C57.8976 20.0045 57.7307 20.645 57.723 21.3514V24.2744C57.723 25.1595 57.886 25.9241 58.212 26.5685C58.5459 27.2129 59.0156 27.7097 59.6211 28.0591C60.2267 28.4084 60.9447 28.5832 61.7754 28.5832C62.3267 28.5832 62.8312 28.5055 63.2893 28.3502C63.7473 28.1949 64.1394 27.9621 64.4655 27.6515C64.7916 27.3409 65.04 26.9605 65.2108 26.5103L69.799 26.8131C69.5661 27.9155 69.0886 28.8781 68.3667 29.7011C67.6524 30.5162 66.7286 31.1528 65.5951 31.6109C64.4694 32.0612 63.169 32.2863 61.6939 32.2863Z" fill="white"/>
 5 | <path d="M77.5859 32.2746C76.4447 32.2746 75.4276 32.0767 74.5348 31.6807C73.6421 31.277 72.9355 30.6831 72.4154 29.899C71.903 29.1072 71.6469 28.1211 71.6469 26.9412C71.6469 25.9475 71.8292 25.1129 72.1941 24.4375C72.559 23.762 73.0559 23.2186 73.6847 22.8071C74.3136 22.3956 75.0278 22.0852 75.8275 21.8755C76.6349 21.6659 77.481 21.5184 78.3661 21.4329C79.4063 21.3243 80.2448 21.2234 80.8814 21.1302C81.5181 21.0292 81.98 20.8818 82.2671 20.6877C82.5544 20.4937 82.698 20.2064 82.698 19.826V19.7561C82.698 19.0186 82.4652 18.448 81.9994 18.0443C81.5414 17.6406 80.8891 17.4387 80.043 17.4387C79.1502 17.4387 78.4399 17.6367 77.9119 18.0326C77.384 18.4208 77.0346 18.9099 76.8638 19.4999L72.2757 19.1273C72.5086 18.0404 72.9666 17.101 73.6498 16.3091C74.3329 15.5095 75.2141 14.8962 76.2932 14.4692C77.3801 14.0344 78.6378 13.817 80.0663 13.817C81.06 13.817 82.011 13.9335 82.9194 14.1664C83.8355 14.3993 84.6467 14.7603 85.3532 15.2494C86.0674 15.7385 86.6302 16.3673 87.0418 17.1359C87.4532 17.8967 87.6589 18.8089 87.6589 19.8726V31.9369H82.9543V29.4565H82.8146C82.5273 30.0155 82.143 30.5085 81.6617 30.9355C81.1803 31.3546 80.602 31.6847 79.9266 31.9252C79.2512 32.1582 78.4709 32.2746 77.5859 32.2746ZM79.0066 28.8509C79.7364 28.8509 80.3807 28.7073 80.9396 28.42C81.4986 28.1251 81.9372 27.7292 82.2555 27.2322C82.5739 26.7354 82.733 26.1726 82.733 25.5438V23.6455C82.5777 23.7465 82.3642 23.8397 82.0925 23.9251C81.8285 24.0027 81.5297 24.0764 81.1959 24.1463C80.862 24.2084 80.5282 24.2666 80.1944 24.3209C79.8605 24.3675 79.5578 24.4103 79.286 24.4491C78.7037 24.5344 78.1952 24.6703 77.7605 24.8566C77.3257 25.043 76.9881 25.2953 76.7474 25.6136C76.5067 25.9241 76.3863 26.3123 76.3863 26.7782C76.3863 27.4536 76.6309 27.9698 77.1201 28.3269C77.6169 28.6763 78.2457 28.8509 79.0066 28.8509Z" fill="white"/>
 6 | <path d="M90.8519 31.9369V14.05H95.6613V17.1708H95.8476C96.1737 16.0607 96.721 15.2222 97.4896 14.6555C98.2581 14.081 99.1432 13.7938 100.145 13.7938C100.393 13.7938 100.661 13.8093 100.948 13.8403C101.235 13.8714 101.488 13.9141 101.705 13.9684V18.3703C101.472 18.3004 101.15 18.2383 100.739 18.184C100.327 18.1297 99.9506 18.1025 99.6089 18.1025C98.8792 18.1025 98.2271 18.2617 97.6526 18.58C97.0859 18.8905 96.6356 19.3252 96.3018 19.8842C95.9757 20.4432 95.8127 21.0876 95.8127 21.8173V31.9369H90.8519Z" fill="white"/>
 7 | <path d="M108.575 21.596V31.9369H103.614V14.0499H108.342V17.2058H108.552C108.948 16.1655 109.611 15.3426 110.543 14.737C111.475 14.1237 112.604 13.817 113.932 13.817C115.174 13.817 116.257 14.0888 117.18 14.6322C118.104 15.1757 118.822 15.952 119.335 16.9613C119.847 17.9628 120.104 19.1583 120.104 20.548V31.9369H115.143V21.4329C115.151 20.3384 114.871 19.4843 114.304 18.871C113.738 18.2499 112.957 17.9395 111.964 17.9395C111.296 17.9395 110.706 18.083 110.194 18.3703C109.689 18.6575 109.293 19.0768 109.006 19.6279C108.726 20.1715 108.583 20.8274 108.575 21.596Z" fill="white"/>
 8 | <path d="M126.257 32.2397C125.489 32.2397 124.829 31.968 124.278 31.4245C123.734 30.8733 123.463 30.2134 123.463 29.4448C123.463 28.684 123.734 28.0319 124.278 27.4885C124.829 26.9451 125.489 26.6733 126.257 26.6733C127.003 26.6733 127.654 26.9451 128.214 27.4885C128.773 28.0319 129.053 28.684 129.053 29.4448C129.053 29.9572 128.92 30.4269 128.657 30.854C128.4 31.2731 128.063 31.6109 127.644 31.867C127.224 32.1155 126.762 32.2397 126.257 32.2397Z" fill="white"/>
 9 | <path d="M24.8288 5H4.0991C1.83523 5 0 6.83523 0 9.0991V31.3514C0 33.6152 1.83523 35.4505 4.0991 35.4505H24.8288C27.0927 35.4505 28.9279 33.6152 28.9279 31.3514V9.0991C28.9279 6.83523 27.0927 5 24.8288 5Z" fill="#754FFE"/>
10 | <path d="M18.4271 26.7073C17.1862 27.3747 15.9758 27.6934 14.7959 27.6633C13.6185 27.6248 12.5323 27.2602 11.5373 26.5695C10.5395 25.8734 9.69231 24.878 8.99586 23.5834C8.31096 22.3103 7.95161 21.0628 7.91779 19.8412C7.88646 18.6113 8.16411 17.4923 8.75074 16.484C9.33447 15.4704 10.2172 14.6457 11.3991 14.0099C12.1619 13.5996 12.9481 13.3359 13.758 13.2189C14.5702 13.0936 15.3742 13.146 16.1698 13.376C16.9707 13.6031 17.7341 14.0306 18.4596 14.6584C19.1824 15.2809 19.8356 16.1347 20.4194 17.2198C20.6851 17.7138 20.5002 18.3296 20.0062 18.5953L11.7389 23.0428C11.1959 23.3349 10.519 23.1316 10.227 22.5886C9.9349 22.0457 10.1383 21.3687 10.6812 21.0768L15.497 18.4859C16.3506 18.0268 16.6932 16.8875 15.8822 16.3566C15.409 16.0433 14.8923 15.8745 14.332 15.8504C13.7772 15.8233 13.2204 15.96 12.6618 16.2606C12.0655 16.5813 11.6197 17.0081 11.3246 17.541C11.0265 18.0684 10.8769 18.6337 10.8759 19.2369C10.8773 19.8318 11.0241 20.4073 11.3164 20.9635L12.2397 22.6799C12.627 23.3997 13.0909 23.9467 13.6316 24.3208C14.1693 24.6895 14.7482 24.8837 15.3683 24.9033C15.9855 24.9176 16.6111 24.7543 17.245 24.4133C17.6693 24.1849 18.0216 23.9192 18.3019 23.6161C18.5792 23.3076 18.7805 22.9673 18.9059 22.5951C19.131 21.9265 19.4656 21.2243 20.1204 20.9617L20.1876 20.9347C21.0942 20.5709 22.1446 21.1021 22.0316 22.0723C22.0086 22.2702 21.973 22.4675 21.925 22.6644C21.7331 23.4534 21.3432 24.1965 20.7554 24.8936C20.1647 25.5854 19.3887 26.19 18.4271 26.7073Z" fill="white"/>
11 | </g>
12 | <defs>
13 | <clipPath id="clip0_3_94">
14 | <rect width="130" height="30.4505" fill="white" transform="translate(0 5)"/>
15 | </clipPath>
16 | </defs>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/assets/images/client-4.svg:
--------------------------------------------------------------------------------
 1 | <svg width="130" height="40" viewBox="0 0 130 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M51.9155 30.1967C49.8927 30.1967 48.1562 29.7673 46.7059 28.9086C45.2556 28.0308 44.1393 26.8191 43.3569 25.2734C42.5745 23.7086 42.1833 21.9053 42.1833 19.8635C42.1833 17.8216 42.5745 16.0183 43.3569 14.4535C44.1393 12.8888 45.2556 11.6675 46.7059 10.7897C48.1562 9.91189 49.8927 9.47299 51.9155 9.47299C54.3199 9.47299 56.2854 10.0741 57.812 11.2763C59.3577 12.4594 60.3213 14.1291 60.703 16.2855H56.667C56.4189 15.1978 55.8846 14.3486 55.0641 13.7379C54.2626 13.1082 53.194 12.7934 51.8582 12.7934C50.0072 12.7934 48.5569 13.4231 47.5074 14.6825C46.4578 15.942 45.9331 17.669 45.9331 19.8635C45.9331 22.058 46.4578 23.785 47.5074 25.0444C48.5569 26.2848 50.0072 26.905 51.8582 26.905C53.194 26.905 54.2626 26.6187 55.0641 26.0462C55.8846 25.4547 56.4189 24.6437 56.667 23.6132H60.703C60.3213 25.6741 59.3577 27.2866 57.812 28.4506C56.2854 29.6147 54.3199 30.1967 51.9155 30.1967Z" fill="white"/>
 3 | <path d="M63.8604 29.8532V15.6557H67.1235L67.467 18.3178C67.9823 17.4018 68.6788 16.6767 69.5566 16.1423C70.4534 15.589 71.503 15.3123 72.7052 15.3123V19.1765H71.6747C70.8733 19.1765 70.1577 19.3005 69.5279 19.5486C68.8982 19.7967 68.4021 20.2261 68.0395 20.8367C67.696 21.4473 67.5243 22.2965 67.5243 23.3842V29.8532H63.8604Z" fill="white"/>
 4 | <path d="M77.1843 13.4517C76.5164 13.4517 75.963 13.2513 75.5241 12.8506C75.1043 12.4499 74.8944 11.9442 74.8944 11.3335C74.8944 10.7229 75.1043 10.2267 75.5241 9.84509C75.963 9.44435 76.5164 9.24399 77.1843 9.24399C77.8522 9.24399 78.3961 9.44435 78.8159 9.84509C79.2548 10.2267 79.4742 10.7229 79.4742 11.3335C79.4742 11.9442 79.2548 12.4499 78.8159 12.8506C78.3961 13.2513 77.8522 13.4517 77.1843 13.4517ZM75.3524 29.8532V15.6557H79.0162V29.8532H75.3524Z" fill="white"/>
 5 | <path d="M82.8404 29.8532V9.24399H86.5042V21.4092L91.542 15.6557H95.8929L90.0822 22.1248L96.8375 29.8532H92.2576L86.5042 22.7259V29.8532H82.8404Z" fill="white"/>
 6 | <path d="M104.748 30.1967C103.374 30.1967 102.133 29.8818 101.026 29.2521C99.9388 28.6224 99.0705 27.7541 98.4217 26.6473C97.792 25.5215 97.4771 24.2239 97.4771 22.7545C97.4771 21.2851 97.8015 19.9971 98.4503 18.8903C99.0991 17.7644 99.9674 16.8866 101.055 16.2568C102.162 15.6271 103.402 15.3123 104.776 15.3123C106.131 15.3123 107.352 15.6271 108.44 16.2568C109.547 16.8866 110.415 17.7644 111.045 18.8903C111.694 19.9971 112.018 21.2851 112.018 22.7545C112.018 24.2239 111.694 25.5215 111.045 26.6473C110.415 27.7541 109.547 28.6224 108.44 29.2521C107.333 29.8818 106.102 30.1967 104.748 30.1967ZM104.748 27.0194C105.702 27.0194 106.532 26.6664 107.238 25.9604C107.944 25.2352 108.297 24.1666 108.297 22.7545C108.297 21.3424 107.944 20.2833 107.238 19.5772C106.532 18.8521 105.711 18.4895 104.776 18.4895C103.803 18.4895 102.963 18.8521 102.257 19.5772C101.57 20.2833 101.227 21.3424 101.227 22.7545C101.227 24.1666 101.57 25.2352 102.257 25.9604C102.963 26.6664 103.793 27.0194 104.748 27.0194Z" fill="white"/>
 7 | <path d="M115.294 29.8532V15.6557H118.528L118.815 18.0602C119.254 17.2205 119.883 16.5526 120.703 16.0565C121.543 15.5603 122.526 15.3123 123.651 15.3123C125.407 15.3123 126.771 15.8657 127.745 16.9724C128.718 18.0793 129.204 19.7013 129.204 21.8385V29.8532H125.541V22.182C125.541 20.9607 125.293 20.0257 124.796 19.3769C124.3 18.7281 123.527 18.4037 122.478 18.4037C121.447 18.4037 120.598 18.7662 119.93 19.4914C119.282 20.2165 118.958 21.2279 118.958 22.5255V29.8532H115.294Z" fill="white"/>
 8 | <path d="M22.5677 12.8926V9.57798C22.5677 8.2606 21.4996 7.19266 20.1823 7.19266H3.57801C2.26063 7.19266 1.19269 8.2606 1.19269 9.57798V26.1823C1.19269 27.4996 2.26063 28.5676 3.57801 28.5676H7.42705" stroke="white" stroke-width="2"/>
 9 | <path d="M26.2388 13.729H9.63443C8.97574 13.729 8.44177 14.263 8.44177 14.9217V31.526C8.44177 32.1847 8.97574 32.7187 9.63443 32.7187H26.2388C26.8975 32.7187 27.4314 32.1847 27.4314 31.526V14.9217C27.4314 14.263 26.8975 13.729 26.2388 13.729Z" stroke="white" stroke-width="2"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/assets/images/client-5.svg:
--------------------------------------------------------------------------------
 1 | <svg width="130" height="40" viewBox="0 0 130 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_3_119)">
 3 | <path d="M21.1583 6.72556L12.8449 16.4771L9.9478 19.8751L5.05909 25.6116V14.1395L8.68947 18.3999L11.5857 15.0011L4.53235 6.72556L0.648926 8.15516V31.596L4.53235 33.0256L12.8457 23.2731L15.7419 19.8743L20.6315 14.1387V25.6108L17.0003 21.3512L14.1041 24.7492L21.1591 33.0256L25.0408 31.5951V8.15516L21.1583 6.72556Z" fill="#FCFCFC"/>
 4 | <path d="M50.7005 19.6978C50.7005 21.4339 50.401 23.0494 49.8019 24.5427C49.2029 26.0368 48.3603 27.3365 47.2724 28.4399C46.1845 29.5441 44.8745 30.41 43.3416 31.0357C41.8096 31.6623 40.1089 31.9756 38.2412 31.9756C36.3735 31.9756 34.671 31.6623 33.133 31.0357C31.5941 30.41 30.2789 29.545 29.185 28.4399C28.0919 27.3356 27.2467 26.0368 26.6468 24.5427C26.0487 23.0485 25.7491 21.4339 25.7491 19.6978C25.7491 17.9618 26.0487 16.3472 26.6468 14.853C27.2459 13.3597 28.0919 12.0627 29.185 10.9636C30.2789 9.86535 31.5941 9.00208 33.133 8.37636C34.671 7.74978 36.3735 7.43649 38.2412 7.43649C40.1089 7.43649 41.8096 7.75237 43.3416 8.38497C44.8745 9.01672 46.1845 9.88171 47.2724 10.9808C48.3603 12.0799 49.2029 13.3761 49.8019 14.8703C50.401 16.3644 50.7005 17.973 50.7005 19.6978ZM44.9984 19.6978C44.9984 18.5118 44.8444 17.4428 44.5371 16.4926C44.229 15.5424 43.7866 14.7377 43.2099 14.0784C42.6333 13.4191 41.9275 12.913 41.0926 12.5619C40.2569 12.2107 39.3076 12.0351 38.2412 12.0351C37.1653 12.0351 36.2056 12.2107 35.3647 12.5619C34.5247 12.9139 33.8164 13.4191 33.2397 14.0784C32.663 14.7377 32.2198 15.5424 31.9125 16.4926C31.6053 17.4428 31.4512 18.5118 31.4512 19.6978C31.4512 20.8959 31.6044 21.9701 31.9125 22.9203C32.2198 23.8705 32.663 24.6752 33.2397 25.3345C33.8155 25.9938 34.5247 26.4964 35.3647 26.8424C36.2056 27.1884 37.1644 27.3614 38.2412 27.3614C39.3076 27.3614 40.2569 27.1884 41.0926 26.8424C41.9275 26.4956 42.6333 25.9929 43.2099 25.3345C43.7866 24.6752 44.229 23.8705 44.5371 22.9203C44.8444 21.9701 44.9984 20.8959 44.9984 19.6978Z" fill="#FCFCFC"/>
 5 | <path d="M66.2824 22.0363C66.4855 22.4873 66.6809 22.9495 66.8677 23.422C67.0553 22.9375 67.2515 22.4684 67.4607 22.0114C67.669 21.5552 67.8833 21.1128 68.1036 20.6833L74.2679 8.54161C74.3772 8.33246 74.4899 8.17065 74.6061 8.05532C74.7215 7.93999 74.8506 7.85478 74.9926 7.7997C75.1354 7.74461 75.2973 7.71707 75.4789 7.71707C75.6596 7.71707 75.8722 7.71707 76.1132 7.71707H80.365V31.7122H75.4539V17.9016C75.4539 17.232 75.4875 16.5056 75.5529 15.7258L69.1907 28.0706C68.9936 28.4553 68.7268 28.7463 68.392 28.9442C68.0563 29.1413 67.675 29.2403 67.2464 29.2403H66.4881C66.0586 29.2403 65.6773 29.1413 65.3425 28.9442C65.0069 28.7471 64.7409 28.4553 64.543 28.0706L58.148 15.7103C58.1919 16.095 58.2247 16.4763 58.247 16.8559C58.2694 17.2354 58.2797 17.584 58.2797 17.9024V31.713H53.3687V7.71707H57.6204C57.8623 7.71707 58.0732 7.71707 58.2548 7.71707C58.4355 7.71707 58.5982 7.74461 58.7411 7.7997C58.8839 7.85478 59.0122 7.93999 59.1284 8.05532C59.2437 8.17065 59.3565 8.33332 59.4666 8.54161L65.6464 20.7333C65.8676 21.1515 66.0784 21.5862 66.2824 22.0363Z" fill="#FCFCFC"/>
 6 | <path d="M84.3198 31.7122V7.70071H93.1522C94.8125 7.70071 96.224 7.85478 97.3885 8.16204C98.553 8.46931 99.5032 8.90396 100.239 9.46426C100.975 10.0246 101.511 10.7062 101.847 11.5084C102.182 12.3106 102.349 13.2057 102.349 14.1946C102.349 14.7325 102.272 15.2524 102.118 15.7524C101.964 16.2525 101.723 16.7216 101.393 17.1614C101.064 17.6003 100.64 17.9988 100.124 18.356C99.6074 18.7132 98.9877 19.0231 98.2621 19.2873C99.844 19.672 101.015 20.2952 101.773 21.1576C102.53 22.02 102.909 23.1268 102.909 24.4781C102.909 25.4997 102.712 26.4499 102.316 27.3296C101.921 28.2083 101.341 28.9752 100.576 29.6285C99.8131 30.2826 98.8715 30.793 97.7509 31.1613C96.6302 31.5297 95.3504 31.7139 93.9105 31.7139H84.3198V31.7122ZM89.8902 17.8026H92.7907C93.4061 17.8026 93.9612 17.7587 94.4553 17.6709C94.9493 17.5831 95.3702 17.4291 95.7162 17.2087C96.0613 16.9893 96.3256 16.688 96.5063 16.3024C96.6879 15.9177 96.7783 15.4349 96.7783 14.8522C96.7783 14.2815 96.7068 13.8056 96.5631 13.4269C96.4202 13.0473 96.2016 12.7426 95.9047 12.512C95.6077 12.2813 95.2316 12.1169 94.7755 12.0179C94.3193 11.9181 93.7779 11.869 93.1513 11.869H89.8893V17.8026H89.8902ZM89.8902 21.5277V27.5094H93.8123C94.5474 27.5094 95.1499 27.4173 95.6163 27.2297C96.0828 27.0429 96.4486 26.8011 96.712 26.505C96.9762 26.2081 97.1578 25.8733 97.256 25.4997C97.3549 25.1262 97.4031 24.7466 97.4031 24.3628C97.4031 23.9238 97.3455 23.5279 97.231 23.1759C97.1157 22.8247 96.9168 22.5286 96.6371 22.2859C96.3583 22.0441 95.9873 21.8573 95.5251 21.7256C95.0629 21.5939 94.4811 21.5277 93.7779 21.5277H89.8902Z" fill="#FCFCFC"/>
 7 | <path d="M129.64 19.6978C129.64 21.4339 129.341 23.0494 128.742 24.5427C128.143 26.0368 127.299 27.3365 126.212 28.4399C125.125 29.5441 123.814 30.41 122.282 31.0357C120.75 31.6623 119.049 31.9756 117.182 31.9756C115.313 31.9756 113.612 31.6623 112.074 31.0357C110.535 30.41 109.219 29.545 108.126 28.4399C107.032 27.3356 106.186 26.0368 105.587 24.5427C104.989 23.0485 104.69 21.4339 104.69 19.6978C104.69 17.9618 104.989 16.3472 105.587 14.853C106.186 13.3597 107.032 12.0627 108.126 10.9636C109.219 9.86535 110.535 9.00208 112.074 8.37636C113.612 7.74978 115.313 7.43649 117.182 7.43649C119.049 7.43649 120.75 7.75237 122.282 8.38497C123.814 9.01758 125.126 9.88171 126.212 10.9808C127.3 12.0799 128.143 13.3761 128.742 14.8703C129.341 16.3635 129.64 17.973 129.64 19.6978ZM123.937 19.6978C123.937 18.5118 123.784 17.4428 123.477 16.4926C123.17 15.5424 122.727 14.7377 122.15 14.0784C121.573 13.4191 120.867 12.913 120.032 12.5619C119.197 12.2107 118.248 12.0351 117.182 12.0351C116.105 12.0351 115.146 12.2107 114.305 12.5619C113.464 12.9139 112.756 13.4191 112.18 14.0784C111.604 14.7377 111.16 15.5424 110.853 16.4926C110.546 17.4428 110.393 18.5118 110.393 19.6978C110.393 20.8959 110.546 21.9701 110.853 22.9203C111.16 23.8705 111.604 24.6752 112.18 25.3345C112.756 25.9938 113.465 26.4964 114.305 26.8424C115.146 27.1884 116.104 27.3614 117.182 27.3614C118.248 27.3614 119.197 27.1884 120.032 26.8424C120.867 26.4956 121.574 25.9929 122.15 25.3345C122.727 24.6752 123.17 23.8705 123.477 22.9203C123.784 21.9701 123.937 20.8959 123.937 19.6978Z" fill="#FCFCFC"/>
 8 | </g>
 9 | <defs>
10 | <clipPath id="clip0_3_119">
11 | <rect width="130" height="27.6823" fill="white" transform="translate(0 6)"/>
12 | </clipPath>
13 | </defs>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/assets/images/contact-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/contact-bg.png


--------------------------------------------------------------------------------
/assets/images/hero-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/hero-banner.png


--------------------------------------------------------------------------------
/assets/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="151" height="28" viewBox="0 0 151 28" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_1_2)">
 3 | <path d="M37.66 21.924H50.98L50.584 17.28H38.092L37.66 21.924ZM44.248 10.836L47.812 19.008L47.596 20.556L50.62 26.784H57.532L44.248 0L31 26.784H37.876L41.008 20.304L40.72 18.972L44.248 10.836Z" fill="#373737"/>
 4 | <path d="M78.6407 1.584V15.768L61.2527 0.323999V26.784H67.0847V12.6L84.5087 28.044V1.584H78.6407Z" fill="#373737"/>
 5 | <path d="M108.303 1.584V15.768L90.9147 0.323999V26.784H96.7467V12.6L114.171 28.044V1.584H108.303Z" fill="#373737"/>
 6 | <path d="M120.577 1.584V26.784H126.769V1.584H120.577Z" fill="#373737"/>
 7 | <path d="M137.22 26.784H149.928V21.78H137.22V26.784ZM137.22 6.588H149.928V1.584H137.22V6.588ZM137.22 15.984H149.208V11.088H137.22V15.984ZM133.188 1.584V26.784H139.02V1.584H133.188Z" fill="#373737"/>
 8 | <path d="M14.14 19.635C14.14 19.789 14.259 19.915 14.4025 19.915H20.8775C21.021 19.915 21.14 19.789 21.14 19.635V17.955C21.14 17.801 21.021 17.675 20.8775 17.675H14.4025C14.259 17.675 14.14 17.801 14.14 17.955V19.635ZM7.3185 19.8485L14.0385 14.2135C14.1715 14.1015 14.1715 13.895 14.0385 13.783L7.3185 8.1515C7.27793 8.117 7.22832 8.09487 7.17555 8.08773C7.12278 8.08059 7.06906 8.08875 7.02079 8.11123C6.97251 8.13371 6.9317 8.16957 6.9032 8.21455C6.8747 8.25953 6.85971 8.31175 6.86 8.365V10.5595C6.86 10.6435 6.895 10.7205 6.9615 10.773L10.8045 14L6.9615 17.227C6.93022 17.2532 6.90495 17.2858 6.88743 17.3227C6.86992 17.3595 6.86056 17.3997 6.86 17.4405V19.635C6.86 19.873 7.1365 20.0025 7.3185 19.8485ZM26.88 0H1.12C0.5005 0 0 0.5005 0 1.12V26.88C0 27.4995 0.5005 28 1.12 28H26.88C27.4995 28 28 27.4995 28 26.88V1.12C28 0.5005 27.4995 0 26.88 0ZM25.48 25.48H2.52V2.52H25.48V25.48Z" fill="#FF651C"/>
 9 | </g>
10 | <defs>
11 | <clipPath id="clip0_1_2">
12 | <rect width="151" height="28" fill="white"/>
13 | </clipPath>
14 | </defs>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/assets/images/portfolio-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/portfolio-1.jpg


--------------------------------------------------------------------------------
/assets/images/portfolio-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/portfolio-2.jpg


--------------------------------------------------------------------------------
/assets/images/portfolio-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/portfolio-3.jpg


--------------------------------------------------------------------------------
/assets/images/portfolio-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/portfolio-4.jpg


--------------------------------------------------------------------------------
/assets/images/quote-left.svg:
--------------------------------------------------------------------------------
1 | <svg width="83" height="60" viewBox="0 0 83 60" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M0 22.2321C0 9.94888 9.94888 0 22.2321 0H23.7143C26.9935 0 29.6429 2.64933 29.6429 5.92857C29.6429 9.20781 26.9935 11.8571 23.7143 11.8571H22.2321C16.5074 11.8571 11.8571 16.5074 11.8571 22.2321V23.7143H23.7143C30.2542 23.7143 35.5714 29.0315 35.5714 35.5714V47.4286C35.5714 53.9685 30.2542 59.2857 23.7143 59.2857H11.8571C5.31719 59.2857 0 53.9685 0 47.4286V41.5V35.5714V22.2321ZM47.4286 22.2321C47.4286 9.94888 57.3775 0 69.6607 0H71.1429C74.4221 0 77.0714 2.64933 77.0714 5.92857C77.0714 9.20781 74.4221 11.8571 71.1429 11.8571H69.6607C63.9359 11.8571 59.2857 16.5074 59.2857 22.2321V23.7143H71.1429C77.6828 23.7143 83 29.0315 83 35.5714V47.4286C83 53.9685 77.6828 59.2857 71.1429 59.2857H59.2857C52.7458 59.2857 47.4286 53.9685 47.4286 47.4286V41.5V35.5714V22.2321Z" fill="#373737" fill-opacity="0.1"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/images/service-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/service-bg.png


--------------------------------------------------------------------------------
/assets/images/skill-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/skill-banner.png


--------------------------------------------------------------------------------
/assets/images/testi-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/testi-1.jpg


--------------------------------------------------------------------------------
/assets/images/testi-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/testi-2.jpg


--------------------------------------------------------------------------------
/assets/images/testi-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/testi-3.jpg


--------------------------------------------------------------------------------
/assets/images/testi-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/assets/images/testi-4.jpg


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | 
 4 | 
 5 | /**
 6 |  * Add eventListener on multiple elements
 7 |  */
 8 | 
 9 | const addEventOnElements = function (elements, eventType, callback) {
10 |   for (let i = 0, len = elements.length; i < len; i++) {
11 |     elements[i].addEventListener(eventType, callback);
12 |   }
13 | }
14 | 
15 | 
16 | 
17 | /**
18 |  * PRELOADER
19 |  */
20 | 
21 | const preloader = document.querySelector("[data-preloader]");
22 | 
23 | window.addEventListener("load", function () {
24 |   preloader.classList.add("loaded");
25 |   document.body.classList.add("loaded");
26 | });
27 | 
28 | 
29 | 
30 | /**
31 |  * MOBILE NAV TOGGLE
32 |  */
33 | 
34 | const navbar = document.querySelector("[data-navbar]");
35 | const navToggler = document.querySelector("[data-nav-toggler]");
36 | 
37 | const toggleNavbar = function () { navbar.classList.toggle("active"); }
38 | 
39 | navToggler.addEventListener("click", toggleNavbar);
40 | 
41 | 
42 | 
43 | /**
44 |  * HEADER
45 |  * 
46 |  * active header when window scrolled to 50px
47 |  */
48 | 
49 | const header = document.querySelector("[data-header]");
50 | 
51 | const activeHeader = function () {
52 |   window.scrollY > 50 ? header.classList.add("active")
53 |     : header.classList.remove("active");
54 | }
55 | 
56 | window.addEventListener("scroll", activeHeader);


--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 
  9 |   <!-- 
 10 |     - primary meta tags
 11 |   -->
 12 |   <title>Annie | Contact</title>
 13 |   <meta name="title" content="Annie | Contact">
 14 |   <meta name="description" content="This is a personal portfolio html template made by codewithsadee">
 15 | 
 16 |   <!-- 
 17 |     - favicon
 18 |   -->
 19 |   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
 20 | 
 21 |   <!-- 
 22 |     - google font link
 23 |   -->
 24 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 25 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 26 |   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap" rel="stylesheet">
 27 | 
 28 |   <!-- 
 29 |     - custom css link
 30 |   -->
 31 |   <link rel="stylesheet" href="./assets/css/require.css">
 32 |   <link rel="stylesheet" href="./assets/css/pages/contact.css">
 33 | 
 34 | </head>
 35 | 
 36 | <body>
 37 | 
 38 |   <!-- 
 39 |     - #PRELOADER
 40 |   -->
 41 | 
 42 |   <div class="preloader" data-preloader>
 43 |     <div class="preloader-circle"></div>
 44 |   </div>
 45 | 
 46 | 
 47 | 
 48 | 
 49 | 
 50 |   <!-- 
 51 |     - #HEADER
 52 |   -->
 53 | 
 54 |   <header class="header" data-header>
 55 |     <div class="container">
 56 | 
 57 |       <a href="./index.html" class="logo">
 58 |         <img src="./assets/images/logo.svg" width="151" height="28" alt="Annie home">
 59 |       </a>
 60 | 
 61 |       <nav class="navbar" data-navbar>
 62 |         <ul class="navbar-list">
 63 | 
 64 |           <li class="navbar-item">
 65 |             <a href="./index.html" class="label-lg navbar-link has-after">Home</a>
 66 |           </li>
 67 | 
 68 |           <li class="navbar-item">
 69 |             <a href="./service.html" class="label-lg navbar-link has-after">Services</a>
 70 |           </li>
 71 | 
 72 |           <li class="navbar-item">
 73 |             <a href="./portfolio.html" class="label-lg navbar-link has-after">Portfolio</a>
 74 |           </li>
 75 | 
 76 |           <li class="navbar-item">
 77 |             <a href="#" class="label-lg navbar-link has-after active">Contact</a>
 78 |           </li>
 79 | 
 80 |         </ul>
 81 |       </nav>
 82 | 
 83 |       <a href="./contact.html" class="btn btn-primary">Contact Now</a>
 84 | 
 85 |       <button class="nav-toggle-btn" aria-label="menu" data-nav-toggler>
 86 |         <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
 87 |       </button>
 88 | 
 89 |     </div>
 90 |   </header>
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 |   <main>
 97 |     <article>
 98 | 
 99 |       <!-- 
100 |         - #CONTACT
101 |       -->
102 | 
103 |       <section class="section contact has-bg-image" aria-labelledby="contact-label"
104 |         style="background-image: url('./assets/images/contact-bg.png')">
105 |         <div class="container">
106 | 
107 |           <form action="" class="contact-form">
108 | 
109 |             <h2 class="headline-sm" id="contact-label">Get in touch</h2>
110 | 
111 |             <p class="contact-text body-md">
112 |               Our friendly team would love to hear from you.
113 |             </p>
114 | 
115 |             <div class="wrapper">
116 | 
117 |               <div>
118 |                 <label for="name" class="label">First name</label>
119 | 
120 |                 <input type="text" name="name" id="name" placeholder="Name *" required class="input-field">
121 |               </div>
122 | 
123 |               <div>
124 |                 <label for="email" class="label">Your Email </label>
125 | 
126 |                 <input type="email" name="email" id="email" placeholder="Email *" required class="input-field">
127 |               </div>
128 | 
129 |             </div>
130 | 
131 |             <label for="subject" class="label">Subject</label>
132 |             <input type="text" name="subject" id="subject" placeholder="Subject *" class="input-field">
133 | 
134 |             <label for="message" class="label">Your message </label>
135 |             <textarea name="message" id="message" placeholder="Your message *" required class="input-field"></textarea>
136 | 
137 |             <a href="#" class="btn btn-tertiary">Send Message</a>
138 | 
139 |           </form>
140 | 
141 |           <div class="contact-content">
142 | 
143 |             <ul class="contact-list">
144 | 
145 |               <li class="contact-item">
146 | 
147 |                 <div class="item-icon" style="background-color: hsl(177, 39%, 72%)">
148 |                   <ion-icon name="call" aria-hidden="true"></ion-icon>
149 |                 </div>
150 | 
151 |                 <div>
152 |                   <p class="label-lg">Phone</p>
153 | 
154 |                   <a href="tel:+011236548096" class="body-lg">+01 123 654 8096</a>
155 |                 </div>
156 | 
157 |               </li>
158 | 
159 |               <li class="contact-item">
160 | 
161 |                 <div class="item-icon" style="background-color: hsl(41, 99%, 64%)">
162 |                   <ion-icon name="mail" aria-hidden="true"></ion-icon>
163 |                 </div>
164 | 
165 |                 <div>
166 |                   <p class="label-lg">Mail</p>
167 | 
168 |                   <a href="tel:info@domainname.com" class="body-lg">info@domainname.com</a>
169 |                 </div>
170 | 
171 |               </li>
172 | 
173 |               <li class="contact-item">
174 | 
175 |                 <div class="item-icon" style="background-color: hsl(19, 97%, 85%)">
176 |                   <ion-icon name="location" aria-hidden="true"></ion-icon>
177 |                 </div>
178 | 
179 |                 <div>
180 |                   <p class="label-lg">Visit My Studio</p>
181 | 
182 |                   <address class="body-lg">
183 |                     Warnwe Park Streetperrine,
184 |                     FL 33157 New York City
185 |                   </address>
186 |                 </div>
187 | 
188 |               </li>
189 | 
190 |             </ul>
191 | 
192 |           </div>
193 | 
194 |         </div>
195 |       </section>
196 | 
197 |     </article>
198 |   </main>
199 | 
200 | 
201 | 
202 | 
203 | 
204 |   <!-- 
205 |     - #FOOTER
206 |   -->
207 | 
208 |   <footer class="footer">
209 |     <div class="container">
210 | 
211 |       <ul class="social-list">
212 | 
213 |         <li>
214 |           <a href="#" class="social-link">
215 |             <ion-icon name="logo-facebook"></ion-icon>
216 |           </a>
217 |         </li>
218 | 
219 |         <li>
220 |           <a href="#" class="social-link">
221 |             <ion-icon name="logo-twitter"></ion-icon>
222 |           </a>
223 |         </li>
224 | 
225 |         <li>
226 |           <a href="#" class="social-link">
227 |             <ion-icon name="logo-instagram"></ion-icon>
228 |           </a>
229 |         </li>
230 | 
231 |         <li>
232 |           <a href="#" class="social-link">
233 |             <ion-icon name="logo-linkedin"></ion-icon>
234 |           </a>
235 |         </li>
236 | 
237 |         <li>
238 |           <a href="#" class="social-link">
239 |             <ion-icon name="logo-pinterest"></ion-icon>
240 |           </a>
241 |         </li>
242 | 
243 |       </ul>
244 | 
245 |       <p class="text-center">&copy; 2022 copyright all right reserved</p>
246 | 
247 |     </div>
248 |   </footer>
249 | 
250 | 
251 | 
252 | 
253 | 
254 |   <!-- 
255 |     - custom js link
256 |   -->
257 |   <script src="./assets/js/script.js"></script>
258 | 
259 |   <!-- 
260 |     - ionicon
261 |   -->
262 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
263 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
264 | 
265 | </body>
266 | 
267 | </html>


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M14.14 19.635C14.14 19.789 14.259 19.915 14.4025 19.915H20.8775C21.021 19.915 21.14 19.789 21.14 19.635V17.955C21.14 17.801 21.021 17.675 20.8775 17.675H14.4025C14.259 17.675 14.14 17.801 14.14 17.955V19.635ZM7.3185 19.8485L14.0385 14.2135C14.1715 14.1015 14.1715 13.895 14.0385 13.783L7.3185 8.1515C7.27793 8.117 7.22832 8.09487 7.17555 8.08773C7.12278 8.08059 7.06906 8.08875 7.02079 8.11123C6.97251 8.13371 6.9317 8.16957 6.9032 8.21455C6.8747 8.25953 6.85971 8.31175 6.86 8.365V10.5595C6.86 10.6435 6.895 10.7205 6.9615 10.773L10.8045 14L6.9615 17.227C6.93022 17.2532 6.90495 17.2858 6.88743 17.3227C6.86992 17.3595 6.86056 17.3997 6.86 17.4405V19.635C6.86 19.873 7.1365 20.0025 7.3185 19.8485ZM26.88 0H1.12C0.5005 0 0 0.5005 0 1.12V26.88C0 27.4995 0.5005 28 1.12 28H26.88C27.4995 28 28 27.4995 28 26.88V1.12C28 0.5005 27.4995 0 26.88 0ZM25.48 25.48H2.52V2.52H25.48V25.48Z" fill="#FF651C"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 
  9 |   <!-- 
 10 |     - primary meta tags
 11 |   -->
 12 |   <title>Annie - Web Developer Based on Los Angeles</title>
 13 |   <meta name="title" content="Annie - Web Developer Based on Los Angeles">
 14 |   <meta name="description" content="This is a personal portfolio html template made by codewithsadee">
 15 | 
 16 |   <!-- 
 17 |     - favicon
 18 |   -->
 19 |   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
 20 | 
 21 |   <!-- 
 22 |     - google font link
 23 |   -->
 24 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 25 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 26 |   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap" rel="stylesheet">
 27 | 
 28 |   <!-- 
 29 |     - custom css link
 30 |   -->
 31 |   <link rel="stylesheet" href="./assets/css/require.css">
 32 |   <link rel="stylesheet" href="./assets/css/main.css">
 33 | 
 34 |   <!-- 
 35 |     - preload images
 36 |   -->
 37 |   <link rel="preload" href="./assets/images/hero-banner.png">
 38 | 
 39 | </head>
 40 | 
 41 | <body>
 42 | 
 43 |   <!-- 
 44 |     - #PRELOADER
 45 |   -->
 46 | 
 47 |   <div class="preloader" data-preloader>
 48 |     <div class="preloader-circle"></div>
 49 |   </div>
 50 | 
 51 | 
 52 | 
 53 | 
 54 | 
 55 |   <!-- 
 56 |     - #HEADER
 57 |   -->
 58 | 
 59 |   <header class="header" data-header>
 60 |     <div class="container">
 61 | 
 62 |       <a href="#" class="logo">
 63 |         <img src="./assets/images/logo.svg" width="151" height="28" alt="Annie home">
 64 |       </a>
 65 | 
 66 |       <nav class="navbar" data-navbar>
 67 |         <ul class="navbar-list">
 68 | 
 69 |           <li class="navbar-item">
 70 |             <a href="#" class="label-lg navbar-link has-after active">Home</a>
 71 |           </li>
 72 | 
 73 |           <li class="navbar-item">
 74 |             <a href="./service.html" class="label-lg navbar-link has-after">Services</a>
 75 |           </li>
 76 | 
 77 |           <li class="navbar-item">
 78 |             <a href="./portfolio.html" class="label-lg navbar-link has-after">Portfolio</a>
 79 |           </li>
 80 | 
 81 |           <li class="navbar-item">
 82 |             <a href="./contact.html" class="label-lg navbar-link has-after">Contact</a>
 83 |           </li>
 84 | 
 85 |         </ul>
 86 |       </nav>
 87 | 
 88 |       <a href="./contact.html" class="btn btn-primary">Contact Now</a>
 89 | 
 90 |       <button class="nav-toggle-btn" aria-label="menu" data-nav-toggler>
 91 |         <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
 92 |       </button>
 93 | 
 94 |     </div>
 95 |   </header>
 96 | 
 97 | 
 98 | 
 99 | 
100 | 
101 |   <main>
102 |     <article>
103 | 
104 |       <!-- 
105 |         - #HERO
106 |       -->
107 | 
108 |       <section class="section hero" aria-label="home">
109 |         <div class="container">
110 | 
111 |           <div class="hero-content">
112 | 
113 |             <p class="hero-subtitle">👋, My name is Annie</p>
114 | 
115 |             <h1 class="headline-lg">I'm a Developer</h1>
116 | 
117 |             <p class="hero-text body-md">
118 |               Based in Los Angeles, California.
119 |             </p>
120 | 
121 |             <a href="#" class="btn btn-primary">Let's Start</a>
122 | 
123 |           </div>
124 | 
125 |           <figure class="hero-banner">
126 |             <img src="./assets/images/hero-banner.png" width="680" height="645"
127 |               alt="Annie, the blonde, dressed in a green hoodie with a smile on her face" class="w-100">
128 |           </figure>
129 | 
130 |         </div>
131 |       </section>
132 | 
133 | 
134 | 
135 | 
136 | 
137 |       <!-- 
138 |         - #CLIENT
139 |       -->
140 | 
141 |       <section class="client" aria-label="Trusted client">
142 |         <div class="container">
143 | 
144 |           <ul class="slider">
145 | 
146 |             <li class="slider-item">
147 |               <img src="./assets/images/client-1.svg" width="130" height="40" alt="clients" class="w-100">
148 |             </li>
149 | 
150 |             <li class="slider-item">
151 |               <img src="./assets/images/client-2.svg" width="130" height="40" alt="clients" class="w-100">
152 |             </li>
153 | 
154 |             <li class="slider-item">
155 |               <img src="./assets/images/client-3.svg" width="130" height="40" alt="clients" class="w-100">
156 |             </li>
157 | 
158 |             <li class="slider-item">
159 |               <img src="./assets/images/client-4.svg" width="130" height="40" alt="clients" class="w-100">
160 |             </li>
161 | 
162 |             <li class="slider-item">
163 |               <img src="./assets/images/client-5.svg" width="130" height="40" alt="clients" class="w-100">
164 |             </li>
165 | 
166 |           </ul>
167 | 
168 |         </div>
169 |       </section>
170 | 
171 | 
172 | 
173 | 
174 | 
175 |       <!-- 
176 |         - #ABOUT
177 |       -->
178 | 
179 |       <section class="section about" aria-label="about me">
180 |         <div class="container">
181 | 
182 |           <figure class="about-banner">
183 |             <img src="./assets/images/about-banner.png" width="580" height="554" loading="lazy"
184 |               alt="Annie, the blonde, dressed in a black tops with a smile on her face" class="w-100">
185 |           </figure>
186 | 
187 |           <div class="about-content">
188 | 
189 |             <h2 class="title-lg">I'm a Freelancer Front-end Developer with over 3 years of experience.</h2>
190 | 
191 |             <p class="body-md section-text">
192 |               I'm a Freelancer Front-end Developer with over 3 years of experience. I'm from San Francisco. I code and
193 |               create web elements for amazing people around the world. I like work with new people. New people new
194 |               Experiences.
195 |             </p>
196 | 
197 |             <ul class="about-list">
198 | 
199 |               <li>
200 |                 <p class="list-text">
201 |                   <strong class="strong title-md">285+</strong> Projet Completed
202 |                 </p>
203 |               </li>
204 | 
205 |               <li>
206 |                 <p class="list-text">
207 |                   <strong class="strong title-md">190+</strong> Happy Clients
208 |                 </p>
209 |               </li>
210 | 
211 |             </ul>
212 | 
213 |             <div class="wrapper">
214 |               <a href="./contact.html" class="btn btn-primary">Contact Me</a>
215 | 
216 |               <a href="./portfolio.html" class="btn btn-secondary">Portfolio</a>
217 |             </div>
218 | 
219 |           </div>
220 | 
221 |         </div>
222 |       </section>
223 | 
224 | 
225 | 
226 | 
227 | 
228 |       <!-- 
229 |         - #SKILL
230 |       -->
231 | 
232 |       <section class="section skill" aria-labelledby="skill-label">
233 |         <div class="container">
234 | 
235 |           <div class="skill-content">
236 | 
237 |             <h2 class="section-title headline-md" id="skill-label">My Skills</h2>
238 | 
239 |             <ul class="skill-list">
240 | 
241 |               <li>
242 |                 <div class="card card-sm" style="background-color: hsl(177, 39%, 72%)">
243 | 
244 |                   <div class="card-media">
245 |                     <ion-icon name="logo-html5"></ion-icon>
246 |                   </div>
247 | 
248 |                   <h2 class="card-title">HTML</h2>
249 | 
250 |                 </div>
251 |               </li>
252 | 
253 |               <li>
254 |                 <div class="card card-sm" style="background-color: hsl(41, 99%, 64%)">
255 | 
256 |                   <div class="card-media">
257 |                     <ion-icon name="logo-css3"></ion-icon>
258 |                   </div>
259 | 
260 |                   <h2 class="card-title">CSS</h2>
261 | 
262 |                 </div>
263 |               </li>
264 | 
265 |               <li>
266 |                 <div class="card card-sm" style="background-color: hsl(19, 97%, 85%)">
267 | 
268 |                   <div class="card-media">
269 |                     <ion-icon name="logo-react"></ion-icon>
270 |                   </div>
271 | 
272 |                   <h2 class="card-title">React JS</h2>
273 | 
274 |                 </div>
275 |               </li>
276 | 
277 |               <li>
278 |                 <div class="card card-sm" style="background-color: hsl(221, 100%, 79%)">
279 | 
280 |                   <div class="card-media">
281 |                     <ion-icon name="logo-angular"></ion-icon>
282 |                   </div>
283 | 
284 |                   <h2 class="card-title">Angular</h2>
285 | 
286 |                 </div>
287 |               </li>
288 | 
289 |               <li>
290 |                 <div class="card card-sm" style="background-color: hsl(76, 39%, 72%)">
291 | 
292 |                   <div class="card-media">
293 |                     <ion-icon name="logo-apple"></ion-icon>
294 |                   </div>
295 | 
296 |                   <h2 class="card-title">iOs App</h2>
297 | 
298 |                 </div>
299 |               </li>
300 | 
301 |               <li>
302 |                 <div class="card card-sm" style="background-color: hsl(245, 100%, 90%)">
303 | 
304 |                   <div class="card-media">
305 |                     <ion-icon name="logo-android"></ion-icon>
306 |                   </div>
307 | 
308 |                   <h2 class="card-title">App Dev</h2>
309 | 
310 |                 </div>
311 |               </li>
312 | 
313 |             </ul>
314 | 
315 |           </div>
316 | 
317 |           <figure class="skill-banner">
318 |             <img src="./assets/images/skill-banner.png" width="581" height="657" loading="lazy"
319 |               alt="Annie, the blonde, dressed in a green hoodie with a smile on her face" class="w-100">
320 |           </figure>
321 | 
322 |         </div>
323 |       </section>
324 | 
325 | 
326 | 
327 | 
328 | 
329 |       <!-- 
330 |         - #CTA
331 |       -->
332 | 
333 |       <section class="cta">
334 |         <div class="container">
335 |           <h2 class="title-lg">Intrested working with me?</h2>
336 | 
337 |           <a href="./contact.html" class="btn btn-tertiary">Contact Now</a>
338 |         </div>
339 |       </section>
340 | 
341 | 
342 | 
343 | 
344 | 
345 |       <!-- 
346 |         - #TESTIMONIALS
347 |       -->
348 | 
349 |       <section class="section testi" aria-labelledby="testi-label">
350 |         <div class="container">
351 | 
352 |           <h2 class="headline-md section-title text-center" id="testi-label">Testimonial</h2>
353 | 
354 |           <ul class="slider">
355 | 
356 |             <li class="slider-item card-container">
357 |               <div class="card card-lg">
358 | 
359 |                 <figure class="card-media">
360 |                   <img src="./assets/images/testi-1.jpg" width="100" height="100" loading="lazy" alt="Jennifer Lutheran"
361 |                     class="img-cover">
362 |                 </figure>
363 | 
364 |                 <div class="card-content">
365 | 
366 |                   <blockquote class="body-sm">
367 |                     Dolor lorem is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
368 |                     industry's standard dummy text ever since the 1500s.
369 |                   </blockquote>
370 | 
371 |                   <p class="client-name">Jennifer Lutheran</p>
372 | 
373 |                   <p class="client-title">CEO at pxdraft</p>
374 | 
375 |                 </div>
376 | 
377 |               </div>
378 |             </li>
379 | 
380 |             <li class="slider-item card-container">
381 |               <div class="card card-lg">
382 | 
383 |                 <figure class="card-media">
384 |                   <img src="./assets/images/testi-2.jpg" width="100" height="100" loading="lazy" alt="Jennifer Lutheran"
385 |                     class="img-cover">
386 |                 </figure>
387 | 
388 |                 <div class="card-content">
389 | 
390 |                   <blockquote class="body-sm">
391 |                     Dolor lorem is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
392 |                     industry's standard dummy text ever since the 1500s.
393 |                   </blockquote>
394 | 
395 |                   <p class="client-name">Jennifer Lutheran</p>
396 | 
397 |                   <p class="client-title">CEO at pxdraft</p>
398 | 
399 |                 </div>
400 | 
401 |               </div>
402 |             </li>
403 | 
404 |             <li class="slider-item card-container">
405 |               <div class="card card-lg">
406 | 
407 |                 <figure class="card-media">
408 |                   <img src="./assets/images/testi-3.jpg" width="100" height="100" loading="lazy" alt="Jennifer Lutheran"
409 |                     class="img-cover">
410 |                 </figure>
411 | 
412 |                 <div class="card-content">
413 | 
414 |                   <blockquote class="body-sm">
415 |                     Dolor lorem is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
416 |                     industry's standard dummy text ever since the 1500s.
417 |                   </blockquote>
418 | 
419 |                   <p class="client-name">Jennifer Lutheran</p>
420 | 
421 |                   <p class="client-title">CEO at pxdraft</p>
422 | 
423 |                 </div>
424 | 
425 |               </div>
426 |             </li>
427 | 
428 |             <li class="slider-item card-container">
429 |               <div class="card card-lg">
430 | 
431 |                 <figure class="card-media">
432 |                   <img src="./assets/images/testi-4.jpg" width="100" height="100" loading="lazy" alt="Jennifer Lutheran"
433 |                     class="img-cover">
434 |                 </figure>
435 | 
436 |                 <div class="card-content">
437 | 
438 |                   <blockquote class="body-sm">
439 |                     Dolor lorem is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
440 |                     industry's standard dummy text ever since the 1500s.
441 |                   </blockquote>
442 | 
443 |                   <p class="client-name">Jennifer Lutheran</p>
444 | 
445 |                   <p class="client-title">CEO at pxdraft</p>
446 | 
447 |                 </div>
448 | 
449 |               </div>
450 |             </li>
451 | 
452 |           </ul>
453 | 
454 |         </div>
455 |       </section>
456 | 
457 |     </article>
458 |   </main>
459 | 
460 | 
461 | 
462 | 
463 | 
464 |   <!-- 
465 |     - #FOOTER
466 |   -->
467 | 
468 |   <footer class="footer">
469 |     <div class="container">
470 | 
471 |       <ul class="social-list">
472 | 
473 |         <li>
474 |           <a href="#" class="social-link">
475 |             <ion-icon name="logo-facebook"></ion-icon>
476 |           </a>
477 |         </li>
478 | 
479 |         <li>
480 |           <a href="#" class="social-link">
481 |             <ion-icon name="logo-twitter"></ion-icon>
482 |           </a>
483 |         </li>
484 | 
485 |         <li>
486 |           <a href="#" class="social-link">
487 |             <ion-icon name="logo-instagram"></ion-icon>
488 |           </a>
489 |         </li>
490 | 
491 |         <li>
492 |           <a href="#" class="social-link">
493 |             <ion-icon name="logo-linkedin"></ion-icon>
494 |           </a>
495 |         </li>
496 | 
497 |         <li>
498 |           <a href="#" class="social-link">
499 |             <ion-icon name="logo-pinterest"></ion-icon>
500 |           </a>
501 |         </li>
502 | 
503 |       </ul>
504 | 
505 |       <p class="text-center">&copy; 2022 copyright all right reserved</p>
506 | 
507 |     </div>
508 |   </footer>
509 | 
510 | 
511 | 
512 | 
513 | 
514 |   <!-- 
515 |     - custom js link
516 |   -->
517 |   <script src="./assets/js/script.js"></script>
518 | 
519 |   <!-- 
520 |     - ionicon
521 |   -->
522 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
523 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
524 | 
525 | </body>
526 | 
527 | </html>


--------------------------------------------------------------------------------
/index.txt:
--------------------------------------------------------------------------------
  1 | Annie - Web Developer Based on Los Angeles
  2 | 
  3 | This is a personal portfolio html template made by codewithsadee
  4 | 
  5 | Annie | Services
  6 | 
  7 | Annie | Portfolio
  8 | 
  9 | Annie | Contact
 10 | 
 11 | 
 12 | 
 13 | #---------- HEADER ----------#
 14 | 
 15 | alt = Annie home
 16 | 
 17 | Home
 18 | Services
 19 | Portfolio
 20 | Contact
 21 | 
 22 | Contact Now
 23 | 
 24 | aria-label = menu
 25 | <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
 26 | 
 27 | 
 28 | 
 29 | #---------- HERO ----------#
 30 | 
 31 | 👋, My name is Annie
 32 | 
 33 | I'm a Developer
 34 | 
 35 | Based in Los Angeles, California.
 36 | 
 37 | Let's Start
 38 | 
 39 | alt = Annie, the blonde, dressed in a green hoodie with a smile on her face
 40 | 
 41 | 
 42 | 
 43 | #---------- CLIENTS ----------#
 44 | 
 45 | alt = clients
 46 | 
 47 | 
 48 | 
 49 | #---------- ABOUT ----------#
 50 | 
 51 | alt = Annie, the blonde, dressed in a black tops with a smile on her face
 52 | 
 53 | I'm a Freelancer Front-end Developer with over 3 years of experience.
 54 | 
 55 | I'm a Freelancer Front-end Developer with over 3 years of experience. I'm from San Francisco. I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
 56 | 
 57 | 285+
 58 | Projet Completed
 59 | 
 60 | 190+
 61 | Happy Clients
 62 | 
 63 | Contact Me
 64 | 
 65 | Portfolio
 66 | 
 67 | 
 68 | 
 69 | #---------- SKILLS ----------#
 70 | 
 71 | My Skills
 72 | 
 73 | bg-color = hsl(177, 39%, 72%)
 74 | 
 75 | <ion-icon name="logo-html5"></ion-icon>
 76 | HTML
 77 | 
 78 | bg-color = hsl(41, 99%, 64%)
 79 | 
 80 | <ion-icon name="logo-css3"></ion-icon>
 81 | CSS
 82 | 
 83 | bg-color = hsl(19, 97%, 85%)
 84 | 
 85 | <ion-icon name="logo-react"></ion-icon>
 86 | React JS
 87 | 
 88 | bg-color = hsl(221, 100%, 79%)
 89 | 
 90 | <ion-icon name="logo-angular"></ion-icon>
 91 | Angular
 92 | 
 93 | bg-color = hsl(76, 39%, 72%)
 94 | 
 95 | <ion-icon name="logo-apple"></ion-icon>
 96 | iOs App
 97 | 
 98 | bg-color = hsl(245, 100%, 90%)
 99 | 
100 | <ion-icon name="logo-android"></ion-icon>
101 | App Dev
102 | 
103 | alt = Annie, the blonde, dressed in a green hoodie with a smile on her face
104 | 
105 | 
106 | 
107 | #---------- CTA ----------#
108 | 
109 | Intrested working with me?
110 | 
111 | Contact Now
112 | 
113 | 
114 | 
115 | #---------- TESTIMONIALS ----------#
116 | 
117 | Testimonial
118 | 
119 | alt = Jennifer Lutheran
120 | 
121 | Dolor lorem is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
122 | 
123 | Jennifer Lutheran
124 | CEO at pxdraft
125 | 
126 | 
127 | 
128 | #---------- FOOTER ----------#
129 | 
130 | <ion-icon name="logo-facebook"></ion-icon>
131 | <ion-icon name="logo-twitter"></ion-icon>
132 | <ion-icon name="logo-instagram"></ion-icon>
133 | <ion-icon name="logo-linkedin"></ion-icon>
134 | <ion-icon name="logo-pinterest"></ion-icon>
135 | 
136 | &copy; 2022 copyright all right reserved
137 | 
138 | 
139 | 
140 | #---------- SERVICES ----------#
141 | 
142 | My Services
143 | 
144 | bg-color = hsl(177, 39%, 72%)
145 | 
146 | <ion-icon name="phone-portrait-outline" aria-hidden="true"></ion-icon>
147 | 
148 | Web Design
149 | 
150 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
151 | 
152 | bg-color = hsl(41, 99%, 64%)
153 | 
154 | <ion-icon name="laptop-outline" aria-hidden="true"></ion-icon>
155 | 
156 | Development
157 | 
158 | bg-color = hsl(19, 97%, 85%)
159 | 
160 | <ion-icon name="stats-chart-outline" aria-hidden="true"></ion-icon>
161 | 
162 | SEO Marketing
163 | 
164 | bg-color = hsl(221, 100%, 79%)
165 | 
166 | <ion-icon name="shapes-outline" aria-hidden="true"></ion-icon>
167 | 
168 | Web Design
169 | 
170 | bg-color = hsl(76, 39%, 72%)
171 | 
172 | <ion-icon name="code-slash-outline" aria-hidden="true"></ion-icon>
173 | 
174 | Development
175 | 
176 | bg-color = hsl(245, 100%, 90%)
177 | 
178 | <ion-icon name="globe-outline" aria-hidden="true"></ion-icon>
179 | 
180 | SEO Marketing
181 | 
182 | 
183 | 
184 | #---------- PORTFOLIO ----------#
185 | 
186 | Latest Projects
187 | 
188 | alt = Website Design for Marketing Agency Startup
189 | 
190 | aria-label = More about Website Design for Marketing Agency Startup
191 | 
192 | <ion-icon name="arrow-forward-sharp" aria-hidden="true"></ion-icon>
193 | 
194 | Web Design
195 | 
196 | Website Design for Marketing Agency Startup
197 | 
198 | I design and develop services for customers of all sizes, specializing in creating stylish, modern websites, web services and online stores
199 | 
200 | View Project
201 | 
202 | 
203 | 
204 | #---------- CONTACT ----------#
205 | 
206 | Get in touch
207 | Our friendly team would love to hear from you.
208 | 
209 | First name 
210 | placeholder = Name *
211 | 
212 | Your Email 
213 | placeholder = Email *
214 | 
215 | Subject 
216 | placeholder = Subject *
217 | 
218 | Your message 
219 | placeholder = Your message *
220 | 
221 | Send Message
222 | 
223 | bg-color = hsl(177, 39%, 72%)
224 | 
225 | <ion-icon name="call" aria-hidden="true"></ion-icon>
226 | Phone
227 | +01 123 654 8096
228 | 
229 | bg-color = hsl(41, 99%, 64%)
230 | 
231 | <ion-icon name="mail" aria-hidden="true"></ion-icon>
232 | Mail
233 | info@domainname.com
234 | 
235 | bg-color = hsl(19, 97%, 85%)
236 | 
237 | <ion-icon name="location" aria-hidden="true"></ion-icon>
238 | Visit My Studio
239 | 
240 | Warnwe Park Streetperrine,
241 | FL 33157 New York City


--------------------------------------------------------------------------------
/portfolio.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 
  9 |   <!-- 
 10 |     - primary meta tags
 11 |   -->
 12 |   <title>Annie | Portfolio</title>
 13 |   <meta name="title" content="Annie | Portfolio">
 14 |   <meta name="description" content="This is a personal portfolio html template made by codewithsadee">
 15 | 
 16 |   <!-- 
 17 |     - favicon
 18 |   -->
 19 |   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
 20 | 
 21 |   <!-- 
 22 |     - google font link
 23 |   -->
 24 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 25 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 26 |   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap" rel="stylesheet">
 27 | 
 28 |   <!-- 
 29 |     - custom css link
 30 |   -->
 31 |   <link rel="stylesheet" href="./assets/css/require.css">
 32 |   <link rel="stylesheet" href="./assets/css/pages/portfolio.css">
 33 | 
 34 | </head>
 35 | 
 36 | <body>
 37 | 
 38 |   <!-- 
 39 |     - #PRELOADER
 40 |   -->
 41 | 
 42 |   <div class="preloader" data-preloader>
 43 |     <div class="preloader-circle"></div>
 44 |   </div>
 45 | 
 46 | 
 47 | 
 48 | 
 49 | 
 50 |   <!-- 
 51 |     - #HEADER
 52 |   -->
 53 | 
 54 |   <header class="header" data-header>
 55 |     <div class="container">
 56 | 
 57 |       <a href="./index.html" class="logo">
 58 |         <img src="./assets/images/logo.svg" width="151" height="28" alt="Annie home">
 59 |       </a>
 60 | 
 61 |       <nav class="navbar" data-navbar>
 62 |         <ul class="navbar-list">
 63 | 
 64 |           <li class="navbar-item">
 65 |             <a href="./index.html" class="label-lg navbar-link has-after">Home</a>
 66 |           </li>
 67 | 
 68 |           <li class="navbar-item">
 69 |             <a href="./service.html" class="label-lg navbar-link has-after">Services</a>
 70 |           </li>
 71 | 
 72 |           <li class="navbar-item">
 73 |             <a href="#" class="label-lg navbar-link has-after active">Portfolio</a>
 74 |           </li>
 75 | 
 76 |           <li class="navbar-item">
 77 |             <a href="./contact.html" class="label-lg navbar-link has-after">Contact</a>
 78 |           </li>
 79 | 
 80 |         </ul>
 81 |       </nav>
 82 | 
 83 |       <a href="./contact.html" class="btn btn-primary">Contact Now</a>
 84 | 
 85 |       <button class="nav-toggle-btn" aria-label="menu" data-nav-toggler>
 86 |         <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
 87 |       </button>
 88 | 
 89 |     </div>
 90 |   </header>
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 |   <main>
 97 |     <article>
 98 | 
 99 |       <!-- 
100 |         - #PORTFOLIO
101 |       -->
102 | 
103 |       <section class="section portfolio" aria-labelledby="portfolio-label">
104 |         <div class="container">
105 | 
106 |           <h2 class="section-title headline-md text-center" id="portfolio-label">Latest Projects</h2>
107 | 
108 |           <ul class="portfolio-list">
109 | 
110 |             <li>
111 |               <div class="portfolio-card">
112 | 
113 |                 <div class="card-banner img-holder" style="--width: 800; --height: 540;">
114 |                   <img src="./assets/images/portfolio-1.jpg" width="800" height="540" loading="lazy"
115 |                     alt="Website Design for Marketing Agency Startup" class="img-cover">
116 | 
117 |                   <a href="#" class="btn-icon" aria-label="More about Website Design for Marketing Agency Startup">
118 |                     <ion-icon name="arrow-forward-sharp" aria-hidden="true"></ion-icon>
119 |                   </a>
120 |                 </div>
121 | 
122 |                 <div class="card-content">
123 | 
124 |                   <span class="chip label-md">Web Design</span>
125 | 
126 |                   <h3 class="title-md">Website Design for Marketing Agency Startup</h3>
127 | 
128 |                   <p class="card-text">
129 |                     I design and develop services for customers of all sizes, specializing in creating stylish, modern
130 |                     websites, web services and online stores
131 |                   </p>
132 | 
133 |                   <a href="#" class="btn btn-primary">View Project</a>
134 | 
135 |                 </div>
136 | 
137 |               </div>
138 |             </li>
139 | 
140 |             <li>
141 |               <div class="portfolio-card">
142 | 
143 |                 <div class="card-banner img-holder" style="--width: 800; --height: 540;">
144 |                   <img src="./assets/images/portfolio-2.jpg" width="800" height="540" loading="lazy"
145 |                     alt="Website Design for Marketing Agency Startup" class="img-cover">
146 | 
147 |                   <a href="#" class="btn-icon" aria-label="More about Website Design for Marketing Agency Startup">
148 |                     <ion-icon name="arrow-forward-sharp" aria-hidden="true"></ion-icon>
149 |                   </a>
150 |                 </div>
151 | 
152 |                 <div class="card-content">
153 | 
154 |                   <span class="chip label-md">Web Design</span>
155 | 
156 |                   <h3 class="title-md">Website Design for Marketing Agency Startup</h3>
157 | 
158 |                   <p class="card-text">
159 |                     I design and develop services for customers of all sizes, specializing in creating stylish, modern
160 |                     websites, web services and online stores
161 |                   </p>
162 | 
163 |                   <a href="#" class="btn btn-primary">View Project</a>
164 | 
165 |                 </div>
166 | 
167 |               </div>
168 |             </li>
169 | 
170 |             <li>
171 |               <div class="portfolio-card">
172 | 
173 |                 <div class="card-banner img-holder" style="--width: 800; --height: 540;">
174 |                   <img src="./assets/images/portfolio-3.jpg" width="800" height="540" loading="lazy"
175 |                     alt="Website Design for Marketing Agency Startup" class="img-cover">
176 | 
177 |                   <a href="#" class="btn-icon" aria-label="More about Website Design for Marketing Agency Startup">
178 |                     <ion-icon name="arrow-forward-sharp" aria-hidden="true"></ion-icon>
179 |                   </a>
180 |                 </div>
181 | 
182 |                 <div class="card-content">
183 | 
184 |                   <span class="chip label-md">Web Design</span>
185 | 
186 |                   <h3 class="title-md">Website Design for Marketing Agency Startup</h3>
187 | 
188 |                   <p class="card-text">
189 |                     I design and develop services for customers of all sizes, specializing in creating stylish, modern
190 |                     websites, web services and online stores
191 |                   </p>
192 | 
193 |                   <a href="#" class="btn btn-primary">View Project</a>
194 | 
195 |                 </div>
196 | 
197 |               </div>
198 |             </li>
199 | 
200 |             <li>
201 |               <div class="portfolio-card">
202 | 
203 |                 <div class="card-banner img-holder" style="--width: 800; --height: 540;">
204 |                   <img src="./assets/images/portfolio-4.jpg" width="800" height="540" loading="lazy"
205 |                     alt="Website Design for Marketing Agency Startup" class="img-cover">
206 | 
207 |                   <a href="#" class="btn-icon" aria-label="More about Website Design for Marketing Agency Startup">
208 |                     <ion-icon name="arrow-forward-sharp" aria-hidden="true"></ion-icon>
209 |                   </a>
210 |                 </div>
211 | 
212 |                 <div class="card-content">
213 | 
214 |                   <span class="chip label-md">Web Design</span>
215 | 
216 |                   <h3 class="title-md">Website Design for Marketing Agency Startup</h3>
217 | 
218 |                   <p class="card-text">
219 |                     I design and develop services for customers of all sizes, specializing in creating stylish, modern
220 |                     websites, web services and online stores
221 |                   </p>
222 | 
223 |                   <a href="#" class="btn btn-primary">View Project</a>
224 | 
225 |                 </div>
226 | 
227 |               </div>
228 |             </li>
229 | 
230 |           </ul>
231 | 
232 |         </div>
233 |       </section>
234 | 
235 |     </article>
236 |   </main>
237 | 
238 | 
239 | 
240 | 
241 | 
242 |   <!-- 
243 |     - #FOOTER
244 |   -->
245 | 
246 |   <footer class="footer">
247 |     <div class="container">
248 | 
249 |       <ul class="social-list">
250 | 
251 |         <li>
252 |           <a href="#" class="social-link">
253 |             <ion-icon name="logo-facebook"></ion-icon>
254 |           </a>
255 |         </li>
256 | 
257 |         <li>
258 |           <a href="#" class="social-link">
259 |             <ion-icon name="logo-twitter"></ion-icon>
260 |           </a>
261 |         </li>
262 | 
263 |         <li>
264 |           <a href="#" class="social-link">
265 |             <ion-icon name="logo-instagram"></ion-icon>
266 |           </a>
267 |         </li>
268 | 
269 |         <li>
270 |           <a href="#" class="social-link">
271 |             <ion-icon name="logo-linkedin"></ion-icon>
272 |           </a>
273 |         </li>
274 | 
275 |         <li>
276 |           <a href="#" class="social-link">
277 |             <ion-icon name="logo-pinterest"></ion-icon>
278 |           </a>
279 |         </li>
280 | 
281 |       </ul>
282 | 
283 |       <p class="text-center">&copy; 2022 copyright all right reserved</p>
284 | 
285 |     </div>
286 |   </footer>
287 | 
288 | 
289 | 
290 | 
291 | 
292 |   <!-- 
293 |     - custom js link
294 |   -->
295 |   <script src="./assets/js/script.js"></script>
296 | 
297 |   <!-- 
298 |     - ionicon
299 |   -->
300 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
301 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
302 | 
303 | </body>
304 | 
305 | </html>


--------------------------------------------------------------------------------
/readme-images/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/readme-images/Thumbs.db


--------------------------------------------------------------------------------
/readme-images/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/annie/6ea8e56cc15909076bd9512101b559f04d31bf07/readme-images/desktop.png


--------------------------------------------------------------------------------
/service.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 
  9 |   <!-- 
 10 |     - primary meta tags
 11 |   -->
 12 |   <title>Annie | Services</title>
 13 |   <meta name="title" content="Annie | Services">
 14 |   <meta name="description" content="This is a personal portfolio html template made by codewithsadee">
 15 | 
 16 |   <!-- 
 17 |     - favicon
 18 |   -->
 19 |   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
 20 | 
 21 |   <!-- 
 22 |     - google font link
 23 |   -->
 24 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 25 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 26 |   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap" rel="stylesheet">
 27 | 
 28 |   <!-- 
 29 |     - custom css link
 30 |   -->
 31 |   <link rel="stylesheet" href="./assets/css/require.css">
 32 |   <link rel="stylesheet" href="./assets/css/pages/service.css">
 33 | 
 34 | </head>
 35 | 
 36 | <body>
 37 | 
 38 |   <!-- 
 39 |     - #PRELOADER
 40 |   -->
 41 | 
 42 |   <div class="preloader" data-preloader>
 43 |     <div class="preloader-circle"></div>
 44 |   </div>
 45 | 
 46 | 
 47 | 
 48 | 
 49 | 
 50 |   <!-- 
 51 |     - #HEADER
 52 |   -->
 53 | 
 54 |   <header class="header" data-header>
 55 |     <div class="container">
 56 | 
 57 |       <a href="./index.html" class="logo">
 58 |         <img src="./assets/images/logo.svg" width="151" height="28" alt="Annie home">
 59 |       </a>
 60 | 
 61 |       <nav class="navbar" data-navbar>
 62 |         <ul class="navbar-list">
 63 | 
 64 |           <li class="navbar-item">
 65 |             <a href="./index.html" class="label-lg navbar-link has-after">Home</a>
 66 |           </li>
 67 | 
 68 |           <li class="navbar-item">
 69 |             <a href="#" class="label-lg navbar-link has-after active">Services</a>
 70 |           </li>
 71 | 
 72 |           <li class="navbar-item">
 73 |             <a href="./portfolio.html" class="label-lg navbar-link has-after">Portfolio</a>
 74 |           </li>
 75 | 
 76 |           <li class="navbar-item">
 77 |             <a href="./contact.html" class="label-lg navbar-link has-after">Contact</a>
 78 |           </li>
 79 | 
 80 |         </ul>
 81 |       </nav>
 82 | 
 83 |       <a href="./contact.html" class="btn btn-primary">Contact Now</a>
 84 | 
 85 |       <button class="nav-toggle-btn" aria-label="menu" data-nav-toggler>
 86 |         <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
 87 |       </button>
 88 | 
 89 |     </div>
 90 |   </header>
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 |   <main>
 97 |     <article>
 98 | 
 99 |       <!-- 
100 |         - #SERVICE
101 |       -->
102 | 
103 |       <section class="section service has-bg-image" aria-labelledby="service-label"
104 |         style="background-image: url('./assets/images/service-bg.png')">
105 |         <div class="container">
106 | 
107 |           <h2 class="section-title headline-md text-center" id="service-label">My Services</h2>
108 | 
109 |           <ul class="service-list">
110 | 
111 |             <li class="card-container">
112 |               <div class="card card-md" style="background-color: hsl(177, 39%, 72%)">
113 | 
114 |                 <div class="card-media">
115 |                   <ion-icon name="phone-portrait-outline" aria-hidden="true"></ion-icon>
116 |                 </div>
117 | 
118 |                 <div>
119 |                   <h3 class="card-title title-sm">Web Design</h3>
120 | 
121 |                   <p class="body-sm">
122 |                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
123 |                     et dolore magna aliqua.
124 |                   </p>
125 |                 </div>
126 | 
127 |               </div>
128 |             </li>
129 | 
130 |             <li class="card-container">
131 |               <div class="card card-md" style="background-color: hsl(41, 99%, 64%)">
132 | 
133 |                 <div class="card-media">
134 |                   <ion-icon name="laptop-outline" aria-hidden="true"></ion-icon>
135 |                 </div>
136 | 
137 |                 <div>
138 |                   <h3 class="card-title title-sm">Development</h3>
139 | 
140 |                   <p class="body-sm">
141 |                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
142 |                     et dolore magna aliqua.
143 |                   </p>
144 |                 </div>
145 | 
146 |               </div>
147 |             </li>
148 | 
149 |             <li class="card-container">
150 |               <div class="card card-md" style="background-color: hsl(19, 97%, 85%)">
151 | 
152 |                 <div class="card-media">
153 |                   <ion-icon name="stats-chart-outline" aria-hidden="true"></ion-icon>
154 |                 </div>
155 | 
156 |                 <div>
157 |                   <h3 class="card-title title-sm">SEO Marketing</h3>
158 | 
159 |                   <p class="body-sm">
160 |                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
161 |                     et dolore magna aliqua.
162 |                   </p>
163 |                 </div>
164 | 
165 |               </div>
166 |             </li>
167 | 
168 |             <li class="card-container">
169 |               <div class="card card-md" style="background-color: hsl(221, 100%, 79%)">
170 | 
171 |                 <div class="card-media">
172 |                   <ion-icon name="shapes-outline" aria-hidden="true"></ion-icon>
173 |                 </div>
174 | 
175 |                 <div>
176 |                   <h3 class="card-title title-sm">Web Design</h3>
177 | 
178 |                   <p class="body-sm">
179 |                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
180 |                     et dolore magna aliqua.
181 |                   </p>
182 |                 </div>
183 | 
184 |               </div>
185 |             </li>
186 | 
187 |             <li class="card-container">
188 |               <div class="card card-md" style="background-color: hsl(76, 39%, 72%)">
189 | 
190 |                 <div class="card-media">
191 |                   <ion-icon name="code-slash-outline" aria-hidden="true"></ion-icon>
192 |                 </div>
193 | 
194 |                 <div>
195 |                   <h3 class="card-title title-sm">Development</h3>
196 | 
197 |                   <p class="body-sm">
198 |                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
199 |                     et dolore magna aliqua.
200 |                   </p>
201 |                 </div>
202 | 
203 |               </div>
204 |             </li>
205 | 
206 |             <li class="card-container">
207 |               <div class="card card-md" style="background-color: hsl(245, 100%, 90%)">
208 | 
209 |                 <div class="card-media">
210 |                   <ion-icon name="globe-outline" aria-hidden="true"></ion-icon>
211 |                 </div>
212 | 
213 |                 <div>
214 |                   <h3 class="card-title title-sm">SEO Marketing</h3>
215 | 
216 |                   <p class="body-sm">
217 |                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
218 |                     et dolore magna aliqua.
219 |                   </p>
220 |                 </div>
221 | 
222 |               </div>
223 |             </li>
224 | 
225 |           </ul>
226 | 
227 |         </div>
228 |       </section>
229 | 
230 |     </article>
231 |   </main>
232 | 
233 | 
234 | 
235 | 
236 | 
237 |   <!-- 
238 |     - #FOOTER
239 |   -->
240 | 
241 |   <footer class="footer">
242 |     <div class="container">
243 | 
244 |       <ul class="social-list">
245 | 
246 |         <li>
247 |           <a href="#" class="social-link">
248 |             <ion-icon name="logo-facebook"></ion-icon>
249 |           </a>
250 |         </li>
251 | 
252 |         <li>
253 |           <a href="#" class="social-link">
254 |             <ion-icon name="logo-twitter"></ion-icon>
255 |           </a>
256 |         </li>
257 | 
258 |         <li>
259 |           <a href="#" class="social-link">
260 |             <ion-icon name="logo-instagram"></ion-icon>
261 |           </a>
262 |         </li>
263 | 
264 |         <li>
265 |           <a href="#" class="social-link">
266 |             <ion-icon name="logo-linkedin"></ion-icon>
267 |           </a>
268 |         </li>
269 | 
270 |         <li>
271 |           <a href="#" class="social-link">
272 |             <ion-icon name="logo-pinterest"></ion-icon>
273 |           </a>
274 |         </li>
275 | 
276 |       </ul>
277 | 
278 |       <p class="text-center">&copy; 2022 copyright all right reserved</p>
279 | 
280 |     </div>
281 |   </footer>
282 | 
283 | 
284 | 
285 | 
286 | 
287 |   <!-- 
288 |     - custom js link
289 |   -->
290 |   <script src="./assets/js/script.js"></script>
291 | 
292 |   <!-- 
293 |     - ionicon
294 |   -->
295 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
296 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
297 | 
298 | </body>
299 | 
300 | </html>


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Essential Stuff
 2 | 
 3 | ## Html import links
 4 | 
 5 | Google font
 6 | 
 7 | ``` html
 8 | <link rel="preconnect" href="https://fonts.googleapis.com">
 9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 | <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap" rel="stylesheet">
11 | ```
12 | 
13 | Ionicon
14 | 
15 | ``` html
16 | <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
17 | <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
18 | ```
19 | 
20 | ---
21 | 
22 | ## Colors
23 | 
24 | ``` css
25 | --maximum-yellow-red_a10: hsla(41, 99%, 64%, 0.1);
26 | --maximum-yellow-red_a40: hsla(41, 99%, 64%, 0.4);
27 | --maximum-yellow-red: hsl(41, 99%, 64%);
28 | --orange-red_a20: hsla(19, 100%, 55%, 0.2);
29 | --eerie-black: hsl(210, 11%, 15%);
30 | --orange-red: hsl(19, 100%, 55%);
31 | --davys-gray: hsl(0, 0%, 33%);
32 | --white_a80: hsla(0, 0%, 100%, 0.8);
33 | --white_a75: hsla(0, 0%, 100%, 0.75);
34 | --white_a10: hsla(0, 0%, 100%, 0.1);
35 | --jet_a10: hsla(0, 0%, 22%, 0.1);
36 | --black: hsl(0, 0%, 0%);
37 | --white: hsl(0, 0%, 100%);
38 | --jet: hsl(0, 0%, 22%);
39 | ```
40 | 
41 | ## Typography
42 | 
43 | ``` css
44 | --ff-jost: 'Jost', sans-serif;
45 | 
46 | --fs-45: 4.5rem;
47 | --fs-38: 3.8rem;
48 | --fs-32: 3.2rem;
49 | --fs-27: 2.7rem;
50 | --fs-26: 2.6rem;
51 | --fs-22: 2.2rem;
52 | --fs-20: 2rem;
53 | --fs-18: 1.8rem;
54 | --fs-17: 1.7rem;
55 | --fs-14: 1.4rem;
56 | --fs-12: 1.2rem;
57 | 
58 | --fw-400: 400;
59 | --fw-500: 500;
60 | --fw-600: 600;
61 | ```
62 | 
63 | ## Spacing
64 | 
65 | ``` css
66 | --section-padding: 60px;
67 | ```
68 | 
69 | ## Shadow
70 | 
71 | ``` css
72 | --shadow: 0 2px 2px hsla(0, 0%, 22%, 0.08);
73 | ```
74 | 
75 | ## Border Radius
76 | 
77 | ``` css
78 | --radius-50: 50px;
79 | --radius-pill: 100px;
80 | --radius-circle: 50%;
81 | ```
82 | 
83 | ## Transition
84 | 
85 | ``` css
86 | --transition-1: 0.25s ease;
87 | --transition-2: 0.5s ease;
88 | --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);
89 | ```
90 | 


--------------------------------------------------------------------------------