Advertisement
VicariousHelpSite

CSS/DIV Layout 140

Aug 15th, 2014
438
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. !!!!!!!!!!!!Read It!!!!!!!!!!!!
  2.  
  3. (⊙.⊙(☉_☉)⊙.⊙)
  4.  
  5. CAN'T EMPHASIZE THIS ENOUGH: There are div ids/classes, tables (table, tr, td) and img classes in this layout. Be VERY, VERY, VERY careful not to drop off any of the coding.
  6.  
  7. ............................
  8.  
  9.  
  10. MUSIC PLAYER
  11.  
  12. REPLACE MY MUSIC PLAYER WITH YOUR OWN.
  13.  
  14. ............................
  15.  
  16.  
  17. FOR ROLEPLAYER.ME USERS:
  18.  
  19. For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:
  20. I code for ALL sites. Not every website will allow headers to be placed as <h1>Header 1</h1>. For that reason, I turn them into font classes with a period in front (.h1) in About Me and script them in the tables as I have done below.
  21.  
  22. <font class="h1">Header 1</font>
  23.  
  24. If you are on a website like RPer.me that allows regular header, underline, strong, etc coding, you can just use regular header coding for all of the header, lyric, special text labels like so:
  25. <h1>Header</h1> <strike>Strike</strike> etc..
  26.  
  27. OR just leave them as they are. They will work for you either way.
  28.  
  29.  
  30. ///////////////////////////////////////////////////
  31.  
  32.  
  33.  
  34. Don't forget to replace the XXXXX with your friend ID number.
  35.  
  36. (>‿◠)✌
  37.  
  38.  
  39. *****************************SAVE YOUR WORK AS YOU GO.*******************************
  40.  
  41.  
  42. DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.
  43.  
  44. -----------------------------ABOUT ME---------------------------------
  45.  
  46. <style type="text/css">
  47. @import url(http://fonts.googleapis.com/css?family=Abel|Quicksand:700|IM+Fell+English:400,400italic|Alfa+Slab+One|Playfair+Display:400,700italic|Shadows+Into+Light|Raleway:400,900|Yanone+Kaffeesatz:400,300|Oswald|Roboto+Condensed:400,700);
  48.  
  49. /* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
  50. /* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
  51.  
  52. .vicarious { Structure }
  53.  
  54. body {
  55. background-color:f4f4f4;
  56. background-image:url(http://i58.tinypic.com/90oh3r.jpg);
  57. background-repeat:repeat;
  58. background-attachment:fixed;
  59. background-position:center center;
  60. }
  61.  
  62.  
  63. table, tr, td {background-color:transparent;}
  64.  
  65. .vicarious{ Google Chrome Scrollbar }
  66. ::-webkit-scrollbar {width: 10px;}
  67. ::-webkit-scrollbar-track {border: 1px solid #222222;background-color:transparent;}
  68. ::-webkit-scrollbar-thumb {border: 1px solid #222222;background-color:dadada;}
  69.  
  70. .vicarious { text }
  71.  
  72. table, tr, td, li, p, div, .text, .btext, a, b, i {
  73. font-family:tahoma;
  74. font-size:7pt;
  75. line-height:100%;
  76. color:212121;
  77. padding:0px;
  78. margin:0px;
  79. text-decoration:none;
  80. text-transform:none;
  81. }
  82.  
  83. p {text-align:justify;}
  84. p:first-line { }
  85. p:first-letter { font-size: 9pt; }
  86.  
  87.  
  88. b {
  89. text-transform:uppercase;
  90. font-family:courier new;
  91. letter-spacing:-1pt;
  92. color:424242;
  93. }
  94.  
  95. i {
  96. font-family: 'Jolly Lodger', cursive;
  97. color:444444;
  98. }
  99.  
  100. .u, u {
  101. color:000000;
  102. text-decoration:underline;
  103. }
  104.  
  105. .strike, strike {
  106. color:red;
  107. text-decoration:line-through;
  108. }
  109.  
  110. .strong, strong {
  111. font-family:courier new;
  112. background-color:000000;
  113. font-size: 8pt;
  114. text-transform:uppercase;
  115. color:ffffff;
  116. line-height:120%;
  117. padding:0px 7px 0px 7px;
  118. -webkit-border-radius: 15px;
  119. -moz-border-radius: 15px;
  120. border-radius: 15px;
  121.  
  122. }
  123.  
  124.  
  125.  
  126. em {}
  127.  
  128.  
  129. .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .one, one, .two, two, .three, three. small, big {
  130. padding:0px;
  131. margin:0px;
  132. }
  133.  
  134.  
  135. .blockquote {
  136. display:block;
  137. text-align:justify;
  138. margin:5px 5px 5px 10px;
  139. padding: 5px 5px 5px 10px;
  140. border-left:2px solid #000000;
  141. height:auto;
  142. background: rgba(0, 0, 0, 0.1);
  143. -moz-border-radius-topleft: 90px;
  144. -webkit-border-top-left-radius: 90px;
  145. border-top-left-radius: 90px;
  146. -moz-border-radius-topright: 5px;
  147. -webkit-border-top-right-radius: 5px;
  148. border-top-right-radius: 5px;
  149. -moz-border-radius-bottomright: 5px;
  150. -webkit-border-bottom-right-radius: 5px;
  151. border-bottom-right-radius: 5px;
  152. -moz-border-radius-bottomleft: 90px;
  153. -webkit-border-bottom-left-radius: 90px;
  154. border-bottom-left-radius: 90px;
  155. }
  156.  
  157.  
  158. .cite {font-size:0px; color:transparent;display:block; height:0px;}
  159.  
  160.  
  161. .vicarious { Divs }
  162.  
  163.  
  164. #links {
  165. width:auto;
  166. height:auto;
  167. margin-bottom:0px;
  168. margin-left:525px;
  169. background-color:transparent;
  170. left:50%;
  171. bottom:0%;
  172. visibility:visible;
  173. z-index:1;
  174. position:fixed;
  175. overflow:none;
  176. }
  177.  
  178. #links a {
  179. font-weight:light;
  180. font-family: 'Oswald', sans-serif;
  181. background-color:000000;
  182. text-decoration:none;
  183. text-transform:uppercase;
  184. line-height:25px;
  185. height:25px;
  186. width:50px;
  187. display:block;
  188. color:transparent;
  189. font-size:0pt;
  190. text-align:right;
  191. padding-right:5px;
  192. margin-bottom:5px;
  193. border-left:0px solid #000000;
  194. transition:All .6s ease-in-out .2s;
  195. -webkit-transition:All .6s ease-in-out .2s;
  196. -moz-transition:All .6s ease-in-out .2s;
  197. -o-transition:All .6s ease-in-out .2s;
  198. }
  199.  
  200.  
  201. #links:hover a {
  202. color:ffffff;
  203. font-size:6pt;
  204. }
  205.  
  206. #links a:hover {
  207. border-left:50px solid #000000;
  208. }
  209.  
  210. #links a.mix1 {
  211. background-color:626262;
  212. border-left:0px solid #626262;
  213. }
  214.  
  215. #links a.mix1:hover {
  216. border-left:50px solid #626262;
  217. }
  218.  
  219. #links a.mix2 {
  220. background-color:4e4e4e;
  221. border-left:0px solid #4e4e4e;
  222. }
  223.  
  224. #links a.mix2:hover {
  225. border-left:50px solid #4e4e4e;
  226. }
  227.  
  228. #links a.mix3 {
  229. background-color:3a3a3a;
  230. border-left:0px solid #3a3a3a;
  231. }
  232.  
  233. #links a.mix3:hover {
  234. border-left:50px solid #3a3a3a;
  235. }
  236.  
  237.  
  238. #links a.mix4 {
  239. background-color:272727;
  240. border-left:0px solid #272727;
  241. }
  242.  
  243. #links a.mix4:hover {
  244. border-left:50px solid #272727;
  245. }
  246.  
  247. #links a.mix5 {
  248. background-color:111111;
  249. border-left:0px solid #111111;
  250. }
  251.  
  252. #links a.mix5:hover {
  253. border-left:50px solid #111111;
  254. }
  255.  
  256.  
  257.  
  258. #back, #name, #row1a, #row1b, #row2a, #row2b, #row3, #row4, #breaker1, #breaker2 {
  259. left:50%;
  260. top:0%;
  261. visibility:visible;
  262. z-index:1;
  263. position:absolute;
  264. overflow:hidden;
  265. background-color:f4f4f4;
  266. }
  267.  
  268. #back {
  269. width:1100px;
  270. height:3305px;
  271. margin-top:0px;
  272. margin-left:-555px;
  273. background-color:f4f4f4;
  274. border-left:5px solid #f4f4f4;
  275. border-right:5px solid #f4f4f4;
  276. }
  277.  
  278.  
  279. /* ROW1 */
  280.  
  281. #row1a {
  282. width:825px;
  283. height:750px;
  284. margin-left:-550px;
  285. overflow:hidden;
  286. border-right:4px double #000000;
  287. }
  288.  
  289. #name {
  290. width:400px;
  291. height:80px;
  292. margin-left:-550px;
  293. margin-top:600px;
  294. background-color:transparent;
  295. overflow:none;
  296. }
  297.  
  298. #name .h1, #name h1 {
  299. font-size:25px;
  300. height:25px;
  301. line-height:25px;
  302. font-family: 'IM Fell English', serif;
  303. font-style:italic;
  304. padding-left:200px;
  305. text-transform:none;
  306. text-align:right;
  307.  
  308. }
  309.  
  310. #name .h2, #name h2 {
  311. font-size:55px;
  312. height:55px;
  313. line-height:35px;
  314. font-family: 'Raleway', sans-serif;
  315. padding-left:5px;
  316. text-transform:uppercase;
  317. text-align:left;
  318. }
  319.  
  320. #row1b {
  321. width:271px;
  322. height:750px;
  323. margin-left:279px;
  324. }
  325.  
  326. #row1a, #row1b {
  327. margin-top:0px;
  328. }
  329.  
  330. #row1b .title {
  331. height:60px;
  332. margin:0px 3px;
  333. overflow:hidden;
  334. }
  335.  
  336. #row1b .h1, #row1b h1 {
  337. font-size: 14pt ;
  338. line-height:70%;
  339. display:block;
  340. color:121212;
  341. text-transform:none;
  342. text-align:right;
  343. font-family: 'IM Fell English', serif;
  344. padding-top:15px;
  345. font-style:italic;
  346. }
  347.  
  348. #row1b .h2, #row1b h2 {
  349. font-size:10pt;
  350. line-height:90%;
  351. display:block;
  352. color:121212;
  353. text-align:left;
  354. text-transform:uppercase;
  355. font-family: 'Quicksand', sans-serif;
  356. letter-spacing:5pt;
  357. }
  358.  
  359. #row1b .h3, #row1b h3 {
  360. font-size:9pt;
  361. line-height:90%;
  362. display:block;
  363. color:efefef;
  364. text-transform:uppercase;
  365. text-align:right;
  366. font-family: 'Raleway', sans-serif;
  367. background-color:000000;
  368. letter-spacing:2pt;
  369. padding:2px 0px;
  370. }
  371.  
  372. #row1b img {
  373. width:265px;
  374. height:265px;
  375. margin:5px 3px;
  376. overflow:hidden;
  377. }
  378.  
  379. #row1b .about {
  380. height:375px;
  381. margin:0px 3px;
  382. padding:5px;
  383. overflow:auto;
  384. }
  385.  
  386.  
  387. #row1b .music {
  388. width:265px;
  389. height:25px;
  390. margin:0px 3px;
  391. overflow:hidden;
  392. text-align:center;
  393. }
  394.  
  395. /* BREAKER1 */
  396.  
  397. #breaker1 {
  398. margin-left:-550px;
  399. margin-top:760px;
  400. width:1100px;
  401. height:205px;
  402. border-bottom:5px solid #000000;
  403. }
  404.  
  405. #breaker1 .h1, #breaker1 h1 {
  406. text-transform:none;
  407. font-size:60px;
  408. line-height:55px;
  409. text-align:right;
  410. padding-right:15px;
  411. color:000000;
  412. display:block;
  413. font-family: 'Playfair Display', serif;
  414. }
  415.  
  416. #breaker1 .liner1, #breaker1 .liner2 {
  417. display:block;
  418. font-size:0px;
  419. height:5px;
  420. background-color:000000;
  421. }
  422.  
  423. #breaker1 .liner1 {
  424. width:800px;
  425. margin:0px 0px 5px 300px;
  426. }
  427.  
  428.  
  429. #breaker1 .liner2 {
  430. margin:15px 700px 0px 0px;
  431. width:400px;
  432. }
  433.  
  434.  
  435. /* ROW2 */
  436.  
  437. #row2a, #row2b {
  438. margin-top:975px;
  439. }
  440.  
  441. #row2a {
  442. width:825px;
  443. height:750px;
  444. margin-left:-550px;
  445. }
  446.  
  447. #row2b {
  448. width:275px;
  449. height:750px;
  450. margin-left:275px;
  451. }
  452.  
  453. #row2a .bx1, #row2a .bx2, #row2a .bx3 {
  454. height:255px;
  455. width:255px;
  456. padding:5px;
  457. position:absolute;
  458. overflow:auto;
  459. -webkit-box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
  460. -moz-box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
  461. box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
  462. }
  463.  
  464. #row2a .bx1 {
  465. margin-left:5px;
  466. }
  467.  
  468. #row2a .bx2{
  469. margin-left:280px;
  470. }
  471.  
  472. #row2a .bx3 {
  473. margin-left:555px;
  474. }
  475.  
  476. #row2a .img_350width_350height {
  477. height:350px;
  478. width:350px;
  479. margin-top:275px;
  480. margin-left:5px;
  481. position:absolute;
  482. background-color:999999;
  483. overflow:hidden;
  484. }
  485.  
  486. #row2a .bottomlines {
  487. position:absolute;
  488. margin-left:5px;
  489. margin-top:625px;
  490. height:125px;
  491. width:825px;
  492. overflow:hidden;
  493. }
  494.  
  495. #row2a .h1, #row2a h1, #row2a .h2, #row2a h2 {
  496. display:block;
  497. text-transform:uppercase;
  498. letter-spacing:0pt;
  499. font-size:40px;
  500. line-height:60px;
  501. height:60px;
  502. display:block;
  503. text-align:right;
  504. padding-right:15px;
  505. font-family: 'Raleway', sans-serif;
  506. background-color:000000;
  507. color:ffffff;
  508. }
  509.  
  510. #row2a .h2, #row2a h2 {
  511. font-size:43px;
  512. background-color:transparent;
  513. color:000000;
  514. }
  515.  
  516. #row2a .toplines {
  517. position:absolute;
  518. margin-top:275px;
  519. margin-left:360px;
  520. width:465px;
  521. height:50px;
  522. overflow:hidden;
  523. }
  524.  
  525. #row2a .h3, #row2a h3 {
  526. border:1px dashed #7a7a7a;
  527. display:block;
  528. padding-left:15px;
  529. line-height:50px;
  530. text-transform:uppercase;
  531. height:48px;
  532. font-size:44px;
  533. letter-spacing:4pt;
  534. text-align:center;
  535. color:000000;
  536. font-family: 'Abel', sans-serif;
  537. }
  538.  
  539. #row2a .bx4 {
  540. border-left:5px solid #000000;
  541. position:absolute;
  542. margin-top:335px;
  543. margin-left:360px;
  544. width:460px;
  545. height:290px;
  546. overflow:hidden;
  547. }
  548.  
  549. .bx4 .qts {
  550. position:absolute;
  551. margin-top:0px;
  552. margin-left:0px;
  553. width:255px;
  554. height:135px;
  555. overflow:hidden;
  556. }
  557.  
  558. #row2a .h4, #row2a h4 {
  559. color:660000;
  560. height:100px;
  561. line-height:90%;
  562. font-size:25pt;
  563. overflow:hidden;
  564. display:block;
  565. text-transform:none;
  566. font-family: 'Shadows Into Light', cursive;
  567. text-align:left;
  568. padding:2px 0px 0px 5px;
  569. letter-spacing:2pt;
  570. }
  571.  
  572. #row2a .h5, #row2a h5 {
  573. color:2e2e2e;
  574. height:35px;
  575. font-size:34px;
  576. line-height:35px;
  577. overflow:hidden;
  578. display:block;
  579. text-transform:uppercase;
  580. font-family: 'Roboto Condensed', sans-serif;
  581. text-align:right;
  582. padding-right:5px;
  583. }
  584.  
  585. #row2a .about {
  586. position:absolute;
  587. margin-top:140px;
  588. margin-left:0px;
  589. width:245px;
  590. height:135px;
  591. overflow:auto;
  592. padding:5px;
  593. text-align:justify;
  594. }
  595.  
  596. #row2a .img_200width_290height {
  597. margin-top:0px;
  598. margin-left:260px;
  599. width:200px;
  600. height:290px;
  601. background-color:green;
  602. overflow:hidden;
  603. }
  604.  
  605.  
  606.  
  607.  
  608. /* BREAKER2 */
  609.  
  610. #breaker2 {
  611. margin-left:-550px;
  612. margin-top:1735px;
  613. width:1100px;
  614. height:255px;
  615. background-color:white;
  616. }
  617.  
  618. #breaker2 .img1 {
  619. overflow:hidden;
  620. margin-top:0px;
  621. margin-left:840px;
  622. width:245px;
  623. height:245px;
  624. position:absolute;
  625. background-color:000000;
  626. -webkit-box-shadow: 5px 5px 8px 0px rgba(50, 50, 50, 0.9);
  627. -moz-box-shadow: 5px 5px 8px 0px rgba(50, 50, 50, 0.9);
  628. box-shadow: 5px 5px 8px 0px rgba(50, 50, 50, 0.9);
  629. }
  630.  
  631. #breaker2 .liner1, #breaker2 .liner2 {
  632. display:block;
  633. font-size:0px;
  634. height:20px;
  635. background-color:000000;
  636. position:absolute;
  637. }
  638.  
  639. #breaker2 .liner1 {
  640. margin-top:100px;
  641. width:1100px;
  642. }
  643.  
  644. #breaker2 .liner2 {
  645. margin-top:135px;
  646. width:950px;
  647. margin-left:150px;
  648. }
  649.  
  650. #breaker2 .qts {
  651. width:830px;
  652. margin-left:0px;
  653. margin-top:165px;
  654. position:absolute;
  655. overflow:hidden;
  656. }
  657.  
  658. #breaker2 .h1, #breaker2 h1 {
  659. font-size:80px;
  660. line-height:80px;
  661. letter-spacing:2pt;
  662. display:block;
  663. text-align:right;
  664. padding:0px 10px 10px 0px;
  665. margin:0px;
  666. color:171717;
  667. font-family: 'Yanone Kaffeesatz', sans-serif;
  668. }
  669.  
  670.  
  671.  
  672. /* ROW3 */
  673.  
  674. #row3 {
  675. width:1100px;
  676. height:510px;
  677. margin-left:-550px;
  678. margin-top:2000px;
  679. }
  680.  
  681. #row3 .bx1, #row3 .bx2, #row3 .bx3, #row3 .bx4 {
  682. width:245px;
  683. height:245px;
  684. position:absolute;
  685. background-color:000000;
  686. background-repeat:no-repeat;
  687. }
  688.  
  689. #row3 .bx1 {
  690. background-position:top left;
  691. background-repeat:no-repeat;
  692. }
  693.  
  694. #row3 .bx2 {
  695. background-position:bottom left;
  696. background-repeat:no-repeat;
  697. }
  698.  
  699. #row3 .bx3 {
  700. background-position:top right;
  701. background-repeat:no-repeat;
  702. }
  703.  
  704. #row3 .bx4 {
  705. background-position:bottom right;
  706. background-repeat:no-repeat;
  707. }
  708.  
  709. #row3 .bx1, #row3 .bx3 {margin-top:5px;}
  710. #row3 .bx3, #row3 .bx4 {margin-left:260px;}
  711. #row3 .bx1, #row3 .bx2 {margin-left:5px;}
  712. #row3 .bx2, #row3 .bx4 {margin-top:260px;}
  713. .bx4 .wrd1, .bx4 .wrd2 {position:absolute;}
  714.  
  715. .bx4 .wrd1 {
  716. margin-top:0px;
  717. margin-left:0px;
  718. background: rgba(235, 220, 209, 0.5);
  719. }
  720.  
  721. .bx4 .wrd2 {
  722. margin-top:90px;
  723. margin-left:205px;
  724. }
  725.  
  726. #row3 .h1, #row3 h1 {
  727. text-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
  728. text-transform:uppercase;
  729. letter-spacing:-2pt;
  730. width:245px;
  731. height:245px;
  732. line-height:245px;
  733. font-size:140px;
  734. overflow:hidden;
  735. color:white;
  736. display:block;
  737. font-family: 'Oswald', sans-serif;
  738. }
  739.  
  740. #row3 .h2, #row3 h2 {
  741. text-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
  742. text-transform:uppercase;
  743. letter-spacing:3pt;
  744. width:245px;
  745. height:245px;
  746. line-height:15px;
  747. font-size:15px;
  748. overflow:hidden;
  749. color:white;
  750. font-family: 'Oswald', sans-serif;
  751. }
  752.  
  753. .vbox {
  754. width: 245px;
  755. height: 245px;
  756. float: left;
  757. overflow: hidden;
  758. position: relative;
  759. text-align: center;
  760. }
  761.  
  762. .vbox .mask, .vbox .content {
  763. width: 245px;
  764. height: 245px;
  765. position: absolute;
  766. overflow: hidden;
  767. top: 0;
  768. left: 0
  769. }
  770.  
  771. .vbox-inner .mask {
  772. background: rgba(255, 255, 255, 0.8);
  773. width: 300px;
  774. padding:60px;
  775. height: 300px;
  776. opacity: 0;
  777. transform: translate(265px, 145px) rotate(45deg);
  778. transition: all 0.2s ease-in-out;
  779. }
  780.  
  781. .vbox-inner .about {
  782. text-align: justify;
  783. position: relative;
  784. background-color: transparent;
  785. margin: 20px;
  786. padding:5px;
  787. height:195px;
  788. width:195px;
  789. overflow:auto;
  790. transform: translate(250px, -250px);
  791. transition: all 0.2s ease-in-out;
  792. }
  793.  
  794. .vbox-inner:hover .mask {
  795. opacity:1;
  796. transform: translate(-80px, -125px) rotate(45deg);
  797. }
  798.  
  799. .vbox-inner:hover .about {
  800. transform: translate(0px,0px);
  801. transition-delay: 0.3s;
  802. }
  803.  
  804. #row3 .info {
  805. position:absolute;
  806. margin-top:5px;
  807. margin-left:515px;
  808. width:480px;
  809. height:490px;
  810. padding:5px;
  811. overflow:auto;
  812. }
  813.  
  814. .info, .info p {
  815. font-family: 'Roboto Condensed', sans-serif;
  816. font-size:10pt;
  817. line-height:100%;
  818. }
  819.  
  820. .info .h4, .info h4 {
  821. display:block;
  822. font-size: 80px;
  823. height:90px;
  824. line-height:90px;
  825. width:90px;
  826. padding:5px;
  827. margin:0px 2px 0px 0px;
  828. background-color:0a0a0a;
  829. color:ffffff;
  830. text-align:center;
  831. border:5px dashed #ffffff;
  832. }
  833.  
  834. #row3 .frame {
  835. position:absolute;
  836. margin-top:5px;
  837. margin-left:1015px;
  838. width:76px;
  839. height:496px;
  840. border:2px solid #d3d3d3;
  841. background-color:000000;
  842. -webkit-box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
  843. -moz-box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
  844. box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
  845. }
  846.  
  847. #row3 em {
  848. font-family:brush script mt;
  849. font-size:20pt;
  850. padding:10px 0px;
  851. text-transform:none;
  852. display:block;
  853. text-align:center;
  854. line-height:110%;
  855. color:4f4f4f;
  856. }
  857.  
  858.  
  859.  
  860. /* ROW4 */
  861.  
  862. #row4 {
  863. height:700px;
  864. width:1100px;
  865. margin-left:-550px;
  866. margin-top:2520px;
  867. border-top:35px dashed #000000;
  868. border-bottom:50px solid #000000;
  869. }
  870.  
  871.  
  872. #row4 .circle {
  873. position:absolute;
  874. margin-top:75px;
  875. margin-left:55px;
  876. height:500px;
  877. width:500px;
  878. background-color:000000;
  879. -webkit-border-radius: 360px;
  880. -moz-border-radius: 360px;
  881. border-radius: 360px;
  882. -webkit-box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
  883. -moz-box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
  884. box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
  885. }
  886.  
  887.  
  888. .ribbonR {
  889. position:absolute;
  890. margin-top:275px;
  891. margin-left:485px;
  892. -webkit-box-sizing: content-box;
  893. -moz-box-sizing: content-box;
  894. box-sizing: content-box;
  895. width: 0;
  896. height: 100px;
  897. border: 50px solid #000000;
  898. border-top: 0 solid;
  899. border-bottom: 35px solid rgba(0,0,0,0);
  900. font: normal 100%/normal Arial, Helvetica, sans-serif;
  901. color: rgba(0,0,0,1);
  902. -o-text-overflow: clip;
  903. text-overflow: clip;
  904. background-color:transparent;
  905. -webkit-transform: rotateZ(-90deg) ;
  906. transform: rotateZ(-90deg) ;
  907. }
  908.  
  909. .ribbonL {
  910. position:absolute;
  911. margin-top:275px;
  912. margin-left:25px;
  913. -webkit-box-sizing: content-box;
  914. -moz-box-sizing: content-box;
  915. box-sizing: content-box;
  916. width: 0;
  917. height: 100px;
  918. border: 50px solid #000000;
  919. border-top: 0 solid;
  920. border-bottom: 35px solid rgba(0,0,0,0);
  921. font: normal 100%/normal Arial, Helvetica, sans-serif;
  922. color: rgba(0,0,0,1);
  923. -o-text-overflow: clip;
  924. text-overflow: clip;
  925. background-color:transparent;
  926. -webkit-transform: rotateZ(450deg) ;
  927. transform: rotateZ(450deg) ;
  928. }
  929.  
  930.  
  931. #row4 .title{
  932. margin-left:610px;
  933. margin-top:40px;
  934. position:absolute;
  935. width:255px;
  936. height:600px;
  937. font-size:135px;
  938. letter-spacing:-10px;
  939. line-height:110%;
  940. color:000000;
  941. text-transform:uppercase;
  942. display:block;
  943. text-align:right;
  944. font-family: 'Roboto Condensed', sans-serif;
  945. }
  946.  
  947. .exc {
  948. padding-top:25px;
  949. position:absolute;
  950. margin-left:870px;
  951. margin-top:50px;
  952. font-family: 'Alfa Slab One', cursive;
  953. font-size:700px;
  954. height:580px;
  955. line-height:580px;
  956. width:225px;
  957. text-align:center;
  958. display:block;
  959. padding-right:15px;
  960. color:000000;
  961. }
  962.  
  963. .peeps {
  964. position:absolute;
  965. margin-left:0px;
  966. margin-top:75px;
  967. height:700px;
  968. width:1100px;
  969. color:000000;
  970. background-color:transparent;
  971. text-align:justify;
  972. }
  973.  
  974. .peeps p {text-align:justify;}
  975.  
  976. .inst {
  977. color:ffffff;
  978. width:160px;
  979. display:block;
  980. height:auto;
  981. opacity:0;
  982. overflow:hidden;
  983. margin-left:1200px;
  984. margin-top:-200px;
  985. position:absolute;
  986. }
  987.  
  988. .peeps:hover .inst {
  989. opacity:1;
  990. margin-top:240px;
  991. margin-left:910px;
  992. transition:All 1s ease-in-out 3s;
  993. -webkit-transition:All 1s ease-in-out 3s;
  994. -moz-transition:All 1s ease-in-out 3s;
  995. -o-transition:All 1s ease-in-out 3s;
  996. }
  997.  
  998.  
  999. .pp1, .pp2, .pp3, .pp4, .pp5, .pp6, .pp7, .pp8, .pp9, .pp10, .pp11, .pp12, .pp1i, .pp2i, .pp3i, .pp4i, .pp5i, .pp6i, .pp7i, .pp8i, .pp9i, .pp10i, .pp11i, .pp12i {
  1000. position:absolute;
  1001. height:50px;
  1002. width:50px;
  1003. z-index:1;
  1004. font-size:0pt;
  1005. color:transparent;
  1006. overflow:hidden;
  1007. }
  1008.  
  1009. .pp1, .pp2, .pp3, .pp1i, .pp2i, .pp3i {margin-top:0px; }
  1010. .pp4, .pp5, .pp6, .pp4i, .pp5i, .pp6i {margin-top:55px; }
  1011. .pp7, .pp8, .pp9, .pp7i, .pp8i, .pp9i {margin-top:110px; }
  1012. .pp10, .pp11, .pp12, .pp10i, .pp11i, .pp12i {margin-top:165px; }
  1013.  
  1014. .pp1, .pp4, .pp7, .pp10, .pp1i, .pp4i, .pp7i, .pp10i {margin-left:910px; }
  1015. .pp2, .pp5, .pp8, .pp11, .pp2i, .pp5i, .pp8i, .pp11i {margin-left:965px; }
  1016. .pp3, .pp6, .pp9, .pp12, .pp3i, .pp6i, .pp9i, .pp12i {margin-left:1020px; }
  1017.  
  1018. .pp1, .pp2, .pp3, .pp4, .pp5, .pp6, .pp7, .pp8, .pp9, .pp10, .pp11, .pp12 {
  1019. transition:All 1s ease-in-out 3s;
  1020. -webkit-transition:All 1s ease-in-out 3s;
  1021. -moz-transition:All 1s ease-in-out 3s;
  1022. -o-transition:All 1s ease-in-out 3s;
  1023. opacity:0;
  1024. border:50px dashed #000000;
  1025. }
  1026.  
  1027.  
  1028. .pp1:hover, .pp2:hover, .pp3:hover,.pp4:hover, .pp5:hover, .pp6:hover, .pp7:hover, .pp8:hover, .pp9:hover, .pp10:hover, .pp11:hover, .pp12:hover {
  1029. position:absolute;
  1030. margin-top:0px;
  1031. margin-left:55px;
  1032. background: rgba(255, 255, 255, 0.9);
  1033. -webkit-border-radius: 360px;
  1034. -moz-border-radius: 360px;
  1035. border-radius: 360px;
  1036. transition:All 0.6s ease-in-out 1s;
  1037. -webkit-transition:All 0.6s ease-in-out 1s;
  1038. -moz-transition:All 0.6s ease-in-out 1s;
  1039. -o-transition:All 0.6s ease-in-out 1s;
  1040. z-index:1001;
  1041. opacity:1;
  1042. width:400px;
  1043. height:400px;
  1044. }
  1045.  
  1046. .x12 img {
  1047. float:left;
  1048. width:100px;
  1049. height:100px;
  1050. overflow:hidden;
  1051. border:4px double #ffffff;
  1052. margin:0px 0px 2px 2px;
  1053. background-color:000000;
  1054. -moz-border-radius-topleft: 90px;
  1055. -webkit-border-top-left-radius: 90px;
  1056. border-top-left-radius: 90px;
  1057. -moz-border-radius-topright: 5px;
  1058. -webkit-border-top-right-radius: 5px;
  1059. border-top-right-radius: 5px;
  1060. -moz-border-radius-bottomright: 5px;
  1061. -webkit-border-bottom-right-radius: 5px;
  1062. border-bottom-right-radius: 5px;
  1063. -moz-border-radius-bottomleft: 5px;
  1064. -webkit-border-bottom-left-radius: 5px;
  1065. border-bottom-left-radius: 5px;
  1066. }
  1067.  
  1068. .peeps .x12 {
  1069. width:270px;
  1070. height:270px;
  1071. margin:60px;
  1072. padding:5px;
  1073. background-color:transparent;
  1074. overflow:auto;
  1075. }
  1076.  
  1077.  
  1078.  
  1079. /* Hide Codes */
  1080.  
  1081. .vicarious{ Hide Codes }
  1082. .profileInfo, .userProfileURL, .friendsComments, .blurbs, .blacktext12, .friendSpace, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userProfiledetail, .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .blacktext12,
  1083. .navigationBar, tr#groups, .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
  1084. table table table table td {width:0px;}
  1085. .contactTable td, table table td.text table td,table table table table table td {width:auto;}
  1086. div div select, div div form {display:none !important;}
  1087. select { visibility:hidden!important; WIDTH:0px!important;}
  1088. table div {display:none;}table table div {display:block;}
  1089. .clearfix {display:none !important;position:absolute!important;}
  1090. .navigationBar { display: none; }
  1091. div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px
  1092.  
  1093. !important;}
  1094. .profileInfo tr tr td { visibility:hidden; }
  1095. .profileInfo td.text { visibility:visible; }
  1096. .vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
  1097. </style>
  1098.  
  1099. </td></tr></table><table style="display:none"><tr><td>
  1100.  
  1101.  
  1102.  
  1103.  
  1104.  
  1105.  
  1106. -----------------------------LIKE TO MEET-------------------------
  1107.  
  1108. <font class="cite">LEAVE THIS BLANK</font>
  1109.  
  1110. -----------------------------INTERESTS-----------------------------
  1111.  
  1112.  
  1113. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
  1114.  
  1115.  
  1116. <div id="links">
  1117.  
  1118. <a href="/logincomplete.php">Home</a>
  1119. <a class="mix5" href="/invite_friend.php?friend_id=xxxxxx">Add</a>
  1120. <a class="mix4" href="/send_message.php?member_id=xxxxxx">Message</a>
  1121. <a class="mix3" href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
  1122. <a class="mix2" href="/gallery.php?member_id=xxxxxx">Photos</a>
  1123. <a class="mix1" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
  1124.  
  1125.  
  1126. </div>
  1127.  
  1128.  
  1129. <div id="back"></div>
  1130.  
  1131.  
  1132. <div id="row1a" style="background-image:url(http://i59.tinypic.com/28ls8zt.jpg);">
  1133.  
  1134. <font class="cite">
  1135. The image of Amber (above) is 825px width by 750px height.
  1136. If you are replacing the photo of AH, do so in the background-image:url () slot above. The second image (below) is an overlay that makes parts of the image appear to be visible through rectangular 'openings' or 'boxes'. If you decide you do not want a peek-a-boo overlay, just remove the <img src="...jpg"> below.
  1137.  
  1138. </font>
  1139.  
  1140. <img src="http://i59.tinypic.com/izus88.jpg">
  1141.  
  1142.  
  1143.  
  1144. </div>
  1145.  
  1146.  
  1147. <div id="name">
  1148. <font class="h1">FirstName</font>
  1149. <font class="h2">LastName</font>
  1150.  
  1151.  
  1152. </div><div id="row1b"><div class="title">
  1153.  
  1154. <font class="h1">It's the same sound, same sting</font>
  1155.  
  1156. <font class="h2">The same collapse</font>
  1157.  
  1158. <font class="h3">of everything</font>
  1159.  
  1160. </div>
  1161.  
  1162.  
  1163.  
  1164. <font class="cite">
  1165. The image below is 265px width by 265px height.
  1166. </font>
  1167.  
  1168.  
  1169. <img src="http://i57.tinypic.com/30k61sm.jpg">
  1170.  
  1171. <div class="about">
  1172.  
  1173. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
  1174.  
  1175. <font class="blockquote">
  1176. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1177. </font>
  1178.  
  1179.  
  1180. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
  1181.  
  1182. <font class="strong">Strong</font>
  1183. <font class="u">Underline</font>
  1184. <font class="strike">Strike</font>
  1185. <b>Bold</b>
  1186. <i>Italic</i>
  1187.  
  1188. </div>
  1189.  
  1190.  
  1191. <div class="music">
  1192. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
  1193. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  1194. <param name="bgcolor" value="#f4f4f4" />
  1195. <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/lcabhz6ot9/ldrottr.mp3&autoplay=1&bgcolor=f4f4f4&loadingcolor=f4f4f4&buttoncolor=000000&slidercolor=000000" />
  1196. </object>
  1197.  
  1198. </div></div>
  1199. -----------------------------MUSIC---------------------------------
  1200.  
  1201. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
  1202.  
  1203. <div id="breaker1"><div class="liner1"></div>
  1204.  
  1205. <font class="h1">Between the Devil and the deep sea,
  1206. you'll find me dreaming evil endlessly, aroused by
  1207. life's fantasies.</font>
  1208.  
  1209. <div class="liner2"></div></div>
  1210.  
  1211. -----------------------------MOVIES--------------------------------
  1212.  
  1213. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
  1214.  
  1215. <font class="cite">
  1216. For the pics in row2a, note the div name before the link. IE: img_350width_350height means the image that follows is 350px width by 350px height.
  1217. </font>
  1218.  
  1219.  
  1220. <div id="row2a"><div class="bx1">
  1221.  
  1222. <p>This is text box 1 of 3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1223.  
  1224. </div><div class="bx2">
  1225.  
  1226. <p>This is text box 2 of 3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1227.  
  1228. </div><div class="bx3">
  1229.  
  1230. <p>This is text box 3 of 3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1231.  
  1232. </div>
  1233. <div class="img_350width_350height">
  1234. <img src="http://i62.tinypic.com/35i6anq.jpg">
  1235. </div>
  1236.  
  1237. <div class="bottomlines">
  1238. <font class="h1">I'm rejecting my reflection</font>
  1239. <font class="h2">'Cause I hate the way it judges me</font>
  1240. </div>
  1241.  
  1242. <div class="toplines">
  1243. <font class="h3">Perfectly Flawed</font>
  1244. </div>
  1245.  
  1246. <div class="bx4">
  1247. <div class="about">
  1248.  
  1249. <p>This is the small text box under Perfectly Flawed. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1250.  
  1251.  
  1252. </div>
  1253.  
  1254.  
  1255. <div class="qts">
  1256. <font class="h4">A disguise of self-deception hides my secrets</font>
  1257. <font class="h5">perfectly</font>
  1258. </div>
  1259.  
  1260. <div class="img_200width_290height">
  1261. <img src="http://i57.tinypic.com/jug4fk.jpg">
  1262.  
  1263.  
  1264. </div></div></div>
  1265.  
  1266. <font class="cite">
  1267. For the below pic for row2b, the image is 275px width by 750px height.
  1268. </font>
  1269.  
  1270.  
  1271. <div id="row2b">
  1272.  
  1273. <img src="http://i60.tinypic.com/6rkcw9.jpg">
  1274.  
  1275. </div>
  1276.  
  1277. -----------------------------TELEVISION--------------------------------
  1278.  
  1279. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
  1280.  
  1281. <font class="cite">
  1282. The image in this section (Johnny and Amber) is 245px width by 245px height. Replace it where you see background-image:url (LINK).
  1283. </font>
  1284.  
  1285. <div id="breaker2"><div class="liner1"></div><div class="liner2"></div>
  1286.  
  1287. <div class="img1" style="background-image:url(http://i61.tinypic.com/2eduqae.jpg);">
  1288.  
  1289. <div class="vbox vbox-inner"><div class="mask"></div><div class="content"><div class="about">
  1290.  
  1291. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1292.  
  1293.  
  1294. </div></div></div></div><div class="qts">
  1295.  
  1296. <font class="h1">I've got you under my skin</font>
  1297.  
  1298. </div></div>
  1299.  
  1300. -----------------------------BOOKS--------------------------------
  1301.  
  1302. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
  1303.  
  1304.  
  1305. <font class="cite">
  1306.  
  1307. INSTRUCTIONS:
  1308.  
  1309. The div class "bx1, bx2, bx3 and bx4" in this section each have a background-image:url (http://i62.tinypic.com/2nqsc5e.jpg) listed. You will note that they are ALL the same picture link. If you paste the link to your browser window, you will see that it is the full photo of Johnny Depp (500px width by 500px height) without any dividers (lines) running horizontal or vertical. The layout coding forces 'breaks' into this image so that it appears to be cut into 4 pieces. Once you have your 500x500 image uploaded, simply paste that ONE link into EACH of the 4 fields and the layout coding will do the work for you.
  1310.  
  1311. If you instead want to use 4 SEPARATE images vice one, just make sure that all the images are exactly 245px width by 245px height.
  1312.  
  1313. </font>
  1314.  
  1315.  
  1316. <div id="row3">
  1317.  
  1318. <div class="bx1" style="background-image:url(http://i62.tinypic.com/2nqsc5e.jpg);">
  1319.  
  1320. <div class="vbox vbox-inner"><div class="mask"></div><div class="content"><div class="about">
  1321.  
  1322. <p>THIS IS BOX ONE. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1323.  
  1324. </div></div></div></div>
  1325.  
  1326.  
  1327.  
  1328.  
  1329. <div class="bx2" style="background-image:url(http://i62.tinypic.com/2nqsc5e.jpg);">
  1330.  
  1331. <div class="vbox vbox-inner"><div class="mask"></div><div class="content"><div class="about">
  1332.  
  1333. <p>THIS IS BOX TWO. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1334.  
  1335.  
  1336. </div></div></div></div>
  1337.  
  1338.  
  1339.  
  1340. <div class="bx3" style="background-image:url(http://i62.tinypic.com/2nqsc5e.jpg);">
  1341.  
  1342. <div class="vbox vbox-inner"><div class="mask"></div><div class="content"><div class="about">
  1343.  
  1344. <p>THIS IS BOX THREE. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1345.  
  1346.  
  1347. </div></div></div></div>
  1348.  
  1349.  
  1350.  
  1351. <div class="bx4" style="background-image:url(http://i62.tinypic.com/2nqsc5e.jpg);">
  1352. <div class="wrd1">
  1353. <font class="h1">ONE</FONT>
  1354. </div><div class="wrd2">
  1355. <font class="h2">the</FONT>
  1356. </div></div>
  1357.  
  1358.  
  1359.  
  1360. <div class="info">
  1361.  
  1362. <p><font class="h4" style="float:left;">S</font>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1363.  
  1364.  
  1365. <BR>
  1366. <em>
  1367. His fingers are Caesar slowly conquering me...
  1368. <BR>
  1369. We move like Buddhas twisted in a silent scream
  1370. </em>
  1371.  
  1372. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  1373.  
  1374.  
  1375. </div><div class="frame"></div></div>
  1376.  
  1377.  
  1378. -----------------------------HEROES--------------------------------
  1379.  
  1380.  
  1381. </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
  1382.  
  1383.  
  1384. <div id="row4"><div class="ribbonR"></div><div class="ribbonL"></div>
  1385.  
  1386. <font class="cite">
  1387. The 'circle' div image (Amber in black) is 500px width by 500px height.
  1388. </font>
  1389.  
  1390. <div class="circle" style="background-image:url(http://i62.tinypic.com/2e5i4hi.jpg);"></div>
  1391.  
  1392. <div class="title">They can get it</div>
  1393. <div class="exc">!</div>
  1394.  
  1395. <div class="peeps">
  1396.  
  1397. <div class="inst">⇐ To keep a connection box open, hover over the expanded area.</div>
  1398.  
  1399. <div class="pp1i" style="background-image:url(http://i62.tinypic.com/34r67t5.jpg);"></div>
  1400. <div class="pp1"><div class="x12">
  1401. <P><a href="/#"><img src="http://i60.tinypic.com/2d6qnnl.jpg"></a>
  1402.  
  1403. This is box1. The background-image:url(LINK) represents the small photo (50px width by 50px height) overlayed on top of the exclamation point. The img src"link" at the beginning of this paragraph represents the image (100px width by 100px height) that floats to the left of the paragraph. These dimensions are the same for all 12 connection sections.
  1404.  
  1405. <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
  1406.  
  1407. </div></div>
  1408.  
  1409.  
  1410.  
  1411. <div class="pp2i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp2"><div class="x12">
  1412.  
  1413. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1414.  
  1415. This is box2. Your text here.
  1416.  
  1417. </div></div>
  1418.  
  1419.  
  1420.  
  1421. <div class="pp3i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp3"><div class="x12">
  1422.  
  1423. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1424.  
  1425. This is box3. Your text here.
  1426.  
  1427. </div></div>
  1428.  
  1429.  
  1430.  
  1431. <div class="pp4i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp4"><div class="x12">
  1432.  
  1433. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1434.  
  1435. This is box4. Your text here.
  1436.  
  1437. </div></div>
  1438.  
  1439.  
  1440.  
  1441. <div class="pp5i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp5"><div class="x12">
  1442.  
  1443. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1444.  
  1445. This is box5. Your text here.
  1446.  
  1447. </div></div>
  1448.  
  1449.  
  1450.  
  1451. <div class="pp6i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp6"><div class="x12">
  1452.  
  1453. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1454.  
  1455. This is box6. Your text here.
  1456.  
  1457. </div></div>
  1458.  
  1459.  
  1460.  
  1461. <div class="pp7i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp7"><div class="x12">
  1462.  
  1463. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1464.  
  1465. This is box7. Your text here.
  1466.  
  1467. </div></div>
  1468.  
  1469.  
  1470.  
  1471. <div class="pp8i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp8"><div class="x12">
  1472.  
  1473. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1474.  
  1475. This is box8. Your text here.
  1476.  
  1477. </div></div>
  1478.  
  1479.  
  1480.  
  1481. <div class="pp9i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp9"><div class="x12">
  1482.  
  1483. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1484.  
  1485. This is box9. Your text here.
  1486.  
  1487. </div></div>
  1488.  
  1489.  
  1490.  
  1491. <div class="pp10i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp10"><div class="x12">
  1492.  
  1493. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1494.  
  1495. This is box10. Your text here.
  1496.  
  1497. </div></div>
  1498.  
  1499.  
  1500.  
  1501. <div class="pp11i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp11"><div class="x12">
  1502.  
  1503. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1504.  
  1505. This is box11. Your text here.
  1506.  
  1507. </div></div>
  1508.  
  1509.  
  1510.  
  1511. <div class="pp12i" style="background-image:url(http://i58.tinypic.com/29px1fo.jpg);"></div><div class="pp12"><div class="x12">
  1512.  
  1513. <P><a href="/#"><img src="http://i60.tinypic.com/vctdtv.jpg"></a>
  1514.  
  1515. This is box12. Your text here.
  1516.  
  1517. </div></div>
  1518.  
  1519.  
  1520.  
  1521. </div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement