допилена информация и картинки

This commit is contained in:
Tolstoevsky 2019-08-22 11:15:45 +03:00
parent d5889dcceb
commit 804aa25685
11 changed files with 218 additions and 1719 deletions

View file

@ -1,233 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Neat &mdash; Free Website Template, Free HTML5 Template by freehtml5.co</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by freehtml5.co" />
<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="freehtml5.co" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FreeHTML5.co
Website: http://freehtml5.co/
Email: info@freehtml5.co
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html">Neat</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li class="has-dropdown">
<a href="blog.html">Blog</a>
<ul class="dropdown">
<li><a href="#">Web Design</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">API</a></li>
</ul>
</li>
<li class="active"><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluids">
<div class="row">
<div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
<div class="slider-text-inner text-center">
<h1>About</h1>
<h2>Free html5 templates Made by <a href="http://freehtml5.co/" target="_blank">freehtml5.co</a></h2>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<div id="fh5co-about">
<div class="row animate-box">
<div class="col-md-6 col-md-offset-3 text-center heading-section">
<h3>Our History</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1 text-center animate-box">
<p><img src="images/cover_bg_3.jpg" alt="Free HTML5 Bootstrap Template" class="img-responsive"></p>
</div>
<div class="col-md-8 col-md-offset-2 text-center animate-box">
<div class="about-desc">
<h3>Hi! I'm Kathy</h3>
<p>I am a French Designer. Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit. Eos cumque dicta adipisci architecto culpa amet. Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
<p>
<ul class="fh5co-social-icons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
<li><a href="#"><i class="icon-dribbble"></i></a></li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div><!-- END container-wrap -->
<div class="container-wrap">
<footer id="fh5co-footer" role="contentinfo">
<div class="row">
<div class="col-md-3 fh5co-widget">
<h4>About Neat</h4>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit. Eos cumque dicta adipisci architecto culpa amet.</p>
</div>
<div class="col-md-3 col-md-push-1">
<h4>Latest Posts</h4>
<ul class="fh5co-footer-links">
<li><a href="#">Amazing Templates</a></li>
<li><a href="#">100+ Free Download Templates</a></li>
<li><a href="#">Neat is now available</a></li>
<li><a href="#">Download 1000+ icons</a></li>
<li><a href="#">Big Deal for this month of March, Join Us here</a></li>
</ul>
</div>
<div class="col-md-3 col-md-push-1">
<h4>Links</h4>
<ul class="fh5co-footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
<div class="col-md-3">
<h4>Contact Information</h4>
<ul class="fh5co-footer-links">
<li>198 West 21th Street, <br> Suite 721 New York NY 10016</li>
<li><a href="tel://1234567920">+ 1235 2355 98</a></li>
<li><a href="mailto:info@yoursite.com">info@yoursite.com</a></li>
<li><a href="http://gettemplates.co">gettemplates.co</a></li>
</ul>
</div>
</div>
<div class="row copyright">
<div class="col-md-12 text-center">
<p>
<small class="block">&copy; 2016 Free HTML5. All Rights Reserved.</small>
<small class="block">Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> Demo Images: <a href="http://unsplash.co/" target="_blank">Unsplash</a></small>
</p>
<p>
<ul class="fh5co-social-icons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
<li><a href="#"><i class="icon-dribbble"></i></a></li>
</ul>
</p>
</div>
</div>
</footer>
</div><!-- END container-wrap -->
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>

299
blog.html
View file

@ -1,299 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Neat &mdash; Free Website Template, Free HTML5 Template by freehtml5.co</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by freehtml5.co" />
<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="freehtml5.co" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FreeHTML5.co
Website: http://freehtml5.co/
Email: info@freehtml5.co
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html">Neat</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li class="has-dropdown active">
<a href="blog.html">Blog</a>
<ul class="dropdown">
<li><a href="#">Web Design</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">API</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluids">
<div class="row">
<div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
<div class="slider-text-inner text-center">
<h1>Blog</h1>
<h2>Free html5 templates Made by <a href="http://freehtml5.co/" target="_blank">freehtml5.co</a></h2>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<div id="fh5co-blog">
<div class="row">
<div class="col-md-4">
<div class="fh5co-blog animate-box">
<a href="#" class="blog-bg" style="background-image: url(images/blog-1.jpg);"></a>
<div class="blog-text">
<span class="posted_on">Feb. 15th 2016</span>
<h3><a href="#">Photoshoot On The Street</a></h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<ul class="stuff">
<li><i class="icon-heart3"></i>249</li>
<li><i class="icon-eye2"></i>1,308</li>
<li><a href="#">Read More<i class="icon-arrow-right22"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fh5co-blog animate-box">
<a href="#" class="blog-bg" style="background-image: url(images/blog-2.jpg);"></a>
<div class="blog-text">
<span class="posted_on">Feb. 15th 2016</span>
<h3><a href="#">Surfing at Philippines</a></h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<ul class="stuff">
<li><i class="icon-heart3"></i>249</li>
<li><i class="icon-eye2"></i>1,308</li>
<li><a href="#">Read More<i class="icon-arrow-right22"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fh5co-blog animate-box">
<a href="#" class="blog-bg" style="background-image: url(images/blog-3.jpg);"></a>
<div class="blog-text">
<span class="posted_on">Feb. 15th 2016</span>
<h3><a href="#">Focus On Uderwater</a></h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<ul class="stuff">
<li><i class="icon-heart3"></i>249</li>
<li><i class="icon-eye2"></i>1,308</li>
<li><a href="#">Read More<i class="icon-arrow-right22"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fh5co-blog animate-box">
<a href="#" class="blog-bg" style="background-image: url(images/blog-1.jpg);"></a>
<div class="blog-text">
<span class="posted_on">Feb. 15th 2016</span>
<h3><a href="#">Photoshoot On The Street</a></h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<ul class="stuff">
<li><i class="icon-heart3"></i>249</li>
<li><i class="icon-eye2"></i>1,308</li>
<li><a href="#">Read More<i class="icon-arrow-right22"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fh5co-blog animate-box">
<a href="#" class="blog-bg" style="background-image: url(images/blog-2.jpg);"></a>
<div class="blog-text">
<span class="posted_on">Feb. 15th 2016</span>
<h3><a href="#">Surfing at Philippines</a></h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<ul class="stuff">
<li><i class="icon-heart3"></i>249</li>
<li><i class="icon-eye2"></i>1,308</li>
<li><a href="#">Read More<i class="icon-arrow-right22"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="fh5co-blog animate-box">
<a href="#" class="blog-bg" style="background-image: url(images/blog-3.jpg);"></a>
<div class="blog-text">
<span class="posted_on">Feb. 15th 2016</span>
<h3><a href="#">Focus On Uderwater</a></h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<ul class="stuff">
<li><i class="icon-heart3"></i>249</li>
<li><i class="icon-eye2"></i>1,308</li>
<li><a href="#">Read More<i class="icon-arrow-right22"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!-- END container-wrap -->
<div class="container-wrap">
<footer id="fh5co-footer" role="contentinfo">
<div class="row">
<div class="col-md-3 fh5co-widget">
<h4>About Neat</h4>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit. Eos cumque dicta adipisci architecto culpa amet.</p>
</div>
<div class="col-md-3 col-md-push-1">
<h4>Latest Posts</h4>
<ul class="fh5co-footer-links">
<li><a href="#">Amazing Templates</a></li>
<li><a href="#">100+ Free Download Templates</a></li>
<li><a href="#">Neat is now available</a></li>
<li><a href="#">Download 1000+ icons</a></li>
<li><a href="#">Big Deal for this month of March, Join Us here</a></li>
</ul>
</div>
<div class="col-md-3 col-md-push-1">
<h4>Links</h4>
<ul class="fh5co-footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
<div class="col-md-3">
<h4>Contact Information</h4>
<ul class="fh5co-footer-links">
<li>198 West 21th Street, <br> Suite 721 New York NY 10016</li>
<li><a href="tel://1234567920">+ 1235 2355 98</a></li>
<li><a href="mailto:info@yoursite.com">info@yoursite.com</a></li>
<li><a href="http://gettemplates.co">gettemplates.co</a></li>
</ul>
</div>
</div>
<div class="row copyright">
<div class="col-md-12 text-center">
<p>
<small class="block">&copy; 2016 Free HTML5. All Rights Reserved.</small>
<small class="block">Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> Demo Images: <a href="http://unsplash.co/" target="_blank">Unsplash</a></small>
</p>
<p>
<ul class="fh5co-social-icons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
<li><a href="#"><i class="icon-dribbble"></i></a></li>
</ul>
</p>
</div>
</div>
</footer>
</div><!-- END container-wrap -->
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>

View file

@ -1,248 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Neat &mdash; Free Website Template, Free HTML5 Template by freehtml5.co</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by freehtml5.co" />
<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="freehtml5.co" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FreeHTML5.co
Website: http://freehtml5.co/
Email: info@freehtml5.co
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html">Neat</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li class="has-dropdown">
<a href="blog.html">Blog</a>
<ul class="dropdown">
<li><a href="#">Web Design</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">API</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluids">
<div class="row">
<div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
<div class="slider-text-inner text-center">
<h1>Contact</h1>
<h2>Free html5 templates Made by <a href="http://freehtml5.co/" target="_blank">freehtml5.co</a></h2>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<div id="fh5co-contact">
<div class="row animate-box">
<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
<h2>Contact us</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-push-1 animate-box">
<h3>Our Address</h3>
<ul class="contact-info">
<li><i class="icon-location4"></i>198 West 21th Street, Suite 721 New York NY 10016</li>
<li><i class="icon-phone3"></i>+ 1235 2355 98</li>
<li><i class="icon-location3"></i><a href="#">info@yoursite.com</a></li>
<li><i class="icon-globe2"></i><a href="#">www.yoursite.com</a></li>
</ul>
</div>
<div class="col-md-7 col-md-push-1 animate-box">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea name="" class="form-control" id="" cols="30" rows="7" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="submit" value="Send Message" class="btn btn-primary btn-modify">
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- END container-wrap -->
<div class="container-wrap">
<footer id="fh5co-footer" role="contentinfo">
<div class="row">
<div class="col-md-3 fh5co-widget">
<h4>About Neat</h4>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit. Eos cumque dicta adipisci architecto culpa amet.</p>
</div>
<div class="col-md-3 col-md-push-1">
<h4>Latest Posts</h4>
<ul class="fh5co-footer-links">
<li><a href="#">Amazing Templates</a></li>
<li><a href="#">100+ Free Download Templates</a></li>
<li><a href="#">Neat is now available</a></li>
<li><a href="#">Download 1000+ icons</a></li>
<li><a href="#">Big Deal for this month of March, Join Us here</a></li>
</ul>
</div>
<div class="col-md-3 col-md-push-1">
<h4>Links</h4>
<ul class="fh5co-footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
<div class="col-md-3">
<h4>Contact Information</h4>
<ul class="fh5co-footer-links">
<li>198 West 21th Street, <br> Suite 721 New York NY 10016</li>
<li><a href="tel://1234567920">+ 1235 2355 98</a></li>
<li><a href="mailto:info@yoursite.com">info@yoursite.com</a></li>
<li><a href="http://gettemplates.co">gettemplates.co</a></li>
</ul>
</div>
</div>
<div class="row copyright">
<div class="col-md-12 text-center">
<p>
<small class="block">&copy; 2016 Free HTML5. All Rights Reserved.</small>
<small class="block">Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> Demo Images: <a href="http://unsplash.co/" target="_blank">Unsplash</a></small>
</p>
<p>
<ul class="fh5co-social-icons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
<li><a href="#"><i class="icon-dribbble"></i></a></li>
</ul>
</p>
</div>
</div>
</footer>
</div><!-- END container-wrap -->
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>

View file

@ -1,221 +0,0 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Сервисы мгновенных сообщений</title>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/blue.css">
</head>
<body>
<div class="mainContainer clearflix" >
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a class="current" href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<div class="content">
<h1>Сервисы мгновенных сообщений</h1>
<h2>Альтернативы WhatsApp, Viber, Skype</h2>
<h3 id="xmpp">XMPP (он же Jabber)</h3>
<img src="images/conversations.jpg" class="margin floatRight" width="520">
<p>
Широко используемый свободный и открытый стандарт интернет-сообщений.
Весьма прост в использовании — регистрируем аккаунт, устанавливаем приложение.
</p>
<p>
В силу распределённости протокола, количество мест, где можно зарегистрироваться,
огромно. Независимо от того, на каком сервере вы регистрируетесь -
все пользователи доступны для вас. Если выбор среди тысяч чатов и десятков
приложений для вас сложен — используйте указанный ниже Quicksy - он тоже часть этой сети).
</p>
<h4>Где зарегистрироваться?</h4>
<ul>
<li><a href="https://chinwag.im">chinwag.im</a></li>
<li><a href="https://xmpp.jp">xmpp.jp</a></li>
<li><a href="https://jabber.at">jabber.at</a></li>
<li><a href="https://404.city">404.city</a></li>
<li><a href="https://jabber.ru">jabber.ru</a></li>
</ul>
<img src="images/kaidan.png" class="margin floatRight" width="520">
<h4>Приложения</h4>
<ul>
<li>
<h5>Android</h5>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=eu.siacs.conversations">Conversations</a> (Платный)</li>
<li><a href="https://f-droid.org/en/packages/eu.siacs.conversations/">Conversations</a> (Бесплатный на F-Droid)</li>
<li><a href="https://play.google.com/store/apps/details?id=eu.siacs.conversations.legacy">Conversations Legacy</a></li>
</ul>
</li>
<li>
<h5>iOS</h5>
<ul>
<li><a href="https://itunes.apple.com/app/chatsecure/id464200063">Chat Secure</a></li>
<li><a href="https://itunes.apple.com/us/app/monal-free-xmpp-chat/id317711500">Monal</a></li>
<li><a href="https://apps.apple.com/us/app/jabme-your-free-easy-xmpp-messenger/id1070168611">JabMe</a></li>
</ul>
</li>
<li>
<h5>ПК (все операционные системы)</h5>
<ul>
<li><a href="https://pidgin.im/download/">Pidgin</a></li>
<li><a href="https://gajim.org/downloads.php/">Gajim</a></li>
<li><a href="https://psi-im.org/download/">Psi</a></li>
</ul>
</li>
<li>
<h5>Windows</h5>
<ul>
<li><a href="http://welcome.qip.ru/im">QIP</a></li>
<li><a href="http://www.miranda-im.org/download/">Miranda</a></li>
</ul>
</li>
<li>
<img src="images/movim.png" class="margin floatRight" width="520">
<h5>Mac</h5>
<ul>
<li><a href="https://apps.apple.com/us/app/beagleim-by-tigase-inc/id1445349494">BeagleIM</a></li>
<li><a href="https://apps.apple.com/us/app/monal-xmpp-chat/id1060957067">Monal</a></li>
</ul>
</li>
<li>
<h5>Linux</h5>
<ul>
<li><a href="https://dino.im/#download">Dino</a></li>
<li><a href="https://www.kaidan.im/download/">Kaidan</a></li>
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="quicksy">Quicksy</h3>
<img src="images/quicksy.png" class="margin floatRight">
<p>
Очень простой в использовании чатик. Регистрация по номеру телефона.
</p>
<p>
Базируется на стандарте XMPP, так что вы сможете общаться со всеми пользователями XMPP (Jabber).
</p>
<h4>Приложения</h4>
<ul>
<li>
<h5>Android</h5>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=im.quicksy.client">Quicksy</a></li>
</ul>
</li>
</ul>
<hr style="clear: right">
<img src="images/signal.jpg" class="margin floatRight" width="520">
<h3 id="signal">Signal</h3>
<p>
Популярное приложение для обмена сообщениями, голосовых- и видеозвонков, для регистрации нужен номер телефона.
</p>
<p>
Финансируется за счёт пожертвований и грантов и не имеет доступа к
данным пользователей. (Но помните, что для активации нужен телефон).
</p>
<h4>Приложения</h4>
<ul>
<li>
<h5>Android</h5>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms">Signal</a></li>
</ul>
</li>
<li>
<h5>iOS</h5>
<ul>
<li><a href="https://itunes.apple.com/app/signal-private-messenger/id874139669">Signal</a></li>
</ul>
</li>
<li>
<h5>ПК (все операционные системы)</h5>
<ul>
<li><a href="https://www.signal.org/download/">Signal</a></li>
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="jami">Jami (ранее Ring)</h3>
<p>
Свободная открытая альтернатива Skype, с голосовыми звонками, видеозвонками и
сообщениями. Есть приложения для Android, iPhone, Windows, Mac и Linux.
</p>
<p>
Исходный код открыт, приложение создано с упором на конфиденциальность пользователей,
звонки совершаются напрямую между устройствами, минуя сторонние серверы. Каждому
пользователю выдаётся уникальный код, которым можно поделиться с другими участниками
(аналог номера аськи/телефона...)
</p>
<h4>Приложения</h4>
<ul>
<li>
<h5>Android</h5>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=cx.ring">Jami</a></li>
</ul>
</li>
<li>
<h5>iOS</h5>
<ul>
<li><a href="https://itunes.apple.com/app/ring-a-gnu-package/id1306951055">Jami</a></li>
</ul>
</li>
<li>
<h5>ПК (все операционные системы)</h5>
<ul>
<li><a href="https://jami.net/download/">Jami</a></li>
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="jitsi">Jitsi Meet</h3>
<p>
Свободное открытое приложение для чатов и видеозвонков, разрабатываемое командой добровольцев.
Просто в использовании — регистрация не требуется, нужно придумать название комнаты чата и
послать полученную ссылку всем участникам. Можно использовать вебсайт либо мобильные приложения.
</p>
<h4>Приложения</h4>
<ul>
<li>
<h5>Android</h5>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=org.jitsi.meet">Jitsi</a></li>
</ul>
</li>
<li>
<h5>iOS</h5>
<ul>
<li><a href="https://itunes.apple.com/us/app/jitsi-meet/id1165103905">Jitsi</a></li>
</ul>
</li>
<li>
<h5>Web</h5>
<ul>
<li><a href="https://meet.jit.si/">meet.jit.si</a></li>
</ul>
</li>
</ul>
</div>
</div>
<footer class="footer">
<a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
<a href="https://switching.social">Switching.Social</a>. Дополнения принимаются <a href="https://git.macaw.me/Tolstoevsky/switching">здесь</a>.
</footer>
</body>
</html>

BIN
images/bigbrother.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

BIN
images/corporation.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -76,7 +76,7 @@
<div class="row"> <div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text"> <div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
<div class="slider-text-inner"> <div class="slider-text-inner">
<h1><font color="yellow"><b>Огорчи силовика <br> — удаляйся из ВК!</b></font></h1> <h1><font color="white"><b>Огорчи силовика <br> — удаляйся из ВК!</b></font></h1>
<h2><font color="white"><b>Привычные централизованные соцсети не защитят вас от произвола и слежки</b></font></h2> <h2><font color="white"><b>Привычные централизованные соцсети не защитят вас от произвола и слежки</b></font></h2>
<p><a class="btn btn-primary btn-demo" href="https://phreedom.tk/about#new_user"></i>Сбежать</a> <p><a class="btn btn-primary btn-demo" href="https://phreedom.tk/about#new_user"></i>Сбежать</a>
<a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p> <a class="btn btn-primary btn-learn" href="info.html">Узнать подробности</a></p>
@ -100,28 +100,29 @@
</div> </div>
</div> </div>
</li> </li>
<li style="background-image: url(images/img_bg_3.jpg);"> <li style="background-image: url(images/corporation.jpg);">
<div class="overlay-gradient"></div> <div class="overlay-gradient"></div>
<div class="container-fluids"> <div class="container-fluids">
<div class="row"> <div class="row">
<div class="col-md-6 col-md-offset-3 slider-text"> <div class="col-md-6 col-md-offset-3 slider-text">
<div class="slider-text-inner text-center"> <div class="slider-text-inner text-center">
<h1>Что делать с корпоративной слежкой?</h1> <h1>Что делать с корпоративной слежкой?</h1>
<h2>Корпорации Mail.ru (ВК, OK, Mail), Facebook (Instagram, WhatsApp) и Google следят за вами</h2> <h2>Корпорации Mail.ru (ВК, OK, Mail), Facebook (Instagram, WhatsApp)
и Google следят за вами</h2>
<p><a class="btn btn-primary btn-demo" href="https://va11hal.la/about#new_user"></i>Спрятаться</a> <a class="btn btn-primary btn-learn" href="info.html">Узнать больше</a></p> <p><a class="btn btn-primary btn-demo" href="https://va11hal.la/about#new_user"></i>Спрятаться</a> <a class="btn btn-primary btn-learn" href="info.html">Узнать больше</a></p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<li style="background-image: url(images/img_bg_4.jpg);"> <li style="background-image: url(images/bigbrother.jpg);">
<div class="overlay-gradient"></div> <div class="overlay-gradient"></div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text"> <div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
<div class="slider-text-inner"> <div class="slider-text-inner">
<h1>Стать невидимкой, но только для Большого Брата</h1> <h1><font color="white"><b>Стать невидимкой, но только для Большого Брата</b></font></h1>
<h2>Общайтесь с друзьями, не подвергаясь цензуре и слежке!</h2> <h2><font color="white"><b>Общайтесь с друзьями, без цензуры и слежки!</b></font></h2>
<p><a class="btn btn-primary btn-demo" href="https://lor.sh/about#new_user"></i>Приступить</a> <a class="btn btn-primary btn-learn" href="info.html">Узнать больше</a></p> <p><a class="btn btn-primary btn-demo" href="https://lor.sh/about#new_user"></i>Приступить</a> <a class="btn btn-primary btn-learn" href="info.html">Узнать больше</a></p>
</div> </div>
</div> </div>

322
info.html
View file

@ -1,125 +1,215 @@
<!DOCTYPE html> <!DOCTYPE HTML>
<html lang="ru"> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="utf-8">
<title>Альтернативы</title> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fediverse или как стать Неуловимым Джо</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/reset.css"> <!-- Animate.css -->
<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="style/blue.css"> <!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
</head> <!-- Magnific Popup -->
<body> <link rel="stylesheet" href="css/magnific-popup.css">
<div class="mainContainer">
<nav id="header"> <!-- Flexslider -->
<a href="index.html"><div>Главная</div></a> <link rel="stylesheet" href="css/flexslider.css">
<a href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a> <!-- Theme style -->
<a href="mail.html"><div>Почтовые сервисы</div></a> <link rel="stylesheet" href="css/style.css">
<a href="search.html"><div>Поисковые сервисы</div></a>
<a class="current" href="info.html"><div>Зачем?</div></a> <!-- Modernizr JS -->
</nav> <script src="js/modernizr-2.6.2.min.js"></script>
<div class="content"> <!-- FOR IE9 below -->
<h1>Fediverse или как стать Неуловимым Джо</h1> <!--[if lt IE 9]>
<h3>Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? Почему они никогда не станут лучше? И - главное - что со всем этим делать?</h3> <script src="js/respond.min.js"></script>
<img src="images/koshka.jpg" class="margin floatLeft" width="520"/> <![endif]-->
<p>
Знакомая картинка? Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное </head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html">Главная</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="social.html">Социальные сети</a></li>
<li><a href="mail.html">Почтовые сервисы</a></li>
<li><a href="im.html">Мессенджеры</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/koshka.jpg);">
<div class="overlay-gradient"></div>
<div class="container-fluids">
<div class="row">
<div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
<div class="slider-text-inner text-center">
<h1><b>Знакомая картинка?</b></h1>
<h2><b>Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные
картинки, хочется делиться своим творчеством и наслаждаться чужим, но без страха? Забудьте. картинки, хочется делиться своим творчеством и наслаждаться чужим, но без страха?</b> </h2>
Хочется открыто высказывать своё мнение, и не попадать под цензуру администрации сети, просто </div>
за непопулярную там точку зрения? А может, вам ещё и не нравится быть товаром, да не штучным, </div>
а мелочью в крупнооптовой партии? А может, вы ещё и о тайне личной переписки мечтаете? <b>Забудьте</b>. </div>
</p> </div>
<p> </li>
В столь популярных нынче централизованных коммерческих сетях как Вконтакте, Facebook, Instagram </ul>
(собственность Facebook), YouTube, Twitter это невозможно по определению. В мессенджерах, таких </div>
как WhatsApp, Viber, Telegram, это невозможно по определению. Просто подумайте о том, сколько </aside>
труда и денег вложено в эти продукты корпорациями, и почему столь дорогостоящая вещь для вас <div id="fh5co-about">
"бесплатна". Чем расплачиваются с программистами, администраторами, контентщиками, техподдержкой? <div class="row animate-box">
Спойлер — Вами. Вы — товар. Смиритесь. <div class="col-md-8 col-md-offset-2 heading-section">
</p> <p>
<p> Забудьте. Хочется открыто высказывать своё мнение, и не попадать под цензуру администрации сети, просто
Но, "даже, если вас сожрал лев, у вас есть как минимум два выхода". Так и здесь — за непопулярную там точку зрения? А может, вам ещё и не нравится быть товаром, да не штучным,
<b>просто бегите оттуда</b>. Нет, никто не предлагает отключить соцсети, никто не предлагает а мелочью в крупнооптовой партии? А может, вы ещё и о тайне личной переписки мечтаете? <b>Забудьте</b>.
отказаться от онлайн-общения. Вспомните — Интернет задумывался как объединение равных, равных в </p>
правах, равных полномочиях. Вы не обязаны отдавать свою переписку в "личных" сообщениях ВК на <p>
перлюстрацию любопытным админам. Вы не обязаны фотографироваться с паспортом на фоне странички, В столь популярных нынче централизованных коммерческих сетях как Вконтакте (собственность Mail.ru Group
вы не обязаны отдавать свои личные данные и результаты своего творчества коммерческим структурам. Усманова) , Facebook, Instagram
<b>В этом нет никакой нужды</b>. Есть место (вернее будет назвать его "пространством"), которое (собственность Facebook), YouTube, Twitter это невозможно по определению. В мессенджерах, таких
люди создают для себя. Там не страшна цензура государств и корпораций, там не нужно продавать как WhatsApp, Viber, Telegram, это невозможно по определению. Просто подумайте о том, сколько
свою личность. И многие уже там. Имя этой вселенной — Fediverse (от англ. Federation — труда и денег вложено в эти продукты корпорациями, и почему столь дорогостоящая вещь для вас
федерация, и Universe - Вселенная). И мы ждём вас там с распростёрыми объятиями. Всех без исключения. "бесплатна". Чем расплачиваются с программистами, администраторами, контентщиками, техподдержкой?
</p> Спойлер — Вами. Вы — товар. Смиритесь.
<p><b>Интересно?</b></p> </p>
<p> <p>
Тогда позвольте мне рассказать, что мы готовы предложить любому пользователю — и творцу, и Но, "даже, если вас сожрал лев, у вас есть как минимум два выхода". Так и здесь —
потребителю. У каждого есть свой предпочтительный формат общения — кто-то любит потоки <b>просто бегите оттуда</b>. Нет, никто не предлагает отключить соцсети, никто не предлагает
молниеносных сообщений Твиттера, кто-то сложный формат взаимодействия ВК и Facebook, кто-то отказаться от онлайн-общения. Вспомните — Интернет задумывался как объединение равных, равных в
предпочитает видео или фото... Теперь представьте, что из Твиттера вы можете правах, равных полномочиях. Вы не обязаны отдавать свою переписку в "личных" сообщениях ВК на
комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие перлюстрацию любопытным админам. Вы не обязаны фотографироваться с паспортом на фоне странички,
в удобном для них формате, оттуда вам отвечают, поддерживая полноценное общение, вы не обязаны отдавать свои личные данные и результаты своего творчества коммерческим структурам.
и никуда не надо перелогиниваться. <b>Удобно? У нас так можно</b>. </p>
</p> <p>
<p> <b>В этом нет никакой нужды</b>. Есть место (вернее будет назвать его "пространством"), которое
А представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения люди создают для себя. Там не страшна цензура государств и корпораций, там не нужно продавать
удаляют, аккаунт блокируют. И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае свою личность. И многие уже там. Имя этой вселенной — Fediverse (от англ. Federation —
через долгое унижение в чате техподдержки, фотографии паспорта и прочую дурь. Хотелось бы вам в федерация, и Universe - Вселенная). И мы ждём вас там с распростёрыми объятиями. Всех без исключения.
этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение с теми же друзьями, </p>
обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? <b>У нас так можно</b>. <h4>Интересно?</h4>
И даже больше — никто не мешает самому стать полновластным админом <p>
(при наличии минимальной технической подготовки). Тогда позвольте рассказать, что мы готовы предложить любому пользователю — и творцу, и
</p> потребителю. У каждого есть свой предпочтительный формат общения — кто-то любит потоки
<p><b>Интересно?</b></p> молниеносных сообщений Твиттера, кто-то сложный формат взаимодействия ВК и Facebook, кто-то
<p> предпочитает видео или фото... Теперь представьте, что из Твиттера вы можете
Теперь, думаю, стоит рассказать, из чего состоит Fediverse. А состоит она из нескольких сетей, комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие
кажда из которых состоит из кучи независимых, но постоянно взаимодействующих серверов. в удобном для них формате, оттуда вам отвечают, поддерживая полноценное общение,
Технические подробности будут в другой статье, здесь дадим небольшой обзор того, чем можно и никуда не надо перелогиниваться. <b>Удобно? У нас так можно</b>.
заменить популярные, но ужасающие по своей сути, сервисы. </p>
</p> <p>
<ul> А представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения
<li> удаляют, аккаунт блокируют. И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае
Twitter — местный аналог (ну, пожалуй несколько более продвинутый) его зовётся <a href="social.html#mastodon">Mastodon</a> через долгое унижение в чате техподдержки, фотографии паспорта и прочую дурь. Хотелось бы вам в
Суть та же — обмен короткими постами (как правило, в пределах 500 символов), статусами, этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение с теми же друзьями,
и комментариями. Наиболее популярная из всех, особенно среди мобильных пользователей. обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? <b>У нас так можно</b>.
</li> И даже больше — никто не мешает самому стать полновластным админом
<li> (при наличии минимальной технической подготовки).
Facebook/Вконтакте — здесь у нас <a href="social.html#frendica">Friendica</a>. </p>
Полноразмерная соцсеть с большими постами, развёрнутыми дискуссиями и возможностью сложной вёрстки.
</li>
<li>
Inastagram — ну а вместо него <a href="social.html#pixelfed">PixelFed</a>.
Главная приятность по сравнению с Insta заключается в том, что нет никакой нужды использовать
специальное приложение — все функции доступны из любого браузера, что мобильного, что десктопного.
</li>
<li>
И, наконец, YouTube заменяется <a href="social.html#peertube">PeerTube</a> — видео здесь,
как и сообщения перечисленных выше сетей, расходятся по всему Федивёрсу и доступны (при желании автора) всем.
</li>
</ul>
<p> <h4>Интересно?</h4>
Ну и коль скоро мы затронули тему мессенджеров, стоит кратко упомянуть достойные альтернативы перечисленным в <p>
начале статьи корпоративным следилкам, радостно сотрудничающим со спецслужбами (или кто-то до сих пор верит, что Теперь, думаю, стоит рассказать, из чего состоит Fediverse. А состоит она из нескольких сетей,
коммерческая контора Telegram LLC будет тратить кучу ресурсов на защиту Васи от товарища майора?). Мессенджеры кажда из которых состоит из кучи независимых, но постоянно взаимодействующих серверов.
непосредственно в Fediverse не входят, но в большинстве своём (речь опять же идёт о рекомендованных) основаны на Технические подробности будут в другой статье, здесь дадим небольшой обзор того, чем можно
принципах федерации либо на peer-to-peer. <a href="im.html">вот здесь</a> вы можете подобрать себе подходящую заменить популярные, но ужасающие по своей сути, сервисы.
альтернативу. </p>
</p> <ul>
<li>
Twitter — местный аналог (ну, пожалуй несколько более продвинутый) его зовётся
<a href="social.html#mastodon">Mastodon</a>
Суть та же — обмен короткими постами (как правило, в пределах 500 символов), статусами,
и комментариями. Наиболее популярная из всех, особенно среди мобильных пользователей.
</li>
<li>
Facebook/Вконтакте — здесь у нас <a href="social.html#friendica">Friendica</a>.
Полноразмерная соцсеть с большими постами, развёрнутыми дискуссиями и возможностью сложной вёрстки.
</li>
<li>
Inastagram — ну а вместо него <a href="social.html#pixelfed">PixelFed</a>.
Главная приятность по сравнению с Insta заключается в том, что нет никакой нужды использовать
специальное приложение — все функции доступны из любого браузера, что мобильного, что десктопного.
</li>
<li>
И, наконец, YouTube заменяется <a href="social.html#peertube">PeerTube</a> — видео здесь,
как и сообщения перечисленных выше сетей, расходятся по всему Федивёрсу и доступны (при желании автора) всем.
</li>
</ul>
<p> <p>
Смело проходите по ссылкам выше, мы ждём вас в Fediverse. Новичкам тут всегда помогут, а несогласных не забанят. Ну и коль скоро мы затронули тему мессенджеров, стоит кратко упомянуть достойные альтернативы перечисленным в
Вливайтесь! начале статьи корпоративным следилкам, радостно сотрудничающим со спецслужбами (или кто-то до сих пор верит, что
</p> коммерческая контора Telegram LLC будет тратить кучу ресурсов на защиту Васи от товарища майора?). Мессенджеры
</div> непосредственно в Fediverse не входят, но в большинстве своём (речь опять же идёт о рекомендованных) основаны на
принципах федерации либо на peer-to-peer. <a href="im.html">вот здесь</a> вы можете подобрать себе подходящую
альтернативу.
</p>
</div> <p>
<footer class="footer"> Смело проходите по ссылкам выше, мы ждём вас в Fediverse. Новичкам тут всегда помогут, а несогласных не забанят.
<a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a> Вливайтесь!
Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста </p>
<a href="https://switching.social">Switching.Social</a>. Дополнения принимаются <a href="https://git.macaw.me/Tolstoevsky/switching">здесь</a>.
</footer>
</body>
</div>
</div>
</div>
<footer role="contentinfo">
<div class="row">
<a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
<a href="https://switching.social">Switching.Social</a>. Дополнения принимаются
<a href="https://git.macaw.me/Tolstoevsky/switching">здесь</a>.
</div>
</footer>
</div><!-- END container-wrap -->
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html> </html>

View file

@ -88,7 +88,7 @@
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h2>#вместотвиттера Mastodon</h2> <h2 id="mastodon">#вместотвиттера Mastodon</h2>
<span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей. <span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
Больше всего напоминает Твиттер, только с большим лимитом символов и более гибким интерфейсом. Больше всего напоминает Твиттер, только с большим лимитом символов и более гибким интерфейсом.
</span> </span>
@ -150,7 +150,7 @@
<div class="col-md-4"> <div class="col-md-4">
<h2>#вместоВК Friendica</h2> <h2 id="friendica">#вместоВК Friendica</h2>
<span> <span>
Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы
</span> </span>
@ -202,7 +202,7 @@
<div class="col-md-4"> <div class="col-md-4">
<h2>#вместоinstagram PixelFed</h2> <h2 id="pixelfed">#вместоinstagram PixelFed</h2>
<span> <span>
Открытая распределённая альтернатива Instagram — с фильтрами, комментариями, лайками, репостами и так далее, но без рекламы и слежки. Открытая распределённая альтернатива Instagram — с фильтрами, комментариями, лайками, репостами и так далее, но без рекламы и слежки.
</span> </span>
@ -244,7 +244,7 @@
<div class="col-md-4"> <div class="col-md-4">
<h2>#вместоyoutube PeerTube</h2> <h2 id="peertube">#вместоyoutube PeerTube</h2>
<span> <span>
PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google). PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google).
Это соцсеть, приспособленная для распространения видео, без рекламы и слежки. Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.

View file

@ -1,336 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Социальные сети</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html">Главная</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li><a href="index.html">Главная</a></li>
<li class="active"><a href="social.html">Соцсети</a></li>
<li><a href="mail.html">Почтовые сервисы</a></li>
<li><a href="im.html">Мессенджеры</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay-gradient"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
<div class="slider-text-inner text-center">
<h1>Распределённые социальные сети</h1>
<h2>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</h2>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<div id="fh5co-work">
<div class="row">
<div class="col-md-6">
<a href="images/mastodon.png" class="image-popup">
<img src="images/mastodon.png" alt="Мастодон — многоколоночный интерфейс, тёмная тема" class="img-responsive">
</a>
<a href="images/mastodon2.png" class="image-popup">
<img src="images/mastodon2.png" alt="Мастодон - одноколоночный интерфейс, светлая тема" class="img-responsive">
</a>
<a href="images/mastodon3.png" class="image-popup">
<img src="images/mastodon3.png" alt="Мастодон - настройки, светлая тема" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<h2>#вместотвиттера Mastodon</h2>
<span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
Больше всего напоминает Твиттер, только с большим лимитом символов и более гибким интерфейсом.
</span>
<p>
Ваша учётная запись в Мастодоне позволяет общаться с пользователями
других распределённых сетей — например Friendica (см. ниже), PixelFed
(взамен принадлежащего корпорации Facebook сервиса Instagram), PeerTube (аналог YouTube) и многих других.
Это объединение альтернативных соцсетей называется Fediverse (Федивёрс)
(от federation - федерация и universe - вселенная).
</p>
<p>
Вы можете зайти в Мастодон, зарегистрировавшись на одном из сайтов, указанных ниже,
можете использовать эту учётную запись в одном из приложений Mastodon для вашего мобильника.
</p>
</div>
<div class="row">
<div class="col-md-4">
<h3>Где зарегистрироваться</h3>
<ul>
<li><a href="https://mastodon.ml">Russian Mastodon</a></li>
<li><a href="https://phreedom.tk">Svoboda</a></li>
<li><a href="https://va11hal.la">Valhalla</a></li>
<li><a href="https://embracing.space">Embracing Space</a></li>
<li><a href="https://quey.org">Quey</a></li>
<li><a href="https://aspirant.de">Aspirant</a></li>
</ul>
<h3> Мобильные приложения</h3>
<ul>
<li>
<h4>Android</h4>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=app.fedilab.android">Fedilab</a> (Платный)</li>
<li><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">Fedilab</a> (Бесплатный на F-Droid)</li>
<li><a href="https://play.google.com/store/apps/details?id=jp.juggler.subwaytooter">Subway Tooter</a></li>
<li><a href="https://play.google.com/store/apps/details?id=com.keylesspalace.tusky">Tusky</a></li>
</ul>
</li>
<li>
<h4>iOS</h4>
<ul>
<li><a href="https://itunes.apple.com/app/toot/id1229021451">Toot!</a></li>
<li><a href="https://itunes.apple.com/app/mast/id1437429129">Mast</a></li>
<li><a href="https://itunes.apple.com/app/amarok-for-mastodon/id1214116200">Amaroq</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="images/frendica.png" class="image-popup">
<img src="images/frendica.png" alt="Friendica" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<h2>#вместоВК Friendica</h2>
<span>
Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы
</span>
<p>
Также, как и Мастодон, Friendica создана из множества мелких сайтов,
связанных воедино посредством федерации. Мелкие сайты, составляющие
Френдику, называются "нодами".
</p>
<p>
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и
всеми остальными альтернативными соцсетями, так что завести друзей
в этих сетях не составит труда.
</p>
<div>
<h3>Где зарегистрироваться</h3>
<ul>
<li><a href="https://nerdica.net">nerdica.net</a></li>
<li><a href="https://libranet.de">libranet.de</a></li>
<li><a href="https://social.isurf.ca/">social.isurf.ca/</a></li>
<li><a href="https://friendica.hubup.pro">friendica.hubup.pro</a></li>
</ul>
<h3> Мобильные приложения</h3>
<ul>
<li>
<h4>Android</h4>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=app.fedilab.android">Fedilab</a> (Платный)</li>
<li><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">Fedilab</a> (Бесплатный на F-Droid)</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="images/pixelfed.png" class="image-popup">
<img src="images/pixelfed.png" alt="Friendica" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<h2>#вместоinstagram PixelFed</h2>
<span>
Открытая распределённая альтернатива Instagram — с фильтрами, комментариями, лайками, репостами и так далее, но без рекламы и слежки.
</span>
<p>
Сеть состоит из мелких независимых сайтов, способных общаться между собой,
так что вы можете свободно фолловить людей с других сайтов PixelFed,
зарегистрировавшись на любом из них. И не важно, на маленьком или
крупном сервере вы зарегистрируетесь — вся сеть в вашем распоряжении.
Любые другие сети (например, Mastodon и Friendica) также доступны для взаимодействия
</p>
<p>
В отличие от Instagram, для использования PixelFed не нужно специальное приложение — оно работает
в любом браузере на компьютере, телефоне или планшете.
</p>
<div>
<h3>Где зарегистрироваться</h3>
<ul>
<li><a href="https://pixelfed.de">pixelfed.de</a></li>
<li><a href="https://pxlfd.me">pxlfd.me</a></li>
<li><a href="https://pix.tedomum.net">pix.tedomum.net</a></li>
<li><a href="https://pix.diaspodon.fr">pix.diaspodon.fr</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="images/peertube.png" class="image-popup">
<img src="images/peertube.png" alt="peertube" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<h2>#вместоyoutube PeerTube</h2>
<span>
PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google).
Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.
</span>
<p>
В отличие от YouTube, PeerTube состоит из множества независимых сайтов,
способных общаться между собой. Не имеет значения,
на каком вы зарегистрируетесь — вся сеть в вашем распоряжении.
Плюс вы можете встроить видео с PeerTube куда угодно (см. пример выше).
</p>
<p>
Ну и вишенкой на торте — PeerTube также использует стандарт ActivityPub,
и подписаться на ваш канал там смогут все пользователи PeerTube, Mastodon,
Friendica и так далее.
</p>
<div>
<h3>Где зарегистрироваться</h3>
<ul>
<li><a href="https://peertube.social">peertube.social</a></li>
<li><a href="https://pe.ertu.be">pe.ertu.be</a></li>
<li><a href="https://video.tedomum.net">video.tedomum.net</a></li>
<li><a href="https://peertube.linuxrocks.online">peertube.linuxrocks.online</a></li>
<li><a href="https://share.tub">share.tub</a></li>
</ul>
<h3>Мобильные приложения</h3>
<h4>Android</h4>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=app.fedilab.android">Fedilab</a> (Платный)</li>
<li><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">Fedilab</a> (Бесплатный на F-Droid)</li>
<li><a href="https://play.google.com/store/apps/details?id=net.schueller.peertube">PeerTube Player</a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- END container-wrap -->
<div class="container-wrap">
<footer role="contentinfo">
<div class="row">
<a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
<a href="https://switching.social">Switching.Social</a>. Дополнения принимаются <a href="https://git.macaw.me/Tolstoevsky/switching">здесь</a>.
</div>
</footer>
</div><!-- END container-wrap -->
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>

255
work.html
View file

@ -1,255 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Neat &mdash; Free Website Template, Free HTML5 Template by freehtml5.co</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by freehtml5.co" />
<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="freehtml5.co" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FreeHTML5.co
Website: http://freehtml5.co/
Email: info@freehtml5.co
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container-wrap">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html">Neat</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li><a href="index.html">Home</a></li>
<li class="active"><a href="work.html">Work</a></li>
<li class="has-dropdown">
<a href="blog.html">Blog</a>
<ul class="dropdown">
<li><a href="#">Web Design</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">API</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-wrap">
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay-gradient"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
<div class="slider-text-inner text-center">
<h1>Work</h1>
<h2>Free html5 templates Made by <a href="http://freehtml5.co/" target="_blank">freehtml5.co</a></h2>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<div id="fh5co-work">
<div class="row">
<div class="col-md-4 text-center animate-box">
<a href="work-single.html" class="work" style="background-image: url(images/portfolio-1.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Illustration</span>
</div>
</a>
</div>
<div class="col-md-4 text-center animate-box">
<a href="work-single.html" class="work" style="background-image: url(images/portfolio-2.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Brading</span>
</div>
</a>
</div>
<div class="col-md-4 text-center animate-box">
<a href="work-single.html" class="work" style="background-image: url(images/portfolio-3.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Illustration</span>
</div>
</a>
</div>
<div class="col-md-4 text-center animate-box">
<a href="work-single.html" class="work" style="background-image: url(images/portfolio-4.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Illustration</span>
</div>
</a>
</div>
<div class="col-md-4 text-center animate-box">
<a href="work-single.html" class="work" style="background-image: url(images/portfolio-5.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Brading</span>
</div>
</a>
</div>
<div class="col-md-4 text-center animate-box">
<a href="work-single.html" class="work" style="background-image: url(images/portfolio-6.jpg);">
<div class="desc">
<h3>Project Name</h3>
<span>Illustration</span>
</div>
</a>
</div>
</div>
</div>
</div><!-- END container-wrap -->
<div class="container-wrap">
<footer id="fh5co-footer" role="contentinfo">
<div class="row">
<div class="col-md-3 fh5co-widget">
<h4>About Neat</h4>
<p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit. Eos cumque dicta adipisci architecto culpa amet.</p>
</div>
<div class="col-md-3 col-md-push-1">
<h4>Latest Posts</h4>
<ul class="fh5co-footer-links">
<li><a href="#">Amazing Templates</a></li>
<li><a href="#">100+ Free Download Templates</a></li>
<li><a href="#">Neat is now available</a></li>
<li><a href="#">Download 1000+ icons</a></li>
<li><a href="#">Big Deal for this month of March, Join Us here</a></li>
</ul>
</div>
<div class="col-md-3 col-md-push-1">
<h4>Links</h4>
<ul class="fh5co-footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
<div class="col-md-3">
<h4>Contact Information</h4>
<ul class="fh5co-footer-links">
<li>198 West 21th Street, <br> Suite 721 New York NY 10016</li>
<li><a href="tel://1234567920">+ 1235 2355 98</a></li>
<li><a href="mailto:info@yoursite.com">info@yoursite.com</a></li>
<li><a href="http://gettemplates.co">gettemplates.co</a></li>
</ul>
</div>
</div>
<div class="row copyright">
<div class="col-md-12 text-center">
<p>
<small class="block">&copy; 2016 Free HTML5. All Rights Reserved.</small>
<small class="block">Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> Demo Images: <a href="http://unsplash.co/" target="_blank">Unsplash</a></small>
</p>
<p>
<ul class="fh5co-social-icons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
<li><a href="#"><i class="icon-dribbble"></i></a></li>
</ul>
</p>
</div>
</div>
</footer>
</div><!-- END container-wrap -->
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>