jesobreira

edit

Apr 28th, 2013
110
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.39 KB | None | 0 0
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>Extragram</title>
  7. <style type="text/css">
  8. @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext);
  9.  
  10. .font {
  11.     font-family: Lobster, Helvetica, Arial, sans-serif;
  12. }
  13.  
  14. #header {
  15.     position: absolute;
  16.     margin: 0;
  17.     width: 100%;
  18.     top: 0;
  19.     padding: 0;
  20.     left: 0;
  21.     height: 45px;
  22.     background: #7d7e7d; /* Old browsers */
  23.     background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
  24.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
  25.     background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
  26.     background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
  27.     background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
  28.     background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
  29.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  30.  
  31. }
  32.  
  33. #header table {
  34.     margin: 0;
  35.     padding: 0;
  36.     top: 0;
  37.     position: absolute;
  38. }
  39.  
  40. #header h1 {
  41.     font-family: Lobster, Helvetica, Arial, sans-serif;
  42.     color: white;
  43.     text-shadow: 0px 0px 1px black;
  44. /*  text-align: center;*/
  45.     margin: 0;
  46.     width: 128px;
  47. }
  48.  
  49. .headerbtn {
  50.     position: relative;
  51.     float: right;
  52.     margin: 0;
  53. }
  54.  
  55. body {
  56.     overflow-x: hidden;
  57.     width: 100%;
  58.     height: 100%;
  59.     background: #0e0e0e; /* Old browsers */
  60.     background: -moz-linear-gradient(left,  #0e0e0e 1%, #3f3f3f 47%, #0e0e0e 99%); /* FF3.6+ */
  61.     background: -webkit-gradient(linear, left top, right top, color-stop(1%,#0e0e0e), color-stop(47%,#3f3f3f), color-stop(99%,#0e0e0e)); /* Chrome,Safari4+ */
  62.     background: -webkit-linear-gradient(left,  #0e0e0e 1%,#3f3f3f 47%,#0e0e0e 99%); /* Chrome10+,Safari5.1+ */
  63.     background: -o-linear-gradient(left,  #0e0e0e 1%,#3f3f3f 47%,#0e0e0e 99%); /* Opera 11.10+ */
  64.     background: -ms-linear-gradient(left,  #0e0e0e 1%,#3f3f3f 47%,#0e0e0e 99%); /* IE10+ */
  65.     background: linear-gradient(to right,  #0e0e0e 1%,#3f3f3f 47%,#0e0e0e 99%); /* W3C */
  66.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 */
  67.  
  68.  
  69. }
  70.  
  71. .button {
  72.     display: inline-block;
  73.     zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
  74.     *display: inline;
  75.     vertical-align: baseline;
  76.     margin: 0 2px;
  77.     outline: none;
  78.     cursor: pointer;
  79.     text-align: center;
  80.     text-decoration: none;
  81.     font: 14px/100% Arial, Helvetica, sans-serif;
  82.     padding: .5em 2em .55em;
  83.     text-shadow: 0 1px 1px rgba(0,0,0,.3);
  84.     -webkit-border-radius: .5em;
  85.     -moz-border-radius: .5em;
  86.     border-radius: .5em;
  87.     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  88.     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  89.     box-shadow: 0 1px 2px rgba(0,0,0,.2);
  90.     color: #d9eef7;
  91.     border: solid 1px #0076a3;
  92.     background: #0095cd;
  93.     background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
  94.     background: -moz-linear-gradient(top,  #00adee,  #0078a5);
  95.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
  96. }
  97.  
  98. .button:hover {
  99.     text-decoration: none;
  100.     background: #007ead;
  101.     background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
  102.     background: -moz-linear-gradient(top,  #0095cc,  #00678e);
  103.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
  104. }
  105.  
  106. .button:active {
  107.     position: relative;
  108.     top: 1px;
  109.     color: #80bed6;
  110.     background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
  111.     background: -moz-linear-gradient(top,  #0078a5,  #00adee);
  112.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
  113. }
  114. </style>
  115. </head>
  116. <body>
  117. <div id="all">
  118.     <div id="header">
  119.         <!-- tableless didn't work. fuck you with your webstandards -->
  120.         <table>
  121.         <tr>
  122.         <td width="80%">
  123.         <h1>Extragram</h1>
  124.         </td>
  125.         <td>
  126.         <a href="#" class="headerbtn button" id="fblink">
  127.             Facebook
  128.         </a>
  129.         </td>
  130.         <td>
  131.         <a href="#" class="headerbtn button" id="dllink">
  132.             Download
  133.         </a>
  134.         </td>
  135.         </tr>
  136.         </table>
  137.     </div>
  138.     <div id="display">
  139.         <img src="#" id="displayimg" />
  140.     </div>
  141.     <div id="gallery">
  142.         <table>
  143.             <tr>
  144.                            
  145.             </tr>
  146.             <tr>
  147.  
  148.             </tr>
  149.         </table>
  150.     </div>
  151. </div>
  152. </body>
  153. </html>
Add Comment
Please, Sign In to add comment