<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container" style="background-color: #f3f3f3;">
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="headline-card tracked loaded" style="height: 600px;">
<a class="image-wrap" href="#">
<img class="image image-small" src="https://assets.entrepreneur.com/content/16x9/822/1390609103-seed-doesnt-make-series-startups-never-reach-second-funding-round.jpg" />
</a>
<div class="not-interested">
<a class="btn btn-default close" href="#">
<span>Not Interested </span><i class="fa fa-close"></i></a>
</div>
<div class="news-source">
<div class="source-section first-section">
<a href="#">@Entrepreneur</a>
</div>
<div class="source-section first-section first-lower-section subscribe">
<button type="button" class="btn btn-success btn-xs btn-subscribe"><i class="fa fa-newspaper-o fa-lg"></i> BOOKMARK</button>
<span>222,980</span>
</div>
<div class="news-tags-reveal">
<span>254 views</span>
</div>
</div>
<div class="body">
<h3>
<a href="">5 Essentials for Maximizing Results From Seed Capital</a>
</h3>
<div class="news-info">
<span class="time"><i class="fa fa-user fa-1x"></i> 19 hours ago</span>
<span class="time"><i class="fa fa-calendar fa-1x"></i> 19 hours ago</span>
<span class="time"><i class="fa fa-clock-o fa-1x"></i> 1 min read</span>
</div>
</div>
<div class="text-preview">
<p>
<a href="#">One of my favorite consulting services is advising founders on how to build their startups. I work with a founder who knows what problem he wants his startup to solve and asked for advice on how to....</a>
</p>
</div>
<div class="news-tags">
<a class="news-tag" href="#">#Small Business</a>
<a class="news-tag" href="#">#Investing</a>
<a class="news-tag" href="#">#Business</a>
</div>
<div class="news-actions" role="group" aria-label="">
<a class="news-action" href="#"><i class="fa fa-share fa-lg"></i> 102</a>
<a class="news-action" href="#"><i class="fa fa-heart-o fa-lg"></i> 204</a>
<a class="news-action" href="#"><i class="fa fa-comments fa-lg"></i> 10</a>
<a class="news-action" href="#"><i class="fa fa-ellipsis-h fa-lg"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="headline-card tracked loaded" style="height: 600px;">
<img class="image image-small" src="https://assets.entrepreneur.com/content/16x9/822/1390609103-seed-doesnt-make-series-startups-never-reach-second-funding-round.jpg" />
<a class="gradient gradient-small" href="" id="header3"></a>
<div class="not-interested">
<a class="btn btn-default close" href="#">
<span>Not Interested </span><i class="fa fa-close"></i></a>
</div>
<div class="news-source">
<div class="source-section first-section">
<a href="#">@Entrepreneur</a>
</div>
<div class="source-section first-section first-lower-section subscribe">
<button type="button" class="btn btn-success btn-xs btn-subscribe"><i class="fa fa-newspaper-o fa-lg"></i> BOOKMARK</button>
<span>222,980</span>
</div>
<div class="news-tags-reveal">
<span>254 views</span>
</div>
</div>
<div class="body">
<h3>
<a href="">5 Essentials for Maximizing Results From Seed Capital</a>
</h3>
<div class="news-info">
<span class="time"><i class="fa fa-calendar fa-1x"></i> 19 hours ago</span>
<span class="time"><i class="fa fa-clock-o fa-1x"></i> 1 min read</span>
</div>
</div>
<div class="text-preview">
<p>
<a href="#">One of my favorite consulting services is advising founders on how to build their startups. I work with a founder who knows what problem he wants his startup to solve and asked for advice on how to....</a>
</p>
</div>
<div class="news-tags">
<a class="btn btn-link btn-xs btn-news-tag" href="#">#Small Business</a>
<a class="btn btn-link btn-xs btn-news-tag" href="#">#Investing</a>
<a class="btn btn-link btn-xs btn-news-tag" href="#">#Business</a>
</div>
<div class="news-actions" role="group" aria-label="">
<a class="btn btn-link btn-xs btn-action" href="#"><i class="fa fa-share-alt fa-lg"></i> 102</a>
<a class="btn btn-link btn-xs btn-action" href="#"><i class="fa fa-heart-o fa-lg"></i> 204</a>
<a class="btn btn-link btn-xs btn-action" href="#"><i class="fa fa-comments fa-lg"></i> 10</a>
<a class="btn btn-link btn-xs btn-action" href="#"><i class="fa fa-ellipsis-h fa-lg"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="headline-card tracked loaded" style="height: 600px;">
<img class="image image-small" src="https://assets.entrepreneur.com/content/16x9/822/1390609103-seed-doesnt-make-series-startups-never-reach-second-funding-round.jpg" />
<a class="gradient gradient-small" href="" id="header3"></a>
<div class="not-interested">
<a class="btn btn-default close" href="#">
<span>Not Interested </span><i class="fa fa-close"></i></a>
</div>
<div class="news-source">
<div class="source-section first-section">
<a href="#">@Entrepreneur</a>
</div>
<div class="source-section first-section first-lower-section subscribe">
<button type="button" class="btn btn-success btn-xs btn-subscribe"><i class="fa fa-newspaper-o fa-lg"></i> BOOKMARK</button>
<span>222,980</span>
</div>
<div class="news-tags-reveal">
<span>254 views</span>
</div>
</div>
<div class="body">
<h3>
<a href="">5 Essentials for Maximizing Results From Seed Capital</a>
</h3>
<div class="news-info">
<span class="time"><i class="fa fa-calendar fa-1x"></i> 19 hours ago</span>
<span class="time"><i class="fa fa-clock-o fa-1x"></i> 1 min read</span>
</div>
</div>
<div class="text-preview">
<p>
<a href="#">One of my favorite consulting services is advising founders on how to build their startups. I work with a founder who knows what problem he wants his startup to solve and asked for advice on how to....</a>
</p>
</div>
<div class="news-tags">
<a class="btn btn-link btn-xs btn-news-tag" href="#">#Small Business</a>
<a class="btn btn-link btn-xs btn-news-tag" href="#">#Investing</a>
<a class="btn btn-link btn-xs btn-news-tag" href="#">#Business</a>
</div>
<div class="news-actions" role="group" aria-label="">
<a class="btn btn-link btn-xs btn-action" href="#"><i class="fa fa-share-alt fa-lg"></i> 102</a>
<a class="btn btn-link btn-xs btn-action" href="#"><i class="fa fa-heart-o fa-lg"></i> 204</a>
<a class="btn btn-link btn-xs btn-action" href="#"><i class="fa fa-comments fa-lg"></i> 10</a>
<a class="btn btn-link btn-xs btn-action" href="#"><i class="fa fa-ellipsis-h fa-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
.headline-card {
overflow: hidden;
box-sizing: border-box;
position: relative;
background: #fff;
float: left;
margin: 0 0px 20px;
border-radius: 0px;
border: 0px;
}
.headline-card .image-wrap {
background: -webkit-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);
background: -moz-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);
background: linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);
text-decoration: none;
display: block;
}
.headline-card .image-small {
width: 358px;
height: 249px;
transition-property: -webkit-transform, opacity;
transition-duration: 0.6s, 0.3s;
}
.headline-card .gradient {
background: -webkit-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);
background: -moz-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);
background: linear-gradient(bottom,rgba(0,0,0,.7),rgba(0,0,0,0) 100%);
text-decoration: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.headline-card .gradient.gradient-small {
height: 249px;
}
.headline-card.loaded .gradient {
display: block;
}
.headline-card .body {
position: absolute;
bottom: 190px;
left: 15px;
right: 15px;
}
.headline-card .body h3 {
line-height: 1.4;
clear: both;
font-size: 20px;
font-family: opensans-bold,sans-serif;
margin-bottom: 7px;
/* text-shadow: 0 2px 10px rgba(0,0,0,.4); */
font-weight: bold;
}
.headline-card .body h3 a {
text-decoration: none;
color: #333;
}
.headline-card .news-info {
font-size: 12px;
color: #333;
font-family: opensans-light,sans-serif;
margin-bottom: 8px;
height: 15px;
}
.headline-card .news-info span {
display: inline-block;
overflow: hidden;
height: 15px;
border: 0px;
border-right: 1px solid #333;
padding-right: 8px;
padding-left: 5px;
}
.headline-card .news-info span:last-child {
border-right: 0px !important;
}
.headline-card .news-info a {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
color: #167ac6;
max-width: 150px;
height: 15px;
margin-left: 5px;
}
.headline-card .news-info a:hover,
.headline-card .news-info a:focus,
.headline-card .news-info a.focus,
.headline-card .news-info a:active,
.headline-card .news-info a.active {
text-decoration: underline;
}
.headline-card .not-interested {
top: 5px;
right: 8px;
position: absolute;
}
.headline-card .not-interested a {
height: 24px;
font-size: 12px;
text-transform: uppercase;
font-family: opensans,sans-serif;
display: block;
opacity: 1 !important;
color: #fff !important;
font-weight: normal !important;
padding: 5px !important;
border: 1px solid rgba(255, 255, 255, 0) !important;
text-shadow: none !important;
background-color: transparent;
}
.headline-card .not-interested a:hover,
.headline-card .not-interested a:active,
.headline-card .not-interested a:focus,
.headline-card .not-interested a.active,
.headline-card .not-interested a.focus {
border: 1px solid #fff !important;
border-radius: 0 !important;
}
.news-source {
position: absolute;
left: 15px;
right: 15px;
bottom: 290px;
height: 50px;
}
.news-source div.source-section {
position: absolute;
float: left;
}
.news-source div.source-section a {
font-size: 14px;
font-weight: bold;
}
.news-source div.first-section {
height: 26px;
}
.news-source div.first-lower-section {
margin-top: 26px;
height: 22px !important;
}
.news-source div.news-tags-reveal {
float: right;
margin-top: 26px;
border-bottom: 1px #777 solid;
}
.news-source div.news-tags-reveal span {
color: #777;
font-size: 13px;
}
.subscribe span {
border: 1px solid #ccc;
border-left: none !important;
padding: 3px 5px;
font-size: 12px;
margin-left: -5px;
}
.btn-subscribe{
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.headline-card .text-preview {
font-size: 15px;
position: absolute;
left: 15px;
right: 15px;
bottom: 100px;
line-height: 1.4;
overflow: hidden;
max-height: 90px;
}
.headline-card .text-preview a {
display: block;
text-decoration: none;
color: #000;
font-size: 14px;
}
.headline-card .text-preview * {
font-size: 14px;
font-style: normal;
line-height: 1.6;
margin: 0;
padding: 0;
}
.headline-card .news-tags {
overflow-y: hidden;
position: absolute;
left: 11px;
right: 11px;
bottom: 50px;
}
.news-tag {
font-family: opensans,sans-serif;
padding: 0px !important;
margin: 2px 4px !important;
font-size: 13px;
}
.headline-card .news-actions {
border-top: 1px solid #ccc;
position: absolute;
bottom: 0px;
left: 8px;
right: 8px;
padding: 4px 10px;
}
.news-action {
margin-top: 4px;
margin-bottom: 7px;
color: #777;
font-size: 13px;
text-decoration: none;
width: 73px;
text-align: start;
padding: 1px 0px;
line-height: 1.5;
border-radius: 3px;
display: inline-block;
font-weight: 400;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
.news-action:hover,
.news-action:focus,
.news-action.focus,
.news-action:active,
.news-action.active {
color: #000;
text-decoration: none;
}
.headline-card .news-actions .btn-action:last-child {
border-right: 1px solid rgba(255, 255, 255, 0) !important;
width: 16px !important;
}
a {
color: #3366cc;
text-decoration: none;
}
a#visited {
color: #427fed;
text-decoration: none;
}
/*------------------dont copy these lines----------------------*/
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
background-color: #f3f3f3;
}
.row {
margin: 30px 0;
}
.container {
padding-left: 5px !important;
padding-right: 5px !important;
}
#quicknav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#quicknav ul li {
display: inline;
}
#quicknav ul li a {
text-decoration: none;
padding: .2em 1em;
}
.btn-default {
margin-bottom: 40px;
}
/*-------------------------------------------------------------*/
$(document).ready(function() {
$('.btn-reveal').on('click', function() {
console.log('1 ', $(this).parent());
console.log('2 ', $(this).parent().parent().parent().children('div.news-tags'));
console.log('3 ', $(this).parent().parent('.news-tags'));
//$(this).parent().parent().parent().children('div.news-tags').toggle(true);
});
});
