【特別編】コーポレートサイト／ソースコード

index.html

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>something, Inc.</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
    <div class="wrapper">
      <header id="header">

        <h1 class="site-title">
          <a href="index.html"><img src="img/logo.svg" alt="something"></a>
        </h1>

        <nav id="navi">
          <ul class="nav-menu">
            <li><a href="#news">News</a></li>
            <li><a href="#service">Service</a></li>
            <li><a href="#company">Company</a></li>
            <li><a href="#work">Work</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <ul class="nav-sns">
            <li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
            <li><a href="https://www.facebook.com/" target="_blank">facebook</a></li>
            <li><a href="https://www.instagram.com/" target="_blank">instagram</a></li>
          </ul>
        </nav>

        <div class="toggle_btn">
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div id="mask"></div>
      </header>

      <div class="container">
        <div class="section-wrapper">
          <img src="img/mainvisual.jpg" alt="テキストテキストテキスト">
        </div>

        <section id="news" class="section-wrapper">
          <h2 class="sec-title">News</h2>
          <dl>
            <dt>2020.XX.XX</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt>2020.XX.XX</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt>2020.XX.XX</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt>2020.XX.XX</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt>2020.XX.XX</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt>2020.XX.XX</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
            <dt>2020.XX.XX</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
          </dl>
        </section>

        <section id="service" class="section-wrapper">
          <h2 class="sec-title">Service</h2>
          <ul>
            <li>
              <img src="img/service-direction.jpg" alt="テキストテキスト">
              <p class="list-title">Direction</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </li>
            <li>
              <img src="img/service-design.jpg" alt="テキストテキスト">
              <p class="list-title">Design</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </li>
            <li>
              <img src="img/service-development.jpg" alt="テキストテキスト">
              <p class="list-title">Development</p>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </li>
          </ul>
        </section>

        <section id="company" class="section-wrapper">
          <h2 class="sec-title">Company</h2>
          <dl>
            <dt>会社名</dt>
            <dd>something, Inc.</dd>
            <dt>設立</dt>
            <dd>XXXX年X月</dd>
            <dt>資本金</dt>
            <dd>9,999,999円</dd>
            <dt>所在地</dt>
            <dd>150-0001 東京都渋谷区神宮前 X-XX-X ＸＸＸＸＸ A01</dd>
            <dt>社員数</dt>
            <dd>99名</dd>
            <dt>事業内容</dt>
            <dd>
              webサイト制作<br>
              Webアプリケーション開発<br>
              インターネットメディア事業
            </dd>
          </dl>
        </section>

        <section id="work" class="section-wrapper">
          <h2 class="sec-title">Work</h2>
          <ul>
            <li>
              <div class="work-img">
                <img src="img/work-furniture.jpg" alt="テキストテキスト">
              </div>
              <div class="work-content">
                <p class="work-title">Furniture</p>
                <p class="work-url"><a href="#">www.xxxxxxxx.com</a></p>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              </div>
            </li>
            <li>
              <div class="work-img">
                <img src="img/work-cafe.jpg" alt="テキストテキスト">
              </div>
              <div class="work-content">
                <p class="work-title">Cafe</p>
                <p class="work-url"><a href="#">www.xxxxxxxx.com</a></p>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              </div>
            </li>
            <li>
              <div class="work-img">
                <img src="img/work-apparel.jpg" alt="テキストテキスト">
              </div>
              <div class="work-content">
                <p class="work-title">Apparel</p>
                <p class="work-url"><a href="#">www.xxxxxxxx.com</a></p>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              </div>
            </li>
          </ul>
        </section>

        <section id="contact" class="section-wrapper">
          <h2 class="sec-title">Contact</h2>
          <form action="#">
            <dl>
              <dt><label for="your-name">お名前</label></dt>
              <dd><input type="text" id="your-name" name="your-name" placeholder="ＸＸＸＸ　ＸＸＸＸ"></dd>
              <dt><label for="your-company">会社名</label></dt>
              <dd><input type="text" id="your-company" name="your-company" placeholder="株式会社ＸＸＸＸＸ"></dd>
              <dt><label for="your-email">メールアドレス</label></dt>
              <dd><input type="email" id="your-email" name="your-email" placeholder="xxx@xxxxxx.jp"></dd>
              <dt><label for="your-tel">電話番号</label></dt>
              <dd><input type="tel" id="your-tel" name="your-tel" placeholder="090-XXXX-XXXX"></dd>
              <dt><label for="your-message">お問い合わせ内容</label></dt>
              <dd><textarea id="your-message" name="your-message"></textarea></dd>
            </dl>
            <div class="button"><input type="submit" value="入力内容を確認する"></div>
          </form>
        </section>

        <footer id="footer">
          <div class="footer-content">
            <div class="footer-text">
              <p class="concept">Do Something Great</p>
              <p>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
              </p>
            </div>

            <div class="footer-menu">
              <ul>
                <li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
                <li><a href="https://instagram.com/" target="_blank">Instagram</a></li>
                <li><a href="https://facebook.com/" target="_blank">Facebook</a></li>
              </ul>
            </div>

            <div class="footer-menu">
              <ul>
                <li><a href="https://pinterest.jp/" target="_blank">Pinterest</a></li>
                <li><a href="https://line.me/" target="_blank">LINE</a></li>
              </ul>
            </div>
          </div>
          <p class="copyright">&copy; something, Inc.</p>
        </footer>

      </div>
    </div>

  </body>

</html>