API tools faq
paste
Advertisement
austinh115

[HTML/CSS] RSPS Website Design

austinh115
Jan 23rd, 2016
209
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.30 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.     <link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" type="text/css" />
  4.     <style>
  5.     .noise {
  6.         background-image: url(http://i.imgur.com/fxHfCZ9.png);
  7.         background-repeat: repeat;
  8.         background-position: 0% 0%;
  9.         -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  10.         -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  11.         box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  12.     }
  13.    
  14.     html {
  15.         background-image: url(http://i.imgur.com/ynfn2w6.jpg);
  16.         background-position: top center;
  17.         background-repeat: no-repeat;
  18.         background-color: #05090c;
  19.         color: white;
  20.     }
  21.    
  22.     .container {
  23.         margin: 0 auto;
  24.         background-color: #05090c;
  25.         width: 877px;
  26.         height: 910px;
  27.         background-color: rgba(255, 0, 0, 0.1);
  28.     }
  29.    
  30.     header {
  31.         width: 100%;
  32.         height: 258px;
  33.         #background-color: rgba(111, 111, 111, 0.5);
  34.         margin-bottom: 3px;
  35.     }
  36.    
  37.     header nav {
  38.         position: relative;
  39.         margin: 0 auto;
  40.         top: calc(100% - 40px);
  41.         height: 40px;
  42.         width: 630px;
  43.         #background-color: rgba(29, 33, 44, 0.5);
  44.         font-family: Arial;
  45.     }
  46.    
  47.     header nav a {
  48.         background-image: -webkit-linear-gradient(top, #263343 0%,#263343 50%,#1d212c 51%,#1d212c 100%);
  49.         background-image: -moz-linear-gradient(top, #263343 0%,#263343 50%,#1d212c 51%,#1d212c 100%);
  50.         background-image: -ms-linear-gradient(top, #263343 0%,#263343 50%,#1d212c 51%,#1d212c 100%);
  51.         background-image: -o-linear-gradient(top, #263343 0%,#263343 50%,#1d212c 51%,#1d212c 100%);
  52.         background-image: linear-gradient(to bottom, #263343 0%,#263343 50%,#1d212c 51%,#1d212c 100%);
  53.         border: 1px solid #171b24;
  54.         border-style: none solid;
  55.         text-decoration: none;
  56.         color: inherit;
  57.         font-size: smaller;
  58.         width: 100px;
  59.         line-height: 40px;
  60.         display: block;
  61.         float: left;
  62.         text-align: center;
  63.         vertical-align: middle;
  64.     }
  65.    
  66.     header nav a:nth-child(3) {
  67.         width: 220px;
  68.         font-size: large;
  69.     }
  70.    
  71.     header nav a:hover {
  72.         background-image: -webkit-linear-gradient(top, #334458 0%,#334458 50%,#273343 51%,#273343 100%);
  73.         background-image: -moz-linear-gradient(top, #334458 0%,#334458 50%,#273343 51%,#273343 100%);
  74.         background-image: -ms-linear-gradient(top, #334458 0%,#334458 50%,#273343 51%,#273343 100%);
  75.         background-image: -o-linear-gradient(top, #334458 0%,#334458 50%,#273343 51%,#273343 100%);
  76.         background-image: linear-gradient(to bottom, #334458 0%,#334458 50%,#273343 51%,#273343 100%);
  77.     }
  78.    
  79.     .content {
  80.         margin: 0 auto;
  81.         height: 525px;
  82.         width: 630px;
  83.         margin-bottom: 25px;
  84.         #background-color: red;
  85.     }
  86.    
  87.     .content #left {
  88.         box-sizing: border-box;
  89.         float: left;
  90.         width: 430px;
  91.         height: 100%;
  92.         margin-right: 4px;
  93.     }
  94.    
  95.     .content #right {
  96.         box-sizing: border-box;
  97.         float: left;
  98.         width: 195px;
  99.         height: 100%;
  100.     }
  101.    
  102.     .video {
  103.         width: 430px;
  104.         height: 190px;
  105.         position: relative;
  106.         background-color: #1D212C;
  107.     }
  108.    
  109.     .video embed {
  110.         margin-top: 4px;
  111.         margin-left: 4px;
  112.         width: 422px;
  113.         height: 182px;
  114.     }
  115.    
  116.     .btn {
  117.         border: none;
  118.         background-image: -webkit-linear-gradient(top, #263343, #1d212c);
  119.         background-image: -moz-linear-gradient(top, #263343, #1d212c);
  120.         background-image: -ms-linear-gradient(top, #263343, #1d212c);
  121.         background-image: -o-linear-gradient(top, #263343, #1d212c);
  122.         background-image: linear-gradient(to bottom, #263343, #1d212c);
  123.         -webkit-border-radius: 4;
  124.         -moz-border-radius: 4;
  125.         border-radius: 4px;
  126.         -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  127.         -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  128.         box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  129.         font-family: Arial;
  130.         color: #ffffff;
  131.         font-size: 0.5em;
  132.         padding: 5px 10px;
  133.         text-decoration: none;
  134.     }
  135.  
  136.     .btn:hover {
  137.         background-image: -webkit-linear-gradient(top, #334458, #273343);
  138.         background-image: -moz-linear-gradient(top, #334458, #273343);
  139.         background-image: -ms-linear-gradient(top, #334458, #273343);
  140.         background-image: -o-linear-gradient(top, #334458, #273343);
  141.         background-image: linear-gradient(to bottom, #334458, #273343);
  142.         cursor: pointer;
  143.         text-decoration: none;
  144.     }
  145.    
  146.     .updates {
  147.         margin-top: 5px;
  148.     }
  149.    
  150.     .update {
  151.         height: 108px;
  152.         width: 100%;
  153.         margin-bottom: 4px;
  154.         background-color: #1D212C;
  155.     }
  156.    
  157.     .postTitle {
  158.         height: 20px;
  159.         line-height: 20px;
  160.         font-size: small;
  161.         padding: 5px;
  162.         background-image: -webkit-linear-gradient(top, #233549 0%,#233549 50%,#1b1f2a 51%,#1b1f2a 100%);
  163.         background-image: -moz-linear-gradient(top, #233549 0%,#233549 50%,#1b1f2a 51%,#1b1f2a 100%);
  164.         background-image: -ms-linear-gradient(top, #233549 0%,#233549 50%,#1b1f2a 51%,#1b1f2a 100%);
  165.         background-image: -o-linear-gradient(top, #233549 0%,#233549 50%,#1b1f2a 51%,#1b1f2a 100%);
  166.         background-image: linear-gradient(to bottom, #233549 0%,#233549 50%,#1b1f2a 51%,#1b1f2a 100%);
  167.         -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  168.         -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  169.         box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  170.     }
  171.    
  172.     .postTitle span:nth-child(2) {
  173.         float: right;
  174.     }
  175.    
  176.     .postText {
  177.         padding: 5px;
  178.         font-size: x-small;
  179.         box-shadow: none;
  180.     }
  181.    
  182.     .update .btn {
  183.         margin-left: 5px;
  184.         font-size: xx-small;
  185.     }
  186.    
  187.     footer {
  188.         position: relative;
  189.         width: 100%;
  190.         height: 80px;
  191.         box-sizing: border-box;
  192.         border-width: 5px;
  193.         border-color: #222631;
  194.         border-style: solid none;
  195.         background-color: #1D212C;
  196.         text-align: center;
  197.         font-size: smaller;
  198.     }
  199.    
  200.     footer a {
  201.         text-decoration: none;
  202.         color: inherit;
  203.     }
  204.     </style>
  205. </head>
  206. <body>
  207.     <div class="container">
  208.         <header>
  209.             <nav class="noise">
  210.                 <a href="#">Forums</a>
  211.                 <a href="#">Vote</a>
  212.                 <a href="#">Play Now</a>
  213.                 <a href="#">Donate</a>
  214.                 <a href="#">High Scores</a>
  215.             </nav>
  216.         </header>
  217.        
  218.         <div class="content">
  219.             <div id="left">
  220.                 <div class="video noise">
  221.                     <embed src="http://www.youtube.com/v/IHMm2bF_VM0?controls=0&showinfo=0" type="application/x-shockwave-flash">
  222.                 </div>
  223.                 <div class="updates">
  224.                     <div class="update noise">
  225.                         <div class="postTitle noise">
  226.                             <span>Server Update v2.135</span>
  227.                             <span>By Austin - 1/13/2016</span>
  228.                         </div>
  229.                         <div class="postText noise">
  230.                             <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ut augue vel magna lobortis congue et sed dui. Sed rutrum tellus in risus venenatis. </span>
  231.                         </div>
  232.                         <button class="btn">Read More</button>
  233.                     </div>
  234.                    
  235.                     <div class="update noise">
  236.                         <div class="postTitle noise">
  237.                             <span>Server Update v2.135</span>
  238.                             <span>By Austin - 1/13/2016</span>
  239.                         </div>
  240.                         <div class="postText noise">
  241.                             <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ut augue vel magna lobortis congue et sed dui. Sed rutrum tellus in risus venenatis. </span>
  242.                         </div>
  243.                         <button class="btn">Read More</button>
  244.                     </div>
  245.                    
  246.                     <div class="update noise">
  247.                         <div class="postTitle noise">
  248.                             <span>Server Update v2.135</span>
  249.                             <span>By Austin - 1/13/2016</span>
  250.                         </div>
  251.                         <div class="postText noise">
  252.                             <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut odio nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ut augue vel magna lobortis congue et sed dui. Sed rutrum tellus in risus venenatis. </span>
  253.                         </div>
  254.                         <button class="btn">Read More</button>
  255.                     </div>
  256.                 </div>
  257.             </div>
  258.             <div id="right">
  259.            
  260.             </div>
  261.         </div>
  262.        
  263.         <footer class="noise">
  264.             &copy;Atrocity. All rights reserved. Trademarks are property of their respective owners.<br />
  265.             &copy;Atrocity is not affiliated with Jagex or RuneScape in any way.<br />
  266.             Designed by Austin.<br />
  267.             <br />
  268.             <a href="#">Home</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Terms of Service</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Privacy Policy</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Contact us</a>
  269.         </footer>
  270.     </div>
  271. </body>
  272. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!