Created
October 29, 2012 19:46
-
-
Save joelip/3976080 to your computer and use it in GitHub Desktop.
DR Prototype Markup: Home Page/Account Page v2
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: Home Page/Account Page v2 */ | |
| Colors: | |
| Slight off white: rgb(251,251,251) | |
| Darkest black: rgb(51,52,53) | |
| Greyish black: rgb(81,81,82) | |
| Light purple grey: rgb(193,188,199) | |
| very subtle purple grey: rgb(167,166,168) | |
| dark purple grey: rgb(64,62,68) | |
| pastel dark purple: rgb(128,116,143) | |
| darkest grey purple: rgb(62,54,72) | |
| */ | |
| /* border reference | |
| border: [size px] [line type (solid etc)] [color]; | |
| */ | |
| } | |
| body { | |
| font-family: 'Quattrocento Sans', helvetica, arial, sans-serif; | |
| font-weight: 400; | |
| } | |
| @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'); | |
| } | |
| @font-face { | |
| font-family: 'raphaeliconsmedium'; | |
| src: url('raphaelicons-webfont-webfont.eot'); | |
| src: url('raphaelicons-webfont-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('raphaelicons-webfont-webfont.woff') format('woff'), | |
| url('raphaelicons-webfont-webfont.ttf') format('truetype'), | |
| url('raphaelicons-webfont-webfont.svg#raphaeliconsmedium') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| /* global, repeated divisions */ | |
| header { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| left: 0; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| ul a { | |
| text-decoration: none; | |
| font-family: helvetica, arial, sans-serif; | |
| color: rgb(12,10,18); | |
| font-size: 10pt; | |
| font-weight: 400; | |
| } | |
| /* header */ | |
| header #topbar { | |
| width: 100%; | |
| height: 30px; | |
| margin: 0px 0px 0px 0px; | |
| border: 0px; | |
| background-color: rgb(51,52,53); | |
| background-image: url(http://f.cl.ly/items/040U3v171H0P360w2b1d/Dark-thread-background-DR.jpg); | |
| -moz-box-shadow: rgb(12,10,18) 1px 1px 1px; | |
| -webkit-box-shadow: rgb(12,10,18) 1px 1px 1px; | |
| box-shadow: rgb(12,10,18) 1px 1px 1px; | |
| } | |
| .drlogosmall { | |
| position: absolute; | |
| top: 5px; | |
| left: 8px; | |
| } | |
| /* ****** begin main content ****** */ | |
| /* middle container */ | |
| .recentcont { | |
| height: 750px; | |
| width: 957px; | |
| margin: 0px auto 0px auto; | |
| position: absolute; | |
| top: 30px; | |
| left: 15%; | |
| bottom: 0px; | |
| list-style: none; | |
| z-index: -1; | |
| -moz-box-shadow: 0px 0px 0px 2px rgb(12,10,18); | |
| -webkit-box-shadow: 0px 0px 0px 2px rgb(12,10,18); | |
| box-shadow: 0px 0px 0px 2px rgb(12,10,18); | |
| } | |
| .recentcont > ul { | |
| height: 100%; | |
| display: inline; | |
| } | |
| .recentcont > ul > li { | |
| display: inline; | |
| float: left; | |
| } | |
| /* side profile */ | |
| .homeprof { | |
| float: left; | |
| position: relative; | |
| left: 0px; | |
| bottom: 0px; | |
| height: 750px; | |
| width: 184px; | |
| z-index: 1; | |
| background-color: rgb(51,52,53); | |
| -moz-box-shadow: 1px 1px 0px rgb(12,10,18); | |
| -webkit-box-shadow: 1px 1px 0px rgb(12,10,18); | |
| box-shadow: 1px 1px 0px rgb(12,10,18); | |
| border-left: 0px; | |
| } | |
| .welcomemess { | |
| font-family: helvetica, arial, sans-serif; | |
| font-size: 12pt; | |
| font-weight: 400; | |
| color: rgb(251,251,251); | |
| margin: 9% 5% 2% 5%; | |
| text-shadow: -1px -1px 0px rgb(12,10,18); | |
| } | |
| .profpic { | |
| width: 100px; | |
| height: 100px; | |
| margin-left: 10%; | |
| margin-right: auto; | |
| } | |
| /* actual recent content */ | |
| .recentclothcon { | |
| position: relative; | |
| width: 84.3%; | |
| z-indez: -1; | |
| height: 250px; | |
| float: left; | |
| background-color: rgb(81,81,82); | |
| -moz-box-shadow: inset 1px 1px 0px 1px rgb(51,52,53); | |
| -webkit-box-shadow: inset 1px 1px 0px 1px rgb(51,52,53); | |
| box-shadow: inset 1px 1px 0px 1px rgb(51,52,53); | |
| } | |
| .recentclothhead { | |
| width: 100%; | |
| height: 30px; | |
| background-color: rgb(51,52,53); | |
| font-family: helvetica, arial, sans-serif; | |
| font-weight: 400; | |
| border-top: 1px solid rgb(81,81,82); | |
| border-bottom: 1px solid rgb(81,81,82) | |
| -moz-box-shadow: 0px 1px 0px rgb(12,10,18); | |
| -webkit-box-shadow: 0px 1px 0px rgb(12,10,18); | |
| box-shadow: 0px 1px 0px rgb(12,10,18); | |
| } | |
| .recentclothtitle { | |
| font-size: 12pt; | |
| font-weight: 200; | |
| color: rgb(251,251,251); | |
| text-shadow: -1px -1px 0px rgb(12,10,18); | |
| margin: 7px 0px 0px 7px; | |
| } | |
| .clothlist { | |
| } | |
| .clothlist > li { | |
| } | |
| .clothingbox { | |
| float: left; | |
| display: inline; | |
| height: 180px; | |
| width: 120px; | |
| border: 1px solid rgb(51,52,53); | |
| margin: 50px 0px 0px 8%; | |
| } | |
| .navleftarrow { | |
| float: left; | |
| display:inline; | |
| width:40px; | |
| height:40px; | |
| border-radius: 21px; | |
| margin: 120px 0px auto 5px; | |
| font-size: 12pt; | |
| color:#fff; | |
| line-height:40px; | |
| text-align:center; | |
| text-decoration:none; | |
| background:rgba(62,54,72,.7); | |
| border: 1px solid rgba(10,15,6,.5); | |
| } | |
| .navleftarrow:hover{ | |
| background:rgba(62,54,72,.5); | |
| text-decoration:none; | |
| cursor: pointer; | |
| } | |
| .navrightarrow { | |
| float: left; | |
| display:inline; | |
| width:40px; | |
| height:40px; | |
| border-radius: 21px; | |
| margin: 120px 0px auto 8%; | |
| font-size: 12pt; | |
| color:#fff; | |
| line-height:40px; | |
| text-align:center; | |
| text-decoration:none; | |
| background:rgba(62,54,72,.7); | |
| border: 1px solid rgba(10,15,6,.5); | |
| } | |
| .navrightarrow:hover{ | |
| background:rgba(62,54,72,.5); | |
| text-decoration:none; | |
| cursor: pointer; | |
| } | |
| /* ****** end of main content ****** */ | |
| /* footer */ | |
| footer { | |
| } | |
| nav { | |
| } | |
| .underprofnav { | |
| position: relative; | |
| font-weight: bold; | |
| left: 12%; | |
| margin: 0px 0px 40px 0px; | |
| padding: 0px; | |
| } | |
| .underprofnav a:hover { | |
| color: rgba(12,10,18,0.7); | |
| } | |
| .smallbnav { | |
| /* b stands for bottom */ | |
| } | |
| .smallbnav > ul { | |
| list-style: none; | |
| display: block-inline; | |
| position: relative; | |
| left: 9%; | |
| margin: 0px 0px 0px 0px; | |
| padding: 0px; | |
| } | |
| .footernav { | |
| display: inline; | |
| text-decoration: none; | |
| list-style: none; | |
| } | |
| .smallbnav > ul > li { | |
| display: inline; | |
| } | |
| .smallbnav a { | |
| text-decoration: none; | |
| font-family: 'Quattrocento Sans', helvetica, arial, sans-serif; | |
| color: rgb(251,251,251); | |
| font-size: 10pt; | |
| } | |
| .smallbnav a:hover { | |
| text-decoration: none; | |
| font-family: 'Quattrocento Sans', helvetica, arial, sans-serif; | |
| color: rgba(251,251,251,0.7); | |
| 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"> | |
| <img class="drlogosmall" src="http://f.cl.ly/items/370w1x3p320D0t400r14/[email protected]_-Dressing-Room-logo-.jpg-&-.png" /> | |
| </div> | |
| </header> | |
| <!--aside needs to have styling to separate it from the body. Also have it take up about 33% of page.--> | |
| <section class="recentcont"> <!-- recent choices, recent uploads --> | |
| <ul> | |
| <li> | |
| <aside class="homeprof"> <!-- profile, account settings, etc --> | |
| <div> | |
| <h2 class="welcomemess">Welcome Joe!</h2> | |
| <img class="profpic" src="http://f.cl.ly/items/272y1f3L302v3P0b2a0U/Photo-Feb-03,-8-00-14-PM-(2).jpg" /> | |
| </div> | |
| <ul class="underprofnav"> | |
| <li><a href="#">Account</a></li> | |
| <li><a href="#">Settings</a></li> | |
| </ul> | |
| <footer> | |
| <nav class="smallbnav"> | |
| <ul class="footernav"> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Terms</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </footer> | |
| </aside> | |
| </li> | |
| <ul> | |
| <li class="recentclothcon"> | |
| <header class="recentclothhead"> | |
| <h3 class="recentclothtitle">Recent Choices:</h3> | |
| </header> | |
| <div> | |
| <ul class="clothlist"> | |
| <li class="navleftarrow">←</li> | |
| <li class="clothingbox"></li> | |
| <li class="clothingbox"></li> | |
| <li class="clothingbox"></li> | |
| <li class="navrightarrow">→</li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="recentclothcon"> | |
| <header class="recentclothhead"> | |
| <h3 class="recentclothtitle">Recent Uploads:</h3> | |
| </header> | |
| <div> | |
| <ul class="clothlist"> | |
| <li class="navleftarrow">←</li> | |
| <li class="clothingbox"></li> | |
| <li class="clothingbox"></li> | |
| <li class="clothingbox"></li> | |
| <li class="navrightarrow">→</li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="recentclothcon"> | |
| <header class="recentclothhead" > | |
| <h3 class="recentclothtitle">Based on your taste:</h3> | |
| </header> | |
| <div> | |
| <ul class="clothlist"> | |
| <li class="navleftarrow">←</li> | |
| <li class="clothingbox"></li> | |
| <li class="clothingbox"></li> | |
| <li class="clothingbox"></li> | |
| <li class="navrightarrow">→</li> | |
| </ul> | |
| </div> | |
| </ul> | |
| </ul> | |
| </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":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"result"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment