LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

developer . designer . creator

CSS
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}

header {
  width: 100%;
  height: 100vh;
  background-color: #333;
  position: relative;
  background-image: url(https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?q=80&fm=jpg&s=79978a74e55792a7a5182ba0c0aa4e25);
  background-size: cover;
  background-position: center top;
}
header .head-text {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
header .head-text svg {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
}
header .head-text #j, header .head-text #i, header .head-text #m1, header .head-text #m2, header .head-text #y, header .head-text #v, header .head-text #a, header .head-text #n1, header .head-text #d, header .head-text #e1, header .head-text #r, header .head-text #s, header .head-text #l, header .head-text #e2, header .head-text #e3, header .head-text #n2 {
  fill: transparent;
  stroke: #fff;
  stroke-dasharray: 643px;
  stroke-dashoffset: 643px;
  -webkit-animation: borderani 5s forwards, stokeFill 4s 1s forwards;
          animation: borderani 5s forwards, stokeFill 4s 1s forwards;
}
@-webkit-keyframes borderani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes borderani {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes stokeFill {
  to {
    fill: #fff;
    fill-opacity: 1;
    stroke: transparent;
  }
}
@keyframes stokeFill {
  to {
    fill: #fff;
    fill-opacity: 1;
    stroke: transparent;
  }
}
header .head-text p {
  color: #fff;
  text-align: center;
}
header .links {
  width: 0;
  height: 0;
  bottom: 0px;
  left: 0;
  border-top: 100px solid transparent;
  border-left: 50vw solid #fff;
  border-bottom: 0px solid transparent;
  position: absolute;
}
header .rechts {
  width: 0;
  height: 0;
  bottom: 0px;
  right: 0;
  border-top: 100px solid transparent;
  border-right: 50vw solid #fff;
  border-bottom: 0px solid transparent;
  position: absolute;
}

.filler {
  height: 1000px;
}
Term
Sat, 04/14/2018 - 20:48

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv