<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>About Us</title>
<link rel="icon" type="image/x-icon" href="images/favicon.png">
<style>
body {
background-color: #ffc845;
}
.card-body {
padding: 5rem;
}
.card {
border-radius: 20px;
box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.5);
}
.text-green {
color: #008000;
}
.text-purple {
color: #800080;
}
.text-blue {
color: #0000FF;
}
.text-red {
color: #FF0000;
}
.text-orange {
color: #FFA500;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
.card-body h3,
.card-body p {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.card-body h3 {
margin-bottom: 0;
visibility: visible;
}
.card-body p {
opacity: 0;
visibility: hidden;
font-size: 25px; /* Adjust the font size as per your preference */
}
.card-body:hover h3 {
opacity: 0;
visibility: hidden;
}
.card-body:hover p {
opacity: 1;
visibility: visible;
}
</style>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<img alt="Brand" src="images/FightingMongoosesLogo.jpeg" width="7%" height="7%">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="Group5LandingPage.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="About_Us.html">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container py-5">
<div class="card" style="margin-bottom: 40px;">
<h1 class="text-center mb-5" style="padding-top: 10px;">About Our Team</h1>
<p class="text-center" style="font-size: 24px;margin: 0px 30px 30px 30px;padding: 0px;">We are the FightingMongooses, a group of passionate game developers who love the card game Love Letter. Our goal is to bring this game to a wider audience by creating an online version that can be played anywhere, anytime. This project is a part of our college coursework and we are excited to share it with the world.</p>
</div>
<div class="row justify-content-center">
<div class="col-sm-4 mb-4">
<div class="card">
<div class="card-body text-center text-green">
<h3>Collin</h3>
<p>Collin's description goes here...</p>
</div>
</div>
</div>
<div class="col-sm-4 mb-4">
<div class="card">
<div class="card-body text-center text-purple">
<h3>Dean</h3>
<p>Dean's description goes here...</p>
</div>
</div>
</div>
<div class="col-sm-4 mb-4">
<div class="card">
<div class="card-body text-center text-blue">
<h3>Shibo</h3>
<p>Shibo's description goes here...</p>
</div>
</div>
</div>
<div class="col-sm-4 mb-4">
<div class="card">
<div class="card-body text-center text-orange">
<h3>Harper</h3>
<p>Harper's description goes here...</p>
</div>
</div>
</div>
<div class="col-sm-4 mb-4">
<div class="card">
<div class="card-body text-center text-red">
<h3>Roman</h3>
<p>Roman's description goes here...</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>