College of Business Style Guide

Event Square 

<div class="event-box zoom">
    <a href="">
        <div class="event-box-image">
            <img src="/images/Hulvat-2017-2.png" alt="" />
        </div>
        <div class="event-box-text gold">
            <div class="event-box-content">
                <h2>Executive Project Sponsorship Certificate Program</h2>
                <p>Thursday, May 16</p>
            </div>
        </div><!-- end event-box-text -->
    </a>
</div><!-- end event-box -->
 
<div class="event-box zoom">
    <a href="{{ url }}">
        <div class="event-box-image">
            {% block cms_override %}
                <img src="{{ img_src }}" alt="" />
            {% endblock cms_override %}
        </div>
        <div class="event-box-text {{ color }}">
            <div class="event-box-content">
                <h2>{{ title|raw }}</h2>
                <p>{{ date }}</p>
            </div>
        </div><!-- end event-box-text -->
    </a>
</div><!-- end event-box -->
 
{
  "img_src": "/images/Hulvat-2017-2.png",
  "title": "Executive Project Sponsorship Certificate Program",
  "date": "Thursday, May 16",
  "color": "gold"
}
  • Content: 
    .event-box {
  width: 358px;
  height: 336px;
  position: relative;
  overflow: hidden;

  @media only screen and (min-width: $break-desktop) {
    width: 358px;
    height: 336px;
  }

  a {
    &:hover,
    &:focus {
      text-decoration: none;
    }
  }

  &-text {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: $space;
    bottom: 0;
    color: $white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    @media only screen and (min-width: $break-desktop) {
      background: linear-gradient(rgba(80, 83, 31, 0.6), rgba(0, 0, 0, 0.6));

      &.gold {
        background: linear-gradient(rgba(251, 221, 64, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.teal {
        background: linear-gradient(rgba(136, 198, 188, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.blue {
        background: linear-gradient(rgba(129, 176, 210, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.brown {
        background: linear-gradient(rgba(80, 45, 14, 0.8), rgba(0, 0, 0, 0.8));
      }
    }
  }

  &-content {
    position: absolute;

    @media only screen and (min-width: $break-desktop) {
      padding: 0 $space-three-quarter 0 0;
      overflow-y: hidden;
    }

    h2 {
      font-size: 1.5rem;
      font-weight: bold;
    }
  }


  &.zoom {
    overflow: hidden;

    .event-box-image {
      height: 100%;
      width: 100%;
      transition: all 0.2s ease;

      img {
        width: 100%;
        transition: all 0.2s ease;
      }
    }

    &:hover,
    &:focus {
      .event-box-image {
        img {
          transform: scale(1.25);
          transition: all 0.2s ease;
        }
      }
    }

    .event-box-text {
      &.gold {
        background: linear-gradient(rgba(251, 221, 64, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.teal {
        background: linear-gradient(rgba(136, 198, 188, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.blue {
        background: linear-gradient(rgba(129, 176, 210, 0.8), rgba(0, 0, 0, 0.8));
      }

      &.brown {
        background: linear-gradient(rgba(80, 45, 14, 0.8), rgba(0, 0, 0, 0.8));
      }
    }
  }
}
  • URL: /components/raw/event_square/event_square.scss
  • Filesystem Path: components/02-pieces/09-events/02-event_square/event_square.scss
  • Size: 2.1 KB

No notes defined.