Simple-Blog-in-HTML-CSS
/
article.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/main.css">
  <title>My Blog</title>
</head>
  <body>
  <div class="side-bar">
    <div class="header">
      <a href="index.html" class="logo">My Bolg!</a>
      <div class="intro">Welcome to my blog!</div>
    </div>
    <div class="nav">
      <a href="#" class="item">About me</a>
      <a href="#" class="item">Contact me</a>
      <a href="#" class="item">Feed me</a>
    </div>
    <div class="tag-list">
      <a href="#" class="item"># How</a>
      <a href="#" class="item"># When</a>
      <a href="#" class="item"># What</a>
    </div>
  </div>
  <div class="main">
    <div class="article">
      <h1 class="title">Welcome to my blog!</h1>
      <div class="status">发布于:2050-1-1 | 阅读:324 | 标签: #HTML #BLOG</div>
      <div class="content">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates perferendis, ipsum vel nisi nemo, deserunt rem molestiae eius ea dolore illo totam. Blanditiis sapiente perspiciatis facere adipisci nisi, quibusdam!</div>
        <div>Culpa, nobis similique explicabo inventore fugit at eaque rerum corrupti aperiam, ex doloribus consequatur ad ipsam. Quaerat delectus molestiae similique reiciendis repellat, eaque in dolor nulla, ipsa modi provident. Cum!</div>
        <div>Earum quibusdam quos error, sint, quisquam numquam culpa unde maxime ab! Repellat voluptate cumque a quod doloremque error, assumenda dolore iure voluptatem quasi perspiciatis? Consequatur, soluta magnam dolore quas delectus!</div>
        <div>Vitae voluptate itaque dolores consequuntur perspiciatis voluptatum impedit, commodi quo, debitis eum! Quisquam sequi corporis dignissimos vitae ad veritatis excepturi iusto in exercitationem! Velit pariatur, iste explicabo ut obcaecati deserunt?</div>
        <div>Mollitia eius temporibus nobis corporis odio sapiente, est officia! Deleniti fuga magni saepe optio eveniet nisi, illum vitae, assumenda omnis at minima facere dicta voluptates iure nemo sed! Expedita, vel?</div>
        <div>Repellat ipsam exercitationem vero iure, et, deleniti est quia voluptate. Ullam quam quasi eum incidunt nobis deleniti odio laudantium a sed esse temporibus unde et, omnis quod obcaecati, assumenda magni.</div>
        <div>Maiores corporis necessitatibus vero provident, quas iste totam minima fugiat amet eligendi ab! Sunt officia iste molestiae, laborum deleniti rerum eveniet aliquam! Ea voluptatibus molestiae nihil tempore, deleniti natus, asperiores.</div>
        <div>Amet, explicabo, molestias. Hic, ipsam minus vitae nihil molestiae eveniet nemo sit fugiat molestias laborum. Laborum fugit laudantium eaque quisquam dolore, doloremque natus reiciendis assumenda tempora veritatis itaque labore quae?</div>
        <div>Esse, obcaecati aperiam qui culpa, ad porro pariatur vel quaerat veritatis, nulla commodi possimus non labore excepturi numquam quae. Error at aspernatur autem, ipsum, rem quae dolores architecto minima repellendus.</div>
        <div>Eligendi eos tenetur, molestias asperiores, nemo repellat distinctio modi doloribus deserunt beatae recusandae nobis adipisci labore sapiente veritatis, dignissimos consequuntur dolore dolores cumque fuga ullam facere quae! Voluptates, voluptatibus enim!</div>
        <div>Itaque quas omnis ullam corporis numquam neque harum, vero officiis animi mollitia exercitationem saepe, eaque placeat voluptas beatae. Quo modi, qui aperiam praesentium vel tempore! Voluptatem voluptate amet odio fuga.</div>
        <div>Quis quo laboriosam impedit, quam voluptas iste ab libero ipsum perferendis omnis magni debitis blanditiis maiores magnam dicta atque excepturi similique asperiores mollitia numquam odio corporis aut accusantium, cupiditate ratione.</div>
        <div>Deleniti, expedita libero, minus explicabo voluptates beatae blanditiis delectus repellat molestiae minima saepe architecto maiores, natus maxime fuga animi molestias, magni consectetur consequuntur quidem quae nemo numquam harum. Consectetur, earum!</div>
        <div>Repudiandae quis ratione, illum sunt, sequi molestias distinctio natus nostrum enim reprehenderit minus voluptas ad nemo velit harum autem ipsam molestiae culpa eligendi fuga accusamus labore obcaecati nam. Qui, fugit.</div>
        <div>Voluptate minus fugit illum ratione sapiente rem, recusandae nam non laudantium nostrum tenetur, esse vitae dolores commodi cum deleniti. Molestiae, dolor, reiciendis. Culpa sapiente, inventore rerum corporis deserunt alias fuga?</div>
      </div>
  </div>
  </body>
</html>