Progate道場コースでわからないことがあります。

Progate道場コースでここから先に進めません。
どなたか教えて下さい。
HTML&CSS中級編道場コース　中級編復習　3.レッスン一覧部分を作ろう

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

レッスンの画像の説明や詳細のpタグが反映されません。

該当のソースコード

HTML&CSS
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
8  <!-- ここでFont Awesomeを読み込んでください -->
9  
10</head>
11<body>
12  <header>
13    <div class="container">
14      <div class="header-logo">
15        <img src="https://prog-8.com/images/html/advanced/main_logo.png">
16      </div>
17      <div class="login">ログイン</div>
18    </div>
19  </header>
20  <!-- ここにコードを書いていきましょう -->
21  <div class="top-wrapper">
22    <div class="container">
23      <h1>LEARN TO CODE.</h1>
24      <h1>LEARN TO BE CREATIVE.</h1>
25      <p>progateはオンラインプログラミング学習サービスです。</p>
26      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学びましょう。</p>
27      <div class="btn">
28        <a href="#" class="btn signup">新規登録はこちら</a>
29        <p>or</p>
30        <a href="#" class="btn facebook">
31          <span class="fa fa-facebook"></span>
32          Facebbokで登録</a>
33        <a href="#" class="btn twitter">
34          <span class="fa fa-twitter"></span>
35          Twitterで登録</a>
36      </div>
37    </div>
38  </div>  
39  <div class="main-wrapper">
40    <div class="container">
41      <div class="heading">
42        <h2>Learn Where to Get Started!</h2>
43      </div>
44      <div class="lesson">
45        <div class="lesson-icon">
46          <img src="https://prog-8.com/images/html/advanced/html.png">
47          <p>HTML & CSS</p>
48        </div>
49        <p class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
50      </div>
51      <div class="lesson">
52        <div class="lesson-icon">
53          <img src="https://prog-8.com/images/html/advanced/jQuery.png">
54          <p>JQuery</p>
55        </div>
56        <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
57      </div>
58      <div class="lesson">
59        <div class="lesson-icon">
60          <img src="https://prog-8.com/images/html/advanced/ruby.png">
61          <p>Ruby</p>
62        </div>
63        <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
64      </div>
65      <div class="lesson">
66        <div class="lesson-icon">
67          <img src="https://prog-8.com/images/html/advanced/php.png">
68          <p>PHP</p>
69        </div>
70        <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
71      </div>
72    </div>
73  </div>
74  
75</body>
76</html>

/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}
.container {
  width: 1170px;
  background-size: cover;
  margin: 0 auto;
 
}
/* ここからCSSを書いていきましょう */
.top-wrapper {
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;
  padding: 180px 0px 100px 0px;
  text-align: center;
}
.container h1 {
  color: white;
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
}
.container p {
  color: white;
  opacity: 0.7;
}
.signup {
  background-color: #239b76;
  margin-top: 23px;
  opacity: 0.8;
}
.facebook {
  background-color: #3b5998;
  opacity: 0.8;
  margin-right: 10px;
}
.twitter {
  background-color: #5accee;
  opacity: 0.8;
}
.btn {
  display: inline-block;
  padding: 8px 24px;
  color: white;
  border-radius: 4px;
}
.btn p {
  margin: 15px 0px;
}
header {
  background-color: rgba(34,49, 52,0.9);
  height: 65px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 10;
}
.header-logo img {
  width: 124px;
  padding: 20px 0px;
  float: left;
}
.btn:hover {
  opacity: 1;
}
.login {
  float: right;
  padding: 0px 25px;
  background-color: rgba(255,255,255,0.3);
  height: 65px;
  line-height: 65px;
  color: white;
  cursor: pointer;
  transition: all 0.5s;
  display: inline-block;
}
.login:hover {
  background-color: rgba(255,255,255,0.5);
}
.main-wrapper {
  height: 580px;
  text-align: center;
  background-color: #f7f7f7;
}
.container h2 {
  font-weight: normal;
  padding: 80px 0px 50px 0px;
  color: #5f5d60;
}
.lesson {
  float: left;
  width: 25%;
}
```### 
### 試したこと

Progate復習しましたがわかりませんでした。
![pタグ画像説明と詳細が反映されてません。](bb6a108e1a2c3f077b65e0212c8b916c.png)
![イメージ説明](4aed027cf04608e4d0a7a71b2aeacf71.png)

kyoya0819

2020/03/08 16:59

CSSをご提示ください。

m.ts10806

2020/03/08 21:48

もっと軽いhtmlで試した方が問題切り分けに繋げますよ。それに全ての人がProgateで学習するわけではなく回答者になるような人はそもそもオンライン学習使わない人も多いです。でなくても、具体的なコース名やレベルなど提示されないとそのコースのゴールや目的など確認しようがないのでは？

yuta73

2020/03/09 02:22

申し訳ございませんでした。編集致しましたので、どうかよろしくお願いします

行動規範の内容に同意します

回答1件

ベストアンサー

文字が白いから見えにくいだけでは。

CSS
1.container p {
2    color: white;
3    opacity: 0.7;
4}

投稿2020/03/09 02:28

kei344

総合スコア69407

yuta73

2020/03/09 15:36

カラーを変えたら表示されました！やっと解決しました！誠にありがとうございました。文字の色を変えればいいものを試しもせずに、貴重なご時間を奪ってしまい申し訳ありません。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！