ステップ１

まずはいつものようにHTMLとCSSでページを作成

/* ヘッダー部分 */
header{
width: 100%;
height: 60px;
position: fixed;
top:0;
left:0;
z-index: 1000;
background:#f9f7e8;
display: flex;
justify-content: space-between;
}
h1{
font-size: 30px;
line-height: 60px;
padding-left: 10%;
font-weight: normal;
}
.g-nav{
width: 50%;
}
.g-nav>ul{
display: flex;
}
.g-nav li{
width: 25%;
height:60px;
}
.g-nav a{
display: block;
width: 100%;
line-height: 60px;
text-align: center;
color: #222;
}
.g-nav a:hover{
background: #b3d4fc;
}
.drop-menu{
display:none;
width: 100%;
height: 100%;
border-top: 1px solid #FFF;
}
.drop-menu>a{
background:#f9f7e8;
}
.g-nav li.drop-down:hover .drop-menu{
display: block;
}

/* メイン部分 */
.main-visual{
margin: 60px 0 200px;
}
.main-img{
width: 100%;
height: 500px;
}
.main-img>img{
width: 100%;
height: 100%;
object-fit: cover;
}

.scroll-block{
margin-bottom: 200px;
padding-bottom: 100px;
text-align: center;
}



/* ニュース部分 */
h2{
text-align: center;
font-size: 32px;
margin-bottom: 60px;
font-weight: normal;
}
.news-list{
max-width: 800px;
margin: 0 auto 200px;
}
.news-list>dt{
float: left;
font-weight: bold;
width: 20%;
margin-bottom: 16px;
}
.news-list>dd{
padding-left: 20%;
border-bottom: 1px solid #222;
padding-bottom: 8px;
margin-bottom: 16px;
}

/* 新着記事部分 */
.post-list{
margin-bottom: 400px;
}
.post-wrapper{
width: 100%;
display: flex;
margin-bottom:80px;
}
.post-box{
width: 25%;
padding: 20px;
box-sizing: border-box;
}
.post-box>h3{
text-align: center;
padding: 10px 0;
}
.post-box img{
max-width: 100%;
}
.post-img{
margin-bottom: 10px;
}
.cate-name{
display: inline-block;
font-size: 14px;
padding: 10px;
background:#ccc;
}
.to-blog{
width: 60%;
height: 80px;
margin: 0 auto;
border: 6px solid #dd2e1e;
overflow: hidden;
}
.to-blog>a{
display: block;
text-align: center;
line-height: 80px;
color: #dd2e1e;
position: relative;
z-index: 1;
font-size: 18px;
}
.to-blog>a::after{
display: block;
content: "";
width: 120%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left:-110%;
background: #dd2e1e;
clip-path: polygon(0 0,100% 0,95% 100%,0 100%);
transition: 0.3s;
}
.to-blog>a:hover{
color: #FFF;
}
.to-blog>a:hover::after{
left:0;
}

ステップ2

htmlファイルで作成したデータをPHP化及び、その際にwordpressに移行する為の適切なファイル名にリネームします。

例：
index.htmlをtop-page.php