Menu icon Foundation

Coder | Budapest

My Posts


My Comments

Tibor Szász commented on Tibor Szász's post over 3 years

Well don't rely on this. This only looks good in chrome. All other browsers renders this differently and awfully. Shame.

Tibor Szász commented on Tibor Szász's post over 3 years

I managed to build it with flexboxes:

  <section class="blocks">
    <div class="row">
      <div class="block text-center columns small-4">
        <div class="wrapper">
          <div class="small-12 title columns">
            <h3>CO-WORKING COMMUNITY</h3>
          </div>
          <div class="small-12 body columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam ipsa sint dolorem provident impedit doloribus totam neque consectetur. Omnis accusamus nemo laboriosam magni quas doloribus odit minima, quaerat qui.</p>
          </div>
          <div class="small-12 action columns">
            <a class="button">Learn more</a>
          </div>
        </div>
      </div>
      <div class="block text-center columns small-4">
        <div class="wrapper">
          <div class="small-12 title columns">
            <h3>Title</h3>
          </div>
          <div class="small-12 body columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. qui.</p>
          </div>
          <div class="small-12 action columns">
            <a class="button">Learn more</a>
          </div>
        </div>
      </div>
      <div class="block text-center columns small-4">
        <div class="wrapper">
          <div class="small-12 title columns">
            <h3>Title</h3>
          </div>
          <div class="small-12 body columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam ipsa sint dolorem provident impedit doloribus totam neque consectetur. Omnis accusamus nemo laboriosam magni quas doloribus odit minima, quaerat qui.</p>
          </div>
          <div class="small-12 action columns">
            <a class="button">Learn more</a>
          </div>
        </div>
      </div>
    </div>
  </section>
section.blocks {

  padding: 3rem 0;
  background: $dirty-white;

  .columns {
    display: flex;
    flex-direction: column;
  }

  .block {
    position: relative;

    .wrapper {
      display: flex;
      flex-direction: column;
      border: 2px solid $black;
      flex: 1;
      background: $white;

      .title {
        flex: 0 0 100%;
        height: 8rem;
        justify-content: center;
        width: 100%;
        position: relative;

        h3 {
          font-size: 1.6rem;
          line-height: 1.8rem;
          margin: 0 3rem;
        }

        &:after {
          content: '';
          position: absolute;
          left: 1.5rem;
          right: 1.5rem;
          height: 1px;
          background: $ultra-light-gray;
          bottom: 0;
        }
      }

      .body {
        flex: 1 1 100%;
        padding: 1.5rem;
      }

      .action {
        flex: 0 0 100%;

        a {
          min-width: inherit;
          margin: 0rem 3rem 3rem 3rem;
        }
      }
    }
  }
}

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Tibor Szász's post over 3 years

Well don't rely on this. This only looks good in chrome. All other browsers renders this differently and awfully. Shame.

You commented on Tibor Szász's post over 3 years

I managed to build it with flexboxes:

  <section class="blocks">
    <div class="row">
      <div class="block text-center columns small-4">
        <div class="wrapper">
          <div class="small-12 title columns">
            <h3>CO-WORKING COMMUNITY</h3>
          </div>
          <div class="small-12 body columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam ipsa sint dolorem provident impedit doloribus totam neque consectetur. Omnis accusamus nemo laboriosam magni quas doloribus odit minima, quaerat qui.</p>
          </div>
          <div class="small-12 action columns">
            <a class="button">Learn more</a>
          </div>
        </div>
      </div>
      <div class="block text-center columns small-4">
        <div class="wrapper">
          <div class="small-12 title columns">
            <h3>Title</h3>
          </div>
          <div class="small-12 body columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. qui.</p>
          </div>
          <div class="small-12 action columns">
            <a class="button">Learn more</a>
          </div>
        </div>
      </div>
      <div class="block text-center columns small-4">
        <div class="wrapper">
          <div class="small-12 title columns">
            <h3>Title</h3>
          </div>
          <div class="small-12 body columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam ipsa sint dolorem provident impedit doloribus totam neque consectetur. Omnis accusamus nemo laboriosam magni quas doloribus odit minima, quaerat qui.</p>
          </div>
          <div class="small-12 action columns">
            <a class="button">Learn more</a>
          </div>
        </div>
      </div>
    </div>
  </section>
section.blocks {

  padding: 3rem 0;
  background: $dirty-white;

  .columns {
    display: flex;
    flex-direction: column;
  }

  .block {
    position: relative;

    .wrapper {
      display: flex;
      flex-direction: column;
      border: 2px solid $black;
      flex: 1;
      background: $white;

      .title {
        flex: 0 0 100%;
        height: 8rem;
        justify-content: center;
        width: 100%;
        position: relative;

        h3 {
          font-size: 1.6rem;
          line-height: 1.8rem;
          margin: 0 3rem;
        }

        &:after {
          content: '';
          position: absolute;
          left: 1.5rem;
          right: 1.5rem;
          height: 1px;
          background: $ultra-light-gray;
          bottom: 0;
        }
      }

      .body {
        flex: 1 1 100%;
        padding: 1.5rem;
      }

      .action {
        flex: 0 0 100%;

        a {
          min-width: inherit;
          margin: 0rem 3rem 3rem 3rem;
        }
      }
    }
  }
}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content