JSFiddle - React, Tailwind, and code Playground
Reside V.3 Base - Property Lists Again
by Jennifer Perrin
HTML
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/bootstrap.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/custom.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/styles.css">
<script src="http://jennperrin.com/edge/Reside-V3/js/bootstrap.min.js"></script>
<script src="http://jennperrin.com/edge/Reside-V3/js/custom.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container page_block noTopBorder noBotBorder">
<div class="header-cont">
<div class="row">
<div class="col-md-6">
<div class="contact-text">
Need Help? <i class="fa fa-phone"></i> (555) 555-5454 </div>
</div>
<div class="col-md-6">
<div class="header-social-links">
<a href="http://facebook.com" class="facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"><i class="fa fa-facebook"></i></a><a href="http://google.com" class="google" data-toggle="tooltip" data-placement="bottom" title="Google+"><i class="fa fa-google-plus"></i></a><a href="http://linkedin.com" class="linkedin" data-toggle="tooltip" data-placement="bottom" title="LinkedIn"><i class="fa fa-linkedin"></i></a><a href="http://twitter.com" class="twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"><i class="fa fa-twitter"></i></a> </div>
</div>
</div>
<hr class="mt-10 mb-10" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
...
CSS
.ribbon.top-left.propLists {
left: 10px;
top: -6px;
}
.thumbnail { min-height: 465px; }
.thumbnail:hover {
border: 1px solid #2e6da4;
transition: border 0.2s ease-in-out 0s;
}
.thumbnail img:hover { opacity: 0.9; }