LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Box Title 1

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Box Title 2

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Box Title 3

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Box Title 4

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

CSS
* {
  box-sizing: border-box;
}

.staggered-grid {
  overflow: hidden;
  margin: 30px 15px;
}
.staggered-grid .row {
  margin-left: 0;
  margin-right: 0;
}
.staggered-grid .col {
  padding: 30px 15px;
}
.staggered-grid .col h2:first-child {
  margin-top: 0;
}
.staggered-grid .col p:last-child {
  margin-bottom: 0;
}
.staggered-grid .imgwrapper {
  position: relative;
  margin: -45px;
  height: 400px;
  overflow: hidden;
}
.staggered-grid .imgwrapper img {
  object-fit: cover;
  /* safari */
  min-width: 101%;
  height: auto;
  min-height: 101%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (min-width: 600px) {
  .staggered-grid .row {
    min-height: 400px;
    display: flex;
    align-items: stretch;
  }
  .staggered-grid .row .col {
    position: relative;
    flex: 0 0 50%;
    padding: calc(5vw + 30px) 15px;
    display: flex;
    flex-flow: column;
    justify-content: center;
  }
  .staggered-grid .row:nth-child(even) .col {
    order: 2;
  }
  .staggered-grid .row:nth-child(even) .col + .col {
    order: 1;
  }
  .staggered-grid .row:first-child .col {
    padding-top: 30px;
  }
  .staggered-grid .row:first-child .col .imgwrapper {
    top: 0;
  }
  .staggered-grid .row:last-child .col {
    padding-bottom: 30px;
  }
  .staggered-grid .row:last-child .col .imgwrapper {
    bottom: 0;
  }
  .staggered-grid .imgwrapper {
    margin: 0;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -5vw;
    bottom: -5vw;
  }
}
Term
Fri, 01/12/2018 - 16:42

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv