⚡ Initial commit
This commit is contained in:
Mohammed Al-yaseen
7
.vscode/settings.json
vendored
Normal file
7
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"cSpell.words": [
|
||||
"Ecommerce",
|
||||
"navheight",
|
||||
"Zoik"
|
||||
]
|
||||
}
|
||||
1556
css/bootstrap-icons.css
vendored
Normal file
1556
css/bootstrap-icons.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
css/bootstrap.min.css
vendored
Normal file
7
css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
420
css/magnific-popup.css
Normal file
420
css/magnific-popup.css
Normal file
@@ -0,0 +1,420 @@
|
||||
/* Magnific Popup CSS */
|
||||
.mfp-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1042;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: #0b0b0b;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mfp-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
outline: none !important;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.mfp-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mfp-container:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mfp-align-top .mfp-container:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mfp-content {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
z-index: 1045;
|
||||
}
|
||||
|
||||
.mfp-inline-holder .mfp-content,
|
||||
.mfp-ajax-holder .mfp-content {
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mfp-ajax-cur {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.mfp-zoom-out-cur,
|
||||
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.mfp-zoom {
|
||||
cursor: pointer;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.mfp-auto-cursor .mfp-content {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mfp-close,
|
||||
.mfp-arrow,
|
||||
.mfp-preloader,
|
||||
.mfp-counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mfp-loading.mfp-figure {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mfp-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mfp-preloader {
|
||||
color: #ccc;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-top: -0.8em;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 1044;
|
||||
}
|
||||
.mfp-preloader a {
|
||||
color: #ccc;
|
||||
}
|
||||
.mfp-preloader a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mfp-s-ready .mfp-preloader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mfp-s-error .mfp-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button.mfp-close,
|
||||
button.mfp-arrow {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
z-index: 1046;
|
||||
box-shadow: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mfp-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
padding: 0 0 18px 10px;
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
font-family: Arial, Baskerville, monospace;
|
||||
}
|
||||
.mfp-close:hover,
|
||||
.mfp-close:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.mfp-close:active {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.mfp-close-btn-in .mfp-close {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mfp-image-holder .mfp-close,
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
color: #fff;
|
||||
right: -6px;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mfp-counter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #ccc;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mfp-arrow {
|
||||
position: absolute;
|
||||
opacity: 0.65;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
margin-top: -55px;
|
||||
padding: 0;
|
||||
width: 90px;
|
||||
height: 110px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.mfp-arrow:active {
|
||||
margin-top: -54px;
|
||||
}
|
||||
.mfp-arrow:hover,
|
||||
.mfp-arrow:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.mfp-arrow:before,
|
||||
.mfp-arrow:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 35px;
|
||||
margin-left: 35px;
|
||||
border: medium inset transparent;
|
||||
}
|
||||
.mfp-arrow:after {
|
||||
border-top-width: 13px;
|
||||
border-bottom-width: 13px;
|
||||
top: 8px;
|
||||
}
|
||||
.mfp-arrow:before {
|
||||
border-top-width: 21px;
|
||||
border-bottom-width: 21px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mfp-arrow-left {
|
||||
left: 0;
|
||||
}
|
||||
.mfp-arrow-left:after {
|
||||
border-right: 17px solid #fff;
|
||||
margin-left: 31px;
|
||||
}
|
||||
.mfp-arrow-left:before {
|
||||
margin-left: 25px;
|
||||
border-right: 27px solid #3f3f3f;
|
||||
}
|
||||
|
||||
.mfp-arrow-right {
|
||||
right: 0;
|
||||
}
|
||||
.mfp-arrow-right:after {
|
||||
border-left: 17px solid #fff;
|
||||
margin-left: 39px;
|
||||
}
|
||||
.mfp-arrow-right:before {
|
||||
border-left: 27px solid #3f3f3f;
|
||||
}
|
||||
|
||||
.mfp-iframe-holder {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.mfp-iframe-holder .mfp-content {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.mfp-iframe-scaler {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
.mfp-iframe-scaler iframe {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* Main image in popup */
|
||||
img.mfp-img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* The shadow behind the image */
|
||||
.mfp-figure {
|
||||
line-height: 0;
|
||||
}
|
||||
.mfp-figure:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
display: block;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #444;
|
||||
}
|
||||
.mfp-figure small {
|
||||
color: #bdbdbd;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
.mfp-figure figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mfp-title {
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
color: #f3f3f3;
|
||||
word-wrap: break-word;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.mfp-image-holder .mfp-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mfp-gallery .mfp-image-holder .mfp-figure {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) and (orientation: landscape),
|
||||
screen and (max-height: 300px) {
|
||||
/**
|
||||
* Remove all paddings around the image on small screen
|
||||
*/
|
||||
.mfp-img-mobile .mfp-image-holder {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.mfp-img-mobile img.mfp-img {
|
||||
padding: 0;
|
||||
}
|
||||
.mfp-img-mobile .mfp-figure:after {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.mfp-img-mobile .mfp-figure small {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.mfp-img-mobile .mfp-bottom-bar {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
padding: 3px 5px;
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.mfp-img-mobile .mfp-bottom-bar:empty {
|
||||
padding: 0;
|
||||
}
|
||||
.mfp-img-mobile .mfp-counter {
|
||||
right: 5px;
|
||||
top: 3px;
|
||||
}
|
||||
.mfp-img-mobile .mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.mfp-arrow {
|
||||
-webkit-transform: scale(0.75);
|
||||
transform: scale(0.75);
|
||||
}
|
||||
.mfp-arrow-left {
|
||||
-webkit-transform-origin: 0;
|
||||
transform-origin: 0;
|
||||
}
|
||||
.mfp-arrow-right {
|
||||
-webkit-transform-origin: 100%;
|
||||
transform-origin: 100%;
|
||||
}
|
||||
.mfp-container {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
1173
css/templatemo-first-portfolio-style.css
Normal file
1173
css/templatemo-first-portfolio-style.css
Normal file
File diff suppressed because it is too large
Load Diff
BIN
fonts/bootstrap-icons.woff
Normal file
BIN
fonts/bootstrap-icons.woff
Normal file
Binary file not shown.
BIN
fonts/bootstrap-icons.woff2
Normal file
BIN
fonts/bootstrap-icons.woff2
Normal file
Binary file not shown.
BIN
images/aerial-view-man-using-computer-laptop-wooden-table.jpg
Normal file
BIN
images/aerial-view-man-using-computer-laptop-wooden-table.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
1
images/clients/cachet.svg
Normal file
1
images/clients/cachet.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
1
images/clients/guitar-center.svg
Normal file
1
images/clients/guitar-center.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.4 KiB |
1
images/clients/profil-rejser.svg
Normal file
1
images/clients/profil-rejser.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 40 KiB |
1
images/clients/shopify.svg
Normal file
1
images/clients/shopify.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="2192" height="2500" viewBox="0 0 256 292" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M223.774 57.34c-.201-1.46-1.48-2.268-2.537-2.357-1.055-.088-23.383-1.743-23.383-1.743s-15.507-15.395-17.209-17.099c-1.703-1.703-5.029-1.185-6.32-.805-.19.056-3.388 1.043-8.678 2.68-5.18-14.906-14.322-28.604-30.405-28.604-.444 0-.901.018-1.358.044C129.31 3.407 123.644.779 118.75.779c-37.465 0-55.364 46.835-60.976 70.635-14.558 4.511-24.9 7.718-26.221 8.133-8.126 2.549-8.383 2.805-9.45 10.462C21.3 95.806.038 260.235.038 260.235l165.678 31.042 89.77-19.42S223.973 58.8 223.775 57.34zM156.49 40.848l-14.019 4.339c.005-.988.01-1.96.01-3.023 0-9.264-1.286-16.723-3.349-22.636 8.287 1.04 13.806 10.469 17.358 21.32zm-27.638-19.483c2.304 5.773 3.802 14.058 3.802 25.238 0 .572-.005 1.095-.01 1.624-9.117 2.824-19.024 5.89-28.953 8.966 5.575-21.516 16.025-31.908 25.161-35.828zm-11.131-10.537c1.617 0 3.246.549 4.805 1.622-12.007 5.65-24.877 19.88-30.312 48.297l-22.886 7.088C75.694 46.16 90.81 10.828 117.72 10.828z" fill="#95BF46"/><path d="M221.237 54.983c-1.055-.088-23.383-1.743-23.383-1.743s-15.507-15.395-17.209-17.099c-.637-.634-1.496-.959-2.394-1.099l-12.527 256.233 89.762-19.418S223.972 58.8 223.774 57.34c-.201-1.46-1.48-2.268-2.537-2.357" fill="#5E8E3E"/><path d="M135.242 104.585l-11.069 32.926s-9.698-5.176-21.586-5.176c-17.428 0-18.305 10.937-18.305 13.693 0 15.038 39.2 20.8 39.2 56.024 0 27.713-17.577 45.558-41.277 45.558-28.44 0-42.984-17.7-42.984-17.7l7.615-25.16s14.95 12.835 27.565 12.835c8.243 0 11.596-6.49 11.596-11.232 0-19.616-32.16-20.491-32.16-52.724 0-27.129 19.472-53.382 58.778-53.382 15.145 0 22.627 4.338 22.627 4.338" fill="#FFF"/></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
1
images/clients/tokico.svg
Normal file
1
images/clients/tokico.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg height="500" viewBox="22.4 19.2 854.6 143.8" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m222.5 22c-13.2 1.3-30.7 8.2-40.8 16.3-8.6 6.7-18 18.2-21.5 26.2-4.3 9.5-5.4 15.1-5.5 27-.1 14.3 1.9 22 8.6 33.3 14.1 23.7 39.8 37.6 69.7 37.7 25 0 45.6-8.6 61.8-25.9 9.7-10.4 15-21.6 17.2-36.8 1.1-7.2 1-9.8-.4-18.2-.9-5.3-2-10.5-2.5-11.4s-1.9-3.9-3.2-6.5c-4.3-8.8-5-9.8-11.7-16.9-18-19.1-42.5-27.6-71.7-24.8zm22.7 25.6c17.6 4.4 31.5 16.2 37.1 31.4 2.3 6.1 2.3 19.9 0 26-3.9 10.6-13.6 21.6-22.6 25.8-12.7 6-11.4 5.7-26.7 5.7l-14.5-.1-7.8-3.7c-19.4-9.1-31.4-29.4-27.8-46.9 2.4-12 8.1-21.1 17.4-28.1 13.5-10.2 29.9-13.9 44.9-10.1zm367.3-25.6c-12.2 1.2-32.6 9-38.2 14.6-.8.7-1.7 1.4-2.1 1.4-1.1 0-10.4 9.1-13.8 13.5-4.1 5.2-8.4 13.4-11.4 21.3-2 5.5-2.3 8.2-2.3 19 .1 11 .4 13.7 2.6 20 4.1 11.6 8.3 18 18.1 27.7 12 11.8 22.7 17.4 41.1 21.6 7.7 1.8 26.2 1.8 34 .1 24.2-5.5 43.6-19.1 53.9-37.6 5.9-10.8 6.1-10.6-10.4-10.6h-14.1l-7.7 7.9c-5.5 5.6-9.4 8.6-13.7 10.6-3.3 1.4-7.1 3.2-8.4 3.8-1.5.8-7.8 1.2-17 1.2l-14.6-.1-7.8-3.7c-8.8-4.1-19.8-14.1-23.4-21.2-2.4-4.7-5.3-15.4-5.3-19.7 0-3.5 2.5-12.8 4.7-17.8 7.1-15.6 27.8-28 46.8-28 15.1 0 32.6 8.5 41.8 20.2l3.7 4.8h14c17.6 0 17.4.2 10.7-11.7-3.6-6.3-7.6-11.3-12.8-16.1-18.4-16.7-41.3-23.8-68.4-21.2zm174.5 0c-4.1.4-10.2 1.5-13.4 2.4-9.2 2.5-23.4 9.9-30.6 15.8-5.8 4.9-13.4 13.7-15.3 17.8-.4.8-1.5 2.8-2.5 4.5-6.8 11-8.8 34-4.3 48.2 5.9 18.7 18.7 33.4 37 42.4 11 5.5 11.2 5.5 20.1 7.6 9.2 2.1 28.1 2.3 36.5.4 27.8-6.2 49.4-23.4 57.8-46.1 2.1-5.7 4.7-18.4 4.7-22.9 0-13.3-8-33.3-17.5-43.9-6.5-7.2-17.1-15.1-24-18.1-2.7-1.2-5.8-2.6-6.7-3.1-1.7-.9-4.6-1.8-13.3-3.8-5.9-1.4-19.9-2-28.5-1.2zm22 25.5c9.5 2.3 18.6 7.2 25.6 14 10 9.7 13.8 19.1 13.2 32.4-.2 7.1-.8 9.7-3.4 15.1-5.4 11.3-14.8 19.8-27.8 25.3-7.2 3-30.5 3.2-38.1.3-19.7-7.6-33.5-26.6-32.3-44.4 2-28.6 32.9-49.6 62.8-42.7zm-784.8-24.3c-1.8 1.8-1.6 21.2.2 22.7 1 .8 8.5 1.1 25.1 1.1 13-.1 24 .2 24.3.5.4.4.9 25.9 1.2 56.8l.5 56.2h23l.3-55.4c.1-38.9.5-55.8 1.3-56.8.9-1 6.1-1.3 24.1-1.3 13.9 0 23.7-.4 24.9-1 1.7-1 1.9-2.2 1.9-11.9 0-10.4-.1-10.9-2.2-11.5-1.3-.3-29.5-.6-62.9-.6-45.7 0-60.8.3-61.7 1.2zm308-.4c-1 .7-1.2 15.1-1.2 68.7 0 37.3.4 68.3.8 68.7.5.5 5.8.7 11.8.6l10.9-.3.3-23.6.2-23.7 4.4-3.8c6.1-5.3 14.6-11.9 17.4-13.3 1.9-1 2.5-.8 4.5 1.1 2.5 2.7 19.8 21.5 27.8 30.2 3 3.3 6.1 6.7 6.9 7.5.8.9 5.5 6.1 10.5 11.6 14.2 15.9 11.7 14.5 26.1 14.5 9.3 0 12.4-.3 12.4-1.3 0-1.2-1-2.3-19.4-22.2-5.6-6.1-12.2-13.2-14.7-16-2.4-2.7-4.8-5.5-5.4-6.1-1.3-1.5-20.6-22.3-22.5-24.4-4.7-5-6.9-8.2-6.3-9.6.3-.8 4-4 8.2-7.2 4.2-3.1 8.3-6.3 9.1-6.9.8-.7 10.5-8.2 21.6-16.5 11-8.4 21.4-16.4 23.1-17.8 1.8-1.4 4.8-3.8 6.7-5.4 2-1.5 3.6-3.2 3.6-3.7 0-1.4-36.7-1.1-39.2.2-2.1 1.1-19.9 14.5-26.8 20.1-1.9 1.6-3.9 3.2-4.5 3.6-.5.4-10.1 7.7-21.2 16.1s-20.7 15-21.3 14.6-1-10.1-1-27.9v-27.4l-2.2-.6c-3.4-.9-19.1-.7-20.6.2zm160.6.3c-1.7.9-1.8 5.3-1.8 68.2 0 37 .4 67.7.8 68.4.6 1 13.6 1.8 22 1.4 1-.1 1.2-14.3 1-69.3l-.3-69.3-10-.2c-5.6-.2-10.8.2-11.7.8z" fill="#c22d2d"/></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
BIN
images/couple-working-from-home-together-sofa.jpg
Normal file
BIN
images/couple-working-from-home-together-sofa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
images/happy-bearded-young-man.jpg
Normal file
BIN
images/happy-bearded-young-man.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
images/portrait-happy-excited-man-holding-laptop-computer.png
Normal file
BIN
images/portrait-happy-excited-man-holding-laptop-computer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
images/projects/bpro-erp.jpg
Normal file
BIN
images/projects/bpro-erp.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
images/projects/majsin-dashborad.png
Normal file
BIN
images/projects/majsin-dashborad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
BIN
images/projects/nanas-main-dashboard.png
Normal file
BIN
images/projects/nanas-main-dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
images/white-desk-work-study-aesthetics.jpg
Normal file
BIN
images/white-desk-work-study-aesthetics.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
817
index.html
Normal file
817
index.html
Normal file
@@ -0,0 +1,817 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="TemplateMo" />
|
||||
|
||||
<title>Mohammed Al-yaseen</title>
|
||||
|
||||
<!-- CSS FILES -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" />
|
||||
|
||||
<link href="css/bootstrap-icons.css" rel="stylesheet" />
|
||||
|
||||
<link href="css/magnific-popup.css" rel="stylesheet" />
|
||||
|
||||
<link href="css/templatemo-first-portfolio-style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="preloader">
|
||||
<div class="spinner">
|
||||
<span class="spinner-rotate"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<a href="index.html" class="navbar-brand mx-auto mx-lg-0">First</a>
|
||||
|
||||
<div class="d-flex align-items-center d-lg-none">
|
||||
<i class="navbar-icon bi-telephone-plus me-3"></i>
|
||||
<a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-lg-5">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link click-scroll" href="#section_1">Home</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link click-scroll" href="#section_2">About</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link click-scroll" href="#section_3">Services</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link click-scroll" href="#section_4">Projects</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link click-scroll" href="#section_5">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="d-lg-flex align-items-center d-none ms-auto">
|
||||
<i class="navbar-icon bi-telephone-plus me-3"></i>
|
||||
<a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section
|
||||
class="hero d-flex justify-content-center align-items-center"
|
||||
id="section_1"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-7 col-12">
|
||||
<div class="hero-text">
|
||||
<div class="hero-title-wrap d-flex align-items-center mb-4">
|
||||
<img
|
||||
src="images/happy-bearded-young-man.jpg"
|
||||
class="avatar-image avatar-image-large img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<h1 class="hero-title ms-3 mb-0">Hello friend!</h1>
|
||||
</div>
|
||||
|
||||
<h2 class="mb-4">I’m available for freelance work.</h2>
|
||||
<p class="mb-4">
|
||||
<a class="custom-btn btn custom-link" href="#section_2"
|
||||
>Let's begin</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-lg-5 col-12 position-relative">
|
||||
<div class="hero-image-wrap"></div>
|
||||
<img
|
||||
src="images/portrait-happy-excited-man-holding-laptop-computer.png"
|
||||
class="hero-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path
|
||||
fill="#535da1"
|
||||
fill-opacity="1"
|
||||
d="M0,160L24,160C48,160,96,160,144,138.7C192,117,240,75,288,64C336,53,384,75,432,106.7C480,139,528,181,576,208C624,235,672,245,720,240C768,235,816,213,864,186.7C912,160,960,128,1008,133.3C1056,139,1104,181,1152,202.7C1200,224,1248,224,1296,197.3C1344,171,1392,117,1416,90.7L1440,64L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"
|
||||
></path>
|
||||
</svg>
|
||||
</section>
|
||||
|
||||
<section class="about section-padding" id="section_2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<img
|
||||
src="images/couple-working-from-home-together-sofa.jpg"
|
||||
class="about-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
||||
<div class="about-thumb">
|
||||
<div
|
||||
class="section-title-wrap d-flex justify-content-end align-items-center mb-4"
|
||||
>
|
||||
<h2 class="text-white me-4 mb-0">My Story</h2>
|
||||
|
||||
<img
|
||||
src="images/happy-bearded-young-man.jpg"
|
||||
class="avatar-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 class="pt-2 mb-3">a little bit about Mohammed</h3>
|
||||
|
||||
<p>
|
||||
Work in a challenging environment in a company or organization
|
||||
in the web developing or maintenance where I can utilize my
|
||||
capabilities to advance in my career. I am self-motivated,
|
||||
ambitious, and eager to learn. I am a responsible individual
|
||||
with strong communication skills and a work ethic besides
|
||||
being creative, ocused, and highly determined. I am willing to
|
||||
take responsibility and work independently. At the same time,
|
||||
I can work well in teams.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="featured section-padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="profile-thumb">
|
||||
<div class="profile-title">
|
||||
<h4 class="mb-0">Information</h4>
|
||||
</div>
|
||||
|
||||
<div class="profile-body">
|
||||
<p>
|
||||
<span class="profile-small-title">Name</span>
|
||||
<span>Mohammed Al-yaseen</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="profile-small-title">Birthday</span>
|
||||
<span>Jun 1, 1998</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="profile-small-title">Phone</span>
|
||||
<span
|
||||
><a href="tel:+963-962-469-482">
|
||||
+963-962-469-482
|
||||
</a></span
|
||||
>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="profile-small-title">Email</span>
|
||||
<span
|
||||
><a href="mailto:mohammed.alyaseen.it@gmail.com"
|
||||
>mohammed.alyaseen.it@gmail.com</a
|
||||
></span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
||||
<div class="about-thumb">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-6 featured-border-bottom py-2">
|
||||
<strong class="featured-numbers">2+</strong>
|
||||
|
||||
<p class="featured-text">Years of Experiences</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-lg-6 col-6 featured-border-start featured-border-bottom ps-5 py-2"
|
||||
>
|
||||
<strong class="featured-numbers">5</strong>
|
||||
|
||||
<p class="featured-text">Happy Customers</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-6 pt-4">
|
||||
<strong class="featured-numbers">10</strong>
|
||||
|
||||
<p class="featured-text">Project Finished</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-6 featured-border-start ps-5 pt-4">
|
||||
<strong class="featured-numbers">7+</strong>
|
||||
|
||||
<p class="featured-text">Digital Awards</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
<section class="clients section-padding">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-12 col-12">
|
||||
<h3 class="text-center mb-5">Companies I've had worked</h3>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-4 ms-auto clients-item-height">
|
||||
<img
|
||||
src="images/clients/cachet.svg"
|
||||
class="clients-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-4 clients-item-height">
|
||||
<img
|
||||
src="images/clients/guitar-center.svg"
|
||||
class="clients-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-4 clients-item-height">
|
||||
<img
|
||||
src="images/clients/tokico.svg"
|
||||
class="clients-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-4 clients-item-height">
|
||||
<img
|
||||
src="images/clients/shopify.svg"
|
||||
class="clients-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-4 me-auto clients-item-height">
|
||||
<img
|
||||
src="images/clients/profil-rejser.svg"
|
||||
class="clients-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
|
||||
<section class="projects section-padding" id="section_4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-8 col-12 ms-auto">
|
||||
<div
|
||||
class="section-title-wrap d-flex justify-content-center align-items-center mb-4"
|
||||
>
|
||||
<img
|
||||
src="images/white-desk-work-study-aesthetics.jpg"
|
||||
class="avatar-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<h2 class="text-white ms-4 mb-0">Projects</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">NANS's CRM</h3>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="images/projects/nanas-main-dashboard.png"
|
||||
class="popup-image"
|
||||
>
|
||||
<img
|
||||
src="images/projects/nanas-main-dashboard.png"
|
||||
class="projects-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">Majsin's Restaurant</h3>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="images/projects/majsin-dashborad.png"
|
||||
class="popup-image"
|
||||
>
|
||||
<img
|
||||
src="images/projects/majsin-dashborad.png"
|
||||
class="projects-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="projects-thumb">
|
||||
<div class="projects-info">
|
||||
<small class="projects-tag">Website</small>
|
||||
|
||||
<h3 class="projects-title">BPro's ERP System</h3>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="images/projects/bpro-erp.png"
|
||||
class="popup-image"
|
||||
>
|
||||
<img
|
||||
src="images/projects/bpro-erp.png"
|
||||
class="projects-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="services section-padding" id="section_3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-12 mx-auto">
|
||||
<div
|
||||
class="section-title-wrap d-flex justify-content-center align-items-center mb-5"
|
||||
>
|
||||
<img
|
||||
src="images/handshake-man-woman-after-signing-business-contract-closeup.jpg"
|
||||
class="avatar-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<h2 class="text-white ms-4 mb-0">Services</h2>
|
||||
</div>
|
||||
|
||||
<div class="row pt-lg-5">
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="services-thumb">
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
|
||||
>
|
||||
<h3 class="mb-0">Websites</h3>
|
||||
|
||||
<!-- <div class="services-price-wrap ms-auto">
|
||||
<p class="services-price-text mb-0">$2,400</p>
|
||||
<div class="services-price-overlay"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<p>
|
||||
You may want to explore Too CSS for great collection of
|
||||
free HTML CSS templates.
|
||||
</p>
|
||||
|
||||
<a href="#" class="custom-btn custom-border-btn btn mt-3"
|
||||
>Discover More</a
|
||||
>
|
||||
|
||||
<div
|
||||
class="services-icon-wrap d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<i class="services-icon bi-globe"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="services-thumb services-thumb-up">
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
|
||||
>
|
||||
<h3 class="mb-0">Branding</h3>
|
||||
|
||||
<!-- <div class="services-price-wrap ms-auto">
|
||||
<p class="services-price-text mb-0">$1,200</p>
|
||||
<div class="services-price-overlay"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<p>
|
||||
You can explore more CSS templates on TemplateMo website
|
||||
by browsing through different tags.
|
||||
</p>
|
||||
|
||||
<a href="#" class="custom-btn custom-border-btn btn mt-3"
|
||||
>Discover More</a
|
||||
>
|
||||
|
||||
<div
|
||||
class="services-icon-wrap d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<i class="services-icon bi-lightbulb"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="services-thumb">
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
|
||||
>
|
||||
<h3 class="mb-0">Ecommerce</h3>
|
||||
|
||||
<!-- <div class="services-price-wrap ms-auto">
|
||||
<p class="services-price-text mb-0">$3,600</p>
|
||||
<div class="services-price-overlay"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<p>
|
||||
If you need a customized ecommerce website for your
|
||||
business, feel free to discuss with me.
|
||||
</p>
|
||||
|
||||
<a href="#" class="custom-btn custom-border-btn btn mt-3"
|
||||
>Discover More</a
|
||||
>
|
||||
|
||||
<div
|
||||
class="services-icon-wrap d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<i class="services-icon bi-phone"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="services-thumb services-thumb-up">
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
|
||||
>
|
||||
<h3 class="mb-0">SEO</h3>
|
||||
|
||||
<!-- <div class="services-price-wrap ms-auto">
|
||||
<p class="services-price-text mb-0">$1,450</p>
|
||||
<div class="services-price-overlay"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<p>
|
||||
To list your website first on any search engine, we will
|
||||
work together. First Portfolio is one-page CSS Template
|
||||
for free download.
|
||||
</p>
|
||||
|
||||
<a href="#" class="custom-btn custom-border-btn btn mt-3"
|
||||
>Discover More</a
|
||||
>
|
||||
|
||||
<div
|
||||
class="services-icon-wrap d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<i class="services-icon bi-google"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact section-padding" id="section_5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-8 col-12">
|
||||
<div
|
||||
class="section-title-wrap d-flex justify-content-center align-items-center mb-5"
|
||||
>
|
||||
<img
|
||||
src="images/aerial-view-man-using-computer-laptop-wooden-table.jpg"
|
||||
class="avatar-image img-fluid"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<h2 class="text-white ms-4 mb-0">Say Hi</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12 pe-lg-0">
|
||||
<div
|
||||
class="contact-info contact-info-border-start d-flex flex-column"
|
||||
>
|
||||
<strong class="site-footer-title d-block mb-3">Services</strong>
|
||||
|
||||
<ul class="footer-menu">
|
||||
<li class="footer-menu-item">
|
||||
<a href="#" class="footer-menu-link">Websites</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-menu-item">
|
||||
<a href="#" class="footer-menu-link">Branding</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-menu-item">
|
||||
<a href="#" class="footer-menu-link">Ecommerce</a>
|
||||
</li>
|
||||
|
||||
<li class="footer-menu-item">
|
||||
<a href="#" class="footer-menu-link">SEO</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<strong class="site-footer-title d-block mt-4 mb-3"
|
||||
>Stay connected</strong
|
||||
>
|
||||
|
||||
<ul class="social-icon">
|
||||
<li class="social-icon-item">
|
||||
<a
|
||||
href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/"
|
||||
class="social-icon-link bi-linkedin"
|
||||
target="_blank"
|
||||
></a>
|
||||
</li>
|
||||
|
||||
<li class="social-icon-item">
|
||||
<a
|
||||
href="https://github.com/mohammed-alyaseen"
|
||||
class="social-icon-link bi-github"
|
||||
target="_blank"
|
||||
></a>
|
||||
</li>
|
||||
|
||||
<li class="social-icon-item">
|
||||
<a
|
||||
href="https://www.facebook.com/profile.php?id=100010330412662"
|
||||
class="social-icon-link bi-facebook"
|
||||
target="_blank"
|
||||
></a>
|
||||
</li>
|
||||
|
||||
<li class="social-icon-item">
|
||||
<a
|
||||
href="https://www.youtube.com/templatemo"
|
||||
class="social-icon-link bi-youtube"
|
||||
target="_blank"
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<strong class="site-footer-title d-block mt-4 mb-3"
|
||||
>Start a project</strong
|
||||
>
|
||||
|
||||
<p class="mb-0">I’m available for freelance projects</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-12 ps-lg-0">
|
||||
<div class="contact-info d-flex flex-column">
|
||||
<strong class="site-footer-title d-block mb-3">About</strong>
|
||||
|
||||
<p class="mb-2">
|
||||
Mohammed is a professional web developer. Feel free to get in
|
||||
touch with me.
|
||||
</p>
|
||||
|
||||
<strong class="site-footer-title d-block mt-4 mb-3"
|
||||
>Email</strong
|
||||
>
|
||||
|
||||
<p style="word-break: break-all">
|
||||
<a href="mailto:mohammed.alyaseen.it@gmail.com">
|
||||
mohammed.alyaseen.it@gmail.com
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<strong class="site-footer-title d-block mt-4 mb-3"
|
||||
>Call</strong
|
||||
>
|
||||
|
||||
<p class="mb-0">
|
||||
<a href="tel:+963-962-469-482"> +963-962-469-482 </a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
||||
<form
|
||||
action="#"
|
||||
method="get"
|
||||
class="custom-form contact-form"
|
||||
role="form"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-12">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
class="form-control"
|
||||
placeholder="Name"
|
||||
required=""
|
||||
/>
|
||||
|
||||
<label>Name</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-md-6 col-12">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
pattern="[^ @]*@[^ @]*"
|
||||
class="form-control"
|
||||
placeholder="Email address"
|
||||
required=""
|
||||
/>
|
||||
|
||||
<label>Email address</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-6">
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
name="website"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="inlineCheckbox1"
|
||||
value="1"
|
||||
/>
|
||||
|
||||
<label class="form-check-label" for="inlineCheckbox1">
|
||||
<i class="bi-globe form-check-icon"></i>
|
||||
<span class="form-check-label-text">Websites</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-6">
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
name="branding"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="inlineCheckbox2"
|
||||
value="1"
|
||||
/>
|
||||
|
||||
<label class="form-check-label" for="inlineCheckbox2">
|
||||
<i class="bi-lightbulb form-check-icon"></i>
|
||||
<span class="form-check-label-text">Branding</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-6">
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
name="ecommerce"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="inlineCheckbox3"
|
||||
value="1"
|
||||
/>
|
||||
|
||||
<label class="form-check-label" for="inlineCheckbox3">
|
||||
<i class="bi-phone form-check-icon"></i>
|
||||
<span class="form-check-label-text">Ecommerce</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 col-6">
|
||||
<div class="form-check form-check-inline me-0">
|
||||
<input
|
||||
name="seo"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="inlineCheckbox4"
|
||||
value="1"
|
||||
/>
|
||||
|
||||
<label class="form-check-label" for="inlineCheckbox4">
|
||||
<i class="bi-google form-check-icon"></i>
|
||||
<span class="form-check-label-text">SEO</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12 col-12">
|
||||
<div class="form-floating">
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Tell me about the project"
|
||||
></textarea>
|
||||
|
||||
<label>Tell me about the project</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-12 ms-auto">
|
||||
<button type="submit" class="form-control">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-12">
|
||||
<div class="copyright-text-wrap">
|
||||
<p class="mb-0">
|
||||
<span class="copyright-text"
|
||||
>Copyright © 2036 <a href="#">First Portfolio</a> Company. All
|
||||
rights reserved.</span
|
||||
>
|
||||
Design:
|
||||
<a rel="sponsored" href="https://templatemo.com" target="_blank"
|
||||
>TemplateMo</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JAVASCRIPT FILES -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/jquery.sticky.js"></script>
|
||||
<script src="js/click-scroll.js"></script>
|
||||
<script src="js/jquery.magnific-popup.min.js"></script>
|
||||
<script src="js/magnific-popup-options.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
7
js/bootstrap.min.js
vendored
Normal file
7
js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
38
js/click-scroll.js
Normal file
38
js/click-scroll.js
Normal file
@@ -0,0 +1,38 @@
|
||||
//jquery-click-scroll
|
||||
//by syamsul'isul' Arifin
|
||||
|
||||
var sectionArray = [1, 2, 3, 4, 5];
|
||||
|
||||
$.each(sectionArray, function (index, value) {
|
||||
$(document).scroll(function () {
|
||||
var offsetSection = $("#" + "section_" + value).offset().top - 90;
|
||||
var docScroll = $(document).scrollTop();
|
||||
var docScroll1 = docScroll + 1;
|
||||
|
||||
if (docScroll1 >= offsetSection) {
|
||||
$(".navbar-nav .nav-item .nav-link").removeClass("active");
|
||||
$(".navbar-nav .nav-item .nav-link:link").addClass("inactive");
|
||||
$(".navbar-nav .nav-item .nav-link").eq(index).addClass("active");
|
||||
$(".navbar-nav .nav-item .nav-link").eq(index).removeClass("inactive");
|
||||
}
|
||||
});
|
||||
|
||||
$(".click-scroll")
|
||||
.eq(index)
|
||||
.click(function (e) {
|
||||
var offsetClick = $("#" + "section_" + value).offset().top - 90;
|
||||
e.preventDefault();
|
||||
$("html, body").animate(
|
||||
{
|
||||
scrollTop: offsetClick,
|
||||
},
|
||||
300
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
$(".navbar-nav .nav-item .nav-link:link").addClass("inactive");
|
||||
$(".navbar-nav .nav-item .nav-link").eq(0).addClass("active");
|
||||
$(".navbar-nav .nav-item .nav-link:link").eq(0).removeClass("inactive");
|
||||
});
|
||||
31
js/custom.js
Normal file
31
js/custom.js
Normal file
@@ -0,0 +1,31 @@
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
// PRE LOADER
|
||||
$(window).load(function () {
|
||||
$(".preloader").fadeOut(1000); // set duration in brackets
|
||||
});
|
||||
|
||||
// CUSTOM LINK
|
||||
$(".custom-link").click(function () {
|
||||
var el = $(this).attr("href");
|
||||
var elWrapped = $(el);
|
||||
var header_height = $(".navbar").height() + 10;
|
||||
|
||||
scrollToDiv(elWrapped, header_height);
|
||||
return false;
|
||||
|
||||
function scrollToDiv(element, navheight) {
|
||||
var offset = element.offset();
|
||||
var offsetTop = offset.top;
|
||||
var totalScroll = offsetTop - navheight;
|
||||
|
||||
$("body,html").animate(
|
||||
{
|
||||
scrollTop: totalScroll,
|
||||
},
|
||||
300
|
||||
);
|
||||
}
|
||||
});
|
||||
})(window.jQuery);
|
||||
4
js/jquery.magnific-popup.min.js
vendored
Normal file
4
js/jquery.magnific-popup.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
js/jquery.min.js
vendored
Normal file
4
js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
236
js/jquery.sticky.js
Normal file
236
js/jquery.sticky.js
Normal file
@@ -0,0 +1,236 @@
|
||||
// Sticky Plugin v1.0.3 for jQuery
|
||||
// =============
|
||||
// Author: Anthony Garand
|
||||
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
|
||||
// Improvements by Leonardo C. Daronco (daronco)
|
||||
// Created: 02/14/2011
|
||||
// Date: 07/20/2015
|
||||
// Website: http://stickyjs.com/
|
||||
// Description: Makes an element on the page stick on the screen as you scroll
|
||||
// It will only set the 'top' and 'position' of your element, you
|
||||
// might need to adjust the width in some cases.
|
||||
|
||||
(function ($) {
|
||||
var slice = Array.prototype.slice; // save ref to original slice()
|
||||
var splice = Array.prototype.splice; // save ref to original slice()
|
||||
|
||||
var defaults = {
|
||||
topSpacing: 0,
|
||||
bottomSpacing: 0,
|
||||
className: "is-sticky",
|
||||
wrapperClassName: "sticky-wrapper",
|
||||
center: false,
|
||||
getWidthFrom: "",
|
||||
widthFromWrapper: true, // works only when .getWidthFrom is empty
|
||||
responsiveWidth: false,
|
||||
},
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
sticked = [],
|
||||
windowHeight = $window.height(),
|
||||
scroller = function () {
|
||||
var scrollTop = $window.scrollTop(),
|
||||
documentHeight = $document.height(),
|
||||
dwh = documentHeight - windowHeight,
|
||||
extra = scrollTop > dwh ? dwh - scrollTop : 0;
|
||||
|
||||
for (var i = 0; i < sticked.length; i++) {
|
||||
var s = sticked[i],
|
||||
elementTop = s.stickyWrapper.offset().top,
|
||||
etse = elementTop - s.topSpacing - extra;
|
||||
|
||||
//update height in case of dynamic content
|
||||
s.stickyWrapper.css("height", s.stickyElement.outerHeight());
|
||||
|
||||
if (scrollTop <= etse) {
|
||||
if (s.currentTop !== null) {
|
||||
s.stickyElement.css({
|
||||
width: "",
|
||||
position: "",
|
||||
top: "",
|
||||
});
|
||||
s.stickyElement.parent().removeClass(s.className);
|
||||
s.stickyElement.trigger("sticky-end", [s]);
|
||||
s.currentTop = null;
|
||||
}
|
||||
} else {
|
||||
var newTop =
|
||||
documentHeight -
|
||||
s.stickyElement.outerHeight() -
|
||||
s.topSpacing -
|
||||
s.bottomSpacing -
|
||||
scrollTop -
|
||||
extra;
|
||||
if (newTop < 0) {
|
||||
newTop = newTop + s.topSpacing;
|
||||
} else {
|
||||
newTop = s.topSpacing;
|
||||
}
|
||||
if (s.currentTop != newTop) {
|
||||
var newWidth;
|
||||
if (s.getWidthFrom) {
|
||||
newWidth = $(s.getWidthFrom).width() || null;
|
||||
} else if (s.widthFromWrapper) {
|
||||
newWidth = s.stickyWrapper.width();
|
||||
}
|
||||
if (newWidth == null) {
|
||||
newWidth = s.stickyElement.width();
|
||||
}
|
||||
s.stickyElement
|
||||
.css("width", newWidth)
|
||||
.css("position", "fixed")
|
||||
.css("top", newTop);
|
||||
|
||||
s.stickyElement.parent().addClass(s.className);
|
||||
|
||||
if (s.currentTop === null) {
|
||||
s.stickyElement.trigger("sticky-start", [s]);
|
||||
} else {
|
||||
// sticky is started but it have to be repositioned
|
||||
s.stickyElement.trigger("sticky-update", [s]);
|
||||
}
|
||||
|
||||
if (
|
||||
(s.currentTop === s.topSpacing && s.currentTop > newTop) ||
|
||||
(s.currentTop === null && newTop < s.topSpacing)
|
||||
) {
|
||||
// just reached bottom || just started to stick but bottom is already reached
|
||||
s.stickyElement.trigger("sticky-bottom-reached", [s]);
|
||||
} else if (
|
||||
s.currentTop !== null &&
|
||||
newTop === s.topSpacing &&
|
||||
s.currentTop < newTop
|
||||
) {
|
||||
// sticky is started && sticked at topSpacing && overflowing from top just finished
|
||||
s.stickyElement.trigger("sticky-bottom-unreached", [s]);
|
||||
}
|
||||
|
||||
s.currentTop = newTop;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resizer = function () {
|
||||
windowHeight = $window.height();
|
||||
|
||||
for (var i = 0; i < sticked.length; i++) {
|
||||
var s = sticked[i];
|
||||
var newWidth = null;
|
||||
if (s.getWidthFrom) {
|
||||
if (s.responsiveWidth === true) {
|
||||
newWidth = $(s.getWidthFrom).width();
|
||||
}
|
||||
} else if (s.widthFromWrapper) {
|
||||
newWidth = s.stickyWrapper.width();
|
||||
}
|
||||
if (newWidth != null) {
|
||||
s.stickyElement.css("width", newWidth);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods = {
|
||||
init: function (options) {
|
||||
var o = $.extend({}, defaults, options);
|
||||
return this.each(function () {
|
||||
var stickyElement = $(this);
|
||||
|
||||
var stickyId = stickyElement.attr("id");
|
||||
var stickyHeight = stickyElement.outerHeight();
|
||||
var wrapperId = stickyId
|
||||
? stickyId + "-" + defaults.wrapperClassName
|
||||
: defaults.wrapperClassName;
|
||||
var wrapper = $("<div></div>")
|
||||
.attr("id", wrapperId)
|
||||
.addClass(o.wrapperClassName);
|
||||
|
||||
stickyElement.wrapAll(wrapper);
|
||||
|
||||
var stickyWrapper = stickyElement.parent();
|
||||
|
||||
if (o.center) {
|
||||
stickyWrapper.css({
|
||||
width: stickyElement.outerWidth(),
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
});
|
||||
}
|
||||
|
||||
if (stickyElement.css("float") == "right") {
|
||||
stickyElement
|
||||
.css({ float: "none" })
|
||||
.parent()
|
||||
.css({ float: "right" });
|
||||
}
|
||||
|
||||
stickyWrapper.css("height", stickyHeight);
|
||||
|
||||
o.stickyElement = stickyElement;
|
||||
o.stickyWrapper = stickyWrapper;
|
||||
o.currentTop = null;
|
||||
|
||||
sticked.push(o);
|
||||
});
|
||||
},
|
||||
update: scroller,
|
||||
unstick: function (options) {
|
||||
return this.each(function () {
|
||||
var that = this;
|
||||
var unstickyElement = $(that);
|
||||
|
||||
var removeIdx = -1;
|
||||
var i = sticked.length;
|
||||
while (i-- > 0) {
|
||||
if (sticked[i].stickyElement.get(0) === that) {
|
||||
splice.call(sticked, i, 1);
|
||||
removeIdx = i;
|
||||
}
|
||||
}
|
||||
if (removeIdx != -1) {
|
||||
unstickyElement.unwrap();
|
||||
unstickyElement.css({
|
||||
width: "",
|
||||
position: "",
|
||||
top: "",
|
||||
float: "",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener("scroll", scroller, false);
|
||||
window.addEventListener("resize", resizer, false);
|
||||
} else if (window.attachEvent) {
|
||||
window.attachEvent("onscroll", scroller);
|
||||
window.attachEvent("onresize", resizer);
|
||||
}
|
||||
|
||||
$.fn.sticky = function (method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, slice.call(arguments, 1));
|
||||
} else if (typeof method === "object" || !method) {
|
||||
return methods.init.apply(this, arguments);
|
||||
} else {
|
||||
$.error("Method " + method + " does not exist on jQuery.sticky");
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.unstick = function (method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, slice.call(arguments, 1));
|
||||
} else if (typeof method === "object" || !method) {
|
||||
return methods.unstick.apply(this, arguments);
|
||||
} else {
|
||||
$.error("Method " + method + " does not exist on jQuery.sticky");
|
||||
}
|
||||
};
|
||||
$(function () {
|
||||
setTimeout(scroller, 0);
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
$(document).ready(function () {
|
||||
$(".navbar").sticky({ topSpacing: 0 });
|
||||
});
|
||||
33
js/magnific-popup-options.js
Normal file
33
js/magnific-popup-options.js
Normal file
@@ -0,0 +1,33 @@
|
||||
$(document).ready(function () {
|
||||
// MagnificPopup
|
||||
var magnifyPopup = function () {
|
||||
$(".popup-image").magnificPopup({
|
||||
type: "image",
|
||||
removalDelay: 300,
|
||||
mainClass: "mfp-with-zoom",
|
||||
gallery: {
|
||||
enabled: true,
|
||||
},
|
||||
zoom: {
|
||||
enabled: true, // By default it's false, so don't forget to enable it
|
||||
|
||||
duration: 300, // duration of the effect, in milliseconds
|
||||
easing: "ease-in-out", // CSS transition easing function
|
||||
|
||||
// The "opener" function should return the element from which popup will be zoomed in
|
||||
// and to which popup will be scaled down
|
||||
// By default it looks for an image tag:
|
||||
opener: function (openerElement) {
|
||||
// openerElement is the element on which popup was initialized, in this case its <a> tag
|
||||
// you don't need to add "opener" option if this code matches your needs, it's default one.
|
||||
return openerElement.is("img")
|
||||
? openerElement
|
||||
: openerElement.find("img");
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Call the functions
|
||||
magnifyPopup();
|
||||
});
|
||||
Reference in New Issue
Block a user