ペンギンをHTML/CSSで作る

クリスマスなので、シンプルなペンギンを作ってみました。
HTMLとCSS以外は使っていません。

配色を考える

配色を考えるときに、下記のサイトを参考にさせていただきました。
２色の相性の良い組み合わせの配色を簡単にチョイスできます。
https://colorsupplyyy.com/app/

完成形

ソース

ソースは下記の通りです。
jsfiddleで作成しました。
別の環境でテストしていないため、別の環境で絵が崩れた場合については
ご了承ください。

目(class="eyes")の部分はflexボックスを使用しています。
もしよかったら参考にしてみてください。

HTML


<div class="penguin">
  <div class="eyes">
    <div class="eye">
      <div class="pupil"></div>
    </div>
    <div class="eye">
      <div class="pupil"></div>
    </div>
  </div>
  <div class="mouth">
    <hr class="mouth_border">
  </div>
  <div class="stomach">
  </div>
</div>

CSS

.penguin {
  display: block;
  background-color: #5BA9FF;
  width: 370px;
  height: 400px;
  border-radius: 35% 35% 0 0;
  margin-top: 20px;
  margin-left: 20px;
}
.eyes {
  display: flex;
  position: absolute;
  margin-top: 52px;
}
.eye {
  background: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 86px;
}
.pupil {
  background: black;
  position: relative;
  margin-top: 5px;
  margin-left: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.mouth {
  background-color: #FFC039;
  position: absolute;
  width: 120px;
  height: 20px;
  margin-top: 110px;
  margin-left: 120px;
  border-radius: 50%;
}
.mouth_border {
  position: relative;
  margin-top: 8px;
}
.stomach {
  background: white;
  position: relative;
  width: 300px;
  height: 180px;
  margin-left: 6%;
  border-radius: 35% 35% 0 0;
  position: absolute;
  bottom: 0;
}