Skip to content

Instantly share code, notes, and snippets.

@AndrewS097

AndrewS097/home.html

Last active March 14, 2019 20:49
Show Gist options
  • Save AndrewS097/7f9f90ce7013ff29085de96e365d862f to your computer and use it in GitHub Desktop.
Save AndrewS097/7f9f90ce7013ff29085de96e365d862f to your computer and use it in GitHub Desktop.
Download ZIP
Star Wars Website
Raw
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<title> Star Wars Home Page </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Star Wars</h1>
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="jedi.html">Jedi</a></li>
<li><a href="sith.html">Sith</a></li>
<li><a href="table.html">Bounty</a></li>
</ul>
</nav>
<main>
<div id="multifaction"></div>
<h2>
In a galaxy far, far away.
</h2>
<p>
“For my ally is the Force, and a powerful ally it is.” – Yoda.
</p>
<h3>
Jedi Ranks:
</h3>
<ul>
<li>Youngling</li>
<li>Padawan</li>
<li>Knight </li>
<li>Knight</li>
<li>Grand Master</li>
</ul>
<p>
Available via email or discord <br>
Discord handle: Yetric#2828 <br>
</p>
</main>
<footer>
<p>
Andrew Salazar's Project
<br>
<a href="[email protected]">[email protected]</a>
</p>
</footer>
</div>
</body>
</html>
Raw
jedi.html
<!DOCTYPE HTML>
<html lang="eng">
<head>
<title> Star Wars Jedi</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Star Wars</h1>
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="jedi.html">Jedi</a></li>
<li><a href="sith.html">Sith</a></li>
<li><a href="table.html">Bounty</a></li>
</ul>
</nav>
<main>
<div id="jedi"></div>
<h2>
Jedi
</h2>
<p>
“Fear is the path to the dark side…fear leads to anger…anger leads to hate…hate leads to suffering.”
</p>
<div class="tablecentered">
<table class="tablecentered">
<caption></caption>
<tr>
<th id="label">Light Jedi</th>
<td headers="description"> Light Sith are adherents to the Sith order who utilize the Light Side of the Force (and perform acts accordingly).</th>
</tr>
<tr>
<th id="label">Dark Jedi</th>
<td headers="description">Is a Legends canon term referring to trained Force sensitives who could potentially use both the Light and Dark Sides of the Force, but more importantly worked toward personal ethics rather than those established by the Sith or the Jedi order.</td>
</tr>
<tr>
<th id="label">Grey Jedi</th>
<td headers="description">Dark Jedi use the Dark Side of the Force, but are not Sith Lords. In present canon, that includes trained Force sensitives from outside the Jedi order, such as Asajj Ventress. </td>
</tr>
</table>
</div>
</main>
<footer>
<p>
Andrew Salazar's Project <br>
<a href="[email protected]">[email protected]</a>
</p>
</footer>
</div>
</body>
</html>
Raw
sith.html
<!DOCTYPE html>
<html lang="en">
<head>
<title> Star Wars Sith</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>
Star Wars
</h1>
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="jedi.html">Jedi</a></li>
<li><a href="sith.html">Sith</a></li>
<li><a href="table.html">Bounty</a></li>
</ul>
</nav>
<main>
<div id="sith"></div>
<h2> Sith </h2>
<p>
“Equality is a myth to protect the weak. some of us are strong in the Force, others are not. Only a fool believes otherwise.”
― Drew Karpyshyn, Path of Destruction
</p>
<h4>
January
</h4>
<div class="details">
<a href="sithlord1.jpg">
<img src="sithlord1.jpg"
alt="Go to Melanie Morris full picture"
class="floatleft">
</a>
Maul: "What could you hate enough to destroy me?"
<br>Vader: "Myself."
<audio controls="controls">
<source src="starwarssong1.mp3" type="audio/mp3">
</audio>
</div>
<h4>
Darth Maul
</h4>
<div class="details">
<a href="sithlord2.jpg">
<img src="sithlord2.jpg"
alt="Go to Tahoe Greg full picture"
class="floatleft">
</a>
Maul: "What could you hate enough to destroy me?"
<br>Vader: "Myself
<audio controls="controls">
<source src="starwarssong1.mp3" type="audio/mp3">
</audio>
</div>
</main>
<footer>
<p>
Andrew Salazar's Project
<br>
<a href="[email protected]">andrewsalazar097@gmail</a>
</p>
</footer>
</div>
</body>
</html>
Raw
stylesheet.css
header, nav, main, footer
{display:block;
}
*
{box-sizing:border-box;
}
img
{padding-left:10px;
padding-right:10px;
}
audio
{display:block;
margin-top:1em;
}
body
{background-image: url(background.jpg);
color:#221811;
font-family:Verdana;
}
header
{background-color:#black;
height:150px;
background-image: url(logo.jpg);
background-repeat:no-repeat;
margin-bottom:0px;
padding-bottom:0px;
color: white;
}
h1
{padding-top:45px;
padding-left:220px;
font-size:3em;
}
h4
{background-color:#C0C0C0;
font-size:1.2em;
text-transform:uppercase;
border-bottom:1px solid #000000;
padding-bottom:0px;
clear:left;
}
form
{padding:2em;
}
nav
{text-align:center;
font-weight:bold;
font-size:1.5em;
padding-top:10px;
float:left;
width:200px;
}
nav a:link
{text-decoration:none;
color:#696969;
}
nav a:visited
{text-decoration:none;
color:white;
}
nav a:hover
{text-decoration:none;
color:#000000;
}
nav ul
{list-style-type:none;
padding-left:2em;
}
main
{margin-left:200px;
padding-bottom:1em;
display:block;
background-color:#000000;
margin-top:0px;
padding-top:0px;
color: white;
}
main h2, h3, h4, p, ul, dl
{padding-left:3em;
padding-right:2em;
}
label
{display:block;
float:left;
text-align:right;
width:8em;
padding-right:1em;
}
input
{display:block;
margin-bottom:1em;
}
textarea
{display:block;
margin-bottom:1em;
}
dt
{font-weight:bold;
}
table
{width:90%;
margin:auto;
border-spacing:0px;
background-color:#C0C0C0;
padding-bottom:1em;
}
td, th
{padding:10px;
}
tr:nth-of-type(odd)
{background-color:#808080;
}
footer
{background-color:#C0C0C0;
font-size:.6em;
font-style:italic;
text-align:center;
padding-bottom:10px;
border-top:1px solid #221811;
}
.details
{padding-left:20%;
padding-right:20%;
overflow:auto;
}
.floatleft
{float:left;
padding-right:20px;
padding-bottom:20px;
}
#marginSubmitButton
{margin-left:128px;
}
#marginAndPaddingSetter
{margin-top:0px;
padding-top:10px;
}
#wrapper
{min-width:900px;
max-width:1280px;
margin-left:auto;
margin-right:auto;
background-color:#43464b;
box-shadow:2px 2px 2px;
}
#multifaction
{background-image: url(FactionBanner.jpg);
background-size:100%;
height:250px;
background-position: center;
}
#jedi
{background-image: url(JediBanner.png);
background-size:100%;
height:250px;
background-position: center;
}
#sith
{background-image: url(EmpireBanner.jpg);
background-size:100%;
height:250px;
background-position: center;
}
#bountyhunter
{background-image: url(BountyBanner.jpg);
background-size:100%;
height:250px;
background-position: center;
}
#mobile
{display:none;
}
#desktop
{display:inline;
}
#mysubmit
{margin-left:9.5em;
}
@media only screen and (max-width: 1024px){
*
{box-sizing:border-box;
}
body
{margin:0px;
background-image:none;
}
header
{border-bottom:#fef6c2 solid 5px;
}
h1
{margin-top:0px;
margin-bottom:1em;
padding-top:1em;
padding-bottom:1em;
font-size:2.5em;
}
nav
{float:none;
width:auto;
padding-top:0px;
margin:10px;
font-size:1.3em;
}
nav li
{display:inline-block;
}
nav ul
{padding:0px;
margin:0px;
display:inline-block;
}
nav a
{padding:1em;
width:8em;
font-weight:bold;
border-style:none;
display:inline-block;
}
main
{padding:0px;
margin:0px;
font-size:90%;
}
#wrapper
{width:auto;
min-width:0px;
margin:0px;
padding:0px;
box-shadow:none;
}
#multifaction
{background-image: url(FactionBanner.jpg);
background-size:100%;
height:200px;
margin:0px;
padding:0px;
}
#jedi
{background-image: url(JediBanner.png);
background-size:100%;
height:200px;
margin:0px;
padding:0px;
background-position: center;
}
#sith
{background-image: url(EmpireBanner.jpg);
background-size:100%;
height:200px;
margin:0px;
padding:0px;
}
#bountyhunter
{background-image: url(BountyBanner.jpg);
background-size:100%;
height:200px;
margin:0px;
padding:0px;
}
}
@media only screen and (max-width: 726px) {
*
{box-sizing:border-box;
}
header
{background-image: url(logo.jpg);
height:128px;
}
header h1
{padding-top:1em;
}
h1
{font-size:2em;
text-align:center;
padding:0px;
}
nav
{margin:0px;
}
nav a
{display: inline-block;
padding:.2em;
width:auto;
border-bottom:#fef6c2 solid 1px;
}
nav li
{display:block;
}
main
{padding-top:1px;
}
h2
{padding-top:.5em;
padding-right:0px;
padding-bottom:0px;
padding-left:.5em;
margin-right:.5em;
}
.details
{padding-left:0px;
padding-right:0px;
}
.floatleft
{padding-left:.5em;
padding-right:.5em;
}
#multifaction
{background-image: none;
height:auto;
}
#jedi
{background-image: none;
height:auto;
}
#sith
{background-image: none;
height:auto;
}
#bountyhunter
{background-image: none;
height:auto;
}
#mobile
{display:inline;
}
#desktop
{display:none;
}
}
Raw
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Star Wars Bounty Hunter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>
Star Wars
</h1>
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="jedi.html">Jedi</a></li>
<li><a href="sith.html">Sith</a></li>
<li><a href="table.html">Bounty</a></li>
</ul>
</nav>
<main>
<div id="bountyhunter"></div>
<h2 id="marginAndPaddingSetter">
Bounty Hunter
</h2>
<p>
Who is your favorite bounty hunter?
<br>Required fields are marked with an asterik(*).
</p>
<form method="post" action="/action_page.php">
<label for="name"> * Name:</label> <input type="text" name="myName" id="name" required>
<label for="E-Mail"> * E-mail:</label><input type="email" name="myE-mail" id="E-Mail" required>
<label for="Experience"> * Favorite Gun:</label><textarea id="Experience" name="myExperience" cols="21" rows="2" required></textarea>
<input id="marginSubmitButton" type="submit" value="Vote Now!">
</form>
</main>
<footer>
<p>
Andrew Salazar's Project
<br>
<a href="[email protected]">[email protected]</a>
</p>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment