Mini Website

avatar
unknown
html
9 months ago
2.0 kB
6
Indexable
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mini Website</title>
    <style>
      .box {
        width: 100%;
        max-width: 300px;
        height: 200px;
        border: 2px solid #333;
        background-color: #f0f0f0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center; 
        overflow: auto;
      }

      p {
        margin: 5px 0;
      }

      table {
        border-collapse: collapse;
        margin: 20px 0;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      th,
      td {
        padding: 10px;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <h1>Mini Website</h1>

    <h2>Ordered List of Names</h2>
    <ol>
      <li>Kim Ashley</li>
      <li>Princess Ann</li>
      <li>Iya Rose</li>
      <li>Maria Elaine</li>
      <li>Jillian Marie</li>
    </ol>

    <h2>Unordered List of Names</h2>
    <ul>
      <li>Kim Ashley</li>
      <li>Princess Ann</li>
      <li>Iya Rose</li>
      <li>Maria Elaine</li>
      <li>Jillian Marie</li>
    </ul>

    <h2>Table of Names</h2>
    <table>
      <tr>
        <th>Number</th>
        <th>Name</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Kim Ashley</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Princess Ann</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Iya Rose</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Maria Elaine</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Jillian Marie</td>
      </tr>
    </table>

    <h2>Box Model</h2>
    <div class="box">
      <p>Kim Ashley</p>
      <p>Princess Ann</p>
      <p>Iya Rose</p>
      <p>Maria Elaine</p>
      <p>Jillian Marie</p>
    </div>
  </body>
</html>
Editor is loading...
Leave a Comment