mirror of
https://github.com/pure-css/pure.git
synced 2024-11-07 21:34:24 +00:00
fix: use https from tumblr
This commit is contained in:
redonkulus
parent
d953758605
commit
59ecd8530c
@ -1,170 +1,224 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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.">
|
||||
<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 – Layout Examples – Pure</title>
|
||||
<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">
|
||||
<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">
|
||||
<a class="pure-menu-heading" href="">Photo Gallery</a>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-g">
|
||||
<div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
|
||||
<a href="http://www.dillonmcintosh.tumblr.com/">
|
||||
<img src="http://24.media.tumblr.com/d6b9403c704c3e5aa1725c106e8a9430/tumblr_mvyxd9PUpZ1st5lhmo1_1280.jpg"
|
||||
alt="Beach">
|
||||
</a>
|
||||
<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>
|
||||
<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">
|
||||
<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 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">
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<a href="http://www.nilssonlee.se/">
|
||||
<img src="http://24.media.tumblr.com/23e3f4bb271b8bdc415275fb7061f204/tumblr_mve3rvxwaP1st5lhmo1_1280.jpg"
|
||||
alt="City">
|
||||
</a>
|
||||
<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>
|
||||
<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">
|
||||
<a href="http://www.flickr.com/photos/rulasibai/">
|
||||
<img src="http://24.media.tumblr.com/ac840897b5f73fa6bc43f73996f02572/tumblr_mrraat0H431st5lhmo1_1280.jpg"
|
||||
alt="Flowers">
|
||||
</a>
|
||||
<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>
|
||||
<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">
|
||||
<a href="http://www.flickr.com/photos/charliefoster/">
|
||||
<img src="http://24.media.tumblr.com/e100564a3e73c9456acddb9f62f96c79/tumblr_mufs8mix841st5lhmo1_1280.jpg"
|
||||
alt="Bridge">
|
||||
</a>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<a href="http://twitter.com/iBoZR">
|
||||
<img src="http://25.media.tumblr.com/95c842c76d60b7bc982d92c76216d037/tumblr_mx3tnm96k81st5lhmo1_1280.jpg"
|
||||
alt="Rain Drops">
|
||||
</a>
|
||||
<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>
|
||||
<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">
|
||||
<a href="http://www.goodfreephotos.com/">
|
||||
<img src="http://25.media.tumblr.com/88b812f5f9c3d7b83560fd635435d538/tumblr_mx3tlblmY21st5lhmo1_1280.jpg"
|
||||
alt="Port">
|
||||
</a>
|
||||
<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>
|
||||
<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">
|
||||
<div class="l-box">
|
||||
<h2>Submit a Photo</h2>
|
||||
<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>
|
||||
<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">
|
||||
<div class="l-box">
|
||||
<h2>Creating a Photo Gallery Layout</h2>
|
||||
<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>
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
View the source of this layout to learn more. Made with love by the Pure Team.
|
||||
<div class="footer">
|
||||
View the source of this layout to learn more. Made with love by the Pure
|
||||
Team.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,29 +3,29 @@
|
||||
* Most of these are inherited from Base, but I want to change a few.
|
||||
*/
|
||||
body {
|
||||
color: #526066;
|
||||
color: #526066;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
h2,
|
||||
h3 {
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- Layout Styles --
|
||||
*/
|
||||
.l-content {
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.l-box {
|
||||
padding: 0.5em 2em;
|
||||
padding: 0.5em 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -33,14 +33,13 @@ p {
|
||||
* Make the menu have a very faint box-shadow.
|
||||
*/
|
||||
.pure-menu {
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.pure-menu-link {
|
||||
padding: .5em .7em;
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- BANNER --
|
||||
* The top banner with the headings. By using a combination
|
||||
@ -49,41 +48,41 @@ p {
|
||||
*/
|
||||
|
||||
.banner {
|
||||
background: transparent url('http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg') 0 0 no-repeat fixed;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg', sizingMethod='scale');
|
||||
background: transparent
|
||||
url("https://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg")
|
||||
0 0 no-repeat fixed;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg', sizingMethod='scale');
|
||||
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
margin-bottom: 3em;
|
||||
display: table;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
margin-bottom: 3em;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.banner-head {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 1px black;
|
||||
}
|
||||
|
||||
|
||||
.banner-head {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 1px black;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- PRICING TABLE WRAPPER --
|
||||
* This element wraps up all the pricing table elements
|
||||
*/
|
||||
.pricing-tables,
|
||||
.information {
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pricing-tables,
|
||||
.information {
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pricing-tables {
|
||||
margin-bottom: 3.125em;
|
||||
text-align: center;
|
||||
margin-bottom: 3.125em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -91,9 +90,9 @@ p {
|
||||
* Every pricing table has the .pricing-table class
|
||||
*/
|
||||
.pricing-table {
|
||||
border: 1px solid #ddd;
|
||||
margin: 0 0.5em 2em;
|
||||
padding: 0 0 3em;
|
||||
border: 1px solid #ddd;
|
||||
margin: 0 0.5em 2em;
|
||||
padding: 0 0 3em;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -101,11 +100,11 @@ p {
|
||||
* Choose a different color based on the type of pricing table.
|
||||
*/
|
||||
.pricing-table-free .pricing-table-header {
|
||||
background: #519251;
|
||||
background: #519251;
|
||||
}
|
||||
|
||||
.pricing-table-biz .pricing-table-header {
|
||||
background: #2c4985;
|
||||
background: #2c4985;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -113,107 +112,97 @@ p {
|
||||
* By default, a header is black/white, and has some styles for its <h2> name.
|
||||
*/
|
||||
.pricing-table-header {
|
||||
background: #111;
|
||||
color: #fff;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
}
|
||||
.pricing-table-header h2 {
|
||||
margin: 0;
|
||||
padding-top: 2em;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.pricing-table-header h2 {
|
||||
margin: 0;
|
||||
padding-top: 2em;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- PRICING TABLE PRICE --
|
||||
* Styles for the price and the corresponding <span>per month</span>
|
||||
*/
|
||||
.pricing-table-price {
|
||||
font-size: 6em;
|
||||
margin: 0.2em 0 0;
|
||||
font-weight: 100;
|
||||
font-size: 6em;
|
||||
margin: 0.2em 0 0;
|
||||
font-weight: 100;
|
||||
}
|
||||
.pricing-table-price span {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.2em;
|
||||
padding-bottom: 2em;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
*color: #fff;
|
||||
}
|
||||
.pricing-table-price span {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.2em;
|
||||
padding-bottom: 2em;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
*color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* -- PRICING TABLE LIST --
|
||||
* Each pricing table has a <ul> which is denoted by the .pricing-table-list class
|
||||
*/
|
||||
.pricing-table-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- PRICING TABLE LIST ELEMENTS --
|
||||
* Styles for the individual list elements within each pricing table
|
||||
*/
|
||||
.pricing-table-list li {
|
||||
padding: 0.8em 0;
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
padding: 0.8em 0;
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- PRICING TABLE BUTTON --
|
||||
* Styles for the "Choose" button at the bottom of a pricing table.
|
||||
* This inherits from Pure Button.
|
||||
*/
|
||||
.button-choose {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border-radius: 2em;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
bottom: -1.5em;
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border-radius: 2em;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
bottom: -1.5em;
|
||||
}
|
||||
|
||||
.information-head {
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #111;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
background: #111;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
}
|
||||
.footer a {
|
||||
color: #ddd;
|
||||
}
|
||||
.footer a {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* -- TABLET MEDIA QUERIES --
|
||||
* On tablets, we want to slightly adjust the size of the banner
|
||||
* text and add some vertical space between the various pricing tables
|
||||
*/
|
||||
@media(min-width: 767px) {
|
||||
|
||||
.banner-head {
|
||||
font-size: 4em;
|
||||
}
|
||||
.pricing-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
.banner-head {
|
||||
font-size: 4em;
|
||||
}
|
||||
.pricing-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@ -221,10 +210,10 @@ p {
|
||||
* On phones, we want to reduce the height and font-size of the banner further
|
||||
*/
|
||||
@media (min-width: 480px) {
|
||||
.banner {
|
||||
height: 400px;
|
||||
}
|
||||
.banner-head {
|
||||
font-size: 3em;
|
||||
}
|
||||
.banner {
|
||||
height: 400px;
|
||||
}
|
||||
.banner-head {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user