Index: arms/index/assets/css/style.css =================================================================== diff -u -r7866ee9ae32afafad447d3082e982073d85f767a -rad67a7ed8c6999e2cf07c7ca878ee6f8aa5f5e30 --- arms/index/assets/css/style.css (.../style.css) (revision 7866ee9ae32afafad447d3082e982073d85f767a) +++ arms/index/assets/css/style.css (.../style.css) (revision ad67a7ed8c6999e2cf07c7ca878ee6f8aa5f5e30) @@ -10,18 +10,18 @@ # General --------------------------------------------------------------*/ body { - font-family: "Open Sans", sans-serif; - color: #272829; + font-family: "Open Sans", sans-serif; + color: #272829; } a { - color: #0563bb; - text-decoration: none; + color: #0563bb; + text-decoration: none; } a:hover { - color: #067ded; - text-decoration: none; + color: #067ded; + text-decoration: none; } h1, @@ -30,116 +30,116 @@ h4, h5, h6 { - font-family: "Raleway", sans-serif; + font-family: "Raleway", sans-serif; } /*-------------------------------------------------------------- # Back to top button --------------------------------------------------------------*/ .back-to-top { - position: fixed; - visibility: hidden; - opacity: 0; - right: 15px; - bottom: 15px; - z-index: 996; - background: #0563bb; - width: 40px; - height: 40px; - border-radius: 50px; - transition: all 0.4s; + position: fixed; + visibility: hidden; + opacity: 0; + right: 15px; + bottom: 15px; + z-index: 996; + background: #0563bb; + width: 40px; + height: 40px; + border-radius: 50px; + transition: all 0.4s; } .back-to-top i { - font-size: 28px; - color: #fff; - line-height: 0; + font-size: 28px; + color: #fff; + line-height: 0; } .back-to-top:hover { - background: #0678e3; - color: #fff; + background: #0678e3; + color: #fff; } .back-to-top.active { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } /*-------------------------------------------------------------- # Preloader --------------------------------------------------------------*/ #preloader { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 9999; - overflow: hidden; - background: #fff; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + overflow: hidden; + background: #fff; } #preloader:before { - content: ""; - position: fixed; - top: calc(50% - 30px); - left: calc(50% - 30px); - border: 6px solid #0563bb; - border-top-color: #fff; - border-bottom-color: #fff; - border-radius: 50%; - width: 60px; - height: 60px; - animation: animate-preloader 1s linear infinite; + content: ""; + position: fixed; + top: calc(50% - 30px); + left: calc(50% - 30px); + border: 6px solid #0563bb; + border-top-color: #fff; + border-bottom-color: #fff; + border-radius: 50%; + width: 60px; + height: 60px; + animation: animate-preloader 1s linear infinite; } @keyframes animate-preloader { - 0% { - transform: rotate(0deg); - } + 0% { + transform: rotate(0deg); + } - 100% { - transform: rotate(360deg); - } + 100% { + transform: rotate(360deg); + } } /*-------------------------------------------------------------- # Disable aos animation delay on mobile devices --------------------------------------------------------------*/ @media screen and (max-width: 768px) { - [data-aos-delay] { - transition-delay: 0 !important; - } + [data-aos-delay] { + transition-delay: 0 !important; + } } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ #header { - position: fixed; - top: 0; - left: 0; - bottom: 0; - z-index: 9997; - transition: all 0.5s; - padding: 15px; - overflow-y: auto; + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 9997; + transition: all 0.5s; + padding: 15px; + overflow-y: auto; } @media (max-width: 991px) { - #header { - width: 300px; - background: #fff; - border-right: 1px solid #e6e9ec; - left: -300px; - } + #header { + width: 300px; + background: #fff; + border-right: 1px solid #e6e9ec; + left: -300px; + } } @media (min-width: 991px) { - #main { - margin-left: 100px; - } + #main { + margin-left: 100px; + } } /*-------------------------------------------------------------- @@ -149,1082 +149,1150 @@ * Desktop Navigation */ .nav-menu { - padding: 0; - display: block; + padding: 0; + display: block; } .nav-menu * { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } -.nav-menu>ul>li { - position: relative; - white-space: nowrap; +.nav-menu > ul > li { + position: relative; + white-space: nowrap; } .nav-menu a, .nav-menu a:focus { - display: flex; - align-items: center; - color: #45505b; - padding: 10px 18px; - margin-bottom: 8px; - transition: 0.3s; - font-size: 15px; - border-radius: 50px; - background: #f2f3f5; - height: 56px; - width: 100%; - overflow: hidden; - transition: 0.3s; + display: flex; + align-items: center; + color: #45505b; + padding: 10px 18px; + margin-bottom: 8px; + transition: 0.3s; + font-size: 15px; + border-radius: 50px; + background: #f2f3f5; + height: 56px; + width: 100%; + overflow: hidden; + transition: 0.3s; } .nav-menu a i, .nav-menu a:focus i { - font-size: 20px; + font-size: 20px; } .nav-menu a span, .nav-menu a:focus span { - padding: 0 5px 0 7px; - color: #45505b; + padding: 0 5px 0 7px; + color: #45505b; } @media (min-width: 992px) { + .nav-menu a, + .nav-menu a:focus { + width: 56px; + } - .nav-menu a, - .nav-menu a:focus { - width: 56px; - } - - .nav-menu a span, - .nav-menu a:focus span { - display: none; - color: #fff; - } + .nav-menu a span, + .nav-menu a:focus span { + display: none; + color: #fff; + } } .nav-menu a:hover, .nav-menu .active, .nav-menu .active:focus, -.nav-menu li:hover>a { - color: #fff; - background: #0563bb; +.nav-menu li:hover > a { + color: #fff; + background: #0563bb; } .nav-menu a:hover span, .nav-menu .active span, .nav-menu .active:focus span, -.nav-menu li:hover>a span { - color: #fff; +.nav-menu li:hover > a span { + color: #fff; } .nav-menu a:hover, -.nav-menu li:hover>a { - width: 100%; - color: #fff; +.nav-menu li:hover > a { + width: 100%; + color: #fff; } .nav-menu a:hover span, -.nav-menu li:hover>a span { - display: block; +.nav-menu li:hover > a span { + display: block; } /** * Mobile Navigation */ .mobile-nav-toggle { - position: fixed; - right: 10px; - top: 10px; - z-index: 9998; - border: 0; - background: none; - font-size: 28px; - transition: all 0.4s; - outline: none !important; - line-height: 0; - cursor: pointer; - border-radius: 50px; - padding: 5px; + position: fixed; + right: 10px; + top: 10px; + z-index: 9998; + border: 0; + background: none; + font-size: 28px; + transition: all 0.4s; + outline: none !important; + line-height: 0; + cursor: pointer; + border-radius: 50px; + padding: 5px; } .mobile-nav-toggle i { - color: #45505b; + color: #45505b; } .mobile-nav-active { - overflow: hidden; + overflow: hidden; } .mobile-nav-active #header { - left: 0; + left: 0; } .mobile-nav-active .mobile-nav-toggle { - color: #fff; - background-color: #0563bb; + color: #fff; + background-color: #0563bb; } /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ #hero { - width: 100%; - height: 100vh; - background: radial-gradient( - farthest-side ellipse at 10% 0, - rgba(40, 40, 40, 0.9), - rgba(90, 100, 130, 0.89), - rgba(60, 60, 60, 0.9) - ), - url("../../reference/light-blue/img/bgnoise_lg_dark.png"); - background: -webkit-radial-gradient( - 10% 0, - farthest-side ellipse, - rgba(40, 40, 40, 0.9), - rgba(90, 100, 130, 0.89), - rgba(60, 60, 60, 0.9) - ), - url("../../reference/light-blue/img/bgnoise_lg_dark.png"); - background: -moz-radial-gradient( - 10% 0, - farthest-side ellipse, - rgba(40, 40, 40, 0.9), - rgba(90, 100, 130, 0.89), - rgba(60, 60, 60, 0.9) - ), - url("../../reference/light-blue/img/bgnoise_lg_dark.png"); - background-size: cover; - position: relative; + width: 100%; + height: 100vh; + background: radial-gradient( + farthest-side ellipse at 10% 0, + rgba(40, 40, 40, 0.9), + rgba(90, 100, 130, 0.89), + rgba(60, 60, 60, 0.9) + ), + url("../../reference/light-blue/img/bgnoise_lg_dark.png"); + background: -webkit-radial-gradient( + 10% 0, + farthest-side ellipse, + rgba(40, 40, 40, 0.9), + rgba(90, 100, 130, 0.89), + rgba(60, 60, 60, 0.9) + ), + url("../../reference/light-blue/img/bgnoise_lg_dark.png"); + background: -moz-radial-gradient( + 10% 0, + farthest-side ellipse, + rgba(40, 40, 40, 0.9), + rgba(90, 100, 130, 0.89), + rgba(60, 60, 60, 0.9) + ), + url("../../reference/light-blue/img/bgnoise_lg_dark.png"); + background-size: cover; + position: relative; } @media (min-width: 992px) { - #hero { - padding-left: 160px; - } + #hero { + padding-left: 160px; + } } #hero:before { - content: ""; - position: absolute; - bottom: 0; - top: 0; - left: 0; - right: 0; + content: ""; + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0; } #hero h1 { - margin: 0; - font-size: 64px; - font-weight: 700; - line-height: 56px; - color: #45505b; + margin: 0; + font-size: 64px; + font-weight: 700; + line-height: 56px; + color: #45505b; } +#hero h1 img { + width: 400px; +} + #hero p { - color: #45505b; - margin: 15px 0 0 0; - font-size: 26px; - font-family: "Poppins", sans-serif; + color: #45505b; + margin: 15px 0 0 0; + font-size: 26px; + font-family: "Poppins", sans-serif; } #hero p span { - color: #0563bb; - letter-spacing: 1px; + color: #0563bb; + letter-spacing: 1px; } #hero .social-links { - margin-top: 30px; + margin-top: 30px; } #hero .social-links a { - font-size: 24px; - display: inline-block; - color: #45505b; - line-height: 1; - margin-right: 20px; - transition: 0.3s; + font-size: 24px; + display: inline-block; + color: #45505b; + line-height: 1; + margin-right: 20px; + transition: 0.3s; } #hero .social-links a:hover { - color: #0563bb; + color: #0563bb; } @media (max-width: 992px) { - #hero { - text-align: center; - } + #hero { + text-align: center; + } - #hero h1 { - font-size: 32px; - line-height: 36px; - } + #hero h1 { + font-size: 32px; + line-height: 36px; + } - #hero p { - margin-top: 10px; - font-size: 20px; - line-height: 24px; - } + #hero p { + margin-top: 10px; + font-size: 20px; + line-height: 24px; + } } /*-------------------------------------------------------------- # Sections General --------------------------------------------------------------*/ section { - padding: 60px 0; - overflow: hidden; + padding: 60px 0; + overflow: hidden; } .section-title { - text-align: center; - padding-bottom: 30px; + text-align: center; + padding-bottom: 30px; } .section-title h2 { - font-size: 32px; - font-weight: bold; - text-transform: uppercase; - margin-bottom: 20px; - padding-bottom: 20px; - position: relative; - color: #45505b; + font-size: 32px; + font-weight: bold; + text-transform: uppercase; + margin-bottom: 20px; + padding-bottom: 20px; + position: relative; + color: #45505b; } .section-title h2::before { - content: ""; - position: absolute; - display: block; - width: 120px; - height: 1px; - background: #ddd; - bottom: 1px; - left: calc(50% - 60px); + content: ""; + position: absolute; + display: block; + width: 120px; + height: 1px; + background: #ddd; + bottom: 1px; + left: calc(50% - 60px); } .section-title h2::after { - content: ""; - position: absolute; - display: block; - width: 40px; - height: 3px; - background: #0563bb; - bottom: 0; - left: calc(50% - 20px); + content: ""; + position: absolute; + display: block; + width: 40px; + height: 3px; + background: #0563bb; + bottom: 0; + left: calc(50% - 20px); } .section-title p { - margin-bottom: 0; + margin-bottom: 0; } /*-------------------------------------------------------------- # About --------------------------------------------------------------*/ .about .content h3 { - font-weight: 700; - font-size: 26px; - color: #728394; + font-weight: 700; + font-size: 26px; + color: #728394; } -.about .content ul { - list-style: none; - padding: 0; +.about .content { + margin: 100px auto; + width: 600px; } -.about .content ul li { - margin-bottom: 20px; - display: flex; - align-items: center; +.about .flow-wrap { + list-style: none; + position: relative; + height: 600px; + border-radius: 50%; } -.about .content ul strong { - margin-right: 10px; +.about .flow-item { + position: absolute; + width: 240px; + height: 240px; + border-radius: 50%; + overflow: hidden; + background-color: #fff; + opacity: 0; + transition: opacity 300ms; } -.about .content ul i { - font-size: 16px; - margin-right: 5px; - color: #0563bb; - line-height: 0; +.about .flow-item.on { + opacity: 1; } -.about .content p:last-child { - margin-bottom: 0; +.about .flow-item img { + width: 240px; + height: 240px; + object-fit: fill; } +.about .flow-item:nth-child(1) { + left: calc(50% - 120px); + top: -120px; +} + +.about .flow-item:nth-child(2) { + right: -100px; + top: 45px; +} + +.about .flow-item:nth-child(3) { + right: -100px; + top: calc(50% + 45px); +} + +.about .flow-item:nth-child(4) { + left: calc(50% - 120px); + top: calc(100% - 120px); +} + +.about .flow-item:nth-child(5) { + left: -100px; + top: calc(50% + 45px); +} + +.about .flow-item:nth-child(6) { + left: -100px; + top: 45px; +} + +.about .circle-wrap { + position: absolute; + top: 0; + z-index: -1; +} + +.about .circle-chart { + height: 600px; +} + +.circle-chart__circle { + animation: circle-chart-fill 2.4s reverse; + transform: rotate(-90deg); + transform-origin: center; + stroke: #427dd1; + animation-timing-function: cubic-bezier(0.78, 0.59, 0.19, 0.33); +} + +@keyframes circle-chart-fill { + 50% { + stroke: #55a8c7; + } + 100% { + stroke-dasharray: 0 100; + stroke: #69d4bd; + } +} + /*-------------------------------------------------------------- # Facts --------------------------------------------------------------*/ .facts .count-box { - padding: 30px 30px 25px 30px; - margin-top: 30px; - width: 100%; - position: relative; - text-align: center; - background: #fff; + padding: 30px 30px 25px 30px; + margin-top: 30px; + width: 100%; + position: relative; + text-align: center; + background: #fff; } .facts .count-box i { - position: absolute; - top: -25px; - left: 50%; - transform: translateX(-50%); - font-size: 24px; - background: #0563bb; - color: #fff; - border-radius: 50px; - display: inline-flex; - align-items: center; - justify-content: center; - width: 48px; - height: 48px; + position: absolute; + top: -25px; + left: 50%; + transform: translateX(-50%); + font-size: 24px; + background: #0563bb; + color: #fff; + border-radius: 50px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; } .facts .count-box span { - font-size: 36px; - display: block; - font-weight: 600; - color: #011426; + font-size: 36px; + display: block; + font-weight: 600; + color: #011426; } .facts .count-box p { - padding: 0; - margin: 0; - font-family: "Raleway", sans-serif; - font-size: 14px; + padding: 0; + margin: 0; + font-family: "Raleway", sans-serif; + font-size: 14px; } /*-------------------------------------------------------------- # Akills --------------------------------------------------------------*/ .skills .progress { - height: 60px; - display: block; - background: none; - border-radius: 0; + height: 60px; + display: block; + background: none; + border-radius: 0; } .skills .progress .skill { - padding: 10px 0; - margin: 0; - text-transform: uppercase; - display: block; - font-weight: 600; - font-family: "Poppins", sans-serif; - color: #45505b; + padding: 10px 0; + margin: 0; + text-transform: uppercase; + display: block; + font-weight: 600; + font-family: "Poppins", sans-serif; + color: #45505b; } .skills .progress .skill .val { - float: right; - font-style: normal; + float: right; + font-style: normal; } .skills .progress-bar-wrap { - background: #f2f3f5; + background: #f2f3f5; } .skills .progress-bar { - width: 1px; - height: 10px; - transition: 0.9s; - background-color: #0563bb; + width: 1px; + height: 10px; + transition: 0.9s; + background-color: #0563bb; } /*-------------------------------------------------------------- # Resume --------------------------------------------------------------*/ .resume .resume-title { - font-size: 26px; - font-weight: 700; - margin-top: 20px; - margin-bottom: 20px; - color: #45505b; + font-size: 26px; + font-weight: 700; + margin-top: 20px; + margin-bottom: 20px; + color: #45505b; } .resume .resume-item { - padding: 0 0 20px 20px; - margin-top: -2px; - border-left: 2px solid #0563bb; - position: relative; + padding: 0 0 20px 20px; + margin-top: -2px; + border-left: 2px solid #0563bb; + position: relative; } .resume .resume-item h4 { - line-height: 18px; - font-size: 18px; - font-weight: 600; - text-transform: uppercase; - font-family: "Poppins", sans-serif; - color: #0563bb; - margin-bottom: 10px; + line-height: 18px; + font-size: 18px; + font-weight: 600; + text-transform: uppercase; + font-family: "Poppins", sans-serif; + color: #0563bb; + margin-bottom: 10px; } .resume .resume-item h5 { - font-size: 16px; - background: #f7f8f9; - padding: 5px 15px; - display: inline-block; - font-weight: 600; - margin-bottom: 10px; + font-size: 16px; + background: #f7f8f9; + padding: 5px 15px; + display: inline-block; + font-weight: 600; + margin-bottom: 10px; } .resume .resume-item ul { - padding-left: 20px; + padding-left: 20px; } .resume .resume-item ul li { - padding-bottom: 10px; + padding-bottom: 10px; } .resume .resume-item:last-child { - padding-bottom: 0; + padding-bottom: 0; } .resume .resume-item::before { - content: ""; - position: absolute; - width: 16px; - height: 16px; - border-radius: 50px; - left: -9px; - top: 0; - background: #fff; - border: 2px solid #0563bb; + content: ""; + position: absolute; + width: 16px; + height: 16px; + border-radius: 50px; + left: -9px; + top: 0; + background: #fff; + border: 2px solid #0563bb; } /*-------------------------------------------------------------- # Portfolio --------------------------------------------------------------*/ .portfolio .portfolio-item { - margin-bottom: 30px; + margin-bottom: 30px; } .portfolio #portfolio-flters { - padding: 0; - margin: 0 auto 25px auto; - list-style: none; - text-align: center; - background: #fff; - border-radius: 50px; - padding: 2px 15px; + padding: 0; + margin: 0 auto 25px auto; + list-style: none; + text-align: center; + background: #fff; + border-radius: 50px; + padding: 2px 15px; } .portfolio #portfolio-flters li { - cursor: pointer; - display: inline-block; - padding: 10px 15px; - font-size: 14px; - font-weight: 600; - line-height: 1; - text-transform: uppercase; - color: #272829; - margin-bottom: 5px; - transition: all 0.3s ease-in-out; + cursor: pointer; + display: inline-block; + padding: 10px 15px; + font-size: 14px; + font-weight: 600; + line-height: 1; + text-transform: uppercase; + color: #272829; + margin-bottom: 5px; + transition: all 0.3s ease-in-out; } .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { - color: #0563bb; + color: #0563bb; } .portfolio #portfolio-flters li:last-child { - margin-right: 0; + margin-right: 0; } .portfolio .portfolio-wrap { - transition: 0.3s; - position: relative; - overflow: hidden; - z-index: 1; - background: rgba(69, 80, 91, 0.8); + transition: 0.3s; + position: relative; + overflow: hidden; + z-index: 1; + background: rgba(69, 80, 91, 0.8); } .portfolio .portfolio-wrap::before { - content: ""; - background: rgba(255, 255, 255, 0.7); - position: absolute; - left: 30px; - right: 30px; - top: 30px; - bottom: 30px; - transition: all ease-in-out 0.3s; - z-index: 2; - opacity: 0; + content: ""; + background: rgba(255, 255, 255, 0.7); + position: absolute; + left: 30px; + right: 30px; + top: 30px; + bottom: 30px; + transition: all ease-in-out 0.3s; + z-index: 2; + opacity: 0; } .portfolio .portfolio-wrap .portfolio-info { - opacity: 0; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - text-align: center; - z-index: 3; - transition: all ease-in-out 0.3s; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + opacity: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + text-align: center; + z-index: 3; + transition: all ease-in-out 0.3s; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .portfolio .portfolio-wrap .portfolio-info::before { - display: block; - content: ""; - width: 48px; - height: 48px; - position: absolute; - top: 35px; - left: 35px; - border-top: 3px solid #d7dce1; - border-left: 3px solid #d7dce1; - transition: all 0.5s ease 0s; - z-index: 9994; + display: block; + content: ""; + width: 48px; + height: 48px; + position: absolute; + top: 35px; + left: 35px; + border-top: 3px solid #d7dce1; + border-left: 3px solid #d7dce1; + transition: all 0.5s ease 0s; + z-index: 9994; } .portfolio .portfolio-wrap .portfolio-info::after { - display: block; - content: ""; - width: 48px; - height: 48px; - position: absolute; - bottom: 35px; - right: 35px; - border-bottom: 3px solid #d7dce1; - border-right: 3px solid #d7dce1; - transition: all 0.5s ease 0s; - z-index: 9994; + display: block; + content: ""; + width: 48px; + height: 48px; + position: absolute; + bottom: 35px; + right: 35px; + border-bottom: 3px solid #d7dce1; + border-right: 3px solid #d7dce1; + transition: all 0.5s ease 0s; + z-index: 9994; } .portfolio .portfolio-wrap .portfolio-info h4 { - font-size: 20px; - color: #45505b; - font-weight: 600; + font-size: 20px; + color: #45505b; + font-weight: 600; } .portfolio .portfolio-wrap .portfolio-info p { - color: #45505b; - font-size: 14px; - text-transform: uppercase; - padding: 0; - margin: 0; + color: #45505b; + font-size: 14px; + text-transform: uppercase; + padding: 0; + margin: 0; } .portfolio .portfolio-wrap .portfolio-links { - text-align: center; - z-index: 4; + text-align: center; + z-index: 4; } .portfolio .portfolio-wrap .portfolio-links a { - color: #45505b; - margin: 0 2px; - font-size: 28px; - display: inline-block; - transition: 0.3s; + color: #45505b; + margin: 0 2px; + font-size: 28px; + display: inline-block; + transition: 0.3s; } .portfolio .portfolio-wrap .portfolio-links a:hover { - color: #148af9; + color: #148af9; } .portfolio .portfolio-wrap:hover::before { - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 1; } .portfolio .portfolio-wrap:hover .portfolio-info { - opacity: 1; + opacity: 1; } .portfolio .portfolio-wrap:hover .portfolio-info::before { - top: 15px; - left: 15px; + top: 15px; + left: 15px; } .portfolio .portfolio-wrap:hover .portfolio-info::after { - bottom: 15px; - right: 15px; + bottom: 15px; + right: 15px; } /*-------------------------------------------------------------- # Portfolio Details --------------------------------------------------------------*/ .portfolio-details { - padding-top: 40px; + padding-top: 40px; } .portfolio-details .portfolio-details-slider img { - width: 100%; + width: 100%; } .portfolio-details .portfolio-details-slider .swiper-pagination { - margin-top: 20px; - position: relative; + margin-top: 20px; + position: relative; } .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { - width: 12px; - height: 12px; - background-color: #fff; - opacity: 1; - border: 1px solid #0563bb; + width: 12px; + height: 12px; + background-color: #fff; + opacity: 1; + border: 1px solid #0563bb; } .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { - background-color: #0563bb; + background-color: #0563bb; } .portfolio-details .portfolio-info { - padding: 30px; - box-shadow: 0px 0 30px rgba(69, 80, 91, 0.08); + padding: 30px; + box-shadow: 0px 0 30px rgba(69, 80, 91, 0.08); } .portfolio-details .portfolio-info h3 { - font-size: 22px; - font-weight: 700; - margin-bottom: 20px; - padding-bottom: 20px; - border-bottom: 1px solid #eee; + font-size: 22px; + font-weight: 700; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid #eee; } .portfolio-details .portfolio-info ul { - list-style: none; - padding: 0; - font-size: 15px; + list-style: none; + padding: 0; + font-size: 15px; } -.portfolio-details .portfolio-info ul li+li { - margin-top: 10px; +.portfolio-details .portfolio-info ul li + li { + margin-top: 10px; } .portfolio-details .portfolio-description { - padding-top: 30px; + padding-top: 30px; } .portfolio-details .portfolio-description h2 { - font-size: 26px; - font-weight: 700; - margin-bottom: 20px; + font-size: 26px; + font-weight: 700; + margin-bottom: 20px; } .portfolio-details .portfolio-description p { - padding: 0; + padding: 0; } /*-------------------------------------------------------------- # Services --------------------------------------------------------------*/ .services .icon-box { - text-align: center; - padding: 70px 20px 80px 20px; - transition: all ease-in-out 0.3s; - background: #fff; - box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.05); + text-align: center; + padding: 70px 20px 80px 20px; + transition: all ease-in-out 0.3s; + background: #fff; + box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.05); } .services .icon-box .icon { - margin: 0 auto; - width: 100px; - height: 100px; - display: flex; - align-items: center; - justify-content: center; - transition: ease-in-out 0.3s; - position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + transition: ease-in-out 0.3s; + position: relative; } .services .icon-box .icon i { - font-size: 36px; - transition: 0.5s; - position: relative; + font-size: 36px; + transition: 0.5s; + position: relative; } .services .icon-box .icon svg { - position: absolute; - top: 0; - left: 0; + position: absolute; + top: 0; + left: 0; } .services .icon-box .icon svg path { - transition: 0.5s; - fill: #f5f5f5; + transition: 0.5s; + fill: #f5f5f5; } .services .icon-box h4 { - font-weight: 600; - margin: 10px 0 15px 0; - font-size: 22px; + font-weight: 600; + margin: 10px 0 15px 0; + font-size: 22px; } .services .icon-box h4 a { - color: #45505b; - transition: ease-in-out 0.3s; + color: #45505b; + transition: ease-in-out 0.3s; } .services .icon-box p { - line-height: 24px; - font-size: 14px; - margin-bottom: 0; + line-height: 24px; + font-size: 14px; + margin-bottom: 0; } .services .icon-box:hover { - border-color: #fff; - box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08); + border-color: #fff; + box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08); } .services .iconbox-blue i { - color: #47aeff; + color: #47aeff; } .services .iconbox-blue:hover .icon i { - color: #fff; + color: #fff; } .services .iconbox-blue:hover .icon path { - fill: #47aeff; + fill: #47aeff; } .services .iconbox-orange i { - color: #ffa76e; + color: #ffa76e; } .services .iconbox-orange:hover .icon i { - color: #fff; + color: #fff; } .services .iconbox-orange:hover .icon path { - fill: #ffa76e; + fill: #ffa76e; } .services .iconbox-pink i { - color: #e80368; + color: #e80368; } .services .iconbox-pink:hover .icon i { - color: #fff; + color: #fff; } .services .iconbox-pink:hover .icon path { - fill: #e80368; + fill: #e80368; } .services .iconbox-yellow i { - color: #ffbb2c; + color: #ffbb2c; } .services .iconbox-yellow:hover .icon i { - color: #fff; + color: #fff; } .services .iconbox-yellow:hover .icon path { - fill: #ffbb2c; + fill: #ffbb2c; } .services .iconbox-red i { - color: #ff5828; + color: #ff5828; } .services .iconbox-red:hover .icon i { - color: #fff; + color: #fff; } .services .iconbox-red:hover .icon path { - fill: #ff5828; + fill: #ff5828; } .services .iconbox-teal i { - color: #11dbcf; + color: #11dbcf; } .services .iconbox-teal:hover .icon i { - color: #fff; + color: #fff; } .services .iconbox-teal:hover .icon path { - fill: #11dbcf; + fill: #11dbcf; } /*-------------------------------------------------------------- # Testimonials --------------------------------------------------------------*/ .testimonials .section-header { - margin-bottom: 40px; + margin-bottom: 40px; } .testimonials .testimonials-carousel, .testimonials .testimonials-slider { - overflow: hidden; + overflow: hidden; } .testimonials .testimonial-item { - text-align: center; + text-align: center; } .testimonials .testimonial-item .testimonial-img { - width: 120px; - border-radius: 50%; - border: 4px solid #fff; - margin: 0 auto; + width: 120px; + border-radius: 50%; + border: 4px solid #fff; + margin: 0 auto; } .testimonials .testimonial-item h3 { - font-size: 20px; - font-weight: bold; - margin: 10px 0 5px 0; - color: #111; + font-size: 20px; + font-weight: bold; + margin: 10px 0 5px 0; + color: #111; } .testimonials .testimonial-item h4 { - font-size: 14px; - color: #999; - margin: 0 0 15px 0; + font-size: 14px; + color: #999; + margin: 0 0 15px 0; } .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { - color: #90c8fc; - font-size: 26px; + color: #90c8fc; + font-size: 26px; } .testimonials .testimonial-item .quote-icon-left { - display: inline-block; - left: -5px; - position: relative; + display: inline-block; + left: -5px; + position: relative; } .testimonials .testimonial-item .quote-icon-right { - display: inline-block; - right: -5px; - position: relative; - top: 10px; + display: inline-block; + right: -5px; + position: relative; + top: 10px; } .testimonials .testimonial-item p { - font-style: italic; - margin: 0 auto 15px auto; + font-style: italic; + margin: 0 auto 15px auto; } .testimonials .swiper-pagination { - margin-top: 20px; - position: relative; + margin-top: 20px; + position: relative; } .testimonials .swiper-pagination .swiper-pagination-bullet { - width: 12px; - height: 12px; - background-color: #fff; - opacity: 1; - border: 1px solid #0563bb; + width: 12px; + height: 12px; + background-color: #fff; + opacity: 1; + border: 1px solid #0563bb; } .testimonials .swiper-pagination .swiper-pagination-bullet-active { - background-color: #0563bb; + background-color: #0563bb; } @media (min-width: 992px) { - .testimonials .testimonial-item p { - width: 80%; - } + .testimonials .testimonial-item p { + width: 80%; + } } /*-------------------------------------------------------------- # Contact --------------------------------------------------------------*/ .contact .info { - width: 100%; - background: #fff; + width: 100%; + background: #fff; } .contact .info i { - font-size: 20px; - color: #0563bb; - float: left; - width: 44px; - height: 44px; - background: #eef7ff; - display: flex; - justify-content: center; - align-items: center; - border-radius: 50px; - transition: all 0.3s ease-in-out; + font-size: 20px; + color: #0563bb; + float: left; + width: 44px; + height: 44px; + background: #eef7ff; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50px; + transition: all 0.3s ease-in-out; } .contact .info h4 { - padding: 0 0 0 60px; - font-size: 22px; - font-weight: 600; - margin-bottom: 5px; - color: #45505b; + padding: 0 0 0 60px; + font-size: 22px; + font-weight: 600; + margin-bottom: 5px; + color: #45505b; } .contact .info p { - padding: 0 0 0 60px; - margin-bottom: 0; - font-size: 14px; - color: #728394; + padding: 0 0 0 60px; + margin-bottom: 0; + font-size: 14px; + color: #728394; } .contact .info .email, .contact .info .phone { - margin-top: 40px; + margin-top: 40px; } .contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i { - background: #0563bb; - color: #fff; + background: #0563bb; + color: #fff; } .contact .php-email-form { - width: 100%; - background: #fff; + width: 100%; + background: #fff; } .contact .php-email-form .form-group { - padding-bottom: 8px; + padding-bottom: 8px; } .contact .php-email-form .error-message { - display: none; - color: #fff; - background: #ed3c0d; - text-align: left; - padding: 15px; - font-weight: 600; + display: none; + color: #fff; + background: #ed3c0d; + text-align: left; + padding: 15px; + font-weight: 600; } -.contact .php-email-form .error-message br+br { - margin-top: 25px; +.contact .php-email-form .error-message br + br { + margin-top: 25px; } .contact .php-email-form .sent-message { - display: none; - color: #fff; - background: #18d26e; - text-align: center; - padding: 15px; - font-weight: 600; + display: none; + color: #fff; + background: #18d26e; + text-align: center; + padding: 15px; + font-weight: 600; } .contact .php-email-form .loading { - display: none; - background: #fff; - text-align: center; - padding: 15px; + display: none; + background: #fff; + text-align: center; + padding: 15px; } .contact .php-email-form .loading:before { - content: ""; - display: inline-block; - border-radius: 50%; - width: 24px; - height: 24px; - margin: 0 10px -6px 0; - border: 3px solid #18d26e; - border-top-color: #eee; - animation: animate-loading 1s linear infinite; + content: ""; + display: inline-block; + border-radius: 50%; + width: 24px; + height: 24px; + margin: 0 10px -6px 0; + border: 3px solid #18d26e; + border-top-color: #eee; + animation: animate-loading 1s linear infinite; } .contact .php-email-form input, .contact .php-email-form textarea { - border-radius: 4px; - box-shadow: none; - font-size: 14px; + border-radius: 4px; + box-shadow: none; + font-size: 14px; } -.contact .php-email-form input[type=text], -.contact .php-email-form input[type=email] { - height: 44px; +.contact .php-email-form input[type="text"], +.contact .php-email-form input[type="email"] { + height: 44px; } .contact .php-email-form textarea { - padding: 10px 12px; + padding: 10px 12px; } -.contact .php-email-form button[type=submit] { - background: #0563bb; - border: 0; - padding: 10px 35px; - color: #fff; - transition: 0.4s; - border-radius: 50px; +.contact .php-email-form button[type="submit"] { + background: #0563bb; + border: 0; + padding: 10px 35px; + color: #fff; + transition: 0.4s; + border-radius: 50px; } -.contact .php-email-form button[type=submit]:hover { - background: #0678e3; +.contact .php-email-form button[type="submit"]:hover { + background: #0678e3; } @keyframes animate-loading { - 0% { - transform: rotate(0deg); - } + 0% { + transform: rotate(0deg); + } - 100% { - transform: rotate(360deg); - } + 100% { + transform: rotate(360deg); + } } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ #footer { - background: #f7f8f9; - color: #45505b; - font-size: 14px; - text-align: center; - padding: 30px 0; + background: #f7f8f9; + color: #45505b; + font-size: 14px; + text-align: center; + padding: 30px 0; } #footer h3 { - font-size: 36px; - font-weight: 700; - position: relative; - font-family: "Poppins", sans-serif; - padding: 0; - margin: 0 0 15px 0; + font-size: 36px; + font-weight: 700; + position: relative; + font-family: "Poppins", sans-serif; + padding: 0; + margin: 0 0 15px 0; } #footer p { - font-size: 15; - font-style: italic; - padding: 0; - margin: 0 0 40px 0; + font-size: 15; + font-style: italic; + padding: 0; + margin: 0 0 40px 0; } #footer .social-links { - margin: 0 0 40px 0; + margin: 0 0 40px 0; } #footer .social-links a { - font-size: 18px; - display: inline-block; - background: #0563bb; - color: #fff; - line-height: 1; - padding: 8px 0; - margin-right: 4px; - border-radius: 50%; - text-align: center; - width: 36px; - height: 36px; - transition: 0.3s; + font-size: 18px; + display: inline-block; + background: #0563bb; + color: #fff; + line-height: 1; + padding: 8px 0; + margin-right: 4px; + border-radius: 50%; + text-align: center; + width: 36px; + height: 36px; + transition: 0.3s; } #footer .social-links a:hover { - background: #0678e3; - color: #fff; - text-decoration: none; + background: #0678e3; + color: #fff; + text-decoration: none; } #footer .copyright { - margin: 0 0 5px 0; + margin: 0 0 5px 0; } #footer .credits { - font-size: 13px; -} \ No newline at end of file + font-size: 13px; +} Index: arms/index/assets/js/main.js =================================================================== diff -u -reb232e55f8feebd6c3f841e3ec2dbc4ea54bf476 -rad67a7ed8c6999e2cf07c7ca878ee6f8aa5f5e30 --- arms/index/assets/js/main.js (.../main.js) (revision eb232e55f8feebd6c3f841e3ec2dbc4ea54bf476) +++ arms/index/assets/js/main.js (.../main.js) (revision ad67a7ed8c6999e2cf07c7ca878ee6f8aa5f5e30) @@ -1,270 +1,290 @@ /** -* Template Name: MyResume -* Updated: Jul 27 2023 with Bootstrap v5.3.1 -* Template URL: https://bootstrapmade.com/free-html-bootstrap-template-my-resume/ -* Author: BootstrapMade.com -* License: https://bootstrapmade.com/license/ -*/ -(function() { - "use strict"; + * Template Name: MyResume + * Updated: Jul 27 2023 with Bootstrap v5.3.1 + * Template URL: https://bootstrapmade.com/free-html-bootstrap-template-my-resume/ + * Author: BootstrapMade.com + * License: https://bootstrapmade.com/license/ + */ +(function () { + "use strict"; - /** - * Easy selector helper function - */ - const select = (el, all = false) => { - el = el.trim() - if (all) { - return [...document.querySelectorAll(el)] - } else { - return document.querySelector(el) - } - } + /** + * Easy selector helper function + */ + const select = (el, all = false) => { + el = el.trim(); + if (all) { + return [...document.querySelectorAll(el)]; + } else { + return document.querySelector(el); + } + }; - /** - * Easy event listener function - */ - const on = (type, el, listener, all = false) => { - let selectEl = select(el, all) - if (selectEl) { - if (all) { - selectEl.forEach(e => e.addEventListener(type, listener)) - } else { - selectEl.addEventListener(type, listener) - } - } - } + /** + * Easy event listener function + */ + const on = (type, el, listener, all = false) => { + let selectEl = select(el, all); + if (selectEl) { + if (all) { + selectEl.forEach((e) => e.addEventListener(type, listener)); + } else { + selectEl.addEventListener(type, listener); + } + } + }; - /** - * Easy on scroll event listener - */ - const onscroll = (el, listener) => { - el.addEventListener('scroll', listener) - } + /** + * Easy on scroll event listener + */ + const onscroll = (el, listener) => { + el.addEventListener("scroll", listener); + }; - /** - * Navbar links active state on scroll - */ - let navbarlinks = select('#navbar .scrollto', true) - const navbarlinksActive = () => { - let position = window.scrollY + 200 - navbarlinks.forEach(navbarlink => { - if (!navbarlink.hash) return - let section = select(navbarlink.hash) - if (!section) return - if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) { - navbarlink.classList.add('active') - } else { - navbarlink.classList.remove('active') - } - }) - } - window.addEventListener('load', navbarlinksActive) - onscroll(document, navbarlinksActive) + /** + * Navbar links active state on scroll + */ + let navbarlinks = select("#navbar .scrollto", true); + const navbarlinksActive = () => { + let position = window.scrollY + 200; + navbarlinks.forEach((navbarlink) => { + if (!navbarlink.hash) return; + let section = select(navbarlink.hash); + if (!section) return; + if (position >= section.offsetTop && position <= section.offsetTop + section.offsetHeight) { + navbarlink.classList.add("active"); + } else { + navbarlink.classList.remove("active"); + } + }); + }; + window.addEventListener("load", navbarlinksActive); + onscroll(document, navbarlinksActive); - /** - * Scrolls to an element with header offset - */ - const scrollto = (el) => { - let elementPos = select(el).offsetTop - window.scrollTo({ - top: elementPos, - behavior: 'smooth' - }) - } + /** + * Scrolls to an element with header offset + */ + const scrollto = (el) => { + let elementPos = select(el).offsetTop; + window.scrollTo({ + top: elementPos, + behavior: "smooth" + }); + }; - /** - * Back to top button - */ - let backtotop = select('.back-to-top') - if (backtotop) { - const toggleBacktotop = () => { - if (window.scrollY > 100) { - backtotop.classList.add('active') - } else { - backtotop.classList.remove('active') - } - } - window.addEventListener('load', toggleBacktotop) - onscroll(document, toggleBacktotop) - } + /** + * Back to top button + */ + let backtotop = select(".back-to-top"); + if (backtotop) { + const toggleBacktotop = () => { + if (window.scrollY > 100) { + backtotop.classList.add("active"); + } else { + backtotop.classList.remove("active"); + } + }; + window.addEventListener("load", toggleBacktotop); + onscroll(document, toggleBacktotop); + } - /** - * Mobile nav toggle - */ - on('click', '.mobile-nav-toggle', function(e) { - select('body').classList.toggle('mobile-nav-active') - this.classList.toggle('bi-list') - this.classList.toggle('bi-x') - }) + /** + * Mobile nav toggle + */ + on("click", ".mobile-nav-toggle", function (e) { + select("body").classList.toggle("mobile-nav-active"); + this.classList.toggle("bi-list"); + this.classList.toggle("bi-x"); + }); - /** - * Scrool with ofset on links with a class name .scrollto - */ - on('click', '.scrollto', function(e) { - if (select(this.hash)) { - e.preventDefault() + /** + * Scrool with ofset on links with a class name .scrollto + */ + on( + "click", + ".scrollto", + function (e) { + if (select(this.hash)) { + e.preventDefault(); - let body = select('body') - if (body.classList.contains('mobile-nav-active')) { - body.classList.remove('mobile-nav-active') - let navbarToggle = select('.mobile-nav-toggle') - navbarToggle.classList.toggle('bi-list') - navbarToggle.classList.toggle('bi-x') - } - scrollto(this.hash) - } - }, true) + let body = select("body"); + if (body.classList.contains("mobile-nav-active")) { + body.classList.remove("mobile-nav-active"); + let navbarToggle = select(".mobile-nav-toggle"); + navbarToggle.classList.toggle("bi-list"); + navbarToggle.classList.toggle("bi-x"); + } + scrollto(this.hash); + } + }, + true + ); - /** - * Scroll with ofset on page load with hash links in the url - */ - window.addEventListener('load', () => { - if (window.location.hash) { - if (select(window.location.hash)) { - scrollto(window.location.hash) - } - } - }); + /** + * Scroll with ofset on page load with hash links in the url + */ + window.addEventListener("load", () => { + if (window.location.hash) { + if (select(window.location.hash)) { + scrollto(window.location.hash); + } + } + }); - /** - * Preloader - */ - let preloader = select('#preloader'); - if (preloader) { - window.addEventListener('load', () => { - preloader.remove() - }); - } + /** + * Preloader + */ + let preloader = select("#preloader"); + if (preloader) { + window.addEventListener("load", () => { + preloader.remove(); + }); + } - /** - * Hero type effect - */ - const typed = select('.typed') - if (typed) { - let typed_strings = typed.getAttribute('data-typed-items') - typed_strings = typed_strings.split(',') - new Typed('.typed', { - strings: typed_strings, - loop: true, - typeSpeed: 100, - backSpeed: 50, - backDelay: 2000 - }); - } + /** + * Hero type effect + */ + const typed = select(".typed"); + if (typed) { + let typed_strings = typed.getAttribute("data-typed-items"); + typed_strings = typed_strings.split(","); + new Typed(".typed", { + strings: typed_strings, + loop: true, + typeSpeed: 100, + backSpeed: 50, + backDelay: 2000 + }); + } - /** - * Skills animation - */ - let skilsContent = select('.skills-content'); - if (skilsContent) { - new Waypoint({ - element: skilsContent, - offset: '80%', - handler: function(direction) { - let progress = select('.progress .progress-bar', true); - progress.forEach((el) => { - el.style.width = el.getAttribute('aria-valuenow') + '%' - }); - } - }) - } + /** + * about + * */ + const flowItems = document.querySelectorAll(".flow-item"); + if (flowItems) { + for (let i = 0; i < flowItems.length; i++) { + setTimeout(() => { + flowItems[i].classList.add("on"); + }, i * 300); + } + } - /** - * Porfolio isotope and filter - */ - window.addEventListener('load', () => { - let portfolioContainer = select('.portfolio-container'); - if (portfolioContainer) { - let portfolioIsotope = new Isotope(portfolioContainer, { - itemSelector: '.portfolio-item' - }); + /** + * Skills animation + */ + let skilsContent = select(".skills-content"); + if (skilsContent) { + new Waypoint({ + element: skilsContent, + offset: "80%", + handler: function (direction) { + let progress = select(".progress .progress-bar", true); + progress.forEach((el) => { + el.style.width = el.getAttribute("aria-valuenow") + "%"; + }); + } + }); + } - let portfolioFilters = select('#portfolio-flters li', true); + /** + * Porfolio isotope and filter + */ + window.addEventListener("load", () => { + let portfolioContainer = select(".portfolio-container"); + if (portfolioContainer) { + let portfolioIsotope = new Isotope(portfolioContainer, { + itemSelector: ".portfolio-item" + }); - on('click', '#portfolio-flters li', function(e) { - e.preventDefault(); - portfolioFilters.forEach(function(el) { - el.classList.remove('filter-active'); - }); - this.classList.add('filter-active'); + let portfolioFilters = select("#portfolio-flters li", true); - portfolioIsotope.arrange({ - filter: this.getAttribute('data-filter') - }); - portfolioIsotope.on('arrangeComplete', function() { - AOS.refresh() - }); - }, true); - } + on( + "click", + "#portfolio-flters li", + function (e) { + e.preventDefault(); + portfolioFilters.forEach(function (el) { + el.classList.remove("filter-active"); + }); + this.classList.add("filter-active"); - }); + portfolioIsotope.arrange({ + filter: this.getAttribute("data-filter") + }); + portfolioIsotope.on("arrangeComplete", function () { + AOS.refresh(); + }); + }, + true + ); + } + }); - /** - * Initiate portfolio lightbox - */ - const portfolioLightbox = GLightbox({ - selector: '.portfolio-lightbox' - }); + /** + * Initiate portfolio lightbox + */ + const portfolioLightbox = GLightbox({ + selector: ".portfolio-lightbox" + }); - /** - * Initiate portfolio details lightbox - */ - const portfolioDetailsLightbox = GLightbox({ - selector: '.portfolio-details-lightbox', - width: '90%', - height: '90vh' - }); + /** + * Initiate portfolio details lightbox + */ + const portfolioDetailsLightbox = GLightbox({ + selector: ".portfolio-details-lightbox", + width: "90%", + height: "90vh" + }); - /** - * Portfolio details slider - */ - new Swiper('.portfolio-details-slider', { - speed: 400, - loop: true, - autoplay: { - delay: 5000, - disableOnInteraction: false - }, - pagination: { - el: '.swiper-pagination', - type: 'bullets', - clickable: true - } - }); + /** + * Portfolio details slider + */ + new Swiper(".portfolio-details-slider", { + speed: 400, + loop: true, + autoplay: { + delay: 5000, + disableOnInteraction: false + }, + pagination: { + el: ".swiper-pagination", + type: "bullets", + clickable: true + } + }); - /** - * Testimonials slider - */ - new Swiper('.testimonials-slider', { - speed: 600, - loop: true, - autoplay: { - delay: 5000, - disableOnInteraction: false - }, - slidesPerView: 'auto', - pagination: { - el: '.swiper-pagination', - type: 'bullets', - clickable: true - } - }); + /** + * Testimonials slider + */ + new Swiper(".testimonials-slider", { + speed: 600, + loop: true, + autoplay: { + delay: 5000, + disableOnInteraction: false + }, + slidesPerView: "auto", + pagination: { + el: ".swiper-pagination", + type: "bullets", + clickable: true + } + }); - /** - * Animation on scroll - */ - window.addEventListener('load', () => { - AOS.init({ - duration: 1000, - easing: 'ease-in-out', - once: true, - mirror: false - }) - }); + /** + * Animation on scroll + */ + window.addEventListener("load", () => { + AOS.init({ + duration: 1000, + easing: "ease-in-out", + once: true, + mirror: false + }); + }); - /** - * Initiate Pure Counter - */ - new PureCounter(); - -})() \ No newline at end of file + /** + * Initiate Pure Counter + */ + new PureCounter(); +})(); Index: arms/landing.html =================================================================== diff -u -r5aa9f301d5be15cffc9b09de2cabca910a1a1446 -rad67a7ed8c6999e2cf07c7ca878ee6f8aa5f5e30 --- arms/landing.html (.../landing.html) (revision 5aa9f301d5be15cffc9b09de2cabca910a1a1446) +++ arms/landing.html (.../landing.html) (revision ad67a7ed8c6999e2cf07c7ca878ee6f8aa5f5e30) @@ -1,746 +1,1292 @@ + + + - - - + MyResume Bootstrap Template - Index + + - MyResume Bootstrap Template - Index - - + + + - - - + + - - + + + + + + + - - - - - - - + + - - - - - + - + + + + + +
+ + +
+ - - - - -
+ +
+
+

+ +

+

+ ARMS is + +

+ +
+
+ - +
+ +
+
+
+

About

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint + consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat + sit in iste officiis commodi quidem hic quas. +

+
-
+
+
+ +
+ + + + +
+
+
+ + + - -
-
-

Brandon Johnson

-

I'm

- -
-
+ +
+
+
+

Facts

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint + consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat + sit in iste officiis commodi quidem hic quas. +

+
-
+
+
+
+ + +

Happy Clients

+
+
- -
-
+
+
+ + +

Projects

+
+
-
-

About

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.

-
+
+
+ + +

Hours Of Support

+
+
-
-
- -
-
-

UI/UX Designer & Web Developer.

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. -

-
-
-
    -
  • Birthday: 1 May 1995
    • -
  • Website: www.example.com
    • -
  • Phone: +123 456 7890
    • -
  • City: New York, USA
    • -
-
-
-
    -
  • Age: 30
    • -
  • Degree: Master
    • -
  • PhEmailone: email@example.com
    • -
  • Freelance: Available
    • -
-
-
-

- Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis. - Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores. -

-
-
+
+
+ + +

Awards

+
+
+
+
+
+ - - + +
+
+
+

Skills

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint + consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat + sit in iste officiis commodi quidem hic quas. +

+
- -
-
+
+
+
+ + HTML + 100% + +
+
+
+
-
-

Facts

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.

-
+
+ + CSS + 90% + +
+
+
+
-
+
+ + JavaScript + 75% + +
+
+
+
+
-
-
- - -

Happy Clients

-
-
+
+
+ + PHP + 80% + +
+
+
+
-
-
- - -

Projects

-
-
+
+ + WordPress/CMS + 90% + +
+
+
+
-
-
- - -

Hours Of Support

-
-
+
+ + Photoshop + 55% + +
+
+
+
+
+
+
+
+ -
-
- - -

Awards

-
-
+ +
+
+
+

Resume

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint + consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat + sit in iste officiis commodi quidem hic quas. +

+
-
+
+
+

Sumary

+
+

Brandon Johnson

+

+ + Innovative and deadline-driven Graphic Designer with 3+ years of experience designing and developing + user-centered digital/print marketing material from initial concept to final, polished deliverable. + +

+
    +
  • Portland par 127,Orlando, FL
    • +
  • (123) 456-7891
    • +
  • alice.barkley@example.com
    • +
+
-
-
+

Education

+
+

Master of Fine Arts & Graphic Design

+
2015 - 2016
+

Rochester Institute of Technology, Rochester, NY

+

+ Qui deserunt veniam. Et sed aliquam labore tempore sed quisquam iusto autem sit. Ea vero voluptatum + qui ut dignissimos deleniti nerada porti sand markend +

+
+
+

Bachelor of Fine Arts & Graphic Design

+
2010 - 2014
+

Rochester Institute of Technology, Rochester, NY

+

+ Quia nobis sequi est occaecati aut. Repudiandae et iusto quae reiciendis et quis Eius vel ratione eius + unde vitae rerum voluptates asperiores voluptatem Earum molestiae consequatur neque etlon sader mart + dila +

+
+
+
+

Professional Experience

+
+

Senior graphic design specialist

+
2019 - Present
+

Experion, New York, NY

+
    +
  • + Lead in the design, development, and implementation of the graphic, layout, and production + communication materials +
    • +
  • + Delegate tasks to the 7 members of the design team and provide counsel on all aspects of the + project. +
    • +
  • + Supervise the assessment of all graphic materials in order to ensure quality and accuracy of the + design +
    • +
  • Oversee the efficient use of production project budgets ranging from $2,000 - $25,000
    • +
+
+
+

Graphic design specialist

+
2017 - 2018
+

Stepping Stone Advertising, New York, NY

+
    +
  • + Developed numerous marketing programs (logos, brochures,infographics, presentations, and + advertisements). +
    • +
  • Managed up to 5 projects or tasks at a given time while under pressure
    • +
  • Recommended and consulted with clients on the most appropriate graphic design
    • +
  • Created 4+ design presentations and proposals a month for clients and account managers
    • +
+
+
+ + +
+ - -
-
+ +
+
+
+

Portfolio

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint + consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat + sit in iste officiis commodi quidem hic quas. +

+
-
-

Skills

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.

-
+
+
+
    +
  • + All +
    • +
  • App
    • +
  • Card
    • +
  • Web
    • +
+
+
-
+
+
+
+ +
+

App 1

+

App

+
+ + + + + + +
+
+
+
-
+
+
+ +
+

Web 3

+

Web

+
+ + + + + + +
+
+
+
-
- HTML 100% -
-
-
-
+
+
+ +
+

App 2

+

App

+
+ + + + + + +
+
+
+
-
- CSS 90% -
-
-
-
+
+
+ +
+

Card 2

+

Card

+
+ + + + + + +
+
+
+
-
- JavaScript 75% -
-
-
-
+
+
+ +
+

Web 2

+

Web

+
+ + + + + + +
+
+
+
-
+
+
+ +
+

App 3

+

App

+
+ + + + + + +
+
+
+
-
+
+
+ +
+

Card 1

+

Card

+
+ + + + + + +
+
+
+
-
- PHP 80% -
-
-
-
+
+
+ +
+

Card 3

+

Card

+
+ + + + + + +
+
+
+
-
- WordPress/CMS 90% -
-
-
-
+
+
+ +
+

Web 3

+

Web

+
+ + + + + + +
+
+
+
+
+
+
+ -
- Photoshop 55% -
-
-
-
+ +
+
+
+

Services

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint + consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat + sit in iste officiis commodi quidem hic quas. +

+
-
+
+
+
+
+ + + + +
+

Lorem Ipsum

+

Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi

+
+
-
+
+
+
+ + + + +
+

Sed Perspiciatis

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

+
+
-
-
+
+
+
+ + + + +
+

Magni Dolores

+

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

+
+
- -
-
+
+
+
+ + + + +
+

Nemo Enim

+

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis

+
+
-
-

Resume

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.

-
+
+
+
+ + + + +
+

Dele Cardo

+

Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur

+
+
-
-
-

Sumary

-
-

Brandon Johnson

-

Innovative and deadline-driven Graphic Designer with 3+ years of experience designing and developing user-centered digital/print marketing material from initial concept to final, polished deliverable.

-
    -
  • Portland par 127,Orlando, FL
    • -
  • (123) 456-7891
    • -
  • alice.barkley@example.com
    • -
-
+
+
+
+ + + + +
+

Divera Don

+

Modi nostrum vel laborum. Porro fugit error sit minus sapiente sit aspernatur

+
+
+
+
+
+ -

Education

-
-

Master of Fine Arts & Graphic Design

-
2015 - 2016
-

Rochester Institute of Technology, Rochester, NY

-

Qui deserunt veniam. Et sed aliquam labore tempore sed quisquam iusto autem sit. Ea vero voluptatum qui ut dignissimos deleniti nerada porti sand markend

-
-
-

Bachelor of Fine Arts & Graphic Design

-
2010 - 2014
-

Rochester Institute of Technology, Rochester, NY

-

Quia nobis sequi est occaecati aut. Repudiandae et iusto quae reiciendis et quis Eius vel ratione eius unde vitae rerum voluptates asperiores voluptatem Earum molestiae consequatur neque etlon sader mart dila

-
- -
-

Professional Experience

-
-

Senior graphic design specialist

-
2019 - Present
-

Experion, New York, NY

- -
-
-

Graphic design specialist

-
2017 - 2018
-

Stepping Stone Advertising, New York, NY

- -
-
- + +
+
+
+

Testimonials

+
-
-
+
+
+
+
+ +

Saul Goodman

+

Ceo & Founder

+

+ + Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. + Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper. + +

+
+
+ - -
-
+
+
+ +

Sara Wilsson

+

Designer

+

+ + Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis + quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa. + +

+
+
+ -
-

Portfolio

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.

-
+
+
+ +

Jena Karlis

+

Store Owner

+

+ + Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim + tempor labore quem eram duis noster aute amet eram fore quis sint minim. + +

+
+
+ -
-
-
    -
  • All
    • -
  • App
    • -
  • Card
    • -
  • Web
    • -
-
-
+
+
+ +

Matt Brandon

+

Freelancer

+

+ + Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit + minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam. + +

+
+
+ -
+
+
+ +

John Larson

+

Entrepreneur

+

+ + Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim + culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum + quid. + +

+
+
+ +
+
+
+
+ + -
-
- -
-

App 1

-

App

-
- - -
-
-
-
+ +
+
+
+

Contact

+
-
-
- -
-

Web 3

-

Web

-
- - -
-
-
-
+
+
+
+
+ +

Location:

+

A108 Adam Street, New York, NY 535022

+
-
-
- -
-

App 2

-

App

-
- - -
-
-
-
+ -
-
- -
-

Card 2

-

Card

-
- - -
-
-
-
+
+ +

Call:

+

+1 5589 55488 55s

+
+
+
-
-
- -
-

Web 2

-

Web

-
- - -
-
-
-
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
Loading
+
+
Your message has been sent. Thank you!
+
+
+
+
+
+
+
+ + + -
-
- -
-

App 3

-

App

-
- - -
-
-
-
+ + + -
-
- -
-

Card 1

-

Card

-
- - -
-
-
-
+
+ + + -
-
- -
-

Card 3

-

Card

-
- - -
-
-
-
+ + + + + + + + + + -
-
- -
-

Web 3

-

Web

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

Services

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.

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

Lorem Ipsum

-

Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi

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

Sed Perspiciatis

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

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

Magni Dolores

-

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

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

Nemo Enim

-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis

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

Dele Cardo

-

Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur

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

Divera Don

-

Modi nostrum vel laborum. Porro fugit error sit minus sapiente sit aspernatur

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

Testimonials

-
- -
-
- -
-
- -

Saul Goodman

-

Ceo & Founder

-

- - Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper. - -

-
-
- -
-
- -

Sara Wilsson

-

Designer

-

- - Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa. - -

-
-
- -
-
- -

Jena Karlis

-

Store Owner

-

- - Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim. - -

-
-
- -
-
- -

Matt Brandon

-

Freelancer

-

- - Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam. - -

-
-
- -
-
- -

John Larson

-

Entrepreneur

-

- - Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid. - -

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

Contact

-
- -
- -
-
-
- -

Location:

-

A108 Adam Street, New York, NY 535022

-
- - - -
- -

Call:

-

+1 5589 55488 55s

-
- -
- -
- -
- -
-
-
- -
-
- -
-
-
- -
-
- -
-
-
Loading
-
-
Your message has been sent. Thank you!
-
-
-
- -
- -
- -
-
- - - - - - -
- - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + +