So I’m using my HTML, CSS and javascript skills I’ve learned and making a random website for practice. I’m having some trouble with making the button a different color.
yeah i know my code looks awful, but practice makes perfect. Please be sure to let me know what I can do to improve my code. Thank you!
HTML:
Things and Stuff<div id="header-text">
<h3>What we do</h3>
</div>
<div class="whatWeDo">
<p> Here at Things and Stuff, we stive to help outside<br> sellers, sell their product through
a third party campain.<br>We understand how hard it is may be sell your product on your own or<br>
having to pay a major website or company to be the third party where they might get most of the cut.
We specialize in helping<br> your product become successful!
We want to ensure you are getting the profit<br> you deserve for your hard work.</p>
</div>
How It Works
- Pay a one time fee of $100.00 to get your product registered and ready to sell
- We put your product out on our website, ads across the internet, and the more
your product is viewed, and purchased, the more it will show on our "Featured Products" page. - It's also up to you to give your product as much information you can.
along with what it can do,
why someone should buy it, your asking price, ect. - Give us the information about your product and we'll take it from there!
- Over time if your product sells 10, 100, 1,000 and so forth and you are still using our service,
we get 18% of the profit at the end of each month and you get to keep the rest
and congratulate yourself on a job well done!
<h4> <a href="https://www.thingsandstuff.com/successstory.com/">This Months Success Story</a></h4>
<p id="productOfTheMonth">Who Has The Product of the Month?!</p>
<button onclick="button()">Find out here!</button>
<script> function button() {
document.getElementById("productOfTheMonth").innerHTML = "Aaron Baker!";
}
</script>
CSS:
header {
font-family: Arial;
text-align: center;
background-image:
url(“https://s-media-cache-ak0.pinimg.com/originals/5f/c5/34/5fc5348121c8d2835e7a56e353293e85.jpg”);
background-position: center center;
background-size: cover;
height: 650px;
width: 100%;
}
#header-text {
margin: 0 auto;
position: relative;
text-align: center;
top: 25%;
width: 500px;
padding: 10px 10px;
border: solid black;
border-radius: 75px 75px;
margin-top: 5px;
opacity: 0.8;
color: white;
}
h3 {
font-family: serif;
text-align: center;
font-size: 35px;
}
body {
background-image: url(“http://amxxcs.ru/download/stars-in-space-background-OH1Cf1c”);
background-size: cover;
background-position: center center;
height: 650px;
width: 100%;
}
.whatWeDo {
margin: 0 auto;
position: relative;
text-align: center;
top: 25%;
border-radius: 60px 15px;
border: solid black;
margin-top: 5px;
width: 500px;
color: white;
opacity: 0.7;
}
.howItWorks {
margin: 0 auto;
position: relative;
text-align: center;
top: 25%;
border-radius: 60px 15px;
border: solid black;
margin-top: 5px;
width: 500px;
color: white;
opacity: 0.6;
}
h1 {
text-align: center;
font-size: 30px;
}
a:link {
color:lightwhite;
}
h4 a:link {
color: maroon;
}
p.aaron {
color: white;
}
.button {
color: pink;
}
ul {
list-style-type: none;
margin: 0;
padding: 10;
overflow: hidden;
}
li {
float: left;
opacity: 50%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: lightblue;
}