API tools faq
paste
Advertisement
Guest User

Edit Profile design

a guest
Feb 13th, 2016
106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.67 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Sign Up</title>
  4.  
  5. <style type="text/css">
  6. .header {
  7. background: #4b5b40 ;
  8. width: 150%;
  9. height: 70px;
  10. top: 0em;
  11. left: -1em;
  12. position: fixed;
  13. }
  14.  
  15. h3 {
  16. font-family: Segoe UI;
  17. position: fixed;
  18. top:0em;
  19. left: 5em;
  20. color:#ccc;
  21. font-size: 22px;
  22. }
  23.  
  24. .links {
  25. float: right;
  26. right: 9.5em;
  27. position: fixed;
  28. font-size: 18px;
  29. margin-top: -15px;
  30. }
  31.  
  32. .about{
  33. border: 1px solid #424f39;
  34. padding-top: 10px;
  35. padding-bottom: 10px;
  36. padding-left: 10px;
  37. padding-right: 10px;
  38. margin-left: -80px;
  39. margin-top: -5px;
  40. width: 150px;
  41. height: 15px;
  42. text-align: center;
  43. font-size: 12px;
  44. font-family: Segoe UI;
  45. color: aliceblue;
  46. display:inline-block;
  47. text-decoration: none;
  48. border-radius: 5px;
  49. background-color: #617553; /*Temp*/
  50. box-shadow: 1px, 1px, 5px rgba (0, 0, 0, 1),
  51. 0px, 0px, 3px rgba (0, 0, 0, 1);
  52. }
  53.  
  54. .about:hover{
  55. color: #2b3424;
  56. background-color:darkgray;
  57.  
  58. }
  59.  
  60. li {
  61. list-style: none;
  62. float: left;
  63. margin-left: 4.5em;
  64. padding-top: 1em;
  65. }
  66. .content{
  67. }
  68.  
  69. .forms {
  70. width: 45em;
  71. height: 20em;
  72. margin: 0 auto;
  73. left:15em;
  74. top: 10em;
  75. position: fixed;
  76. border: 1px solid #ccc;
  77. border-radius: 5px;
  78. background-color: #fff;
  79. opacity: 0.95;
  80. -webkit-box-shadow: 1px 1px 7px 0px rgba(171,169,171,1);
  81. -moz-box-shadow: 1px 1px 7px 0px rgba(171,169,171,1);
  82. box-shadow: 1px 1px 7px 0px rgba(171,169,171,1);
  83. }
  84.  
  85. p {
  86. font-size: 90%;
  87. font-family: Segoe UI;
  88. color:4b5b40;
  89. }
  90.  
  91. hr{
  92. display: block;
  93. height: 1px;
  94. border: 1px;
  95. border-top: 1px solid #788b6b;
  96. opacity: 0.7;
  97. }
  98.  
  99. .lname{
  100. width: 250px;
  101. border-radius: 3px;
  102. -webkit-border-radius: 5px;
  103. -moz-border-radius: 5px;
  104. border: 1px solid #b2b1b1;
  105. padding: 6px;
  106. margin-top: -1px;
  107. margin-left: 20px;
  108. }
  109.  
  110. .fname{
  111. width: 250px;
  112. border-top: 3px;
  113. -webkit-border-radius: 5px;
  114. -moz-border-radius: 5px;
  115. border: 1px solid #b2b1b1;
  116. padding: 6px;
  117. margin-top: -1px;
  118. }
  119.  
  120. .mname {
  121. width: 250px;
  122. border-radius: 3px;
  123. -webkit-border-radius: 5px;
  124. -moz-border-radius: 5px;
  125. border: 1px solid #b2b1b1;
  126. padding: 6px;
  127. margin-top: 5px;
  128. margin-left: 20px;
  129. }
  130.  
  131. .Age{
  132. width: 250px;
  133. border-radius: 3px;
  134. -webkit-border-radius: 5px;
  135. -moz-border-radius: 5px;
  136. border: 1px solid #b2b1b1;
  137. padding: 6px;
  138. margin-top: 5px;
  139. }
  140.  
  141.  
  142. .Email{
  143. width: 250px;
  144. border-radius: 3px;
  145. -webkit-border-radius: 5px;
  146. -moz-border-radius: 5px;
  147. border: 1px solid #b2b1b1;
  148. padding: 6px;
  149. margin-top: 5px;
  150. }
  151.  
  152. .Usern{
  153. width: 250px;
  154. border-radius: 3px;
  155. -webkit-border-radius: 5px;
  156. -moz-border-radius: 5px;
  157. border: 1px solid #b2b1b1;
  158. padding: 6px;
  159. margin-top: 5px;
  160. margin-left: 20px;
  161. }
  162.  
  163. .Pass{
  164. width: 250px;
  165. border-radius: 3px;
  166. -webkit-border-radius: 5px;
  167. -moz-border-radius: 5px;
  168. border: 1px solid #b2b1b1;
  169. padding: 6px;
  170. margin-top: 5px;
  171. margin-left: 1px;
  172. }
  173.  
  174. .dropdown{
  175. padding: 5px;
  176. position: fixed;
  177. left: 400px;
  178. }
  179.  
  180. .Month{
  181. width: 250px;
  182. border-radius: 3px;
  183. -webkit-border-radius: 5px;
  184. -moz-border-radius: 5px;
  185. border: 1px solid #b2b1b1;
  186. padding: 6px;
  187. margin-top: 5px;
  188. margin-left: 20px;
  189. opacity: 0.7;
  190. }
  191.  
  192. .Day{
  193. width: 100px;
  194. border-radius: 3px;
  195. -webkit-border-radius: 5px;
  196. -moz-border-radius: 5px;
  197. border: 1px solid #b2b1b1;
  198. padding: 6px;
  199. margin-top: 5px;
  200. opacity: 0.7;
  201. }
  202.  
  203. .Year{
  204. width: 145px;
  205. border-radius: 3px;
  206. -webkit-border-radius: 5px;
  207. -moz-border-radius: 5px;
  208. border: 1px solid #b2b1b1;
  209. padding: 6px;
  210. margin-top: 5px;
  211. opacity: 0.7;
  212. }
  213.  
  214. .bday{
  215. color: #4b5b40;
  216. font-size: 14px;
  217. font-family: Segoe UI;
  218. margin-left: 20px;
  219. margin-top: 10px;
  220. margin-bottom: -10px;
  221. }
  222.  
  223. i {
  224. font-family: Segoe UI;
  225. font-size: 14px;
  226. color: #4b5b40; ;
  227. }
  228. .radio{
  229. margin-top: 10px;
  230. margin-left: 400px;
  231. font-family: Segoe UI;
  232. }
  233.  
  234. .submit{
  235. margin-top: 10px;
  236. margin-left: 20px;
  237. border-radius: 5px;
  238. -webkit-border-radius: 5px;
  239. -moz-border-radius: 5px;
  240. background-color:#90a581;
  241. border: 1px solid #ccc;
  242. width: 500px;
  243. height: 30px;
  244. }
  245.  
  246. .submit:hover{
  247. transition-property: all;
  248. transition-duration: 0.5s;
  249. background-color:darkgray;
  250. }
  251.  
  252.  
  253. .footer {
  254. background: #4b5b40 ;
  255. width: 150%;
  256. height: 49.7px;
  257. bottom: -1em;
  258. left: -1em;
  259. position: fixed;
  260. }
  261.  
  262. .credits {
  263.  
  264. }
  265.  
  266. h1 {
  267. font-family: Segoe UI;
  268. position: fixed;
  269. top:62.3em;
  270. left: 120em;
  271. color:#ccc;
  272. font-size: 10px;
  273. opacity: 0.4;
  274. }
  275.  
  276. .icons {
  277. position: fixed;
  278. top: 44.5em;
  279. left: 5em;
  280. }
  281.  
  282. </style>
  283.  
  284. </head>
  285. <body>
  286. <div id ="wrapper">
  287. <div class ="header">
  288. <div class = "logo"></div>
  289. <div class = "title"><h3>Online Entrance Exam</h3></div>
  290. <div class = "links">
  291. <ul>
  292. <li><td><div><a href="#" class="about">About Us</a></div></td></li>
  293. <li><td><div><a href="#" class="about">Stuffs</a></div></td></li>
  294. <li><td><div><a href="#" class="about">Contact Us</a></div></td></li>
  295. </ul>
  296. </div>
  297.  
  298. </div>
  299.  
  300. <div class= "content">
  301. <div class ="forms">
  302.  
  303. <table><center><p>WANT TO TEST YOUR SKILLS? SIGN UP NOW</p></center>
  304. <hr>
  305. <div class="table">
  306. <tr>
  307. <td><input type="text" class="lname" id ="lname" placeholder="Last Name" />&nbsp;
  308. <input type="text" class="fname" id = "fname" placeholder="First Name" />
  309. </tr></td>
  310. <tr>
  311. <td><input type="text" class="mname" placeholder="Middle Name" />&nbsp;
  312. <input type="text" class="Email" placeholder="Email"/></td>
  313. </tr>
  314. <tr><td><input type="text" class="Usern" placeholder="Username" />&nbsp;
  315. <input type="text" class="Pass" placeholder="Password" /></td>
  316. </tr>
  317.  
  318. <tr><td><div class="bday">Birthdate</div></td></tr>
  319. <tr>
  320. <!--Month -->
  321. <td>
  322. <select class="Month">
  323. <option>
  324. January
  325. </option>
  326.  
  327. </select>
  328.  
  329.  
  330. <select class="Day">
  331. <option>Day</option>
  332. </select>
  333.  
  334. <select class="Year">
  335. <option>Year</option>
  336. </select>
  337. </td>
  338. </tr>
  339.  
  340. <td><i radio><input type="radio" class="radio" name="sex" value="male">Male
  341. <input type="radio" name="sex" value="female">Female
  342. </td><i>
  343.  
  344. <tr>
  345. <td><input type="submit" class="submit" value="SIGN UP"></td>
  346. </tr>
  347. </table>
  348. </div>
  349. </div>
  350.  
  351. <div class = "footer">
  352. <div class = "credits">
  353. <h1>&#169; Powered by MARU</h1>
  354. </div>
  355.  
  356. <div class = "icons">
  357. <table>
  358. <td><a href="myfile.htm"><img src="img/facebook.png" alt="Link to this page" width="22" height="22"></a></td>
  359. <td><a href="myfile.htm"><img src="img/twitter.png" alt="Link to this page" width="22" height="22"></a></td>
  360. <td><a href="myfile.htm"><img src="img/blogger.png" alt="Link to this page" width="22" height="22"></a></td>
  361. </table>
  362. </div>
  363. </div>
  364. </body>
  365. </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!