Skip to content

Instantly share code, notes, and snippets.

@LoganArnett

LoganArnett/Product-Grid.html

Created October 31, 2014 14:14
Show Gist options
  • Save LoganArnett/d2b722b02309cd7aa75f to your computer and use it in GitHub Desktop.
Save LoganArnett/d2b722b02309cd7aa75f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Product-Grid.html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="24--Product-Grid.css">
</head>
<body>
<div id="container">
<ul>
<section>
<li>
<figure><img src="http://fillmurray.com/256/226" alt="What?!"></figure>
<nav>
<ul>
<li><a href="#"><span class="fa fa-refresh"></span></a></li>
<li><a href="#"><span class="fa fa-heart-o"></span></a></li>
<li><a href="#"><span>XL</span></a></li>
<li><a href="#"><span class="fa fa-square-o"></span></a></li>
<li><a href="#"><span class="fa fa-shopping-cart"></span></a></li>
</ul>
</nav>
<p class="name">Save My Trees</p>
<p class="price">$29</p>
</li>
</section>
<section>
<li>
<figure><img src="http://fillmurray.com/256/226" alt="What?!"></figure>
<nav>
<ul>
<li><a href="#"><span class="fa fa-refresh"></span></a></li>
<li><a href="#"><span class="fa fa-heart-o"></span></a></li>
<li><a href="#"><span>XL</span></a></li>
<li><a href="#"><span class="fa fa-square-o"></span></a></li>
<li><a href="#"><span class="fa fa-shopping-cart"></span></a></li>
</ul>
</nav>
<p class="name">Nature Lover</p>
<p class="price">$39</p>
</li>
</section>
<section>
<li>
<figure><img src="http://fillmurray.com/256/226" alt="What?!"></figure>
<nav>
<ul>
<li><a href="#"><span class="fa fa-refresh"></span></a></li>
<li><a href="#"><span class="fa fa-heart-o"></span></a></li>
<li><a href="#"><span>XL</span></a></li>
<li><a href="#"><span class="fa fa-square-o"></span></a></li>
<li><a href="#"><span class="fa fa-shopping-cart"></span></a></li>
</ul>
</nav>
<p class="name">Forrest Walk</p>
<p class="price">$19</p>
</li>
</section>
</ul>
</div>
</body>
</html>
@LoganArnett
Copy link
Author

CSS:

/* Product Grid CSS */

body {
  margin: 0;
}

a {
  color: #47A3DA;
}

#container {
  width: 80%;
  margin: auto;
}

ul {
  list-style-type: none;
  padding: 0;
}

section {
  margin-bottom: 10ex;
}

figure {
  margin: 0;
  position: relative;

}
img {
  height: auto;
  width: auto;
  border: 2px solid blue;
  position: relative;
}

nav {
  width: 100%;
  position: relative;
}

nav ul {
    list-style: none;
  overflow: hidden;
  position: relative;
}
    nav ul li {
        float: left;
}

div.blue {
  background-color: skyblue;
  height: 10pt;
  width: 10pt;
  margin-left: 0;
}

li > div.title {
  width: inherit;
}

.name {
  float: left;
}

.price {
  font-weight: bold;
  float: right;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment