mobile-index

by rootjang

HTML

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    header {
      width: 100%;
      background-color: #000;
    }

   nav ul {
     height: 50px;
     margin: 0;
     list-style: none;
     background-color: #000;
     color: white;
   }

   nav ul li {
     float: left;
     margin: 5px 15px;
     padding: 10px;
     font-size: 0.8rem;
   }

   #container, nav {
     width: 310px;
     margin: 0 auto;
   }

   #intro {
     width: 100%;
     margin-bottom: 20px;
   }

   #intro div {
     max-width: 100%;
   }

   .box1, .box2, .box3 {
     width: 90px;
     height: 90px;
     margin: 10px 5px;
     float: left;
     background-color: #df8900;
   }

   #desc {
     width: 100%;
     padding: 10px;
   }

   footer {
				width: 100%;
				height: 60px;
				padding: 20px;
				background: #37001c;
				color: white;
      }

    footer p {
      text-align:center;
    }
  </style>
</head>
<body>
		<header>
        <nav>
          <ul>
            <li>메뉴1</li>
            <li>메뉴2</li>
            <li>메뉴3</li>
          </ul>
        </nav>
      </header>
      <div id="container">
        <section id="intro">
          <div class="box1">1</div>
          <div class="box2">2</div>
          <div class="box3">3</div>
        </section>
        <section id="desc" class="text">
          <p>있는 이것을 능히 보이는 투명하되 이상의 낙원을 칼이다. 위하여 같이 힘차게 오직 듣는다. 뭇 창공에 천지는 말이다. 같이, 있는 되는 열매를 말이다. 있는 이것을 능히 보이는 투명하되 이상의 낙원을 칼이다.</p>
        </section>
        <footer>
          <p>뭇 창공에 천지는 말이다. 같이, 있는 되는 열매를 말이다.</p>
        </footer>
      </div>
</body>
</html>