@font-face {
font-family: Condensed;
font-style: normal;
font-weight: 100; /* Thin */
src: url(../Fonts/Exo2-ThinCondensed.otf);
}
@font-face {
font-family: Condensed;
font-style: normal;
font-weight: 300; /* Light */
src: url(../Fonts/Exo2-LightCondensed.otf);
}
body {
font-family: Condensed;
}
.task_desc > h1 {
font-size:41px;
margin:21px auto;
font-weight: 300;
}
.task_desc > ul > li > h1 {
font-weight: 100;
font-size:41px;
padding-left: 88px;
}
<div class="table-container">
<table></table>
</div>
.table-container {
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
<div class="ratio_image ratio_image_1x1">
<img src="http://lorempixel.com/500/500/" alt="">
</div>
<div class="ratio_image ratio_image_1x2">
<img src="http://lorempixel.com/500/500/" alt="">
</div>
<div class="ratio_image ratio_image_2x1">
<img src="http://lorempixel.com/500/500/" alt="">
</div>
<div class="ratio_image ratio_image_2x2">
<img src="http://lorempixel.com/500/500/" alt="">
</div>
.ratio_image {
width: 300px;
height: 300px;
float: left;
margin: 20px;
position: relative;
overflow: hidden;
}
.ratio_image:before {
width: 100%;
display: block;
content: "";
}
.ratio_image img {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
}
.ratio_image_2x1 {
width: 600px;
}
.ratio_image_1x2,
.ratio_image_2x2 {
height: 600px;
}
.ratio_image img {
width: 100%;
}
.ratio_image_1x1:before {
padding-top: 100%; /* (300 / 300) * 100%; */
}
.ratio_image_2x1:before {
padding-top: 200%; /* (600 / 300) * 100%; */
}
.ratio_image_1x2:before {
padding-top: 50%; /* (300 / 600) * 100%; */
}
.ratio_image_2x2:before {
padding-top: 100%; /* (600 / 600) * 100%; */
}
;(function ( $, window, document ) {
"use strict";
var viewport = 0,
wheight = $(window).height(),
scrollTop;
$.fn.viewport = function ( options ) {
options = $.extend( {}, $.fn.viewport.options, options );
$.fn.viewport.options.items = this;
if (!$.fn.viewport.options.elements.length)
{
$.fn.viewport.calculate();
}
if ($.fn.viewport.options.elements.length)
{
$.fn.viewport.animate();
}
$(window).scroll(function(){
$.fn.viewport.animate();
});
$(window).resize(function(){
$.fn.viewport.calculate();
});
};
$.fn.viewport.options = {
items: {},
elements: {}
};
$.fn.viewport.calculate = function() {
$.fn.viewport.options.elements = $.fn.viewport.options.items.map(function(){
if ($(this).length) {
return $(this);
}
});
}
$.fn.viewport.animate = function() {
scrollTop = $(window).scrollTop();
$.fn.viewport.options.elements.map(function(){
viewport = scrollTop + wheight;
if ($(this).offset().top <= viewport && !$(this).hasClass('active'))
{
$(this).addClass('active');
}
});
}
})( jQuery, window, document );
$('.fade-in').viewport();
<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>
<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>
<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>
<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>
.fade-in {
opacity: 0;
transform: scale(0) rotate(-40deg);
transition: opacity 0.7s, transform 0.5s;
}
.fade-in.active {
opacity: 1;
transform: scale(1) rotate(0deg);
}
<a class="b"><span class="b__i">Lorem ipsum</span></a>
<a class="b"><span class="b__i">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
<a class="b"><span class="b__i">Lorem ipsum dolor sit amet</span></a>
.b {
max-width: 200px;
height: 50px;
padding: 0 20px;
font-size: 0;
line-height: 50px;
text-decoration: none;
display: inline-block;
vertical-align: top;
}
.b__i {
font-size: 13px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
{compress
mode = 'css'
type = 'inline'
file = '/css/compress.css' // если не указать файл то запишет в папку кеша, путь к ней в плагине
media = 'all'
source = [
[ file => 'http://fonts.googleapis.com/css?family=Titillium+Web:300|Roboto:400,300,700,500&subset=latin,cyrillic' ],
[ file => '/css/cart.css', allow => '/cart' ],
[ file => '/css/main.css', disallow => '/cart' ],
[ file => '/css/modal.css' ]
]
}
{compress
attr = 'data-no-instant async'
mode = 'js'
type = 'include'
media = 'all'
file = '/js/compress.js'
source = [
[ 'file' => '/js/instantclick.min.js' ],
[ 'file' => '/js/jquery.js' ],
[ 'file' => '/js/modal.js' ],
[ 'file' => '/js/cart.js' ],
[ 'file' => '/js/mask.js' ],
[ 'file' => '/js/app.js' ]
]
}