web-components/dist/hero.css

Build and Test React Components in real time

.container {
  /* Ensure the width of the element is already 100% no matter the width of the parent */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.content {
  color: white;
  text-align: center;

  width: 90%;

  margin: 0 auto;
}

.caption {
  color: white;
}

.description {
  color: whitesmoke;
  font-size: 1.2em;
  font-weight: lighter;

  line-height: 1.5;
  letter-spacing: 0.1em;
}

.bottom {
  color: white;
  font-size: 1.2em;

  margin: 0 auto;

  -ms-flex-item-align: end;

      align-self: flex-end;
}