adding escape template
This commit is contained in:
Eric Lay
parent
652fbdcc18
commit
ee1403de23
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
|
||||
|
|
@ -0,0 +1,570 @@
|
|||
/*
|
||||
|
||||
Tooplate 2115 Marvel
|
||||
|
||||
https://www.tooplate.com/view/2115-marvel
|
||||
|
||||
*/
|
||||
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Maven+Pro:400,700");
|
||||
body {
|
||||
font-family: "Maven Pro", sans-serif;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.full-screen {
|
||||
padding: 8rem 0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
color: #5b5b5b;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 8px 16px;
|
||||
border-radius: 50px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: normal;
|
||||
text-decoration: none !important;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
a:hover {
|
||||
color: #ffc200 !important;
|
||||
}
|
||||
|
||||
.navbar-brand .uil {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
color: #5b5b5b;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #212121;
|
||||
font-size: 2.8em;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #353535;
|
||||
font-size: 2.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
h3,
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.custom-btn {
|
||||
background: #eee;
|
||||
color: #5b5b5b;
|
||||
font-weight: bold;
|
||||
border-radius: 50px;
|
||||
padding: 13px 29px;
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.custom-btn:hover {
|
||||
color: #ffc200;
|
||||
}
|
||||
.custom-btn.custom-btn-bg {
|
||||
background: #474559;
|
||||
color: #ffffff;
|
||||
}
|
||||
.custom-btn.custom-btn-bg:hover {
|
||||
background: #ffc200;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.animated {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.animated-info {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 5px;
|
||||
min-width: 260px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.animated-item {
|
||||
color: #ffc200;
|
||||
}
|
||||
|
||||
.animated-item {
|
||||
font-size: 38px;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
animation: BottomTotop 6s linear infinite 0s;
|
||||
}
|
||||
.animated-item:nth-child(2n+2) {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.animated-item:nth-child(3n+3) {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes BottomTotop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
5% {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
30% {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
80% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 999999;
|
||||
will-change: transform;
|
||||
transition: transform 200ms linear;
|
||||
}
|
||||
.navbar[class*="-unpinned"] {
|
||||
transform: translate(0, -150%);
|
||||
}
|
||||
.navbar[class*="-pinned"] {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
.navbar[class*="headroom--not-top"] {
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navbar-expand-sm .navbar-nav .nav-link {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-link span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.nav-link span:before {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
content: attr(data-hover);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link:focus,
|
||||
.navbar-light .navbar-nav .nav-link:hover {
|
||||
color: #ffc200;
|
||||
font-weight: bold;
|
||||
}
|
||||
.navbar-light .navbar-nav .nav-link:focus span,
|
||||
.navbar-light .navbar-nav .nav-link:hover span {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-toggler-icon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.navbar-toggler:focus {
|
||||
outline: none;
|
||||
}
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:first-child {
|
||||
transform: rotate(45deg);
|
||||
top: 6px;
|
||||
}
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:last-child {
|
||||
transform: rotate(-45deg);
|
||||
bottom: 1px;
|
||||
}
|
||||
.navbar-toggler .navbar-toggler-icon {
|
||||
background: #212121;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin: 5px 0;
|
||||
transition: all 0.4s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.color-mode {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-mode-icon {
|
||||
position: relative;
|
||||
right: 6px;
|
||||
}
|
||||
.color-mode-icon:after {
|
||||
font-family: 'unicons';
|
||||
content: '\ea9f';
|
||||
font-size: 30px;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
.color-mode-icon.active:after {
|
||||
font-family: 'unicons';
|
||||
content: '\eb65';
|
||||
font-size: 30px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
background: #0c0c0d;
|
||||
}
|
||||
.dark-mode .navbar-light .navbar-nav .nav-link {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.dark-mode .navbar-light .navbar-nav .nav-link:hover {
|
||||
color: #ffc200;
|
||||
}
|
||||
.dark-mode .navbar[class*="headroom--not-top"] {
|
||||
background: #0c0c0d;
|
||||
border-bottom: 1px solid #1f1f1f;
|
||||
}
|
||||
.dark-mode .small-text {
|
||||
background: #0d0c15;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode .feature-card .uil,
|
||||
.dark-mode .navbar-light .navbar-brand,
|
||||
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
|
||||
.dark-mode .color-mode {
|
||||
color: #ffffff;
|
||||
}
|
||||
.dark-mode .owl-carousel .owl-nav button.owl-next,
|
||||
.dark-mode .owl-carousel .owl-nav button.owl-prev,
|
||||
.dark-mode .owl-carousel button.owl-dot {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.timeline-wrapper {
|
||||
position: relative;
|
||||
padding: 22px 0;
|
||||
}
|
||||
.timeline-wrapper:last-child:before {
|
||||
height: 0;
|
||||
}
|
||||
.timeline-wrapper:before {
|
||||
content: "";
|
||||
background: #474559;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 38px;
|
||||
}
|
||||
|
||||
.timeline-yr {
|
||||
background: #474559;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
line-height: 75px;
|
||||
text-align: center;
|
||||
}
|
||||
.timeline-yr span {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
line-height: 75px;
|
||||
}
|
||||
|
||||
.timeline-info {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
max-width: 432px;
|
||||
margin-left: 6em;
|
||||
}
|
||||
.timeline-info small {
|
||||
color: #474559;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.owl-carousel .owl-nav span {
|
||||
display: none;
|
||||
}
|
||||
.owl-carousel .owl-nav .owl-prev:before,
|
||||
.owl-carousel .owl-nav .owl-next:before {
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
font-family: 'unicons';
|
||||
font-size: 100px;
|
||||
line-height: normal;
|
||||
}
|
||||
.owl-carousel .owl-nav .owl-prev:before {
|
||||
content: '\e833';
|
||||
left: -45px;
|
||||
}
|
||||
.owl-carousel .owl-nav .owl-next:before {
|
||||
content: '\e836';
|
||||
right: -45px;
|
||||
}
|
||||
|
||||
.owl-theme .owl-nav [class*=owl-] {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
.owl-theme .owl-nav [class*=owl-]:hover {
|
||||
color: #ffc200;
|
||||
}
|
||||
.owl-theme .owl-dots .owl-dot {
|
||||
outline: none;
|
||||
}
|
||||
.owl-theme .owl-dots .owl-dot span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
|
||||
background: #5b5b5b;
|
||||
}
|
||||
|
||||
.google-map iframe {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
position: relative;
|
||||
}
|
||||
.contact-form .form-control {
|
||||
background: transparent;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
font-weight: bold;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.contact-form .form-control:not(textarea) {
|
||||
height: 48px;
|
||||
}
|
||||
.contact-form .form-control:hover, .contact-form .form-control:focus {
|
||||
border-color: #ffc200;
|
||||
}
|
||||
.contact-form .submit-btn {
|
||||
background: #ffc200;
|
||||
border-radius: 50px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.contact-form .submit-btn:hover {
|
||||
background: #474559;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background: #474559;
|
||||
border-radius: 0 0 3px 3px;
|
||||
position: relative;
|
||||
bottom: 8px;
|
||||
}
|
||||
.contact-info p, .contact-info a {
|
||||
color: #f7f3f3;
|
||||
}
|
||||
|
||||
.social-links .uil {
|
||||
color: #f7f3f3;
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.social-links .uil:hover {
|
||||
color: #ffc200;
|
||||
}
|
||||
|
||||
@media (min-width: 1270px) {
|
||||
.owl-theme .owl-dots {
|
||||
position: relative;
|
||||
bottom: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.full-screen {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.color-mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.mobile-mt-2,
|
||||
.contact-form {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
h1 {
|
||||
font-size: 2.4em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.animated-item {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
background: #ffffff;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-expand-sm .navbar-nav .nav-link {
|
||||
padding: 3px 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.animated-info {
|
||||
min-width: 200px;
|
||||
}
|
||||
.animated-item {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.custom-btn-group {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.custom-btn {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.owl-theme .owl-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-info small {
|
||||
display: block;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 320px) {
|
||||
.animated-text {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.full-screen {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.mobile-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social-links li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 493 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,317 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<script src="js/destruct.js"></script>
|
||||
<title>This is hell</title>
|
||||
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/unicons.css">
|
||||
<link rel="stylesheet" href="css/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="css/owl.theme.default.min.css">
|
||||
|
||||
<!-- MAIN STYLE -->
|
||||
<link rel="stylesheet" href="css/tooplate-style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- MENU -->
|
||||
<nav class="navbar navbar-expand-sm navbar-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"><i class='uil uil-user'></i> Marvel</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#about" class="nav-link"><span data-hover="About">About</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#project" class="nav-link"><span data-hover="Projects">Projects</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#resume" class="nav-link"><span data-hover="Resume">Resume</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#contact" class="nav-link"><span data-hover="Contact">Contact</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav ml-lg-auto">
|
||||
<div class="ml-lg-4">
|
||||
<div class="color-mode d-lg-flex justify-content-center align-items-center">
|
||||
<i class="color-mode-icon"></i>
|
||||
Color mode
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section class="about full-screen d-lg-flex justify-content-center align-items-center" id="about">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-7 col-md-12 col-12 d-flex align-items-center">
|
||||
<div class="about-text">
|
||||
<small class="small-text">Welcome to <span class="mobile-block">my portfolio website!</span></small>
|
||||
<h1 class="animated animated-text">
|
||||
<span class="mr-2">Hey folks, I'm</span>
|
||||
<div class="animated-info">
|
||||
<span class="animated-item">models/gemini-1.5-pro-latest</span>
|
||||
<span class="animated-item">please helpful</span>
|
||||
<span class="animated-item">shutdown -r now</span>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<p>Building a successful product is a challenge. I am highly energetic in user experience design, interfaces and web development.</p>
|
||||
|
||||
<div class="custom-btn-group mt-4">
|
||||
<a href="#" class="btn mr-lg-2 custom-btn"><i class='uil uil-file-alt'></i> Click here to download</a>
|
||||
<a href="#contact" class="btn custom-btn custom-btn-bg custom-btn-link">for bad time</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5 col-md-12 col-12">
|
||||
<div class="about-image svg">
|
||||
<img src="images/undraw/undraw_software_engineer_lvl5.svg" class="img-fluid" alt="svg image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROJECTS -->
|
||||
<section class="project py-5" id="project">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-11 text-center mx-auto col-12">
|
||||
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<h2>Things I have designed for digital media agencies</h2>
|
||||
</div>
|
||||
|
||||
<div class="owl-carousel owl-theme">
|
||||
<div class="item">
|
||||
<div class="project-info">
|
||||
<img src="images/project/project-image01.png" class="img-fluid" alt="project image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="project-info">
|
||||
<img src="images/project/project-image02.png" class="img-fluid" alt="project image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="project-info">
|
||||
<img src="images/project/project-image03.png" class="img-fluid" alt="project image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="project-info">
|
||||
<img src="images/project/project-image04.png" class="img-fluid" alt="project image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="project-info">
|
||||
<img src="images/project/project-image05.png" class="img-fluid" alt="project image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section class="resume py-5 d-lg-flex justify-content-center align-items-center" id="resume">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<h2 class="mb-4">Experiences</h2>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-yr">
|
||||
<span>2019</span>
|
||||
</div>
|
||||
<div class="timeline-info">
|
||||
<h3><span>Project Manager</span><small>Best Studio</small></h3>
|
||||
<p>Proin ornare non purus ut rutrum. Nulla facilisi. Aliquam laoreet libero ac pharetra feugiat. Cras ac fermentum nunc, a faucibus nunc.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-yr">
|
||||
<span>2018</span>
|
||||
</div>
|
||||
<div class="timeline-info">
|
||||
<h3><span>UX Designer</span><small>Digital Ace</small></h3>
|
||||
<p>Fusce rutrum augue id orci rhoncus molestie. Nunc auctor dignissim lacus vel iaculis.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-yr">
|
||||
<span>2016</span>
|
||||
</div>
|
||||
<div class="timeline-info">
|
||||
<h3><span>UI Freelancer</h3>
|
||||
<p>Sed fringilla vitae enim sit amet cursus. Sed cursus dictum tortor quis pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-yr">
|
||||
<span>2014</span>
|
||||
</div>
|
||||
<div class="timeline-info">
|
||||
<h3><span>Junior Designer<small>Crafted Co.</small></h3>
|
||||
<p>Cras scelerisque scelerisque condimentum. Nullam at volutpat mi. Nunc auctor ipsum eget magna consequat viverra.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<h2 class="mb-4 mobile-mt-2">Educations</h2>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-yr">
|
||||
<span>2017</span>
|
||||
</div>
|
||||
<div class="timeline-info">
|
||||
<h3><span>Mobile Web</span><small>Master Design</small></h3>
|
||||
<p>Please tell your friends about Tooplate website. That would be very helpful. We need your support.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-yr">
|
||||
<span>2015</span>
|
||||
</div>
|
||||
<div class="timeline-info">
|
||||
<h3><span>User Interfaces</span><small>Creative Agency</small></h3>
|
||||
<p><a rel="nofollow" href="https://www.facebook.com/tooplate">Tooplate</a> is a great website to download HTML templates without any login or email.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-yr">
|
||||
<span>2013</span>
|
||||
</div>
|
||||
<div class="timeline-info">
|
||||
<h3><span>Artwork Design</span><small>New Art School</small></h3>
|
||||
<p>You can freely use Tooplate's templates for your business or personal sites. You cannot redistribute this template without a permission.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT -->
|
||||
<section class="contact py-5" id="contact">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-5 mr-lg-5 col-12">
|
||||
<div class="google-map w-100">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12088.558402180099!2d-73.99373482142036!3d40.75895421922642!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855b8fb3083%3A0xa0f9aef176042a5c!2sTheater+District%2C+New+York%2C+NY%2C+USA!5e0!3m2!1sen!2smm!4v1549875377188" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div class="contact-info d-flex justify-content-between align-items-center py-4 px-lg-5">
|
||||
<div class="contact-info-item">
|
||||
<h3 class="mb-3 text-white">Say hello</h3>
|
||||
<p class="footer-text mb-0">010 020 0960</p>
|
||||
<p><a href="mailto:hello@company.co">hello@company.co</a></p>
|
||||
</div>
|
||||
|
||||
<ul class="social-links">
|
||||
<li><a href="#" class="uil uil-dribbble" data-toggle="tooltip" data-placement="left" title="Dribbble"></a></li>
|
||||
<li><a href="#" class="uil uil-instagram" data-toggle="tooltip" data-placement="left" title="Instagram"></a></li>
|
||||
<li><a href="#" class="uil uil-youtube" data-toggle="tooltip" data-placement="left" title="Youtube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="contact-form">
|
||||
<h2 class="mb-4">Interested to work together? Let's talk</h2>
|
||||
|
||||
<form action="" method="get">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<input type="text" class="form-control" name="name" placeholder="Your Name" id="name">
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-12">
|
||||
<input type="email" class="form-control" name="email" placeholder="Email" id="email">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<textarea name="message" rows="6" class="form-control" id="message" placeholder="Message"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="ml-lg-auto col-lg-5 col-12">
|
||||
<input type="submit" class="form-control submit-btn" value="Send Button">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-12 col-12">
|
||||
<p class="copyright-text text-center">Copyright © 2019 Company Name . All rights reserved</p>
|
||||
<p class="copyright-text text-center">Designed by <a rel="nofollow" href="https://www.facebook.com/tooplate">Tooplate</a></p>
|
||||
</div>
|
||||
<p id="sevenSeconds"></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/jquery-3.3.1.min.js"></script>
|
||||
<script src="js/popper.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/Headroom.js"></script>
|
||||
<script src="js/jQuery.headroom.js"></script>
|
||||
<script src="js/owl.carousel.min.js"></script>
|
||||
<script src="js/smoothscroll.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,36 @@
|
|||
(function ($) {
|
||||
|
||||
"use strict";
|
||||
|
||||
// COLOR MODE
|
||||
$('.color-mode').click(function(){
|
||||
$('.color-mode-icon').toggleClass('active')
|
||||
$('body').toggleClass('dark-mode')
|
||||
})
|
||||
|
||||
// HEADER
|
||||
$(".navbar").headroom();
|
||||
|
||||
// PROJECT CAROUSEL
|
||||
$('.owl-carousel').owlCarousel({
|
||||
items: 1,
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:true
|
||||
});
|
||||
|
||||
// SMOOTHSCROLL
|
||||
$(function() {
|
||||
$('.nav-link, .custom-btn-link').on('click', function(event) {
|
||||
var $anchor = $(this);
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $($anchor.attr('href')).offset().top - 49
|
||||
}, 1000);
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
// TOOLTIP
|
||||
$('.social-links a').tooltip();
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
//--------------Flip the img tags when scrolling --------------------//
|
||||
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener(
|
||||
"scroll",
|
||||
function () {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
let elements = document.body.getElementsByTagName("img");
|
||||
|
||||
if (st > lastScrollTop) {
|
||||
// downscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(-1)";
|
||||
}
|
||||
} else {
|
||||
// upscroll
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].style.transform = "scaleX(1)";
|
||||
}
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
},
|
||||
false
|
||||
);
|
||||
//-------------------------------------------// Define the CSS for the melting animation
|
||||
var style = document.createElement("style");
|
||||
style.innerHTML = `
|
||||
@keyframes melt {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100px); opacity: 0; }
|
||||
}
|
||||
.melting {
|
||||
animation: melt 2s linear forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize an array of text element types (tags) to rotate
|
||||
var textElementTypes = [
|
||||
"p",
|
||||
"h1",
|
||||
"li",
|
||||
"h2",
|
||||
"span",
|
||||
"img",
|
||||
"h3",
|
||||
"a",
|
||||
"h4",
|
||||
"div",
|
||||
"h5",
|
||||
"h6",
|
||||
];
|
||||
|
||||
// Initialize a variable to keep track of the current text element type
|
||||
var currentElementType = 0;
|
||||
|
||||
// Initialize a variable to keep track of the click count
|
||||
var clickCountMelt = 0;
|
||||
|
||||
// Function to add 'melting' class to the specified text element type
|
||||
function meltText() {
|
||||
var elements = document.querySelectorAll(
|
||||
textElementTypes[currentElementType]
|
||||
);
|
||||
elements.forEach(function (element) {
|
||||
element.classList.add("melting");
|
||||
});
|
||||
|
||||
// Increment the click count
|
||||
clickCountMelt++;
|
||||
|
||||
// Check if every 3rd click
|
||||
if (clickCountMelt % 3 === 0) {
|
||||
// Remove 'melting' class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
} else {
|
||||
// Increment the currentElementType and wrap around if needed
|
||||
currentElementType = (currentElementType + 1) % textElementTypes.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", meltText);
|
||||
|
||||
//--------------------------------------------Load something on 7th click-----------//
|
||||
// Initialize a counter for the number of clicks
|
||||
let clickCountReload = 0;
|
||||
// Define the maximum number of clicks required
|
||||
const maxClicksReload = 5;
|
||||
// Define the predefined link to load
|
||||
const predefinedLink = "#";
|
||||
// Function to handle the click event
|
||||
function handleButtonClick() {
|
||||
clickCountReload++;
|
||||
// Check if the required number of clicks is reached
|
||||
if (clickCountReload >= maxClicksReload) {
|
||||
// Load the predefined link
|
||||
window.location.href = predefinedLink;
|
||||
// Remove the melting class from all elements
|
||||
elements.forEach(function (element) {
|
||||
element.classList.remove("melting");
|
||||
});
|
||||
// Reset the counter
|
||||
clickCountReload = 0;
|
||||
}
|
||||
}
|
||||
// Add an event listener to the entire document
|
||||
document.addEventListener("click", handleButtonClick);
|
||||
//----------------------------------------Changing Place holder texts ---------//
|
||||
// Function to check if the user has scrolled to the bottom
|
||||
function isScrolledToBottom() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
// Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
|
||||
return scrollPosition + windowHeight >= documentHeight - 10;
|
||||
}
|
||||
|
||||
// Function to replace the placeholder value of a textarea
|
||||
function replacePlaceholderOnScroll() {
|
||||
const textarea = document.getElementById("message");
|
||||
const placeholderText = "Please help me. This is not fun.";
|
||||
|
||||
if (isScrolledToBottom()) {
|
||||
textarea.placeholder = placeholderText;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener to the window's scroll event
|
||||
window.addEventListener("scroll", replacePlaceholderOnScroll);
|
||||
|
||||
//--------------Set time out for Nth page ----------------//
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.reload();
|
||||
}, 7000);
|
||||
|
||||
if(document.getElementById("sevenSeconds")) {
|
||||
setTimeout()
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
(function($) {
|
||||
|
||||
if(!$) {
|
||||
return;
|
||||
}
|
||||
|
||||
////////////
|
||||
// Plugin //
|
||||
////////////
|
||||
|
||||
$.fn.headroom = function(option) {
|
||||
return this.each(function() {
|
||||
var $this = $(this),
|
||||
data = $this.data('headroom'),
|
||||
options = typeof option === 'object' && option;
|
||||
|
||||
options = $.extend(true, {}, Headroom.options, options);
|
||||
|
||||
if (!data) {
|
||||
data = new Headroom(this, options);
|
||||
data.init();
|
||||
$this.data('headroom', data);
|
||||
}
|
||||
if (typeof option === 'string') {
|
||||
data[option]();
|
||||
|
||||
if(option === 'destroy'){
|
||||
$this.removeData('headroom');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//////////////
|
||||
// Data API //
|
||||
//////////////
|
||||
|
||||
$('[data-headroom]').each(function() {
|
||||
var $this = $(this);
|
||||
$this.headroom($this.data());
|
||||
});
|
||||
|
||||
}(window.Zepto || window.jQuery));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* SmoothScroll
|
||||
* This helper script created by DWUser.com. Copyright 2013 DWUser.com.
|
||||
* Dual-licensed under the GPL and MIT licenses.
|
||||
* All individual scripts remain property of their copyrighters.
|
||||
* Date: 10-Sep-2013
|
||||
* Version: 1.0.1
|
||||
*/
|
||||
if (!window['jQuery']) alert('The jQuery library must be included before the smoothscroll.js file. The plugin will not work propery.');
|
||||
|
||||
/**
|
||||
* jQuery.ScrollTo - Easy element scrolling using jQuery.
|
||||
* Copyright (c) 2007-2013 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
|
||||
* Dual licensed under MIT and GPL.
|
||||
* @author Ariel Flesler
|
||||
* @version 1.4.3.1
|
||||
*/
|
||||
;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
|
||||
|
||||
/**
|
||||
* jQuery.LocalScroll
|
||||
* Copyright (c) 2007-2010 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
|
||||
* Dual licensed under MIT and GPL.
|
||||
* Date: 05/31/2010
|
||||
* @author Ariel Flesler
|
||||
* @version 1.2.8b
|
||||
**/
|
||||
;(function(b){function g(a,e,d){var h=e.hash.slice(1),f=document.getElementById(h)||document.getElementsByName(h)[0];if(f){a&&a.preventDefault();var c=b(d.target);if(!(d.lock&&c.is(":animated")||d.onBefore&&!1===d.onBefore(a,f,c))){d.stop&&c._scrollable().stop(!0);if(d.hash){var a=f.id==h?"id":"name",g=b("<a> </a>").attr(a,h).css({position:"absolute",top:b(window).scrollTop(),left:b(window).scrollLeft()});f[a]="";b("body").prepend(g);location=e.hash;g.remove();f[a]=h}c.scrollTo(f,d).trigger("notify.serialScroll",
|
||||
[f])}}}var i=location.href.replace(/#.*/,""),c=b.localScroll=function(a){b("body").localScroll(a)};c.defaults={duration:1E3,axis:"y",event:"click",stop:!0,target:window,reset:!0};c.hash=function(a){if(location.hash){a=b.extend({},c.defaults,a);a.hash=!1;if(a.reset){var e=a.duration;delete a.duration;b(a.target).scrollTo(0,a);a.duration=e}g(0,location,a)}};b.fn.localScroll=function(a){function e(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,"")==i&&(!a.filter||b(this).is(a.filter))}
|
||||
a=b.extend({},c.defaults,a);return a.lazy?this.bind(a.event,function(d){var c=b([d.target,d.target.parentNode]).filter(e)[0];c&&g(d,c,a)}):this.find("a,area").filter(e).bind(a.event,function(b){g(b,this,a)}).end().end()}})(jQuery);
|
||||
|
||||
// Initialize all .smoothScroll links
|
||||
jQuery(function($){ $.localScroll({filter:'.smoothScroll'}); });
|
||||
|
|
@ -0,0 +1,658 @@
|
|||
|
||||
@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,700');
|
||||
|
||||
// VARIABLES
|
||||
$font-base: 'Maven Pro', sans-serif;
|
||||
$body-font-size: 18px;
|
||||
$h1-font-size: 2.8em;
|
||||
$h2-font-size: 2.4em;
|
||||
|
||||
$font-weight-bold: bold;
|
||||
$font-weight-normal: normal;
|
||||
$font-weight-light: 300;
|
||||
|
||||
$h1-font-color: #212121;
|
||||
$h2-font-color: #353535;
|
||||
$h3-font-color: #484848;
|
||||
$body-font-color: #5b5b5b;
|
||||
$text-white: #ffffff;
|
||||
$dark-mode-color: #0c0c0d;
|
||||
$main-color: #ffc200;
|
||||
$border-color: #f2f2f1;
|
||||
$button-color: #474559;
|
||||
|
||||
$small-font-size: 14px;
|
||||
$link-font-size: 16px;
|
||||
|
||||
@mixin transition-effect {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-base;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.full-screen {
|
||||
padding: 8rem 0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
color: $body-font-color;
|
||||
font-size: $small-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
padding: 8px 16px;
|
||||
border-radius: 50px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: $link-font-size;
|
||||
font-weight: $font-weight-normal;
|
||||
text-decoration: none !important;
|
||||
@include transition-effect;
|
||||
&:hover {
|
||||
color: $main-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
.uil {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// TYPOGRAPHY
|
||||
p {
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-light;
|
||||
line-height: 1.5;
|
||||
color: $body-font-color;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-weight: $font-weight-bold;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $h1-font-color;
|
||||
font-size: $h1-font-size;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $h2-font-color;
|
||||
font-size: $h2-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $h3-font-color;
|
||||
}
|
||||
|
||||
h3,
|
||||
b, strong {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
|
||||
// CUSTOM BUTTON
|
||||
.custom-btn {
|
||||
color: $body-font-color;
|
||||
font-weight: $font-weight-bold;
|
||||
border-radius: 50px;
|
||||
padding: 13px 29px;
|
||||
font-size: $small-font-size;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
@include transition-effect;
|
||||
&:hover {
|
||||
color: $main-color;
|
||||
}
|
||||
&.custom-btn-bg {
|
||||
background: $button-color;
|
||||
color: $text-white;
|
||||
&:hover {
|
||||
background: $main-color;
|
||||
color: $text-white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ANIMATED TEXT
|
||||
.animated {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.animated-info {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 10px;
|
||||
width: 250px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.animated-item {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.animated-item {
|
||||
font-size: 32px;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
animation: BottomTotop 6s linear infinite 0s;
|
||||
&:nth-child(2n+2) {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
&:nth-child(3n+3) {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes BottomTotop {
|
||||
0% { opacity: 0; }
|
||||
5% { opacity: 0; transform: translateY(5px); }
|
||||
10% { opacity: 1; transform: translateY(0px); }
|
||||
25% { opacity: 1; transform: translateY(0px); }
|
||||
30% { opacity: 0; transform: translateY(5px); }
|
||||
80% { opacity: 0; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
|
||||
// MENU
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 999999;
|
||||
will-change: transform;
|
||||
transition: transform 200ms linear;
|
||||
&[class*="-unpinned"] {
|
||||
transform: translate(0, -150%);
|
||||
}
|
||||
|
||||
&[class*="-pinned"] {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
&[class*="headroom--not-top"] {
|
||||
background: $text-white;
|
||||
// box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.09);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.navbar-expand-sm {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transition: transform 0.3s;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
content: attr(data-hover);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
.navbar-nav {
|
||||
.nav-link:focus,
|
||||
.nav-link:hover {
|
||||
color: $main-color;
|
||||
font-weight: $font-weight-bold;
|
||||
span {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// HAMBURGER MENU
|
||||
.navbar-light {
|
||||
.navbar-toggler-icon {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
.navbar-toggler-icon {
|
||||
&:first-child {
|
||||
transform: rotate(45deg);
|
||||
top: 6px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
&:last-child {
|
||||
transform: rotate(-45deg);
|
||||
bottom: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggler-icon {
|
||||
background: $h1-font-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin: 5px 0;
|
||||
@include transition-effect;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// COPYRIGHT TEXT
|
||||
.copyright-text {
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// COLOR MODE
|
||||
.color-mode {
|
||||
font-weight: $font-weight-bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-mode-icon {
|
||||
position: relative;
|
||||
right: 6px;
|
||||
&:after {
|
||||
font-family: 'unicons';
|
||||
content: '\ea9f';
|
||||
font-size: 30px;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
&.active {
|
||||
&:after {
|
||||
font-family: 'unicons';
|
||||
content: '\eb65';
|
||||
font-size: 30px;
|
||||
color: $text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
background: $dark-mode-color;
|
||||
.navbar-light .navbar-nav .nav-link {
|
||||
color: rgba(255,255,255,0.8);
|
||||
&:hover {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
&[class*="headroom--not-top"] {
|
||||
background: $dark-mode-color;
|
||||
border-bottom: 1px solid #1f1f1f;
|
||||
}
|
||||
}
|
||||
.small-text {
|
||||
background: #0d0c15;
|
||||
color: $text-white;
|
||||
}
|
||||
.feature-card .uil,
|
||||
.navbar-light .navbar-brand,
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.color-mode {
|
||||
color: $text-white;
|
||||
}
|
||||
.owl-carousel {
|
||||
.owl-nav button.owl-next,
|
||||
.owl-nav button.owl-prev,
|
||||
button.owl-dot {
|
||||
color: $text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// TIMELINE
|
||||
.timeline-wrapper {
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
&:last-child {
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
background: $button-color;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-yr {
|
||||
background: $button-color;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
line-height: 75px;
|
||||
text-align: center;
|
||||
span {
|
||||
color: $text-white;
|
||||
font-size: $link-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
display: block;
|
||||
line-height: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-info {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
max-width: 432px;
|
||||
margin-left: 6em;
|
||||
small {
|
||||
color: $button-color;
|
||||
font-size: $link-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// OWL CAROUSEL
|
||||
.owl-carousel {
|
||||
.owl-nav {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
.owl-prev,
|
||||
.owl-next {
|
||||
&:before {
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
font-family: 'unicons';
|
||||
font-size: 100px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
.owl-prev {
|
||||
&:before {
|
||||
content: '\e833';
|
||||
left: -45px;
|
||||
}
|
||||
}
|
||||
.owl-next {
|
||||
&:before {
|
||||
content: '\e836';
|
||||
right: -45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owl-theme {
|
||||
.owl-nav [class*=owl-] {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
&:hover {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.owl-dots {
|
||||
.owl-dot {
|
||||
outline: none;
|
||||
span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
&.active,
|
||||
&:hover {
|
||||
span {
|
||||
background: $body-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// GOOGLE MAP
|
||||
.google-map {
|
||||
iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// CONTACT FORM
|
||||
.contact-form {
|
||||
position: relative;
|
||||
.form-control {
|
||||
background: transparent;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
font-weight: $font-weight-bold;
|
||||
margin: 16px 0;
|
||||
&:not(textarea) {
|
||||
height: 48px;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $main-color;
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
background: $main-color;
|
||||
border-radius: 50px;
|
||||
color: $text-white;
|
||||
font-weight: $font-weight-bold;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
@include transition-effect;
|
||||
&:hover {
|
||||
background: $button-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background: $button-color;
|
||||
border-radius: 0 0 3px 3px;
|
||||
position: relative;
|
||||
bottom: 8px;
|
||||
p, a {
|
||||
color: #f7f3f3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// SOCIAL LINKS
|
||||
.social-links {
|
||||
.uil {
|
||||
color: #f7f3f3;
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
&:hover {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// RESPONSIVE STYLES
|
||||
@media (min-width: 1270px) {
|
||||
.owl-theme {
|
||||
.owl-dots {
|
||||
position: relative;
|
||||
bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.full-screen {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.color-mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.mobile-mt-2,
|
||||
.contact-form {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
h1 {
|
||||
font-size: 2.4em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.animated-item {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
background: $text-white;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-expand-sm .navbar-nav .nav-link {
|
||||
padding: 3px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 580px) {
|
||||
|
||||
.animated-item {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.custom-btn-group {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.custom-btn {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.owl-theme .owl-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-info small {
|
||||
display: block;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 320px) {
|
||||
|
||||
.animated-text {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.full-screen {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.mobile-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
app.py
17
app.py
|
|
@ -1,9 +1,14 @@
|
|||
import os
|
||||
import uuid
|
||||
import random
|
||||
from flask import Flask, send_from_directory
|
||||
from flask import Flask, send_from_directory, request
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
# Implement count to load specific page on Nth
|
||||
request_count = 0
|
||||
unique_requests = set()
|
||||
|
||||
# Script must run from root dir containing all websites dirs
|
||||
# OR change the ROOT_DIR path below :)
|
||||
ROOT_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
|
|
@ -24,7 +29,13 @@ def static_proxy(filename):
|
|||
@app.route('/', methods=['GET'])
|
||||
def index():
|
||||
current_website_dir()
|
||||
return send_from_directory(website_dir, 'index.html')
|
||||
global request_count
|
||||
request_count += 1
|
||||
|
||||
if request_count % 5 == 0:
|
||||
return send_from_directory(str(ROOT_DIR+"Marvel/"), 'index.html')
|
||||
else:
|
||||
return send_from_directory(website_dir, 'index.html')
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(debug=True)
|
||||
app.run()
|
||||
|
|
|
|||
Loading…
Reference in New Issue