<div class="contaner">
  <div class="header">
    <div class="logo">
      <img src="http://www.telestream.net/images/home/logo-product-gameshow.png" alt="" class="imag">
    </div>
    <div class="nav">
      <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
      </ul>
    </div>
  </div>
  <div class="hero">
    
    <div class="inner-hero">
         <h1>Welcome to Projection</h1>
    <b>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</b>
    <button>Lorem ipsum dolor</button>
    </div>
 
  </div>
  <div class="body">
    <div class="box">
      <img src="https://templated.co/items/demos/projection/images/pic01.jpg" alt="">
      <h3>Lorem ipsum
dolor amet nullam</h3>
      <p>Morbi in sem quis dui placerat ornare. Pellentesquenisi
euismod in, pharetra a, ultricies in diam sed arcu. Cras
consequat egestas augue vulputate.</p>
      <button>Learn more</button>
    </div>
    <div class="box">
      <img src="https://templated.co/items/demos/projection/images/pic02.jpg" alt="">
      <h3>Sed feugiat
tempus adipicsing</h3>
      <p>Pellentesque fermentum dolor. Aliquam quam lectus
facilisis auctor, ultrices ut, elementum vulputate, nunc
blandit ellenste egestagus commodo.</p>
      <button>Learn more</button>
    </div>
  </div>
  <div class="box2">
    <h2>Sed feugiat
tempus adipicsing</h2>
      <p>Pellentesque fermentum dolor. Aliquam quam lectus
facilisis auctor, ultrices ut, elementum vulputate, nunc
blandit ellenste egestagus commodo.</p>
    <button class="btn">Learn more</button>
  </div>
  <div class="foter">
   <p>Aweb Badge by Ahmed mohmed. Images: <a href="https://source.unsplash.com/">Unsplash</a></p>
  </div>
</div>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  color: #9a9a9a;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 14pt;
  font-weight: 400;
  line-height: 1.65;
}
.header{
  background-color: #383b43;
  width: 100%;
  height: 60px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo img{
  width: 50px;
  height: 50px;
}
.nav ul{
  list-style: none;
  width: 250px;
  color: #fff;
  display: flex;
  justify-content: space-around;
}
.nav ul:hover{
  cursor: pointer;
}
.hero {
  background: url(https://source.unsplash.com/random);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  clip-path: polygon(50% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%, 0% 0%);
}
.hero .inner-hero {
  background-color: rgba(255, 255, 255, 0.3);
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;  
}

.hero button{
  padding: 10px;
  background-color: transparent;
  color: #FFD600;
  border: 1px solid #FFD600;
  width: 300px;
  border-radius: 20px;
  margin-top: 30px;
  transition: all;
  transition-duration: 3s;
}
.hero button:hover{
  background: #FDD835;
  color: #fff;
}
.body{
  background-color: #fff;
  padding: 6em;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.box{
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 15px;
}
.box img{
  width: 150px;
  border-radius: 50%;
  margin-bottom: 50px;
}
.box h3{
  font-size: 1.75em;
  margin-bottom: 1em;
  color: #555;
}
.box button{
  padding: 10px;
  width: 300px;
  background-color: transparent;
  border: 1px solid #1B5E20;
  border-radius: 20px;
  color: #1B5E20;
  margin-top: 1em;
}
.box2{
  height: 250px;
  color: #fff;
  padding: 30px;
  background: url(https://source.unsplash.com/random);
  background-color: rgba(0, 0, 0, 0.5);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 500px;

}
.btn{
  padding: 10px;
  background-color: transparent;
  color: #FFD600;
  border: 1px solid #FFD600;
  width: 300px;
  border-radius: 20px;
  margin-top: 30px;
  transition-property: all;
  transition-duration: 3s;
  transition-delay: 2s;
}
.btn:hover{
  cursor: pointer;
  background: #BF360C;
  color: #fff;
  transform: rotatey(360deg);
}
.foter{
  background-color: #383B43;
  padding: 1.75em;
  text-align: center;
  color: #858585;
}
.foter a{
  color: #858585;
  text-decoration: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.