コーディングの練習7、靴屋のサイトのデザインカンプ

みなさんこんにちは、エンジニアのjonioです。

今回は靴屋のサイトのデザインカンプです。

写真の配布ができないので写真AC、イラストACからダウンロードするかデザインカンプのリンクでスクショを撮ってください。

使った写真のURLをつけます、コーディングの際はクリッピングマスクをしてトリミングしてください。

https://www.photo-ac.com/main/detail/22311029?title=%E9%9D%B4%E3%81%AE%E8%BC%AA

https://www.photo-ac.com/main/detail/5174663?title=%E6%B0%B4%E8%89%B2%E3%81%AE%E3%82%B9%E3%82%A8%E3%83%BC%E3%83%89%E3%82%B7%E3%83%A5%E3%83%BC%E3%82%BA2

https://www.photo-ac.com/main/detail/1597078?title=%E5%A5%B3%E6%80%A7%E3%81%AE%E8%B6%B3

https://www.photo-ac.com/main/detail/1597088?title=%E5%A5%B3%E6%80%A7%E3%81%AE%E8%B6%B3

https://www.photo-ac.com/main/detail/22344908?title=%E8%B5%A4%E3%81%A1%E3%82%83%E3%82%93%E3%81%AE%E8%B6%B3

https://www.photo-ac.com/main/detail/22937517?title=%E3%83%AC%E3%83%87%E3%82%A3%E3%83%BC%E3%82%B9%E3%80%80%E9%9D%B4

https://www.photo-ac.com/main/detail/186119?title=%E3%83%9A%E3%83%AB%E3%83%BC%E3%81%AE%E3%82%B9%E3%83%8B%E3%83%BC%E3%82%AB%E3%83%BC（これはphotoshopのぼかしツールでぼかしています）

https://www.photo-ac.com/main/detail/1330587?title=%E3%81%8A%E6%B4%92%E8%90%BD%E3%81%AA%E3%83%91%E3%83%B3%E3%83%97%E3%82%B9%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%86%E3%83%AA%E3%82%A2

https://www.ac-illust.com/main/detail.php?id=1365313&word=%E5%92%8C%E6%9C%8D%E7%BE%8E%E7%94%B7%E3%80%80%E3%82%84%E3%81%BE%E3%81%A8%E3%81%A0%E3%81%BE%E3%81%97%E3%81%84%EF%BC%91&searchId=3191390506

ハンバーガーメニューの中身もありますので作ってください。

↓ですがマウスオーバーした時に表示を変えてほしいです。

マウスオーバーした時の表示はデザインカンプの5枚目、6枚目、7枚目にあります。（デザインカンプが何枚目かはデザインカンプの一番下に記載されます。）

デザインカンプのリンクはここです。

ロゴを画像にしていますが私が作ったので配布します

↓からダウンロードしてください。

●いいねをつけてもらえると励みになります。