사이트집을 만들자!

이번은 슬라이드의 2장째에 해당하는 사이트집의 페이지를 만듭니다‼

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;
}

완성된 물건이 이쪽!

심플하고 손오공의 왼쪽 가슴 4개 줄지어 있는 것처럼 되어 버렸지만 향후 애니메이션과 까다로울 수 있다고 생각합니다! 빨리 자신의 싸움이라고 말해줘~

결론

심플한 사이트이기 때문인지 익숙해 왔기 때문인지 한순간에 완성되어 버렸습니다‼ 완성 된 물건을 본 느낌은 완전히 전자입니다
심플해도 우선 완성시키는 것이 중요! 라고 마음에 들려주고 열심히 합니다,,,
그럼, 그럼 ~