<html>
<head>
  <title>Sequence Online Database System</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .header {
      background-color: #ff4da6;
      padding: 20px;
      text-align: center;
      color: white;
    }

    .topnav {
      background-color: #cc0066;
      padding: 20px 0;
      text-align: center;
    }
    .topnav a:hover {
      background-color: #ffffff;
      color: #cc0066;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    }

    .topnav a {
      display: inline-block;
      color: #ffffff;
      text-align: center;
      padding: 12px 24px;
      margin: 10px;
      text-decoration: none;
      background-color: #ff4da6;
      border: none;
      border-radius: 5px;
      font-weight: bold;
      transition: 0.3s;
      cursor: pointer;
    }

    .topnav a:hover {
      background-color: #ffffff;
      color: #cc0066;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    }

    .main-content {
      display: flex;
      justify-content: space-between;
      padding: 20px;
    }

    .column {
      flex: 1;
      padding: 10px;
    }

    .left, .right {
      flex: 0 0 25%;
    }

    .center {
      text-align: center;
    }

    .footer {
      background-color: #ff4da6;
      padding: 10px;
      text-align: center;
      color: white;
    }

    ul {
      list-style-type: square;
    }

    img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>Sequence Online Database System</h1>
    <p>This online database provides the information on the sequences...</p>
  </div>

<div class="topnav">
    <a onclick="openLink('form.html', '_blank')">Entry Form for Sequence</a>
    <a onclick="openLink('dnaSeq.html', '_blank')">List of Nucleotide Sequences</a>
    <a onclick="openLink('protSeq.html', '_blank')">List of Protein Sequences</a>
    <a onclick="openLink('seqAnalysis.html', '_blank')">Real-time Sequence Analysis</a>
  </div>


  <div class="main-content">
    <div class="column left">
      <h3>Terms</h3>
      <ul>
        <li>DNA</li>
        <li>RNA</li>
        <li>Protein</li>
        <li>Transcription</li>
        <li>Translation</li>
      </ul>
    </div>

    <div class="column center">
      <h3>What is the 'Central Dogma'?</h3>
      <p>The ‘Central Dogma’ is the process by which the instructions in DNA are converted into a functional product.
        It was first proposed in 1958 by Francis Crick, discoverer of the structure of DNA.</p>
      <img src="https://i0.wp.com/microbeonline.com/wp-content/uploads/2023/11/Central_dogma_of_molecular_biology.png?ssl=1" alt="Central Dogma">
    </div>

    <div class="column right">
      <h3>Contact Us</h3>
      <p>Nuraqila Mohd Murshid<br>23111794@siswa.um.edu.my</p>
    </div>
  </div>

  <div class="footer">
    <p>Copyright by Nuraqila Mohd Murshid</p>
  </div>

</body>
</html>