HTML
<!DOCTYPE html>
<title>Project Sentinel</title>
<div id= "head">
<!--Name and Slogan Below-->
<div id= "ps"><b><br><br><br><br>Project Sentinel<br>
<div id="slogan">"Giving opportunity to those who have little"</div>
</div></b></div>
</div>
<!--First White Box Below-->
<div id="what">
<div id="h1">
<b>What is Project Sentinel?</b>
</div>
<div id="p1">
<b>Project Sentinel is the idea of giving the less fortunate access to the field of coding through sponsors, donations and volunteers. Young Americans who don't have a wealthy socio-econimic family are still entitled to be given a taste a everything. Most to all people of that socio-economic status are not introduced to the realm of coding. We beilieve that is asinine, and we are here to help. </b>
</div>
</div>
<!--Asking How Below-->
<div id="head2">
<div id="how">
<br><br><br><br><b>How will we go through with this process?</b>
</div>
</div>
<!--Second White Box Below-->
<div id="what2">
<div id="h2">
<b>How?</b>
</div>
<div id="p2">
<b>Our project is a four phase plan. These four phases are aslo known as "The Four P's", are Preach, Plan, Prepare, Provide. Please take a look below and click "Read More" to see the in-depth explanation of "The Four P's Plan" and more!<br><br><br><br>
</div>
<!--4 Buttons Below-->
<div id="buttons">
<div id="infoaboutbuttons">
<br><br> If you are interested and would like to read more, donate, join, or contact us please click on the corresponsing buttons below, Thank You!
</div>
<div style="text-align:center"
<br><br><br><br><br><br><button>Read More</button>
<button>Join</button>
<button>Donate</button>
<button>Conatct Us</button>
CSS
#head {
background-image:url(http://i.imgur.com/JbQkfGZ.jpg);
height:930px;
width:1920px;
}
#ps {
font-size:75px;
font-family:Arial;
text-align:center;
color:GhostWhite;
}
#slogan {
font-size:35px;
}
#what {
background-color:White;
height:500px;
width:1920px;
}
#h1 {
font-size:75px;
font-family:Garamond;
text-align:center;
color:SteelBlue;
margin:120px;
}
#p1 {
font-size:40px;
font-family:Garamond;
text-align:center;
color:SteelBlue;
}
#head2 {
background-image:url(http://i.imgur.com/JbQkfGZ.jpg);
height:930px;
width:1920px;
}
#how {
font-size:75px;
font-family:Arial;
text-align:center;
color:GhostWhite;
}
#what2
{
background-color:White;
height:1080px;
width:1920px;
}
#h2 {
font-size:75px;
font-family:Garamond;
text-align:center;
color:SteelBlue;
margin:120px;
}
#p2 {
font-size:40px;
font-family:Garamond;
text-align:center;
color:SteelBlue;
}
#buttons {
background-image:url(http://i.imgur.com/JbQkfGZ.jpg);
height:430px;
width:1920px;
}
#infoaboutbuttons
{
font-size:35px;
font-family:Arial;
text-align:center;
color:OldLace;
}
button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4682b4), color-stop(1, #4682b4));
background:-moz-linear-gradient(top, #4682b4 5%, #4682b4 100%);
background:-webkit-linear-gradient(top, #4682b4 5%, #4682b4 100%);
background:-o-linear-gradient(top, #4682b4 5%, #4682b4 100%);
background:-ms-linear-gradient(top, #4682b4 5%, #4682b4 100%);
background:linear-gradient(to bottom, #4682b4 5%, #4682b4 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4682b4', endColorstr='#4682b4',GradientType=0);
background-color:#4682b4;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
font-weight:bold;
padding-left:950px;
text-decoration:none;
}
button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4682b4), color-stop(1, #4682b4));
background:-moz-linear-gradient(top, #4682b4 5%, #4682b4 100%);
background:-webkit-linear-gradient(top, #4682b4 5%, #4682b4 100%);
background:-o-linear-gradient(top, #4682b4 5%, #4682b4 100%);
background:-ms-linear-gradient(top, #4682b4 5%, #4682b4 100%);
background:linear-gradient(to bottom, #4682b4 5%, #4682b4 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4682b4', endColorstr='#4682b4',GradientType=0);
background-color:#4682b4;
border:5px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:28px;
font-weight:bold;
padding:6px 12px;
text-decoration:none;
}
