Skip to content

Instantly share code, notes, and snippets.

@CyberStrike
Created December 7, 2014 04:50
Show Gist options
  • Save CyberStrike/ffeaf9204fca1f5df7cb to your computer and use it in GitHub Desktop.
Save CyberStrike/ffeaf9204fca1f5df7cb to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.icon-group {
width: 30em;
}
.icon-group .icon {
width: 8.33333%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.icon-group .icon-content {
width: 90%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.icon-group .icon-content *:first-child {
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="icon-group">
<div class="icon">
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="icon-content">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, molestiae quis aspernatur. Rem vel harum autem. Eligendi quasi velit iste, autem, sunt nobis porro quo animi explicabo sed dicta veniam.</p>
</div>
</div>
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="icon-group">
<div class="icon">
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="icon-content">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, molestiae quis aspernatur. Rem vel harum autem. Eligendi quasi velit iste, autem, sunt nobis porro quo animi explicabo sed dicta veniam.</p>
</div>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.icon-group
width: 30em
.icon
width: 8.33333333%
float: left
position: relative
min-height: 1px
padding-right: 15px
padding-left: 15px
.icon-content
width: 90%
float: left
position: relative
min-height: 1px
padding-right: 15px
padding-left: 15px
*:first-child
margin-top: 0</script>
</body>
</html>
.icon-group {
width: 30em;
}
.icon-group .icon {
width: 8.33333%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.icon-group .icon-content {
width: 90%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.icon-group .icon-content *:first-child {
margin-top: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment