変更点
ページを一覧表示できるようにしたり、トップの画像を画面いっぱいに広げたり、タブを追加したりしました。
一覧にする方法は、こちらから
作り方、コード
幅いっぱいに表示させる
ヘッダーの画像は指定しない状態でカスタムCSSに書き込んでください。
そのままだと、情報が上にかぶさって表示されるので、display:none;で打ち消しています。（Progateでやっててよかった…）
タブを追加する
※Head内でWebフォントを読み込んでください。
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
そこまで長くないコードですが、分からないことが多くて割と時間がかかりました。
画面幅に対する比率を利用してリンクを並べています。（要素数に合わせて比率は変えてください）
以下のコードをヘッダーのタイトル下に貼ってください。
