Instagramログインページのクローン


緒論📌


HTML/CSS Instagramログインページクローンコード!
成果物の表示

DESKTOP環境(min-width:1527 px)


footer

flex-direction: rowの属性を与える横並べ替えを行った後、space-around属性により、物品の周囲に同じ間隔を設け、左右に置く.
flex-direction: row;
justify-content: space-around;

TABLET環境(最小幅:876 px)



footer

justify-content: flex-start属性を開始点に配置します.
©2020 INSTAGRAM FROM FASEBOOKテキストコンテンツのcopyrightクラスもtext-align: leftを介して左揃えされています.

MOBILE環境



phones img


ログインフォームの左側にある携帯電話の写真は消え、ビューポートにのみログインフォームが表示されます.
.phones-container {
  display: none;
}
また,タッチ制御が便利で,リンク間に隙間ができ,ユーザの利便性が向上した.

リファレンス

  • Clumes YouTubeチャンネル