<!doctype html>
<html>
<head>
<title>Test</title>
<style>
ul {
margin: 0px;
}
html {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
min-height: 100%;
width: 75%;
max-width: 800px;
margin: 0 auto;
position: relative;
margin-bottom: -20px;
}
.background {
position: absolute;
top: 20px;
bottom: 20px;
width: 100%;
box-shadow: 0px 0px 3px black;
}
.footer {
position: absolute;
width: 100%;
bottom: 20px;
text-align: center;
}
.content {
min-height: 100%;
padding-bottom: 60px;
padding-top: 20px;
}
.menu-main {
display: block;
text-align: center;
}
.menu-main li {
display: inline-block;
padding: 0 20px;
}
.menu-side {
float: right;
width: 30%;
margin-top: 50px;
box-shadow: 0px 0px 3px black;
}
.flex {
width: 70%;
margin-top: 50px;
box-shadow: 0px 0px 3px black;
}
</style>
</head>
<body>
<div class="container">
<div class="background"></div>
<div class="content">
<ul class="menu-main">
<li><a href="index.html" class="current">Home</a></li>
<li><a href="contact_us.html">contact us</a></li>
<li><a href="video/video3.mp4">Facebook link</a></li>
<li><a href="video/video3.mp4">Twitter link</a></li>
<li><a href="/forum/">Visit forum</a></li>
</ul>
<div class="menu-side">
<ul>
<nav>
<li><a href="alleg.html">Allegheny Railroad</a></li>
<li><a href="gett.html">Gettysburg</a></li>
<li><a href="inde.html">Independence</a></li>
<li><a href="steam.html">Steamtown</a></li>
<li><a href="vall.html">Valley Forge</a></li>
<li><a href="hope.html">Hopewell Furnace</a></li>
<li><a href="fort.html">Fort Necessity</a></li>
</nav>
</ul>
</div>
<div class="flex"> <div class="artikle">
<article>
<h1>Welcome to "We love Penna project!"</h1>
<p>This project is prepared for PA Media and Design Competition 2019. It would like to show how beautiful Pennsylvania is, and to encourage youth to discover that themself. Also this project want to get them together.
</p>
<p>So, what are you waiting for? Go ahead use right sidebar menu and pick up your favorite site. Check it out and visit official website of each historical site listed bellow if you need more information. Use our locator section on every single historical site page on very bottom of each and get our approximal distance. Just put your local zip code there: good for Pennsyvania zip codes only. Also sign up on the forum page of this project. Share your impressions plans, find new friends and have fun! Feel free to contact us, subscribe and follow at social networks.
</p>
</article>
</div>
</div>
<div class="footer">
<p>Copyright belongs to "We love Penna" project and considered as a public service. 2019</p>
</div>
</div>
</div>
</body>
</html> |
