After Width: | Height: | Size: 38 KiB |
@ -0,0 +1,103 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>仿哔哩哔哩弹幕播放器</title> |
||||
<link rel="stylesheet" href="css/base.css"> |
||||
<style> |
||||
.Dplayer_box{overflow:hidden;width:980px;height:456px;margin:100px auto;display:block;border-top:1px solid #e5e9ef;border-bottom:1px solid #e5e9ef;background-color:#f6f9fa}#player1{background-size:100% 100%;margin-top:30px}.player_av{width:680px;height:100%;float:left;background:#000}.Dplayer_danmu{width:299px;float:right;height:100%}.Dplayer_watching{width:100%;height:60px;line-height:60px;display:inline-block;font-size:12px;color:#99a2aa;box-shadow:#ddd 0 0 5px}.Dplayer-watching-number{margin-left:20px;font-size:18px;font-weight:700;color:#222;padding:0}.Dplayer_list{width:100%;height:30px;overflow:hidden}.Dplayer_list li{width:60px;height:30px;float:left;color:#99a2aa;font-size:12px;text-align:center;line-height:30px}.Dplayer_list li:nth-child(1){width:58px!important}.Dplayer_list li:nth-child(2){width:136px!important}.list_ovefiow{width:100%;height:363px;overflow:auto}.danmuku_list{width:100%;height:20px;line-height:20px;text-align:left;color:#99a2aa;font-size:12px;display:block;margin:auto;overflow:auto;margin-top:5px}.danmuku_list li{float:left;width:60px;height:20px;white-space:nowrap;cursor:pointer}.danmuku_list li:nth-child(1){width:58px;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.danmuku_list li:nth-child(2){width:125px;margin-right:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.danmuku_list li:nth-child(2):hover{color:#00a1d6}.danmuku_list li:nth-child(3){margin-left:5px} |
||||
</style> |
||||
<link rel="stylesheet" href="css/DPlayer.min.css"> |
||||
<script src="js/jquery.min.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="Dplayer_box"> |
||||
<div class="player_av"> |
||||
<div id="player1"></div> |
||||
</div> |
||||
|
||||
<div class="Dplayer_danmu"> |
||||
<div class="Dplayer_watching"> |
||||
<span class="Dplayer-watching-number" title="这个数据是假的">24</span> |
||||
人正在观看,<span class="danmuku_num">100</span>条弹幕 |
||||
</div> |
||||
|
||||
<ul class="Dplayer_list"> |
||||
<li>时间</li> |
||||
<li>发送内容</li> |
||||
<li>用户类型</li> |
||||
</ul> |
||||
<ul class="list_ovefiow"> |
||||
|
||||
</ul> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div class="alert_back">加载中</div> |
||||
<script src="js/DPlayer.min.js"></script> |
||||
<script> |
||||
console.log(" %c 该项目基于Dplayer.js",'color:red') |
||||
var dp = new DPlayer({ |
||||
element: document.getElementById('player1'), |
||||
video: { |
||||
url: 'http://oz4nlgp7a.bkt.clouddn.com/ss.mp4', |
||||
pic: 'css/danmu.jpg' |
||||
}, |
||||
danmaku: { |
||||
id: 'demo', |
||||
api: 'https://api.prprpr.me/dplayer/', |
||||
addition: ['https://api.prprpr.me/dplayer/bilibili?aid=15572523'] |
||||
} |
||||
}); |
||||
// 弹出框 |
||||
function alert_back(text) { |
||||
$(".alert_back").html(text).show(); |
||||
setTimeout(function () { |
||||
$(".alert_back").fadeOut(); |
||||
},1200) |
||||
} |
||||
//秒转分秒 |
||||
function formatTime(seconds) { |
||||
return [ |
||||
// parseInt(seconds / 60 / 60), |
||||
parseInt(seconds / 60 % 60), |
||||
parseInt(seconds % 60) |
||||
] |
||||
.join(":") |
||||
.replace(/\b(\d)\b/g, "0$1"); |
||||
} |
||||
$.ajax({ |
||||
url:"https://api.prprpr.me/dplayer/bilibili?aid=15572523", |
||||
success:function (data) { |
||||
if(data.code=="1"){ |
||||
var danmaku=data.danmaku; |
||||
var autor="农民"; |
||||
$(".danmuku_num").text(danmaku.length) |
||||
$(danmaku).each(function (index,item) { |
||||
if(item.type=="right"){ |
||||
}else |
||||
{ |
||||
autor="地主" |
||||
} |
||||
var oLi=` <ol class="danmuku_list" time="${item.time}"> |
||||
<li>${formatTime(item.time)}</li> |
||||
<li title="${item.text}">${item.text}</li> |
||||
<li>${autor}</li> |
||||
</ol> |
||||
` |
||||
$(".list_ovefiow").append(oLi); |
||||
autor="农民"; |
||||
}) |
||||
}else { |
||||
alert_back("弹幕加载失败 -v-!"); |
||||
} |
||||
$(".danmuku_list").on("click",function () { |
||||
|
||||
dp.seek( $(this).attr("time")) |
||||
}) |
||||
} |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,79 @@ |
||||
@font-face{font-family:aplayer-fontello;src:url(font/aplayer-fontello.eot?72550380); |
||||
src:url(font/aplayer-fontello.eot?72550380#iefix) |
||||
format("embedded-opentype"), |
||||
url(font/aplayer-fontello.woff?72550380) |
||||
format("woff"),url(font/aplayer-fontello.ttf?72550380) |
||||
format("truetype"),url(font/aplayer-fontello.svg?72550380#fontello) |
||||
format("svg"); |
||||
font-weight:400;font-style:normal} |
||||
.aplayer-narrow{width:66px} |
||||
.aplayer-narrow .aplayer-info{display:none} |
||||
.aplayer-withlrc.aplayer-narrow{width:106px} |
||||
.aplayer-withlrc.aplayer |
||||
.aplayer-pic{height:106px;width:106px} |
||||
aplayer-withlrc.aplayer .aplayer-info{margin-left:106px;height:106px} |
||||
.aplayer-withlrc.aplayer .aplayer-lrc{display:block} |
||||
.aplayer{ |
||||
font-family: Arial,Helvetica,sans-serif; |
||||
margin: 5px; |
||||
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); |
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); |
||||
-webkit-border-radius: 2px; |
||||
border-radius: 10px; |
||||
overflow: hidden; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
background-color: #FBFBFB; |
||||
} |
||||
.aplayer [class*=" aplayer-icon-"]:before, |
||||
.aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em} |
||||
.aplayer .aplayer-lrc-content,.aplayer .aplayer-pic .aplayer-hide{display:none} |
||||
.aplayer .aplayer-icon-weibo:before{content:'\e805'} |
||||
.aplayer .aplayer-icon-play:before{content:'\e806'} |
||||
.aplayer .aplayer-icon-pause:before{content:'\e807'} |
||||
.aplayer .aplayer-icon-to-start:before{content:'\e808'} |
||||
.aplayer .aplayer-icon-to-end:before{content:'\e809'} |
||||
.aplayer .aplayer-icon-list:before{content:'\e80a'} |
||||
.aplayer .aplayer-icon-menu:before{content:'\e80b'} |
||||
.aplayer .aplayer-icon-volume-off:before{content:'\e800'} |
||||
.aplayer .aplayer-icon-volume-down:before{content:'\e801'} |
||||
.aplayer .aplayer-icon-volume-up:before{content:'\e802'} |
||||
.aplayer span{cursor:default!important} |
||||
.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px} |
||||
.aplayer .aplayer-pic img{ |
||||
height: 100%; |
||||
width: 100%; |
||||
border-radius: 10px 0px 0px 10px; |
||||
} |
||||
.aplayer .aplayer-pic .aplayer-button{position:absolute;color:#fff;-webkit-border-radius:50%;border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2)} |
||||
.aplayer .aplayer-pic .aplayer-button:hover{opacity:1} |
||||
.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;top:50%;left:50%;margin:-15px 0 0 -15px} |
||||
.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px;line-height:23px} |
||||
.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px} |
||||
.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size:12px;line-height:14px} |
||||
.aplayer .aplayer-info{margin-left:106px;padding:14px 7px 0 10px;height:66px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} |
||||
.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:17px} |
||||
.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px} |
||||
.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666} |
||||
.aplayer .aplayer-info .aplayer-controller{position:relative} |
||||
.aplayer .aplayer-info .aplayer-controller |
||||
.aplayer-bar-wrap{margin:0 120px 0 5px} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd;cursor:pointer!important} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;background:#b7daff;height:2px} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border:1px solid #b7daff;-webkit-border-radius:50%;border-radius:50%;background:#fff;cursor:pointer!important} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover{background:#b7daff} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:-5px;height:17px;color:#999;font-size:11px} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{display:inline-block;margin-left:7px;cursor:pointer!important} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:99} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa} |
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;background:#b7daff} |
||||
.aplayer .aplayer-lrc{display:none;position:relative;height:40px;background:#fff;text-align:center;overflow:hidden;margin:-10px 0 10px} |
||||
.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;overflow:hidden;content:' ';width:100%} |
||||
.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 )} |
||||
.aplayer .aplayer-lrc:after{bottom:0;height:33%;background:-webkit-linear-gradient(bottom,#fff 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left bottom,left top,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )} |
||||
.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4} |
||||
.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1} |
||||
.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out} |
After Width: | Height: | Size: 4.3 KiB |
@ -0,0 +1,20 @@ |
||||
.demo { |
||||
width: 360px; |
||||
margin: 160px auto; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.demo p { |
||||
padding: 10px 0; |
||||
position: relative; |
||||
left: 16px; |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
body { |
||||
height: 595px; |
||||
width: 900px; |
||||
background-size: 1000px 968px; |
||||
margin: 0px auto; |
||||
background-color: #2D2D2D; |
||||
} |
@ -0,0 +1,52 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
||||
<title>html音乐播放器</title> |
||||
<meta name="keywords" content="HTML5,播放器" /> |
||||
<meta name="description" content="" /> |
||||
<link rel="stylesheet" href="APlayer.min.css"> |
||||
<link rel="stylesheet" type="text/css" href="index.css"> |
||||
</head> |
||||
<body> |
||||
<div id="header"> |
||||
</div> |
||||
<div id="main"> |
||||
<div class="demo"> |
||||
<p><strong>MY MUSIC</strong></p> |
||||
<div id="player3" class="aplayer"> |
||||
<pre class="aplayer-lrc-content"> |
||||
[00:00.00]Jar Of Love |
||||
[00:00.08]演唱:曲婉婷 |
||||
[00:00.22] |
||||
[00:01.00]Another sunrise, another sunset |
||||
[00:05.10]Soon it'll all be yesterday |
||||
[00:08.33]Another good day, another bad day, |
||||
[00:12.77]What did you do today? |
||||
[00:15.95]Why do we choose to chase what we'll lose? |
||||
[00:19.77]What you want isn't what you have. |
||||
[00:23.34]What you have may not be yours, to keep. |
||||
[00:31.29]If I could find love, at a stop, in a park with open arms, |
||||
</pre> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<script src="APlayer.min.js"></script> |
||||
<script> |
||||
var ap3 = new APlayer({ |
||||
element: document.getElementById('player3'),//样式1 |
||||
narrow: false, |
||||
autoplay: false, |
||||
showlrc: true, |
||||
music: { |
||||
title: 'Jar Of Love', |
||||
author: '_Re-梦_', |
||||
url: 'aa.mp3', |
||||
pic: 'zz.jpg' |
||||
} |
||||
}); |
||||
ap3.init(); |
||||
</script> |
||||
</body> |
||||
</html> |
After Width: | Height: | Size: 7.4 KiB |
After Width: | Height: | Size: 5.2 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 9.9 KiB |
@ -0,0 +1,24 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
||||
<meta id="viewport" name="viewport" content="width=540,user-scalable=no,target-densitydpi=high-dpi"> |
||||
<script src="js/require.js"></script> |
||||
<title>一个都不能死</title> |
||||
<style type="text/css"> |
||||
body{ |
||||
margin:0px; |
||||
padding:0px; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
<script type="text/javascript" src="js/main.js"></script> |
||||
</head> |
||||
<body> |
||||
<div style="text-align:center;"> |
||||
<canvas id="linkScreen" width="1366" height="621" style="width: 1366px; height: 621px;"> |
||||
很遗憾,您的浏览器不支持HTML5,请使用支持HTML5的浏览器。 |
||||
</canvas> |
||||
</div> |
||||
</body> |
||||
</html> |
@ -0,0 +1,74 @@ |
||||
.g-flexview { padding-top: 3rem; background: #fff; } |
||||
.demo-pagetitle { font-size: .68rem; color: #FF5E53; text-align: center; padding: .6rem 0 .4rem; } |
||||
.demo-detail-title { color: #888; font-size: .28rem; margin-bottom: .5rem; font-weight: normal; line-height: 0.42rem; text-align: center; } |
||||
.demo-loading { margin-bottom: 20px; } |
||||
.demo-loading li a { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; width: 100%; height: 100%; } |
||||
.demo-loading li img { width: .6rem; height: .6rem; display: inline-block; } |
||||
.demo-tip { color: #B1B1B1; font-size: .24rem; padding: .2rem .24rem .4rem; line-height: 18px; font-family: \5fae\8f6f\96c5\9ed1; position: relative; } |
||||
.demo-tip:after { content: ''; position: absolute; bottom: .2rem; left: 0; width: 100%; border-bottom: 1px dashed #B2B2B2; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } |
||||
.demo-tip i { margin-right: 3px; } |
||||
.demo-tip a { color: #5AA700; } |
||||
.demo-upload { overflow: hidden; } |
||||
.demo-upload li { width: 1rem; height: 1rem; float: left; margin-right: 0.2rem; } |
||||
.demo-upload li:last-child { margin-right: 0; } |
||||
.demo-upload-big { width: 2rem; height: 2rem; margin-top: 0.4rem; } |
||||
.demo-upload-rectangle { width: 4rem; height: 2rem; margin-top: 0.4rem; } |
||||
.demo-components { background-color: #FFF; padding: 10px; margin-bottom: 10px; } |
||||
.demo-upload { overflow: hidden; } |
||||
.demo-upload li { float: left; } |
||||
.demo-upload li img { width: 1rem; height: 1rem; margin-right: .2rem; } |
||||
.demo-pitch { margin-top: .5rem; } |
||||
.demo-small-pitch { margin-top: .35rem; } |
||||
.demo-progressbar { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 .24rem; } |
||||
.demo-spinner { background-color: #FFF; padding: .24rem; font-size: 0; } |
||||
.demo-spinner-title { font-size: .26rem; color: #888; display: block; margin-bottom: .1rem; } |
||||
.demo-badege { padding: 0 .24rem .5rem .24rem; background-color: #FFF; } |
||||
.demo-badege .demo-badege-title { font-size: .26rem; padding-top: .5rem; padding-bottom: .15rem; color: #777; position: relative; } |
||||
.demo-badege .demo-badege-title:after { content: ''; position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #D9D9D9; border-bottom: 1px solid #D9D9D9; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } |
||||
.demo-badege .badge { margin-right: .1rem; } |
||||
.demo-icons [class^="icon-"]:before, .demo-icons [class*=" icon-"]:before { font-size: .6rem; color: #FF685D; } |
||||
.demo-progress-line { height: .15rem; width: 100%; } |
||||
.demo-progress-cricle { width: 2rem; height: 2rem; } |
||||
.nav-center .nav-title { font-family: \5fae\8f6f\96c5\9ed1; } |
||||
@font-face { font-family: 'demo-icons'; src: url('http://at.alicdn.com/t/font_1474965703_1820433.ttf') format('truetype'); } |
||||
[class^="demo-icons-"]:before, [class*=" demo-icons-"]:before { font-family: 'demo-icons'; font-size: .5rem; } |
||||
.demo-icons-weixin:before { content: '\e60b'; } |
||||
.demo-icons-me:before { content: '\e610'; } |
||||
.demo-icons-contact:before { content: '\e60c'; } |
||||
.demo-icons-discover:before { content: '\e611'; } |
||||
.demo-icons-phone:before { content: '\e60e'; } |
||||
.demo-icons-tel:before { content: '\e616'; } |
||||
.demo-icons-like:before { content: '\e60d'; } |
||||
.demo-icons-order:before { content: '\e60f'; } |
||||
.demo-icons-button:before { content: '\e602'; color: #FF685E; } |
||||
.demo-icons-sendcode:before { content: '\e60a'; color: #8B78E2; } |
||||
.demo-icons-dialog:before { content: '\e603'; color: #3CC51E; } |
||||
.demo-icons-keyboard:before { content: '\e613'; color: #FC746C; } |
||||
.demo-icons-cell:before { content: '\e600'; color: #FC746C; } |
||||
.demo-icons-tabs:before { content: '\e607'; color: #FF8D20; } |
||||
.demo-icons-list:before { content: '\e605'; color: #FF8D20; } |
||||
.demo-icons-actionsheet:before { content: '\e601'; color: #3CCD1C; } |
||||
.demo-icons-progressbar:before { content: '\e612'; color: #FF8D20; } |
||||
.demo-icons-icons:before { content: '\e604'; color: #8B78E2; } |
||||
.demo-icons-tabbar:before { content: '\e606'; color: #3CC51E; } |
||||
.demo-icons-badge:before { content: '\e608'; color: #EF4F4F; } |
||||
.demo-icons-grids:before { content: '\e609'; color: #8B78E2; } |
||||
.demo-icons-slider:before { content: '\e614'; color: #8B78E2; } |
||||
.demo-icons-spinner:before { content: '\e615'; color: #FF8D20; } |
||||
.demo-icons-cityselect:before { content: '\e617'; color: #FF685E; } |
||||
@font-face { font-family: 'demo-category-icons'; src: url('http://at.alicdn.com/t/font_1477296366_4593668.ttf') format('truetype'); } |
||||
[class^="demo-icons-category"]:before, [class*=" demo-icons-category"]:before { font-family: 'demo-category-icons'; font-size: .48rem; color: #5B5D5C; } |
||||
.demo-icons-category1:before { content: '\E604'; } |
||||
.demo-icons-category2:before { content: '\E602'; } |
||||
.demo-icons-category3:before { content: '\E605'; } |
||||
.demo-icons-category4:before { content: '\E603'; } |
||||
.demo-icons-category5:before { content: '\E607'; } |
||||
.demo-icons-category6:before { content: '\E600'; } |
||||
.demo-icons-category7:before { content: '\E606'; } |
||||
.demo-icons-category8:before { content: '\E601'; } |
||||
.cell-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; padding-left: 0.24rem; overflow: hidden; } |
||||
.cell-left { color: #333; font-size: 0.3rem; white-space: nowrap; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } |
||||
.cell-right { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 100%; min-height: 1rem; color: #525252; text-align: right; font-size: 0.26rem; padding-right: 0.24rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } |
||||
.cell-input { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 1rem; border: none; font-size: 0.3rem; background: transparent; color: #555; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; } |
||||
.cell-arrow:after { margin-left: .05rem; margin-right: -0.08rem; display: block; font-family: 'YDUI-INLAY'; font-size: 0.34rem; color: #C9C9C9; content: '\e608'; } |
||||
.m-celltitle { padding: 0 0.24rem 0.1rem; font-size: 0.3rem; text-align: left; color: #888; position: relative; z-index: 1; } |
@ -0,0 +1,90 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>CitySelect</title> |
||||
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/> |
||||
<meta content="yes" name="apple-mobile-web-app-capable"/> |
||||
<meta content="black" name="apple-mobile-web-app-status-bar-style"/> |
||||
<meta content="telephone=no" name="format-detection"/> |
||||
<link rel="stylesheet" href="css/ydui.css?rev=@@hash"/> |
||||
<link rel="stylesheet" href="css/demo.css"/> |
||||
<script src="js/ydui.flexible.js"></script> |
||||
</head> |
||||
<body> |
||||
|
||||
<section class="g-flexview"> |
||||
<section class="g-scrollview"> |
||||
<div class="m-celltitle">默认调用</div> |
||||
<div class="m-cell"> |
||||
<div class="cell-item"> |
||||
<div class="cell-left">所在地区:</div> |
||||
<div class="cell-right cell-arrow"> |
||||
<input type="text" class="cell-input" readonly id="J_Address" value="" placeholder="请选择收货地址"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="m-celltitle">设置默认值</div> |
||||
<div class="m-cell"> |
||||
<div class="cell-item"> |
||||
<div class="cell-left">所在地区:</div> |
||||
<div class="cell-right cell-arrow"> |
||||
<input type="text" class="cell-input" readonly id="J_Address2" value="中国 新疆维吾尔自治区 乌鲁木齐市 天山区" placeholder="请选择收货地址"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</section> |
||||
|
||||
</section> |
||||
|
||||
<script src="js/jquery.min.js"></script> |
||||
<script src="js/ydui.citys.js"></script> |
||||
<script src="js/ydui.js"></script> |
||||
<script> |
||||
/** |
||||
* 默认调用 |
||||
*/ |
||||
!function () { |
||||
var $target = $('#J_Address'); |
||||
|
||||
$target.citySelect(); |
||||
|
||||
$target.on('click', function (event) { |
||||
event.stopPropagation(); |
||||
$target.citySelect('open'); |
||||
}); |
||||
|
||||
$target.on('done.ydui.cityselect', function (ret) { |
||||
console.log(ret) |
||||
$(this).val(ret.country + ' ' + ret.provance + ' ' + ret.city + ' ' + ret.area); |
||||
}); |
||||
}(); |
||||
/** |
||||
* 设置默认值 |
||||
*/ |
||||
!function () { |
||||
var $target = $('#J_Address2'); |
||||
|
||||
$target.citySelect({ |
||||
country: '中国', |
||||
provance: '新疆维吾尔自治区', |
||||
city: '乌鲁木齐市', |
||||
area: '天山区', |
||||
id: '1-31-330-3033' |
||||
}); |
||||
|
||||
$target.on('click', function (event) { |
||||
event.stopPropagation(); |
||||
$target.citySelect('open'); |
||||
}); |
||||
|
||||
$target.on('done.ydui.cityselect', function (ret) { |
||||
console.log(ret); |
||||
$(this).val(ret.country + ' ' + ret.provance + ' ' + ret.city + ' ' + ret.area); |
||||
}); |
||||
}(); |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,38 @@ |
||||
/** |
||||
* YDUI 可伸缩布局方案 |
||||
* rem计算方式:设计图尺寸px / 100 = 实际rem 例: 100px = 1rem |
||||
*/ |
||||
!function (window) { |
||||
|
||||
/* 设计图文档宽度 */ |
||||
var docWidth = 750; |
||||
|
||||
var doc = window.document, |
||||
docEl = doc.documentElement, |
||||
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; |
||||
|
||||
var recalc = (function refreshRem () { |
||||
var clientWidth = docEl.getBoundingClientRect().width; |
||||
|
||||
/* 8.55:小于320px不再缩小,11.2:大于420px不再放大 */ |
||||
docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; |
||||
|
||||
return refreshRem; |
||||
})(); |
||||
|
||||
/* 添加倍屏标识,安卓倍屏为1 */ |
||||
docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); |
||||
|
||||
if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { |
||||
/* 添加IOS标识 */ |
||||
doc.documentElement.classList.add('ios'); |
||||
/* IOS8以上给html添加hairline样式,以便特殊处理 */ |
||||
if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) |
||||
doc.documentElement.classList.add('hairline'); |
||||
} |
||||
|
||||
if (!doc.addEventListener) return; |
||||
window.addEventListener(resizeEvt, recalc, false); |
||||
doc.addEventListener('DOMContentLoaded', recalc, false); |
||||
|
||||
}(window); |
@ -0,0 +1,479 @@ |
||||
/* |
||||
* Owl Carousel Owl Demo Theme |
||||
* v1.24 |
||||
*/ |
||||
#owl-demo .item{ |
||||
margin: 3px; |
||||
} |
||||
#owl-demo .item img{ |
||||
display: block; |
||||
height: auto; |
||||
} |
||||
|
||||
/* Styling Next and Prev buttons */ |
||||
|
||||
.owl-theme .owl-controls .owl-buttons div{ |
||||
color: #FFF; |
||||
display: inline-block; |
||||
zoom: 1; |
||||
margin: 5px; |
||||
font-size: 12px; |
||||
width:35px; |
||||
height:35px; |
||||
} |
||||
.owl-next{ |
||||
background: url(../images/right-arrow.png) no-repeat 0px 0px; |
||||
position: absolute; |
||||
right: 0%; |
||||
top:57%; |
||||
} |
||||
.owl-prev{ |
||||
background: url(../images/left-arrow.png) no-repeat 0px 0px; |
||||
position: absolute; |
||||
left: -2%; |
||||
top:57%; |
||||
} |
||||
/* Clickable class fix problem with hover on touch devices */ |
||||
/* Use it for non-touch hover action */ |
||||
.owl-theme .owl-controls.clickable .owl-buttons div:hover{ |
||||
filter: Alpha(Opacity=100);/*IE7 fix*/ |
||||
opacity: 1; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
/* Styling Pagination*/ |
||||
|
||||
.owl-theme .owl-controls .owl-page{ |
||||
display:block; |
||||
zoom: 1; |
||||
*display: inline;/*IE7 life-saver */ |
||||
} |
||||
.owl-theme .owl-controls .owl-page span{ |
||||
display: block; |
||||
width: 13px; |
||||
height: 13px; |
||||
margin: 5px 0px; |
||||
-webkit-border-radius: 20px; |
||||
-moz-border-radius: 20px; |
||||
border-radius: 20px; |
||||
background:#191919; |
||||
} |
||||
.owl-pagination { |
||||
position: absolute; |
||||
right: 20%; |
||||
top: 41px; |
||||
} |
||||
.owl-carousel2 div.owl-pagination { |
||||
position: absolute; |
||||
right: 94%; |
||||
top: 147px; |
||||
z-index: 999; |
||||
} |
||||
.owl-carousel2 div.owl-controls .owl-page { |
||||
display:block; |
||||
zoom: 1; |
||||
padding:0.1em 0; |
||||
} |
||||
.owl-carousel2 div.owl-controls .owl-page.active span, .owl-carousel2 div.owl-controls.clickable .owl-page:hover span{ |
||||
|
||||
background: #00a78e; |
||||
} |
||||
.owl-carousel1 .owl-controls .owl-page span{ |
||||
background:#1b242f; |
||||
} |
||||
.owl-carousel1 div.owl-pagination { |
||||
position: absolute; |
||||
right: 48%; |
||||
top: 130px; |
||||
} |
||||
.owl-carousel1 .owl-controls .owl-page span{ |
||||
background:#b3b3b3; |
||||
} |
||||
.owl-carousel1 div.owl-controls .owl-page { |
||||
display:inline-block; |
||||
zoom: 1; |
||||
padding:0 0.2em; |
||||
} |
||||
.owl-carousel1 div.owl-controls .owl-page.active span, .owl-carousel1 div.owl-controls.clickable .owl-page:hover span{ |
||||
background:#2ec06c; |
||||
} |
||||
.owl-theme .owl-controls .owl-page.active span, |
||||
.owl-theme .owl-controls.clickable .owl-page:hover span{ |
||||
background: #FFF; |
||||
} |
||||
|
||||
/* If PaginationNumbers is true */ |
||||
|
||||
.owl-theme .owl-controls .owl-page span.owl-numbers{ |
||||
height: auto; |
||||
width: auto; |
||||
color: #FFF; |
||||
padding: 2px 10px; |
||||
font-size: 12px; |
||||
-webkit-border-radius: 30px; |
||||
-moz-border-radius: 30px; |
||||
border-radius: 30px; |
||||
} |
||||
|
||||
/* preloading images */ |
||||
.owl-item.loading{ |
||||
min-height: 150px; |
||||
background: url(AjaxLoader.gif) no-repeat center center |
||||
} |
||||
/* |
||||
* Core Owl Carousel CSS File |
||||
* v1.24 |
||||
*/ |
||||
|
||||
/* clearfix */ |
||||
.owl-carousel .owl-wrapper:after { |
||||
content: "."; |
||||
display: block; |
||||
clear: both; |
||||
visibility: hidden; |
||||
line-height: 0; |
||||
height: 0; |
||||
} |
||||
/* display none until init */ |
||||
.owl-carousel{ |
||||
display: none; |
||||
position: relative; |
||||
-ms-touch-action: pan-y; |
||||
} |
||||
.owl-carousel .owl-wrapper{ |
||||
display: none; |
||||
position: relative; |
||||
-webkit-transform: translate3d(0px, 0px, 0px); |
||||
} |
||||
.owl-carousel .owl-wrapper-outer{ |
||||
overflow: hidden; |
||||
position: relative; |
||||
width: 100%; |
||||
} |
||||
.owl-carousel .owl-wrapper-outer.autoHeight{ |
||||
-webkit-transition: height 500ms ease-in-out; |
||||
-moz-transition: height 500ms ease-in-out; |
||||
-ms-transition: height 500ms ease-in-out; |
||||
-o-transition: height 500ms ease-in-out; |
||||
transition: height 500ms ease-in-out; |
||||
} |
||||
|
||||
.owl-carousel .owl-item{ |
||||
float: left; |
||||
} |
||||
.owl-controls .owl-page, |
||||
.owl-controls .owl-buttons div{ |
||||
cursor: pointer; |
||||
} |
||||
.owl-controls { |
||||
-webkit-user-select: none; |
||||
-khtml-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||
} |
||||
|
||||
/* mouse grab icon */ |
||||
.grabbing { |
||||
cursor:url(grabbing.png) 8 8, move; |
||||
} |
||||
|
||||
/* fix */ |
||||
.owl-carousel .owl-wrapper, |
||||
.owl-carousel .owl-item{ |
||||
-webkit-backface-visibility: hidden; |
||||
-moz-backface-visibility: hidden; |
||||
-ms-backface-visibility: hidden; |
||||
-webkit-transform: translate3d(0,0,0); |
||||
-moz-transform: translate3d(0,0,0); |
||||
-ms-transform: translate3d(0,0,0); |
||||
} |
||||
|
||||
/* CSS3 Transitions */ |
||||
|
||||
.owl-origin { |
||||
-webkit-perspective: 1200px; |
||||
-webkit-perspective-origin-x : 50%; |
||||
-webkit-perspective-origin-y : 50%; |
||||
-moz-perspective : 1200px; |
||||
-moz-perspective-origin-x : 50%; |
||||
-moz-perspective-origin-y : 50%; |
||||
perspective : 1200px; |
||||
} |
||||
/* fade */ |
||||
.owl-fade-out { |
||||
z-index: 10; |
||||
-webkit-animation: fadeOut .7s both ease; |
||||
-moz-animation: fadeOut .7s both ease; |
||||
animation: fadeOut .7s both ease; |
||||
} |
||||
.owl-fade-in { |
||||
-webkit-animation: fadeIn .7s both ease; |
||||
-moz-animation: fadeIn .7s both ease; |
||||
animation: fadeIn .7s both ease; |
||||
} |
||||
/* backSlide */ |
||||
.owl-backSlide-out { |
||||
-webkit-animation: backSlideOut 1s both ease; |
||||
-moz-animation: backSlideOut 1s both ease; |
||||
animation: backSlideOut 1s both ease; |
||||
} |
||||
.owl-backSlide-in { |
||||
-webkit-animation: backSlideIn 1s both ease; |
||||
-moz-animation: backSlideIn 1s both ease; |
||||
animation: backSlideIn 1s both ease; |
||||
} |
||||
/* goDown */ |
||||
.owl-goDown-out { |
||||
-webkit-animation: scaleToFade .7s ease both; |
||||
-moz-animation: scaleToFade .7s ease both; |
||||
animation: scaleToFade .7s ease both; |
||||
} |
||||
.owl-goDown-in { |
||||
-webkit-animation: goDown .6s ease both; |
||||
-moz-animation: goDown .6s ease both; |
||||
animation: goDown .6s ease both; |
||||
} |
||||
/* scaleUp */ |
||||
.owl-fadeUp-in { |
||||
-webkit-animation: scaleUpFrom .5s ease both; |
||||
-moz-animation: scaleUpFrom .5s ease both; |
||||
animation: scaleUpFrom .5s ease both; |
||||
} |
||||
|
||||
.owl-fadeUp-out { |
||||
-webkit-animation: scaleUpTo .5s ease both; |
||||
-moz-animation: scaleUpTo .5s ease both; |
||||
animation: scaleUpTo .5s ease both; |
||||
} |
||||
/* Keyframes */ |
||||
/*empty*/ |
||||
@-webkit-keyframes empty { |
||||
0% {opacity: 1} |
||||
} |
||||
@-moz-keyframes empty { |
||||
0% {opacity: 1} |
||||
} |
||||
@keyframes empty { |
||||
0% {opacity: 1} |
||||
} |
||||
@-webkit-keyframes fadeIn { |
||||
0% { opacity:0; } |
||||
100% { opacity:1; } |
||||
} |
||||
@-moz-keyframes fadeIn { |
||||
0% { opacity:0; } |
||||
100% { opacity:1; } |
||||
} |
||||
@keyframes fadeIn { |
||||
0% { opacity:0; } |
||||
100% { opacity:1; } |
||||
} |
||||
@-webkit-keyframes fadeOut { |
||||
0% { opacity:1; } |
||||
100% { opacity:0; } |
||||
} |
||||
@-moz-keyframes fadeOut { |
||||
0% { opacity:1; } |
||||
100% { opacity:0; } |
||||
} |
||||
@keyframes fadeOut { |
||||
0% { opacity:1; } |
||||
100% { opacity:0; } |
||||
} |
||||
@-webkit-keyframes backSlideOut { |
||||
25% { opacity: .5; -webkit-transform: translateZ(-500px); } |
||||
75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } |
||||
100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } |
||||
} |
||||
@-moz-keyframes backSlideOut { |
||||
25% { opacity: .5; -moz-transform: translateZ(-500px); } |
||||
75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } |
||||
100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } |
||||
} |
||||
@keyframes backSlideOut { |
||||
25% { opacity: .5; transform: translateZ(-500px); } |
||||
75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } |
||||
100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } |
||||
} |
||||
@-webkit-keyframes backSlideIn { |
||||
0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } |
||||
75% { opacity: .5; -webkit-transform: translateZ(-500px); } |
||||
100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } |
||||
} |
||||
@-moz-keyframes backSlideIn { |
||||
0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } |
||||
75% { opacity: .5; -moz-transform: translateZ(-500px); } |
||||
100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } |
||||
} |
||||
@keyframes backSlideIn { |
||||
0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } |
||||
75% { opacity: .5; transform: translateZ(-500px); } |
||||
100% { opacity: 1; transform: translateZ(0) translateX(0); } |
||||
} |
||||
@-webkit-keyframes scaleToFade { |
||||
to { opacity: 0; -webkit-transform: scale(.8); } |
||||
} |
||||
@-moz-keyframes scaleToFade { |
||||
to { opacity: 0; -moz-transform: scale(.8); } |
||||
} |
||||
@keyframes scaleToFade { |
||||
to { opacity: 0; transform: scale(.8); } |
||||
} |
||||
@-webkit-keyframes goDown { |
||||
from { -webkit-transform: translateY(-100%); } |
||||
} |
||||
@-moz-keyframes goDown { |
||||
from { -moz-transform: translateY(-100%); } |
||||
} |
||||
@keyframes goDown { |
||||
from { transform: translateY(-100%); } |
||||
} |
||||
|
||||
@-webkit-keyframes scaleUpFrom { |
||||
from { opacity: 0; -webkit-transform: scale(1.5); } |
||||
} |
||||
@-moz-keyframes scaleUpFrom { |
||||
from { opacity: 0; -moz-transform: scale(1.5); } |
||||
} |
||||
@keyframes scaleUpFrom { |
||||
from { opacity: 0; transform: scale(1.5); } |
||||
} |
||||
|
||||
@-webkit-keyframes scaleUpTo { |
||||
to { opacity: 0; -webkit-transform: scale(1.5); } |
||||
} |
||||
@-moz-keyframes scaleUpTo { |
||||
to { opacity: 0; -moz-transform: scale(1.5); } |
||||
} |
||||
@keyframes scaleUpTo { |
||||
to { opacity: 0; transform: scale(1.5); } |
||||
} |
||||
/*----responsive-mediaquries-----*/ |
||||
@media (max-width:1024px){ |
||||
.owl-carousel2 div.owl-pagination { |
||||
position: absolute; |
||||
right: 91%; |
||||
top: 147px; |
||||
z-index: 999; |
||||
} |
||||
} |
||||
@media (max-width:1024px){ |
||||
#owl-demo .item img { |
||||
width: 90%; |
||||
} |
||||
} |
||||
@media (max-width:991px){ |
||||
.owl-carousel2 div.owl-pagination { |
||||
position: absolute; |
||||
right: 93%; |
||||
top: 80px; |
||||
z-index: 999; |
||||
} |
||||
} |
||||
@media (max-width:800px){ |
||||
.owl-carousel2 div.owl-pagination { |
||||
position: absolute; |
||||
right: 93%; |
||||
top: 80px; |
||||
z-index: 999; |
||||
} |
||||
} |
||||
@media (max-width:768px){ |
||||
.owl-carousel { |
||||
width: 78%; |
||||
} |
||||
.owl-pagination { |
||||
right: -15%; |
||||
top: 26px; |
||||
} |
||||
#owl-demo2 { |
||||
padding: 3em 0 0 0; |
||||
margin: 0 auto; |
||||
} |
||||
div#owl-demo3 { |
||||
margin: 0 auto; |
||||
} |
||||
.owl-carousel1 div.owl-pagination { |
||||
top: 152px; |
||||
right: 45%; |
||||
} |
||||
.owl-carousel2 div.owl-pagination { |
||||
position: absolute; |
||||
right: 89%; |
||||
top: 140px; |
||||
z-index: 999; |
||||
} |
||||
} |
||||
@media (max-width:640px){ |
||||
.owl-carousel { |
||||
width: 78%; |
||||
} |
||||
.owl-pagination { |
||||
right: -15%; |
||||
top: 26px; |
||||
} |
||||
#owl-demo2 { |
||||
padding: 3em 0 0 0; |
||||
margin: 0 auto; |
||||
} |
||||
div#owl-demo3 { |
||||
margin: 0 auto; |
||||
width: 100%; |
||||
} |
||||
.owl-carousel1 div.owl-pagination { |
||||
top: 152px; |
||||
right: 45%; |
||||
} |
||||
.owl-carousel2 div.owl-pagination { |
||||
right: -9%; |
||||
top: 84px; |
||||
} |
||||
} |
||||
@media (max-width:480px){ |
||||
.owl-carousel { |
||||
width: 78%; |
||||
} |
||||
.owl-pagination { |
||||
right: -15%; |
||||
top: 26px; |
||||
} |
||||
#owl-demo2 { |
||||
padding: 3em 0 0 0; |
||||
margin: 0 auto; |
||||
} |
||||
div#owl-demo3 { |
||||
margin: 0 auto; |
||||
width: 100%; |
||||
} |
||||
.owl-carousel1 div.owl-pagination { |
||||
top: 152px; |
||||
right: 45%; |
||||
} |
||||
.owl-carousel2 div.owl-pagination { |
||||
right: -19%; |
||||
top: 128px; |
||||
} |
||||
} |
||||
@media (max-width:320px){ |
||||
.owl-carousel { |
||||
width: 78%; |
||||
} |
||||
.owl-pagination { |
||||
right: -3%; |
||||
top: 0px; |
||||
} |
||||
#owl-demo2 { |
||||
padding: 3em 0 0 0; |
||||
margin: 0 auto; |
||||
} |
||||
div#owl-demo3 { |
||||
margin: 0 auto; |
||||
width: 100%; |
||||
} |
||||
.owl-carousel2 div.owl-pagination { |
||||
right: -17%; |
||||
top: 124px; |
||||
} |
||||
} |
After Width: | Height: | Size: 273 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 460 KiB |
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 423 KiB |
After Width: | Height: | Size: 133 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 681 B |
After Width: | Height: | Size: 45 KiB |
After Width: | Height: | Size: 51 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 63 KiB |
After Width: | Height: | Size: 52 KiB |
After Width: | Height: | Size: 45 KiB |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 62 KiB |
After Width: | Height: | Size: 53 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 9.8 KiB |
After Width: | Height: | Size: 3.9 KiB |
@ -0,0 +1,885 @@ |
||||
<!DOCTYPE HTML> |
||||
<html> |
||||
<head> |
||||
<title>Preface a Personal Category Flat Bootstrap Responsive Website Template</title> |
||||
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> |
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> |
||||
<script src="js/jquery.min.js"></script> |
||||
<!-- Custom Theme files --> |
||||
<link href="css/style.css" rel='stylesheet' type='text/css' /> |
||||
<!-- Custom Theme files --> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
<meta name="keywords" content="Preface Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, |
||||
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" /> |
||||
<!-- webfonts --> |
||||
<link href='//fonts.googleapis.com/css?family=Asap:400,700,400italic' rel='stylesheet' type='text/css'> |
||||
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'> |
||||
<!-- webfonts --> |
||||
<!---- start-smoth-scrolling----> |
||||
<script type="text/javascript" src="js/move-top.js"></script> |
||||
<script type="text/javascript" src="js/easing.js"></script> |
||||
<script type="text/javascript"> |
||||
jQuery(document).ready(function($) { |
||||
$(".scroll").click(function(event){ |
||||
event.preventDefault(); |
||||
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000); |
||||
}); |
||||
}); |
||||
</script> |
||||
<!---- start-smoth-scrolling----> |
||||
</head> |
||||
<body> |
||||
<!-- container --> |
||||
<!-- header --> |
||||
<div id="home" class="header"> |
||||
<div class="container"> |
||||
<!-- top-hedader --> |
||||
<div class="top-header"> |
||||
<!-- /logo --> |
||||
<!--top-nav----> |
||||
<div class="top-nav"> |
||||
<div class="navigation"> |
||||
<div class="logo"> |
||||
<h1><a href="index.html"><span>P</span>REFACE</a></h1> |
||||
</div> |
||||
<div class="navigation-right"> |
||||
<span class="menu"><img src="images/menu.png" alt=" " /></span> |
||||
<nav class="link-effect-3" id="link-effect-3"> |
||||
<ul class="nav1 nav nav-wil"> |
||||
<li class="active"><a data-hover="Home" href="index.html">Home</a></li> |
||||
<li><a class="scroll" data-hover="About" href="#about">About</a></li> |
||||
<li><a class="scroll" data-hover="Services" href="#services" >Services</a></li> |
||||
<li><a class="scroll" data-hover="Experience" href="#work">Experience</a></li> |
||||
<li><a class="scroll" data-hover="Portfolio" href="#port">Portfolio</a></li> |
||||
<li><a class="scroll" data-hover="Blog" href="#blogs">Blog</a></li> |
||||
<li><a class="scroll" data-hover="Contact" href="#contact">Contact</a></li> |
||||
</ul> |
||||
</nav> |
||||
<!-- script-for-menu --> |
||||
<script> |
||||
$( "span.menu" ).click(function() { |
||||
$( "ul.nav1" ).slideToggle( 300, function() { |
||||
// Animation complete. |
||||
}); |
||||
}); |
||||
</script> |
||||
<!-- /script-for-menu --> |
||||
</div> |
||||
<div class="clearfix"></div> |
||||
</div> |
||||
<!-- /top-hedader --> |
||||
</div> |
||||
<div class="banner-info"> |
||||
<div class="col-md-7 header-right"> |
||||
<h1>Hi !</h1> |
||||
<h6>UX & UI DESIGNER</h6> |
||||
<ul class="address"> |
||||
|
||||
<li> |
||||
<ul class="address-text"> |
||||
<li><b>NAME</b></li> |
||||
<li>I'M ROB LEE</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<ul class="address-text"> |
||||
<li><b>D.O.B</b></li> |
||||
<li>23-06-1980</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<ul class="address-text"> |
||||
<li><b>PHONE </b></li> |
||||
<li>+00 111 222 3333</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<ul class="address-text"> |
||||
<li><b>ADDRESS </b></li> |
||||
<li>756 Global Place,New York.</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<ul class="address-text"> |
||||
<li><b>E-MAIL </b></li> |
||||
<li><a href="mailto:example@mail.com"> mail@example.com</a></li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<ul class="address-text"> |
||||
<li><b>WEBSITE </b></li> |
||||
<li><a href="http://w3layouts.com">www.myresume.com</a></li> |
||||
</ul> |
||||
</li> |
||||
|
||||
</ul> |
||||
</div> |
||||
<div class="col-md-5 header-left"> |
||||
<img src="images/img1.jpg" alt=""> |
||||
</div> |
||||
<div class="clearfix"> </div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- about --> |
||||
<div id="about" class="about"> |
||||
<div class="col-md-6 about-left"> |
||||
<div id="owl-demo1" class="owl-carousel owl-carousel2"> |
||||
<div class="item"> |
||||
<div class="about-left-grid"> |
||||
<h2>Hi! I'm <span>Rob Lee</span></h2> |
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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 perspiciatis.</p> |
||||
<ul> |
||||
<li><a class="a-btn-a scroll" href="#port">My Work</a></li> |
||||
<li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="about-left-grid"> |
||||
<h2>Hi! I'm <span>Rob Lee</span></h2> |
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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 perspiciatis.</p> |
||||
<ul> |
||||
<li><a class="a-btn-a scroll" href="#port">My Work</a></li> |
||||
<li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="about-left-grid"> |
||||
<h2>Hi! I'm <span>ROB LEE</span></h2> |
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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 perspiciatis.</p> |
||||
<ul> |
||||
<li><a class="a-btn-a scroll" href="#port">My Work</a></li> |
||||
<li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="col-md-6 about-right"> |
||||
|
||||
</div> |
||||
<div class="clearfix"> </div> |
||||
<link href="css/owl.carousel.css" rel="stylesheet"> |
||||
<script src="js/owl.carousel.js"></script> |
||||
<script> |
||||
$(document).ready(function() { |
||||
$("#owl-demo1").owlCarousel({ |
||||
items : 1, |
||||
lazyLoad : false, |
||||
autoPlay : true, |
||||
navigation : false, |
||||
navigationText : false, |
||||
pagination : true, |
||||
}); |
||||
}); |
||||
</script> |
||||
<!-- Feedback --> |
||||
<script> |
||||
$(document).ready(function() { |
||||
$("#owl-demo3").owlCarousel({ |
||||
items : 1, |
||||
lazyLoad : false, |
||||
autoPlay : true, |
||||
navigation : false, |
||||
navigationText : true, |
||||
pagination :true, |
||||
}); |
||||
}); |
||||
</script> |
||||
</div> |
||||
<!-- /about --> |
||||
<!-- services --> |
||||
<div id="services" class="services"> |
||||
<div class="container"> |
||||
<div class="service-head one text-center "> |
||||
<h4>WHAT I DO</h4> |
||||
<h3>MY <span>SERVICES</span></h3> |
||||
<span class="border two"></span> |
||||
</div> |
||||
<!-- services-grids --> |
||||
<div class="wthree_about_right_grids w3l-agile"> |
||||
<div class="col-md-6 wthree_about_right_grid"> |
||||
<div class="col-xs-4 wthree_about_right_grid_left"> |
||||
<div class="hvr-rectangle-in"> |
||||
<i class="glyphicon glyphicon-pencil"></i> |
||||
</div> |
||||
</div> |
||||
<div class="col-xs-8 wthree_about_right_grid_right"> |
||||
<h4>Web Design</h4> |
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim.</p> |
||||
</div> |
||||
<div class="clearfix"> </div> |
||||
</div> |
||||
<div class="col-md-6 wthree_about_right_grid"> |
||||
<div class="col-xs-4 wthree_about_right_grid_left"> |
||||
<div class="hvr-rectangle-in"> |
||||
<i class="glyphicon glyphicon-cog"></i> |
||||
</div> |
||||
</div> |
||||
<div class="col-xs-8 wthree_about_right_grid_right"> |
||||
<h4>Web Design</h4> |
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim.</p> |
||||
</div> |
||||
<div class="clearfix"> </div> |
||||
</div> |
||||
<div class="col-md-6 wthree_about_right_grid"> |
||||
<div class="col-xs-4 wthree_about_right_grid_left"> |
||||
<div class="hvr-rectangle-in"> |
||||
<i class="glyphicon glyphicon-leaf"></i> |
||||
</div> |
||||
</div> |
||||
<div class="col-xs-8 wthree_about_right_grid_right"> |
||||
<h4>Web Design</h4> |
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim.</p> |
||||
</div> |
||||
<div class="clearfix"> </div> |
||||
</div> |
||||
<div class="col-md-6 wthree_about_right_grid"> |
||||
<div class="col-xs-4 wthree_about_right_grid_left"> |
||||
<div class="hvr-rectangle-in"> |
||||
<i class="glyphicon glyphicon-gift"></i> |
||||
</div> |
||||
</div> |
||||
<div class="col-xs-8 wthree_about_right_grid_right"> |
||||
<h4>Web Design</h4> |
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim.</p> |
||||
</div> |
||||
<div class="clearfix"> </div> |
||||
</div> |
||||
<div class="clearfix"> </div> |
||||
</div> |
||||
|
||||
<!-- services-grids --> |
||||
</div> |
||||
</div> |
||||
<!-- services --> |
||||
<!--work-experience--> |
||||
<div id="work" class="work"> |
||||
<div class="container"> |
||||
<div class="service-head text-center"> |
||||
<h4>WHAT I DID</h4> |
||||
<h3>MY <span>EXPERIENCE</span></h3> |
||||
<span class="border one"></span> |
||||
</div> |
||||
<div class="time-main w3l-agile"> |
||||
<div class="col-md-6 year-info"> |
||||
<ul class="year"> |
||||
<li>2016</li> |
||||
<li>2015</li> |
||||
<li>2014</li> |
||||
<li>2013</li> |
||||
<li>2012</li> |
||||
<div class="clearfix"></div> |
||||
</ul> |
||||
</div> |
||||
<ul class="col-md-6 timeline"> |
||||
<li> |
||||
<div class="timeline-badge info"><i class="glyphicon glyphicon-briefcase"></i></div> |
||||
<div class="timeline-panel"> |
||||
<div class="timeline-heading"> |
||||
<h4 class="timeline-title">COMPANY NAME</h4> |
||||
</div> |
||||
<div class="timeline-body"> |
||||
<p>Lorem ipsum dolor sit amet.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus </p> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
|
||||
<li> |
||||
<div class="timeline-badge primary"><i class="glyphicon glyphicon-briefcase"></i></div> |
||||
<div class="timeline-panel"> |
||||
<div class="timeline-heading"> |
||||
<h4 class="timeline-title">COMPANY NAME</h4> |
||||
</div> |
||||
<div class="timeline-body"> |
||||
<p>Lorem ipsum dolor sit amet.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus </p> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
|
||||
|
||||
|
||||
<li> |
||||
<div class="timeline-badge danger"><i class="glyphicon glyphicon-briefcase"></i></div> |
||||
<div class="timeline-panel"> |
||||
<div class="timeline-heading"> |
||||
<h4 class="timeline-title">COMPANY NAME</h4> |
||||
</div> |
||||
<div class="timeline-body"> |
||||
<p>Lorem ipsum dolor sit amet.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus </p> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
|
||||
<li> |
||||
<div class="timeline-badge success"><i class="glyphicon glyphicon-briefcase"></i></div> |
||||
<div class="timeline-panel"> |
||||
<div class="timeline-heading"> |
||||
<h4 class="timeline-title">COMPANY NAME</h4> |
||||
</div> |
||||
<div class="timeline-body"> |
||||
<p>Lorem ipsum dolor sit amet.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus </p> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<div class="timeline-badge pass"><i class="glyphicon glyphicon-briefcase"></i></div> |
||||
<div class="timeline-panel"> |
||||
<div class="timeline-heading"> |
||||
<h4 class="timeline-title">COMPANY NAME</h4> |
||||
</div> |
||||
<div class="timeline-body"> |
||||
<p>Lorem ipsum dolor sit amet.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus </p> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="clearfix"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!--//work-experience--> |
||||
|
||||
<!-- portfolio --> |
||||
<div class="portfolio" id="port"> |
||||
<div class="service-head text-center"> |
||||
<h4>MY WORKS</h4> |
||||
<h3>MY <span>PORTFOLIO</span></h3> |
||||
<span class="border"></span> |
||||
</div> |
||||
<div class="portfolio-grids"> |
||||
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function () { |
||||
$('#horizontalTab').easyResponsiveTabs({ |
||||
type: 'default', //Types: default, vertical, accordion |
||||
width: 'auto', //auto or any width like 600px |
||||
fit: true // 100% fit in a container |
||||
}); |
||||
}); |
||||
|
||||
</script> |
||||
<div class="sap_tabs"> |
||||
<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;"> |
||||
<ul class="resp-tabs-list"> |
||||
<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>ALL</span></li> |
||||
<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>WEB DESIGN</span></li> |
||||
<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>MOBILE UI</span></li> |
||||
<li class="resp-tab-item" aria-controls="tab_item-3" role="tab"><span>ILLUSTRATIONS</span></li> |
||||
</ul> |
||||
<div class="resp-tabs-container"> |
||||
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0"> |
||||
<div class="col-md-3 team-gd "> |
||||
|
||||
<a href="#portfolioModal1" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic4.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd "> |
||||
|
||||
<a href="#portfolioModal3" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic5.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd "> |
||||
|
||||
<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd "> |
||||
|
||||
<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd yes_marg "> |
||||
|
||||
<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd yes_marg "> |
||||
|
||||
<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd yes_marg "> |
||||
|
||||
<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd yes_marg "> |
||||
|
||||
<a href="#portfolioModal8" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic14.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="clearfix"></div> |
||||
</div> |
||||
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1"> |
||||
<div class="col-md-3 team-gd "> |
||||
<div class="thumb"> |
||||
<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt=""> |
||||
|
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="col-md-3 team-gd "> |
||||
<div class="thumb"> |
||||
<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt=""> |
||||
|
||||
</a> |
||||
</div> |
||||
</div> |
||||
<div class="col-md-3 team-gd "> |
||||
|
||||
<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="clearfix"></div> |
||||
</div> |
||||
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2"> |
||||
<div class="col-md-3 team-gd "> |
||||
|
||||
<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd "> |
||||
|
||||
<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd"> |
||||
|
||||
<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd"> |
||||
|
||||
<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="clearfix"></div> |
||||
</div> |
||||
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-3"> |
||||
<div class="col-md-3 team-gd "> |
||||
|
||||
<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd"> |
||||
|
||||
<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="col-md-3 team-gd "> |
||||
|
||||
<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt=""> |
||||
|
||||
</a> |
||||
|
||||
</div> |
||||
<div class="clearfix"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- //portfolio --> |
||||
<!-- top-grids --> |
||||
<div class="blog" id="blogs"> |
||||
<div class="container"> |
||||
<div class="service-head text-center"> |
||||
<h4>BLOGS</h4> |
||||
<h3>MY <span>BLOGS</span></h3> |
||||
<span class="border one"></span> |
||||
</div> |
||||
<div class="news-grid w3l-agile"> |
||||
<div class="col-md-6 news-img"> |
||||
<a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b1.jpg" alt=" " class="img-responsive"></a> |
||||
|
||||
</div> |
||||
<div class="col-md-6 news-text"> |
||||
<h3> <a href="#" data-toggle="modal" data-target="#myModal1">HERE GOES AN AWESOME BLOG TITLE</a></h3> |
||||
<ul class="news"> |
||||
<li><i class="glyphicon glyphicon-user"></i> <a href="#">Admin</a></li> |
||||
<li><i class="glyphicon glyphicon-comment"></i> <a href="#">2 Comments</a></li> |
||||
<li><i class="glyphicon glyphicon-heart"></i> <a href="#">50 Likes</a></li> |
||||
<li><i class="glyphicon glyphicon-tags"></i> <a href="#">3 Tags</a></li> |
||||
</ul> |
||||
<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p> |
||||
<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">Read More</a> |
||||
|
||||
</div> |
||||
|
||||
<div class="clearfix"></div> |
||||
</div> |
||||
<div class="news-grid"> |
||||
|
||||
<div class="col-md-6 news-text two"> |
||||
<h3> <a href="#" data-toggle="modal" data-target="#myModal1">HERE GOES AN AWESOME BLOG TITLE</a></h3> |
||||
<ul class="news"> |
||||
<li><i class="glyphicon glyphicon-user"></i> <a href="#">Admin</a></li> |
||||
<li><i class="glyphicon glyphicon-comment"></i> <a href="#">2 Comments</a></li> |
||||
<li><i class="glyphicon glyphicon-heart"></i> <a href="#">50 Likes</a></li> |
||||
<li><i class="glyphicon glyphicon-tags"></i> <a href="#">3 Tags</a></li> |
||||
</ul> |
||||
<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p> |
||||
<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">Read More</a> |
||||
|
||||
</div> |
||||
<div class="col-md-6 news-img two"> |
||||
<a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b2.jpg" alt=" " class="img-responsive"></a> |
||||
|
||||
</div> |
||||
<div class="clearfix"></div> |
||||
</div> |
||||
<div class="news-grid"> |
||||
<div class="col-md-6 news-img"> |
||||
<a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/b3.jpg" alt=" " class="img-responsive"></a> |
||||
|
||||
</div> |
||||
<div class="col-md-6 news-text"> |
||||
<h3> <a href="#" data-toggle="modal" data-target="#myModal1">HERE GOES AN AWESOME BLOG TITLE</a></h3> |
||||
<ul class="news"> |
||||
<li><i class="glyphicon glyphicon-user"></i> <a href="#">Admin</a></li> |
||||
<li><i class="glyphicon glyphicon-comment"></i> <a href="#">2 Comments</a></li> |
||||
<li><i class="glyphicon glyphicon-heart"></i> <a href="#">50 Likes</a></li> |
||||
<li><i class="glyphicon glyphicon-tags"></i> <a href="#">3 Tags</a></li> |
||||
</ul> |
||||
<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p> |
||||
<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">Read More</a> |
||||
|
||||
</div> |
||||
|
||||
<div class="clearfix"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- top-grids --> |
||||
<!-- /blog-pop--> |
||||
<div class="modal ab fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> |
||||
<div class="modal-dialog about" role="document"> |
||||
<div class="modal-content about"> |
||||
<div class="modal-header"> |
||||
<button type="button" class="close ab" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
||||
</div> |
||||
<div class="modal-body about"> |
||||
<div class="about"> |
||||
|
||||
<div class="about-inner"> |
||||
|
||||
<img src="images/b3.jpg" alt="about"/> |
||||
<h4 class="tittle">A Fews words about us</h4> |
||||
<p>Lorem ipsum dolor sit amet Integer gravida,Lorem ipsum dolor sit amet Integer gravida velit,Ming sits in the corner the whole day. She's into crochet. quis dolor tristiqumsan.Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. velit quis dolor tristiqumsan.</p> |
||||
<p>Lorem ipsum dolor sit amet. Integer gravida velit quis dolor tristiqumsan.anteposuerit litterarum formas humanitatis per seacula amet Integer gravida velit. </p> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- //blog-pop--> |
||||
|
||||
<!-- /header --> |
||||
<div class="footer" id="contact"> |
||||
<div class="container"> |
||||
<div class="service-head one text-center"> |
||||
<h4>CONTACT ME</h4> |
||||
<h3>GET <span>IN TOUCH WITH ME</span></h3> |
||||
<span class="border two"></span> |
||||
</div> |
||||
<div class="mail_us"> |
||||
<div class="col-md-6 mail_left"> |
||||
<div class="contact-grid1-left"> |
||||
<div class="contact-grid1-left1"> |
||||
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> |
||||
<h4>Contact By Email</h4> |
||||
<ul> |
||||
<li>Mail1: <a href="mailto:info@example.com">info@example1.com</a></li> |
||||
<li>Mail2: <a href="mailto:info@example.com">info@example2.com</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="contact-grid1-left"> |
||||
<div class="contact-grid1-left1"> |
||||
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> |
||||
<h4>Contact By Phone</h4> |
||||
<ul> |
||||
<li>Phone: +0000 123 312</li> |
||||
<li>Fax: +123 312</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="contact-grid1-left"> |
||||
<div class="contact-grid1-left1"> |
||||
<span class="glyphicon glyphicon-home" aria-hidden="true"></span> |
||||
<h4>Looking For Address</h4> |
||||
<ul> |
||||
<li>Address: General Pvt 66, Dong Da</li> |
||||
<li>Hanoi, Vietnam.</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="clearfix"> </div> |
||||
</div> |
||||
<div class="col-md-6 mail_right"> |
||||
<form action="#" method="post"> |
||||
<input type="text" name="Name" value="Name" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name';}" required=""> |
||||
<input type="email" name="Email" value="Email" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Email';}" required=""> |
||||
<input type="text" name="Mobile number" value="Mobile number" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Mobile number';}" required=""> |
||||
<textarea name="Message..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Message...';}" required="">Message...</textarea> |
||||
<input type="submit" value="Send"> |
||||
|
||||
</form> |
||||
</div> |
||||
<div class="clearfix"></div> |
||||
</div> |
||||
<div class="copy_right text-center"> |
||||
<p>© 2016 Preface . All rights reserved</p> |
||||
<ul class="social-icons two"> |
||||
<li><a href="#"> </a></li> |
||||
<li><a href="#" class="fb"> </a></li> |
||||
<li><a href="#" class="in"> </a></li> |
||||
<li><a href="#" class="dott"> </a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- //footer --> |
||||
<!-- /container --> |
||||
<div class="portfolio-modal modal fade slideanim" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"> |
||||
<div class="modal-content port-modal"> |
||||
<div class="close-modal" data-dismiss="modal"> |
||||
<div class="lr"> |
||||
<div class="rl"></div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-lg-8 col-lg-offset-2 text-center"> |
||||
<div class="modal-body"> |
||||
<h3>Image-Title</h3> |
||||
<img src="images/pic4.jpg" class="img-responsive img-centered" alt=""> |
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="portfolio-modal modal fade slideanim" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true"> |
||||
<div class="modal-content port-modal"> |
||||
<div class="close-modal" data-dismiss="modal"> |
||||
<div class="lr"> |
||||
<div class="rl"></div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-lg-8 col-lg-offset-2 text-center"> |
||||
<div class="modal-body"> |
||||
<h3>Image-Title</h3> |
||||
<img src="images/pic9.jpg" class="img-responsive img-centered" alt=""> |
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="portfolio-modal modal fade slideanim" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true"> |
||||
<div class="modal-content port-modal"> |
||||
<div class="close-modal" data-dismiss="modal"> |
||||
<div class="lr"> |
||||
<div class="rl"></div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-lg-8 col-lg-offset-2 text-center"> |
||||
<div class="modal-body"> |
||||
<h3>Image-Title</h3> |
||||
<img src="images/pic5.jpg" class="img-responsive img-centered" alt=""> |
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="portfolio-modal modal fade slideanim" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true"> |
||||
<div class="modal-content port-modal"> |
||||
<div class="close-modal" data-dismiss="modal"> |
||||
<div class="lr"> |
||||
<div class="rl"></div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-lg-8 col-lg-offset-2 text-center"> |
||||
<div class="modal-body"> |
||||
<h3>Image-Title</h3> |
||||
<img src="images/pic6.jpg" class="img-responsive img-centered" alt=""> |
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="portfolio-modal modal fade slideanim" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true"> |
||||
<div class="modal-content port-modal"> |
||||
<div class="close-modal" data-dismiss="modal"> |
||||
<div class="lr"> |
||||
<div class="rl"></div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-lg-8 col-lg-offset-2 text-center"> |
||||
<div class="modal-body"> |
||||
<h3>Image-Title</h3> |
||||
<img src="images/pic10.jpg" class="img-responsive img-centered" alt=""> |
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="portfolio-modal modal fade slideanim" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true"> |
||||
<div class="modal-content port-modal"> |
||||
<div class="close-modal" data-dismiss="modal"> |
||||
<div class="lr"> |
||||
<div class="rl"></div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-lg-8 col-lg-offset-2 text-center"> |
||||
<div class="modal-body"> |
||||
<h3>Image-Title</h3> |
||||
<img src="images/pic11.jpg" class="img-responsive img-centered" alt=""> |
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="portfolio-modal modal fade slideanim" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true"> |
||||
<div class="modal-content port-modal"> |
||||
<div class="close-modal" data-dismiss="modal"> |
||||
<div class="lr"> |
||||
<div class="rl"></div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-lg-8 col-lg-offset-2 text-center"> |
||||
<div class="modal-body"> |
||||
<h3>Image-Title</h3> |
||||
<img src="images/pic13.jpg" class="img-responsive img-centered" alt=""> |
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="portfolio-modal modal fade slideanim" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true"> |
||||
<div class="modal-content port-modal"> |
||||
<div class="close-modal" data-dismiss="modal"> |
||||
<div class="lr"> |
||||
<div class="rl"></div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-lg-8 col-lg-offset-2 text-center"> |
||||
<div class="modal-body"> |
||||
<h3>Image-Title</h3> |
||||
<img src="images/pic14.jpg" class="img-responsive img-centered" alt=""> |
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="portfolio-modal modal fade slideanim" id="portfolioModal9" tabindex="-1" role="dialog" aria-hidden="true"> |
||||
<div class="modal-content port-modal"> |
||||
<div class="close-modal" data-dismiss="modal"> |
||||
<div class="lr"> |
||||
<div class="rl"></div> |
||||
</div> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row"> |
||||
<div class="col-lg-8 col-lg-offset-2 text-center"> |
||||
<div class="modal-body"> |
||||
<img src="images/pic1.jpg" class="img-responsive img-centered" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<a href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a> |
||||
<!--start-smooth-scrolling--> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function() { |
||||
/* |
||||
var defaults = { |
||||
containerID: 'toTop', // fading element id |
||||
containerHoverID: 'toTopHover', // fading element hover id |
||||
scrollSpeed: 1200, |
||||
easingType: 'linear' |
||||
}; |
||||
*/ |
||||
|
||||
$().UItoTop({ easingType: 'easeOutQuart' }); |
||||
|
||||
}); |
||||
</script> |
||||
<!--end-smooth-scrolling--> |
||||
<!-- //for bootstrap working --> |
||||
<script src="js/bootstrap.js"></script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
|
@ -0,0 +1,141 @@ |
||||
/* |
||||
* jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
|
||||
* |
||||
* Uses the built In easIng capabilities added In jQuery 1.1 |
||||
* to offer multiple easIng options |
||||
* |
||||
* Copyright (c) 2007 George Smith |
||||
* Licensed under the MIT License: |
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/ |
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
|
||||
jQuery.extend( jQuery.easing, |
||||
{ |
||||
easeInQuad: function (x, t, b, c, d) { |
||||
return c*(t/=d)*t + b; |
||||
}, |
||||
easeOutQuad: function (x, t, b, c, d) { |
||||
return -c *(t/=d)*(t-2) + b; |
||||
}, |
||||
easeInOutQuad: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return c/2*t*t + b; |
||||
return -c/2 * ((--t)*(t-2) - 1) + b; |
||||
}, |
||||
easeInCubic: function (x, t, b, c, d) { |
||||
return c*(t/=d)*t*t + b; |
||||
}, |
||||
easeOutCubic: function (x, t, b, c, d) { |
||||
return c*((t=t/d-1)*t*t + 1) + b; |
||||
}, |
||||
easeInOutCubic: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b; |
||||
return c/2*((t-=2)*t*t + 2) + b; |
||||
}, |
||||
easeInQuart: function (x, t, b, c, d) { |
||||
return c*(t/=d)*t*t*t + b; |
||||
}, |
||||
easeOutQuart: function (x, t, b, c, d) { |
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b; |
||||
}, |
||||
easeInOutQuart: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b; |
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b; |
||||
}, |
||||
easeInQuint: function (x, t, b, c, d) { |
||||
return c*(t/=d)*t*t*t*t + b; |
||||
}, |
||||
easeOutQuint: function (x, t, b, c, d) { |
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b; |
||||
}, |
||||
easeInOutQuint: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; |
||||
return c/2*((t-=2)*t*t*t*t + 2) + b; |
||||
}, |
||||
easeInSine: function (x, t, b, c, d) { |
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b; |
||||
}, |
||||
easeOutSine: function (x, t, b, c, d) { |
||||
return c * Math.sin(t/d * (Math.PI/2)) + b; |
||||
}, |
||||
easeInOutSine: function (x, t, b, c, d) { |
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; |
||||
}, |
||||
easeInExpo: function (x, t, b, c, d) { |
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; |
||||
}, |
||||
easeOutExpo: function (x, t, b, c, d) { |
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; |
||||
}, |
||||
easeInOutExpo: function (x, t, b, c, d) { |
||||
if (t==0) return b; |
||||
if (t==d) return b+c; |
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; |
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; |
||||
}, |
||||
easeInCirc: function (x, t, b, c, d) { |
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; |
||||
}, |
||||
easeOutCirc: function (x, t, b, c, d) { |
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b; |
||||
}, |
||||
easeInOutCirc: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; |
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; |
||||
}, |
||||
easeInElastic: function (x, t, b, c, d) { |
||||
var s=1.70158;var p=0;var a=c; |
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; |
||||
if (a < Math.abs(c)) { a=c; var s=p/4; } |
||||
else var s = p/(2*Math.PI) * Math.asin (c/a); |
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
||||
}, |
||||
easeOutElastic: function (x, t, b, c, d) { |
||||
var s=1.70158;var p=0;var a=c; |
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; |
||||
if (a < Math.abs(c)) { a=c; var s=p/4; } |
||||
else var s = p/(2*Math.PI) * Math.asin (c/a); |
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; |
||||
}, |
||||
easeInOutElastic: function (x, t, b, c, d) { |
||||
var s=1.70158;var p=0;var a=c; |
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); |
||||
if (a < Math.abs(c)) { a=c; var s=p/4; } |
||||
else var s = p/(2*Math.PI) * Math.asin (c/a); |
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; |
||||
}, |
||||
easeInBack: function (x, t, b, c, d, s) { |
||||
if (s == undefined) s = 1.70158; |
||||
return c*(t/=d)*t*((s+1)*t - s) + b; |
||||
}, |
||||
easeOutBack: function (x, t, b, c, d, s) { |
||||
if (s == undefined) s = 1.70158; |
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; |
||||
}, |
||||
easeInOutBack: function (x, t, b, c, d, s) { |
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; |
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; |
||||
}, |
||||
easeInBounce: function (x, t, b, c, d) { |
||||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; |
||||
}, |
||||
easeOutBounce: function (x, t, b, c, d) { |
||||
if ((t/=d) < (1/2.75)) { |
||||
return c*(7.5625*t*t) + b; |
||||
} else if (t < (2/2.75)) { |
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; |
||||
} else if (t < (2.5/2.75)) { |
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; |
||||
} else { |
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; |
||||
} |
||||
}, |
||||
easeInOutBounce: function (x, t, b, c, d) { |
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; |
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; |
||||
} |
||||
}); |
||||
|
@ -0,0 +1,111 @@ |
||||
// Easy Responsive Tabs Plugin
|
||||
// Author: Samson.Onna <Email : samson3d@gmail.com>
|
||||
(function ($) { |
||||
$.fn.extend({ |
||||
easyResponsiveTabs: function (options) { |
||||
//Set the default values, use comma to separate the settings, example:
|
||||
var defaults = { |
||||
type: 'default', //default, vertical, accordion;
|
||||
width: 'auto', |
||||
fit: true |
||||
} |
||||
//Variables
|
||||
var options = $.extend(defaults, options);
|
||||
var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion'; |
||||
|
||||
//Main function
|
||||
this.each(function () { |
||||
var $respTabs = $(this); |
||||
$respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item'); |
||||
$respTabs.css({ |
||||
'display': 'block', |
||||
'width': jwidth |
||||
}); |
||||
|
||||
$respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content'); |
||||
jtab_options(); |
||||
//Properties Function
|
||||
function jtab_options() { |
||||
if (jtype == vtabs) { |
||||
$respTabs.addClass('resp-vtabs'); |
||||
} |
||||
if (jfit == true) { |
||||
$respTabs.css({ width: '100%', margin: '0px' }); |
||||
} |
||||
if (jtype == accord) { |
||||
$respTabs.addClass('resp-easy-accordion'); |
||||
$respTabs.find('.resp-tabs-list').css('display', 'none'); |
||||
} |
||||
} |
||||
|
||||
//Assigning the h2 markup
|
||||
var $tabItemh2; |
||||
$respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>"); |
||||
|
||||
var itemCount = 0; |
||||
$respTabs.find('.resp-accordion').each(function () { |
||||
$tabItemh2 = $(this); |
||||
var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').text(); |
||||
$respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext); |
||||
$tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount)); |
||||
itemCount++; |
||||
}); |
||||
|
||||
//Assigning the 'aria-controls' to Tab items
|
||||
var count = 0, |
||||
$tabContent; |
||||
$respTabs.find('.resp-tab-item').each(function () { |
||||
$tabItem = $(this); |
||||
$tabItem.attr('aria-controls', 'tab_item-' + (count)); |
||||
$tabItem.attr('role', 'tab'); |
||||
|
||||
//First active tab
|
||||
$respTabs.find('.resp-tab-item').first().addClass('resp-tab-active'); |
||||
$respTabs.find('.resp-accordion').first().addClass('resp-tab-active'); |
||||
$respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block'); |
||||
|
||||
//Assigning the 'aria-labelledby' attr to tab-content
|
||||
var tabcount = 0; |
||||
$respTabs.find('.resp-tab-content').each(function () { |
||||
$tabContent = $(this); |
||||
$tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount)); |
||||
tabcount++; |
||||
}); |
||||
count++; |
||||
}); |
||||
|
||||
//Tab Click action function
|
||||
$respTabs.find("[role=tab]").each(function () { |
||||
var $currentTab = $(this); |
||||
$currentTab.click(function () { |
||||
|
||||
var $tabAria = $currentTab.attr('aria-controls'); |
||||
|
||||
if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { |
||||
$respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); }); |
||||
$currentTab.removeClass('resp-tab-active'); |
||||
return false; |
||||
} |
||||
if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { |
||||
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); |
||||
$respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); |
||||
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); |
||||
|
||||
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active'); |
||||
} else { |
||||
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); |
||||
$respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed'); |
||||
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); |
||||
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block'); |
||||
} |
||||
}); |
||||
//Window resize function
|
||||
$(window).resize(function () { |
||||
$respTabs.find('.resp-accordion-closed').removeAttr('style'); |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
}); |
||||
})(jQuery); |
||||
|
@ -0,0 +1,5 @@ |
||||
/* UItoTop jQuery Plugin 1.2 | Matt Varone | http://www.mattvarone.com/web-design/uitotop-jquery-plugin */ |
||||
(function($){$.fn.UItoTop=function(options){var defaults={text:'To Top',min:200,inDelay:600,outDelay:400,containerID:'toTop',containerHoverID:'toTopHover',scrollSpeed:1000,easingType:'linear'},settings=$.extend(defaults,options),containerIDhash='#'+settings.containerID,containerHoverIDHash='#'+settings.containerHoverID;$('body').append('<a href="#" id="'+settings.containerID+'">'+settings.text+'</a>');$(containerIDhash).hide().on('click.UItoTop',function(){$('html, body').animate({scrollTop:0},settings.scrollSpeed,settings.easingType);$('#'+settings.containerHoverID,this).stop().animate({'opacity':0},settings.inDelay,settings.easingType);return false;}).prepend('<span id="'+settings.containerHoverID+'"></span>').hover(function(){$(containerHoverIDHash,this).stop().animate({'opacity':1},600,'linear');},function(){$(containerHoverIDHash,this).stop().animate({'opacity':0},700,'linear');});$(window).scroll(function(){var sd=$(window).scrollTop();if(typeof document.body.style.maxHeight==="undefined"){$(containerIDhash).css({'position':'absolute','top':sd+$(window).height()-50});} |
||||
if(sd>settings.min) |
||||
$(containerIDhash).fadeIn(settings.inDelay);else |
||||
$(containerIDhash).fadeOut(settings.Outdelay);});};})(jQuery); |
@ -0,0 +1,470 @@ |
||||
/*! |
||||
* Bootstrap v3.3.1 (http://getbootstrap.com) |
||||
* Copyright 2011-2014 Twitter, Inc. |
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) |
||||
*/ |
||||
|
||||
.btn-default, |
||||
.btn-primary, |
||||
.btn-success, |
||||
.btn-info, |
||||
.btn-warning, |
||||
.btn-danger { |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); |
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); |
||||
} |
||||
.btn-default:active, |
||||
.btn-primary:active, |
||||
.btn-success:active, |
||||
.btn-info:active, |
||||
.btn-warning:active, |
||||
.btn-danger:active, |
||||
.btn-default.active, |
||||
.btn-primary.active, |
||||
.btn-success.active, |
||||
.btn-info.active, |
||||
.btn-warning.active, |
||||
.btn-danger.active { |
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); |
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); |
||||
} |
||||
.btn-default .badge, |
||||
.btn-primary .badge, |
||||
.btn-success .badge, |
||||
.btn-info .badge, |
||||
.btn-warning .badge, |
||||
.btn-danger .badge { |
||||
text-shadow: none; |
||||
} |
||||
.btn:active, |
||||
.btn.active { |
||||
background-image: none; |
||||
} |
||||
.btn-default { |
||||
text-shadow: 0 1px 0 #fff; |
||||
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%); |
||||
background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0)); |
||||
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #dbdbdb; |
||||
border-color: #ccc; |
||||
} |
||||
.btn-default:hover, |
||||
.btn-default:focus { |
||||
background-color: #e0e0e0; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-default:active, |
||||
.btn-default.active { |
||||
background-color: #e0e0e0; |
||||
border-color: #dbdbdb; |
||||
} |
||||
.btn-default:disabled, |
||||
.btn-default[disabled] { |
||||
background-color: #e0e0e0; |
||||
background-image: none; |
||||
} |
||||
.btn-primary { |
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%); |
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88)); |
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #245580; |
||||
} |
||||
.btn-primary:hover, |
||||
.btn-primary:focus { |
||||
background-color: #265a88; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-primary:active, |
||||
.btn-primary.active { |
||||
background-color: #265a88; |
||||
border-color: #245580; |
||||
} |
||||
.btn-primary:disabled, |
||||
.btn-primary[disabled] { |
||||
background-color: #265a88; |
||||
background-image: none; |
||||
} |
||||
.btn-success { |
||||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%); |
||||
background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641)); |
||||
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #3e8f3e; |
||||
} |
||||
.btn-success:hover, |
||||
.btn-success:focus { |
||||
background-color: #419641; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-success:active, |
||||
.btn-success.active { |
||||
background-color: #419641; |
||||
border-color: #3e8f3e; |
||||
} |
||||
.btn-success:disabled, |
||||
.btn-success[disabled] { |
||||
background-color: #419641; |
||||
background-image: none; |
||||
} |
||||
.btn-info { |
||||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); |
||||
background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2)); |
||||
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #28a4c9; |
||||
} |
||||
.btn-info:hover, |
||||
.btn-info:focus { |
||||
background-color: #2aabd2; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-info:active, |
||||
.btn-info.active { |
||||
background-color: #2aabd2; |
||||
border-color: #28a4c9; |
||||
} |
||||
.btn-info:disabled, |
||||
.btn-info[disabled] { |
||||
background-color: #2aabd2; |
||||
background-image: none; |
||||
} |
||||
.btn-warning { |
||||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); |
||||
background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316)); |
||||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #e38d13; |
||||
} |
||||
.btn-warning:hover, |
||||
.btn-warning:focus { |
||||
background-color: #eb9316; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-warning:active, |
||||
.btn-warning.active { |
||||
background-color: #eb9316; |
||||
border-color: #e38d13; |
||||
} |
||||
.btn-warning:disabled, |
||||
.btn-warning[disabled] { |
||||
background-color: #eb9316; |
||||
background-image: none; |
||||
} |
||||
.btn-danger { |
||||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%); |
||||
background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a)); |
||||
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #b92c28; |
||||
} |
||||
.btn-danger:hover, |
||||
.btn-danger:focus { |
||||
background-color: #c12e2a; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-danger:active, |
||||
.btn-danger.active { |
||||
background-color: #c12e2a; |
||||
border-color: #b92c28; |
||||
} |
||||
.btn-danger:disabled, |
||||
.btn-danger[disabled] { |
||||
background-color: #c12e2a; |
||||
background-image: none; |
||||
} |
||||
.thumbnail, |
||||
.img-thumbnail { |
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); |
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .075); |
||||
} |
||||
.dropdown-menu > li > a:hover, |
||||
.dropdown-menu > li > a:focus { |
||||
background-color: #e8e8e8; |
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
||||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); |
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.dropdown-menu > .active > a, |
||||
.dropdown-menu > .active > a:hover, |
||||
.dropdown-menu > .active > a:focus { |
||||
background-color: #2e6da4; |
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); |
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.navbar-default { |
||||
background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%); |
||||
background-image: -o-linear-gradient(top, #fff 0%, #f8f8f8 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8)); |
||||
background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-radius: 4px; |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); |
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); |
||||
} |
||||
.navbar-default .navbar-nav > .open > a, |
||||
.navbar-default .navbar-nav > .active > a { |
||||
background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%); |
||||
background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2)); |
||||
background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075); |
||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075); |
||||
} |
||||
.navbar-brand, |
||||
.navbar-nav > li > a { |
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .25); |
||||
} |
||||
.navbar-inverse { |
||||
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%); |
||||
background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222)); |
||||
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.navbar-inverse .navbar-nav > .open > a, |
||||
.navbar-inverse .navbar-nav > .active > a { |
||||
background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%); |
||||
background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f)); |
||||
background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25); |
||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25); |
||||
} |
||||
.navbar-inverse .navbar-brand, |
||||
.navbar-inverse .navbar-nav > li > a { |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); |
||||
} |
||||
.navbar-static-top, |
||||
.navbar-fixed-top, |
||||
.navbar-fixed-bottom { |
||||
border-radius: 0; |
||||
} |
||||
@media (max-width: 767px) { |
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a, |
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover, |
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus { |
||||
color: #fff; |
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); |
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
} |
||||
.alert { |
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .2); |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); |
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); |
||||
} |
||||
.alert-success { |
||||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); |
||||
background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc)); |
||||
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #b2dba1; |
||||
} |
||||
.alert-info { |
||||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%); |
||||
background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0)); |
||||
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #9acfea; |
||||
} |
||||
.alert-warning { |
||||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); |
||||
background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0)); |
||||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #f5e79e; |
||||
} |
||||
.alert-danger { |
||||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); |
||||
background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3)); |
||||
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #dca7a7; |
||||
} |
||||
.progress { |
||||
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); |
||||
background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5)); |
||||
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar { |
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%); |
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090)); |
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar-success { |
||||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%); |
||||
background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44)); |
||||
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar-info { |
||||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); |
||||
background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5)); |
||||
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar-warning { |
||||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); |
||||
background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f)); |
||||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar-danger { |
||||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%); |
||||
background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c)); |
||||
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.progress-bar-striped { |
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); |
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); |
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); |
||||
} |
||||
.list-group { |
||||
border-radius: 4px; |
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); |
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .075); |
||||
} |
||||
.list-group-item.active, |
||||
.list-group-item.active:hover, |
||||
.list-group-item.active:focus { |
||||
text-shadow: 0 -1px 0 #286090; |
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%); |
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a)); |
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #2b669a; |
||||
} |
||||
.list-group-item.active .badge, |
||||
.list-group-item.active:hover .badge, |
||||
.list-group-item.active:focus .badge { |
||||
text-shadow: none; |
||||
} |
||||
.panel { |
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); |
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05); |
||||
} |
||||
.panel-default > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
||||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); |
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-primary > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); |
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-success > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); |
||||
background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6)); |
||||
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-info > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); |
||||
background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3)); |
||||
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-warning > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); |
||||
background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc)); |
||||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.panel-danger > .panel-heading { |
||||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%); |
||||
background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc)); |
||||
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
} |
||||
.well { |
||||
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%); |
||||
background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5)); |
||||
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0); |
||||
background-repeat: repeat-x; |
||||
border-color: #dcdcdc; |
||||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1); |
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1); |
||||
} |
||||
/*# sourceMappingURL=bootstrap-theme.css.map */ |
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,216 @@ |
||||
/* LIGHT BOX */ |
||||
|
||||
body:after { |
||||
content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png); |
||||
display: none; |
||||
} |
||||
|
||||
body.lb-disable-scrolling { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.lightboxOverlay { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 99999; |
||||
background-color: black; |
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); |
||||
opacity: 0.8; |
||||
display: none; |
||||
} |
||||
|
||||
.lightbox { |
||||
position: absolute; |
||||
margin-top: 0%; |
||||
left: 0; |
||||
width: 100%; |
||||
z-index: 100000; |
||||
text-align: center; |
||||
line-height: 0; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
.lightbox .lb-image { |
||||
display: block; |
||||
height: auto; |
||||
max-width: inherit; |
||||
max-height: none; |
||||
border-radius: 5px; |
||||
|
||||
/* Image border */ |
||||
border: 10px solid white; |
||||
} |
||||
|
||||
.lightbox a img { |
||||
border: none; |
||||
} |
||||
|
||||
.lb-outerContainer { |
||||
position: relative; |
||||
*zoom: 1; |
||||
width: 250px; |
||||
height: 250px; |
||||
margin: 0 auto; |
||||
border-radius: 4px; |
||||
|
||||
/* Background color behind image. |
||||
This is visible during transitions. */ |
||||
background-color: white; |
||||
} |
||||
|
||||
.lb-outerContainer:after { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; |
||||
} |
||||
|
||||
.lb-loader { |
||||
position: absolute; |
||||
top: 43%; |
||||
left: 0; |
||||
height: 25%; |
||||
width: 100%; |
||||
text-align: center; |
||||
line-height: 0; |
||||
} |
||||
|
||||
.lb-cancel { |
||||
display: block; |
||||
width: 32px; |
||||
height: 32px; |
||||
margin: 0 auto; |
||||
background: url(../img/loading.gif) no-repeat; |
||||
} |
||||
|
||||
.lb-nav { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
height: 100%; |
||||
width: 100%; |
||||
z-index: 10; |
||||
} |
||||
|
||||
.lb-container > .nav { |
||||
left: 0; |
||||
} |
||||
|
||||
.lb-nav a { |
||||
outline: none; |
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); |
||||
} |
||||
|
||||
.lb-prev, .lb-next { |
||||
height: 100%; |
||||
cursor: pointer; |
||||
display: block; |
||||
} |
||||
|
||||
.lb-nav a.lb-prev { |
||||
width: 34%; |
||||
left: 0; |
||||
float: left; |
||||
background: url(../img/prev.png) left 48% no-repeat; |
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); |
||||
opacity: 0; |
||||
-webkit-transition: opacity 0.6s; |
||||
-moz-transition: opacity 0.6s; |
||||
-o-transition: opacity 0.6s; |
||||
transition: opacity 0.6s; |
||||
} |
||||
|
||||
.lb-nav a.lb-prev:hover { |
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.lb-nav a.lb-next { |
||||
width: 64%; |
||||
right: 0; |
||||
float: right; |
||||
background: url(../img/next.png) right 48% no-repeat; |
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); |
||||
opacity: 0; |
||||
-webkit-transition: opacity 0.6s; |
||||
-moz-transition: opacity 0.6s; |
||||
-o-transition: opacity 0.6s; |
||||
transition: opacity 0.6s; |
||||
} |
||||
|
||||
.lb-nav a.lb-next:hover { |
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.lb-dataContainer { |
||||
margin: 0 auto; |
||||
padding-top: 5px; |
||||
*zoom: 1; |
||||
width: 100%; |
||||
-moz-border-radius-bottomleft: 4px; |
||||
-webkit-border-bottom-left-radius: 4px; |
||||
border-bottom-left-radius: 4px; |
||||
-moz-border-radius-bottomright: 4px; |
||||
-webkit-border-bottom-right-radius: 4px; |
||||
border-bottom-right-radius: 4px; |
||||
} |
||||
|
||||
.lb-dataContainer:after { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; |
||||
} |
||||
|
||||
.lb-data { |
||||
padding: 0 4px; |
||||
color: #ccc; |
||||
} |
||||
|
||||
.lb-data .lb-details { |
||||
width: 85%; |
||||
float: left; |
||||
text-align: left; |
||||
line-height: 1.1em; |
||||
} |
||||
|
||||
.lb-data .lb-caption { |
||||
font-size: 13px; |
||||
font-weight: bold; |
||||
line-height: 1em; |
||||
} |
||||
|
||||
.lb-data .lb-caption a { |
||||
color: #4ae; |
||||
} |
||||
|
||||
.lb-data .lb-number { |
||||
margin-top: 15px; |
||||
display: block; |
||||
clear: left; |
||||
padding-bottom: 1em; |
||||
font-size: 13px; |
||||
color: #999999; |
||||
} |
||||
|
||||
.lb-data .lb-close { |
||||
display: block; |
||||
float: right; |
||||
width: 30px; |
||||
height: 30px; |
||||
background: url(../img/close.png) top right no-repeat; |
||||
text-align: right; |
||||
outline: none; |
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); |
||||
opacity: 0.7; |
||||
-webkit-transition: opacity 0.2s; |
||||
-moz-transition: opacity 0.2s; |
||||
-o-transition: opacity 0.2s; |
||||
transition: opacity 0.2s; |
||||
} |
||||
|
||||
.lb-data .lb-close:hover { |
||||
cursor: pointer; |
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); |
||||
opacity: 1; |
||||
} |
@ -0,0 +1,181 @@ |
||||
/** |
||||
* Owl Carousel v2.3.1 |
||||
* Copyright 2013-2018 David Deutsch |
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
||||
*/ |
||||
/* |
||||
* Owl Carousel - Core |
||||
*/ |
||||
.owl-carousel { |
||||
display: none; |
||||
width: 100%; |
||||
-webkit-tap-highlight-color: transparent; |
||||
/* position relative and z-index fix webkit rendering fonts issue */ |
||||
position: relative; |
||||
z-index: 1; } |
||||
.owl-carousel .owl-stage { |
||||
position: relative; |
||||
-ms-touch-action: pan-Y; |
||||
touch-action: manipulation; |
||||
-moz-backface-visibility: hidden; |
||||
/* fix firefox animation glitch */ } |
||||
.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; |
||||
/* fix for flashing background */ |
||||
-webkit-transform: translate3d(0px, 0px, 0px); } |
||||
.owl-carousel .owl-wrapper, |
||||
.owl-carousel .owl-item { |
||||
-webkit-backface-visibility: hidden; |
||||
-moz-backface-visibility: hidden; |
||||
-ms-backface-visibility: hidden; |
||||
-webkit-transform: translate3d(0, 0, 0); |
||||
-moz-transform: translate3d(0, 0, 0); |
||||
-ms-transform: translate3d(0, 0, 0); } |
||||
.owl-carousel .owl-item { |
||||
position: relative; |
||||
min-height: 1px; |
||||
float: left; |
||||
-webkit-backface-visibility: hidden; |
||||
-webkit-tap-highlight-color: transparent; |
||||
-webkit-touch-callout: none; } |
||||
.owl-carousel .owl-item img { |
||||
display: block; |
||||
width: 100%; } |
||||
.owl-carousel .owl-nav.disabled, |
||||
.owl-carousel .owl-dots.disabled { |
||||
display: none; } |
||||
.owl-carousel .owl-nav .owl-prev, |
||||
.owl-carousel .owl-nav .owl-next, |
||||
.owl-carousel .owl-dot { |
||||
cursor: pointer; |
||||
cursor: hand; |
||||
-webkit-user-select: none; |
||||
-khtml-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; } |
||||
.owl-carousel .owl-nav button.owl-prev, |
||||
.owl-carousel .owl-nav button.owl-next, |
||||
.owl-carousel button.owl-dot { |
||||
background: none; |
||||
color: inherit; |
||||
border: none; |
||||
padding: 0 !important; |
||||
font: inherit; } |
||||
.owl-carousel.owl-loaded { |
||||
display: block; } |
||||
.owl-carousel.owl-loading { |
||||
opacity: 0; |
||||
display: block; } |
||||
.owl-carousel.owl-hidden { |
||||
opacity: 0; } |
||||
.owl-carousel.owl-refresh .owl-item { |
||||
visibility: hidden; } |
||||
.owl-carousel.owl-drag .owl-item { |
||||
-ms-touch-action: none; |
||||
touch-action: none; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; } |
||||
.owl-carousel.owl-grab { |
||||
cursor: move; |
||||
cursor: grab; } |
||||
.owl-carousel.owl-rtl { |
||||
direction: rtl; } |
||||
.owl-carousel.owl-rtl .owl-item { |
||||
float: right; } |
||||
|
||||
/* No Js */ |
||||
.no-js .owl-carousel { |
||||
display: block; } |
||||
|
||||
/* |
||||
* Owl Carousel - Animate Plugin |
||||
*/ |
||||
.owl-carousel .animated { |
||||
animation-duration: 1000ms; |
||||
animation-fill-mode: both; } |
||||
|
||||
.owl-carousel .owl-animated-in { |
||||
z-index: 0; } |
||||
|
||||
.owl-carousel .owl-animated-out { |
||||
z-index: 1; } |
||||
|
||||
.owl-carousel .fadeOut { |
||||
animation-name: fadeOut; } |
||||
|
||||
@keyframes fadeOut { |
||||
0% { |
||||
opacity: 1; } |
||||
100% { |
||||
opacity: 0; } } |
||||
|
||||
/* |
||||
* Owl Carousel - Auto Height Plugin |
||||
*/ |
||||
.owl-height { |
||||
transition: height 500ms ease-in-out; } |
||||
|
||||
/* |
||||
* Owl Carousel - Lazy Load Plugin |
||||
*/ |
||||
.owl-carousel .owl-item .owl-lazy { |
||||
opacity: 0; |
||||
transition: opacity 400ms ease; } |
||||
|
||||
.owl-carousel .owl-item img.owl-lazy { |
||||
transform-style: preserve-3d; } |
||||
|
||||
/* |
||||
* Owl Carousel - Video Plugin |
||||
*/ |
||||
.owl-carousel .owl-video-wrapper { |
||||
position: relative; |
||||
height: 100%; |
||||
background: #000; } |
||||
|
||||
.owl-carousel .owl-video-play-icon { |
||||
position: absolute; |
||||
height: 80px; |
||||
width: 80px; |
||||
left: 50%; |
||||
top: 50%; |
||||
margin-left: -40px; |
||||
margin-top: -40px; |
||||
background: url("owl.video.play.png") no-repeat; |
||||
cursor: pointer; |
||||
z-index: 1; |
||||
-webkit-backface-visibility: hidden; |
||||
transition: transform 100ms ease; } |
||||
|
||||
.owl-carousel .owl-video-play-icon:hover { |
||||
-ms-transform: scale(1.3, 1.3); |
||||
transform: scale(1.3, 1.3); } |
||||
|
||||
.owl-carousel .owl-video-playing .owl-video-tn, |
||||
.owl-carousel .owl-video-playing .owl-video-play-icon { |
||||
display: none; } |
||||
|
||||
.owl-carousel .owl-video-tn { |
||||
opacity: 0; |
||||
height: 100%; |
||||
background-position: center center; |
||||
background-repeat: no-repeat; |
||||
background-size: contain; |
||||
transition: opacity 400ms ease; } |
||||
|
||||
.owl-carousel .owl-video-frame { |
||||
position: relative; |
||||
z-index: 1; |
||||
height: 100%; |
||||
width: 100%; } |
After Width: | Height: | Size: 434 KiB |
After Width: | Height: | Size: 62 KiB |