Skip to content

Instantly share code, notes, and snippets.

@ganglio

ganglio/index.html

Created April 3, 2012 12:53
Show Gist options
  • Save ganglio/2291767 to your computer and use it in GitHub Desktop.
Save ganglio/2291767 to your computer and use it in GitHub Desktop.
Download ZIP
CSS + HTML - Responsive multicolumn pinterest-like layout
Raw
index.html
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>myBoard</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
myBoard
</header>
<section>
<article id="article-1">
<a href="#" class="close">X</a>
<header>Title</header>
<div class="content">
<figure><a href="#article-1"><img src="http://www.hdwallpapers2012.com/wp-content/uploads/2012/03/High-2BDefinition-2BBeach-2BWallpapers-2Bby-2Bcool-2Bwallpapers-2B-252817-2529.jpg"/></a></figure>
<p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam in voluptate velit esse</p>
</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
</article>
<article id="article-2">
<a href="#" class="close">X</a>
<header>Title</header>
<div class="content">
<figure><a href="#article-2"><img src="http://www.hdwallpapers2012.com/wp-content/uploads/2012/03/High-2BDefinition-2BBeach-2BWallpapers-2Bby-2Bcool-2Bwallpapers-2B-252817-2529.jpg"/></a></figure>
<p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam in voluptate velit esse</p>
</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
</article>
<article id="article-3">
<a href="#" class="close">X</a>
<header>Title</header>
<div class="content">
<figure><a href="#article-3"><img src="http://www.hdwallpapers2012.com/wp-content/uploads/2012/03/High-2BDefinition-2BBeach-2BWallpapers-2Bby-2Bcool-2Bwallpapers-2B-252817-2529.jpg"/></a></figure>
<p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam in voluptate velit esse</p>
</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
</article>
<article id="article-4">
<a href="#" class="close">X</a>
<header>Title</header>
<div class="content">
<figure><a href="#article-4"><img src="http://www.hdwallpapers2012.com/wp-content/uploads/2012/03/High-2BDefinition-2BBeach-2BWallpapers-2Bby-2Bcool-2Bwallpapers-2B-252817-2529.jpg"/></a></figure>
<p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam in voluptate velit esse</p>
</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
</article>
<article id="article-5">
<a href="#" class="close">X</a>
<header>Title</header>
<div class="content">
<figure><a href="#article-5"><img src="http://www.hdwallpapers2012.com/wp-content/uploads/2012/03/High-2BDefinition-2BBeach-2BWallpapers-2Bby-2Bcool-2Bwallpapers-2B-252817-2529.jpg"/></a></figure>
<p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam in voluptate velit esse</p>
</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
<div class="comment">comment1</div>
</article>
</section>
</body>
</html>
Raw
style.css
body {
font-family: 'Dosis',sans-serif;
margin: 0;
}
header {
background-color: #EEEEEE;
border-bottom: 1px solid #AAAAAA;
font-size: 25px;
height: 40px;
line-height: 40px;
padding-left: 20px;
text-align: center;
}
section {
box-sizing: padding-box;
column-gap: 10px;
column-width: 200px;
padding: 10px;
width: 100%;
}
article {
box-sizing: border-box;
background-clip: border-box;
background-color: white;
border: 1px dotted #C8C8C8;
display: table;
font-size: 16px;
margin-bottom: 10px;
padding: 10px;
position: relative;
width: 100%;
}
article .close {
transition: opacity 0.25s ease 0s;
background-color: #EEEEEE;
border-color: #C8C8C8;
border-radius: 20px 20px 20px 20px;
border-style: solid;
border-width: 1px;
color: black;
font-size: 16px;
height: 20px;
line-height: 20px;
opacity: 0;
position: absolute;
right: -10px;
text-align: center;
text-decoration: none;
top: -10px;
width: 20px;
}
article .comment {
display: none;
}
article:hover:not(:target) figure {
opacity: 0.9;
}
article .content {
background-color: #EEEEEE;
max-height: 300px;
overflow: hidden;
padding-top: 15px;
}
article figure {
box-sizing: padding-box;
transition: opacity 0.25s ease 0s;
cursor: pointer;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
padding: 10px;
position: absolute;
top: 0;
width: 100%;
}
article figure img {
height: 100%;
}
article figure a {
display: block;
height: 100%;
overflow: hidden;
width: 100%;
}
article header {
background-color: #EEEEEE;
box-shadow: none;
font-size: 20px;
font-weight: bold;
height: 20px;
line-height: 20px;
padding: 5px;
}
article footer {
background-color: #EEEEEE;
font-size: 12px;
height: 15px;
line-height: 15px;
padding: 5px;
text-align: right;
}
article p {
line-height: 20px;
margin: 15px 5px;
text-align: justify;
}
article p:first-of-type {
margin: 5px;
}
article p:first-of-type:first-letter {
float: left;
font-size: 50px;
}
article:target {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
left: 50%;
margin: 0 -350px;
position: absolute;
top: 50px;
width: 700px;
z-index: 10000;
}
article:target .content {
max-height: none;
}
article:target figure {
background-color: #EEEEEE;
display: block;
opacity: 1;
padding: 0 10px 10px;
position: relative;
}
article:target figure img {
display: block;
margin: 0 auto;
width: 650px;
}
article:target:hover .close {
opacity: 1;
}
article:target .comment {
background-color: #EEEEEE;
border-top: 1px solid #AAAAAA;
display: block;
padding: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment