alexvas123

// // Apparently doesn't work on smartphones with Chrome.

// HTML

<section id="about" class="s-about bg-light">
			<div class="section-header">
				<h2>Обо мне</h2>
				<div class="s-descr-wrap">
					<h6>Познакомимся ближе</h6>
				</div>

alexvas123

// HTML

<div class="toggle-mnu">
	<div class="sandwich">
		<div class="sw-topper"></div>
		<div class="sw-bottom"></div>
		<div class="sw-footer"></div>
	</div>
</div>
<nav class="top-mnu animated fadeInUp">

alexvas123

// Apparently doesn't work on smartphones with Chrome.

$(window).scroll(function (event) {
			var y = $(this).scrollTop();
			if (y >= 500) {
				$('.class').addClass('animated fadeInDown');
			}
		});
		
// Needs Animate.css

alexvas123

// HTML

<article class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Текст</label>
<div class="tab-content">
<div class="tab-content-text">
<div class="tab-text">
<p>Главные героини сериала Absolutely Fabulous (&ldquo;Абсолютно невероятно&rdquo;) &#8211; две подруги, которые отказываются стареть. Они курят, пьют, употребляют наркотики &#8211; морально разлагаются всеми возможными способами, как в молодости.</p>

alexvas123

// HTML

<div class="actors">
<div class="face">
<img src="img/abfab_lumley300.jpg" alt="Joanna Lumley">
</div>
<div class="flag">
<h6>Джоанна<br>Ламли</h6>
<img src="img/ukflaground.svg" alt="British flag">
</div>

alexvas123

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600">
<clipPath id="t">
	<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
</clipPath>
<path d="M0,0 v30 h60 v-30 z" fill="#00247d"/>
<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#cf142b" stroke-width="4"/>
<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
<path d="M30,0 v30 M0,15 h60" stroke="#cf142b" stroke-width="6"/>
</svg>

alexvas123

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><defs><clipPath id="a"><circle cx="330" cy="502.362" r="100" fill="#00247D" stroke-linecap="round" stroke-linejoin="round"/></clipPath></defs><g transform="translate(-180 -382.362)"><circle cx="280" cy="482.362" r="100" fill="#00247D"/><g fill="#cf142b" clip-path="url(#a)" transform="translate(-50 -20)"><path d="M320 382.362h20v240h-20z"/><path d="M407.782 410.438l14.142 14.142L252.22 594.286l-14.144-14.142z"/><path d="M450 492.362v20H210v-20z"/><path d="M421.924 580.144l-14.142 14.142L238.076 424.58l14.143-14.142z"/></g></g></svg>

alexvas123

<svg xmlns="http://www.w3.org/2000/svg" width="1170" height="570" viewBox="0 0 1170 570"><defs><clipPath id="a"><path fill="#464646" stroke="#333" d="M15.714 8.572h1170v570h-1170z" stroke-linecap="round" stroke-linejoin="round"/></clipPath></defs><g transform="translate(-15.714 -8.572)" clip-path="url(#a)"><path stroke="#222" stroke-width="120" d="M0 0l1200 600m0-600L0 600"/><path stroke="#111" stroke-width="80" d="M0 0l1200 600m0-600L0 600" clip-path="url(#t)"/><path stroke="#222" stroke-width="200" d="M600 0v600M0 300h1200"/><path stroke="#111" stroke-width="120" d="M600 0v600M0 300h1200"/></g></svg>

alexvas123

// HTML

<div class="cube-wrapper">
<div class="perspective">
<div class="cube">
<div class="front">
<img src="img/abfab400.jpg" alt="Absolutely Fabulous">
</div>
<div class="back">
<img src="img/blackbooks400.jpg" alt="Black Books">

alexvas123

// RESIZE - RELOAD
	
	window.addEventListener('resize', function(event) {
		clearTimeout(resizeTimeout);
		var resizeTimeout = setTimeout(function(){
		window.location.reload();
		}, 1500);
		});