Code: Select all
<!DOCTYPE HTML>
<html>
<title> MAHS | Home</title>
<div id = "top"; div style = "position: relative; width: 75%; left: 12%; background-color: white; z-index: 1; ">
<body class="news">
<div class="nav">
<ul>
<li class="tutorials"><a href="#">MAHS TSA</a>
<ul>
<li><a href="info.htm">Info</a></li>
<li><a href="membership.pdf" target="_blank">Membership</a></li>
<li><a href="outreach.htm">Outreach</a></li>
<li><a href="fundraising.htm">Fundraising</a></li>
<li><a href="advisor.htm">The Advisor</a></li>
</ul>
</li>
<li class="tutorials"><a href="#">TSA Archives</a>
<ul>
<li><a>Webmaster</a>
<ul>
<li><a href="Webmaster - HTML Basics/Index.HTML" target="_blank">HTML Basics</a></li>
<li><a href="Webmaster - Mod Journ/index.html" target="_blank">Mod. Journ.</a></li>
<li><a href="Webmaster - Space Expl/index.html" target="_blank">Space Expl.</a></li>
</ul>
</li>
<li><a href="thestatesman.pdf" target="_blank">The Statesman</a></li>
<li><a href="conferenceawards.pdf" target="_blank">Conference Awards</a></li>
<li><a href="newsarticles.pdf" target="_blank">News Articles</a></li>
<li><a href="gallery.htm">Gallery</a></li>
</ul>
</li>
<li class="about"><a class="a" href="#">Curricula</a>
<ul>
<li><a href="stemIntegration.htm">STEM Integration</a></li>
<li><a href="stemMAHS.htm">STEM @ MAHS</a></li>
<li><a href="expectations.htm">Eng. Expectations</a></li>
</ul>
</li>
<li class="news"><a href="#">Resources</a>
<ul>
<li><a href="#">Webmaster 2015</a></li>
<li><a>School System</a>
<ul>
<li><a href="http://mahsweb.weebly.com/" target="_blank">Monroe Area</a></li>
<li><a href="http://www.walton.k12.ga.us/default.aspx" target="_blank">WCPS</a></li>
<li><a href="http://www.gadoe.org/Pages/Home.aspx" target="_blank">GA DOE</a></li>
</ul>
</li>
<li><a href="#">CTAE Orgs.</a>
<ul>
<li><a href="http://www.gactso.org/" target="_blank">GA CTSO</a></li>
<li><a href="https://www.gatsa.org/" target="_blank">GA TSA</a></li>
<li><a href="http://www.tsaweb.org/" target="_blank">TSA WEb</a></li>
</ul>
</li>
<li><a href="#">Connect</a>
<ul>
<li><a href="mailto:monroearea.tsa@gmail.com">Contact Us</a></li>
<li><a href="https://www.facebook.com/groups/155720111129987/" target="_blank">Social Media</a></li>
</ul>
</li>
<li><a href="#">Site</a>
<ul>
<li><a href="development.htm">Development</a></li>
<li><a href="sitemap.htm">Site Map</a></li>
<li><a href="nondiscrim.htm">Non-Discrim.</a></li>
<li><a href="privacy.htm" target="_blank">Privacy</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</div>
<div id = "SLIDESHOW"; div style = "position: relative; width: 75%; left: 12%; height: 350px;">
<img src = "Wolf.jpg" style = "height: 350px; width: 100%;">
</div>
<div id = "CONTENT"; div style = "position: relative; width: 75%; left: 12%; border: 1px solid black; background-color: white;">
<div id = "SECONDARY"; div style = "position: relative; width: 100%; border: 1px solid black; background-color: white;"><font size = "5";>Monroe Area High School is a Title 1 school located in
Walton County; founded in DATE, Monroe Area has educated thousands of students and multiple generations. In recent years,
Monroe Area has made an effort to expand CTAE curricula and to encourage the creation of high school CTAE organizations</font></div>
<div id = "THIRD"; div style = "position: relative; width: 50%; left:50%; border: 1px solid black; background-color: white;"><font size = "5">Among multiple CTAE pathways, including the courses
Engineering 1 through 4, Monroe Area is host to a passionate and highly involved set of students in the high school level of the Technology Student
Association. The MAHS TSA chapter provides an environment in which students may strive and thrive, all whilst "learning to live in a technical world."</font></div>
</div>
<footer><center><div id = "FOOTER"; div style = "background-color: grey; width: 75%; margin-left: -10px; margin-top: 0px; border: 1px solid grey"><font color = "white">
<address>© Copyright 2015 All Rights Reserved Monroe Area High School TSA</address>
</center></font></footer>
</div>
</html>
</html>
<style type = "text/css">
body {
background-color: #240B3B;
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav li:hover {
background-color: #005f5f;
}
/* Sub Menus */
.nav li {
font-size: .8em;
}
.nav li:hover ul {
display: block;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
@media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 55x;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul:hover ul{
display: block;
}
.nav li ul li{
display: block;
}
</style>