<!DOCTYPE html>
<html>
<head>
<style>
 /* This is a Comment when you see /* it is ignored by the web browser. It's notes for you and other developers to understand what the code is doing. Ex: The line below grabs a font from Google Web Fonts*/
    @import url(http://fonts.googleapis.com/css?family=Open+Sans);
    
/* This section controls the overall style of the web page*/
body {
    font-family:'Open Sans', helvetica, sanserif;
    background-color:#efefef;
    font-weight:300;
    background: url("REPLACE_ME_IMAGE") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
    font-size:100%;
    line-height:1.25em;
}

/* This sets the style of your name*/
h1 {
    font-weight:300;
    margin-bottom: -8px;
    margin-top: 0;
    padding: 0;
    font-size:1.25em;
}
/* This sets the style of text*/
p, p:link {
    margin-bottom: 0;
    font-size:.75em;
}
/* This sets the style the text area block*/
.contentarea {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3%;
    opacity:.9;
    color:white;  /*this is text color */
    text-align:center; /*this centers the text */
    margin: 0;
    /* select a color by rearranging which row is lowest */
    background-color: REPLACE_ME_COLOR;
}

/* This sets the style for links*/
a {
    color:white;
    text-decoration:none;
    opacity: .7;
    font-weight:300;
}

@media screen and (min-width:600px) {
    /* This section changes the styles for when the browser is more than 600px wide*/
    .contentarea {
        top: 30%;
        right: 5%;
        left: 60%;
        bottom: auto;
    }
    
    h1 { 
        font-size: 1.6em;
        padding-bottom:5px;

    } 
    
    p, p:link {
        font-size: .9em;
    }
}
</style>
</head>
<body>
   <!-- this is the HTML content of the page -->
<div class="image"></div>
<div class="contentarea">
<h1>REPLACE_ME_NAME</h1>
<p><a href="http://www.codecademy.com/REPLACE_ME_USERNAME">View my profile</a></p>
<p>REPLACE_ME_BIO<br>I am learning <a href="http://www.codecademy.com/tracks/REPLACE_ME_LOWERCASE">REPLACE_ME_GOAL</a></p>
</div>
</body>
</html>

Browse more Codebits