HTML
<!DOCTYPE html>
<title>Project Sentinel</title>
<div id= "head">
<!--Name and Slogan Below-->
<div id= "ps"><b><br><br><br><br>The Four P's Plan<br>
<div id="slogan">Preach, Plan, Plan, Provide</div>
</div></b></div>
</div>
<!--First White Box Below-->
<div id="what">
<div id="h1">
<b>Preach</b>
</div>
<div id="p1">
<b>The first phase of "The Four P's" plan is to preach. Spreading the word is key to develop many key attributes to the project such as sponsors, volunteers, people, and a venue. We will also be spreading the word through twitch charity streams, so make sure to tune in there!!!</b><br><br></div>
<div id="h1"><b>Plan<b></b></div>
<div id="p1">
<b>
The second phase of "The Four P's" plan is to plan. The planning phase is essentially to make the decisions on when, where, and why. This phase will also entail the gathering of numbers. By "the gathering of numbers" we mean three things, the ammount of people whos lives we will change, the cost, and the volunteers we need.
</div>
<div id="h1"><b>Prepare<b></b></div>
<div id="p1">
<b>
The third phase of "The Four P's" plan is to Prepare. The difference between planning and preparing is the part where we take action. During the preparing phase, we will book the venue, set the dates, get the voulnteers and people, then get ready for execution.</div>
</b>
<div id="h1"><b>Provide<b></b></div>
<div id="p1">
<b>
The fourth and final phase of "The Four P's" plan is to Provide. This phase is to execute our plans of exposing coding to people who have never seen such as a thing, and by the end of the providing phase we will be able to say we have givin the less fortunate a taste of coding, because they may never have an experience like that one again, and ultimately spark an interset in coding for them.
</b><br><br><br>
<div id= "curriculum"><b><br><br><br><br>What will we be using to teach these people?<br></div>
<div id="how">
<br>SoloLearn<br><br>
</div>
<div id="p2">
We will be teaching our clients with SoloLearn. SoloLearn is a massive organzation with a variety of courses about nearly all the languages. The reason we partnered with SoloLearn is because of there simple but well-developed curriculum. There curriculum teaches in-depth training courses from the simplicity of HTML & CSS, all the way to the complexity of c++. With this wide variety of courses, we could ask our clients "What do you want tto be able to do with coding?", and we could give the course, corresponding with their answer. To check out SoloLearn visit them at <a href=www.sololearn.com>www.SoloLearn.com</a><br><br><br>
</div>
<!--4 Buttons Below-->
<div id="buttons">
<div id="infoaboutbuttons">
<br><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><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;
}
#curriculum {
background-image:url(http://i.imgur.com/JbQkfGZ.jpg);
height:930px;
width:1920px;
font-size:75px;
font-family:Garamond;
color:GhostWhite;
}
#how {
font-size:75px;
font-family:Arial;
text-align:center;
color:SteelBlue;
}
#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:GhostWhite;
}
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;
}
3 Responses
Anyway awesome code, like it! :)