<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name=viewport content= 'width=device-width,initial-scale=1'>
  <title>Sequence Online Database System</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #fff0f5;
    }

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

    .topnav {
      background-color: #cc0066;
      padding: 15px 0;
      text-align: center;
    }

    .topnav a {
      display: inline-block;
      color: #ffffff;
      text-align: center;
      padding: 12px 24px;
      margin: 8px;
      text-decoration: none;
      background-color: #ff4da6;
      border-radius: 5px;
      font-weight: bold;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

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

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

    .column {
      flex: 1;
      padding: 20px;
      background-color: white;
      border-radius: 10px;
      margin: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .column h3 {
      color: #cc0066;
    }

    .center {
      flex: 2;
      text-align: center;
    }

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

    ul {
      list-style-type: square;
      padding-left: 20px;
    }

    img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      margin-top: 15px;
    }

    @media screen and (max-width: 768px) {
      .main-content {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>Sequence Online Database System</h1>
    <p>This online database provides information on biological sequences such as DNA, RNA, and proteins.</p>
  </div>

  <div class="topnav">
    <a href="form.html" target="_blank">Entry Form for Sequence</a>
    <a href="dnaSeq.html" target="_blank">List of Nucleotide Sequences</a>
    <a href="protSeq.html" target="_blank">List of Protein Sequences</a>
    <a href="seqAnalysis.html" target="_blank">Real-time Sequence Analysis</a>
  </div>

  <div class="main-content">
    <div class="column left">
      <h3>Key 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’ describes the process by which the instructions in DNA are converted into functional products.
        It was first proposed in 1958 by Francis Crick, co-discoverer of the DNA structure.</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>
        <a style="color: #cc0066;" href="mailto:23111794@siswa.um.edu.my">23111794@siswa.um.edu.my</a>
      </p>
    </div>
  </div>

  <div class="footer">
    <p>&copy; 2025 Nuraqila Mohd Murshid. All rights reserved.</p>
  </div>

</body>
</html>