Hey guys, currently learning how to make websites and right now I'm attempting(work in progress) to make a semi-rip-off of the powerbot landing page but I've a few questions that I can't solve... my code is below.
- How do I make the header image fill to the top and full width because atm it's a tad off?
- How do I center my menu properly because right now it's just off to the right?
Thanks!
E: Any tips welcome
E2: Anyone know how to add a fade effect like so?
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title><< RSBot >> #1 Runescape Bot</title>
<style>
#header {
background-image: url("http://www.ribalaw.com.au/wp-content/themes/thedawn/images/skins/dark-blue/header-bg.jpg");
color:white;
text-align:center;
padding:0px;
postion: fixed;
margin: 0px;
width: 100%;
}
#menu {
background-color:transparent;
color:darkgrey;
text-align:center;
padding:0px;
margin: 0px;
font-family: arial;
}
#footer {
background-color:none;
color:white;
text-align:center;
padding:1px;
position:fixed;
bottom:0;
left:0;
right:0;
}
body {
background-image: url("https://powerbot-dequeue.netdna-ssl.com/assets/img/sprites/splash_blur_hatched.jpg");
background-repeat: no-repeat;
background-size: cover;
}
a:link {
colour: white;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: white;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: white;
background-color: transparent;
text-decoration: underline;
}
.button {
display:block;
height: 35px;
width: 130px;
text-align: center;
display: inline-block;
line-height: 40px;
padding: 0px;
font-size: 30px;
background: none;
border: 2px solid white;
}
a.button:hover {
background: #3d7a80;
background: -webkit-linear-gradient(top, #3d7a80, #2f5f63);
background: -moz-linear-gradient(top, #3d7a80, #2f5f63);
background: -o-linear-gradient(top, #3d7a80, #2f5f63);
background: -ms-linear-gradient(top, #3d7a80, #2f5f63);
background: linear-gradient(top, #3d7a80, #2f5f63);
}
#menu {
width: 400px;
height: 35px;
font-size: 16px;
font-family: "Arial Black", Gadget, sans-serif;
text-align: center;
}
#menu li {
display: inline;
padding: 16px;
color: grey;
}
#menu li:hover {
background-color: dodgerblue;
padding: 14px 16px;
color: white;
}
h1 {
font-size: 300%;
}
</style>
<center>
<div id="header">
<img src="https://powerbot-dequeue.netdna-ssl.com/assets/img/logos/logo.png">
<center>
<div id="menu">
<ul>
<li><a>Community</a></li>
<li><a>Scripts</a></li>
<li><a>Store</a></li>
</ul>
</div>
</div>
</head>
<body>
<h1 style=color:white;font-family:"Arial";>THE WORLD'S MOST POPULAR RUNESCAPE BOT SINCE 2006</h1>
<a href="https://www.powerbot.org/download/?win" class="button">Download</a>
</body>
<footer>
<div id="footer">
Copyright 2016 RSBot.com
</div>
</footer>
</html>
Preview