index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>MAP Collaboration – Homepage</title>

  <style>
    /* 
      Body & Background:
      - Warm gradient
      - Open Sans font
    */
    body {
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
      font-family: "Open Sans", Arial, sans-serif;
      color: #333;
    }

    /* 
      Container for main content:
      - Centered, white background, some padding, box shadow
    */
    .container {
      max-width: 800px;
      margin: 60px auto;
      background-color: #fff;
      border-radius: 8px;
      padding: 30px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    /* Optional logo */
    .logo {
      display: block;
      margin: 0 auto 20px auto;
      max-width: 150px;
    }

    /* Headings: Keep them centered for a clean visual style */
    h1 {
      margin-top: 0;
      font-weight: 700;
      color: #e65100;
      text-align: center;
      font-size: 32px;
    }

    h2 {
      margin-top: 10px;
      font-weight: 400;
      color: #888;
      text-align: center;
      font-size: 20px;
    }

    /* 
      Paragraphs:
      - Justified text for a “newspaper column” effect
      - Separated margins
      - Constrain width for readability
    */
    p {
      font-size: 18px;
      line-height: 1.6;
      text-align: justify;
      margin: 20px auto;
      max-width: 600px;
    }

    /* Center-align welcome paragraph */
    .welcome {
      text-align: center;
    }

    /*
      Lists:
      - No bullet style
      - Left-aligned
      - Spaced out list items
    */
    ul {
      list-style-type: none;
      padding: 0;
      margin: 30px auto;
      max-width: 600px; /* Keep in line with the paragraph width if you like */
      text-align: left; /* Start from the left */
    }

    li {
      margin: 16px 0;
    }

    /* 
      Links:
      - Blue color, become orange on hover
    */
    a {
      text-decoration: none;
      font-size: 20px;
      font-weight: 500;
      color: #007acc;
      transition: color 0.3s ease;
    }

    a:hover {
      color: #d84315;
    }

    /*
      Footer:
      - Centered
      - Smaller text
      - Soft color
    */
    footer {
      text-align: center;
      margin-top: 40px;
      color: #666;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Optional logo image -->
    <!-- <img src="path/to/logo.png" alt="MAP Collaboration Logo" class="logo"> -->

    <h1>The MAP Collaboration</h1>
    <h2>Multi-dimensional Analyses of Partonic Distributions</h2>

    <!-- Make "Welcome!" a separate, centered paragraph -->
    <p class="welcome">
      Welcome!
    </p>
    <p>
      The MAP Collaboration conducts multi-dimensional analyses of partonic 
      distributions through cutting-edge techniques and data-driven approaches. 
      Key objects of study include Transverse Momentum Distributions (TMDs), 
      Generalized Parton Distributions (GPDs), and Fragmentation Functions (FFs).
    </p>
    <p>
      Click on the links below to see the reports of some of our latest results.
    </p>

    <ul>
      <li> &#128391; <a href="Results/TMDNN/NN.html">Neural Network fit</a></li>
      <li> &#128391; <a href="Results/TMDNN/MAP22.html">MAP22 Drell-Yan fit</a></li>
    </ul>

    <!-- Make footer a separate, centered paragraph -->
    <footer>
      <p class="welcome">
         &copy; 2025 The MAP Collaboration. </p>
    </footer>
  </div>
</body>
</html>