pure/site/static/layouts/gallery/index.html

225 lines
8.6 KiB
HTML
Raw Normal View History

2021-09-25 16:41:07 +00:00
<!DOCTYPE html>
<html lang="en">
2021-09-25 16:41:07 +00:00
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="A layout example that shows off a responsive photo gallery."
/>
<title>Photo Gallery &ndash; Layout Examples &ndash; Pure</title>
2021-09-25 16:41:07 +00:00
<link rel="stylesheet" href="/css/pure/pure-min.css" />
<link rel="stylesheet" href="/css/pure/grids-responsive-min.css" />
<link rel="stylesheet" href="/layouts/gallery/styles.css" />
</head>
<body>
<div>
<div class="header">
<div class="pure-menu pure-menu-horizontal">
2021-09-25 16:41:07 +00:00
<a class="pure-menu-heading" href="">Photo Gallery</a>
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">
<a href="#" class="pure-menu-link">Home</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Blog</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">About</a>
</li>
</ul>
</div>
2021-09-25 16:41:07 +00:00
</div>
2021-09-25 16:41:07 +00:00
<div class="pure-g">
<div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
2021-09-25 16:41:07 +00:00
<a href="http://www.dillonmcintosh.tumblr.com/">
<img
src="https://24.media.tumblr.com/d6b9403c704c3e5aa1725c106e8a9430/tumblr_mvyxd9PUpZ1st5lhmo1_1280.jpg"
alt="Beach"
/>
</a>
<aside class="photo-box-caption">
<span
>by
<a href="http://www.dillonmcintosh.tumblr.com/"
>Dillon McIntosh</a
></span
>
</aside>
</div>
<div class="text-box pure-u-1 pure-u-md-1-2 pure-u-lg-2-3">
2021-09-25 16:41:07 +00:00
<div class="l-box">
<h1 class="text-box-head">Photos from around the world</h1>
<p class="text-box-subhead">
A collection of beautiful photos gathered from Unsplash.com.
</p>
</div>
</div>
<div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
2021-09-25 16:41:07 +00:00
<a
href="https://www.flickr.com/photos/leshaines123/9199788659/in/photolist-f1XjDR-oqUsF4-eGN3fd-uLvGyn-nsUXqP-6tKPeq-h2Bwtz-6oVtec-3vzcD-nhKUBn-eGN7RY-atDkE4-6qpKgh-5qhbkM-eXSJSR-8YGjfD-eXSK7n-c3hvqo-ddvqc2-h1FgsH-4W6bip-dcnDYJ-ejny6W-bEnete-qoSUSt-nyApt1-cs1Paf-oanrNv-dmE5c9-c4Sgiq-nLYPa4-eHQbYp-fn8csk-uq4gKy-fp186j-7ZcaSx-6wMKEA-kERNCe-veHJHy-eGNaj5-4VddEM-rXUqrU-9X8YXf-87nMXX-tKCh7h-u88G4h-nHuLus-9WPUyn-8fjvkU-nKyT33"
>
<img
src="https://c2.staticflickr.com/6/5515/9199788659_818383d0b8_k.jpg"
alt="Meadow"
/>
</a>
<aside class="photo-box-caption">
<span>
by
<a
href="https://www.flickr.com/photos/leshaines123/9199788659/in/photolist-f1XjDR-oqUsF4-eGN3fd-uLvGyn-nsUXqP-6tKPeq-h2Bwtz-6oVtec-3vzcD-nhKUBn-eGN7RY-atDkE4-6qpKgh-5qhbkM-eXSJSR-8YGjfD-eXSK7n-c3hvqo-ddvqc2-h1FgsH-4W6bip-dcnDYJ-ejny6W-bEnete-qoSUSt-nyApt1-cs1Paf-oanrNv-dmE5c9-c4Sgiq-nLYPa4-eHQbYp-fn8csk-uq4gKy-fp186j-7ZcaSx-6wMKEA-kERNCe-veHJHy-eGNaj5-4VddEM-rXUqrU-9X8YXf-87nMXX-tKCh7h-u88G4h-nHuLus-9WPUyn-8fjvkU-nKyT33"
>Les Haines</a
>
</span>
</aside>
</div>
<div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
2021-09-25 16:41:07 +00:00
<a href="http://www.nilssonlee.se/">
<img
src="https://24.media.tumblr.com/23e3f4bb271b8bdc415275fb7061f204/tumblr_mve3rvxwaP1st5lhmo1_1280.jpg"
alt="City"
/>
</a>
<aside class="photo-box-caption">
<span>
by <a href="http://www.nilssonlee.se/">Jonas Nilsson Lee</a>
</span>
</aside>
</div>
<div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
2021-09-25 16:41:07 +00:00
<a href="http://www.flickr.com/photos/rulasibai/">
<img
src="https://24.media.tumblr.com/ac840897b5f73fa6bc43f73996f02572/tumblr_mrraat0H431st5lhmo1_1280.jpg"
alt="Flowers"
/>
</a>
<aside class="photo-box-caption">
<span>
by
<a href="http://www.flickr.com/photos/rulasibai/">Rula Sibai</a>
</span>
</aside>
</div>
<div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
2021-09-25 16:41:07 +00:00
<a href="http://www.flickr.com/photos/charliefoster/">
<img
src="https://24.media.tumblr.com/e100564a3e73c9456acddb9f62f96c79/tumblr_mufs8mix841st5lhmo1_1280.jpg"
alt="Bridge"
/>
</a>
<aside class="photo-box-caption">
<span>
by
<a href="http://www.flickr.com/photos/charliefoster/"
>Charlie Foster</a
>
</span>
</aside>
</div>
<div class="photo-box photo-box-thin pure-u-1 pure-u-lg-2-3">
2021-09-25 16:41:07 +00:00
<a
href="https://www.flickr.com/photos/82955120@N05/12024271573/in/photolist-jjxx28-f2vns5-jjw3rg-phetyV-djcGV4-7TBwup-7DxDnn-d4c1eC-aYoN8H-dBd8UG-ayQR7Z-8yhyLk-4nTgvd-dGtHuM-6WHtpP-9Dz8tA-gtnVfQ-rkCwz9-aYCE1B-hnK3Xs-axv6P4-pFPBdL-9vFwzg-afJk9N-dd3EJJ-oF1Nc2-aYoMCx-xojot-4Ypyo9-6BxaC2-6ybPn5-HSvt5-asaoZL-dd3CtM-9RJXk3-HSuZp-fe9yXi-7irigF-pgqPwH-9QQ2SU-dd3C2T-ccB6t5-fhtH3c-odGZC3-a4ppMF-ohvnyp-uiUswa-uYhWFR-6Cb4M6-5GoD9y"
>
<img
src="https://c2.staticflickr.com/4/3676/12024271573_d266422362_h.jpg"
alt="Balloons"
/>
</a>
<aside class="photo-box-caption">
<span>
by
<a
href="https://www.flickr.com/photos/82955120@N05/12024271573/in/photolist-jjxx28-f2vns5-jjw3rg-phetyV-djcGV4-7TBwup-7DxDnn-d4c1eC-aYoN8H-dBd8UG-ayQR7Z-8yhyLk-4nTgvd-dGtHuM-6WHtpP-9Dz8tA-gtnVfQ-rkCwz9-aYCE1B-hnK3Xs-axv6P4-pFPBdL-9vFwzg-afJk9N-dd3EJJ-oF1Nc2-aYoMCx-xojot-4Ypyo9-6BxaC2-6ybPn5-HSvt5-asaoZL-dd3CtM-9RJXk3-HSuZp-fe9yXi-7irigF-pgqPwH-9QQ2SU-dd3C2T-ccB6t5-fhtH3c-odGZC3-a4ppMF-ohvnyp-uiUswa-uYhWFR-6Cb4M6-5GoD9y"
>Nicolas Raymond</a
>
</span>
</aside>
</div>
<div class="photo-box photo-box-thin pure-u-1 pure-u-md-2-3">
2021-09-25 16:41:07 +00:00
<a href="http://twitter.com/iBoZR">
<img
src="https://25.media.tumblr.com/95c842c76d60b7bc982d92c76216d037/tumblr_mx3tnm96k81st5lhmo1_1280.jpg"
alt="Rain Drops"
/>
</a>
<aside class="photo-box-caption">
<span>
by <a href="http://twitter.com/iBoZR">Thanun Buranapong</a>
</span>
</aside>
</div>
<div class="photo-box pure-u-1 pure-u-md-1-3">
2021-09-25 16:41:07 +00:00
<a href="http://www.goodfreephotos.com/">
<img
src="https://25.media.tumblr.com/88b812f5f9c3d7b83560fd635435d538/tumblr_mx3tlblmY21st5lhmo1_1280.jpg"
alt="Port"
/>
</a>
<aside class="photo-box-caption">
<span>
by <a href="http://www.goodfreephotos.com/">Yinan Chen</a>
</span>
</aside>
</div>
<div class="pure-u-1 form-box">
2021-09-25 16:41:07 +00:00
<div class="l-box">
<h2>Submit a Photo</h2>
<form class="pure-form">
<input type="text" placeholder="Photo URL" required />
<input type="text" placeholder="Email" />
<button type="submit" class="pure-button">Submit</button>
</form>
</div>
</div>
<div class="pure-u-1">
2021-09-25 16:41:07 +00:00
<div class="l-box">
<h2>Creating a Photo Gallery Layout</h2>
<p>
This page shows how to make a photo gallery using
<a href="/grids/">Pure Grids</a>. Using Pure, we can create
interesting layouts such as this photo gallery. This layout is
fully responsive. We've added a bit of custom media queries on top
of the responsive grid provided by Pure.
</p>
<p>
We've also taken advantage of <a href="/forms/">Pure Forms</a> and
<a href="/menus/">Pure Menus</a>. This example uses a form with
the <code>pure-form</code> class name to create an inline form. We
use <a href="/buttons/">Pure Buttons</a> for the button styling.
</p>
</div>
</div>
2021-09-25 16:41:07 +00:00
</div>
2021-09-25 16:41:07 +00:00
<div class="footer">
View the source of this layout to learn more. Made with love by the Pure
Team.
</div>
</div>
2021-09-25 16:41:07 +00:00
</body>
</html>