HTML&CSS 道場コース　初級編　フッターについての質問

下の画像のフッターのプレビューのProgateの文字を見本と同じようにしたいです。
どう変えたらいいのかわかりません。

よろしくお願いします。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <!-- ここからHTMLを書き始めてください -->
10    <div class="header">
11      <div class="header-logo">
12        Progate
13      </div>
14      <div class="header-list">
15        <ul>
16         <li>プログラミングとは</li>
17         <li>学べるレッスン</li>
18         <li>お問い合わせ</li>
19        </ul>
20      </div>
21    </div>
22    <div class="main">
23      <div class="copy-container">
24        <h1>HELLO WORLD<span>.</span></h1>
25        <h2>プログラミングの世界へようこそ</h2>
26      </div>  
27      
28    </div>
29    <div class="contents">
30      <h3 class="section-title">学べるレッスン</h3>
31      <div class="contents-item">
32        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
33        <p>HTML & CSS</p>
34      </div>
35      <div class="contents-item">
36        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
37        <p>PHP</p>
38      </div>
39      <div class="contents-item">
40        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
41        <p>Ruby</p>
42      </div>
43      <div class="contents-item">
44        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
45        <p>Swift</p>     
46      </div>
47    </div>
48    <div class="contact-form">
49      <h3 class="section-title">お問い合わせ</h3>
50      <p>メールアドレス（必須）</p>
51      <input>
52      <p>お問い合わせ内容（必須）</p>
53      <textarea></textarea>
54      <p>※必須項目は必ずご入力ください</p>
55      <input class="contact-submit" type="submit" value="送信">
56    </div>
57    <div class="footer">
58      <div class="footer-logo">
59        <h3>Progate</h3>
60      </div>
61      <div class="footer-list">
62        <ul>
63          <li>会社概要</li>
64          <li>採用</li>
65          <li>お問い合わせ</li>
66        </ul>
67      </div>
68  </body>
69</html>

css
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p,
4form, input, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17/* ここからCSSを記述してください */
18.header{
19  background-color:#26d0c9;
20  height:90px;
21}
22.header-logo{
23  font-size:36px;
24  color:#fff;
25  margin:20px 40px;
26  float:left;
27}
28
29.header-list li{
30  list-style:none;
31  color:#fff;
32  float:left;
33  background-color:#26d0c9;
34  margin:33px 20px;
35}
36.copy-container{
37  margin-top:100px;
38  margin-left:80px;
39  margin-right:80px;
40}
41.copy-container h1{
42 font-size:140px; 
43 
44}
45.copy-container h2{
46  font-size:60px;
47}
48span{
49  color:#ff4a4a;
50}
51
52.contents{
53  height:500px;
54  margin:100px 80px;
55}
56.contents-item{
57  margin-top:50px;
58  padding:0 40px 30px 0;
59  float:left;
60}
61.section-title{
62  padding-bottom:15px;
63  border-bottom:2px solid #dee7ec;
64  font-size:28px;
65  }
66  
67  .contents-item p{
68    font-size:24px;
69    padding-top:30px;
70  }
71  .contact-form{
72    margin:100px 80px;
73  }
74  .contact-form p{
75    margin-bottom:10px;
76  }
77  .contact-form h3{
78    margin-bottom:50px;
79  }
80  input,textarea{
81    border:1px solid #dee7ec;
82    font-size:18px;
83    width:400px;
84    padding:20px;
85    margin-bottom:30px;
86  }
87  .contact-submit{
88    color:#889eab;
89    background-color:#dee7ec;
90  }
91  
92  .footer{
93    background-color:#2f5167;
94    color:#fff;
95    padding:40px;
96    height:120px;
97  }
98  .footer-logo{
99    font-size:32px;
100    float:left;
101  }
102  .footer-list{
103    float:right;
104  }
105  .footer-list li{
106    padding-bottom:20px;
107  }

miyabi_pudding

2020/02/18 01:22

Progateのこれまでのカリキュラムで方法を習ってないんですか？習ったはずですよ。

m.ts10806

2020/02/18 01:39

いっそ「見本のコード丸写し」すれば良いかと。それが学習になるかは置いといて、目的が「見本の通り作ること」ならそれでいいし、「実務でも使える能力をつけること」なら他人に頼らず考えて解決すべき内容です。さて、あなたは何を目指してコースを受講しているのでしょう？

退会済みユーザー

2020/02/18 01:55

miyabi_takatsukさん習ったようにしましたが、同じようにならなかったので質問させていただきました。しかし、これくらいの問題で質問するのは良くなっかたと反省しています。コメントありがとうございました。

退会済みユーザー

2020/02/18 01:56

m.ts10806さんアドバイスありがとうございます。

miyabi_pudding

2020/02/18 02:14 編集

satomi24さん > なるほど、習ったようにしたのに、となれば、何かが足りないのかと。そこはもう少し調べたりして、考えてみてはいかがでしょうか？ m.ts10806さんのおっしゃる通り、実務でも使える能力をつけるならば、見本や参考記事通りにやってもその通りにならない時の対応力も、「実務で使わねばならない能力」に含まれます。というか実務だと、参考や見本通りにいかないのが常です。（環境とか、参考で書いてない部分の予備知識が必要ってことがほとんどですが）