Advertisement
Spectrewiz

Social Network

Jan 17th, 2013
188
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.50 KB | None | 0 0
  1. /* CSS Document */
  2.  
  3. html{
  4.     font-family:Arial, Helvetica, sans-serif;
  5.     background-attachment:fixed;
  6. }
  7. #wrapper{
  8.     margin:0 auto;
  9.     width:1030px;
  10.     background-color:#4F4F4F;
  11.     padding:10px;
  12.     border-radius:10px;
  13. }#main{
  14.     width:753px;
  15.     float:right;
  16.     margin-top:9px;
  17.     background-color:#CCC;
  18.     border-radius:10px;
  19.     padding:10px;
  20.     margin-right:6px;
  21.     margin-bottom:10px;
  22.     -moz-box-shadow: inset 0 0 5px 5px #888;
  23.     -webkit-box-shadow: inset 0 0 5px 5px #888;
  24.     box-shadow: inset 0 0 5px 5px #888;
  25. }.headerRight{
  26.     margin-left:5px;
  27.     width:277px;
  28.     border-radius:10px;
  29.     background-color:#4F4F4F;
  30.     height:145px;
  31.     padding:10px;
  32. }.headerLeft{
  33.     text-align:right;
  34.     width:695px;
  35.     border-radius:10px;
  36.     background-color:#CCC;
  37.     height:145px;
  38.     padding:10px;
  39.     -moz-box-shadow: inset 0 0 5px 5px #888;
  40.     -webkit-box-shadow: inset 0 0 5px 5px #888;
  41.     box-shadow: inset 0 0 5px 5px #888;
  42. }#footer{
  43.     width:1000px;
  44.     margin-top:8px;
  45.     margin-left:3px;
  46.     background-color:#CCC;
  47.     border-radius:10px;
  48.     padding:10px;
  49.     clear:both;
  50.     -moz-box-shadow: inset 0 0 5px 5px #888;
  51.     -webkit-box-shadow: inset 0 0 5px 5px #888;
  52.     box-shadow: inset 0 0 5px 5px #888;
  53. }#footer a{
  54.     text-decoration:none;
  55. }.createActBut{
  56.     border-radius:10px;
  57.     background-color:#884DF0;
  58.     padding:4px;
  59.     border:double 6px #884DF0;
  60.     text-decoration:none;
  61.     text-align:center;
  62.     text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  63.     margin-top:6px;
  64.     color:#000;
  65.     font-size:24px;
  66. }.login{
  67.     text-decoration:none;
  68.     text-align:center;
  69.     text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  70.     border-radius:10px;
  71.     background-color:#C01413;
  72.     padding:4px;
  73.     border:double 6px #C01413;
  74.     color:#000;
  75.     font-size:24px;
  76. }.sidebar{
  77.     width:220px;
  78.     margin-top:8px;
  79.     margin-left:3px;
  80.     background-color:#CCC;
  81.     border-radius:10px;
  82.     padding:10px;
  83.     clear:left;
  84.     -moz-box-shadow: inset 0 0 5px 5px #888;
  85.     -webkit-box-shadow: inset 0 0 5px 5px #888;
  86.     box-shadow: inset 0 0 5px 5px #888;
  87. }.sidebar p{
  88.     text-align: center;
  89. }.createActBut:hover{
  90.     border-radius:10px;
  91.     background-color:#884DF0;
  92.     padding:4px;
  93.     border:double 6px white;
  94.     text-decoration:none;
  95.     text-align:center;
  96.     margin-top:6px;
  97.     color:#000;
  98.     font-size:24px;
  99. }.login:hover{
  100.     border-radius:10px;
  101.     background-color:#C01413;
  102.     padding:4px;
  103.     border:double 6px white;
  104.     text-decoration:none;
  105.     text-align:center;
  106.     color:#000;
  107.     font-size:24px;
  108. }.formEle form input{
  109.     font-size:18px;
  110.     font-weight:bold;
  111. }.inputGood{
  112.     border:1px solid #000;
  113. }.formerror{
  114.     border:2px solid #F00;
  115.     background-color:#F00;
  116.     -moz-border-radius:5px;
  117.     -webkit-border-radius:5px;
  118.     border-radius:5px;
  119.     padding:3px;
  120.     width:350px;
  121.     margin-bottom:10px;
  122. }.formconfirm{
  123.     border:2px solid #090;
  124.     background-color:#090;
  125.     -moz-border-radius:5px;
  126.     -webkit-border-radius:5px;
  127.     border-radius:5px;
  128.     padding:3px;
  129.     width:350px;
  130.     margin-bottom:10px;
  131. }#search{
  132.     padding-top:6px;
  133. }#search input[type="text"]{
  134.     background: url(../Images/search-white.png) no-repeat 10px 6px #444;
  135.     border: 0 none;
  136.     font: bold 12px Arial,Helvetica,Sans-serif;
  137.     color: #d7d7d7;
  138.     width:160px;
  139.     padding: 6px 15px 6px 35px;
  140.     -webkit-border-radius: 20px;
  141.     -moz-border-radius: 20px;
  142.     border-radius: 20px;
  143.     text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  144.     -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  145.     -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  146.     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  147.     -webkit-transition: all 0.7s ease 0s;
  148.     -moz-transition: all 0.7s ease 0s;
  149.     -o-transition: all 0.7s ease 0s;
  150.     transition: all 0.7s ease 0s;
  151. }#search input[type="text"]:focus{
  152.     background: url(../Images/search-dark.png) no-repeat 10px 6px #fcfcfc;
  153.     border: 0 none;
  154.     color: #6a6f75;
  155.     width: 229px;
  156.     -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
  157.     -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
  158.     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
  159.     text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  160. }.menu{
  161.    
  162. }.menu a{
  163.     text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  164.     color: #d7d7d7;
  165.     font: bold 16px Arial,Helvetica,Sans-serif;
  166.     text-decoration: none;
  167.     border-radius: 10px;
  168.     background-color: #444;
  169.     padding: 5px 10px;
  170.     text-align: center;
  171.     -webkit-transition: all 0.3s ease 0s;
  172.     -moz-transition: all 0.3s ease 0s;
  173.     -o-transition: all 0.3s ease 0s;
  174.     transition: all 0.3s ease 0s;
  175. }.menu a:hover{
  176.     border: double 6px #00F;
  177.     color: #00F;
  178.     background-color: #FFF;
  179.     font: bold 20px Arial,Helvetica,Sans-serif;
  180.     text-decoration: underline;
  181.     text-align: center;
  182. }
  183.  
  184. ----------------------------------------------------------------
  185.  
  186. <html xmlns="http://www.w3.org/1999/xhtml"><head>
  187. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  188. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><style type="text/css"></style>
  189. <title>Welcome!</title>
  190.  
  191. <link rel="stylesheet" type="text/css" href="CSS/main.css">
  192. </head>
  193.  
  194. <body>
  195. <style type="text/css">
  196. html{
  197.     background: -webkit-gradient(linear, 0 0, 0 60%, from(black), to(#432AE8));
  198.     background: -moz-linear-gradient(top, black, #432AE8 60%);
  199.     font-family:"Arial", Gadget, sans-serif;
  200.     background-attachment:fixed;
  201. }
  202. </style>
  203. <div id="wrapper">
  204. <table border="0" width="1000px">
  205. <tbody><tr>
  206. <td>
  207. <div class="headerLeft"><a href="index.php" title="Home"><img style="margin-right:147.5px; margin-top:7px;" src="images/Social Service.png" width="400" height="125"></a></div></td>
  208. <td>
  209. <div class="headerRight">
  210. <a href="?c=login" style="text-decoration:none;"><div class="login">Log In</div></a>
  211. <a href="?c=signup" style="text-decoration:none;"><div class="createActBut">Create an Account</div></a>
  212. <form method="get" action="search.php" id="search">
  213.     <input name="q" type="text" size="40" placeholder="Search...">
  214. </form>
  215. </div></td>
  216. </tr>
  217. </tbody></table>
  218.  
  219. <div id="main">
  220. <b style="color:#666;">Recent Activity</b>
  221. <p>Create an account today and begin your social networking experience with Social Service!</p></div>
  222. <div class="sidebar">
  223.     <b style="color:#666;">Menu</b>
  224.     <div class="menu">
  225.         <p><a href="#">Profile</a></p>
  226.         <p><a href="#">Friends</a></p>
  227.         <p><a href="#">Community Service</a></p>
  228.         <p><a href="#">Messages</a></p>
  229.     </div>
  230. </div><div id="footer">
  231. Nelson Downs © 2012 | <a href="index.php">Home</a> | <a href="?c=signup">Create an Account</a>
  232. </div></div>
  233.  
  234. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement