GODOG DEMO

by claykaboom

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Go Dog!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
  </head>

  <body>
    <section class="section">

      <div class="hero is-medium  has-background">
        <img alt="Fill Murray" class="hero-background is-transparent" src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566_960_720.jpg" />
        <div class="hero-body">
          <div class="container">
            <h1 class="title">


              Go Dog - Perfil do TOTĂ“X
            </h1>
            <h3 class="subtitle">
              18 KM ACUMULADOS
            </h3>
          </div>
        </div>
      </div>



      <div class="container">
        <div class="columns">
          <div class="column">
            <div class="card">
              <div class="card-image">
                <figure class="image is-256x256">
                  <img src="https://www.trackyourtruck.com/profiles/sndev_install/themes/sndev/img/fleet-tracking-pic1b.jpg" alt="Placeholder image">
                </figure>
              </div>
              <div class="card-content">
                <div class="media">
                  <div class="media-left">
                    <figure class="image is-48x48">
                      <img src="https://www.trackyourtruck.com/profiles/sndev_install/themes/sndev/img/fleet-tracking-pic1b.jpg" alt="Placeholder image">
                    </figure>
                  </div>
                  <div class="media-content">
                    <p class="title is-4">CAMINHADA de 09/02 - 10:05 - 3KM</p>
                    <p class="subtitle is-6">@Mayara Pet Walker</p>
                  </div>
                </div>

                <div class="content">
                  Caminhada ensoladara...

CSS

.hero.has-background {
  position: relative;
  overflow: hidden;
}
.hero-background {
  position: absolute;
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}
.hero-background.is-transparent {
  opacity: 0.3;
}