Untitled

<!doctype html>
<html tabindex="-1" lang="en">
    <head>
        <title>Zebrasquid</title>
        <link rel="stylesheet" href="TaylorWebsite2025.css" />
    </head>
    <style>
    ::focus {
     outline: none !important; /* Disable outline globally */
     box-shadow: none !important; /* Remove shadow effects */
 }

 *:focus,
 *:active,
 * {
     outline: none !important; /* Applies to all elements */
     box-shadow: none !important; /* Remove shadow effects */
     transition: none !important; /* Disable all animations */
     -webkit-tap-highlight-color: transparent; /* Disable mobile tap highlights */
 }

 /* Specifically target problematic elements */
 .bannerContainer:focus,
 .parentContainer:focus,
 .contentContainer:focus,
 .sidebar:focus,
 nav:focus,
 ul:focus {
     outline: none !important; /* Remove any focus outline */
     box-shadow: none !important; /* Prevent any focus-related shadows */
     user-select: none; /* Disable accidental text selection */
 }

 /* Prevent focus for tabindex="-1" */
 [tabindex="-1"]:focus {
     outline: none !important; /* Remove outline for tabindex="-1" */
     box-shadow: none !important; /* Prevent shadow effects */
 }

 /* Disable pointer events if not needed */
 .bannerContainer,
 .parentContainer,
 .contentContainer,
 .sidebar,
 nav,
 ul {
     pointer-events: auto; /* Ensure interaction is not blocked */
     user-select: none; /* Prevent accidental text selection */
     outline: none !important; /* Ensure no focus outline appears */
 }

 /* Banner styles */
 .bannerContainer {
     background-image: url("https://i.imgur.com/uhbJjEL.png");
     background-size: 750px 200px;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     height: 200px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0 auto;
     user-select: none; /* Prevent accidental text selection */
     pointer-events: auto; /* Allow mouse interaction */
 }

 /* Body styles */
 body {
     margin: 0;
     padding: 0;
     color: orangered;
     background: #150d04;
     font-family: Tahoma, Verdana, sans-serif;
     display: block;
     height: 100vh;
     user-select: none; /* Prevent accidental text selection */
 }

 /* Sidebar and link styles */
 .linkHeader {
     background-image: url("https://i.imgur.com/fleGYVl.png");
     background-size: 200px 50px;
     background-repeat: no-repeat;
     text-align: center;
     width: 200px;
     height: 50px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .linkTitle {
     background-image: url("https://i.imgur.com/1JFpnZH.png");
     background-size: 200px 50px;
     background-repeat: no-repeat;
     text-align: center;
     width: 200px;
     height: 50px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .linkBg {
     background-image: url("https://i.imgur.com/Fj8Bal1.png");
     background-size: 200px 50px;
     background-repeat: no-repeat;
     text-align: center;
     width: 200px;
     height: 50px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .linkFooter {
     background-image: url("https://i.imgur.com/i7CApNO.png");
     background-size: 200px 50px;
     background-repeat: no-repeat;
     text-align: center;
     width: 200px;
     height: 50px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .contentHeader {
     background-image: url("https://i.imgur.com/BLvjRfS.png");
     background-size: 800px 50px;
     background-repeat: no-repeat;
     text-align: center;
     width: 800px;
     height: 50px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: start !important;
     margin-top: 0;
 }
 /* Sidebar styles */
 .sidebar {
     margin: 0;
     color: navy;
     width: 200px;
 }

 .sidebar.left {
     margin: 0;
     padding: 0;
 }

 .sidebar ul {
     list-style: none; /* Remove bullet points */
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     color: white;
     font-family: Tahoma, Verdana, sans-serif;
 }

 .sidebar .linkBg:hover {
     filter: brightness(150%);
     transition: 1s ease-in-out !important;
 }

 /* Content container styles */
 .contentContainer {
     display: grid;
     grid-template-columns: 600px 1fr 200px; /* Left sidebar, main content, right sidebar */
     justify-content: center; /* Centers the grid horizontally */
     align-items: start; /* Aligns grid items at the top */
     height: 100vh; /* Full viewport height */
     gap: 10px; /* Space between columns */
     width: 800px;
     margin-left: 0;
     margin-right: 0;
     overflow: auto;
 }

 /* Parent container styles */
 .parentContainer {
     display: flex;
     justify-content: center; /* Horizontally centers the contentContainer */
     align-items: start; /* Vertically aligns to the top */
     height: 100vh; /* Full viewport height */
     margin-top: 0px;
     padding: 0;
     user-select: none; /* Prevent text selection */
     pointer-events: auto; /* Ensure mouse interaction is unaffected */
 }
 </style>
    <body tabindex="-1">
        <script src="focusListener.js"></script>
        <div class="bannerContainer" tabindex="-1"></div>

        <div class="parentContainer" tabindex="-1">
            <div class="sidebarContainer" tabindex="-1">
                <nav class="sidebar left" tabindex="-1">
                    <ul>
                        <li class="linkHeader"></li>
                        <li class="linkTitle">Navtitle</li>
                        <li class="linkBg">Navlink</li>
                        <li class="linkBg">Navlink</li>
                        <li class="linkFooter"></li>
                    </ul>
                </nav>
            </div>
            <div class="contentContainer" tabindex="-1">
                <p class="contentHeader"><br /><br /></p>
                <br>
                <p>
                    Zebrasquid4Life.Zebrasquid4Life
                    Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.Zebrasquid4Life.
                </p>
            </div>
            <p class="contentFooter"></p>
            <div class="sidebarRight" tabindex="-1">
                <nav class="sidebar Right" tabindex="-1">
                    <ul>
                        <li class="linkHeader"></li>
                       <li class="linkTitle">Navtitle</li>
                        <li class="linkBg">Navlink</li>
                        <li class="linkBg">Navlink</li>
                        <li class="linkFooter"></li>
                    </ul>
                </nav>
            </div>
        </div>
    </body>
</html>