Bootstrap Snippet list card using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class='container'>
  <div class='blog-posts'>
    <div class='post featured'>
      <a href='#'>
        <div class='image' style='background-image: url(https://unsplash.it/600/400/?random)'>
          <div class='time'>
            <div class='date'>04</div>
            <div class='month'>APR</div>
          </div>
        </div>
        <div class='content'>
          <h1>Multiply created make behold fourth yielding living male very god.</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas illo tempore at eveniet adipisci harum error deserunt in sint aspernatur magni asperiores explicabo corporis ratione praesentium illum magnam esse ipsa dignissimos quaerat perferendis dolor vero? Maiores hic modi optio eaque...</p>
          <div class='meta'>
            <div class='icon-comment'>22 Comments</div>
            <ul class='tags'>
              <li></li>
              <li></li>
            </ul>
          </div>
        </div>
      </a>
    </div>
    <div class='row cf'>
      <div class='post'>
        <a href='#'>
          <div class='image'>
            <div class='time'>
              <div class='date'>
                24
              </div>
              <div class='month'>MAR</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800|Merriweather:300);
@import url(https://markmurray.co/codepen/customstyle.css);
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a, a:visited {
  display: block;
  text-decoration: inherit;
  color: inherit;
}
html, body {
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  background: #e2e5eb;
}
.container {
  padding: 0.5em 1em 1em;
  max-width: calc(1400px + 1em);
  margin: 0 auto;
  overflow: hidden;
}
.container .blog-posts .featured {
  width: 100% !important;
  height: 250px !important;
  margin: 0.5em 0 1em 0 !important;
}
.container .blog-posts .featured .image {
  height: 250px !important;
}
.container .blog-posts .featured .content {
  height: 250px !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
function rand(min, max) {
  return Math.floor(Math.random() * max) + min;
}
document.querySelectorAll('.post:not(.featured)').forEach((post) => {
  post.querySelector('.image').style.backgroundImage = `url("https://unsplash.it/300/300/?image=${rand(100, 1000)}")`;
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"list card"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"list card" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"list card"
Bootstrap 3.0.0 Snippet by evarevirus