Mobile Website

A mobile website design testing ground.

by Taylor Lopez

HTML

<div class="slide" id="firstImage">
    <div class="slideContent">
        <div id="portrait"></div>
        <h1>Jason Lopez</h1>
        <p>Welcome to the site dedicated to Jason Lopez</p>
        <p>
            Check out his 
            <a href="http://www.facebook.com/LopezJason" target="_blank"><span id="facebookButton">Facebook</span></a> 
            page!
        </p>
    </div>
</div>

CSS

/* TAG STYLING */
html, body
{
    font-size: 62.5%;
    width: 640px;
    height: 1136px;
    margin: 0;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    
    /*TEMPORARY*/
    opacity: .4;
}

h1, h2, h3, h4, h5, h6, p
{
    font-family: sans-serif;
    text-align: center;
    color: #EEE;
    line-height: 1;
}

h1, h2, h3
{
    text-shadow: 0 .16rem .16rem #111;
}

h1 { font-size: 6.4rem; }

p, a
{ 
    font-size: 2.4rem;
    text-shadow: 0 0 .2rem #000;
    text-decoration: none;
}

/* CLASS STYLING */

.slide
{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.slideContent
{
    width: auto;
    height: auto;
    padding: 8rem 1.6rem 4.8rem 1.6rem;
}

/* ID STYLING */

#portrait
{
    margin: auto;
    width: 32rem;
    height: 32rem;
    background-image: url('http://blogs.smithsonianmag.com/aroundthemall/files/2009/01/npg_portraits_nicholson_jack_2002.jpg');
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    border: 0.32rem white solid;
    box-shadow: 0 .16rem .16rem #111;
}

#firstImage
{
    background-image: url('http://cdn.wallwuzz.com/uploads/retro-wallpapers-pixel-wallpaper-backgrounds-gamer-baseball-large-myspace-wallwuzz-hd-wallpaper-13656.jpeg');
}

#facebookButton
{
    height: 3.2rem;
    border-radius: .8rem;
    background-color: #3b5998;
    color: #fff;
    font-weight: bold;
    padding: .32rem;
    border: .24rem solid #8b9dc3;
}

JavaScript

$(function(){
    //alert("hello");
});