├── .gitignore
├── .vscode
    └── tasks.json
├── css
    ├── app.css
    └── app.css.map
├── images
    ├── blog1.png
    ├── blog2.png
    ├── blog3.png
    ├── contact-bg.png
    ├── header-bg.png
    ├── icon-bars.png
    ├── icon-document.png
    ├── icon-rocket.png
    ├── icon-search.png
    ├── img-call.png
    ├── img-clock.png
    ├── img-lamp.png
    ├── img1.png
    ├── img10.png
    ├── img11.png
    ├── img2.png
    ├── img3.png
    ├── img4.png
    ├── img5.png
    ├── img6.png
    ├── img7.png
    ├── img8.png
    ├── img9.png
    ├── logo-footer.png
    ├── logo.png
    ├── logo1.png
    ├── logo2.png
    ├── logo3.png
    ├── logo4.png
    ├── logo5.png
    ├── logo6.png
    ├── logo7.png
    ├── logo8.png
    ├── team1.png
    ├── team2.png
    └── team3.png
├── index.html
├── sass
    ├── _base.scss
    ├── _blog.scss
    ├── _contact.scss
    ├── _footer.scss
    ├── _function.scss
    ├── _header.scss
    ├── _hero.scss
    ├── _menu.scss
    ├── _mixin.scss
    ├── _partner.scss
    ├── _portfolio.scss
    ├── _reset.scss
    ├── _team.scss
    ├── _variables.scss
    └── app.scss
└── scripts
    └── app.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .history


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // See https://go.microsoft.com/fwlink/?LinkId=733558
 3 |   // for the documentation about the tasks.json format
 4 |   "version": "2.0.0",
 5 |   "tasks": [
 6 |     {
 7 |       "label": "Run sass",
 8 |       "type": "shell",
 9 |       "command": "sass sass/app.scss css/app.css --watch"
10 |     }
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/css/app.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | * {
  6 |   margin: 0;
  7 |   padding: 0;
  8 | }
  9 | 
 10 | *,
 11 | *:before,
 12 | *:after {
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | input,
 17 | textarea,
 18 | select,
 19 | button {
 20 |   outline: none;
 21 | }
 22 | 
 23 | input {
 24 |   line-height: normal;
 25 | }
 26 | 
 27 | label,
 28 | button {
 29 |   cursor: pointer;
 30 | }
 31 | 
 32 | a {
 33 |   text-decoration: none;
 34 | }
 35 | 
 36 | img {
 37 |   display: block;
 38 |   max-width: 100%;
 39 | }
 40 | 
 41 | html {
 42 |   scroll-behavior: smooth;
 43 | }
 44 | 
 45 | body {
 46 |   font-family: "Open sans", sans-serif;
 47 |   font-size: 16px;
 48 |   line-height: 1;
 49 |   color: #6a727f;
 50 |   max-width: 1920px;
 51 |   margin: 0 auto;
 52 | }
 53 | 
 54 | input,
 55 | button,
 56 | textarea,
 57 | select {
 58 |   font-family: "Open sans", sans-serif;
 59 |   font-size: 14px;
 60 |   outline: none;
 61 |   border: 0;
 62 | }
 63 | 
 64 | input {
 65 |   line-height: normal;
 66 | }
 67 | 
 68 | section[id] {
 69 |   scroll-margin-top: 30px;
 70 | }
 71 | 
 72 | .container {
 73 |   max-width: 1200px;
 74 |   margin: 0 auto;
 75 |   padding: 0 15px;
 76 | }
 77 | 
 78 | .second-font {
 79 |   font-family: "Raleway", sans-serif;
 80 | }
 81 | 
 82 | .btn {
 83 |   cursor: pointer;
 84 |   outline: none;
 85 |   display: inline-flex;
 86 |   align-items: center;
 87 |   justify-content: center;
 88 |   color: white;
 89 |   font-weight: bold;
 90 |   font-size: 16px;
 91 |   font-family: "Open sans", sans-serif;
 92 |   height: 55px;
 93 |   padding-left: 70px;
 94 |   padding-right: 70px;
 95 |   border-radius: 6px;
 96 | }
 97 | .btn--primary {
 98 |   background-color: #4944f2;
 99 | }
100 | .btn--secondary {
101 |   background-color: transparent;
102 |   background-image: linear-gradient(to right, #f475a0, #feac3d);
103 | }
104 | 
105 | a {
106 |   color: inherit;
107 | }
108 | 
109 | h1,
110 | h2,
111 | h3,
112 | h4,
113 | h5,
114 | h6 {
115 |   color: #393e46;
116 | }
117 | 
118 | .heading {
119 |   font-size: 36px;
120 |   line-height: 1.5555555556;
121 |   font-weight: 800;
122 |   font-family: "Raleway", sans-serif;
123 |   margin-bottom: 30px;
124 | }
125 | 
126 | .title {
127 |   font-size: 22px;
128 |   font-weight: 800;
129 |   font-family: "Raleway", sans-serif;
130 |   line-height: 1.5909090909;
131 |   margin-bottom: 20px;
132 |   display: block;
133 |   color: #393e46;
134 | }
135 | 
136 | .text {
137 |   font-size: 18px;
138 |   line-height: 1.8888888889;
139 | }
140 | 
141 | .text--small {
142 |   font-size: 14px;
143 | }
144 | 
145 | @media screen and (max-width: 767px) {
146 |   .heading {
147 |     font-size: 25px;
148 |     margin-bottom: 20px;
149 |   }
150 | 
151 |   .title {
152 |     font-size: 20px;
153 |     margin-bottom: 10px;
154 |   }
155 | 
156 |   .text {
157 |     font-size: 16px;
158 |   }
159 | }
160 | .header-logo {
161 |   display: inline-block;
162 | }
163 | .header-main {
164 |   display: flex;
165 |   justify-content: space-between;
166 |   align-items: center;
167 |   padding: 40px 0;
168 | }
169 | .header-phone {
170 |   color: #393e46;
171 |   font-weight: 300;
172 | }
173 | .header-phone a {
174 |   font-weight: 600;
175 |   margin-left: 15px;
176 |   color: inherit;
177 | }
178 | 
179 | .navigation {
180 |   display: flex;
181 |   align-items: center;
182 |   gap: 0 60px;
183 | }
184 | 
185 | @media screen and (max-width: 1023px) {
186 |   .header {
187 |     margin-bottom: 20px;
188 |   }
189 | 
190 |   .header-phone {
191 |     display: none;
192 |   }
193 | 
194 |   .navigation {
195 |     gap: 0 25px;
196 |   }
197 | 
198 |   .header-main {
199 |     padding: 20px 0;
200 |   }
201 | }
202 | .hero {
203 |   margin-bottom: 200px;
204 |   position: relative;
205 |   display: block;
206 | }
207 | .hero-image {
208 |   margin-left: auto;
209 |   max-width: 65%;
210 | }
211 | .hero-content {
212 |   position: absolute;
213 |   top: 50%;
214 |   transform: translateY(-50%);
215 |   z-index: 2;
216 |   left: 20%;
217 | }
218 | .hero-caption {
219 |   font-size: 72px;
220 |   font-weight: 600;
221 |   margin-bottom: 5px;
222 | }
223 | .hero-heading {
224 |   font-weight: 800;
225 |   font-size: 150px;
226 |   text-transform: uppercase;
227 |   margin-bottom: 40px;
228 | }
229 | .hero-link {
230 |   font-size: 18px;
231 |   text-decoration: underline;
232 |   color: #6a727f;
233 |   display: inline-block;
234 |   font-weight: 600;
235 | }
236 | @media screen and (max-width: 1023px) {
237 |   .hero {
238 |     margin-bottom: 100px;
239 |   }
240 |   .hero-caption {
241 |     font-size: 40px;
242 |   }
243 |   .hero-heading {
244 |     font-size: 100px;
245 |   }
246 | }
247 | @media screen and (max-width: 767px) {
248 |   .hero {
249 |     margin-bottom: 50px;
250 |   }
251 |   .hero-content {
252 |     left: 15px;
253 |   }
254 |   .hero-caption {
255 |     font-size: 20px;
256 |   }
257 |   .hero-heading {
258 |     font-size: 40px;
259 |     margin-bottom: 20px;
260 |   }
261 |   .hero-link {
262 |     font-size: 16px;
263 |   }
264 |   .hero-image {
265 |     max-width: 75%;
266 |   }
267 | }
268 | 
269 | .portfolio {
270 |   margin-bottom: 200px;
271 | }
272 | .portfolio-list {
273 |   display: grid;
274 |   grid-template-columns: repeat(3, 1fr);
275 |   grid-gap: 0 90px;
276 |   margin-bottom: 95px;
277 | }
278 | .portfolio-image {
279 |   margin-bottom: 40px;
280 |   display: block;
281 | }
282 | .portfolio-category {
283 |   color: #6a727f;
284 | }
285 | .portfolio-column {
286 |   display: flex;
287 |   flex-direction: column;
288 |   gap: 85px 0;
289 | }
290 | .portfolio-link {
291 |   position: relative;
292 |   left: 50%;
293 |   transform: translateX(-50%);
294 | }
295 | @media screen and (max-width: 1023px) {
296 |   .portfolio {
297 |     margin-bottom: 100px;
298 |   }
299 |   .portfolio-list {
300 |     grid-gap: 0 20px;
301 |     margin-bottom: 45px;
302 |   }
303 |   .portfolio-column {
304 |     gap: 40px 0;
305 |   }
306 | }
307 | @media screen and (max-width: 767px) {
308 |   .portfolio {
309 |     margin-bottom: 50px;
310 |   }
311 |   .portfolio-list {
312 |     grid-template-columns: 1fr;
313 |     grid-gap: 40px 0;
314 |   }
315 |   .portfolio-image {
316 |     margin-bottom: 30px;
317 |   }
318 |   .portfolio-image img {
319 |     width: 100%;
320 |     height: auto;
321 |     object-fit: cover;
322 |   }
323 | }
324 | 
325 | .partner {
326 |   margin-bottom: 150px;
327 | }
328 | .partner-main {
329 |   display: grid;
330 |   grid-template-columns: repeat(4, 1fr);
331 |   grid-gap: 90px 0;
332 | }
333 | .partner-item {
334 |   padding: 0 50px;
335 |   display: flex;
336 |   justify-content: center;
337 |   align-items: center;
338 |   cursor: pointer;
339 |   transition: opacity 0.2s linear;
340 | }
341 | .partner-item:hover {
342 |   opacity: 0.1;
343 | }
344 | @media screen and (max-width: 1023px) {
345 |   .partner {
346 |     margin-bottom: 100px;
347 |   }
348 |   .partner-item {
349 |     padding: 0 25px;
350 |   }
351 | }
352 | @media screen and (max-width: 767px) {
353 |   .partner {
354 |     margin-bottom: 50px;
355 |   }
356 |   .partner-main {
357 |     grid-gap: 25px 15px;
358 |     grid-template-columns: 1fr 1fr;
359 |   }
360 | }
361 | 
362 | .team {
363 |   padding: 150px 0;
364 |   background-color: #f7f8f9;
365 | }
366 | .team-main {
367 |   display: flex;
368 |   align-items: center;
369 |   justify-content: space-between;
370 |   gap: 0 30px;
371 | }
372 | .team-desc {
373 |   font-size: 18px;
374 |   line-height: 1.8888888889;
375 |   margin-bottom: 60px;
376 | }
377 | .team-images {
378 |   display: flex;
379 |   align-items: center;
380 |   gap: 0 30px;
381 | }
382 | .team-img2 {
383 |   margin-top: 30px;
384 |   margin-left: auto;
385 | }
386 | @media screen and (min-width: 1024px) {
387 |   .team-content {
388 |     max-width: 370px;
389 |     flex-shrink: 0;
390 |     width: 100%;
391 |   }
392 |   .team-images {
393 |     width: 100%;
394 |     max-width: 670px;
395 |   }
396 | }
397 | @media screen and (max-width: 1023px) {
398 |   .team {
399 |     padding: 100px 0;
400 |   }
401 |   .team-main {
402 |     flex-direction: column;
403 |     gap: 60px 0;
404 |   }
405 | }
406 | @media screen and (max-width: 767px) {
407 |   .team {
408 |     padding: 50px 0;
409 |   }
410 |   .team-desc {
411 |     margin-bottom: 30px;
412 |   }
413 | }
414 | 
415 | .blog {
416 |   padding: 150px 0;
417 | }
418 | .blog-header {
419 |   max-width: 560px;
420 |   margin: 0 auto 100px;
421 |   text-align: center;
422 | }
423 | .blog-list {
424 |   display: grid;
425 |   grid-template-columns: repeat(3, 1fr);
426 |   grid-gap: 30px;
427 | }
428 | .blog-image {
429 |   margin-bottom: 40px;
430 |   display: block;
431 | }
432 | .blog-category {
433 |   color: #6a727f;
434 | }
435 | @media screen and (max-width: 1023px) {
436 |   .blog {
437 |     padding: 100px 0;
438 |   }
439 |   .blog-header {
440 |     margin-bottom: 50px;
441 |   }
442 | }
443 | @media screen and (max-width: 767px) {
444 |   .blog {
445 |     padding: 50px 0;
446 |   }
447 |   .blog-header {
448 |     margin-bottom: 30px;
449 |   }
450 |   .blog-list {
451 |     grid-template-columns: 1fr;
452 |   }
453 |   .blog-image {
454 |     margin-bottom: 20px;
455 |   }
456 |   .blog-image img {
457 |     height: auto;
458 |     object-fit: cover;
459 |     width: 100%;
460 |   }
461 | }
462 | 
463 | .contact {
464 |   padding: 150px 0;
465 |   background: url("../images/contact-bg.png") no-repeat center/cover;
466 | }
467 | .contact-container {
468 |   max-width: 600px;
469 |   margin: 0 auto;
470 | }
471 | .contact-header {
472 |   margin: 0 auto 100px;
473 |   text-align: center;
474 | }
475 | .contact-heading {
476 |   font-weight: 400;
477 | }
478 | .contact-heading, .contact-desc {
479 |   color: white;
480 | }
481 | .contact-field {
482 |   padding: 20px 30px;
483 |   display: block;
484 |   width: 100%;
485 |   border: 1px solid rgba(255, 255, 255, 0.5);
486 |   border-radius: 4px;
487 |   margin-bottom: 30px;
488 |   background-color: transparent;
489 |   color: white;
490 |   transition: border 0.2s linear;
491 | }
492 | .contact-field::-webkit-input-placeholder {
493 |   color: white;
494 | }
495 | .contact-field::-moz-input-placeholder {
496 |   color: white;
497 | }
498 | .contact-field:focus {
499 |   border-color: white;
500 | }
501 | .contact-area {
502 |   line-height: 1.55;
503 |   resize: none;
504 |   min-height: 100px;
505 | }
506 | @media screen and (max-width: 1023px) {
507 |   .contact {
508 |     padding: 100px 0;
509 |   }
510 |   .contact-header {
511 |     margin-bottom: 50px;
512 |   }
513 | }
514 | @media screen and (max-width: 767px) {
515 |   .contact {
516 |     padding: 50px 0;
517 |   }
518 |   .contact-header {
519 |     margin-bottom: 30px;
520 |   }
521 | }
522 | 
523 | .footer-top {
524 |   padding: 150px 0px;
525 |   background-color: #282f3a;
526 | }
527 | .footer-main {
528 |   display: grid;
529 |   grid-template-columns: repeat(3, 1fr);
530 |   grid-gap: 0 130px;
531 | }
532 | .footer-logo {
533 |   display: inline-block;
534 |   margin-bottom: 40px;
535 | }
536 | .footer-desc {
537 |   font-size: 16px;
538 |   margin-bottom: 40px;
539 | }
540 | .footer .social {
541 |   display: flex;
542 |   align-items: center;
543 |   gap: 0 30px;
544 | }
545 | .footer .social-item {
546 |   cursor: pointer;
547 |   color: #6a727f;
548 | }
549 | .footer .social-item:hover {
550 |   color: white;
551 | }
552 | .footer-heading {
553 |   font-size: 18px;
554 |   color: white;
555 |   margin-bottom: 40px;
556 |   font-weight: bold;
557 | }
558 | .footer-links {
559 |   list-style: none;
560 | }
561 | .footer-item {
562 |   margin-bottom: 30px;
563 | }
564 | .footer-link {
565 |   display: inline-block;
566 |   color: #6a727f;
567 | }
568 | .footer-info {
569 |   list-style: none;
570 |   margin-bottom: 40px;
571 | }
572 | .footer-info li {
573 |   margin-bottom: 15px;
574 |   line-height: 1.875;
575 | }
576 | .footer-highlight {
577 |   color: white;
578 | }
579 | .footer-bottom {
580 |   background-color: #252b36;
581 |   line-height: 1.6;
582 | }
583 | .footer-bottom a {
584 |   color: white;
585 | }
586 | .footer-container {
587 |   padding-top: 60px;
588 |   padding-bottom: 60px;
589 |   position: relative;
590 | }
591 | .footer-rocket {
592 |   color: white;
593 |   border-radius: 4px;
594 |   width: 70px;
595 |   height: 70px;
596 |   display: flex;
597 |   justify-content: center;
598 |   align-items: center;
599 |   background-color: #4944f2;
600 |   font-size: 20px;
601 |   position: absolute;
602 |   top: 0;
603 |   right: 0;
604 |   transform: translateY(-50%);
605 |   z-index: 2;
606 | }
607 | @media screen and (max-width: 1023px) {
608 |   .footer-top {
609 |     padding: 100px 0;
610 |   }
611 |   .footer-main {
612 |     grid-gap: 0 30px;
613 |   }
614 | }
615 | @media screen and (max-width: 767px) {
616 |   .footer-top {
617 |     padding: 50px 0;
618 |   }
619 |   .footer-main {
620 |     grid-template-columns: 1fr;
621 |     grid-gap: 30px 0;
622 |   }
623 |   .footer-container {
624 |     padding: 35px 15px;
625 |   }
626 |   .footer-rocket {
627 |     width: 50px;
628 |     height: 50px;
629 |     right: 15px;
630 |   }
631 | }
632 | 
633 | .menu {
634 |   position: fixed;
635 |   right: 0;
636 |   top: 0;
637 |   bottom: 0;
638 |   width: 300px;
639 |   background-color: white;
640 |   z-index: 9999;
641 |   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
642 |   transform: translateX(100%);
643 |   transition: transform 0.2s linear;
644 |   will-change: transform;
645 | }
646 | .menu.is-active {
647 |   transform: translateX(0);
648 | }
649 | .menu-list {
650 |   list-style: none;
651 |   height: 100%;
652 |   padding: 70px 20px 20px;
653 | }
654 | .menu-item {
655 |   margin-bottom: 15px;
656 | }
657 | .menu-link {
658 |   display: block;
659 |   padding: 15px;
660 |   text-transform: capitalize;
661 |   color: #393e46;
662 |   border-radius: 6px;
663 |   transition: all 0.15s linear;
664 | }
665 | .menu-link:hover {
666 |   color: white;
667 |   background-color: #4944f2;
668 | }
669 | .menu-close {
670 |   cursor: pointer;
671 |   font-size: 30px;
672 |   position: absolute;
673 |   right: 20px;
674 |   top: 20px;
675 | }
676 | .menu-phone {
677 |   padding: 15px;
678 |   color: #393e46;
679 | }
680 | .menu-phone a {
681 |   color: inherit;
682 |   font-weight: bold;
683 | }
684 | .menu-toggle {
685 |   cursor: pointer;
686 | }
687 | 
688 | /*# sourceMappingURL=app.css.map */
689 | 


--------------------------------------------------------------------------------
/css/app.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["../sass/_reset.scss","../sass/_base.scss","../sass/_variables.scss","../sass/_mixin.scss","../sass/_header.scss","../sass/_hero.scss","../sass/_portfolio.scss","../sass/_partner.scss","../sass/_team.scss","../sass/_blog.scss","../sass/_contact.scss","../sass/_footer.scss","../sass/_menu.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;EACA;;;AAEF;AAAA;AAAA;EAGE;;;AAEF;AAAA;AAAA;AAAA;EAIE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AC9BF;EACE;;;AAEF;EACE,aCJa;EDKb;EACA;EACA,OCJW;EDKX;EACA;;;AAEF;AAAA;AAAA;AAAA;EAIE,aCfa;EDgBb;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE,aC/Be;;;ADiCjB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aC3Ca;ED4Cb;EACA;EACA;EACA;;AACA;EACE,kBC3CS;;AD6CX;EACE;EACA;;;AAGJ;EACE;;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,OC/DK;;;ADiEP;EACE;EACA;EACA;EACA,aCtEe;EDuEf;;;AAEF;EACE;EACA;EACA,aC5Ee;ED6Ef;EACA;EACA;EACA,OC/EK;;;ADiFP;EACE;EACA;;;AAEF;EACE;;;AEvFA;EF0FA;IACE;IACA;;;EAEF;IACE;IACA;;;EAEF;IACE;;;AGnGF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE,OFTG;EEUH;;AACA;EACE;EACA;EACA;;;AAIN;EACE;EACA;EACA;;;ADtBA;ECyBA;IACE;;;EAEF;IACE;;;EAEF;IACE;;;EAEF;IACE;;;ACpCJ;EACE;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA,OH1BS;EG2BT;EACA;;AF9BF;EEDF;IAkCI;;EACA;IACE;;EAEF;IACE;;;AFtCJ;EEDF;IA2CI;;EACA;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAEF;IACE;;;;AC1DN;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE,OJVS;;AIYX;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AHtBF;EGDF;IA0BI;;EACA;IACE;IACA;;EAEF;IACE;;;AH/BJ;EGDF;IAoCI;;EACA;IACE;IACA;;EAEF;IACE;;EAEF;IACE;IACA;IACA;;;;AC/CN;EACE;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AJdJ;EIDF;IAmBI;;EACA;IACE;;;AJpBJ;EIDF;IAyBI;;EACA;IACE;IACA;;;;AC5BN;EACE;EACA,kBNKa;;AMJb;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;ALfF;EKkBE;IACE;IACA;IACA;;EAEF;IACE;IACA;;;AL9BJ;EKDF;IAmCI;;EACA;IACE;IACA;;;ALrCJ;EKDF;IA0CI;;EACA;IACE;;;;AC5CN;EACE;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE,OPdS;;ACFX;EMDF;IAoBI;;EACA;IACE;;;ANrBJ;EMDF;IA0BI;;EACA;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;IACA;;;;ACvCN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EAEE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;APxCF;EODF;IA4CI;;EACA;IACE;;;AP7CJ;EODF;IAkDI;;EACA;IACE;;;;ACnDJ;EACE;EACA,kBTCQ;;ASCV;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA,OTtBS;;ASuBT;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA,OTzCS;;AS2CX;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE,kBTrDU;ESsDV;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBTvES;ESwET;EACA;EACA;EACA;EACA;EACA;;ARlFF;EQqFE;IACE;;EAEF;IACE;;;ARzFJ;EQ6FE;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAEF;IACE;IACA;IACA;;;;AC3GN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA,OVzBG;EU0BH;EACA;;AACA;EACE;EACA,kBV1BO;;AU6BX;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA,OV1CG;;AU2CH;EACE;EACA;;AAGJ;EACE","file":"app.css"}


--------------------------------------------------------------------------------
/images/blog1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/blog1.png


--------------------------------------------------------------------------------
/images/blog2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/blog2.png


--------------------------------------------------------------------------------
/images/blog3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/blog3.png


--------------------------------------------------------------------------------
/images/contact-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/contact-bg.png


--------------------------------------------------------------------------------
/images/header-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/header-bg.png


--------------------------------------------------------------------------------
/images/icon-bars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/icon-bars.png


--------------------------------------------------------------------------------
/images/icon-document.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/icon-document.png


--------------------------------------------------------------------------------
/images/icon-rocket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/icon-rocket.png


--------------------------------------------------------------------------------
/images/icon-search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/icon-search.png


--------------------------------------------------------------------------------
/images/img-call.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img-call.png


--------------------------------------------------------------------------------
/images/img-clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img-clock.png


--------------------------------------------------------------------------------
/images/img-lamp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img-lamp.png


--------------------------------------------------------------------------------
/images/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img1.png


--------------------------------------------------------------------------------
/images/img10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img10.png


--------------------------------------------------------------------------------
/images/img11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img11.png


--------------------------------------------------------------------------------
/images/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img2.png


--------------------------------------------------------------------------------
/images/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img3.png


--------------------------------------------------------------------------------
/images/img4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img4.png


--------------------------------------------------------------------------------
/images/img5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img5.png


--------------------------------------------------------------------------------
/images/img6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img6.png


--------------------------------------------------------------------------------
/images/img7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img7.png


--------------------------------------------------------------------------------
/images/img8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img8.png


--------------------------------------------------------------------------------
/images/img9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/img9.png


--------------------------------------------------------------------------------
/images/logo-footer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo-footer.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo.png


--------------------------------------------------------------------------------
/images/logo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo1.png


--------------------------------------------------------------------------------
/images/logo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo2.png


--------------------------------------------------------------------------------
/images/logo3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo3.png


--------------------------------------------------------------------------------
/images/logo4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo4.png


--------------------------------------------------------------------------------
/images/logo5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo5.png


--------------------------------------------------------------------------------
/images/logo6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo6.png


--------------------------------------------------------------------------------
/images/logo7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo7.png


--------------------------------------------------------------------------------
/images/logo8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/logo8.png


--------------------------------------------------------------------------------
/images/team1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/team1.png


--------------------------------------------------------------------------------
/images/team2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/team2.png


--------------------------------------------------------------------------------
/images/team3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evondev/octavian2/2d5dd8ff90cb572c5c3f22cbdce2d28e06d746c8/images/team3.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Octavian</title>
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 10 |     <link
 11 |       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Raleway:wght@400;600;700;800&display=swap"
 12 |       rel="stylesheet"
 13 |     />
 14 |     <script
 15 |       type="module"
 16 |       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
 17 |     ></script>
 18 |     <script
 19 |       nomodule
 20 |       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
 21 |     ></script>
 22 |     <link rel="stylesheet" href="./css/app.css" />
 23 |   </head>
 24 |   <body>
 25 |     <div class="menu">
 26 |       <ion-icon name="close" class="menu-close"></ion-icon>
 27 |       <ul class="menu-list">
 28 |         <li class="menu-item">
 29 |           <a href="#portfolio" class="menu-link">Portfolio</a>
 30 |         </li>
 31 |         <li class="menu-item">
 32 |           <a href="#partners" class="menu-link">Partners</a>
 33 |         </li>
 34 |         <li class="menu-item">
 35 |           <a href="#team" class="menu-link">Team</a>
 36 |         </li>
 37 |         <li class="menu-item">
 38 |           <a href="#blog" class="menu-link">Blog</a>
 39 |         </li>
 40 |         <li class="menu-item">
 41 |           <a href="#contact" class="menu-link">Contact</a>
 42 |         </li>
 43 |         <li class="menu-item menu-phone">
 44 |           Phone: <a href="tel:055951237851">+055 - 951 237 851</a>
 45 |         </li>
 46 |       </ul>
 47 |     </div>
 48 |     <header class="header">
 49 |       <div class="container">
 50 |         <div class="header-main">
 51 |           <a href="index.html" class="header-logo">
 52 |             <img src="./images/logo.png" alt="" class="header-logo" />
 53 |           </a>
 54 |           <div class="navigation">
 55 |             <p class="header-phone">
 56 |               Phone: <a href="tel:055951237851">+055 - 951 237 851</a>
 57 |             </p>
 58 |             <img src="./images/icon-search.png" alt="" class="icon-search" />
 59 |             <img src="./images/icon-bars.png" alt="" class="menu-toggle" />
 60 |           </div>
 61 |         </div>
 62 |       </div>
 63 |     </header>
 64 |     <main>
 65 |       <section class="hero">
 66 |         <img src="./images/img1.png" alt="" class="hero-image" />
 67 |         <div class="hero-content">
 68 |           <h2 class="hero-caption second-font">creative & digital</h2>
 69 |           <h1 class="hero-heading second-font">Agency</h1>
 70 |           <a href="#" class="hero-link">Purchase Now</a>
 71 |         </div>
 72 |       </section>
 73 |       <section class="portfolio" id="portfolio">
 74 |         <div class="container">
 75 |           <div class="portfolio-list">
 76 |             <div class="portfolio-column">
 77 |               <div class="portfolio-item">
 78 |                 <a href="#" class="portfolio-image">
 79 |                   <img src="./images/img2.png" alt="" />
 80 |                 </a>
 81 |                 <h3>
 82 |                   <a class="portfolio-title title second-font" href=""
 83 |                     >Campaign of exhibition of architectural field</a
 84 |                   >
 85 |                 </h3>
 86 |                 <a href="#" class="portfolio-category text--small"
 87 |                   >Photography</a
 88 |                 >
 89 |               </div>
 90 |               <div class="portfolio-item">
 91 |                 <a href="#" class="portfolio-image">
 92 |                   <img src="./images/img3.png" alt="" />
 93 |                 </a>
 94 |                 <h3>
 95 |                   <a class="portfolio-title title second-font" href=""
 96 |                     >Campaign of exhibition of architectural field</a
 97 |                   >
 98 |                 </h3>
 99 |                 <a href="#" class="portfolio-category text--small"
100 |                   >Photography</a
101 |                 >
102 |               </div>
103 |               <div class="portfolio-item">
104 |                 <a href="#" class="portfolio-image">
105 |                   <img src="./images/img4.png" alt="" />
106 |                 </a>
107 |                 <h3>
108 |                   <a class="portfolio-title title second-font" href=""
109 |                     >Campaign of exhibition of architectural field</a
110 |                   >
111 |                 </h3>
112 |                 <a href="#" class="portfolio-category text--small"
113 |                   >Photography</a
114 |                 >
115 |               </div>
116 |             </div>
117 |             <div class="portfolio-column">
118 |               <div class="portfolio-item">
119 |                 <a href="#" class="portfolio-image">
120 |                   <img src="./images/img5.png" alt="" />
121 |                 </a>
122 |                 <h3>
123 |                   <a class="portfolio-title title second-font" href=""
124 |                     >Campaign of exhibition of architectural field</a
125 |                   >
126 |                 </h3>
127 |                 <a href="#" class="portfolio-category text--small"
128 |                   >Photography</a
129 |                 >
130 |               </div>
131 |               <div class="portfolio-item">
132 |                 <a href="#" class="portfolio-image">
133 |                   <img src="./images/img6.png" alt="" />
134 |                 </a>
135 |                 <h3>
136 |                   <a class="portfolio-title title second-font" href=""
137 |                     >Campaign of exhibition of architectural field</a
138 |                   >
139 |                 </h3>
140 |                 <a href="#" class="portfolio-category text--small"
141 |                   >Photography</a
142 |                 >
143 |               </div>
144 |               <div class="portfolio-item">
145 |                 <a href="#" class="portfolio-image">
146 |                   <img src="./images/img7.png" alt="" />
147 |                 </a>
148 |                 <h3>
149 |                   <a class="portfolio-title title second-font" href=""
150 |                     >Campaign of exhibition of architectural field</a
151 |                   >
152 |                 </h3>
153 |                 <a href="#" class="portfolio-category text--small"
154 |                   >Photography</a
155 |                 >
156 |               </div>
157 |               <div class="portfolio-item">
158 |                 <a href="#" class="portfolio-image">
159 |                   <img src="./images/img8.png" alt="" />
160 |                 </a>
161 |                 <h3>
162 |                   <a class="portfolio-title title second-font" href=""
163 |                     >Campaign of exhibition of architectural field</a
164 |                   >
165 |                 </h3>
166 |                 <a href="#" class="portfolio-category text--small"
167 |                   >Photography</a
168 |                 >
169 |               </div>
170 |             </div>
171 |             <div class="portfolio-column">
172 |               <div class="portfolio-item">
173 |                 <a href="#" class="portfolio-image">
174 |                   <img src="./images/img9.png" alt="" />
175 |                 </a>
176 |                 <h3>
177 |                   <a class="portfolio-title title second-font" href=""
178 |                     >Campaign of exhibition of architectural field</a
179 |                   >
180 |                 </h3>
181 |                 <a href="#" class="portfolio-category text--small"
182 |                   >Photography</a
183 |                 >
184 |               </div>
185 |               <div class="portfolio-item">
186 |                 <a href="#" class="portfolio-image">
187 |                   <img src="./images/img10.png" alt="" />
188 |                 </a>
189 |                 <h3>
190 |                   <a class="portfolio-title title second-font" href=""
191 |                     >Campaign of exhibition of architectural field</a
192 |                   >
193 |                 </h3>
194 |                 <a href="#" class="portfolio-category text--small"
195 |                   >Photography</a
196 |                 >
197 |               </div>
198 |               <div class="portfolio-item">
199 |                 <a href="#" class="portfolio-image">
200 |                   <img src="./images/img11.png" alt="" />
201 |                 </a>
202 |                 <h3>
203 |                   <a class="portfolio-title title second-font" href=""
204 |                     >Campaign of exhibition of architectural field</a
205 |                   >
206 |                 </h3>
207 |                 <a href="#" class="portfolio-category text--small"
208 |                   >Photography</a
209 |                 >
210 |               </div>
211 |             </div>
212 |           </div>
213 |           <a href="#" class="btn btn--primary portfolio-link"> Get Started </a>
214 |         </div>
215 |       </section>
216 |       <section class="partner" id="partners">
217 |         <div class="container">
218 |           <div class="partner-main">
219 |             <a href="#" class="partner-item">
220 |               <img src="./images/logo1.png" alt="" />
221 |             </a>
222 |             <a href="#" class="partner-item">
223 |               <img src="./images/logo2.png" alt="" />
224 |             </a>
225 |             <a href="#" class="partner-item">
226 |               <img src="./images/logo3.png" alt="" />
227 |             </a>
228 |             <a href="#" class="partner-item">
229 |               <img src="./images/logo4.png" alt="" />
230 |             </a>
231 |             <a href="#" class="partner-item">
232 |               <img src="./images/logo5.png" alt="" />
233 |             </a>
234 |             <a href="#" class="partner-item">
235 |               <img src="./images/logo6.png" alt="" />
236 |             </a>
237 |             <a href="#" class="partner-item">
238 |               <img src="./images/logo7.png" alt="" />
239 |             </a>
240 |             <a href="#" class="partner-item">
241 |               <img src="./images/logo8.png" alt="" />
242 |             </a>
243 |           </div>
244 |         </div>
245 |       </section>
246 |       <section class="team" id="team">
247 |         <div class="container">
248 |           <div class="team-main">
249 |             <div class="team-content">
250 |               <h2 class="team-heading heading second-font">
251 |                 Our team will be Happy to help you
252 |               </h2>
253 |               <p class="team-desc">
254 |                 Phasellus pulvinar iaculis nunc at placerat. Sed porta
255 |                 sollicitudin eros, vel sagittis turpis consequat nec.
256 |               </p>
257 |               <a href="#" class="btn btn--primary">Get Started</a>
258 |             </div>
259 |             <div class="team-images">
260 |               <div class="team-column">
261 |                 <a href="#" class="team-image">
262 |                   <img src="./images/team1.png" alt="" />
263 |                 </a>
264 |                 <a href="#" class="team-image">
265 |                   <img src="./images/team2.png" class="team-img2" alt="" />
266 |                 </a>
267 |               </div>
268 |               <div class="team-column">
269 |                 <a href="#" class="team-image">
270 |                   <img src="./images/team3.png" alt="" />
271 |                 </a>
272 |               </div>
273 |             </div>
274 |           </div>
275 |         </div>
276 |       </section>
277 |       <section class="blog" id="blog">
278 |         <div class="container">
279 |           <div class="blog-header">
280 |             <h2 class="blog-heading heading">Take a look at our services</h2>
281 |             <p class="blog-desc text">
282 |               Integer eu metus at orci scelerisque rutrum. Vivamus condimentu
283 |               ipsum vitae iaculis cursus, turpis nisl.
284 |             </p>
285 |           </div>
286 |           <div class="blog-list">
287 |             <div class="blog-item">
288 |               <a href="#" class="blog-image">
289 |                 <img src="./images/blog1.png" alt="" />
290 |               </a>
291 |               <h3>
292 |                 <a class="blog-title title" href=""
293 |                   >Illustration development basics for beginners</a
294 |                 >
295 |               </h3>
296 |               <a href="#" class="blog-category text--small">Design</a>
297 |             </div>
298 |             <div class="blog-item">
299 |               <a href="#" class="blog-image">
300 |                 <img src="./images/blog2.png" alt="" />
301 |               </a>
302 |               <h3>
303 |                 <a class="blog-title title" href=""
304 |                   >Illustration development basics for beginners</a
305 |                 >
306 |               </h3>
307 |               <a href="#" class="blog-category text--small">Design</a>
308 |             </div>
309 |             <div class="blog-item">
310 |               <a href="#" class="blog-image">
311 |                 <img src="./images/blog3.png" alt="" />
312 |               </a>
313 |               <h3>
314 |                 <a class="blog-title title" href=""
315 |                   >Illustration development basics for beginners</a
316 |                 >
317 |               </h3>
318 |               <a href="#" class="blog-category text--small">Design</a>
319 |             </div>
320 |           </div>
321 |         </div>
322 |       </section>
323 |       <section class="contact" id="contact">
324 |         <div class="container contact-container">
325 |           <div class="contact-header">
326 |             <h2 class="contact-heading heading">
327 |               Contact us to <strong>Grow your Business</strong>
328 |             </h2>
329 |             <p class="contact-desc text">
330 |               Integer eu metus at orci scelerisque rutrum. Vivamus condimentum,
331 |               ipsum vitae iaculis cursus, turpis nisl ultricies massa.
332 |             </p>
333 |           </div>
334 |           <form action="javascript:void(0);" class="contact-form">
335 |             <input
336 |               type="text"
337 |               class="contact-input contact-field"
338 |               placeholder="evondev"
339 |               required
340 |             />
341 |             <input
342 |               type="email"
343 |               class="contact-input contact-field"
344 |               placeholder="E.g., a.octavian@gmail.com"
345 |               required
346 |             />
347 |             <textarea
348 |               class="contact-area contact-field"
349 |               placeholder="Your message"
350 |               required
351 |               minlength="50"
352 |             ></textarea>
353 |             <button type="submit" class="btn btn--secondary">
354 |               Send Message
355 |             </button>
356 |           </form>
357 |         </div>
358 |       </section>
359 |     </main>
360 |     <footer class="footer">
361 |       <div class="footer-top">
362 |         <div class="container">
363 |           <div class="footer-main">
364 |             <div class="footer-column">
365 |               <a href="index.html" class="footer-logo"
366 |                 ><img src="./images/logo-footer.png" alt=""
367 |               /></a>
368 |               <div class="footer-desc text">
369 |                 Vivamus dapibus et purus quis mollis. Mauris tempus tortor vel
370 |                 mi eleifend laoreet. Nulla laoreet sapien erat.
371 |               </div>
372 |               <div class="social">
373 |                 <a href="#" class="social-item">
374 |                   <ion-icon name="logo-facebook"></ion-icon>
375 |                 </a>
376 |                 <a href="#" class="social-item">
377 |                   <ion-icon name="logo-twitter"></ion-icon>
378 |                 </a>
379 |                 <a href="#" class="social-item">
380 |                   <ion-icon name="logo-instagram"></ion-icon>
381 |                 </a>
382 |                 <a href="#" class="social-item">
383 |                   <ion-icon name="logo-dribbble"></ion-icon>
384 |                 </a>
385 |               </div>
386 |             </div>
387 |             <div class="footer-column">
388 |               <h3 class="footer-heading second-font">Usefull Links</h3>
389 |               <ul class="footer-links">
390 |                 <li class="footer-item">
391 |                   <a href="#" class="footer-link">About Us</a>
392 |                 </li>
393 |                 <li class="footer-item">
394 |                   <a href="#" class="footer-link">Contact us</a>
395 |                 </li>
396 |                 <li class="footer-item">
397 |                   <a href="#" class="footer-link">Terms of Services</a>
398 |                 </li>
399 |                 <li class="footer-item">
400 |                   <a href="#" class="footer-link">Plan & Precing</a>
401 |                 </li>
402 |                 <li class="footer-item">
403 |                   <a href="#" class="footer-link">Site Map</a>
404 |                 </li>
405 |               </ul>
406 |             </div>
407 |             <div class="footer-column">
408 |               <h3 class="footer-heading second-font">Contact Us</h3>
409 |               <ul class="footer-info">
410 |                 <li>Phone Number 2: ( + 051 ) 958 23 78 51</li>
411 |                 <li>
412 |                   Phone Number 2:
413 |                   <span class="footer-highlight">( + 051 ) 958 23 78 51</span>
414 |                 </li>
415 |               </ul>
416 |               <ul class="footer-info">
417 |                 <li>
418 |                   <a href="mailto:support@ocatavian.io"
419 |                     >Email: support@ocatavian.io</a
420 |                   >
421 |                 </li>
422 |                 <li>Fax: support@ocatavian.io</li>
423 |               </ul>
424 |               <ul class="footer-info">
425 |                 <li>
426 |                   Address: Envato Pty Ltd 13/2 Permanent ST melbourne VLC 3000 -
427 |                   Australia
428 |                 </li>
429 |               </ul>
430 |             </div>
431 |           </div>
432 |         </div>
433 |       </div>
434 |       <div class="footer-bottom">
435 |         <div class="container footer-container">
436 |           <a href="#" class="footer-rocket">
437 |             <ion-icon name="rocket"></ion-icon>
438 |           </a>
439 |           <p>
440 |             Copyright © 2020 Octavian, Designed by <a href="#">TexTheme</a> All
441 |             Rights Reserved.
442 |           </p>
443 |         </div>
444 |       </div>
445 |     </footer>
446 |     <script src="./scripts/app.js"></script>
447 |   </body>
448 | </html>
449 | 


--------------------------------------------------------------------------------
/sass/_base.scss:
--------------------------------------------------------------------------------
  1 | html {
  2 |   scroll-behavior: smooth;
  3 | }
  4 | body {
  5 |   font-family: $primary-font;
  6 |   font-size: 16px;
  7 |   line-height: 1;
  8 |   color: $gray-light;
  9 |   max-width: 1920px;
 10 |   margin: 0 auto;
 11 | }
 12 | input,
 13 | button,
 14 | textarea,
 15 | select {
 16 |   font-family: $primary-font;
 17 |   font-size: 14px;
 18 |   outline: none;
 19 |   border: 0;
 20 | }
 21 | input {
 22 |   line-height: normal;
 23 | }
 24 | section[id] {
 25 |   scroll-margin-top: 30px;
 26 | }
 27 | .container {
 28 |   max-width: 1200px;
 29 |   margin: 0 auto;
 30 |   padding: 0 15px;
 31 | }
 32 | .second-font {
 33 |   font-family: $secondary-font;
 34 | }
 35 | .btn {
 36 |   cursor: pointer;
 37 |   outline: none;
 38 |   display: inline-flex;
 39 |   align-items: center;
 40 |   justify-content: center;
 41 |   color: white;
 42 |   font-weight: bold;
 43 |   font-size: 16px;
 44 |   font-family: $primary-font;
 45 |   height: 55px;
 46 |   padding-left: 70px;
 47 |   padding-right: 70px;
 48 |   border-radius: 6px;
 49 |   &--primary {
 50 |     background-color: $blue-color;
 51 |   }
 52 |   &--secondary {
 53 |     background-color: transparent;
 54 |     background-image: linear-gradient(to right, #f475a0, #feac3d);
 55 |   }
 56 | }
 57 | a {
 58 |   color: inherit;
 59 | }
 60 | h1,
 61 | h2,
 62 | h3,
 63 | h4,
 64 | h5,
 65 | h6 {
 66 |   color: $gray;
 67 | }
 68 | .heading {
 69 |   font-size: 36px;
 70 |   line-height: lineH(56, 36);
 71 |   font-weight: 800;
 72 |   font-family: $secondary-font;
 73 |   margin-bottom: 30px;
 74 | }
 75 | .title {
 76 |   font-size: 22px;
 77 |   font-weight: 800;
 78 |   font-family: $secondary-font;
 79 |   line-height: lineH(35, 22);
 80 |   margin-bottom: 20px;
 81 |   display: block;
 82 |   color: $gray;
 83 | }
 84 | .text {
 85 |   font-size: 18px;
 86 |   line-height: lineH(34, 18);
 87 | }
 88 | .text--small {
 89 |   font-size: 14px;
 90 | }
 91 | @include maxw(767px) {
 92 |   .heading {
 93 |     font-size: 25px;
 94 |     margin-bottom: 20px;
 95 |   }
 96 |   .title {
 97 |     font-size: 20px;
 98 |     margin-bottom: 10px;
 99 |   }
100 |   .text {
101 |     font-size: 16px;
102 |   }
103 | }
104 | 


--------------------------------------------------------------------------------
/sass/_blog.scss:
--------------------------------------------------------------------------------
 1 | .blog {
 2 |   padding: 150px 0;
 3 |   &-header {
 4 |     max-width: 560px;
 5 |     margin: 0 auto 100px;
 6 |     text-align: center;
 7 |   }
 8 |   &-list {
 9 |     display: grid;
10 |     grid-template-columns: repeat(3, 1fr);
11 |     grid-gap: 30px;
12 |   }
13 |   &-image {
14 |     margin-bottom: 40px;
15 |     display: block;
16 |   }
17 |   &-category {
18 |     color: $gray-light;
19 |   }
20 |   @include maxw(1023px) {
21 |     padding: 100px 0;
22 |     &-header {
23 |       margin-bottom: 50px;
24 |     }
25 |   }
26 |   @include maxw(767px) {
27 |     padding: 50px 0;
28 |     &-header {
29 |       margin-bottom: 30px;
30 |     }
31 |     &-list {
32 |       grid-template-columns: 1fr;
33 |     }
34 |     &-image {
35 |       margin-bottom: 20px;
36 |     }
37 |     &-image img {
38 |       height: auto;
39 |       object-fit: cover;
40 |       width: 100%;
41 |     }
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/sass/_contact.scss:
--------------------------------------------------------------------------------
 1 | .contact {
 2 |   padding: 150px 0;
 3 |   background: url("../images/contact-bg.png") no-repeat center / cover;
 4 |   &-container {
 5 |     max-width: 600px;
 6 |     margin: 0 auto;
 7 |   }
 8 |   &-header {
 9 |     margin: 0 auto 100px;
10 |     text-align: center;
11 |   }
12 |   &-heading {
13 |     font-weight: 400;
14 |   }
15 |   &-heading,
16 |   &-desc {
17 |     color: white;
18 |   }
19 |   &-field {
20 |     padding: 20px 30px;
21 |     display: block;
22 |     width: 100%;
23 |     border: 1px solid rgba(white, 0.5);
24 |     border-radius: 4px;
25 |     margin-bottom: 30px;
26 |     background-color: transparent;
27 |     color: white;
28 |     transition: border 0.2s linear;
29 |     &::-webkit-input-placeholder {
30 |       color: white;
31 |     }
32 |     &::-moz-input-placeholder {
33 |       color: white;
34 |     }
35 |     &:focus {
36 |       border-color: white;
37 |     }
38 |   }
39 |   &-area {
40 |     line-height: 1.55;
41 |     resize: none;
42 |     min-height: 100px;
43 |   }
44 |   @include maxw(1023px) {
45 |     padding: 100px 0;
46 |     &-header {
47 |       margin-bottom: 50px;
48 |     }
49 |   }
50 |   @include maxw(767px) {
51 |     padding: 50px 0;
52 |     &-header {
53 |       margin-bottom: 30px;
54 |     }
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/sass/_footer.scss:
--------------------------------------------------------------------------------
  1 | .footer {
  2 |   &-top {
  3 |     padding: 150px 0px;
  4 |     background-color: $gray-dark;
  5 |   }
  6 |   &-main {
  7 |     display: grid;
  8 |     grid-template-columns: repeat(3, 1fr);
  9 |     grid-gap: 0 130px;
 10 |   }
 11 |   &-logo {
 12 |     display: inline-block;
 13 |     margin-bottom: 40px;
 14 |   }
 15 |   &-desc {
 16 |     font-size: 16px;
 17 |     margin-bottom: 40px;
 18 |   }
 19 |   .social {
 20 |     display: flex;
 21 |     align-items: center;
 22 |     gap: 0 30px;
 23 |   }
 24 |   .social-item {
 25 |     cursor: pointer;
 26 |     color: $gray-light;
 27 |     &:hover {
 28 |       color: white;
 29 |     }
 30 |   }
 31 |   &-heading {
 32 |     font-size: 18px;
 33 |     color: white;
 34 |     margin-bottom: 40px;
 35 |     font-weight: bold;
 36 |   }
 37 |   &-links {
 38 |     list-style: none;
 39 |   }
 40 |   &-item {
 41 |     margin-bottom: 30px;
 42 |   }
 43 |   &-link {
 44 |     display: inline-block;
 45 |     color: $gray-light;
 46 |   }
 47 |   &-info {
 48 |     list-style: none;
 49 |     margin-bottom: 40px;
 50 |   }
 51 |   &-info li {
 52 |     margin-bottom: 15px;
 53 |     line-height: lineH(30, 16);
 54 |   }
 55 |   &-highlight {
 56 |     color: white;
 57 |   }
 58 |   &-bottom {
 59 |     background-color: $gray-darker;
 60 |     line-height: 1.6;
 61 |   }
 62 |   &-bottom a {
 63 |     color: white;
 64 |   }
 65 |   &-container {
 66 |     padding-top: 60px;
 67 |     padding-bottom: 60px;
 68 |     position: relative;
 69 |   }
 70 |   &-rocket {
 71 |     color: white;
 72 |     border-radius: 4px;
 73 |     width: 70px;
 74 |     height: 70px;
 75 |     display: flex;
 76 |     justify-content: center;
 77 |     align-items: center;
 78 |     background-color: $blue-color;
 79 |     font-size: 20px;
 80 |     position: absolute;
 81 |     top: 0;
 82 |     right: 0;
 83 |     transform: translateY(-50%);
 84 |     z-index: 2;
 85 |   }
 86 |   @include maxw(1023px) {
 87 |     &-top {
 88 |       padding: 100px 0;
 89 |     }
 90 |     &-main {
 91 |       grid-gap: 0 30px;
 92 |     }
 93 |   }
 94 |   @include maxw(767px) {
 95 |     &-top {
 96 |       padding: 50px 0;
 97 |     }
 98 |     &-main {
 99 |       grid-template-columns: 1fr;
100 |       grid-gap: 30px 0;
101 |     }
102 |     &-container {
103 |       padding: 35px 15px;
104 |     }
105 |     &-rocket {
106 |       width: 50px;
107 |       height: 50px;
108 |       right: 15px;
109 |     }
110 |   }
111 | }
112 | 


--------------------------------------------------------------------------------
/sass/_function.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:math';
2 | @function lineH($s, $h) {
3 |   @return math.div($s, $h);
4 | }
5 | 


--------------------------------------------------------------------------------
/sass/_header.scss:
--------------------------------------------------------------------------------
 1 | .header {
 2 |   &-logo {
 3 |     display: inline-block;
 4 |   }
 5 |   &-main {
 6 |     display: flex;
 7 |     justify-content: space-between;
 8 |     align-items: center;
 9 |     padding: 40px 0;
10 |   }
11 |   &-phone {
12 |     color: $gray;
13 |     font-weight: 300;
14 |     a {
15 |       font-weight: 600;
16 |       margin-left: 15px;
17 |       color: inherit;
18 |     }
19 |   }
20 | }
21 | .navigation {
22 |   display: flex;
23 |   align-items: center;
24 |   gap: 0 60px;
25 | }
26 | @include maxw(1023px) {
27 |   .header {
28 |     margin-bottom: 20px;
29 |   }
30 |   .header-phone {
31 |     display: none;
32 |   }
33 |   .navigation {
34 |     gap: 0 25px;
35 |   }
36 |   .header-main {
37 |     padding: 20px 0;
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/sass/_hero.scss:
--------------------------------------------------------------------------------
 1 | .hero {
 2 |   margin-bottom: 200px;
 3 |   position: relative;
 4 |   display: block;
 5 |   &-image {
 6 |     margin-left: auto;
 7 |     max-width: 65%;
 8 |   }
 9 |   &-content {
10 |     position: absolute;
11 |     top: 50%;
12 |     transform: translateY(-50%);
13 |     z-index: 2;
14 |     left: 20%;
15 |   }
16 |   &-caption {
17 |     font-size: 72px;
18 |     font-weight: 600;
19 |     margin-bottom: 5px;
20 |   }
21 |   &-heading {
22 |     font-weight: 800;
23 |     font-size: 150px;
24 |     text-transform: uppercase;
25 |     margin-bottom: 40px;
26 |   }
27 |   &-link {
28 |     font-size: 18px;
29 |     text-decoration: underline;
30 |     color: $gray-light;
31 |     display: inline-block;
32 |     font-weight: 600;
33 |   }
34 |   @include maxw(1023px) {
35 |     margin-bottom: 100px;
36 |     &-caption {
37 |       font-size: 40px;
38 |     }
39 |     &-heading {
40 |       font-size: 100px;
41 |     }
42 |   }
43 |   @include maxw(767px) {
44 |     margin-bottom: 50px;
45 |     &-content {
46 |       left: 15px;
47 |     }
48 |     &-caption {
49 |       font-size: 20px;
50 |     }
51 |     &-heading {
52 |       font-size: 40px;
53 |       margin-bottom: 20px;
54 |     }
55 |     &-link {
56 |       font-size: 16px;
57 |     }
58 |     &-image {
59 |       max-width: 75%;
60 |     }
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/sass/_menu.scss:
--------------------------------------------------------------------------------
 1 | .menu {
 2 |   position: fixed;
 3 |   right: 0;
 4 |   top: 0;
 5 |   bottom: 0;
 6 |   width: 300px;
 7 |   background-color: white;
 8 |   z-index: 9999;
 9 |   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
10 |   transform: translateX(100%);
11 |   transition: transform 0.2s linear;
12 |   will-change: transform;
13 |   &.is-active {
14 |     transform: translateX(0);
15 |   }
16 |   &-list {
17 |     list-style: none;
18 |     height: 100%;
19 |     padding: 70px 20px 20px;
20 |   }
21 |   &-item {
22 |     margin-bottom: 15px;
23 |   }
24 |   &-link {
25 |     display: block;
26 |     padding: 15px;
27 |     text-transform: capitalize;
28 |     color: $gray;
29 |     border-radius: 6px;
30 |     transition: all 0.15s linear;
31 |     &:hover {
32 |       color: white;
33 |       background-color: $blue-color;
34 |     }
35 |   }
36 |   &-close {
37 |     cursor: pointer;
38 |     font-size: 30px;
39 |     position: absolute;
40 |     right: 20px;
41 |     top: 20px;
42 |   }
43 |   &-phone {
44 |     padding: 15px;
45 |     color: $gray;
46 |     a {
47 |       color: inherit;
48 |       font-weight: bold;
49 |     }
50 |   }
51 |   &-toggle {
52 |     cursor: pointer;
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/sass/_mixin.scss:
--------------------------------------------------------------------------------
 1 | @mixin maxw($breakpoint) {
 2 |   @media screen and (max-width: $breakpoint) {
 3 |     @content;
 4 |   }
 5 | }
 6 | @mixin minw($breakpoint) {
 7 |   @media screen and (min-width: $breakpoint) {
 8 |     @content;
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/sass/_partner.scss:
--------------------------------------------------------------------------------
 1 | .partner {
 2 |   margin-bottom: 150px;
 3 |   &-main {
 4 |     display: grid;
 5 |     grid-template-columns: repeat(4, 1fr);
 6 |     grid-gap: 90px 0;
 7 |   }
 8 |   &-item {
 9 |     padding: 0 50px;
10 |     display: flex;
11 |     justify-content: center;
12 |     align-items: center;
13 |     cursor: pointer;
14 |     transition: opacity 0.2s linear;
15 |     &:hover {
16 |       opacity: 0.1;
17 |     }
18 |   }
19 |   @include maxw(1023px) {
20 |     margin-bottom: 100px;
21 |     &-item {
22 |       padding: 0 25px;
23 |     }
24 |   }
25 |   @include maxw(767px) {
26 |     margin-bottom: 50px;
27 |     &-main {
28 |       grid-gap: 25px 15px;
29 |       grid-template-columns: 1fr 1fr;
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/sass/_portfolio.scss:
--------------------------------------------------------------------------------
 1 | .portfolio {
 2 |   margin-bottom: 200px;
 3 |   &-list {
 4 |     display: grid;
 5 |     grid-template-columns: repeat(3, 1fr);
 6 |     grid-gap: 0 90px;
 7 |     margin-bottom: 95px;
 8 |   }
 9 |   &-image {
10 |     margin-bottom: 40px;
11 |     display: block;
12 |   }
13 |   &-category {
14 |     color: $gray-light;
15 |   }
16 |   &-column {
17 |     display: flex;
18 |     flex-direction: column;
19 |     gap: 85px 0;
20 |   }
21 |   &-link {
22 |     position: relative;
23 |     left: 50%;
24 |     transform: translateX(-50%);
25 |   }
26 |   @include maxw(1023px) {
27 |     margin-bottom: 100px;
28 |     &-list {
29 |       grid-gap: 0 20px;
30 |       margin-bottom: 45px;
31 |     }
32 |     &-column {
33 |       gap: 40px 0;
34 |     }
35 |   }
36 |   @include maxw(767px) {
37 |     margin-bottom: 50px;
38 |     &-list {
39 |       grid-template-columns: 1fr;
40 |       grid-gap: 40px 0;
41 |     }
42 |     &-image {
43 |       margin-bottom: 30px;
44 |     }
45 |     &-image img {
46 |       width: 100%;
47 |       height: auto;
48 |       object-fit: cover;
49 |     }
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/sass/_reset.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | * {
 5 |   margin: 0;
 6 |   padding: 0;
 7 | }
 8 | *,
 9 | *:before,
10 | *:after {
11 |   box-sizing: border-box;
12 | }
13 | input,
14 | textarea,
15 | select,
16 | button {
17 |   outline: none;
18 | }
19 | input {
20 |   line-height: normal;
21 | }
22 | label,
23 | button {
24 |   cursor: pointer;
25 | }
26 | a {
27 |   text-decoration: none;
28 | }
29 | img {
30 |   display: block;
31 |   max-width: 100%;
32 | }
33 | 


--------------------------------------------------------------------------------
/sass/_team.scss:
--------------------------------------------------------------------------------
 1 | .team {
 2 |   padding: 150px 0;
 3 |   background-color: $gray-lighter;
 4 |   &-main {
 5 |     display: flex;
 6 |     align-items: center;
 7 |     justify-content: space-between;
 8 |     gap: 0 30px;
 9 |   }
10 |   &-desc {
11 |     font-size: 18px;
12 |     line-height: lineH(34, 18);
13 |     margin-bottom: 60px;
14 |   }
15 |   &-images {
16 |     display: flex;
17 |     align-items: center;
18 |     gap: 0 30px;
19 |   }
20 |   &-img2 {
21 |     margin-top: 30px;
22 |     margin-left: auto;
23 |   }
24 |   @include minw(1024px) {
25 |     &-content {
26 |       max-width: 370px;
27 |       flex-shrink: 0;
28 |       width: 100%;
29 |     }
30 |     &-images {
31 |       width: 100%;
32 |       max-width: 670px;
33 |     }
34 |   }
35 |   @include maxw(1023px) {
36 |     padding: 100px 0;
37 |     &-main {
38 |       flex-direction: column;
39 |       gap: 60px 0;
40 |     }
41 |   }
42 |   @include maxw(767px) {
43 |     padding: 50px 0;
44 |     &-desc {
45 |       margin-bottom: 30px;
46 |     }
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/sass/_variables.scss:
--------------------------------------------------------------------------------
1 | $primary-font: "Open sans", sans-serif;
2 | $secondary-font: "Raleway", sans-serif;
3 | $gray: #393e46;
4 | $gray-light: #6a727f;
5 | $gray-dark: #282f3a;
6 | $gray-darker: #252b36;
7 | $blue-color: #4944f2;
8 | $gray-lighter: #f7f8f9;
9 | 


--------------------------------------------------------------------------------
/sass/app.scss:
--------------------------------------------------------------------------------
 1 | @import "variables";
 2 | @import "mixin";
 3 | @import "function";
 4 | @import "reset";
 5 | @import "base";
 6 | @import "header";
 7 | @import "hero";
 8 | @import "portfolio";
 9 | @import "partner";
10 | @import "team";
11 | @import "blog";
12 | @import "contact";
13 | @import "footer";
14 | @import "menu";
15 | 


--------------------------------------------------------------------------------
/scripts/app.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |   const menuOpen = document.querySelector(".menu-toggle");
 3 |   const menuClose = document.querySelector(".menu-close");
 4 |   const menu = document.querySelector(".menu");
 5 |   if (!menuOpen || !menuClose || !menu) return;
 6 |   menuOpen.addEventListener("click", function () {
 7 |     menu.classList.add("is-active");
 8 |   });
 9 |   menuClose.addEventListener("click", function () {
10 |     menu.classList.remove("is-active");
11 |   });
12 |   document.addEventListener("click", function (e) {
13 |     if (!menu.contains(e.target) && !e.target.matches(".menu-toggle")) {
14 |       menu.classList.remove("is-active");
15 |     }
16 |   });
17 | });
18 | 


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