LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Sarah Connor

  • phone (321) 555–1234 Mobile
  • (321) 555–1234 Son
  • email sarah@sky.net Personal
  • john@sky.net Son
  • place 1419 Westwood Blvd, LA Home
CSS
.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh;
  background-color: #b3d4fc;
}

.contact-card {
  margin: 25px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  max-width: 820px;
}

.contact-card > .mdl-card__supporting-text > .mdl-list {
  margin-top: 0;
  padding-top: 0;
}

.contact-card > .mdl-card__title {
  height: 216px;
  color: #fff;
  background:
    url('https://images.unsplash.com/photo-1445052520430-32c8ebc92fe3?crop=entropy&dpr=2&fit=crop&fm=jpg&h=825&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450') no-repeat center center;
  background-size: cover;
  position: relative;
}

.contact-card > .mdl-card__title > .mdl-card__title-text {
  font-size: 32px;
  margin-left: 16px;
}

.contact-card > .mdl-card__title > .mdl-button--fab {
  position: absolute;
  right: 16px;
  bottom: -25px;
  overflow: hidden;
}

.contact-card > .mdl-card__menu {
  color: #fff;
}

@media (min-width: 720px) {
  .contact-card > .mdl-card__title {
    height: 360px;
  }

  .contact-card > .mdl-card__title > .mdl-card__title-text {
    font-size: 54px;
    margin-bottom: 16px;
    margin-left: 80px;
  }
  
  .contact-card > .mdl-card__supporting-text {
    padding: 32px;
  }
}
JS
// This is done using the Google MDL library: https://www.getmdl.io
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 22:00

Related Codes

Pen ID
Pen ID
Pen ID