サイト集の作成【プログラミング日記~ポートフォリオ⑥~】#7

#サイト集を作ろう‼
今回はスライドの２枚目に当たるサイト集のページを作ります‼

index.html

<div class="container second">
        <div class="works">
          <h2 id="works" class="section-title">WORKS</h2>
          <div class="work">
            <a href="https://www.google.com/?hl=ja"><img src="image/work.png" height="200px" width="200px">
            <h3>○○のサイト</h3>
            <p>説明文</p></a>
          </div>
          <div class="work">
            <a href="https://www.yahoo.co.jp/"><img src="image/work.png" height="200px" width="200px">
            <h3>○○のサイト</h3>
            <p>説明文</p></a>
          </div>
          <div class="work">
            <a href="https://www.google.com/?hl=ja"><img src="image/work.png" height="200px" width="200px">
            <h3>○○のサイト</h3>
            <p>説明文</p></a>
          </div>
          <div class="work">
            <a href="https://www.yahoo.co.jp/"><img src="image/work.png" height="200px" width="200px">
            <h3>○○のサイト</h3>
            <p>説明文</p></a>
          </div>
        </div>
      </div>

style.css

* サイト集 */
.second{
  background-color: rgb(251, 180, 47)
}
.work{
  float: left;
  width: 25%;
  text-align: center;
  padding-top: 40px;
}
.work img{
  border: 2px solid black;
}
.work p{
  font-size: 16px;
  padding: 0 30px;
}

#完成したモノがこちら！

シンプルだし孫悟空の左胸４つ並んでるみたいになっちゃったけど今後アニメーションとかつけれたらなぁって思ってます！早く自分のさいといれてぇ～

#おわりに

シンプルなサイトだからなのか慣れてきたからなのか一瞬で完成しちゃいました‼完成したモノ見た感じ完全に前者ですね
シンプルでもまず完成させることが大事‼って心に言い聞かせて頑張ります、、、
では、それでは～