layout-home.html

<!DOCTYPE html>
<html lang="en" class="has-navbar-fixed-top has-background-white-ter">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  <title>Projetos - Catarsinho</title>
</head>
<body>
  <nav class="navbar is-primary is-fixed-top">
    <div class="navbar-brand">
      <a class="navbar-item is-size-4 has-text-weight-bold" href="/">Catarsinho</a>
    </div>
    <div class="navbar-end">
      <div class="navbar-item has-text-weight-bold">
        3 itens
      </div>
      <div class="navbar-item has-text-weight-bold">
        Total R$ 30,00
      </div>
    </div>
  </nav>
  <section class="section">
    <div class="container">
      <div class="columns is-multiline">
        <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile" v-for="project in projects" :key="project.id">
          <div class="card" >
            <div class="card-image">
              <a href="/project/1">
                <figure class="image is-16by9">
                  <img src="https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/127841/project_thumb_large_ai_meu_deus_arlindo.jpg">
                </figure>
              </a>
            </div>

            <div class="card-content">
              <div class="media-content">
                <p class="title is-4 is-clipped">
                  <a href="/project/1" class="has-text-dark">Arlindo</a>
                </p>
                <progress class="progress is-success" value="73" max="100">73%</progress>
              </div>

            </div>
            <footer class="card-footer">
              <p class="card-footer-item has-text-weight-bold">73%</p>
              <p class="card-footer-item has-text-centered">
                <span class="has-text-weight-bold">
                  R$ 385.000,00
                  <br/>
                  <span class="has-text-weight-normal">arrecadados</span>
                </span>
              </p>
            </footer>
          </div>
        </div>
        <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile" v-for="project in projects" :key="project.id">
          <div class="card" >
            <div class="card-image">
              <a href="/project/1">
                <figure class="image is-16by9">
                  <img src="https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/127841/project_thumb_large_ai_meu_deus_arlindo.jpg">
                </figure>
              </a>
            </div>

            <div class="card-content">
              <div class="media-content">
                <p class="title is-4 is-clipped">
                  <a href="/project/1" class="has-text-dark">Arlindo</a>
                </p>
                <progress class="progress is-success" value="73" max="100">73%</progress>
              </div>

            </div>
            <footer class="card-footer">
              <p class="card-footer-item has-text-weight-bold">73%</p>
              <p class="card-footer-item has-text-centered">
                <span class="has-text-weight-bold">
                  R$ 385.000,00
                  <br/>
                  <span class="has-text-weight-normal">arrecadados</span>
                </span>
              </p>
            </footer>
          </div>
        </div>
        <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile" v-for="project in projects" :key="project.id">
          <div class="card" >
            <div class="card-image">
              <a href="/project/1">
                <figure class="image is-16by9">
                  <img src="https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/127841/project_thumb_large_ai_meu_deus_arlindo.jpg">
                </figure>
              </a>
            </div>

            <div class="card-content">
              <div class="media-content">
                <p class="title is-4 is-clipped">
                  <a href="/project/1" class="has-text-dark">Arlindo</a>
                </p>
                <progress class="progress is-success" value="73" max="100">73%</progress>
              </div>

            </div>
            <footer class="card-footer">
              <p class="card-footer-item has-text-weight-bold">73%</p>
              <p class="card-footer-item has-text-centered">
                <span class="has-text-weight-bold">
                  R$ 385.000,00
                  <br/>
                  <span class="has-text-weight-normal">arrecadados</span>
                </span>
              </p>
            </footer>
          </div>
        </div>
        <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile" v-for="project in projects" :key="project.id">
          <div class="card" >
            <div class="card-image">
              <a href="/project/1">
                <figure class="image is-16by9">
                  <img src="https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/127841/project_thumb_large_ai_meu_deus_arlindo.jpg">
                </figure>
              </a>
            </div>

            <div class="card-content">
              <div class="media-content">
                <p class="title is-4 is-clipped">
                  <a href="/project/1" class="has-text-dark">Arlindo</a>
                </p>
                <progress class="progress is-success" value="73" max="100">73%</progress>
              </div>

            </div>
            <footer class="card-footer">
              <p class="card-footer-item has-text-weight-bold">73%</p>
              <p class="card-footer-item has-text-centered">
                <span class="has-text-weight-bold">
                  R$ 385.000,00
                  <br/>
                  <span class="has-text-weight-normal">arrecadados</span>
                </span>
              </p>
            </footer>
          </div>
        </div>
        <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile" v-for="project in projects" :key="project.id">
          <div class="card" >
            <div class="card-image">
              <a href="/project/1">
                <figure class="image is-16by9">
                  <img src="https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/127841/project_thumb_large_ai_meu_deus_arlindo.jpg">
                </figure>
              </a>
            </div>

            <div class="card-content">
              <div class="media-content">
                <p class="title is-4 is-clipped">
                  <a href="/project/1" class="has-text-dark">Arlindo</a>
                </p>
                <progress class="progress is-success" value="73" max="100">73%</progress>
              </div>

            </div>
            <footer class="card-footer">
              <p class="card-footer-item has-text-weight-bold">73%</p>
              <p class="card-footer-item has-text-centered">
                <span class="has-text-weight-bold">
                  R$ 385.000,00
                  <br/>
                  <span class="has-text-weight-normal">arrecadados</span>
                </span>
              </p>
            </footer>
          </div>
        </div>
        <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile" v-for="project in projects" :key="project.id">
          <div class="card" >
            <div class="card-image">
              <a href="/project/1">
                <figure class="image is-16by9">
                  <img src="https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/127841/project_thumb_large_ai_meu_deus_arlindo.jpg">
                </figure>
              </a>
            </div>

            <div class="card-content">
              <div class="media-content">
                <p class="title is-4 is-clipped">
                  <a href="/project/1" class="has-text-dark">Arlindo</a>
                </p>
                <progress class="progress is-success" value="73" max="100">73%</progress>
              </div>

            </div>
            <footer class="card-footer">
              <p class="card-footer-item has-text-weight-bold">73%</p>
              <p class="card-footer-item has-text-centered">
                <span class="has-text-weight-bold">
                  R$ 385.000,00
                  <br/>
                  <span class="has-text-weight-normal">arrecadados</span>
                </span>
              </p>
            </footer>
          </div>
        </div>
        <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile" v-for="project in projects" :key="project.id">
          <div class="card" >
            <div class="card-image">
              <a href="/project/1">
                <figure class="image is-16by9">
                  <img src="https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/127841/project_thumb_large_ai_meu_deus_arlindo.jpg">
                </figure>
              </a>
            </div>

            <div class="card-content">
              <div class="media-content">
                <p class="title is-4 is-clipped">
                  <a href="/project/1" class="has-text-dark">Arlindo</a>
                </p>
                <progress class="progress is-success" value="73" max="100">73%</progress>
              </div>

            </div>
            <footer class="card-footer">
              <p class="card-footer-item has-text-weight-bold">73%</p>
              <p class="card-footer-item has-text-centered">
                <span class="has-text-weight-bold">
                  R$ 385.000,00
                  <br/>
                  <span class="has-text-weight-normal">arrecadados</span>
                </span>
              </p>
            </footer>
          </div>
        </div>
        <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile" v-for="project in projects" :key="project.id">
          <div class="card" >
            <div class="card-image">
              <a href="/project/1">
                <figure class="image is-16by9">
                  <img src="https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/127841/project_thumb_large_ai_meu_deus_arlindo.jpg">
                </figure>
              </a>
            </div>

            <div class="card-content">
              <div class="media-content">
                <p class="title is-4 is-clipped">
                  <a href="/project/1" class="has-text-dark">Arlindo</a>
                </p>
                <progress class="progress is-success" value="73" max="100">73%</progress>
              </div>

            </div>
            <footer class="card-footer">
              <p class="card-footer-item has-text-weight-bold">73%</p>
              <p class="card-footer-item has-text-centered">
                <span class="has-text-weight-bold">
                  R$ 385.000,00
                  <br/>
                  <span class="has-text-weight-normal">arrecadados</span>
                </span>
              </p>
            </footer>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>