Flexbox Photo Card

Learn CSS Flexbox by building a photo card

by Ayo Isaiah

HTML

<div class="photo">
  <div class="top">
    <button class="like-button" type="button">
      <svg fill="#f15151" class="BWSrD _2T3hc" version="1.1" viewBox="0 0 32 32" width="32" height="32" aria-hidden="false"><path d="M17.4 29c-.8.8-2 .8-2.8 0l-12.3-12.8c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.3 0l2.4 2.8 2.3-2.8c3.1-3.1 8.2-3.1 11.3 0 3.1 3.1 3.1 8.2 0 11.4l-12.2 12.8z"></path>
        <span>12</span>
      </svg>
    </button>
    <button class="collect-button" type="button">
      <svg class="_2rdbO _2T3hc" version="1.1" viewBox="0 0 32 32" width="32" height="32" aria-hidden="false"><path d="M14 3h4v26h-4zM29 14v4h-26v-4z"></path></svg>
      <span>Collect</span>
    </button>
  </div>
  <div class="bottom">
    <div class="photographer">
      <img class="profile-pic" src="https://images.unsplash.com/profile-1517439422941-5c2fdfe8d883?dpr=1&auto=format&fit=crop&w=64&h=64&q=60&crop=faces&bg=fff" alt="">
      <span class="photographer-name">Mark Adriane</span>
    </div>
    <button class="download-image">
      <svg class="Apljk _11dQc" version="1.1" viewBox="0 0 32 32" width="32" height="32" aria-hidden="false"><path d="M25.8 15.5l-7.8 7.2v-20.7h-4v20.7l-7.8-7.2-2.7 3 12.5 11.4 12.5-11.4z"></path></svg>
    </button>
  </div>
</div>

CSS

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.photo {
  margin: 20px auto;
  width: 416px;
  height: 640px;
  background: url("https://images.unsplash.com/photo-1539888955004-e113c5428a50?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7c6332fe301844bfb4e201cf8714b3e6&w=1000&q=80") top center no-repeat;
  background-size: cover;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

button {
  color: #777;
  fill: currentcolor;
  border: 1px solid transparent;
  background-color: hsla(0,0%,100%,.85);
  border-radius: 4px;
  padding: 0 11px;
  display: flex;
  align-items: center;
}

svg {
  width: 16px;
}

a {
  text-decoration: none;
}

.top {
  display: flex;
  justify-content: flex-end;
}

.top svg {
  margin-right: 5px;
}

.bottom {
  display: flex;
  justify-content: space-between;
}

.like-button {
  margin-right: 10px;
}

.photographer {
  display: flex;
  align-items: center;
}

.profile-pic {
  border-radius: 50%;
  width: 32px;
  margin-right: 10px;
}

.photographer-name {
  color: #fff;
  text-transform: uppercase;
}