<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width">
<meta name="ad.size" content="width=300,height=250">
<meta name="keywords" content="lightweight, light weight, light, weight, lorem ipsum, lorem, ipsum">
<meta name="description" content="Lightweight is instead of using plain files from the beginning of a project">
<meta name="generator" content="Lightweight">
<meta name="apple-mobile-web-app-capable" content="no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Lightweight">
<meta name="format-detection" content="telephone=no">
<title>Lightweight</title>
<base href="/">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="//raw.githubusercontent.com/Ha006/lightweight/master/css/reset.css">
<link rel="stylesheet/less" href="stylesheet.less">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.1/css/all.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,700|Montserrat:400,700|Lato:400,700|Raleway|Roboto|Homenaje|Oswald|Codystar|Geostar|Press+Start+2P|Audiowide|Wallpoet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="//s0.2mdn.net/ads/studio/Enabler.js"></script>
<script>
var i = 0;
var myVar = setInterval(function(){
myTimer()
}, 1000);
function myTimer() {
i++;
if (i == 17) {
myStopFunction();
}
}
arr = ['First', 'Second', 'Third', 'Fourth'];
window.onload = function() {
e = document.querySelector("select");
if (document.contains(e)) {
e.onchange = function() {
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
alert(text + ' : ' + value);
}
}
obj = document.querySelectorAll('.flex img');
obj.forEach(function(el, i) {
el.onclick = function() {
console.log(arr[i]);
};
});
}
function myStopFunction() {
clearInterval(myVar);
}
function rot13(s) {
return (s ? s : this).split('').map(function(_) {
if (!_.match(/[A-Za-z]/)) return _;
c = Math.floor(_.charCodeAt(0) / 97);
k = (_.toLowerCase().charCodeAt(0) - 83) % 26 || 26;
return String.fromCharCode(k + ((c == 0) ? 64 : 96));
}).join('');
}
$(document).ready(function() {
if (window.navigator.standalone) {
$('a').click(function(event) {
var answer = confirm("Open in your browser?");
if (!answer) {
event.preventDefault();
} else {
window.location = $(this).attr('href');
}
});
}
$('table').each(function() {
$(this).wrap('<div class="table-scroll">');
});
$('body').click(function(event) {
console.log(event.target.tagName);
});
$('body').keyup(function(event) {
console.log(event.keyCode);
});
});
if ($(window).width() > 768) {}
</script>
<style>
@import url("stylesheet.css");
@font-face {
font-family: Awesome;
src: url('/font/awesome.ttf');
}
::selection {
background: rgba(80, 116, 134, 0.8); /* #507486 */
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: rgba(80, 116, 134, 0.8); /* #507486 */
color: #fff;
text-shadow: none;
}
body {
background: #EEE8D5;
color: #403E3B;
font-family: sans-serif;
font-size: 14px;
margin: 0;
overflow-y: scroll;
}
#wrapper {
margin: 0 auto;
max-width: 960px !important;
width: 80%;
}
a {
color: #02819F;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
text-align: justify;
}
input, textarea {
-webkit-appearance: none;
font-size: initial;
}
input[type="submit"]:focus,
input[type="submit"]:hover {
box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.5) inset;
}
h1, h2, h3, h4, h5, h6 {
text-align: center;
margin: 1em 0;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.center {
align-items: center;
display: flex;
justify-content: center;
}
/* VC - Abbreviation for vertical center */
.vc1 {
#position: relative;
display: table;
height: 100%;
overflow: hidden;
width: 100%;
}
.vc2 {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.vc3 {
#position: relative;
#top: -50%;
}
.tab:after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #403E3B;
content: "";
left: 50%;
margin-left: 8px;
position: absolute;
top: 100%;
z-index: 1000;
}
.table-scroll {
overflow: scroll;
width: 100%;
}
input[type="range"] {
cursor: -moz-grab;
}
input[type="range"]:active {
cursor: -moz-grabbing;
}
.animation-element {
animation: anim 2s infinite linear alternate;
}
@keyframes anim {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.slick-slide img {
margin: auto;
max-width: 100%;
outline: none;
}
.slick-prev, .slick-next {
position: absolute;
z-index: 1;
}
.slick-prev {
left: 75px;
}
.slick-next {
right: 75px;
}
/* Responsive maps */
.map-container {
height: 0;
max-width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.map-container iframe,
.map-container object,
.map-container embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
.slick-slider {
margin: 2% 2% 0;
}
.flex {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 2% 0 0 2%;
}
.flex li {
margin: 0 2% 2% 0;
width: 18%;
}
.flex li img {
cursor: pointer;
display: block;
transition: 1s transform;
width: 100%;
}
.flex li img:hover {
transform: scale(1.1);
}
@media (max-width: 1600px) {
.slick-slider {
margin: 3% 3% 0;
}
.flex {
padding: 3% 0 0 3%;
}
.flex li {
margin: 0 3% 3% 0;
width: 22%;
}
}
@media (max-width: 1200px) {
.slick-slider {
margin: 4% 4% 0;
}
.flex {
padding: 4% 0 0 4%;
}
.flex li {
margin: 0 4% 4% 0;
width: 29.333333%;
}
}
@media (max-width: 960px) {
.slick-slider {
margin: 5% 5% 0;
}
.flex {
padding: 5% 0 0 5%;
}
.flex li {
margin: 0 5% 5% 0;
width: 45%;
}
}
@media (max-width: 640px) {
.slick-slider {
margin: 10% 10% 0;
}
.flex {
padding: 10% 0 0 10%;
}
.flex li {
margin: 0 10% 10% 0;
width: 90%;
}
}
@media print {
* {
background: #fff;
color: #000
}
}
</style>
<!-- Google analytics -->
</head>
<body>
<main id="wrapper">
<h1>Lightweight</h1>
<section id="content">
<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.</p>
<div class="slider-wrap">
<div class="slider">
<div class="item">
<img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=1&w=468&h=263">
</div>
<div class="item">
<img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=2&w=468&h=263">
</div>
<div class="item">
<img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=3&w=468&h=263">
</div>
<div class="item">
<img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=4&w=468&h=263">
</div>
</div>
</div>
</section>
<ul class="flex">
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×668&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
<li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=403E3B&txtclr=fff&txt=468×468&w=468&h=468"></li>
</ul>
</main>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
<script>
var usearrows = true;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
usearrows = false;
}
var $slider = $('.slider').slick({
arrows: usearrows,
//autoplay: true,
//autoplaySpeed: 3000,
pauseOnHover: false,
draggable: true,
//dots: true,
//centerMode: true,
//slidesToShow: 1
//dots: true,
//infinite: true,
//speed: 500,
//fade: true,
//cssEase: 'linear'
});
</script>
</body>
</html>