Created
October 25, 2012 05:40
-
-
Save joelip/3950617 to your computer and use it in GitHub Desktop.
DR Prototype Markup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* DR Prototype Markup*/ | |
| /* colors | |
| */ | |
| /* border reference | |
| border: [size px] [line type (solid etc)] [color]; | |
| */ | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| color: rgb(255,246,238); | |
| margin: 0 auto 0 auto; | |
| padding: 0px; | |
| display: block-inline; | |
| font-family: 'Quattrocento Sans', helvetica, arial, sans-serif; | |
| } | |
| @font-face { | |
| font-family: 'Quattrocento Sans'; | |
| font-style: normal; | |
| font-weight: normal; | |
| src: local('Quattrocento Sans'), local('QuattrocentoSans'), url('http://themes.googleusercontent.com/static/fonts/quattrocentosans/v5/efd6FGWWGX5Z3ztwLBrG9coBJSyBiVuloIc8IXLz46o.woff') format('woff'); | |
| } | |
| /* global, repeated divisions */ | |
| header { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| header #topbar { | |
| width: 100%; | |
| height: 30px; | |
| margin: 0px 0px 0px 0px; | |
| border: 0px; | |
| background-color: rgb(255,246,238); | |
| -moz-box-shadow: rgb(196,189,182) 2px 2px 5px; | |
| -webkit-box-shadow: rgb(196,189,182) 2px 2px 5px; | |
| -border-radius-shadow: rgb(196,189,182) 2px 2px 5px; | |
| } | |
| aside { | |
| font: 'Quattrocento Sans', Helvetica, sans-serif; | |
| position: absolute; | |
| left: 0px; | |
| bottom: 0px; | |
| } | |
| section { | |
| } | |
| /* login space */ | |
| #sidebox { | |
| /* needs to have proper alignment (left) */ | |
| font: inherit; | |
| float: left; | |
| width: 350px; | |
| position: absolute; | |
| top: 30px; | |
| left: 0px; | |
| bottom: 0px; | |
| background-color: rgb(15,10,6);; | |
| -moz-box-shadow: rgb(196,189,182) 2px 2px 5px; | |
| -webkit-box-shadow: rgb(196,189,182) 2px 2px 5px; | |
| -border-radius-shadow: rgb(196,189,182) 2px 2px 5px; | |
| } | |
| #titlebox { | |
| font-family: helvetica, arial, sans-serif; | |
| margin: 0px auto auto auto; | |
| vertical-align: top; | |
| } | |
| #welcometitle { | |
| font-size: 18pt; | |
| margin: 10px 0px 0px 10px; | |
| } | |
| #homelogin { | |
| margin: auto auto auto 10px; | |
| font-family: 'Quattrocento Sans', helvetica, arial, sans-serif; | |
| } | |
| /* login forms */ | |
| form { | |
| font-size: 16pt; | |
| } | |
| .logtextbox { | |
| height: 30px; | |
| width: 250px; | |
| } | |
| .signinsubmit { | |
| height:50px; | |
| width: 170px; | |
| font-family: 'Quattrocento Sans', helvetica, arial, sans-serif; | |
| font-size: 14pt; | |
| background: | |
| -webkit-linear-gradient(top, #fff, #f0f0f0); | |
| -moz-linear-gradient(top, #fff, #f0f0f0); | |
| -linear-gradient(top, #fff, #f0f0f0); | |
| -moz-border-radius: 5px; | |
| -webkit-border-radius: 5px; | |
| -border-radius: 5px; | |
| border: 1px solid rgb(196,189,182); | |
| cursor: pointer; | |
| } | |
| /* slide space */ | |
| #droomslides { | |
| width: 69%; | |
| margin: 0px; | |
| float: left; | |
| position: absolute; | |
| top: 30px; | |
| right: 0; | |
| bottom: 0px | |
| } | |
| .slideimg { | |
| margin: 10% 0% 0% 8%; | |
| border: 1px solid rgb(196,189,182); | |
| } | |
| /* footer */ | |
| footer { | |
| } | |
| nav { | |
| } | |
| .smallbnav { | |
| /* b stands for bottom */ | |
| position: absolute; | |
| bottom: 15px; | |
| } | |
| .smallbnav > ul { | |
| list-style: none; | |
| display: inline; | |
| padding: 0px auto 0px auto; | |
| } | |
| .smallbnav > ul > li { | |
| display: inline; | |
| margin: 0px 3% 0px 4%; | |
| } | |
| .smallbnav a { | |
| text-decoration: none; | |
| font-family: 'Quattrocento Sans', helvetica, arial, sans-serif; | |
| color: rgb(15,10,6); | |
| } | |
| .smallbnav a:hover { | |
| text-decoration: none; | |
| font-family: 'Quattrocento Sans', helvetica, arial, sans-serif; | |
| color: rgba(15,10,6,0.8); | |
| cursor: pointer; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <header> | |
| <div id="topbar"></div> | |
| </header> | |
| <!--aside needs to have styling to separate it from the body. Also have it take up about 33% of page.--> | |
| <aside id="sidebox"> | |
| <!--Some kind of welcome and description of the service. Also an indication of sign in.--> | |
| <div id="titlebox"> | |
| <h2 id="welcometitle">Welcome to Dressing Room!</h2> | |
| <p id="welcomemessage"> | |
| </p> | |
| </div> | |
| <section id="homelogin"> | |
| <form> | |
| <p> | |
| Username: | |
| <br /> | |
| <input class="logtextbox" type="text"> | |
| </p> | |
| <p> | |
| Password: | |
| <br /> | |
| <input class="logtextbox" type="password"> | |
| </p> | |
| <p> | |
| <input class="signinsubmit" type="submit" value="Sign in"> | |
| </p> | |
| </form> | |
| </section> | |
| <footer> | |
| <nav class="smallbnav"> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Terms</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </footer> | |
| </aside> | |
| <!--picture turnstyle goes here--> | |
| <section id="droomslides"> | |
| <img class="slideimg" src="http://jakandjil.com/wp-content/uploads/2012/10/annaseleznevaparis.jpg" /> | |
| </section> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment