ポートフォリオのひな型制作 - WEBサイト制作の勉強

今回作成するポートフォリオは
１、メインビジュアル
２、自己紹介＆経歴
３、スキル（出来る事を具体的に）
４、作品
５、お問い合わせフォーム（google formをカスタマイズ）

雛型完成データ
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
</head>
<body>
<header>
<h1>Portfolio</h1>
<nav id="g-nav">
<ul>
<li class="current" id="list1"><a href="#">top</a></li>
<li id="list2"><a href="#">content1</a></li>
<li id="list3"><a href="#">content2</a></li>
<li id="list4"><a href="#">content3</a></li>
<li id="list5"><a href="#">content4</a></li>
</ul>
</nav>
</header>
<main>
<div class="main-visual">
<h2>ここにメインビジュアル</h2>
</div>
<div class="box">content1</div>
<div class="box">content2</div>
<div class="box" id="works">
<h2>works</h2>
<div class="works-wrapper">
<div class="works-box">
<a data-fancybox data-type="iframe" data-src="site1/index.html" href="javascript:;">
<img src="img/works01.jpg" alt=""></a>
</div><!-- /.works-box -->
<div class="works-box">
<img src="img/works01.jpg" alt="">
</div><!-- /.works-box -->
<div class="works-box">
<img src="img/works01.jpg" alt="">
</div><!-- /.works-box -->
</div><!-- /.works-wrapper -->

<div class="code-pen-box">
<h2>Code Pen</h2>
<div class="code-pen-inner">
<p class="codepen" data-height="383" data-theme-id="light" data-default-tab="html,result" data-user="yachin29" data-slug-hash="bGpJzJp" style="height: 383px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="svg-animation">
  <span>See the Pen <a href="https://codepen.io/yachin29/pen/bGpJzJp">
  svg-animation</a> by yachin29 (<a href="https://codepen.io/yachin29">@yachin29</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</div><!-- /.code-pen-inner -->
</div><!-- /.code-pen-box -->
</div><!-- /#works -->



<div class="box">
<h2>お問い合わせフォーム</h2>
<form id="g-form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeMffYE0x9190d8kzadzV17ANbm2cVxsgoFAeVsUYoq5Hf8Sg/formResponse" method="POST">
<dl>
<dt>お名前<span>必須</span></dt>
<dd><input type="text" required placeholder="お名前をご入力ください" name="entry.1405312760"></dd>
<dt>メールアドレス<span>必須</span></dt>
<dd><input type="email" required name="entry.1451805250"></dd>
<dt>性別</dt>
<dd>
<label for="male">
<input type="radio" id="male" name="entry.16159636" value="男性">男性</label>
<label for="female">
<input type="radio" id="female" name="entry.16159636" value="女性">女性</label>
</dd>

<dt>お問い合わせ内容<span>必須</span></dt>
<dd><textarea required placeholder="お問い合わせ内容をご入力下さい" name="entry.991527894"></textarea></dd>
</dd>
</dl>
<p>内容をご確認の上、送信ボタンを押して下さい</p>
<input type="submit" value="送信">
</form>
</div>

</main>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script>
$(function(){
$('#g-form').submit(function (event) {
var formData = $('#g-form').serialize();
$.ajax({
  url: "https://docs.google.com/forms/u/0/d/e/1FAIpQLSeMffYE0x9190d8kzadzV17ANbm2cVxsgoFAeVsUYoq5Hf8Sg/formResponse",
  data: formData,
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function(){
      window.location.href = "thanks.html";
      },
    200: function(){
     //失敗したときの処理
      }
    }
  });
//googleformへのページ遷移をキャンセル
event.preventDefault();
});
});
</script>
</body>
</html>

スタイルシート

@charset "uft-8";
@import "_reset.scss";

img{
max-width: 100%;
}
/* header部分 */
header{
width: 100%;
height: 80px;
background-color: #FFF;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
#g-nav>ul{
display: flex;
}
#g-nav li{
margin: 0 20px;
}
#g-nav a{
display: block;
padding: 10px;
color: #333;
}
#g-nav li.current>a,#g-nav a:hover{
text-decoration: underline;
}
main{
padding-top: 80px;
}
h2{
text-align: center;
padding-top: 60px;
position: relative;
padding: 1rem .5rem;
font-size: 36px;
width: 300px;
margin: 0 auto 50px;
}
h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
}
/* メインビジュアル */
.main-visual{
width: 100%;
height: 100vh;
background-color: burlywood;
}
/* コンテンツ部分 */
.box{
width: 100%;

}
/* works部分 */
.works-wrapper{
max-width: 1200px;
margin: 0 auto 100px;
display: flex;
justify-content: space-between;
}
.works-box{
width: calc((100% - 20px) / 3);
}

/* code-pen部分 */
.code-pen-box{
max-width: 960px;
margin: 0 auto 100px;
}

/* フォーム部分 */
#g-form{
max-width: 800px;
margin: 0 auto 100px;
}
#g-form>dl{
display: flex;
flex-wrap: wrap;
border: 1px solid #999;
}
#g-form dt{
width: 30%;
background-color: #DDD;
padding: 20px;
border-right: 1px solid #999;
}
#g-form dd{
width: 70%;
padding: 20px;
}
#g-form dt:nth-of-type(n+2),#g-form dd:nth-of-type(n+2){
border-top: 1px solid #999;
}
[type="text"],[type="email"],textarea{
display: block;
width: 70%;
border: 1px solid #AAA;
}
textarea{
height: 160px;
}
dt>span{
display:inline-block;
background-color: firebrick;
color: #FFF;
font-size: 12px;
padding: 4px 6px;
margin-left: 10px;
}
form p{
margin: 40px 0 20px;
text-align: center;
}
[type="submit"]{
display: block;
width: 40%;
margin: 0 auto;
height: 60px;
border: 4px solid #008080;
color: #008080;
text-align: center;
line-height: 60px;
border-radius: 6px;
transition: 0.2s;
}
[type="submit"]:hover{
background-color:  #008080;
color: #FFF;
}