generated from Templates_CodeFirst/templateHtmlCss
enjolys
6 days ago
parent
477e015385
commit
30419344ec
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,39 @@
|
||||
/*
|
||||
Flaticon icon font: Flaticon
|
||||
Creation date: 07/05/2018 12:24
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Flaticon";
|
||||
src: url("../fonts/Flaticon.eot");
|
||||
src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
|
||||
url("../fonts/Flaticon.woff") format("woff"),
|
||||
url("../fonts/Flaticon.ttf") format("truetype"),
|
||||
url("../fonts/Flaticon.svg#Flaticon") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: "Flaticon";
|
||||
src: url("../fonts/Flaticon.svg#Flaticon") format("svg");
|
||||
}
|
||||
}
|
||||
|
||||
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
|
||||
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
|
||||
font-family: Flaticon;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.flaticon-bitbucket-logotype-camera-lens-in-perspective:before { content: "\f100"; }
|
||||
.flaticon-squarespace-logo:before { content: "\f101"; }
|
||||
.flaticon-smug:before { content: "\f102"; }
|
||||
.flaticon-flickr-website-logo-silhouette:before { content: "\f103"; }
|
||||
.flaticon-github-logo:before { content: "\f104"; }
|
||||
.flaticon-behance-logo:before { content: "\f105"; }
|
||||
.flaticon-dribbble:before { content: "\f106"; }
|
||||
.flaticon-themeforest:before { content: "\f107"; }
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Owl Carousel v2.2.0
|
||||
* Copyright 2013-2016 David Deutsch
|
||||
* Licensed under MIT (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}.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{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.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;-moz-user-select:none;-ms-user-select:none;}.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{-webkit-user-select:none;-moz-user-select:none;-ms-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{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name: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 img.owl-lazy{-webkit-transform-style:preserve-3d;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:-webkit-transform .1s ease;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transform:scale(1.3,1.3);-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.2.1
|
||||
* Copyright 2013-2017 David Deutsch
|
||||
* Licensed under ()
|
||||
*/
|
||||
.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,96 @@
|
||||
@media screen and (max-width:1680px){
|
||||
|
||||
}/*max-width:1680px*/
|
||||
@media screen and (max-width:1440px){
|
||||
.single-about-img img {max-width:100%;}
|
||||
.single-about-img:before,.about-list-icon{width: 100%;}
|
||||
}/*max-width:1440px*/
|
||||
|
||||
@media screen and (max-width:1199px){
|
||||
nav.navbar.bootsnav ul.nav > li > a { padding: 35px 8px;}
|
||||
|
||||
.welcome-hero {height: 768px;}
|
||||
|
||||
.timeline-content span>i, .experience-time span>i {left: -15.5%;}
|
||||
}/*max-width:1199px*/
|
||||
|
||||
@media screen and (max-width:1024px){
|
||||
|
||||
|
||||
}/*max-width:1024px*/
|
||||
|
||||
@media screen and (max-width:1008px){
|
||||
nav.navbar.bootsnav ul.nav > li.dropdown span.megamenu-title {display:block;color: #43465d;font-size: 18px;}
|
||||
nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .content ul.menu-col li .megamenu-sub-title a {margin-top: 20px;font-size: 14px;}
|
||||
nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .content ul.menu-col li .megamenu-sub-txt a{margin-bottom: 15px;}
|
||||
}/*max-width:1008px*/
|
||||
|
||||
@media screen and (max-width:992px){
|
||||
nav.navbar.bootsnav .navbar-collapse.collapse.in {padding-bottom: 30px;}
|
||||
nav.navbar.bootsnav .navbar-toggle {display: inline-block; float: right;margin-right: 0;margin-top: 21px;}
|
||||
nav.navbar.bootsnav .navbar-brand {float: left!important;}
|
||||
nav.navbar.bootsnav ul.nav > li > a {padding: 15px 0px;border: transparent;}
|
||||
}/*max-width:992px*/
|
||||
|
||||
@media screen and (max-width:991px){
|
||||
.experience-time-responsive{display: block;}
|
||||
.experience-time-main{display: none;}
|
||||
.experience-time,.timeline-content{text-align: left;margin-bottom: 20px;margin-left: 40px;}
|
||||
.timeline-content span>i{left: 0%;top: -54%;}
|
||||
.experience-time span>i {left: -6%;top: 6%;}
|
||||
.main-timeline:before {left:0.4%;}
|
||||
|
||||
.single-horizontal-timeline .experience-time,.single-horizontal-timeline .timeline-content {margin: 0;}
|
||||
}/*max-width:991px*/
|
||||
|
||||
@media screen and (max-width:768px){
|
||||
|
||||
}/*max-width:768px*/
|
||||
|
||||
@media screen and (max-width:767px){
|
||||
.single-about-img {max-width: 450px;}
|
||||
.experience-time span>i,.timeline-content span>i,.main-timeline:before {display: none;}
|
||||
.experience-time, .timeline-content {margin-left: 0;}
|
||||
|
||||
.isotope .item {max-width: 350px;margin: 0 auto 30px;}
|
||||
|
||||
.single-profile {max-width: 350px; margin: 30px auto;border: 0;}
|
||||
.profile-border{border: 0;}
|
||||
|
||||
.single-horizontal-timeline {max-width: 350px;margin: 30px auto;}
|
||||
|
||||
}/*max-width:767px*/
|
||||
|
||||
@media screen and (max-width: 660px){
|
||||
|
||||
}/*max-width:660px*/
|
||||
|
||||
@media screen and (max-width: 640px){
|
||||
|
||||
}/*max-width:640px*/
|
||||
|
||||
@media screen and (max-width: 580px){
|
||||
|
||||
}/*max-width:580px*/
|
||||
|
||||
@media screen and (max-width: 540px){
|
||||
.subscribe-title h2 {font-size: 24px;}
|
||||
|
||||
}/*max-width:540px*/
|
||||
|
||||
@media screen and (max-width: 480px){
|
||||
|
||||
}/*max-width:480px*/
|
||||
|
||||
@media screen and (max-width: 440px){
|
||||
|
||||
}/*max-width:400px*/
|
||||
|
||||
@media screen and (max-width:350px){
|
||||
|
||||
}/*max-width:350px*/
|
||||
|
||||
@media screen and (max-width: 320px){
|
||||
|
||||
}/*max-width:320px*/
|
||||
|
||||
@ -0,0 +1,855 @@
|
||||
/*==================================
|
||||
* Author : "ThemeSine"
|
||||
* Template Name : Browny HTML Template
|
||||
* Version : 1.0
|
||||
==================================== */
|
||||
|
||||
/*==================================
|
||||
font-family: 'Poppins', sans-serif;
|
||||
==================================== */
|
||||
|
||||
|
||||
/*=========== TABLE OF CONTENTS ===========
|
||||
1. General css (Reset code)
|
||||
2. Header
|
||||
3. Welcome-hero
|
||||
4. About me
|
||||
5. Education
|
||||
6. Skill
|
||||
7. Experience
|
||||
8. Profiles
|
||||
9. Portfolio
|
||||
10. Clients
|
||||
11. Contact
|
||||
|
||||
/*-------------------------------------
|
||||
1.General css (Reset code)
|
||||
--------------------------------------*/
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*{
|
||||
-webkit-box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
-o-box-sizing:border-box;
|
||||
-ms-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
body{
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size:16px;
|
||||
color: #676a81;
|
||||
background: #fff;
|
||||
max-width:1920px;
|
||||
margin:0 auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
a,a:hover,a:active,a:focus {
|
||||
display:inline-block;
|
||||
text-decoration:none;
|
||||
color: #6a708e;
|
||||
font-size:16px;
|
||||
padding:0;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin: 0;
|
||||
color:#43485c;
|
||||
font-size: 16px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
line-height:1.8;
|
||||
color:#43485c;
|
||||
font-size:14px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
img{border:none;max-width:100%; height:auto;}
|
||||
ul{
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
list-style: none;
|
||||
}
|
||||
ul li {
|
||||
list-style: none;
|
||||
|
||||
}
|
||||
select,input,textarea,button{box-shadow:none;outline:0!important;}
|
||||
button {background: transparent;border: 0;}
|
||||
|
||||
html,body{
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
[placeholder]:focus::-webkit-input-placeholder {
|
||||
-webkit-transition: opacity 0.3s 0.3s ease;
|
||||
-moz-transition: opacity 0.3s 0.3s ease;
|
||||
-ms-transition: opacity 0.3s 0.3s ease;
|
||||
-o-transition: opacity 0.3s 0.3s ease;
|
||||
transition: opacity 0.3s 0.3s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fix{position: relative;clear: both;}
|
||||
/*=============Style css=========*/
|
||||
|
||||
/*-------------------------------------
|
||||
2. Header
|
||||
--------------------------------------*/
|
||||
.top-area {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
}
|
||||
@media (min-width: 1024px){}
|
||||
nav.navbar.bootsnav.no-background {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
nav.navbar.bootsnav {
|
||||
background-color: #fff;
|
||||
border-bottom: transparent;
|
||||
box-shadow: 0 3px 15px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
/*.navbar-brand*/
|
||||
.navbar-header a.navbar-brand,.navbar-header a.navbar-brand:hover,.navbar-header a.navbar-brand:focus {
|
||||
display: inline-block;
|
||||
color: #d92cf9;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
padding: 33px 0px 57px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
/*.navbar-brand*/
|
||||
|
||||
/*.nav li*/
|
||||
nav.navbar.bootsnav ul.nav > li > a {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-transform:uppercase;
|
||||
-webkit-transition: 0.3s linear;
|
||||
-moz-transition: 0.3s linear;
|
||||
-ms-transition: 0.3s linear;
|
||||
-o-transition: 0.3s linear;
|
||||
transition: 0.3s linear;
|
||||
}
|
||||
nav.navbar.bootsnav ul.nav > li > a {padding: 35px 20px;}
|
||||
nav.navbar.bootsnav ul.nav > li > a:hover,nav.navbar.bootsnav ul.nav > li > a:focus,nav.navbar.bootsnav ul.nav > li.active>a{color: #d92cf9;}
|
||||
|
||||
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after {
|
||||
content: "";
|
||||
}
|
||||
nav.navbar.bootsnav ul.nav > li.dropdown span {
|
||||
font-size: 8px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a {color:#6a708e;}
|
||||
.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:hover,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:focus,.sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li.active>a{color: #d92cf9;}
|
||||
/*.nav li*/
|
||||
|
||||
|
||||
|
||||
/*.menu-ui-design*/
|
||||
.menu-ui-design{overflow-y:scroll;height: 350px;}
|
||||
.menu-ui-design::-webkit-scrollbar {
|
||||
width:5px;
|
||||
}
|
||||
.menu-ui-design::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 8px #000;
|
||||
}
|
||||
.menu-ui-design::-webkit-scrollbar-thumb {
|
||||
background-color: #d92cf9;
|
||||
}
|
||||
/*.menu-ui-design*/
|
||||
|
||||
|
||||
|
||||
/*.navbar-toggle */
|
||||
nav.navbar.bootsnav .navbar-toggle {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: 1px solid #d92cf9;
|
||||
padding: 10px;
|
||||
top: 0;
|
||||
}
|
||||
nav.navbar.bootsnav .navbar-toggle i{color: #d92cf9;}
|
||||
/*.navbar-toggle */
|
||||
|
||||
|
||||
|
||||
/*-------------------------------------
|
||||
3. Welcome-hero
|
||||
--------------------------------------*/
|
||||
.welcome-hero{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position:relative;
|
||||
background:url(../images/about/welcome-banner.jpg)no-repeat;
|
||||
background-size:cover;
|
||||
background-position: center;
|
||||
height:890px;
|
||||
}
|
||||
.welcome-hero:before{
|
||||
position:absolute;
|
||||
content: " ";
|
||||
top:0;
|
||||
left:0;
|
||||
background:rgba(31,44,108,.65);
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
/*.header-text-area*/
|
||||
.header-text h2 {
|
||||
color: #fff;
|
||||
font-size: 54px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.header-text h2 span {color: #d92cf9;}
|
||||
.header-text p {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
margin: 30px 0 60px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.header-text a {
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 3px;
|
||||
text-transform: capitalize;
|
||||
color: #fff;
|
||||
background: #b636ff;
|
||||
border:1px solid #b636ff;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,.2);
|
||||
-webkit-transition: 0.3s linear;
|
||||
-moz-transition: 0.3s linear;
|
||||
-ms-transition: 0.3s linear;
|
||||
-o-transition: 0.3s linear;
|
||||
transition: 0.3s linear;
|
||||
}
|
||||
.header-text a:hover{ box-shadow: 0 5px 20px rgba(0,0,0,.4);background:#9f00ff;border: 1px solid #9f00ff;}
|
||||
/*.header-text-area*/
|
||||
|
||||
/*-------------------------------------
|
||||
4. About
|
||||
--------------------------------------*/
|
||||
.about {padding: 50px 0 100px;}
|
||||
.about-content {padding-top: 100px;}
|
||||
/*.single-about-txt*/
|
||||
.single-about-txt h3 {
|
||||
font-size:18px;
|
||||
color: #3c4258;
|
||||
text-transform: initial;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.single-about-txt p {
|
||||
font-size: 16px;
|
||||
color: #999fb3;
|
||||
padding: 35px 0 43px;
|
||||
border-bottom: 1px solid #999fb3;
|
||||
}
|
||||
.single-about-add-info {
|
||||
margin: 35px 0;
|
||||
}
|
||||
.single-about-add-info h3 {
|
||||
color: #636a82;
|
||||
font-size: 16px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.single-about-add-info p {font-weight: 300;border: 0;padding: 0;margin-top: 3px;}
|
||||
/*.single-about-txt*/
|
||||
|
||||
/*.single-about-img */
|
||||
.single-about-img{position: relative;box-shadow: 0 5px 20px rgba(14,25,80,.30);}
|
||||
.single-about-img:before {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 109%;
|
||||
height: 100%;
|
||||
background: rgba(31,44,108,.3);
|
||||
}
|
||||
.single-about-img img {
|
||||
max-width: 500px;
|
||||
height: 468px;
|
||||
}
|
||||
.about-list-icon{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 109%;
|
||||
height: 90px;
|
||||
background: #1f2c6c;
|
||||
}
|
||||
/*.ab-list-icon */
|
||||
.about-list-icon ul {
|
||||
display: flex;
|
||||
}
|
||||
.about-list-icon ul li a {
|
||||
padding-right: 22px;
|
||||
cursor:pointer;
|
||||
color: #fff;
|
||||
}
|
||||
.about-list-icon ul li a {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
border: 2px solid;
|
||||
margin-left: 20px;
|
||||
border-radius: 8px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.about-list-icon ul li a i {
|
||||
margin-left: 6px;
|
||||
}
|
||||
/*.ab-list-icon */
|
||||
|
||||
/*.single-about-img */
|
||||
|
||||
/*-------------------------------------
|
||||
5. Education
|
||||
--------------------------------------*/
|
||||
|
||||
.education {
|
||||
background: #f9fbfd;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.education-horizontal-timeline {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
/*.education-horizontal-timeline*/
|
||||
.education-horizontal-timeline .col-sm-4 {padding:0 2px;}
|
||||
|
||||
.single-horizontal-timeline .experience-time h3{text-transform: capitalize;}
|
||||
.single-horizontal-timeline .experience-time h3 span{text-transform:lowercase;}
|
||||
.single-horizontal-timeline .timeline-content h5 {margin: 15px 0;}
|
||||
.single-horizontal-timeline p {color: #999fb3;max-width: 335px;}
|
||||
|
||||
/*.timeline-horizontal-border*/
|
||||
.timeline-horizontal-border {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 26px 0 30px;
|
||||
}
|
||||
.timeline-horizontal-border i {
|
||||
font-size: 10px;
|
||||
color: #d92cf9;
|
||||
margin-right: 5px;
|
||||
}
|
||||
span.single-timeline-horizontal {
|
||||
display: inline-block;
|
||||
background: #b2c1ce;
|
||||
height: 1px;
|
||||
width: 380px;
|
||||
}
|
||||
span.single-timeline-horizontal.spacial-horizontal-line {width: 88px;}
|
||||
/*.timeline-horizontal-border*/
|
||||
|
||||
/*.education-horizontal-timeline*/
|
||||
|
||||
/*-------------------------------------
|
||||
6. Skills
|
||||
--------------------------------------*/
|
||||
.skills {
|
||||
|
||||
}
|
||||
.skill-content{padding: 50px 0 80px;}
|
||||
.single-skill-content{padding-top: 100px;}
|
||||
.section-heading h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: 50px;
|
||||
border-bottom: 1px solid #e5ebf2;
|
||||
}
|
||||
.single-progress-txt {
|
||||
display: flex;
|
||||
}
|
||||
.single-progress-txt h3 {
|
||||
width: 10%;
|
||||
color: #a606c3;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
left: 20px;
|
||||
}
|
||||
.barWrapper {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.progress {
|
||||
border-radius:3px;
|
||||
overflow: visible;
|
||||
background: #e6ecf3;
|
||||
height:8px;
|
||||
margin-top: 15px;
|
||||
width: 85%;
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
.progress-bar {
|
||||
background: #b636ff;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: width 1.5s ease-in-out;
|
||||
-ms-transition: width 1.5s ease-in-out;
|
||||
-moz-transition: width 1.5s ease-in-out;
|
||||
-o-transition: width 1.5s ease-in-out;
|
||||
transition: width 1.5s ease-in-out;
|
||||
}
|
||||
.tooltip{
|
||||
position:relative;
|
||||
float:right;
|
||||
}
|
||||
.tooltip > .tooltip-inner {
|
||||
background-color: transparent;
|
||||
padding: 1px 5px;
|
||||
color: #b636ff;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.popOver + .tooltip > .tooltip-arrow {
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #fff;
|
||||
bottom: -1px;
|
||||
transform: translateX(-50%);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*-------------------------------------
|
||||
7. Experience
|
||||
-------------------------------------*/
|
||||
.experience {
|
||||
padding: 50px 0 100px;
|
||||
border-top: 1px solid #e5ebf2;
|
||||
}
|
||||
.experience-content {padding-top: 100px;}
|
||||
.single-timeline-box {margin-bottom: 75px;}
|
||||
|
||||
/*experience-time*/
|
||||
.experience-time {
|
||||
position: relative;
|
||||
}
|
||||
.experience-time h2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
.experience-time h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: #636a82;
|
||||
margin-top: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
/*experience-time*/
|
||||
|
||||
/*main-timeline*/
|
||||
.main-timeline{
|
||||
position: relative;
|
||||
}
|
||||
.main-timeline:before{
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 84%;
|
||||
background: #b2c1ce;
|
||||
position: absolute;
|
||||
top: 1.5%;
|
||||
left: 45.8%;
|
||||
z-index: -1;
|
||||
}
|
||||
.main-timeline .timeline{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-content span>i, .experience-time span>i {
|
||||
color: #d92cf9;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
left: -14.5%;
|
||||
z-index: 1;
|
||||
}
|
||||
.timeline-content h4.title {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.timeline-content h5 {
|
||||
color: #636a82;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
margin: 18px 0 20px;
|
||||
}
|
||||
.main-timeline .description {
|
||||
font-size: 14px;
|
||||
color: #999fb3;
|
||||
}
|
||||
.main-timeline .timeline-content.right{
|
||||
float: right;
|
||||
text-align: left;
|
||||
}
|
||||
.timeline-single-before:before {
|
||||
content: '';
|
||||
top: 57px;
|
||||
left: -3px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height:400px;
|
||||
border-left:15px solid #fff;
|
||||
}
|
||||
|
||||
.experience-time-responsive{display: none;}
|
||||
/*-------------------------------------
|
||||
8. Profiles
|
||||
--------------------------------------*/
|
||||
.profiles {
|
||||
padding: 50px 0 100px;
|
||||
border: 1px solid #e5ebf2;
|
||||
}
|
||||
|
||||
.profiles-content {padding-top: 100px;}
|
||||
.profiles-content .col-sm-3{padding:0;}
|
||||
.profile-txt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.single-profile {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-right: 1px solid #b2c1ce;
|
||||
overflow:hidden;
|
||||
-webkit-transition:background 0.5s linear;
|
||||
-moz-transition:background 0.5s linear;
|
||||
-ms-transition:background 0.5s linear;
|
||||
-o-transition:background 0.5s linear;
|
||||
transition:background 0.5s linear;
|
||||
}
|
||||
.profile-icon-name {
|
||||
text-transform: capitalize;
|
||||
color: #636a82;
|
||||
font-size: 16px;
|
||||
}
|
||||
.single-profile.profile-no-border{border-right:transparent;}
|
||||
.profile-border {
|
||||
border-bottom: 1px solid #b2c1ce;
|
||||
}
|
||||
.single-profile-overlay{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
text-transform: capitalize;
|
||||
justify-content:center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: " ";
|
||||
width:100%;
|
||||
height: 100%;
|
||||
background: #d92cf9;
|
||||
background: -moz-linear-gradient(left, #d92cf9 0%, #b636ff 100%);
|
||||
background: -webkit-linear-gradient(left, #d92cf9 0%,#b636ff 100%);
|
||||
background: linear-gradient(to right, #d92cf9 0%,#b636ff 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d92cf9', endColorstr='#b636ff',GradientType=1 );
|
||||
-webkit-transform:scale(0);
|
||||
-moz-transform:scale(0);
|
||||
-ms-transform:scale(0);
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0);
|
||||
-webkit-transition: .5s;
|
||||
-moz-transition: .5s;
|
||||
-ms-transition: .5s;
|
||||
-o-transition: .5s;
|
||||
transition: .5s;
|
||||
}
|
||||
.single-profile:hover .single-profile-overlay{
|
||||
-webkit-transform:scale(1);
|
||||
-moz-transform:scale(1);
|
||||
-ms-transform:scale(1);
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1);
|
||||
top:0;
|
||||
}
|
||||
.single-profile:hover .profile-icon-name,.single-profile:hover .profile-txt a>i{color: #fff;}
|
||||
.single-profile:hover .profile-border {border:transparent;}
|
||||
/*-------------------------------------
|
||||
9. Portfolio
|
||||
--------------------------------------*/
|
||||
.portfolio {
|
||||
padding: 50px 0 100px;
|
||||
border: 1px solid #e5ebf2;
|
||||
}
|
||||
|
||||
.portfolio-content {padding-top: 100px;}
|
||||
|
||||
/* ---- .item ---- */
|
||||
.isotope:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.isotope .item {
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
/*.item img*/
|
||||
.isotope .item img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
-webkit-transition: .5s;
|
||||
-moz-transition: .5s;
|
||||
-ms-transition: .5s;
|
||||
-o-transition: .5s;
|
||||
transition: .5s;
|
||||
}
|
||||
.isotope .item:hover img{
|
||||
-webkit-transform:scale(1.5);
|
||||
-moz-transform:scale(1.5);
|
||||
-ms-transform:scale(1.5);
|
||||
-o-transform:scale(1.5);
|
||||
transform:scale(1.5);
|
||||
}/*.item img*/
|
||||
|
||||
/*.isotope-overlay*/
|
||||
.isotope-overlay{
|
||||
position:absolute;
|
||||
height:100%;
|
||||
width:100%;
|
||||
background:rgba(31,44,108,.5);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
text-transform: uppercase;
|
||||
justify-content:center;
|
||||
flex-direction:row;
|
||||
-webkit-transform:scale(0);
|
||||
-moz-transform:scale(0);
|
||||
-ms-transform:scale(0);
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0);
|
||||
-webkit-transition: .5s;
|
||||
-moz-transition: .5s;
|
||||
-ms-transition: .5s;
|
||||
-o-transition: .5s;
|
||||
transition: .5s;
|
||||
}
|
||||
.isotope-overlay a {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.isotope .item:hover .isotope-overlay{
|
||||
-webkit-transform:scale(1);
|
||||
-moz-transform:scale(1);
|
||||
-ms-transform:scale(1);
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1);
|
||||
top:0;
|
||||
}/*.isotope-overlay*/
|
||||
|
||||
/*-------------------------------------
|
||||
10. Clients
|
||||
--------------------------------------*/
|
||||
.clients {padding-top: 50px;}
|
||||
.clients-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 250px;
|
||||
}
|
||||
.clients-area .item {padding: 0 25px;}
|
||||
|
||||
.clients .clients-area .owl-carousel .owl-item img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
/*-------------------------------------
|
||||
11. Contact
|
||||
--------------------------------------*/
|
||||
.contact {
|
||||
background: #f9fbfd;
|
||||
padding: 50px 0 100px;
|
||||
}
|
||||
.single-contact-box {padding-top: 100px;}
|
||||
.contact-form .form-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
.contact-form .form-control {
|
||||
padding: 25px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
outline: 0!important;
|
||||
background: #fff;
|
||||
color: #636a82;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/*--contct button--*/
|
||||
.contact-form .single-contact-btn {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
height:50px;
|
||||
text-transform:capitalize;
|
||||
margin-top: 3px;
|
||||
background: #b636ff;
|
||||
border: 1px solid #b636ff;
|
||||
cursor:pointer;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,.2);
|
||||
-webkit-transition: .5s;
|
||||
-moz-transition:.5s;
|
||||
-ms-transition:.5s;
|
||||
-o-transition:.5s;
|
||||
transition: .5s;
|
||||
}
|
||||
.contact-form .single-contact-btn .contact-btn ,
|
||||
.contact-form .single-contact-btn .contact-btn:focus {
|
||||
margin-top:0px;
|
||||
outline: 0 !important;
|
||||
border:0;
|
||||
color: #fff;
|
||||
border-radius: 0px;
|
||||
font-size:14px;
|
||||
-webkit-transition: .5s;
|
||||
-moz-transition:.5s;
|
||||
-ms-transition:.5s;
|
||||
-o-transition:.5s;
|
||||
transition: .5s;
|
||||
|
||||
}
|
||||
.single-contact-btn:hover{
|
||||
background: #9f00ff;
|
||||
border: 1px solid #9f00ff;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
/*--contct button--*/
|
||||
|
||||
/* contact-adress */
|
||||
.contact-add-head h3 {
|
||||
font-size: 24px;
|
||||
color: #3c4258;
|
||||
}
|
||||
.contact-add-head p {
|
||||
font-size: 16px;
|
||||
text-transform: capitalize;
|
||||
color: #636a82;
|
||||
font-weight: 300;
|
||||
margin-top: 6px;
|
||||
}
|
||||
/* contact-adress */
|
||||
|
||||
/*.contact-add-info */
|
||||
.contact-add-info { margin: 42px 0 52px;}
|
||||
.single-contact-add-info h3 {
|
||||
color: #636a82;
|
||||
font-weight: 500;
|
||||
}
|
||||
.single-contact-add-info p {
|
||||
color: #999fb3;
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.single-contact-add-info {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
/*.contact-add-info */
|
||||
|
||||
/*hm-foot-icon*/
|
||||
.hm-foot-icon {
|
||||
|
||||
}
|
||||
.hm-foot-icon ul li{float:left;}
|
||||
.hm-foot-icon ul li>a {
|
||||
color: #636a82;
|
||||
margin-right:18px;
|
||||
-webkit-transition: .3s;
|
||||
-moz-transition:.3s;
|
||||
-ms-transition:.3s;
|
||||
-o-transition:.3s;
|
||||
transition: .3s;
|
||||
}
|
||||
.hm-foot-icon ul li>a:hover{
|
||||
color: #b636ff;
|
||||
}/*hm-foot-icon*/
|
||||
|
||||
.hm-footer-copyright p{
|
||||
color: #888ea5;
|
||||
text-transform: capitalize;
|
||||
padding: 38px 0;
|
||||
}
|
||||
.hm-footer-copyright p a {color: #888ea5;}
|
||||
/*===============================
|
||||
Scroll Top
|
||||
===============================*/
|
||||
#scroll-Top .return-to-top {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
display: none;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background:#b636ff;
|
||||
border:1px solid #b636ff;
|
||||
border-radius:50%;
|
||||
-webkit-transition: .5s;
|
||||
-moz-transition:.5s;
|
||||
-ms-transition:.5s;
|
||||
-o-transition:.5s;
|
||||
transition: .5s;
|
||||
z-index: 2;
|
||||
}
|
||||
#scroll-Top .return-to-top:hover {
|
||||
background:#fff;
|
||||
color: #b636ff;
|
||||
border:1px solid #b636ff;
|
||||
}
|
||||
|
||||
#scroll-Top .return-to-top i{
|
||||
position:relative;
|
||||
bottom:0;
|
||||
|
||||
}
|
||||
|
||||
#scroll-Top .return-to-top i{
|
||||
position: relative;
|
||||
animation-name: example;
|
||||
animation-direction: alternate;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration:1s;
|
||||
}
|
||||
@keyframes example {
|
||||
0% {bottom:0px;}
|
||||
100% {bottom:7px;}
|
||||
}
|
||||
/*========================Thank you=================
|
||||
@ -0,0 +1 @@
|
||||
Wellcome Themesine World!
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 145 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
@ -0,0 +1,598 @@
|
||||
// ------------------------------------------------------------------------------ //
|
||||
//
|
||||
// Template name : Bootsnav - Multi Purpose Header
|
||||
// Categorie : Bootstrap Menu in CSS
|
||||
// Author : adamnurdin01
|
||||
// Version : v.1.2
|
||||
// Created : 2016-06-02
|
||||
// Last update : 2016-10-19
|
||||
//
|
||||
// ------------------------------------------------------------------------------ //
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
var bootsnav = {
|
||||
initialize: function() {
|
||||
this.event();
|
||||
this.hoverDropdown();
|
||||
this.navbarSticky();
|
||||
this.navbarScrollspy();
|
||||
},
|
||||
event : function(){
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Variable
|
||||
// ------------------------------------------------------------------------------ //
|
||||
var getNav = $("nav.navbar.bootsnav");
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Navbar Sticky
|
||||
// ------------------------------------------------------------------------------ //
|
||||
var navSticky = getNav.hasClass("navbar-sticky");
|
||||
if( navSticky ){
|
||||
// Wraped navigation
|
||||
getNav.wrap("<div class='wrap-sticky'></div>");
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Navbar Center
|
||||
// ------------------------------------------------------------------------------ //
|
||||
if( getNav.hasClass("brand-center")){
|
||||
var postsArr = new Array(),
|
||||
index = $("nav.brand-center"),
|
||||
$postsList = index.find('ul.navbar-nav');
|
||||
|
||||
index.prepend("<span class='storage-name' style='display:none;'></span>");
|
||||
|
||||
//Create array of all posts in lists
|
||||
index.find('ul.navbar-nav > li').each(function(){
|
||||
if( $(this).hasClass("active") ){
|
||||
var getElement = $("a", this).eq(0).text();
|
||||
$(".storage-name").html(getElement);
|
||||
}
|
||||
postsArr.push($(this).html());
|
||||
});
|
||||
|
||||
//Split the array at this point. The original array is altered.
|
||||
var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)),
|
||||
secondList = postsArr,
|
||||
ListHTML = '';
|
||||
|
||||
var createHTML = function(list){
|
||||
ListHTML = '';
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
ListHTML += '<li>' + list[i] + '</li>'
|
||||
}
|
||||
}
|
||||
|
||||
//Generate HTML for first list
|
||||
createHTML(firstList);
|
||||
$postsList.html(ListHTML);
|
||||
index.find("ul.nav").first().addClass("navbar-left");
|
||||
|
||||
//Generate HTML for second list
|
||||
createHTML(secondList);
|
||||
//Create new list after original one
|
||||
$postsList.after('<ul class="nav navbar-nav"></ul>').next().html(ListHTML);
|
||||
index.find("ul.nav").last().addClass("navbar-right");
|
||||
|
||||
//Wrap navigation menu
|
||||
index.find("ul.nav.navbar-left").wrap("<div class='col-half left'></div>");
|
||||
index.find("ul.nav.navbar-right").wrap("<div class='col-half right'></div>");
|
||||
|
||||
//Selection Class
|
||||
index.find('ul.navbar-nav > li').each(function(){
|
||||
var dropDown = $("ul.dropdown-menu", this),
|
||||
megaMenu = $("ul.megamenu-content", this);
|
||||
dropDown.closest("li").addClass("dropdown");
|
||||
megaMenu.closest("li").addClass("megamenu-fw");
|
||||
});
|
||||
|
||||
var getName = $(".storage-name").html();
|
||||
if( !getName == "" ){
|
||||
$( "ul.navbar-nav > li:contains('" + getName + "')" ).addClass("active");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Navbar Sidebar
|
||||
// ------------------------------------------------------------------------------ //
|
||||
if( getNav.hasClass("navbar-sidebar")){
|
||||
// Add Class to body
|
||||
$("body").addClass("wrap-nav-sidebar");
|
||||
getNav.wrapInner("<div class='scroller'></div>");
|
||||
}else{
|
||||
$(".bootsnav").addClass("on");
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Menu Center
|
||||
// ------------------------------------------------------------------------------ //
|
||||
if( getNav.find("ul.nav").hasClass("navbar-center")){
|
||||
getNav.addClass("menu-center");
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Navbar Full
|
||||
// ------------------------------------------------------------------------------ //
|
||||
if( getNav.hasClass("navbar-full")){
|
||||
// Add Class to body
|
||||
$("nav.navbar.bootsnav").find("ul.nav").wrap("<div class='wrap-full-menu'></div>");
|
||||
$(".wrap-full-menu").wrap("<div class='nav-full'></div>");
|
||||
$("ul.nav.navbar-nav").prepend("<li class='close-full-menu'><a href='#'><i class='fa fa-times'></i></a></li>");
|
||||
}else if( getNav.hasClass("navbar-mobile")){
|
||||
getNav.removeClass("no-full");
|
||||
}else{
|
||||
getNav.addClass("no-full");
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Navbar Mobile
|
||||
// ------------------------------------------------------------------------------ //
|
||||
if( getNav.hasClass("navbar-mobile")){
|
||||
// Add Class to body
|
||||
$('.navbar-collapse').on('shown.bs.collapse', function() {
|
||||
$("body").addClass("side-right");
|
||||
});
|
||||
$('.navbar-collapse').on('hide.bs.collapse', function() {
|
||||
$("body").removeClass("side-right");
|
||||
});
|
||||
|
||||
$(window).on("resize", function(){
|
||||
$("body").removeClass("side-right");
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Navbar Fixed
|
||||
// ------------------------------------------------------------------------------ //
|
||||
if( getNav.hasClass("no-background")){
|
||||
$(window).on("scroll", function(){
|
||||
var scrollTop = $(window).scrollTop();
|
||||
if(scrollTop >34){
|
||||
$(".navbar-fixed").removeClass("no-background");
|
||||
}else {
|
||||
$(".navbar-fixed").addClass("no-background");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Navbar Fixed
|
||||
// ------------------------------------------------------------------------------ //
|
||||
if( getNav.hasClass("navbar-transparent")){
|
||||
$(window).on("scroll", function(){
|
||||
var scrollTop = $(window).scrollTop();
|
||||
if(scrollTop >34){
|
||||
$(".navbar-fixed").removeClass("navbar-transparent");
|
||||
}else {
|
||||
$(".navbar-fixed").addClass("navbar-transparent");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Button Cart
|
||||
// ------------------------------------------------------------------------------ //
|
||||
$(".btn-cart").on("click", function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Toggle Search
|
||||
// ------------------------------------------------------------------------------ //
|
||||
$("nav.navbar.bootsnav .attr-nav").each(function(){
|
||||
$("li.search > a", this).on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(".top-search").slideToggle();
|
||||
});
|
||||
});
|
||||
$(".input-group-addon.close-search").on("click", function(){
|
||||
$(".top-search").slideUp();
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Toggle Side Menu
|
||||
// ------------------------------------------------------------------------------ //
|
||||
$("nav.navbar.bootsnav .attr-nav").each(function(){
|
||||
$("li.side-menu > a", this).on("click", function(e){
|
||||
e.preventDefault();
|
||||
$("nav.navbar.bootsnav > .side").toggleClass("on");
|
||||
$("body").toggleClass("on-side");
|
||||
});
|
||||
});
|
||||
$(".side .close-side").on("click", function(e){
|
||||
e.preventDefault();
|
||||
$("nav.navbar.bootsnav > .side").removeClass("on");
|
||||
$("body").removeClass("on-side");
|
||||
});
|
||||
|
||||
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Wrapper
|
||||
// ------------------------------------------------------------------------------ //
|
||||
$("body").wrapInner( "<div class='wrapper'></div>");
|
||||
},
|
||||
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Change dropdown to hover on dekstop
|
||||
// ------------------------------------------------------------------------------ //
|
||||
hoverDropdown : function(){
|
||||
var getNav = $("nav.navbar.bootsnav"),
|
||||
getWindow = $(window).width(),
|
||||
getHeight = $(window).height(),
|
||||
getIn = getNav.find("ul.nav").data("in"),
|
||||
getOut = getNav.find("ul.nav").data("out");
|
||||
|
||||
if( getWindow < 991 ){
|
||||
|
||||
// Height of scroll navigation sidebar
|
||||
$(".scroller").css("height", "auto");
|
||||
|
||||
// Disable mouseenter event
|
||||
$("nav.navbar.bootsnav ul.nav").find("li.dropdown").off("mouseenter");
|
||||
$("nav.navbar.bootsnav ul.nav").find("li.dropdown").off("mouseleave");
|
||||
$("nav.navbar.bootsnav ul.nav").find(".title").off("mouseenter");
|
||||
$("nav.navbar.bootsnav ul.nav").off("mouseleave");
|
||||
$(".navbar-collapse").removeClass("animated");
|
||||
|
||||
// Enable click event
|
||||
$("nav.navbar.bootsnav ul.nav").each(function(){
|
||||
$(".dropdown-menu", this).addClass("animated");
|
||||
$(".dropdown-menu", this).removeClass(getOut);
|
||||
|
||||
// Dropdown Fade Toggle
|
||||
$("a.dropdown-toggle", this).off('click');
|
||||
$("a.dropdown-toggle", this).on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
$(this).closest("li.dropdown").find(".dropdown-menu").first().stop().fadeToggle().toggleClass(getIn);
|
||||
$(this).closest("li.dropdown").first().toggleClass("on");
|
||||
return false;
|
||||
});
|
||||
|
||||
// Hidden dropdown action
|
||||
$('li.dropdown', this).each(function () {
|
||||
$(this).find(".dropdown-menu").stop().fadeOut();
|
||||
$(this).on('hidden.bs.dropdown', function () {
|
||||
$(this).find(".dropdown-menu").stop().fadeOut();
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
// Megamenu style
|
||||
$(".megamenu-fw", this).each(function(){
|
||||
$(".col-menu", this).each(function(){
|
||||
$(".content", this).addClass("animated");
|
||||
$(".content", this).stop().fadeOut();
|
||||
$(".title", this).off("click");
|
||||
$(".title", this).on("click", function(){
|
||||
$(this).closest(".col-menu").find(".content").stop().fadeToggle().addClass(getIn);
|
||||
$(this).closest(".col-menu").toggleClass("on");
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".content", this).on("click", function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Hidden dropdown
|
||||
var cleanOpen = function(){
|
||||
$('li.dropdown', this).removeClass("on");
|
||||
$(".dropdown-menu", this).stop().fadeOut();
|
||||
$(".dropdown-menu", this).removeClass(getIn);
|
||||
$(".col-menu", this).removeClass("on");
|
||||
$(".col-menu .content", this).stop().fadeOut();
|
||||
$(".col-menu .content", this).removeClass(getIn);
|
||||
}
|
||||
|
||||
// Hidden om mouse leave
|
||||
$("nav.navbar.bootsnav").on("mouseleave", function(){
|
||||
cleanOpen();
|
||||
});
|
||||
|
||||
// Enable click atribute navigation
|
||||
$("nav.navbar.bootsnav .attr-nav").each(function(){
|
||||
$(".dropdown-menu", this).removeClass("animated");
|
||||
$("li.dropdown", this).off("mouseenter");
|
||||
$("li.dropdown", this).off("mouseleave");
|
||||
$("a.dropdown-toggle", this).off('click');
|
||||
$("a.dropdown-toggle", this).on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
$(this).closest("li.dropdown").find(".dropdown-menu").first().stop().fadeToggle();
|
||||
$(".navbar-toggle").each(function(){
|
||||
$(".fa", this).removeClass("fa-times");
|
||||
$(".fa", this).addClass("fa-bars");
|
||||
$(".navbar-collapse").removeClass("in");
|
||||
$(".navbar-collapse").removeClass("on");
|
||||
});
|
||||
});
|
||||
|
||||
$(this).on("mouseleave", function(){
|
||||
$(".dropdown-menu", this).stop().fadeOut();
|
||||
$("li.dropdown", this).removeClass("on");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
// Toggle Bars
|
||||
$(".navbar-toggle").each(function(){
|
||||
$(this).off("click");
|
||||
$(this).on("click", function(){
|
||||
$(".fa", this).toggleClass("fa-bars");
|
||||
$(".fa", this).toggleClass("fa-times");
|
||||
cleanOpen();
|
||||
});
|
||||
});
|
||||
|
||||
}else if( getWindow > 991 ){
|
||||
// Height of scroll navigation sidebar
|
||||
$(".scroller").css("height", getHeight + "px");
|
||||
|
||||
// Navbar Sidebar
|
||||
if( getNav.hasClass("navbar-sidebar")){
|
||||
// Hover effect Sidebar Menu
|
||||
$("nav.navbar.bootsnav ul.nav").each(function(){
|
||||
$("a.dropdown-toggle", this).off('click');
|
||||
$("a.dropdown-toggle", this).on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
$(".dropdown-menu", this).addClass("animated");
|
||||
$("li.dropdown", this).on("mouseenter", function(){
|
||||
$(".dropdown-menu", this).eq(0).removeClass(getOut);
|
||||
$(".dropdown-menu", this).eq(0).stop().fadeIn().addClass(getIn);
|
||||
$(this).addClass("on");
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".col-menu").each(function(){
|
||||
$(".content", this).addClass("animated");
|
||||
$(".title", this).on("mouseenter", function(){
|
||||
$(this).closest(".col-menu").find(".content").stop().fadeIn().addClass(getIn);
|
||||
$(this).closest(".col-menu").addClass("on");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
$(this).on("mouseleave", function(){
|
||||
$(".dropdown-menu", this).stop().removeClass(getIn);
|
||||
$(".dropdown-menu", this).stop().addClass(getOut).fadeOut();
|
||||
$(".col-menu", this).find(".content").stop().fadeOut().removeClass(getIn);
|
||||
$(".col-menu", this).removeClass("on");
|
||||
$("li.dropdown", this).removeClass("on");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}else{
|
||||
// Hover effect Default Menu
|
||||
$("nav.navbar.bootsnav ul.nav").each(function(){
|
||||
$("a.dropdown-toggle", this).off('click');
|
||||
$("a.dropdown-toggle", this).on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
$(".megamenu-fw", this).each(function(){
|
||||
$(".title", this).off("click");
|
||||
$("a.dropdown-toggle", this).off("click");
|
||||
$(".content").removeClass("animated");
|
||||
});
|
||||
|
||||
$(".dropdown-menu", this).addClass("animated");
|
||||
$("li.dropdown", this).on("mouseenter", function(){
|
||||
$(".dropdown-menu", this).eq(0).removeClass(getOut);
|
||||
$(".dropdown-menu", this).eq(0).stop().fadeIn().addClass(getIn);
|
||||
$(this).addClass("on");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("li.dropdown", this).on("mouseleave", function(){
|
||||
$(".dropdown-menu", this).eq(0).removeClass(getIn);
|
||||
$(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut);
|
||||
$(this).removeClass("on");
|
||||
});
|
||||
|
||||
$(this).on("mouseleave", function(){
|
||||
$(".dropdown-menu", this).removeClass(getIn);
|
||||
$(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut);
|
||||
$("li.dropdown", this).removeClass("on");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Hover effect Atribute Navigation
|
||||
// ------------------------------------------------------------------------------ //
|
||||
$("nav.navbar.bootsnav .attr-nav").each(function(){
|
||||
$("a.dropdown-toggle", this).off('click');
|
||||
$("a.dropdown-toggle", this).on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
$(".dropdown-menu", this).addClass("animated");
|
||||
$("li.dropdown", this).on("mouseenter", function(){
|
||||
$(".dropdown-menu", this).eq(0).removeClass(getOut);
|
||||
$(".dropdown-menu", this).eq(0).stop().fadeIn().addClass(getIn);
|
||||
$(this).addClass("on");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("li.dropdown", this).on("mouseleave", function(){
|
||||
$(".dropdown-menu", this).eq(0).removeClass(getIn);
|
||||
$(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut);
|
||||
$(this).removeClass("on");
|
||||
});
|
||||
|
||||
$(this).on("mouseleave", function(){
|
||||
$(".dropdown-menu", this).removeClass(getIn);
|
||||
$(".dropdown-menu", this).eq(0).stop().fadeOut().addClass(getOut);
|
||||
$("li.dropdown", this).removeClass("on");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Menu Fullscreen
|
||||
// ------------------------------------------------------------------------------ //
|
||||
if( getNav.hasClass("navbar-full")){
|
||||
var windowHeight = $(window).height(),
|
||||
windowWidth = $(window).width();
|
||||
|
||||
$(".nav-full").css("height", windowHeight + "px");
|
||||
$(".wrap-full-menu").css("height", windowHeight + "px");
|
||||
$(".wrap-full-menu").css("width", windowWidth + "px");
|
||||
|
||||
$(".navbar-collapse").addClass("animated");
|
||||
$(".navbar-toggle").each(function(){
|
||||
var getId = $(this).data("target");
|
||||
$(this).off("click");
|
||||
$(this).on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(getId).removeClass(getOut);
|
||||
$(getId).addClass("in");
|
||||
$(getId).addClass(getIn);
|
||||
return false;
|
||||
});
|
||||
|
||||
$("li.close-full-menu").on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(getId).addClass(getOut);
|
||||
setTimeout(function(){
|
||||
$(getId).removeClass("in");
|
||||
$(getId).removeClass(getIn);
|
||||
}, 500);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Navbar Sticky
|
||||
// ------------------------------------------------------------------------------ //
|
||||
navbarSticky : function(){
|
||||
var getNav = $("nav.navbar.bootsnav"),
|
||||
navSticky = getNav.hasClass("navbar-sticky");
|
||||
|
||||
if( navSticky ){
|
||||
|
||||
// Set Height Navigation
|
||||
var getHeight = getNav.height();
|
||||
$(".wrap-sticky").height(getHeight);
|
||||
|
||||
// Windown on scroll
|
||||
var getOffset = $(".wrap-sticky").offset().top;
|
||||
$(window).on("scroll", function(){
|
||||
var scrollTop = $(window).scrollTop();
|
||||
if(scrollTop > getOffset){
|
||||
getNav.addClass("sticked");
|
||||
}else {
|
||||
getNav.removeClass("sticked");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// ------------------------------------------------------------------------------ //
|
||||
// Navbar Scrollspy
|
||||
// ------------------------------------------------------------------------------ //
|
||||
navbarScrollspy : function(){
|
||||
var navScrollSpy = $(".navbar-scrollspy"),
|
||||
$body = $('body'),
|
||||
getNav = $('nav.navbar.bootsnav'),
|
||||
offset = getNav.outerHeight();
|
||||
|
||||
if( navScrollSpy.length ){
|
||||
$body.scrollspy({target: '.navbar', offset: offset });
|
||||
|
||||
// Animation Scrollspy
|
||||
$('.scroll').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
// Active link
|
||||
$('.scroll').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
|
||||
// Remove navbar collapse
|
||||
$(".navbar-collapse").removeClass("in");
|
||||
|
||||
// Toggle Bars
|
||||
$(".navbar-toggle").each(function(){
|
||||
$(".fa", this).removeClass("fa-times");
|
||||
$(".fa", this).addClass("fa-bars");
|
||||
});
|
||||
|
||||
// Scroll
|
||||
var scrollTop = $(window).scrollTop(),
|
||||
$anchor = $(this).find('a'),
|
||||
$section = $($anchor.attr('href')).offset().top,
|
||||
$window = $(window).width(),
|
||||
$minusDesktop = getNav.data("minus-value-desktop"),
|
||||
$minusMobile = getNav.data("minus-value-mobile"),
|
||||
$speed = getNav.data("speed");
|
||||
|
||||
if( $window > 992 ){
|
||||
var $position = $section - $minusDesktop;
|
||||
}else{
|
||||
var $position = $section - $minusMobile;
|
||||
}
|
||||
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $position
|
||||
}, $speed);
|
||||
});
|
||||
|
||||
// Activate Navigation
|
||||
var fixSpy = function() {
|
||||
var data = $body.data('bs.scrollspy');
|
||||
if (data) {
|
||||
offset = getNav.outerHeight();
|
||||
data.options.offset = offset;
|
||||
$body.data('bs.scrollspy', data);
|
||||
$body.scrollspy('refresh');
|
||||
}
|
||||
}
|
||||
|
||||
// Activate Navigation on resize
|
||||
var resizeTimer;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeTimer);
|
||||
var resizeTimer = setTimeout(fixSpy, 200);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize
|
||||
$(document).ready(function(){
|
||||
bootsnav.initialize();
|
||||
});
|
||||
|
||||
// Reset on resize
|
||||
$(window).on("resize", function(){
|
||||
bootsnav.hoverDropdown();
|
||||
setTimeout(function(){
|
||||
bootsnav.navbarSticky();
|
||||
}, 500);
|
||||
|
||||
// Toggle Bars
|
||||
$(".navbar-toggle").each(function(){
|
||||
$(".fa", this).removeClass("fa-times");
|
||||
$(".fa", this).addClass("fa-bars");
|
||||
$(this).removeClass("fixed");
|
||||
});
|
||||
$(".navbar-collapse").removeClass("in");
|
||||
$(".navbar-collapse").removeClass("on");
|
||||
$(".navbar-collapse").removeClass("bounceIn");
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,127 @@
|
||||
$(document).ready(function(){
|
||||
"use strict";
|
||||
|
||||
/*==================================
|
||||
* Author : "ThemeSine"
|
||||
* Template Name : Khanas HTML Template
|
||||
* Version : 1.0
|
||||
==================================== */
|
||||
|
||||
|
||||
|
||||
/*=========== TABLE OF CONTENTS ===========
|
||||
1. Scroll To Top
|
||||
2. Smooth Scroll spy
|
||||
3. Progress-bar
|
||||
4. owl carousel
|
||||
5. welcome animation support
|
||||
======================================*/
|
||||
|
||||
// 1. Scroll To Top
|
||||
$(window).on('scroll',function () {
|
||||
if ($(this).scrollTop() > 600) {
|
||||
$('.return-to-top').fadeIn();
|
||||
} else {
|
||||
$('.return-to-top').fadeOut();
|
||||
}
|
||||
});
|
||||
$('.return-to-top').on('click',function(){
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, 1500);
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 2. Smooth Scroll spy
|
||||
|
||||
$('.header-area').sticky({
|
||||
topSpacing:0
|
||||
});
|
||||
|
||||
//=============
|
||||
|
||||
$('li.smooth-menu a').bind("click", function(event) {
|
||||
event.preventDefault();
|
||||
var anchor = $(this);
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $(anchor.attr('href')).offset().top - 0
|
||||
}, 1200,'easeInOutExpo');
|
||||
});
|
||||
|
||||
$('body').scrollspy({
|
||||
target:'.navbar-collapse',
|
||||
offset:0
|
||||
});
|
||||
|
||||
// 3. Progress-bar
|
||||
|
||||
var dataToggleTooTip = $('[data-toggle="tooltip"]');
|
||||
var progressBar = $(".progress-bar");
|
||||
if (progressBar.length) {
|
||||
progressBar.appear(function () {
|
||||
dataToggleTooTip.tooltip({
|
||||
trigger: 'manual'
|
||||
}).tooltip('show');
|
||||
progressBar.each(function () {
|
||||
var each_bar_width = $(this).attr('aria-valuenow');
|
||||
$(this).width(each_bar_width + '%');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 4. owl carousel
|
||||
|
||||
// i. client (carousel)
|
||||
|
||||
$('#client').owlCarousel({
|
||||
items:7,
|
||||
loop:true,
|
||||
smartSpeed: 1000,
|
||||
autoplay:true,
|
||||
dots:false,
|
||||
autoplayHoverPause:true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:2
|
||||
},
|
||||
415:{
|
||||
items:2
|
||||
},
|
||||
600:{
|
||||
items:4
|
||||
|
||||
},
|
||||
1199:{
|
||||
items:4
|
||||
},
|
||||
1200:{
|
||||
items:7
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('.play').on('click',function(){
|
||||
owl.trigger('play.owl.autoplay',[1000])
|
||||
})
|
||||
$('.stop').on('click',function(){
|
||||
owl.trigger('stop.owl.autoplay')
|
||||
})
|
||||
|
||||
|
||||
// 5. welcome animation support
|
||||
|
||||
$(window).load(function(){
|
||||
$(".header-text h2,.header-text p").removeClass("animated fadeInUp").css({'opacity':'0'});
|
||||
$(".header-text a").removeClass("animated fadeInDown").css({'opacity':'0'});
|
||||
});
|
||||
|
||||
$(window).load(function(){
|
||||
$(".header-text h2,.header-text p").addClass("animated fadeInUp").css({'opacity':'0'});
|
||||
$(".header-text a").addClass("animated fadeInDown").css({'opacity':'0'});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
/*
|
||||
* jQuery.appear
|
||||
* http://code.google.com/p/jquery-appear/
|
||||
*
|
||||
* Copyright (c) 2009 Michael Hixson
|
||||
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
|
||||
*/
|
||||
(function($){$.fn.appear=function(f,o){var s=$.extend({one:true},o);return this.each(function(){var t=$(this);t.appeared=false;if(!f){t.trigger('appear',s.data);return;}var w=$(window);var c=function(){if(!t.is(':visible')){t.appeared=false;return;}var a=w.scrollLeft();var b=w.scrollTop();var o=t.offset();var x=o.left;var y=o.top;if(y+t.height()>=b&&y<=b+w.height()&&x+t.width()>=a&&x<=a+w.width()){if(!t.appeared)t.trigger('appear',s.data);}else{t.appeared=false;}};var m=function(){t.appeared=true;if(s.one){w.unbind('scroll',c);var i=$.inArray(c,$.fn.appear.checks);if(i>=0)$.fn.appear.checks.splice(i,1);}f.apply(this,arguments);};if(s.one)t.one('appear',s.data,m);else t.bind('appear',s.data,m);w.scroll(c);$.fn.appear.checks.push(c);(c)();});};$.extend($.fn.appear,{checks:[],timeout:null,checkAll:function(){var l=$.fn.appear.checks.length;if(l>0)while(l--)($.fn.appear.checks[l])();},run:function(){if($.fn.appear.timeout)clearTimeout($.fn.appear.timeout);$.fn.appear.timeout=setTimeout($.fn.appear.checkAll,20);}});$.each(['append','prepend','after','before','attr','removeAttr','addClass','removeClass','toggleClass','remove','css','show','hide'],function(i,n){var u=$.fn[n];if(u){$.fn[n]=function(){var r=u.apply(this,arguments);$.fn.appear.run();return r;}}});})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,288 @@
|
||||
// Sticky Plugin v1.0.4 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 (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// Node/CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(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,
|
||||
zIndex: 'inherit'
|
||||
},
|
||||
$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, l = sticked.length; i < l; 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': '',
|
||||
'z-index': ''
|
||||
});
|
||||
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) {
|
||||
padding = s.stickyElement.innerWidth() - s.stickyElement.width();
|
||||
newWidth = $(s.getWidthFrom).width() - padding || 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)
|
||||
.css('z-index', s.zIndex);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// Check if sticky has reached end of container and stop sticking
|
||||
var stickyWrapperContainer = s.stickyWrapper.parent();
|
||||
var unstick = (s.stickyElement.offset().top + s.stickyElement.outerHeight() >= stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight()) && (s.stickyElement.offset().top <= s.topSpacing);
|
||||
|
||||
if( unstick ) {
|
||||
s.stickyElement
|
||||
.css('position', 'absolute')
|
||||
.css('top', '')
|
||||
.css('bottom', 0)
|
||||
.css('z-index', '');
|
||||
} else {
|
||||
s.stickyElement
|
||||
.css('position', 'fixed')
|
||||
.css('top', newTop)
|
||||
.css('bottom', '')
|
||||
.css('z-index', s.zIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resizer = function() {
|
||||
windowHeight = $window.height();
|
||||
|
||||
for (var i = 0, l = sticked.length; i < l; i++) {
|
||||
var s = sticked[i];
|
||||
var newWidth = null;
|
||||
if (s.getWidthFrom) {
|
||||
if (s.responsiveWidth) {
|
||||
newWidth = $(s.getWidthFrom).width();
|
||||
}
|
||||
} else if(s.widthFromWrapper) {
|
||||
newWidth = s.stickyWrapper.width();
|
||||
}
|
||||
if (newWidth != null) {
|
||||
s.stickyElement.css('width', newWidth);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods = {
|
||||
init: function(options) {
|
||||
return this.each(function() {
|
||||
var o = $.extend({}, defaults, options);
|
||||
var stickyElement = $(this);
|
||||
|
||||
var stickyId = stickyElement.attr('id');
|
||||
var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName;
|
||||
var wrapper = $('<div></div>')
|
||||
.attr('id', wrapperId)
|
||||
.addClass(o.wrapperClassName);
|
||||
|
||||
stickyElement.wrapAll(function() {
|
||||
if ($(this).parent("#" + wrapperId).length == 0) {
|
||||
return 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"});
|
||||
}
|
||||
|
||||
o.stickyElement = stickyElement;
|
||||
o.stickyWrapper = stickyWrapper;
|
||||
o.currentTop = null;
|
||||
|
||||
sticked.push(o);
|
||||
|
||||
methods.setWrapperHeight(this);
|
||||
methods.setupChangeListeners(this);
|
||||
});
|
||||
},
|
||||
|
||||
setWrapperHeight: function(stickyElement) {
|
||||
var element = $(stickyElement);
|
||||
var stickyWrapper = element.parent();
|
||||
if (stickyWrapper) {
|
||||
stickyWrapper.css('height', element.outerHeight());
|
||||
}
|
||||
},
|
||||
|
||||
setupChangeListeners: function(stickyElement) {
|
||||
if (window.MutationObserver) {
|
||||
var mutationObserver = new window.MutationObserver(function(mutations) {
|
||||
if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
|
||||
methods.setWrapperHeight(stickyElement);
|
||||
}
|
||||
});
|
||||
mutationObserver.observe(stickyElement, {subtree: true, childList: true});
|
||||
} else {
|
||||
if (window.addEventListener) {
|
||||
stickyElement.addEventListener('DOMNodeInserted', function() {
|
||||
methods.setWrapperHeight(stickyElement);
|
||||
}, false);
|
||||
stickyElement.addEventListener('DOMNodeRemoved', function() {
|
||||
methods.setWrapperHeight(stickyElement);
|
||||
}, false);
|
||||
} else if (window.attachEvent) {
|
||||
stickyElement.attachEvent('onDOMNodeInserted', function() {
|
||||
methods.setWrapperHeight(stickyElement);
|
||||
});
|
||||
stickyElement.attachEvent('onDOMNodeRemoved', function() {
|
||||
methods.setWrapperHeight(stickyElement);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
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': '',
|
||||
'z-index': ''
|
||||
})
|
||||
;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 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);
|
||||
});
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,970 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
|
||||
<head>
|
||||
<!-- meta data -->
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
|
||||
<!--font-family-->
|
||||
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&subset=devanagari,latin-ext" rel="stylesheet">
|
||||
|
||||
<!-- title of site -->
|
||||
<title>Browny</title>
|
||||
|
||||
<!-- For favicon png -->
|
||||
<link rel="shortcut icon" type="image/icon" href="assets/logo/favicon.png"/>
|
||||
|
||||
<!--font-awesome.min.css-->
|
||||
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
|
||||
|
||||
<!--flat icon css-->
|
||||
<link rel="stylesheet" href="assets/css/flaticon.css">
|
||||
|
||||
<!--animate.css-->
|
||||
<link rel="stylesheet" href="assets/css/animate.css">
|
||||
|
||||
<!--owl.carousel.css-->
|
||||
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
|
||||
|
||||
<!--bootstrap.min.css-->
|
||||
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||
|
||||
<!-- bootsnav -->
|
||||
<link rel="stylesheet" href="assets/css/bootsnav.css" >
|
||||
|
||||
<!--style.css-->
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
|
||||
<!--responsive.css-->
|
||||
<link rel="stylesheet" href="assets/css/responsive.css">
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--[if lte IE 9]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||
<![endif]-->
|
||||
|
||||
<!-- top-area Start -->
|
||||
<header class="top-area">
|
||||
<div class="header-area">
|
||||
<!-- Start Navigation -->
|
||||
<nav class="navbar navbar-default bootsnav navbar-fixed dark no-background">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Start Header Navigation -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
<a class="navbar-brand" href="index.html">browny</a>
|
||||
</div><!--/.navbar-header-->
|
||||
<!-- End Header Navigation -->
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse menu-ui-design" id="navbar-menu">
|
||||
<ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
|
||||
<li class=" smooth-menu active"></li>
|
||||
<li class=" smooth-menu"><a href="#education">education</a></li>
|
||||
<li class="smooth-menu"><a href="#skills">skills</a></li>
|
||||
<li class="smooth-menu"><a href="#experience">experience</a></li>
|
||||
<li class="smooth-menu"><a href="#profiles">profile</a></li>
|
||||
<li class="smooth-menu"><a href="#portfolio">portfolio</a></li>
|
||||
<li class="smooth-menu"><a href="#clients">clients</a></li>
|
||||
<li class="smooth-menu"><a href="#contact">contact</a></li>
|
||||
</ul><!--/.nav -->
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!--/.container-->
|
||||
</nav><!--/nav-->
|
||||
<!-- End Navigation -->
|
||||
</div><!--/.header-area-->
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</header><!-- /.top-area-->
|
||||
<!-- top-area End -->
|
||||
|
||||
<!--welcome-hero start -->
|
||||
<section id="welcome-hero" class="welcome-hero">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="header-text">
|
||||
<h2>hi <span>,</span> i am <br> browny <br> star <span>.</span> </h2>
|
||||
<p>ui/ux designer and web developer</p>
|
||||
<a href="assets/download/browney.txt" download>download resume</a>
|
||||
</div><!--/.header-text-->
|
||||
</div><!--/.col-->
|
||||
</div><!-- /.row-->
|
||||
</div><!-- /.container-->
|
||||
|
||||
</section><!--/.welcome-hero-->
|
||||
<!--welcome-hero end -->
|
||||
|
||||
<!--about start -->
|
||||
<section id="about" class="about">
|
||||
<div class="section-heading text-center">
|
||||
<h2>about me</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="about-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="single-about-txt">
|
||||
<h3>
|
||||
I am a Professional UI/UX Designer and Web developer. Consectetur an adipisi elita, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.
|
||||
</h3>
|
||||
<p>
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspi unde omnis iste natus error sit voluptatem accusantium doloremque lauda ntium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam vo luptatem quia voluptas sit aspernatur aut odit aut fugit,
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="single-about-add-info">
|
||||
<h3>phone</h3>
|
||||
<p>987-123-6547</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="single-about-add-info">
|
||||
<h3>email</h3>
|
||||
<p>browny@info.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="single-about-add-info">
|
||||
<h3>website</h3>
|
||||
<p>www.brownsine.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-offset-1 col-sm-5">
|
||||
<div class="single-about-img">
|
||||
<img src="assets/images/about/profile_image.jpg" alt="profile_image">
|
||||
<div class="about-list-icon">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-facebook" aria-hidden="true"></i>
|
||||
</a>
|
||||
</li><!-- / li -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-dribbble" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
</li><!-- / li -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-twitter" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
</li><!-- / li -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-linkedin" aria-hidden="true"></i>
|
||||
</a>
|
||||
</li><!-- / li -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-instagram" aria-hidden="true"></i>
|
||||
</a>
|
||||
</li><!-- / li -->
|
||||
|
||||
|
||||
</ul><!-- / ul -->
|
||||
</div><!-- /.about-list-icon -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!--/.about-->
|
||||
<!--about end -->
|
||||
|
||||
<!--education start -->
|
||||
<section id="education" class="education">
|
||||
<div class="section-heading text-center">
|
||||
<h2>education</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="education-horizontal-timeline">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="single-horizontal-timeline">
|
||||
<div class="experience-time">
|
||||
<h2>2008 - 2010</h2>
|
||||
<h3>master <span>of </span> computer science</h3>
|
||||
</div><!--/.experience-time-->
|
||||
<div class="timeline-horizontal-border">
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
<span class="single-timeline-horizontal"></span>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<div class="timeline-content">
|
||||
<h4 class="title">
|
||||
university of north carolina
|
||||
</h4>
|
||||
<h5>north carolina, USA</h5>
|
||||
<p class="description">
|
||||
Duis aute irure dolor in reprehenderit in vol patate velit esse cillum dolore eu fugiat nulla pari. Excepteur sint occana inna tecat cupidatat non proident.
|
||||
</p>
|
||||
</div><!--/.timeline-content-->
|
||||
</div><!--/.timeline-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="single-horizontal-timeline">
|
||||
<div class="experience-time">
|
||||
<h2>2004 - 2008</h2>
|
||||
<h3>bachelor <span>of </span> computer science</h3>
|
||||
</div><!--/.experience-time-->
|
||||
<div class="timeline-horizontal-border">
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
<span class="single-timeline-horizontal"></span>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<div class="timeline-content">
|
||||
<h4 class="title">
|
||||
university of north carolina
|
||||
</h4>
|
||||
<h5>north carolina, USA</h5>
|
||||
<p class="description">
|
||||
Duis aute irure dolor in reprehenderit in vol patate velit esse cillum dolore eu fugiat nulla pari. Excepteur sint occana inna tecat cupidatat non proident.
|
||||
</p>
|
||||
</div><!--/.timeline-content-->
|
||||
</div><!--/.timeline-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="single-horizontal-timeline">
|
||||
<div class="experience-time">
|
||||
<h2>2004 - 2008</h2>
|
||||
<h3>bachelor <span>of </span> creative design</h3>
|
||||
</div><!--/.experience-time-->
|
||||
<div class="timeline-horizontal-border">
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
<span class="single-timeline-horizontal spacial-horizontal-line
|
||||
"></span>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<div class="timeline-content">
|
||||
<h4 class="title">
|
||||
university of bolton
|
||||
</h4>
|
||||
<h5>bolton, united kingdome</h5>
|
||||
<p class="description">
|
||||
Duis aute irure dolor in reprehenderit in vol patate velit esse cillum dolore eu fugiat nulla pari. Excepteur sint occana inna tecat cupidatat non proident.
|
||||
</p>
|
||||
</div><!--/.timeline-content-->
|
||||
</div><!--/.timeline-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section><!--/.education-->
|
||||
<!--education end -->
|
||||
|
||||
<!--skills start -->
|
||||
<section id="skills" class="skills">
|
||||
<div class="skill-content">
|
||||
<div class="section-heading text-center">
|
||||
<h2>skills</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="single-skill-content">
|
||||
<div class="barWrapper">
|
||||
<span class="progressText">adobe photoshop</span>
|
||||
<div class="single-progress-txt">
|
||||
<div class="progress ">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="10" aria-valuemax="100" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h3>90%</h3>
|
||||
</div>
|
||||
</div><!-- /.barWrapper -->
|
||||
<div class="barWrapper">
|
||||
<span class="progressText">adobe illustrator</span>
|
||||
<div class="single-progress-txt">
|
||||
<div class="progress ">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="10" aria-valuemax="100" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h3>85%</h3>
|
||||
</div>
|
||||
</div><!-- /.barWrapper -->
|
||||
<div class="barWrapper">
|
||||
<span class="progressText">adobe after effects</span>
|
||||
<div class="single-progress-txt">
|
||||
<div class="progress ">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="97" aria-valuemin="10" aria-valuemax="100" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h3>97%</h3>
|
||||
</div>
|
||||
</div><!-- /.barWrapper -->
|
||||
<div class="barWrapper">
|
||||
<span class="progressText">sketch</span>
|
||||
<div class="single-progress-txt">
|
||||
<div class="progress ">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="10" aria-valuemax="100" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h3>90%</h3>
|
||||
</div>
|
||||
</div><!-- /.barWrapper -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="single-skill-content">
|
||||
<div class="barWrapper">
|
||||
<span class="progressText">html 5</span>
|
||||
<div class="single-progress-txt">
|
||||
<div class="progress ">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="10" aria-valuemax="100" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h3>90%</h3>
|
||||
</div>
|
||||
</div><!-- /.barWrapper -->
|
||||
<div class="barWrapper">
|
||||
<span class="progressText">css 3 animation</span>
|
||||
<div class="single-progress-txt">
|
||||
<div class="progress ">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="10" aria-valuemax="100" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h3>85%</h3>
|
||||
</div>
|
||||
</div><!-- /.barWrapper -->
|
||||
<div class="barWrapper">
|
||||
<span class="progressText">communication</span>
|
||||
<div class="single-progress-txt">
|
||||
<div class="progress ">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="97" aria-valuemin="10" aria-valuemax="100" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h3>97%</h3>
|
||||
</div>
|
||||
</div><!-- /.barWrapper -->
|
||||
<div class="barWrapper">
|
||||
<span class="progressText"> creativity</span>
|
||||
<div class="single-progress-txt">
|
||||
<div class="progress ">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="10" aria-valuemax="100" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h3>90%</h3>
|
||||
</div>
|
||||
</div><!-- /.barWrapper -->
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
</div> <!-- /.container -->
|
||||
</div><!-- /.skill-content-->
|
||||
|
||||
</section><!--/.skills-->
|
||||
<!--skills end -->
|
||||
|
||||
<!--experience start -->
|
||||
<section id="experience" class="experience">
|
||||
<div class="section-heading text-center">
|
||||
<h2>experience</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="experience-content">
|
||||
<div class="main-timeline">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="single-timeline-box fix">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="experience-time text-right">
|
||||
<h2>2018 - Present</h2>
|
||||
<h3>creative director</h3>
|
||||
</div><!--/.experience-time-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-offset-1 col-md-5">
|
||||
<div class="timeline">
|
||||
<div class="timeline-content">
|
||||
<h4 class="title">
|
||||
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
|
||||
hoplony tech limited
|
||||
</h4>
|
||||
<h5>newyork, USA</h5>
|
||||
<p class="description">
|
||||
Duis aute irure dolor in reprehenderit in vol patate velit esse cillum dolore eu fugiat nulla pari. Excepteur sint occana inna tecat cupidatat non proident.
|
||||
</p>
|
||||
</div><!--/.timeline-content-->
|
||||
</div><!--/.timeline-->
|
||||
</div><!--/.col-->
|
||||
</div>
|
||||
</div><!--/.single-timeline-box-->
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="single-timeline-box fix">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-1 col-md-5 experience-time-responsive">
|
||||
<div class="experience-time">
|
||||
<h2>
|
||||
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
|
||||
2016 - 2018
|
||||
</h2>
|
||||
<h3>associate design director</h3>
|
||||
</div><!--/.experience-time-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-5">
|
||||
<div class="timeline">
|
||||
<div class="timeline-content text-right">
|
||||
<h4 class="title">
|
||||
hoplony tech limited
|
||||
</h4>
|
||||
<h5>newyork, USA</h5>
|
||||
<p class="description">
|
||||
Duis aute irure dolor in reprehenderit in vol patate velit esse cillum dolore eu fugiat nulla pari. Excepteur sint occana inna tecat cupidatat non proident.
|
||||
</p>
|
||||
</div><!--/.timeline-content-->
|
||||
</div><!--/.timeline-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-offset-1 col-md-5 experience-time-main">
|
||||
<div class="experience-time">
|
||||
<h2>
|
||||
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
|
||||
2016 - 2018
|
||||
</h2>
|
||||
<h3>associate design director</h3>
|
||||
</div><!--/.experience-time-->
|
||||
</div><!--/.col-->
|
||||
</div>
|
||||
</div><!--/.single-timeline-box-->
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="single-timeline-box fix">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="experience-time text-right">
|
||||
<h2>2013 - 2016</h2>
|
||||
<h3>senior UI/UX designer</h3>
|
||||
</div><!--/.experience-time-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-offset-1 col-md-5">
|
||||
<div class="timeline">
|
||||
<div class="timeline-content">
|
||||
<h4 class="title">
|
||||
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
|
||||
hoplony tech limited
|
||||
</h4>
|
||||
<h5>newyork, USA</h5>
|
||||
<p class="description">
|
||||
Duis aute irure dolor in reprehenderit in vol patate velit esse cillum dolore eu fugiat nulla pari. Excepteur sint occana inna tecat cupidatat non proident.
|
||||
</p>
|
||||
</div><!--/.timeline-content-->
|
||||
</div><!--/.timeline-->
|
||||
</div><!--/.col-->
|
||||
</div>
|
||||
</div><!--/.single-timeline-box-->
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="single-timeline-box fix">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-1 col-md-5 experience-time-responsive">
|
||||
<div class="experience-time">
|
||||
<h2>
|
||||
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
|
||||
2012 - 2013
|
||||
</h2>
|
||||
<h3>UI/UX designer</h3>
|
||||
</div><!--/.experience-time-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-5">
|
||||
<div class="timeline">
|
||||
<div class="timeline-content text-right">
|
||||
<h4 class="title">
|
||||
hoplony tech limited
|
||||
</h4>
|
||||
<h5>newyork, USA</h5>
|
||||
<p class="description">
|
||||
Duis aute irure dolor in reprehenderit in vol patate velit esse cillum dolore eu fugiat nulla pari. Excepteur sint occana inna tecat cupidatat non proident.
|
||||
</p>
|
||||
</div><!--/.timeline-content-->
|
||||
</div><!--/.timeline-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-offset-1 col-md-5 experience-time-main">
|
||||
<div class="experience-time">
|
||||
<h2>
|
||||
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
|
||||
2012 - 2013
|
||||
</h2>
|
||||
<h3>UI/UX designer</h3>
|
||||
</div><!--/.experience-time-->
|
||||
</div><!--/.col-->
|
||||
</div>
|
||||
</div><!--/.single-timeline-box-->
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="single-timeline-box fix">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="experience-time text-right">
|
||||
<h2>2010 - 2012</h2>
|
||||
<h3>frontend developer</h3>
|
||||
</div><!--/.experience-time-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-offset-1 col-md-5">
|
||||
<div class="timeline">
|
||||
<div class="timeline-content">
|
||||
<h4 class="title">
|
||||
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
|
||||
hoplony tech limited
|
||||
</h4>
|
||||
<h5>newyork, USA</h5>
|
||||
<p class="description">
|
||||
Duis aute irure dolor in reprehenderit in vol patate velit esse cillum dolore eu fugiat nulla pari. Excepteur sint occana inna tecat cupidatat non proident.
|
||||
</p>
|
||||
</div><!--/.timeline-content-->
|
||||
</div><!--/.timeline-->
|
||||
</div><!--/.col-->
|
||||
</div>
|
||||
</div><!--/.single-timeline-box-->
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div><!--.main-timeline-->
|
||||
</div><!--.experience-content-->
|
||||
</div>
|
||||
|
||||
</section><!--/.experience-->
|
||||
<!--experience end -->
|
||||
|
||||
<!--profiles start -->
|
||||
<section id="profiles" class="profiles">
|
||||
<div class="profiles-details">
|
||||
<div class="section-heading text-center">
|
||||
<h2>profiles</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="profiles-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="single-profile">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-themeforest"></i></a>
|
||||
<div class="profile-icon-name">themeforest</div>
|
||||
</div>
|
||||
<div class="single-profile-overlay">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-themeforest"></i></a>
|
||||
<div class="profile-icon-name">themeforest</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="single-profile">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-dribbble"></i></a>
|
||||
<div class="profile-icon-name">dribbble</div>
|
||||
</div>
|
||||
<div class="single-profile-overlay">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-dribbble"></i></a>
|
||||
<div class="profile-icon-name">dribbble</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="single-profile">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-behance-logo"></i></a>
|
||||
<div class="profile-icon-name">behance</div>
|
||||
</div>
|
||||
<div class="single-profile-overlay">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-behance-logo"></i></a>
|
||||
<div class="profile-icon-name">behance</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="single-profile profile-no-border">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-github-logo"></i></a>
|
||||
<div class="profile-icon-name">github</div>
|
||||
</div>
|
||||
<div class="single-profile-overlay">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-github-logo"></i></a>
|
||||
<div class="profile-icon-name">github</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-border"></div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="single-profile">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-flickr-website-logo-silhouette"></i></a>
|
||||
<div class="profile-icon-name">flickR</div>
|
||||
</div>
|
||||
<div class="single-profile-overlay">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-flickr-website-logo-silhouette"></i></a>
|
||||
<div class="profile-icon-name">flickR</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="single-profile">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-smug"></i></a>
|
||||
<div class="profile-icon-name">smungMung</div>
|
||||
</div>
|
||||
<div class="single-profile-overlay">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-smug"></i></a>
|
||||
<div class="profile-icon-name">smungMung</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="single-profile">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-squarespace-logo"></i></a>
|
||||
<div class="profile-icon-name">squareSpace</div>
|
||||
</div>
|
||||
<div class="single-profile-overlay">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-squarespace-logo"></i></a>
|
||||
<div class="profile-icon-name">squareSpace</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="single-profile profile-no-border">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-bitbucket-logotype-camera-lens-in-perspective"></i></a>
|
||||
<div class="profile-icon-name">bitBucket</div>
|
||||
</div>
|
||||
<div class="single-profile-overlay">
|
||||
<div class="profile-txt">
|
||||
<a href=""><i class="flaticon-bitbucket-logotype-camera-lens-in-perspective"></i></a>
|
||||
<div class="profile-icon-name">bitBucket</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section><!--/.profiles-->
|
||||
<!--profiles end -->
|
||||
|
||||
<!--portfolio start -->
|
||||
<section id="portfolio" class="portfolio">
|
||||
<div class="portfolio-details">
|
||||
<div class="section-heading text-center">
|
||||
<h2>portfolio</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="portfolio-content">
|
||||
<div class="isotope">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="item">
|
||||
<img src="assets/images/portfolio/p1.jpg" alt="portfolio image"/>
|
||||
<div class="isotope-overlay">
|
||||
<a href="#">
|
||||
ui/ux design
|
||||
</a>
|
||||
</div><!-- /.isotope-overlay -->
|
||||
</div><!-- /.item -->
|
||||
<div class="item">
|
||||
<img src="assets/images/portfolio/p2.jpg" alt="portfolio image"/>
|
||||
<div class="isotope-overlay">
|
||||
<a href="#">
|
||||
ui/ux design
|
||||
</a>
|
||||
</div><!-- /.isotope-overlay -->
|
||||
</div><!-- /.item -->
|
||||
</div><!-- /.col -->
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="item">
|
||||
<img src="assets/images/portfolio/p3.jpg" alt="portfolio image"/>
|
||||
<div class="isotope-overlay">
|
||||
<a href="#">
|
||||
web design
|
||||
</a>
|
||||
</div><!-- /.isotope-overlay -->
|
||||
</div><!-- /.item -->
|
||||
</div><!-- /.col -->
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="item">
|
||||
<img src="assets/images/portfolio/p4.jpg" alt="portfolio image"/>
|
||||
<div class="isotope-overlay">
|
||||
<a href="#">
|
||||
web development
|
||||
</a>
|
||||
</div><!-- /.isotope-overlay -->
|
||||
</div><!-- /.item -->
|
||||
<div class="item">
|
||||
<img src="assets/images/portfolio/p5.jpg" alt="portfolio image"/>
|
||||
<div class="isotope-overlay">
|
||||
<a href="#">
|
||||
web development
|
||||
</a>
|
||||
</div><!-- /.isotope-overlay -->
|
||||
</div><!-- /.item -->
|
||||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
</div><!--/.isotope-->
|
||||
</div><!--/.gallery-content-->
|
||||
</div><!--/.container-->
|
||||
</div><!--/.portfolio-details-->
|
||||
|
||||
</section><!--/.portfolio-->
|
||||
<!--portfolio end -->
|
||||
|
||||
<!--clients start -->
|
||||
<section id="clients" class="clients">
|
||||
<div class="section-heading text-center">
|
||||
<h2>clients</h2>
|
||||
</div>
|
||||
<div class="clients-area">
|
||||
<div class="container">
|
||||
<div class="owl-carousel owl-theme" id="client">
|
||||
<div class="item">
|
||||
<a href="#">
|
||||
<img src="assets/images/clients/c1.png" alt="brand-image" />
|
||||
</a>
|
||||
</div><!--/.item-->
|
||||
<div class="item">
|
||||
<a href="#">
|
||||
<img src="assets/images/clients/c2.png" alt="brand-image" />
|
||||
</a>
|
||||
</div><!--/.item-->
|
||||
<div class="item">
|
||||
<a href="#">
|
||||
<img src="assets/images/clients/c3.png" alt="brand-image" />
|
||||
</a>
|
||||
</div><!--/.item-->
|
||||
<div class="item">
|
||||
<a href="#">
|
||||
<img src="assets/images/clients/c4.png" alt="brand-image" />
|
||||
</a>
|
||||
</div><!--/.item-->
|
||||
<div class="item">
|
||||
<a href="#">
|
||||
<img src="assets/images/clients/c5.png" alt="brand-image" />
|
||||
</a>
|
||||
</div><!--/.item-->
|
||||
<div class="item">
|
||||
<a href="#">
|
||||
<img src="assets/images/clients/c6.png" alt="brand-image" />
|
||||
</a>
|
||||
</div><!--/.item-->
|
||||
<div class="item">
|
||||
<a href="#">
|
||||
<img src="assets/images/clients/c7.png" alt="brand-image" />
|
||||
</a>
|
||||
</div><!--/.item-->
|
||||
</div><!--/.owl-carousel-->
|
||||
</div><!--/.container-->
|
||||
</div><!--/.clients-area-->
|
||||
|
||||
</section><!--/.clients-->
|
||||
|
||||
</section><!--/.clients-->
|
||||
<!--clients end -->
|
||||
|
||||
<!--contact start -->
|
||||
<section id="contact" class="contact">
|
||||
<div class="section-heading text-center">
|
||||
<h2>contact me</h2>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="contact-content">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-1 col-md-5 col-sm-6">
|
||||
<div class="single-contact-box">
|
||||
<div class="contact-form">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="name" placeholder="Name*" name="name">
|
||||
</div><!--/.form-group-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control" id="email" placeholder="Email*" name="email">
|
||||
</div><!--/.form-group-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="subject" placeholder="Subject" name="subject">
|
||||
</div><!--/.form-group-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" rows="8" id="comment" placeholder="Message" ></textarea>
|
||||
</div><!--/.form-group-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="single-contact-btn">
|
||||
<a class="contact-btn" href="#" role="button">submit</a>
|
||||
</div><!--/.single-single-contact-btn-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</form><!--/form-->
|
||||
</div><!--/.contact-form-->
|
||||
</div><!--/.single-contact-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-offset-1 col-md-5 col-sm-6">
|
||||
<div class="single-contact-box">
|
||||
<div class="contact-adress">
|
||||
<div class="contact-add-head">
|
||||
<h3>browny star</h3>
|
||||
<p>uI/uX designer</p>
|
||||
</div>
|
||||
<div class="contact-add-info">
|
||||
<div class="single-contact-add-info">
|
||||
<h3>phone</h3>
|
||||
<p>987-123-6547</p>
|
||||
</div>
|
||||
<div class="single-contact-add-info">
|
||||
<h3>email</h3>
|
||||
<p>browny@info.com</p>
|
||||
</div>
|
||||
<div class="single-contact-add-info">
|
||||
<h3>website</h3>
|
||||
<p>www.brownsine.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.contact-adress-->
|
||||
<div class="hm-foot-icon">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-facebook"></i></a></li><!--/li-->
|
||||
<li><a href="#"><i class="fa fa-dribbble"></i></a></li><!--/li-->
|
||||
<li><a href="#"><i class="fa fa-twitter"></i></a></li><!--/li-->
|
||||
<li><a href="#"><i class="fa fa-linkedin"></i></a></li><!--/li-->
|
||||
<li><a href="#"><i class="fa fa-instagram"></i></a></li><!--/li-->
|
||||
</ul><!--/ul-->
|
||||
</div><!--/.hm-foot-icon-->
|
||||
</div><!--/.single-contact-box-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div><!--/.contact-content-->
|
||||
</div><!--/.container-->
|
||||
|
||||
</section><!--/.contact-->
|
||||
<!--contact end -->
|
||||
|
||||
<!--footer-copyright start-->
|
||||
<footer id="footer-copyright" class="footer-copyright">
|
||||
<div class="container">
|
||||
<div class="hm-footer-copyright text-center">
|
||||
<p>
|
||||
© copyright yourname. design and developed by <a href="https://www.themesine.com/">themesine</a>
|
||||
</p><!--/p-->
|
||||
</div><!--/.text-center-->
|
||||
</div><!--/.container-->
|
||||
|
||||
<div id="scroll-Top">
|
||||
<div class="return-to-top">
|
||||
<i class="fa fa-angle-up " id="scroll-top" ></i>
|
||||
</div>
|
||||
|
||||
</div><!--/.scroll-Top-->
|
||||
|
||||
</footer><!--/.footer-copyright-->
|
||||
<!--footer-copyright end-->
|
||||
|
||||
<!-- Include all js compiled plugins (below), or include individual files as needed -->
|
||||
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
|
||||
<!--modernizr.min.js-->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
|
||||
|
||||
<!--bootstrap.min.js-->
|
||||
<script src="assets/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- bootsnav js -->
|
||||
<script src="assets/js/bootsnav.js"></script>
|
||||
|
||||
<!-- jquery.sticky.js -->
|
||||
<script src="assets/js/jquery.sticky.js"></script>
|
||||
|
||||
<!-- for progress bar start-->
|
||||
|
||||
<!-- progressbar js -->
|
||||
<script src="assets/js/progressbar.js"></script>
|
||||
|
||||
<!-- appear js -->
|
||||
<script src="assets/js/jquery.appear.js"></script>
|
||||
|
||||
<!-- for progress bar end -->
|
||||
|
||||
<!--owl.carousel.js-->
|
||||
<script src="assets/js/owl.carousel.min.js"></script>
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
|
||||
|
||||
|
||||
<!--Custom JS-->
|
||||
<script src="assets/js/custom.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,34 @@
|
||||
-----------------------
|
||||
# README
|
||||
-----------------------
|
||||
Browny is a one page bootstrap 3 based resume/portfolio template.
|
||||
|
||||
|
||||
Template Info:
|
||||
-----------------------
|
||||
Name: Browny - Free Bootstrap One Page Portfolio Resume Tempalte
|
||||
Version: 1.0
|
||||
Author: ThemeSINE
|
||||
Website: https://www.themesine.com/
|
||||
|
||||
|
||||
Changelog:
|
||||
-----------------------
|
||||
Version 1.0 14-05-2018
|
||||
- initial release
|
||||
|
||||
|
||||
Credits:
|
||||
-----------------------
|
||||
- Twitter Bootstrap http://getbootstrap.com
|
||||
- jQuery http://jquery.org
|
||||
- Modernizr https://modernizr.com/
|
||||
- Sticky.js http://stickyjs.com/
|
||||
- JQuery easing https://github.com/gdsmith/jquery.easing
|
||||
- Bootsnav http://bootsnav.danurstrap.com/
|
||||
- Pexels https://www.pexels.com/
|
||||
- Unsplash https://unsplash.com/
|
||||
|
||||
License:
|
||||
-----------------------
|
||||
This template is under Free License - https://www.themesine.com/license/
|
||||
Loading…
Reference in new issue