Банеры

html\css

by Denis Tverdokhlebov

HTML

<div class="card">
  <h1> DEMO </h1>
  <h2> Basics </h2>
  <img class="bg" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=46ca983e965cd79170e295735f423c83">
  Loren ipsum dolen 
  Loren ipsum dolen sit 
  Loren ipsum  sit dolen
  Loren ipsum dolen 
</div>

<div class="card">
  <h1> DATA </h1>
  <h2> Card </h2>
  <img class="bg" src="https://images.unsplash.com/photo-1518205329173-519f58b339ab?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a503f9c0908edb0573088fd46dc8b589">
  Loren ipsum dolen 
  Loren ipsum dolen sit 
  Loren ipsum  sit dolen
  Loren ipsum dolen 
</div>

<div class="card">
  <h1> UI.UX </h1>
  <h2> Design </h2>
  Loren ipsum dolen 
  Loren ipsum dolen sit 
  Loren ipsum  sit dolen
  Loren ipsum dolen 
</div>

<div class="card">
  <h1> GRAPH </h1>
  <h2> <svg width="30" height="36" viewBox="0 0 24 24">
  <path d="M17.45,15.18L22,7.31V19L22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L16.74,12.5L10.23,8.75L4.31,19H6.57L10.96,11.44L17.45,15.18Z"></path>
</svg> Elements </h2>
  <br/>
<svg class="el" width="56" height="56" viewBox="0 0 21 21">
  <path d="M3,11H5V13H3V11M11,5H13V9H11V5M9,11H13V15H11V13H9V11M15,11H17V13H19V11H21V13H19V15H21V19H19V21H17V19H13V21H11V17H15V15H17V13H15V11M19,19V15H17V19H19M15,3H21V9H15V3M17,5V7H19V5H17M3,3H9V9H3V3M5,5V7H7V5H5M3,15H9V21H3V15M5,17V19H7V17H5Z"></path>
</svg>  
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,800");

body {
  background: linear-gradient(#aab,#ffa);
  min-height: 100vh;
  padding: 5vw;
  font-family: 'Roboto', Arial;
}

.card {
  display: inline-block;
  margin: 15px;
  font-size: 14px;
  padding: 5px 100px 25px 30px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  text-shadow: 0px 1px 3px rgba(0,0,0,0.75);
  position: relative;
  overflow: hidden;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
  width: calc(33.3% - 180px);
  min-height: 140px;
  background: rgba(255,255,255,0.15);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"%3E%3C/path%3E%3C/svg%3E');
}

.card h1 {
  position: absolute;
  left: calc(100% - 200px);
  top: -30px;
  font-size: 80px;
  transform: rotate(-35deg);
  color: rgba(0,0,0,0.07);
  text-shadow: none;
}

.card img.bg {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}

.card h2 {
  color: rgba(0,0,0,0.35);
  font-weight: 800;
  font-size: 28px;
  margin: 10px 0px 8px -2px;
  text-shadow: none;
}

.card h2 svg {
  height: 25px;
  vertical-align: -2px;
  opacity: 0.3;
}
.card .el {
  vertical-align: -2px;
  opacity: 0.3;
  margin-left: -5px;
}

@media only screen and (max-width: 1200px) {
  .card {  
    width: calc(50% - 170px);
  }
}

@media only screen and (max-width: 800px) {
  .card {  
    width: calc(100% - 160px);
  }
}

::-webkit-scrollbar {
  background: transparent;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #123;
  border-radius:10px;
}