Danny Tran - Site One

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HoogleyBoogley</title>
    <style>
/*
By: Danny Tran
*/

body {
    margin: 0;
    float: center;
    font-family: sans-serif;
}

#header {
    width: 100%;
    height: 580px;
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

#nav {
    position: absolute;
    width: 100%;
    height: 80px;
    background: #fff;
    border-bottom: 4px solid #49bafb;
    border-top: 30px solid #363636;
    position: fixed;
}

#logo {
    width: 50px;
    height: 50px;
    margin-top: 15px;
    margin-left: 50px;
}

#donate {
    text-decoration: none;
    font-family: sans-serif;
    color: #49bafb;
    float: right;
    margin: 20px;
    border: 2px solid #49bafb;
    padding: 10px;
    border-radius: 5px;
}

#donate:visited {
    text-decoration: none;
    font-family: sans-serif;
    color: #49bafb;
}

#donate:hover {
    text-decoration: none;
    font-family: sans-serif;
    color: #fff;
    background-color: #49bafb;
}

.nav_item {
    display: inline;
    font-family: sans-serif;
    color: #49bafb;
    float: right;
    margin: 12px;
    margin-top: 30px;
    text-decoration: none;
}

.nav_item:visited {
    display: inline;
    font-family: sans-serif;
    color: #49bafb;
}

.nav_item:hover {;
    display: inline;
    font-family: sans-serif;
    color: #307aa6;
    text-align: center;
}

#container {
    width: 800px;
    margin: 0 auto;
    background: #FFF;
    padding: 0;
}

#title {
    width: 900px;
    height: 300px;
    background-color: red;
}

#info_text {
    background-color: #fff;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 0px;
    color: #302f30;
    margin-bottom: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#info_text_prime {
    background-color: #f2f2f2;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 0px;
    color: #302f30;
    padding-top: 20px;
    padding-bottom: 20px;
}

#info {
    background-color: #f2f2f2;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    color: #302f30;
}

h1 {
    color: #49bafb;
}

h3 {
    color: #4d4c4d;
}

#server_banner {
    width: 100%;
    margin: 0px;
}

a {
    color: #49bafb;
}

a:visited {
    color: #49bafb;
}

#footer {
    background-color: #3a3a3a;
    color: white;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 20px;
}

#server {
    text-decoration: none;
    font-family: sans-serif;
    color: #fff;
    margin: 20px;
    border: 2px solid #fff;
    padding: 10px;
    border-radius: 5px;
}

h4 {
    margin-top: 100px;
}

#server:visited {
    text-decoration: none;
    font-family: sans-serif;
    color: #fff;
}

#server:hover {
    text-decoration: none;
    font-family: sans-serif;
    color: #3a3a3a;
    background-color: #fff;
}
    </style>
</head>
<body>
<!-- HoogleyBoogley Site -->
<!-- Site by Danny Tran -->
<!-- minefiledmc.net -->
<a name="home"></a>
  <div id="header">
    <div id="nav">
        <a href="#home"><img src="logo.png" id="logo" /></a>
        <a href="#" id="donate">Donate</a>
        <a href="#contact" class="nav_item">Contact</a>
        <a href="#server" class="nav_item">Server</a>
        <a href="#about" class="nav_item">About</a>
    </div>
    <a name="about"></a>
  </div>
    <div id="info_text">
        <h1 style="text-align: center;">Hey, I'm HoogleyBoogley</h1>
        <h3 style="text-align: center;">I am a developer</h3>
        <p style="text-align: center;">This all started when I was in 5th Grade, my school district hosted an event when kids get to show off what they know about technology, I was doing something about Minecraft. I wasn't presenting, so I was bored. Instead of sitting around playing on playing on my phone, I took a look around and found what grew into being my passion for a long, long time. I thought it was boring at first, like what does typing a bunch of text do? But it turned out cooler than I thought. They taught me HTML and CSS, and I am glad I stayed for the presentation.</p>
    </div>
    <img src="ban1.png" id="server_banner" />
    <div id="info">
    <div id="info_text_prime">
        <h1 style="text-align: center;"><a name="server"></a>I own a Minecraft server.</h1>
        <h3 style="text-align: center;">The MineField Network</h3>
        <p style="text-align: center;">I had always wanted a website and my own Minecraft server when I was younger. I had always looked at the Hypixel Network for inspiration, that was one of my favorites Minecraft servers I played on. The first server I played on was called the Overcast Network, I also watched a YouTube Channel called <em>The Crew</em> and played on their server as well. After a few years of playing on others servers I tried to make my own server, which became known as the MineField Network. It is a factions server, and it still is today!</p>
    </div>
    </div>
    <a name="contact"></a>
    <img src="ban2.png" id="server_banner" />
    <div id="info_text">
        <h1 style="text-align: center;"><a name="contact"></a>Want to talk to me?</h1>
        <h3 style="text-align: center;">Send me and E-Mail!</h3>
        <p style="text-align: center;">Weather it is a business opportunity or anything else, you can reach me at <a href="mailto:[email protected]">[email protected]</a>.</p>
    </div>
    <div id="footer">

        <a href="http://minefieldmc.net/" id="server">My Server</a>
        <h4>HoogleyBoogley Network &copy 2016</h4>

    </div>
</body>
</html>