gargLq

gargLq.markdown

gargLq

A Pen by Gianmarco on CodePen.

License.

index.html

<div class="banner-container">
  
  <div class="logos">
    
    <div class="logo logo-center">
        <img src="http://i.imgur.com/r7Ky7Vn.png">
    </div>
    
    <div class="logo logo-left">
    
      <img src="http://i.imgur.com/L2hzjxJ.png" alt="" />
      
    </div>
  
    
  </div>
  
  <div class="video-container">
  
    <div class="video">
    
      <iframe width="432" height="200" src="https://www.youtube.com/embed/PhoIFvGDzUY" frameborder="0" allowfullscreen></iframe>
      
    </div>
    
  </div>
  
  <div class="text">
  
    <h2>Title</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cumque soluta at quis quae assumenda aliquid animi placeat expedita alias</p>
    
    <a href="#" class="btn">Learn more</a>
    
  </div>
  
  <div class="football">
  
    <img src="http://i.imgur.com/XQOjIlD.png" alt="" />
    
  </div>
  
  <div class="bg">
  
  </div>
  
</div>

style.css

.banner-container{
  width: 970px;
  height: 328px;
  position: relative;
    
  overflow: hidden;
}

.bg{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(http://i.imgur.com/wSV0uMU.jpg);
   
  z-index: 1;
}

.logos{
  
  position: absolute;
  top: 10px;
  
  width: 100%;
  
  text-align: center;
  
  z-index: 2;
  
}

.logos{
  margin-top: .6em;
}

.logo-left{
  position: absolute;
  left: 1em;
  top: 0em;
}

.logo-center{
  top: 1em;
}

.video-container{
  
  position: absolute;
  z-index: 3;
  
  width: 100%;
  height: 200px;
    
  top: 92px;
  left: 0;
  right: 0;
  
  text-align: center;
}

.video{
  
  display: inline-block;
  position: relative;
  
  &:after{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    content: '';
    box-shadow: 0 0 30px 4px rgba( #85D8F9, .5);
    opacity: 1;
    animation: video 2s ease infinite alternate;
  }
  
  
  margin: 0 auto;
}

.football{
  position: absolute;
  top: 60px;
  left: 160px;
  
  z-index: 10;
  
  animation: football 40s linear infinite;
}

.text{
  position: absolute;
  right: 1.5em;
  top: 78px;
  width: 220px;
  
  color: white;
  
  z-index: 10;
  
  font-size: 12px;
  
  text-shadow: 0px 2px 2px rgba(0,0, 0, .7);
  
  h2{
    font-size: 1em;
  }
}

.btn{
  color: white;
  font-size: 16px;
  padding: .5em 1em;
  background-color: #ea0000;
  
  display: inline-block;
  
  border-radius: 4px;
  
  text-shadow: none;
  box-shadow: 0px 1px 3px rgba(0,0,0, .8);
  
  text-decoration: none;
}

@keyframes football{
  to{
    transform: rotate(360deg);
  }
}

@keyframes video{
  to{
    opacity: .2;
  }
}