Progate 中級 道場 top-wrapper

Question

発生している問題・エラーメッセージ

自分なりにはいろいろ試してみましたが何を間違えているのか分かりません。
もし、分かる方がいらっしゃいましたら回答をお願いします。
![イメージ説明](253ccd6d6f5cf8640ec01c51119cb8f7.png)

 <header>
    
  </header>
  <div class="top-wrapper">
    <div class="container">
      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
      <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
      <div class="btn-wrapper">
        <a class="btn signup" href="#">新規登録はこちら</a>
        <p>or</p>
        <a class="btn facebook" href="#">
          <span class="fa fa-facebook"></span>
          Facebookで登録</a>
        <a class="btn twitter" href="#">
          <span class="fa fa-twitter"></span>Twitterで登録</a>
      </div>
    </div>
  </div>
  <div class="lesson-wrapper">
    
  </div>
  <div class="message-wrapper">
    
  </div>
  <footer>
    
  </footer>

.container {
  width:1170px;
  margin: 0 auto;
}
.top-wrapper {
  background-image: url( https://prog-8.com/images/html/advanced/top.png);
  background-size:cover;
  padding-top: 180px;
  padding-bottom: 100px;
  color:#fff;
  text-align:center;
}
.top-wrapper h1{
  font-size:45px;
  opacity:0.7;
  letter-spacing:5px;
}
.top-wrapper p{
  opacity:0.7;
  margin-bottom:15px;
}

.btn {
  color:#fff;
  opacity:0.7;
  padding: 8px 24px;
  display:inline-block;
  border-radius:4px;
}
.signup {
  background-color: #239b76;
  margin-bottom: 15px;
  margin-top: 15px;
}
.facebook {
  background-color:#3b5998;
  margin-right: 10px;
}
.twitter {
  background-color: #55acee;
}


.fa {
  margin-right: 5px;
}
.btn:hover {
  opacity:1;
}

Comments

[x_x]

どんな問題が起こっているのかを書いてください。

Answer 1

.btn クラスにて宣言している opacity プロパティの値を 0.8 へ変更することで当該問題は解消すると思います。

.btn {
  color:#fff;
  opacity:0.8; /* 変更 */
  padding: 8px 24px;
  display:inline-block;
  border-radius:4px;
}