<!DOCTYPE html>
  <html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>メンテナンス中です | trog</title>
<!-- 全てのブラウザで同じに見えるようreset.cssを読み込みます。リンク先はご自身のサーバー内にしてください。 -->
    <link rel="stylesheet" type="text/css" href="https://microayatron.com/wp-content/uploads/2019/01/reset.css">
<!--  隣のCSSも忘れず読み込みましょう。    -->
<!--     <link rel="stylesheet" type="text/css" href="/maintenance.css"> -->
  </head>
  <body>
    <header>
      <div class="logo-container">
        <div class="logo">
          <p>trog</p>
        </div>
      </div>
    </header>
    <div class="top-container">
      <div class="container">
        <div class="maintanance-now">
          <p>ただいまメンテナンス中です。</p>
<!--画像もご自身のサーバーから好きなものを使ってください-->
          <img src="https://microayatron.com/wp-content/uploads/2019/01/161738.png"/ width=30% height=30%>
          <p>一時的にご利用いただけない状態となっております。</p>
          <p>ご不便をおかけいたしまして申し訳ございません。</p>
        </div>
        <div class="maintanance-supplement" >
          <p>20xx年〇月〇日〇時 終了予定です。</p>
          <p>※終了時間は作業により若干送れる場合がございますことをご了承ください。</\p>
        </div>
      </div>
    </div>
    <footer>
      <div class="logo-container">
        <div class="logo">
          <p>trog &#169;ayaka abe  All rights reserved.</p>
        </div>
      </div>
    </footer>
  </body>
  </html>
body{
      margin:0;
      top:0;
      height:100vh;
    }
    header{
      height:60px;
      width:100%;
      background-color:black;
      color:white;
      top:0;
      left:0;
    }
    .logo-container{
      height:100%;
    }
    .logo{
      font-family:Hiragino Kaku Gothic ProN;
      text-align:left;
      position:relative;
      top:50%;
      transform: translateY(-50%);
      color:white;
      letter-spacing:1px;
      margin:0 0 0 5px;
    }
    .logo-container.logo p{
      margin:0;
      height:100%;
    }
    .container{
      font-family:Hiragino Kaku Gothic ProN;
      letter-spacing:0.3px;
      text-align: center;
    }
    .maintanance-now{
      padding: 30px;
    }
    .maintanance-now p{
      font-size: 20px;
      padding:3px;
    }
    .maintanance-now img{
      padding: 10px;
    }

    .maintanance-supplement{
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding: 15px;
      background-color:#9f9f9f;
      color:#ffffff;
      font-size: 15px;
      width:75%;
    }

    footer{
      height:60px;
      width:100%;
      background-color:black;
      color:white;
      bottom: 0;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.