Advertisement
PhantasmagoriaDesign

VF Green Premade Profile Layout

Jul 25th, 2018
90
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.51 KB | None | 0 0
  1. <style>
  2. .main_content_title, #user_default_image, #main-navbar, .top_commentbox img, .footer_links, .navbar-nav, #user_profile_info, .btn-primary, .top_commentbox textarea, .panel-heading, .friends-list, .top_commentbox, .newsfeed, #right_profile, #user_rating, .panel-footer { display: none; }
  3.  
  4. .panel, .panel-primary, .user_profile_box, .dark_highlight, #maincontent, .user_profile_box, {
  5. background: transparent;
  6. border: none;
  7. }
  8.  
  9. body, html {
  10. background-image: url('https://i.imgur.com/O5fhPr6.png');
  11. background-repeat: repeat;
  12. background-position: 0px 0px!important;
  13. background-attachment: fixed!important;
  14. background-size: auto!important;
  15. background-color: #151D1B!important;
  16. }
  17.  
  18. body, div, table {
  19. font: 10px Arial, serif;
  20. line-height: 11px;
  21. text-transform: uppercase;
  22. color: #e9e7eb;
  23. font-weight: normal;
  24. }
  25.  
  26. b, bold {
  27. font: 10px Arial, serif;
  28. line-height: 11px;
  29. color: #75a3a0!important;
  30. }
  31.  
  32. i, italic {
  33. font: 10px Arial, serif;
  34. line-height: 11px;
  35. color: #e9e7eb;
  36. font-style: italic;
  37. }
  38.  
  39. u, underline {
  40. font: 10px Arial, serif;
  41. line-height: 11px;
  42. color: #75a3a0;}
  43.  
  44. a:link, a:visited, a:active {
  45. font: 10px Arial, serif;
  46. line-height: 11px;
  47. text-transform: uppercase;
  48. color: #E2E2E8;
  49. font-weight: normal;
  50. padding: 4px;}
  51.  
  52. a:hover {
  53. font: 10px Arial, serif;
  54. line-height: 11px;
  55. text-transform: uppercase;
  56. color: #e9e7eb;
  57. font-weight: normal;
  58. opacity: 90;
  59. filter: brightness(90%);
  60. transition: all 1s ease-in-out;
  61. -webkit-transition: all 1s ease-in-out;
  62. -moz-transition: all 1s ease-in-out; }
  63.  
  64. .h1 {
  65. color: #ccc7d0;
  66. border-bottom: 3px solid #E5E7EE;
  67. display: block;
  68. background: #2D4541!important;
  69. margin: 2px;
  70. border-radius: 5px;
  71. padding: 5px;
  72. font: 14px Arial, serif;
  73. text-transform: uppercase;
  74. letter-spacing: 1px;
  75. text-align: center;
  76. }
  77.  
  78. .h2 {
  79. width: 150px;
  80. height: 20px;
  81. background: #2D4541!important;
  82. display: inline-block;
  83. margin: 2px;
  84. border-radius: 5px;
  85. padding: 5px;
  86. font: 10px Arial, serif;
  87. text-transform: uppercase;
  88. letter-spacing: 1px;
  89. text-align: center;
  90. }
  91.  
  92. .h3 {
  93. width: 150px;
  94. height: 20px;
  95. background: #598582!important;
  96. display: inline-block;
  97. margin: 2px;
  98. border-radius: 5px;
  99. padding: 5px;
  100. font: 10px Arial, serif;
  101. text-transform: uppercase;
  102. letter-spacing: 1px;
  103. text-align: center;
  104. }
  105.  
  106. #divbox{
  107. width: 800px!important;
  108. height: 600px!important;
  109. background-image: url('');
  110. background-repeat: no-repeat;
  111. background-position: left;
  112. background-size: auto!important:
  113. background-size: implemented;
  114. background-color :#142D24!important;
  115. position: absolute;
  116. top: 0px;
  117. border-radius: 5px;
  118. border-top: 6px solid #E5E7EE;
  119. z-index: 2;
  120. right: 10px;
  121. opacity: .80;
  122. }
  123.  
  124.  
  125. #friends{
  126. width: 795px;
  127. height: 110px!important;
  128. top: 45px;
  129. left: 0px;
  130. position: absolute;
  131. padding: 2px;
  132. background: transparent!important;
  133. }
  134.  
  135. .friends{
  136. width: 70px;
  137. height: 70px;
  138. border: 3px solid #75a3a0!important;
  139. background: #000;
  140. margin-left: 2px;
  141. margin-right: 2px;
  142. opacity: 20;
  143. filter: brightness(30%);
  144. }
  145.  
  146. .friends:hover{
  147. border: 3px solid #75a3a0!important;
  148. opacity: 90;
  149. transition: all 1s ease-in-out;
  150. filter: brightness(90%);
  151. -webkit-transition: all 2s ease-out;
  152. -moz-transition: all 2s ease-out;
  153. }
  154.  
  155. #aboutme{
  156. width: 790px;
  157. height: 54px;
  158. top: 165px;
  159. left: 5px;
  160. position: absolute;
  161. padding: 2px;
  162. background: transparent!important;
  163. display: inline-block!important;
  164. }
  165.  
  166. #picinfo{
  167. width: 370px;
  168. height: 195px;
  169. top: 220px;
  170. left: 5px;
  171. position: absolute;
  172. padding: 2px;
  173. background: #151D1B!important;
  174. border-radius: 5px;
  175. opacity: 0.80;
  176. }
  177.  
  178. .profilepic{
  179. width: 100px!important;
  180. height: 100px!important;
  181. background: #75a3a0!important;
  182. border: 3px solid #75a3a0!important;
  183. border-radius: 3px;
  184. margin: 2px;
  185. opacity: 20;
  186. filter: brightness(30%);
  187. }
  188.  
  189. .profilepic:hover{
  190. border: 3px solid #75a3a0!important;
  191. border-radius: 3px;
  192. margin: 2px;
  193. opacity: 90;
  194. transition: all 1s ease-in-out;
  195. filter: brightness(90%);
  196. -webkit-transition: all 2s ease-out;
  197. -moz-transition: all 2s ease-out;
  198. }
  199.  
  200.  
  201. #likes{
  202. width: 200px;
  203. height: 195px;
  204. top: 220px;
  205. left: 380px;
  206. position: absolute;
  207. padding: 2px;
  208. display: inline-block;
  209. background: #151D1B!important;
  210. border-radius: 5px;
  211. opacity: 0.80;
  212. }
  213.  
  214. #dislikes{
  215. width: 200px;
  216. height: 195px;
  217. top: 220px;
  218. left: 585px;
  219. position: absolute;
  220. padding: 2px;
  221. display: inline-block;
  222. background: #151D1B!important;
  223. border-radius: 5px;
  224. opacity: 0.80;
  225. }
  226.  
  227. #cults{
  228. width: 795px;
  229. height: 100px;
  230. top: 415px;
  231. left: 0px;
  232. position: absolute;
  233. padding: 2px;
  234. background: transparent!important;
  235. border-radius: 3px;
  236. }
  237.  
  238. .cults{
  239. width: 100px;
  240. height: 100px;
  241. background: #75a3a0;
  242. border: 3px solid #75a3a0!important;
  243. margin-left: 2px;
  244. margin-top: 4px;
  245. margin-bottom: 4px;
  246. padding: 2px;
  247. opacity: 20;
  248. filter: brightness(30%);
  249. }
  250.  
  251. .cults:hover{
  252. border: 3px solid #75a3a0!important;
  253. border-radius: 3px;
  254. margin-left: 2px;
  255. margin-top: 4px;
  256. margin-bottom: 4px;
  257. padding: 2px;
  258. opacity: 90;
  259. transition: all 1s ease-in-out;
  260. filter: brightness(90%);
  261. -webkit-transition: all 2s ease-out;
  262. -moz-transition: all 2s ease-out;
  263. }
  264.  
  265.  
  266. #navigation{
  267. width: 790px;
  268. height: 40px;
  269. top: 5px;
  270. right: 5px;
  271. position: absolute;
  272. background: transparent!important;
  273. z-index: 3;
  274. border-radius: 5px;
  275. }
  276.  
  277. #navilink{
  278. width: 120px;
  279. height: 30px;
  280. background: #2D4541!important;
  281. display: inline-block;
  282. margin: 3px;
  283. border-radius: 5px;
  284. padding: 8px;
  285. font: 10px Arial, serif;
  286. text-transform: uppercase;
  287. letter-spacing: 1px;
  288. text-align: center;
  289. }
  290.  
  291. .navilink:link, {
  292. background: #2D4541!important;
  293. display: inline-block;
  294. margin: 3px;
  295. border-radius: 5px;
  296. padding: 5px;
  297. font: 10px Arial, serif;
  298. text-transform: uppercase;
  299. letter-spacing: 1px;
  300. text-align: center;
  301. }
  302.  
  303. .navilink:hover{
  304. background: #1E2833!important;
  305. opacity: 90;
  306. filter: brightness(90%);
  307. transition: all 1s ease-in-out;
  308. -webkit-transition: all 1s ease-in-out;
  309. -moz-transition: all 1s ease-in-out; }
  310. }
  311.  
  312. .navilink:visited, .navilink:active{
  313. background: #2D4541!important;
  314. display: inline-block;
  315. margin: 3px;
  316. border-radius: 5px;
  317. padding: 5px;
  318. font: 10px Arial, serif;
  319. text-transform: uppercase;
  320. letter-spacing: 1px;
  321. text-align: center;
  322. }
  323.  
  324. </style>
  325.  
  326. <center>
  327. <div id="divbox">
  328. <div id="navigation">
  329. <a id="navilink" href="https://vampirefreaks.com/">VF HOME</a>
  330. <a id="navilink" href="http://vampirefreaks.com/profile_action.php?user=USERNAME&friendslist=1">ADD ME</a>
  331. <a id="navilink" href="http://vampirefreaks.com/user_comment.php?user=USERNAME&rate=1">CONTACT ME</a>
  332. <a id="navilink" href="http://vampirefreaks.com/gallery/USERNAME">GALLERY</a>
  333. <a id="navilink" href="http://vampirefreaks.com/journal/USERNAME">JOURNAL</a>
  334. <a id="navilink" href="https://vampirefreaks.com/cult/PD">CREDIT</a>
  335. </div>
  336.  
  337. <div id="friends"><div class="h1">Friends</div>
  338. <center>
  339. <a href="https://vampirefreaks.com" title="USERNAME"><img src="https://i.imgur.com/2mhvuN7.png" class="friends"></a>
  340. <a href="https://vampirefreaks.com" title="USERNAME"><img src="https://i.imgur.com/2mhvuN7.png" class="friends"></a>
  341. <a href="https://vampirefreaks.com" title="USERNAME"><img src="https://i.imgur.com/2mhvuN7.png" class="friends"></a>
  342. <a href="https://vampirefreaks.com" title="USERNAME"><img src="https://i.imgur.com/2mhvuN7.png" class="friends"></a>
  343. <a href="https://vampirefreaks.com" title="USERNAME"><img src="https://i.imgur.com/2mhvuN7.png" class="friends"></a>
  344. <a href="https://vampirefreaks.com" title="USERNAME"><img src="https://i.imgur.com/2mhvuN7.png" class="friends"></a>
  345. <a href="https://vampirefreaks.com" title="USERNAME"><img src="https://i.imgur.com/2mhvuN7.png" class="friends"></a>
  346. <a href="https://vampirefreaks.com" title="USERNAME"><img src="https://i.imgur.com/2mhvuN7.png" class="friends"></a>
  347. <a href="https://vampirefreaks.com" title="USERNAME"><img src="https://i.imgur.com/2mhvuN7.png" class="friends"></a>
  348. </center></div>
  349.  
  350. <div id="aboutme">
  351. <center><table width="100%" valign="top"><tr>
  352. <td width="16%" valign="top"><div class="h2"><font color=#E3DEDC>NAME</font></div></td>
  353. <td width="16%" valign="top"><div class="h2"><font color=#E3DEDC>AGE</font></div></td>
  354. <td width="16%" valign="top"><div class="h2"><font color=#E3DEDC>GENDER</font></div></td>
  355. <td width="16%" valign="top"><div class="h2"><font color=#E3DEDC>STATUS</font></div></td>
  356. <td width="16%" valign="top"><div class="h2"><font color=#E3DEDC>ACCOUNT</font></div></td></tr>
  357. <td width="16%" valign="top"><div class="h3">XXX</div></td>
  358. <td width="16%" valign="top"><div class="h3">XXX</div></td>
  359. <td width="16%" valign="top"><div class="h3">XXX</div></td>
  360. <td width="16%" valign="top"><div class="h3">XXX</div></td>
  361. <td width="16%" valign="top"><div class="h3">XXX</div></td></tr></table></center>
  362. </div>
  363.  
  364. <div id="picinfo">
  365. <div class="h1">USERNAME</div>
  366. <a href="http://vampirefreaks.com/gallery/USERNAME" title="GALLERY"><img src="https://i.imgur.com/2mhvuN7.png" class="profilepic" align="left"></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc risus mauris, blandit ac dolor commodo, porttitor bibendum libero. Maecenas sem lectus, aliquet ut elementum eget, lobortis ac tellus. Curabitur suscipit diam sit amet tincidunt facilisis. Donec pellentesque vehicula tortor, finibus laoreet mi. Sed bibendum, enim ac pretium rutrum, mauris felis laoreet libero, sed tincidunt eros est a velit. Quisque lobortis diam vel dui vehicula, non tempor justo scelerisque. Vivamus sem metus, mattis ac convallis eu, volutpat ut nisl. Duis blandit enim elit, ut dictum enim consequat quis. Proin facilisis dignissim laoreet.
  367. </div>
  368.  
  369. <div id="likes"><div class="h1">LIKES</div>
  370. <b>BOLD</b> <i>ITALIC</i> <u>UNDERLINE</u>
  371. </div>
  372.  
  373. <div id="dislikes"><div class="h1">DISLIKES</div>
  374. <b>BOLD</b> <i>ITALIC</i> <u>UNDERLINE</u>
  375. </div>
  376.  
  377. <div id="cults"><div class="h1">Cults</div>
  378. <a href="https://vampirefreaks.com/" title="CULT"><img src="https://i.imgur.com/2mhvuN7.png" class="cults"></a>
  379. <a href="https://vampirefreaks.com/" title="CULT"><img src="https://i.imgur.com/2mhvuN7.png" class="cults"></a>
  380. <a href="https://vampirefreaks.com/" title="CULT"><img src="https://i.imgur.com/2mhvuN7.png" class="cults"></a>
  381. <a href="https://vampirefreaks.com/" title="CULT"><img src="https://i.imgur.com/2mhvuN7.png" class="cults"></a>
  382. <a href="https://vampirefreaks.com/" title="CULT"><img src="https://i.imgur.com/2mhvuN7.png" class="cults"></a>
  383. <a href="https://vampirefreaks.com/" title="CULT"><img src="https://i.imgur.com/2mhvuN7.png" class="cults"></a>
  384. <a href="https://vampirefreaks.com/" title="CULT"><img src="https://i.imgur.com/2mhvuN7.png" class="cults"></a>
  385. </div>
  386. </div>
  387. </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement