<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Solace Of Service</title>
		<link rel="stylesheet" href="main.css" />
		<link rel="icon" type="image/x-icon" href="./img/SOS_Logo_WBG.png" />
	</head>
	<body class="h-screen w-screen main-colour">
		<header class="flex w-full h-20 secondary-colour fixed top-0 left-0 right-0">
			<img src="./img/SOS_Logo_WBG.png" alt="product logo" class="p-1 ml-10" />
			<nav class="w-full flex justify-around">
				<a href="./index.html" class="px-4 text-justify h-fit w-fit self-center"
					><h1>Home</h1></a
				>
				<a href="#" class="px-4 text-justify h-fit w-fit self-center"
					><h1>About SSLR</h1></a
				>
				<a href="./profile.html" class="px-4 text-justify h-fit w-fit self-center"
					><h1>Profile</h1></a
				>
			</nav>
		</header>
		<div class="h-20"></div>
		<section class="flex justify-center py-10 px-[15vw] flex-row">
			<img
				src="./img/SSLR_CompanyLogo.png"
				alt="Logo Of SSLR"
				class="py-4 h-[30vw] w-[30vw] self-start"
			/>
			<img
			src="./img/SOS_Logo_WBG.png"
			alt="Logo Of Our Game"
			class="py-4 h-[30vw] w-[30vw] self-end"
			/>
			
		</section>
		<section class="section-colour h-fit w-full py-10 px-[15vw]">
			<h1 class="font-bold text-4xl text-center">About SSLR</h1>
			<br>
			<h2>
				"Sweet Starry Lil’ Rabbits" is a name born from the shared initials of our four
				founders—Sai, Shannon, Livinia, and Ryan. Our name reflects not only who we are
				but also the spirit we want to bring to the world: a blend of sweetness,
				imagination, and individuality.
				<br />
				<br />
				As a close-knit group of friends who came together with a shared vision of
				creating something extraordinary, we chose "Sweet Starry Lil’ Rabbits" because it
				captures our playful and welcoming personalities while standing out as uniquely
				memorable. It’s a name that symbolizes our friendship, creativity, and desire to
				build experiences that feel comforting and inspiring, hoping to invite others into
				a world of warmth, wonder, and connection—qualities that define both our company
				and our dynamic as a team.
			</h2>
		</section>
		<section class="h-fit w-full y py-8 px-[15vw]">
			<h1 class="text-2xl font-bold pb-2">WHO ARE WE</h1>
			<div class="flex">
				<article class="w-[35%]  mx-[2.5%]">
					<h1 class= "font-bold">Shannon</h1>
					<img class="aspect-auto rounded-full w-60 h-60" src="./img/Shannon.jpg" alt="picture of Shannon" />
					<h2><b>Roles: </b>Scrum Master,Art Director, Assistant Level Designer</h2>
				</article>
				<article class="w-[35%] mx-[2.5%]">
					<h1 class="font-bold">Ryan</h1>
					<img class="aspect-auto rounded-full" src="./img/Ryan.jpg" alt="picture of Ryan" />
					<h2>
						<b>Roles: </b>Product Owner, Lead Web Developer , Assistant Game Develope
					</h2>
				</article>
				<article class="w-[35%] mx-[2.5%]">
					<h1 class="font-bold">Sai</h1>
					<img class="aspect-auto rounded-full" src="./img/Sai.jpg" alt="picture of Sai" />
					<h2>
						<b>Roles:  </b>Lead Game Designer, Marketing Lead, Assistant Web Developer
					</h2>
				</article>
				<article class="w-[30%] mx-[2.5%]">
					<h1 class="font-bold">Livinia</h1>
					<img class="aspect-auto rounded-full" src="./img/Livinia.jpg" alt="picture of Livinia" />
					<h2>
						<b>Roles: </b>Lead Game Developer, UI/UX Lead, Assistant Graphic Designer
					</h2>
				</article>
			</div>
		</section>
		
	</body>
</html>