index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
	<title>TheHackersCrew Home Page</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Add Font Awesome for icons -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
	<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        html, body {
          position: relative;
          margin: 0;
          padding: 0;
          height: 100%; /* So the wrapper can be 100% of viewport */
          background: black;
          color: white;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          scrollbar-width: none;
          -ms-overflow-style: none;
        }

        /* The flex container filling the screen */
        #wrapper {
          margin-top: 10px;
          display: flex;
          flex-direction: column; 
          min-height: 100vh; /* Fill the full browser height */
          position: relative;
        }

        /* Header sits at the top */
        .header {
            display: flex;
            left: 15px;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            margin-top: 50px; /* Reduces space above the header */
            position: relative; /* Ensures it stays above other content */
            z-index: 10; /* Keeps it on top */
        }

        /* Main content flexes to fill space between header and footer */
        #main {
          flex: 1; 
          display: flex;
          justify-content: center; /* center horizontally */
          align-items: center;     /* center vertically */
          position: relative;
          z-index: 2;
        }

        #logo img {
            margin-left: 12.2%; 
            margin-top: 0; /* Removes extra space */
            height: 130px; /* Adjust to make it smaller */
        }

        /* The logo in the middle can be sized however you want */
        #logo-container {
          width: 500px;
          height: auto;
          cursor: pointer;
          transition: transform 0.3s ease;
        }
        #logo-container img {
          width: 100%;
          height: auto;
          border-radius: 10px;
        }

        #top-left {
          position: absolute;
          top: 50px;
          left: 40px;
          width: 100px;
          height: auto;
        }
        #bottom-right {
          position: absolute;
          bottom: 40px;
          right: 40px;
          width: 100px;
          height: auto;
        }

        /* Footer at the bottom of the page */
        #footer {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 50px;
          padding: 20px 0;
          /* Optionally, a background: #111; etc. */
        }

        /* Navigation Container */
        #navigation {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            margin: 0; /* Removes extra space */
            gap: 15px;
			z-index: 10; /* Ensures navigation is clickable */
        }

        #navigation a button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.8);
            /* Light red */
            color: white;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        #navigation a button:hover {
            background-color: rgb(22, 22, 22);
            /* Solid red */
            transform: scale(1.1);
        }


        #social-links {
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
        }

        #social-links a {
            font-size: 1em;
            color: white;
            transition: transform 0.2s ease-in-out;
        }

        #social-links a:hover {
            transform: scale(1.2);
        }

        #copyright {
            font-size: 14px;
            color: #888;
        }
	</style>
</head>

<body>
  <div id="wrapper">
    <!-- Top-Left Image -->
	<img id="top-left" src="images/+++.png" alt="Decorative Image">

	<!-- Bottom-Right Image -->
	<img id="bottom-right" src="images/+++.png" alt="Decorative Image">
<div id="header">
	<a href="/" id="logo">
		<img src="images/thcicon.png" alt="Logo">
	</a>
	<div id="navigation">
		<a href="blog">
			<button>Blog</button>
		</a>
		<a href="contests">
			<button>Contests</button>
		</a>
		<a href="members">
			<button>Members</button>
		</a>
	</div>
</div>
    <!-- Main content area that flexes to fill space -->
    <div id="main">
      <!-- Logo Container in the center -->
      <div id="logo-container">
        <a href>
          <img src="images/thc title.png" alt="TheHackersCrew Logo">
        </a>
      </div>
    </div>

    <!-- Footer at bottom -->
    <footer id="footer">
      <div id="social-links">
        <a href="https://ctftime.org/team/85618" target="_blank">
            <i class="fa-solid fa-flag"></i>
        </a>
        <a href="https://x.com/thehackerscrew1" target="_blank">
            <i class="fa-brands fa-twitter"></i>
        </a>
        <a href="https://github.com/Thehackerscrew" target="_blank">
            <i class="fa-regular fa-envelope"></i>
        </a>
      </div>
      <div id="copyright">
        © 2025 Thehackerscrew. All rights reserved.
      </div>
    </footer>
  </div>
</body>
</html>