API tools faq
paste
Advertisement
VicariousHelpSite

CSS/DIV LAYOUT 128

VicariousHelpSite
Oct 15th, 2013
3,364
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.18 KB | None | 0 0
raw download clone embed print report diff
  1. !!!!!!!!!!!!Read It!!!!!!!!!!!!
  2.  
  3. (⊙.⊙(☉_☉)⊙.⊙)
  4.  
  5. ..............CODE ALTERED 10-6 TO CONFORM WITH ELITE.............
  6.  
  7. ALL COLORS CAN BE CHANGED.For color changes, see the color palette section in About Me. There are a ton of color schemes online. It won't take you long to change the color set-up on this profile.
  8.  
  9.  
  10. There are div ids/classes in this layout. Be VERY, VERY, VERY careful not to drop off any of the coding.
  11.  
  12.  
  13. ............................
  14. MUSIC PLAYER
  15.  
  16. REPLACE MY MUSIC PLAYER WITH YOUR OWN.
  17.  
  18. .......................................
  19.  
  20. Hover Image Panels
  21.  
  22. To replace the images in the hover panels, replace my image url with your own wherever you see div image urls like this:
  23.  
  24. <div class="v250w250h_a" style="background-image:url(http://i.imgur.com/fFMgYaG.png);">
  25.  
  26. To find out the width and height for the picture in that section, look at the code. In this case the code says v250w250h. That means the width is 250px and the height is 250px. Make your picture using those dimensions. NOTE that the connection images are 160px width by 60px height in that section. They will scroll so you can add more if need be.
  27.  
  28.  
  29. Every image has a scrollbox underneath it. If you decide you want less hover boxes (just leaving the pics instead), do the following:
  30.  
  31. Example:
  32.  
  33. <div class="v250w250h_a" style="background-image:url(http://i.imgur.com/fFMgYaG.png);">
  34. <div class="HBox1">
  35. <p>Put whatever you want here.
  36. </div></div>
  37.  
  38. To leave just the image, remove:
  39. <div class="HBox1">
  40. <p>Put whatever you want here.
  41. </div>
  42.  
  43. So that you are left with only this:
  44. <div class="v250w250h_a" style="background-image:url(http://i.imgur.com/fFMgYaG.png);">
  45. </div>
  46.  
  47. Again, be very, very careful not to leave or take away </div> tags. Make sure if you remove a div you remove a closed div tag too.
  48. .......................................
  49.  
  50. SPECIAL INSTRUCTIONS FOR THE THREE PICS ON THE LEFTHAND SIDE:
  51.  
  52. The three boxes for Daryl ON THE LEFT are ONE image of 250px width by 760px height.
  53. You do NOT have to manually cut the image up into 3 parts.
  54. Just make one 250px by 760px image and place the SAME image link where the background-img:url (link here); is in EACH of these sections. If you look at the link for my pic, they are all THE EXACT SAME. The coding will align the one image so that it shows the top on the top, the middle in the middle and the bottom of the image in the bottom slot.
  55. Alternatively, you can put THREE SEPARATE images here. Just make them 250width by 250height and put them in the same spot where the background-image:url(link here); images are located in each of these sections.
  56.  
  57.  
  58. ///////////////////////////////////////////////////
  59. _______________________________________________
  60.  
  61.  
  62.  
  63.  
  64. Don't forget to replace the XXXXX with your friend ID number.
  65.  
  66. (>‿◠)✌
  67.  
  68.  
  69. *****************************SAVE YOUR WORK AS YOU GO.*******************************
  70.  
  71.  
  72.  
  73.  
  74.  
  75. DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.
  76.  
  77. -----------------------------ABOUT ME---------------------------------
  78.  
  79. </td></tr></table></td></tr></table></td></tr></table></div>
  80.  
  81. <style type="text/css">
  82. @import url(http://fonts.googleapis.com/css?family=Tangerine:400,700|Raleway:400,300|Yanone+Kaffeesatz:400,700);
  83.  
  84. /* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
  85.  
  86. .vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
  87.  
  88. /* - -DO NOT REARRANGE MY CODING. ORDER IS IMPORTANT. - - */
  89.  
  90. .vicarious{Background Properties // BODY COLOR IS IN THE COLOR PALETTE SECTION}
  91. body {
  92. background-image:url( );
  93. background-repeat:repeat;
  94. background-position: top center;
  95. background-attachment:fixed;
  96. }
  97.  
  98. .vicarious{ Google Chrome Scrollbar }
  99. ::-webkit-scrollbar {width: 15px;}
  100. ::-webkit-scrollbar-track {border: 1px solid ;}
  101. ::-webkit-scrollbar-thumb {border: 1px solid ;}
  102.  
  103. .vicarious { Font Styles }
  104.  
  105. a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em {
  106. font-family: tahoma;
  107. font-size: 8pt ;
  108. line-height: 90% ;
  109. text-decoration:none;
  110. }
  111.  
  112. P { text-align:justify; }
  113. I { font-size:12pt;font-family: Tangerine; text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); }
  114. EM {font-size:13pt; font-family: times new roman; text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); display:block; text-align:center;}
  115.  
  116. B {
  117. font-family: arial narrow;
  118. font-size:8pt;
  119. font-weight:bold;
  120. text-transform:uppercase;
  121. line-height:100%;
  122. letter-spacing: 0pt;
  123. }
  124.  
  125. a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {
  126. font-family: arial narrow;
  127. font-size:9pt;
  128. text-align:center;
  129. text-transform:uppercase;
  130. line-height:50px;
  131. height:50px;
  132. font-weight:bold;
  133. text-decoration:none;
  134. -webkit-transition: all 1s ease-out 0s;
  135. -moz-transition: all 1s ease-out 0s;
  136. -ms-transition: all 1s ease-out 0s;
  137. -o-transition: all 1s ease-out 0s;
  138. transition: all 1s ease-out 0s;
  139. margin-right:20px;
  140.  
  141. }
  142.  
  143. a.second, a.second:link, a.second:active, a.second:visited {
  144. font-size:8pt;
  145. letter-spacing:0pt;
  146. line-height:10px;
  147. height:10px;
  148. display:block;
  149. margin-right:0px;
  150.  
  151. }
  152.  
  153.  
  154. .h1, .h2, .h3, .h4, .h5 {
  155. text-transform:uppercase;
  156. line-height:100%;
  157. text-align:center;
  158. display:block;
  159. font-size: 11pt ;
  160. text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
  161. }
  162.  
  163. .h1 {font-family: copperplate gothic light;font-size: 30px ; }
  164. .h2 {font-family: 'Yanone Kaffeesatz', sans-serif;font-size: 18px ; height:20px; line-height:20px;}
  165. .h3 {font-family: 'Raleway', sans-serif; font-size: 10pt ;margin:5px 0px;letter-spacing:2pt;}
  166. .h4 {font-family: 'Raleway', sans-serif; font-size: 20px ; letter-spacing:0pt;height:30px; line-height:30px;}
  167. .h5 {font-family: copperplate gothic light;font-size: 7.5pt ; letter-spacing:0pt; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);}
  168.  
  169. .lyric, .lyric2, .lyric3, .lyric4 {
  170. font-family:georgia;
  171. display:block;
  172. text-align:center;
  173. text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
  174. }
  175.  
  176. .lyric {
  177. text-align:left;
  178. font-size:16.75pt;
  179. line-height:75%;
  180. margin-top:10px;
  181. padding-left:4px;
  182. font-weight:light;
  183. letter-spacing:3pt;}
  184.  
  185. .lyric2 {
  186. font-family:courier new;
  187. font-size:11pt;
  188. line-height:95%;
  189. letter-spacing:0pt;
  190. text-align:right;
  191. padding-right:4px;}
  192.  
  193. .lyric3 {
  194. font-family:courier new;
  195. font-size:14pt;
  196. line-height:100%;
  197. padding-left:4px;
  198. text-align:left; }
  199.  
  200. .lyric4 {
  201. font-size: 14pt ;
  202. letter-spacing:1pt;
  203. line-height:75%;
  204.  
  205. text-transform:uppercase; }
  206.  
  207.  
  208. .vicarious { Div IDS/Class Styles }
  209.  
  210. .vlinks {
  211. width:100%;
  212. height:50px;
  213. right:0%;
  214. bottom:0%;
  215. position:fixed;
  216. overflow:hidden;
  217. z-index:2;
  218. margin-right:0px;
  219. margin-bottom:0px;
  220. text-align:right;
  221. }
  222.  
  223. .vname {-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-o-transform: rotate(270deg);writing-mode: lr-tb;}
  224. .vname2, .vname3, .vname4 {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);writing-mode: rl-tb;}
  225. .vname { width:760px; height:50px; margin-left:-910px; margin-top:405px; }
  226. .vname2, .vname3, .vname4 { width:250px; height:50px; margin-left:160px;margin-left:435px; }
  227.  
  228. .vname2 { margin-top:150px; }
  229. .vname3 { margin-top:405px; }
  230. .vname4 { margin-top:660px; }
  231.  
  232. .v250w250h_a, .v250w250h_b, .v250w250h_c { width:250px; height:250px; margin-left:-500px; background-repeat:no-repeat;}
  233. .v250w250h_a { margin-top:50px; background-position: top center; }
  234. .v250w250h_b { margin-top:305px; background-position: center center; }
  235. .v250w250h_c { margin-top:560px; background-position: bottom center; }
  236.  
  237. .v500w250h { width:500px; height:250px; margin-left:-245px; margin-top:50px; }
  238.  
  239. .vname, .vname2, .vname3, .vname4, .v250w250h_a, .v250w250h_b, .v250w250h_c, .v500w250h, .v_personality, .v_aboutme, .v_tunes, .lyrics, .v500w200h, .connections, .v270h250w_a, .v270h250w_b {
  240. left:50%;
  241. top:0%;
  242. position:absolute;
  243. z-index:1;
  244. -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
  245. -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
  246. box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
  247. text-align:left;
  248. }
  249.  
  250. .vname, .vname2, .vname3, .vname4, .lyrics {
  251. overflow:hidden;
  252. }
  253.  
  254. .v250w250h_a, .v250w250h_b, .v250w250h_c, .v500w250h, .v_personality, .v_aboutme, .v_tunes, .v500w200h, .connections, .v270h250w_a, .v270h250w_b {
  255. overflow:auto;
  256. }
  257.  
  258. .v_personality { width:190px; height:215px; margin-left:-245px; margin-top:305px; border:5px solid;}
  259. .v_tunes { width:200px; height:20px; margin-left:-245px; margin-top:535px; }
  260. .v_aboutme { width:375px; height:240px; margin-left:-40px; margin-top:305px;border:5px solid;}
  261. .connections { width:180px; height:250px; margin-left:350px; margin-top:305px; overflow:auto; }
  262.  
  263. .lyrics { width:500px;height:45px;margin-left:-245px;margin-top:560px; }
  264. .v500w200h { width:500px; height:200px; margin-left:-245px; margin-top:610px; }
  265.  
  266. .v270h250w_a, .v270h250w_b { width:270px; height:250px; margin-left:260px }
  267. .v270h250w_a { margin-top:50px; }
  268. .v270h250w_b { margin-top:560px; }
  269.  
  270.  
  271.  
  272.  
  273. .Hbox1, .Hbox2, .Hbox3, .Hbox4, .Hbox5a {
  274. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  275. filter: alpha(opacity=0);
  276. opacity: 0;
  277. overflow:hidden;
  278. text-align:left;
  279. -webkit-transition: all 1s ease-out 0s;
  280. -moz-transition: all 1s ease-out 0s;
  281. -ms-transition: all 1s ease-out 0s;
  282. -o-transition: all 1s ease-out 0s;
  283. transition: all 1s ease-out 0s;
  284. }
  285.  
  286. .Hbox1:hover, .Hbox2:hover, .Hbox3:hover, .Hbox4:hover, .Hbox5a:hover {
  287. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  288. filter: alpha(opacity=100);
  289. opacity: 1;
  290. overflow:auto;
  291. }
  292.  
  293. .Hbox1 { width:250px; height:250px; }
  294. .Hbox2 { width:500px; height:250px; }
  295. .Hbox3 { width:500px; height:200px; }
  296. .Hbox4 { width:270px; height:250px; }
  297. .Hbox5 { width:160px; height:60px; margin-top:2px;}
  298. .Hbox5a { width:160px; height:60px; }
  299.  
  300. .bottom {
  301. width:100%;
  302. height:50px;
  303. margin-top:815px;
  304. margin-left:0px;
  305. left:0%;
  306. top:0%;
  307. position:absolute;
  308. z-index:1;
  309. background-color:transparent;
  310. }
  311.  
  312. .vicarious{ Color Palette}
  313. body{ background-color:181818; }
  314. ::-webkit-scrollbar-track {background-color:000000 ; border-color:171717;}
  315. ::-webkit-scrollbar-thumb {background-color:292929;; border-color:171717 ;}
  316. a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em { color:333333; }
  317. I { color:4c4c4c; }
  318. EM { color:323030; }
  319. B { color:363636; }
  320. a.first, a.first:link, a.first:active, a.first:visited { color:333333; background-color: transparent; }
  321. a.first:hover { color:222222; }
  322. a.second, a.second:link, a.second:active, a.second:visited { color:444444; background-color: 272525; }
  323. a.second:hover { color:434141; background-color: 251616; }
  324. .h1, .h4 { color:333030; background-color: 1e1c1c; }
  325. .h2 { color:46413a; background-color: 251616; }
  326. .h3 { color:43403b; background-color: 1a1919; }
  327. .h5 { color:444444; background-color: 272525; }
  328. .lyric, .lyric3 { color:46413a}
  329. .lyric2, .lyric4 { color:3a3733}
  330.  
  331. .Hbox1:hover, .Hbox2:hover, .Hbox3:hover, .Hbox4:hover, .Hbox5a:hover { background-color: 121212 }
  332.  
  333. .vname, .vname2, .vname3, .vname4, .v250w250h_a, .v250w250h_b, .v250w250h_c, .v500w250h, .v_personality, .v_aboutme, .v_tunes, .lyrics, .v500w200h, .connections, .v270h250w_a, .v270h250w_b { background-color:121212; }
  334. .vlinks { background-color: 1e1c1c; }
  335. .v_personality, .v_aboutme {border-color:251616;}
  336.  
  337.  
  338.  
  339. /* - - CSS!! NO TOUCHY!!! - - */
  340.  
  341. img {border:0px;}
  342. table, tr, td {background:transparent; border:0px;}
  343. img, .contactTable { display:none; }
  344. .vicholder img, .comt img { display:inline; }
  345. table div, td td td, table div div { visibility:hidden; }
  346. font, a, .vicsc a { visibility:hidden; }
  347. .hidenav {display:none}
  348. div.profileWidth {margin-top: -30px !important;}
  349. div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}
  350. div.profileWidth div.clearfix, hidenav hidenav hidenav,
  351. div.profileWidth div div {filter:none; opacity:0.9999}
  352. div.profileWidth div.clearfix {position:relative; top:30px}
  353. table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
  354. table table table embed, .vicholder div embed {position:static !important; width:auto; height:auto; }
  355. .text, table table table table a,table table table table div,table table table table div a {visibility:visible;}
  356. .vicsc { display:none; }
  357. .text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
  358. table table, table table td {padding:0px; height:0px;}
  359. marquee { z-index:8; }
  360. table div, span, td td td, table div div { visibility:hidden !important; }
  361. .vicholder div, .vicholder div font, .vicholder div a, .vicholder div div, .vicholder font a, .vicholder span, .vicholder div table a, .vicholder div table img, .vicholder div
  362.  
  363. table font, .vicholder div table, .vicholder div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}
  364. .vicDiv {content:"Layouts available @ http://vicarious-hs.tumblr.com";}
  365. /* - - - - - - - */
  366.  
  367.  
  368. .vicarious{ Hide Codes }
  369. .userProfileURL { display:none; }
  370. .profileInfo { display:none; }
  371. .friendsComments { display:none; }
  372. .friendSpace { display:none; }
  373. .blurbs {display: none;}
  374. .contactTable {display: none;}
  375. .latestBlogEntry {display: none;}
  376. .extendedNetwork {display: none;}
  377. .interestsAndDetails {display: none;}
  378. .userprofiledetail {display: none;}
  379. .userAlbums { display:none; }
  380. .whitetext12{visibility:hidden; display:none;}
  381. .orangetext15{visibility:hidden; display:none;}
  382. .lightbluetext8{visibility:hidden; display:none}
  383. table table table table td {width:0px;}
  384. .contactTable td, table table td.text table td,table table table table table td {width:auto;}
  385. .profile { display:none !important;visibility:hidden!important; }
  386. table tr td[id='footerWarpper']{display:none !important;visibility:hidden!important;}
  387.  
  388.  
  389.  
  390. </style>
  391.  
  392. <div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>
  393.  
  394.  
  395.  
  396.  
  397. -----------------------------LIKE TO MEET---------------------------------
  398.  
  399. </td></tr></table></td></tr></table></td></tr></table></div><DIV class="vicholder">
  400.  
  401.  
  402. <div class="vname">
  403. <font class="h1">Character Name Here</font>
  404. <font class="h2">Character tagline here</font>
  405. </div>
  406.  
  407. <div class="v250w250h_a" style="background-image:url(http://i.imgur.com/fFMgYaG.png);">
  408. <div class="Hbox1">
  409.  
  410. <p><font class="h3">Legal</font>
  411. <BR><b>NAME:</b> Input info
  412. <BR><b>NICKNAMES:</b> Input info
  413. <BR><b>ALIASES:</b> Input info
  414. <BR><b>DATE OF BIRTH:</b> Input info
  415. <BR><b>PLACE OF BIRTH:</b> Input info
  416. <BR><b>CURRENT RESIDENCE:</b> Input info
  417.  
  418. <p><font class="h3">Physical</font>
  419. <BR><b>ETHNICITY:</b> Input info
  420. <BR><b>HAIR COLOR:</b> Input info
  421. <BR><b>EYE COLOR:</b> Input info
  422. <BR><b>HEIGHT:</b> Input info
  423. <BR><b>WEIGHT:</b> Input info
  424. <BR><b>BIRTHMARKS/SCARS:</b> Input info
  425.  
  426. <p>Instructions about these three boxes (Remove after you complete your profile):
  427. <p>The three boxes for Daryl are ONE image of 250px width by 760px height. You do NOT have to manually cut the image up into 3 parts. Just make one 250px by 760px image and place the SAME image link where the background-img:url (link here); is in EACH of these sections. If you look at the link for my pic, they are all THE EXACT SAME. The coding will align the one image so that it shows the top on the top, the middle in the middle and the bottom of the image in the bottom slot.
  428. <P>Alternatively, you can put THREE SEPARATE images here. Just make them 250width by 250height and put them in the same spot where the background-image:url(link here); images are located in each of these sections.
  429.  
  430. </div></div>
  431.  
  432. <div class="v250w250h_b" style="background-image:url(http://i.imgur.com/fFMgYaG.png);">
  433. <div class="Hbox1">
  434.  
  435. <p><font class="h3">Education</font>
  436. <BR><b>High School</b> Input Info
  437. <br><b>College</b> Input Info
  438. <br><b>Major</b> Input Info
  439. <br><b>Degree</b> Input Info
  440.  
  441. <p><font class="h3">Employment</font>
  442. <BR><b>OCCUPATION:</b> Input info
  443. <BR><b>JOB DESCRIPTION:</b> Input info
  444. <BR><b>EMPLOYER:</b> Input info
  445. <BR><b>SKILLSET:</b> Input info
  446.  
  447. </div></div>
  448.  
  449. <div class="v250w250h_c" style="background-image:url(http://i.imgur.com/fFMgYaG.png);">
  450. <div class="Hbox1">
  451.  
  452. <p><font class="h3">Family</font>
  453. <BR><b>MOTHER:</b> Input info
  454. <BR><b>FATHER:</b> Input info
  455. <BR><b>SISTER(S):</b> Input info
  456. <BR><b>BROTHER(S):</b> Input info
  457. <BR><b>Other Family:</b> Input info
  458.  
  459. <p><font class="h3">Relationships</font>
  460. <BR><b>SEXUAL ORIENTATION:</b> Input info
  461. <BR><b>RELATIONSHIP STATUS:</b> Input info
  462. <BR><b>CURRENT RELATIONSHIP(S):</b> Input info
  463. <BR><b>PAST RELATIONSHIP(S):</b> Input info
  464.  
  465. </div></div>
  466.  
  467.  
  468. <div class="v500w250h" style="background-image:url(http://i.imgur.com/X2psS5q.png);">
  469. <div class="Hbox2">
  470.  
  471. <font class="h1">Header 1</font>
  472. <font class="h2">Header 2</font>
  473. <font class="h3">Header 3</font>
  474. <font class="h4">Header 4</font>
  475. <font class="h5">Header 5</font>
  476.  
  477. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  478.  
  479. <p><em>Emphasized text goes here</em>
  480.  
  481. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  482.  
  483. </div></div>
  484.  
  485.  
  486. <div class="v_personality">
  487.  
  488. <p><font class="h3">Personality</font>
  489. <BR><b>Traits:</b> Input Info
  490. <BR><b>Disorders:</b> Input Info
  491. <BR><b>Addictions:</b> Input Info
  492. <BR><b>Likes:</b> Input Info
  493. <BR><b>Dislikes:</b> Input Info
  494. <BR><b>Quirks:</b> Input Info
  495. </div>
  496.  
  497. <div class="v_tunes">
  498. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
  499. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  500. <param name="bgcolor" value="#251616" />
  501. <param name="FlashVars" value="mp3=http%3A//k002.kiwi6.com/hotlink/656165c1p8/the_walking_dead_theme_www.mp3fiber.com_.mp3&autoplay=1&bgcolor=251616&loadingcolor=46413a&buttoncolor=46413a&slidercolor=46413a" />
  502. </object>
  503. </div>
  504.  
  505. <div class="v_aboutme">
  506.  
  507. <font class="h2">Header 2</font>
  508. <font class="h5">Header 5</font>
  509.  
  510. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  511.  
  512. <p><em>Emphasized text goes here</em>
  513.  
  514. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  515.  
  516. </div>
  517.  
  518. <div class="lyrics">
  519. <font class="lyric">A man who won't die for something</font>
  520. <font class="lyric2"> is not fit to live.</font>
  521. </div>
  522.  
  523. <div class="v500w200h" style="background-image:url(http://i.imgur.com/R0PRMt1.png);">
  524. <div class="Hbox3">
  525.  
  526. <font class="h1">Header 1</font>
  527. <font class="h2">Header 2</font>
  528. <font class="h3">Header 3</font>
  529. <font class="h4">Header 4</font>
  530. <font class="h5">Header 5</font>
  531.  
  532. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  533.  
  534. <p><em>Emphasized text goes here</em>
  535.  
  536. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  537.  
  538. <font class="lyric">You can use these for lyrics</font>
  539. <font class="lyric2">or to emphasize text</font>
  540. <font class="lyric3">Add in a quote if you want</font>
  541. <font class="lyric4">or some lines from a song</font>
  542. </div></div>
  543.  
  544.  
  545.  
  546.  
  547.  
  548.  
  549.  
  550. <div class="vname2">
  551. <font class="h4">Title Goes Here</font>
  552. <font class="h2">Secondary Title</font>
  553. </div>
  554.  
  555. <div class="v270h250w_a" style="background-image:url(http://i.imgur.com/Ra1I5Cb.png);">
  556. <div class="Hbox4">
  557.  
  558. You can put a special connection here or other info. The title for this section is above.
  559.  
  560.  
  561. </div></div>
  562.  
  563.  
  564.  
  565.  
  566.  
  567. <div class="vname3">
  568. <font class="h4">Main Connections</font>
  569. <font class="h2">The Special Ones</font>
  570. </div>
  571. <div class="connections"><center>
  572.  
  573. <div class="Hbox5" style="background-image:url(http://i.imgur.com/3sXlbrt.png);">
  574. <div class="Hbox5a">
  575. <a class="second" href="/FriendID">Connection Name</a>
  576. <p>Info about connection here. THE CONNECTION IMAGE IS 160PX WIDTH BY 60PX HEIGHT.
  577. </div></div>
  578.  
  579.  
  580. <div class="Hbox5" style="background-image:url(http://i.imgur.com/3sXlbrt.png);">
  581. <div class="Hbox5a">
  582. <a class="second" href="/FriendID">Connection Name</a>
  583. <p>Info about connection here. THE CONNECTION IMAGE IS 160PX WIDTH BY 60PX HEIGHT.
  584. </div></div>
  585.  
  586.  
  587. <div class="Hbox5" style="background-image:url(http://i.imgur.com/3sXlbrt.png);">
  588. <div class="Hbox5a">
  589. <a class="second" href="/FriendID">Connection Name</a>
  590. <p>Info about connection here. THE CONNECTION IMAGE IS 160PX WIDTH BY 60PX HEIGHT.
  591. </div></div>
  592.  
  593.  
  594. <div class="Hbox5" style="background-image:url(http://i.imgur.com/3sXlbrt.png);">
  595. <div class="Hbox5a">
  596. <a class="second" href="/FriendID">Connection Name</a>
  597. <p>Info about connection here. THE CONNECTION IMAGE IS 160PX WIDTH BY 60PX HEIGHT.
  598. </div></div>
  599.  
  600.  
  601. <div class="Hbox5" style="background-image:url(http://i.imgur.com/3sXlbrt.png);">
  602. <div class="Hbox5a">
  603. <a class="second" href="/FriendID">Connection Name</a>
  604. <p>Info about connection here. THE CONNECTION IMAGE IS 160PX WIDTH BY 60PX HEIGHT.
  605. </div></div>
  606.  
  607. <div class="Hbox5" style="background-image:url(http://i.imgur.com/3sXlbrt.png);">
  608. <div class="Hbox5a">
  609. <a class="second" href="/FriendID">Connection Name</a>
  610. <p>Info about connection here. THE CONNECTION IMAGE IS 160PX WIDTH BY 60PX HEIGHT.
  611. </div></div>
  612.  
  613. </center></div>
  614.  
  615.  
  616.  
  617.  
  618. <div class="vname4">
  619. <font class="h4">Title Goes Here</font>
  620. <font class="h2">Secondary Title</font>
  621. </div>
  622.  
  623.  
  624. <div class="v270h250w_b" style="background-image:url(http://i.imgur.com/KRv3xcn.png);">
  625. <div class="Hbox4">
  626.  
  627. You can put a special connection here or other info. The title for this section is above.
  628. </div></div>
  629.  
  630. <div class="vlinks">
  631.  
  632.  
  633. <a class="first" href="/logincomplete.php">Home</a>
  634. <a class="first" href="/invite_friend.php?friend_id=xxxxxx">Add</a>
  635. <a class="first" href="/send_message.php?member_id=xxxxxx">Message</a>
  636. <a class="first" href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
  637. <a class="first" href="/gallery.php?member_id=xxxxxx">Photos</a>
  638. <a class="first" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
  639.  
  640.  
  641.  
  642.  
  643. </div>
  644. <div class="bottom"></div>
  645. </div><div class="ficsc"><table><tr><td><table><tr><td><table><tr><td>
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!