トップ部分を作ろう

<div class="top">

    <div class="box">

      <h1>LEAN TO CODE.<br>LEARN TO BE CREATIVE.</h1>

      <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>

    　<a href="#" class="btn signup">新規登録はこちら</a>

      <ap>or</ap>

      <a href="#" class="btn facebook"><span👈https://html-coding.co.jp/annex/dictionary/html/span/

class="fa fa-facebook">👈https://saruwakakun.com/html-css/basic/font-awesome</span>Facebookで登録</a>

      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>

    </div>

</div>

.top{

  padding-top:180px;

  padding-bottom:100px;

  background-image:url(https://prog-8.com/images/html/advanced/top.png);

  background-size: cover;

  color:white;

  text-align:center;

}

.box{

  width:1170px;

  margin:0 auto;

}

.top h1{

  font-size:45px;

  opacity:0.7;

  letter-spacing:5px;

}

.top p{

  opacity:0.7;

  margin-bottom:15px;

}

.signup{

  background-color:#239b76;

  margin-top:15px;

  margin-bottom:15px;

  opacity:0.8;

}

.facebook{

  margin-right:10px;

  background-color:#3b5998;

  opacity:0.8;

}

.twitter{

  background-color:#55acee;

}

.btn{

  padding:8px 24px;

  color: white;

  display: inline-block;

  opacity: 0.8;

  border-radius: 4px;

}

.btn:hover {

  opacity: 1;

}

.fa {

  margin-right: 5px;

}