iPhone 5 Window

by MythOfEchelon

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                padding: 30px;
                text-align: center;
                font-family: "Myriad Pro";
                font-size: 20px;
            }
            
            div {
                float: left;
                background-color: white;
            }
            
            #iPhone {
                position: relative;
                width: 320px;
                height: 480px;
                border: 3px solid black;
                overflow: hidden;
            }
            
            #statusBar {
                position: absolute;
                top: 0;
                width: 100%;
                height: 20px;
                line-height: 20px;
                font-size: 14px;
            }
            
            #header {
                position: absolute;
                top: 20px;
                width: 100%;
                height: 45px;
                line-height: 45px;
            }
            
            #content {
                height: 100%;
                position: absolute;
                top: 65px;
                width: 100%;
                font-size: 14px;
                text-align: left;
                
            }
            
            #content span {
            height: 78%; /*Couldn't be bothered to configure this properly*/
                display: block;
                padding: 0px 20px 10px 20px;
                overflow-y: scroll;
            }
            
            #footer {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 45px;
                line-height: 45px;
            }
        </style>
        
        <script...