212 lines
11 KiB
HTML
212 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Trying to create something awesome</title>
|
|
<link rel="stylesheet" href="main.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
|
|
<link rel="shortcut icon" type="image/x-icon" href="pic/fave.ico">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="yakor"></div>
|
|
<ul id="mm">
|
|
<li><a href="#about" class="mma">About</a></li>
|
|
<li><a href="#photo" class="mma">Gallery</a></li>
|
|
<li><a href="#articles" class="mma">Articles</a></li>
|
|
</ul>
|
|
<nav id="left">
|
|
<ul>
|
|
<li id="logo">
|
|
<a href="#yakor"><img src="pic/fave.svg" alt="Logotype"></a>
|
|
</li>
|
|
<li id="navt">
|
|
<div>
|
|
<a href="">
|
|
<img class="arrow" src="pic/arrow-up.svg" alt="Arrow-up">
|
|
</a>
|
|
<h4>1</h4>
|
|
<a href="">
|
|
<img class="arrow" src="pic/arrow-down.svg" alt="Arrow-down">
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li id="copyco">
|
|
<p id="copy">© 2018 example.com</p>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
<nav id="navig">
|
|
<ul>
|
|
<li id="links">
|
|
<a href="#about">About</a>
|
|
<a href="#photo">Gallery</a>
|
|
<a href="#articles">Articles</a>
|
|
</li>
|
|
<li id="rightm">
|
|
<img src="pic/search.svg" alt="Search" id="search">
|
|
<img src="pic/menu.svg" alt="Menu" id="menu">
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<ul id="social">
|
|
<li>
|
|
<a href="">
|
|
<img src="pic/vk.svg" alt="Vk">
|
|
<h3>Vk</h3>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="">
|
|
<img src="pic/galactikka.svg" alt="Galactikka">
|
|
<h3>Galactikka</h3>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="">
|
|
<img src="pic/inst.svg" alt="Instagram">
|
|
<h3>Instagram</h3>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="">
|
|
<img src="pic/ficbook.svg" alt="Ficbook">
|
|
<h3>Ficbook</h3>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div id="intro">
|
|
<h1>Hello! Nice to see you here.<br>Hope you will enjoy it!</h1>
|
|
<a href="#about">See more <img src="pic/arrow-right.svg" alt=""></a>
|
|
</div>
|
|
<div id="about">
|
|
<img src="pic/me.jpeg" alt="me">
|
|
<h2>I wish to tell you about it</h2>
|
|
<p>Aliquip consectetur incididunt magna sint incididunt id nulla minim culpa velit eu. Magna pariatur aute
|
|
ullamco et incididunt dolor. Nostrud magna fugiat dolor ipsum commodo veniam in quis amet culpa occaecat
|
|
enim ut fugiat. Officia consectetur adipisicing ut cupidatat nulla dolore. Veniam sint velit laboris ut
|
|
enim incididunt reprehenderit magna sit.
|
|
|
|
Velit est laboris voluptate est tempor sint eiusmod adipisicing anim. In excepteur esse minim est elit
|
|
consectetur dolor fugiat magna amet eiusmod quis. Est reprehenderit anim consequat sit reprehenderit
|
|
sunt deserunt.</p>
|
|
</div>
|
|
<div id="photo">
|
|
<h2>Gallery</h2>
|
|
<div class="grid">
|
|
<div class="grid-sizer"></div>
|
|
<div class="grid-item"><img src="pic/gallery/1.jpeg" alt=""></div>
|
|
<div class="grid-item"><img src="pic/gallery/2.jpeg" alt=""></div>
|
|
<div class="grid-item"><img src="pic/gallery/3.jpeg" alt=""></div>
|
|
<div class="grid-item"><img src="pic/gallery/4.jpeg" alt=""></div>
|
|
<div class="grid-item"><img src="pic/gallery/5.jpeg" alt=""></div>
|
|
<div class="grid-item"><img src="pic/gallery/6.jpeg" alt=""></div>
|
|
<div class="grid-item"><img src="pic/gallery/7.jpeg" alt=""></div>
|
|
<div class="grid-item"><img src="pic/gallery/8.jpeg" alt=""></div>
|
|
</div>
|
|
</div>
|
|
<div id="articles">
|
|
<h2>Articles</h2>
|
|
<article>
|
|
<p>Laborum et laborum voluptate labore veniam minim deserunt qui. Culpa commodo aute occaecat ullamco
|
|
aliquip dolore cupidatat nostrud aliquip id non exercitation occaecat. Commodo aute Lorem Lorem
|
|
occaecat sit do deserunt ullamco pariatur occaecat. Do magna non commodo ipsum ullamco aliqua culpa
|
|
aliquip ipsum. Fugiat cillum ut enim irure nostrud id dolore sunt Lorem consequat mollit.
|
|
|
|
Officia esse eu incididunt occaecat sunt amet fugiat minim fugiat laborum ex. Do eiusmod tempor non
|
|
cillum in. Consequat eu commodo sint aute amet id ullamco occaecat laborum exercitation deserunt
|
|
aliquip esse. Labore laborum consectetur non ut Lorem voluptate sit incididunt nostrud. Anim magna
|
|
labore laborum magna voluptate eiusmod. Duis dolor aliquip ea anim officia ea ut ea deserunt
|
|
consequat. Aliquip nostrud elit adipisicing quis aliquip do Lorem in deserunt non fugiat tempor
|
|
enim.
|
|
|
|
Non non quis esse est. Eu amet amet ipsum labore consequat tempor irure anim nulla ut excepteur
|
|
Lorem tempor. Sit Lorem ea nulla mollit do quis enim officia occaecat dolore. Magna occaecat ex
|
|
deserunt laborum ut velit ut sunt occaecat. Et do magna proident duis minim aliqua qui irure aute
|
|
velit cupidatat. Exercitation ea duis cillum proident irure commodo deserunt pariatur in esse
|
|
ullamco laborum et. Exercitation eiusmod tempor aute esse sit exercitation nulla incididunt veniam
|
|
aliquip.</p>
|
|
<figure><img src="pic/sample.jpg" alt=""></figure>
|
|
</article>
|
|
<article>
|
|
<p>Tempor incididunt dolore eiusmod sit proident do esse aliquip sunt tempor et ipsum. Fugiat
|
|
exercitation exercitation eu aliquip sunt sit cupidatat consequat nisi Lorem enim eiusmod officia
|
|
adipisicing. Velit consectetur sit ullamco quis reprehenderit duis. Duis cillum officia nostrud id
|
|
adipisicing. Minim duis reprehenderit laborum do dolor veniam qui magna. Ullamco quis nostrud
|
|
voluptate sint ullamco.
|
|
|
|
Fugiat tempor duis laboris dolor pariatur. Sint nulla laboris magna excepteur Lorem elit ullamco
|
|
mollit excepteur incididunt quis pariatur et nostrud. Consectetur id minim elit cillum voluptate
|
|
veniam nulla anim id ut esse. Anim dolore proident sunt excepteur. Minim non qui tempor duis ad
|
|
ullamco sunt velit et magna ea eu. Ut id laborum Lorem magna consectetur dolore laboris qui tempor
|
|
non esse.
|
|
|
|
Sint ut ea in sint eu enim ex. Sint amet mollit adipisicing culpa consectetur eu commodo ex. Ex
|
|
commodo culpa quis ad irure. Ullamco elit ex dolor aliquip cupidatat.</p>
|
|
<figure><img src="pic/sample.jpg" alt=""></figure>
|
|
</article>
|
|
<article>
|
|
<p>Fugiat labore id adipisicing cillum ex quis eu cupidatat ipsum pariatur sint quis. Veniam non fugiat
|
|
esse tempor fugiat voluptate exercitation. Deserunt dolor ipsum duis velit voluptate consequat esse.
|
|
|
|
Id nostrud Lorem veniam sint qui. Exercitation et pariatur in ad eu reprehenderit anim pariatur
|
|
proident do in sunt. Cupidatat enim officia nostrud nulla culpa magna ea officia commodo non
|
|
consectetur aute do aute. Anim esse id dolore aliquip est voluptate commodo esse est est. Ex fugiat
|
|
mollit enim irure nulla. Nostrud proident voluptate duis labore deserunt ex officia Lorem laborum
|
|
tempor.
|
|
|
|
Est culpa ullamco consequat laborum irure excepteur sit. Ullamco aliqua ipsum ex non eiusmod velit
|
|
minim magna sit proident ea fugiat est. Eiusmod adipisicing proident excepteur consectetur ex
|
|
reprehenderit non sit aliqua eu. Cupidatat ut in culpa aute ad non adipisicing anim sunt.</p>
|
|
<figure><img src="pic/sample.jpg" alt=""></figure>
|
|
</article>
|
|
<article>
|
|
<p>Do ea do voluptate eiusmod sint amet eu dolor. Ea aute proident nulla dolore ullamco nostrud aliquip
|
|
eu pariatur. Esse est amet elit Lorem elit voluptate voluptate cupidatat dolor laboris tempor ut
|
|
eiusmod deserunt. Mollit dolore duis consectetur mollit occaecat qui ad fugiat aliquip velit. Ut ad
|
|
occaecat fugiat anim.
|
|
|
|
Irure velit adipisicing consectetur eu esse aute mollit. In consectetur labore est reprehenderit
|
|
exercitation tempor ad sunt nostrud qui do cillum eu. Incididunt eu nisi dolore laboris irure
|
|
commodo et deserunt.
|
|
|
|
Minim irure minim incididunt est. Sint enim pariatur tempor eiusmod id quis quis nostrud. Cupidatat
|
|
nulla sunt anim eiusmod sint dolore reprehenderit sunt minim laboris incididunt est. Laborum in nisi
|
|
sit magna exercitation exercitation anim. Officia deserunt sunt aute eiusmod Lorem. In do enim elit
|
|
tempor.</p>
|
|
<figure><img src="pic/sample.jpg" alt=""></figure>
|
|
</article>
|
|
<img id="gototop" src="pic/arrow-up.svg" alt="Arrow-up">
|
|
</div>
|
|
</main>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$("a[href*=#]").on("click", function (e) {
|
|
var anchor = $(this);
|
|
$('html, body').stop().animate({
|
|
scrollTop: $(anchor.attr('href')).offset().top
|
|
}, 777);
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
<script src="masonri.js"></script>
|
|
<script src="imageloader.js"></script>
|
|
<script>
|
|
var $grid = $('.grid').masonry({
|
|
itemSelector: '.grid-item',
|
|
percentPosition: true,
|
|
columnWidth: '.grid-sizer'
|
|
});
|
|
$grid.imagesLoaded().progress(function () {
|
|
$grid.masonry();
|
|
});
|
|
</script>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
|
|
</html> |