Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 201 lines (199 sloc) 12.5 KB
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>StockPHOTOGRAPHY</title>
<link href="https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i|Ubuntu:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="dist/styles.css">
</head>
<body>
<nav class="menu">
<h1 class="logo">Stock<b>PHOTOGRAPHY</b></h1>
<ul class="inline-list">
<li><a href="#">Featured</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="inline-list account">
<li><a href="#">Login</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</nav>
<section class="hero" >
<div class="info">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
<img src="img/avatars/avatar1.jpg" alt="Photo" class="avatar">
</div>
</section>
<section class="image-grid">
<h2>Recent Photos</h2>
<div class="row" data-equalizer>
<div class="medium-4 columns image">
<a href="#" data-reveal-id="photo1-1"><img src="img/photos/photo1.jpg" alt="Photo" data-equalizer-watch></a>
<div class="info">
<img src="img/avatars/avatar2.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
</div>
<div class="medium-4 columns image">
<a href="#" data-reveal-id="photo1-2"><img src="img/photos/photo2.jpg" alt="Photo" data-equalizer-watch></a>
<div class="info">
<img src="img/avatars/avatar3.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
</div>
<div class="medium-4 columns image">
<a href="#" data-reveal-id="photo1-3"><img src="img/photos/photo3.jpg" alt="Photo" data-equalizer-watch></a>
<div class="info">
<img src="img/avatars/avatar4.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
</div>
</div>
<div class="row" data-equalizer>
<div class="medium-4 columns image">
<a href="#" data-reveal-id="photo2-1"><img src="img/photos/photo4.jpg" alt="Photo" data-equalizer-watch></a>
<div class="info">
<img src="img/avatars/avatar5.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
</div>
<div class="medium-4 columns image">
<a href="#" data-reveal-id="photo2-2"><img src="img/photos/photo5.jpg" alt="Photo" data-equalizer-watch></a>
<div class="info">
<img src="img/avatars/avatar6.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
</div>
<div class="medium-4 columns image">
<a href="#" data-reveal-id="photo2-3"><img src="img/photos/photo6.jpg" alt="Photo" data-equalizer-watch></a>
<div class="info">
<img src="img/avatars/avatar7.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
</div>
</div>
<div class="row" data-equalizer>
<div class="medium-4 columns image">
<a href="#" data-reveal-id="photo3-1"><img src="img/photos/photo7.jpg" alt="Photo" data-equalizer-watch></a>
<div class="info">
<img src="img/avatars/avatar3.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
</div>
<div class="medium-4 columns image">
<a href="#" data-reveal-id="photo3-2"><img src="img/photos/photo8.jpg" alt="Photo" data-equalizer-watch></a>
<div class="info">
<img src="img/avatars/avatar7.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
</div>
<div class="medium-4 columns image">
<a href="#" data-reveal-id="photo3-3"><img src="img/photos/photo9.jpg" alt="Photo" data-equalizer-watch></a>
<div class="info">
<img src="img/avatars/avatar4.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
</div>
</div>
</section>
<footer>
<div class="row">
<p class="medium-6 columns">&copy; StandardLogo Website</p>
<div class="medium-6 columns social">
<a href="http://twitter.com">
<svg class="custom-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="height:35px;width:35px"><circle class="outer-shape" cx="50" cy="50" r="48" fill="#a5acba"/><path class="inner-shape" d="M74.5 34.714a20.016 20.016 0 0 1-5.773 1.592 10.138 10.138 0 0 0 4.42-5.595 20.061 20.061 0 0 1-6.383 2.454 10.012 10.012 0 0 0-7.338-3.193c-5.552 0-10.054 4.527-10.054 10.111 0 .793.089 1.564.26 2.305-8.355-.423-15.762-4.448-20.721-10.566a10.116 10.116 0 0 0-1.361 5.084c0 3.509 1.775 6.604 4.473 8.417a9.955 9.955 0 0 1-4.553-1.264l-.001.127c0 4.9 3.465 8.986 8.064 9.916a9.996 9.996 0 0 1-4.54.173c1.28 4.017 4.992 6.941 9.391 7.023a20.097 20.097 0 0 1-12.485 4.328c-.812 0-1.612-.048-2.398-.14a28.336 28.336 0 0 0 15.41 4.543c18.49 0 28.603-15.409 28.603-28.772 0-.438-.01-.874-.03-1.308a20.532 20.532 0 0 0 5.017-5.235z" fill="#f7f7f7"/></svg>
</a>
<a href="http://instagram.com">
<svg class="custom-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="height:35px;width:35px"><circle class="outer-shape" cx="50" cy="50" r="48" fill="#a5acba"/><path class="inner-shape" d="M69.1 25.5H30.9a5.389 5.389 0 0 0-5.387 5.39v38.22A5.388 5.388 0 0 0 30.9 74.5h38.2a5.388 5.388 0 0 0 5.387-5.39V30.89A5.39 5.39 0 0 0 69.1 25.5zM49.973 40.592c5.178 0 9.376 4.2 9.376 9.381 0 5.18-4.198 9.38-9.376 9.38s-9.376-4.2-9.376-9.38 4.197-9.381 9.376-9.381zm18.783 26.215c0 1.083-.876 1.96-1.958 1.96H33.17a1.959 1.959 0 0 1-1.958-1.96v-20.53h4.254a15.073 15.073 0 0 0-.452 3.67c0 8.307 6.73 15.04 15.031 15.04s15.032-6.733 15.032-15.04c0-1.266-.158-2.494-.452-3.67h4.131v20.53zm.126-28.245c0 1.083-.877 1.96-1.959 1.96h-5.562a1.959 1.959 0 0 1-1.958-1.96v-5.565c0-1.082.877-1.96 1.958-1.96h5.562c1.082 0 1.959.878 1.959 1.96v5.565z" fill="#f7f7f7"/></svg>
</a>
<a href="http://facebook.com">
<svg class="custom-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="height:35px;width:35px"><circle class="outer-shape" cx="50" cy="50" r="48" fill="#a5acba"/><path class="inner-shape" d="M66.334 25.5H33.668c-4.492 0-8.168 3.676-8.168 8.168v32.664c0 4.496 3.675 8.168 8.167 8.168h32.666c4.493 0 8.167-3.672 8.167-8.167V33.669c0-4.492-3.674-8.168-8.166-8.169zm.825 24.5h-7.972v21.438H50V50h-4.428v-7.014H50v-4.554c0-6.19 2.67-9.87 9.947-9.87h8.386v7.588h-6.85c-2.033-.004-2.285 1.06-2.285 3.039l-.011 3.797h9.188l-1.216 7.013V50z" fill="#f7f7f7"/>
</svg>
</a>
</div>
</div>
</footer>
<div id="photo1-1" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<h2 class="modalTitle">Photo</h2>
<img src="img/photos/photo1.jpg" alt="Photo one" >
<div class="info">
<img src="img/avatars/avatar2.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="photo1-2" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<h2 class="modalTitle">Photo</h2>
<img src="img/photos/photo2.jpg" alt="Photo" >
<div class="info">
<img src="img/avatars/avatar3.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="photo1-3" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<h2 class="modalTitle">Photo</h2>
<img src="img/photos/photo3.jpg" alt="Photo" >
<div class="info">
<img src="img/avatars/avatar4.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="photo2-1" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<h2 class="modalTitle">Photo</h2>
<img src="img/photos/photo4.jpg" alt="Photo" >
<div class="info">
<img src="img/avatars/avatar5.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="photo2-2" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<h2 class="modalTitle">Photo</h2>
<img src="img/photos/photo5.jpg" alt="Photo" >
<div class="info">
<img src="img/avatars/avatar6.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="photo2-3" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<h2 class="modalTitle">Photo</h2>
<img src="img/photos/photo6.jpg" alt="Photo" >
<div class="info">
<img src="img/avatars/avatar7.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="photo3-1" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<h2 class="modalTitle">Photo</h2>
<img src="img/photos/photo7.jpg" alt="Photo" >
<div class="info">
<img src="img/avatars/avatar3.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="photo3-2" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<h2 class="modalTitle">Photo</h2>
<img src="img/photos/photo8.jpg" alt="Photo" >
<div class="info">
<img src="img/avatars/avatar7.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div id="photo3-3" class="reveal-modal" data-reveal aria-hidden="true" role="dialog">
<h2 class="modalTitle">Photo</h2>
<img src="img/photos/photo9.jpg" alt="Photo" >
<div class="info">
<img src="img/avatars/avatar4.jpg" alt="Photo" class="avatar">
<span class="attribution">Photo by <b>Werner Bechtelar</b></span>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<script src="dist/scripts.js"></script>
</body>
</html>