練習、学習サイト。
codestepさんのサイトを模写。
リンクはこちら。

Codestep | 作って学ぶコーディング学習サイト（HTML、CSS、JavaScript、WordPress） (code-step.com)

目標デザイン。

Profile (code-step.com)

模写

HTML.

●　ＨＴＭＬで躓いた点。
　基本的になし。

●　ｃｓｓで躓いた点。
１.aboutセクションで、写真の幅とinfoのmargin調整がうまくいかなかった。
解決策：　min-width
２．デモソースを見るとbicycleセクションの画像はli要素で組んでいる。
divで囲んで代用。

１．ブラウザーズーム６７％でキャプチャ。
２．フッター省略。
３．infoのmargin-bottom忘れ。

覚えておくこと。
section｛｝でのmarginプロパティが、クラス名で指定したスタイルを受け、上書きされてしまう。３で書いたBICYCLE　titleのmargin-topが、それ以前のセンタリングで使ったmargin:0 auto;で消えてしまっている事。
画像挿入で崩れたサイズはmin-widthで補える。