既存サイトのトレース - WEBサイト制作の勉強

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーンレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<h1>ロゴ</h1>
<div class="top top-L">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="top top-R">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-L">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-C">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-R">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p {
  margin:0;
  padding:0;
  line-height:1.0;
}

/*PCレイアウト*/
h1 {
  width:160px;
  height:160px;
  background:url(../img/logo-0717.svg) no-repeat center center/cover;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  z-index:1000;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
.top {
  width:50%;
  height:50vh;
  float:left;
  position:relative;
  overflow:hidden;
}
.btm {
  width:33.33%;
  height:50vh;
  float:left;
  position:relative;
  overflow:hidden;
}
.top-L {
  background:url(../img/L1.png) no-repeat center center/cover;
}
.top-R {
  background:url(../img/L2.png) no-repeat center center/cover;
}
.btm-L {
  background:url(../img/S1.png) no-repeat center center/cover;
}
.btm-C {
  background:url(../img/S2.png) no-repeat center center/cover;
}
.btm-R {
  background:url(../img/S3.png) no-repeat center center/cover;
}

/*キャプションレイヤー*/
.cap {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:50vh;
  padding-top:100px;
  background:rgba(255,0,51,0);
  text-align:center;
  color:#FFFFFF;
  transition:0.2s;
}
.top:hover .cap {
  padding-top:0;
  background:rgba(255,0,51,1);
}
.btm:hover .cap {
  padding-top:0;
  background:rgba(255,0,51,1);
}
.cap h2 {
  font-size:28px;
  padding: 80px 0 50px;
}
.cap .txt {
  font-size:18px;
  margin-bottom:60px;
  line-height:1.5;
}
.cap .more {
  width:30%;
  margin: 0 auto;
  padding: 10px 0;
  border-top: 1px solid #FC3;
  border-bottom: 1px solid #FC3;
}