My First Splash Page: “The Free Money Site”

Here is my very first splash page!

Screen Shot 2014-09-17 at 12.20.28 AM

You’ll have to disregard the many tabs I had opened in my screenshot, it was my first time coding! With this page, I used basic HTML and CSS code to create a make-believe splash page for a company who sends people FREE MONEY!!!! Wouldn’t that be nice?! I was able to create an email input feature for subscribers, but since I do not know Javascript yet, it is currently non-functional.

I created this page using code I learned with the General Assembly “Dash” free tutorials that were available to me. I was able to quickly adapt and learn HTML and CSS tricks and tips quickly and effectively. First, I made the headline and inputs using HTML. Then, I styled the background and text using CSS. After that, I added a background image and logo to the page and I was done!

Here’s a link for a closer look:

 https://dash.generalassemb.ly/cpierce278/build-your-own-personal-website

Skills I learned while creating this webpage:

h1-h6, email input, submit input, <p>, placeholder, style, body, head, title, text-align, background image, font-family, color, uploading images and image URL’s, background size, background position, font size, border, padding, and attribute selectors. Detecting and fixing bugs in HTML. Bold, italics, underlined font.

Here’s a closer look at the code I used:

<!DOCTYPE html>
<head>
<title>THE FREE MONEY SITE</title>
<style>
body {
text-align: center;
background: url(“http://www.collegescholarships.org/images/falling-money.jpg&#8221;);
background-size: cover;
background-position: center;
color: black;
font-family: helvetica;
span: font-weight: bold;
}
p {
font-size: 28px;
}
input {
border: 0;
padding: 10px;
font-size: 18px;
}
input[type=”submit”] {
background: red;
color: white;
}
img {
padding:1px;
border:1px solid #021a40;
}
</style>
</head>
<body>
<img src=”http://cashforcarswarren.com/wp-content/uploads/2013/03/cash-mone.jpg”&gt;
<p>Free Money Website! Learn how to have cash delivered to your doorstep each day! </p>
<p>Enter your email below and start making $$$$ today!</p>
<input type=”email” placeholder=”Your email”>
<input type=”submit”>
</body>

</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s