Cards

by vanden1976

HTML

<!DOCTYPE HTML>
<html lang="bg" class="no-js">

  <head>
    <meta charset="utf-8">
  </head>

  <body>

  <main>

    <div class="cards-item">

      <div class="card">
        <div class="card-image">
          <img src="https://picsum.photos/300/200?random=1" alt="">
          <ul class="card-social">
            <li class="facebook"><a href="#">Facebook</a></li>
            <li class="twitter"><a href="#">Twitter</a></li>
            <li class="pinterest"><a href="#">Pinterest</a></li>
          </ul>
        </div>

        <div class="card-container">
          <div class="row">
            <div class="col"><span class="card-tag"><a href="#">Tag</a></span></div>
            <div class="col"><span class="card-date">2020.07.19</span></div>
          </div>
          <h5>Item Card Title</h5>
          <p>Curabitur quis justo commodo nisi luctus accumsan ut id ipsum. Maecenas eu fringilla mi, eu aliquam leo. Sed tempus purus felis, sit amet mattis libero posuere nec.</p>
          <p class="card-author">by <a href="#">Toshiro Mufune</a></p>
          <p class="card-button"><a href="#">Read More</a></p>
        </div>
      </div>
      <!--.card-->

      <div class="card">
        <div class="card-image">
          <img src="https://picsum.photos/300/200?random=2" alt="">
          <ul class="card-social">
            <li class="facebook"><a href="#">Facebook</a></li>
            <li class="twitter"><a href="#">Twitter</a></li>
            <li class="pinterest"><a href="#">Pinterest</a></li>
          </ul>
        </div>

        <div class="card-container">
          <div class="row">
            <div class="col"><span class="card-tag tomato"><a href="#">Tag</a></span></div>
            <div class="col"><span class="card-date">2020.07.19</span></div>
          </div>
          <h5>Item Card Title</h5>
          <p>Donec maximus sem eget dictum elementum. Etiam eu bibendum nisl. Aenean finibus tellus nisl, at dignissim turpis vehicula ut. Etiam vel orci...

CSS

* {
  margin: 0;
  padding: 0;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:invalid,
*:-moz-submit-invalid,
*:required,
*:-moz-placeholder,
*:-moz-focusring {
  outline: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

input[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=url],
input[type=date],
input[type=reset],
input[type=tel],
input[type=color],
input[type=time],
input[type=date],
input[type=week],
input[type=month],
input[type=range],
input[type=search],
input[type=datetime],
input[type=datetime-local],
textarea,
select {
  -webkit-appearance: none;
}

* :focus {
  outline: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white...