index.qmd

---
title: ""
---

<style>
  /* Disable scrolling */
  html, body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
  }

  /* Set the background image to cover the entire screen */
  body {
    background-image: url('logo/darkmode_with_hue.jpeg'); /* Path to your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Text container styling for the bottom of the screen */
  .text-container {
    position: absolute;
    bottom: 90px; /* Adjust the position above the footer */
    left: 50%;
    transform: translateX(-50%); /* Center the text horizontally */
    z-index: 10;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 1.1em;  /* Adjust text size */
    width: 100%;
    max-width: 1600px; /* Increase the width of the text container */
  }

  /* Footer styling */
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* Ensures footer spans the full width */
    text-align: center;
    z-index: 10;
  }

  /* Overlay to darken the background image */
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1;
  }

</style>

 <div class="overlay"></div>  <!-- Overlay to darken the background image -->

<!-- Text content overlaid on the image, aligned at the bottom -->
<div class="text-container">
  <p>Welcome to the <strong>(x)Ability Design Lab</strong>, pronounced as "Accessibility Design" Lab, where the "x" embodies our mission to enhance user experience (UX) and learning experience (LX) by dismantling sociotechnical barriers associated with disability. At our core, we believe in focusing on the ability and experience of all individuals, moving beyond the constraints of traditional accessibility discourse.</p>
</div>