API tools faq
paste
mebuckner

WLayout

mebuckner
Jan 30th, 2020
255
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.42 KB | None | 0 0
raw download clone embed print report
  1. <!-- About me -->
  2.  
  3. <style type="text/css">
  4. @import url('https://fonts.googleapis.com/css?family=Abel');
  5.  
  6.  
  7. body {
  8. background-color:#232426;
  9. background-repeat:no-repeat;
  10. background-position:fixed;
  11. margin: 0;
  12. overflow:auto;
  13. }
  14.  
  15.  
  16. .container {
  17. width:805px;
  18. height:400px;
  19. position:absolute;
  20. top:0;
  21. bottom:0;
  22. left:0;
  23. right:0;
  24. margin:auto;
  25. color:#fff;
  26. font-family: 'Abel', sans-serif;
  27. z-index:4;
  28. }
  29.  
  30. .linksContainer{
  31. display:inline-block;
  32. width:390px;
  33. margin-left:10px;
  34. height:400px;
  35. vertical-align:top;
  36. }
  37.  
  38. .mainImage{
  39. display:inline-block;
  40. }
  41.  
  42. a.findyourway,  a.findyourway:link,  a.findyourway:active,  a.findyourway:visited  {
  43.   background-color: #698792;
  44.   color: white;
  45.   padding: 27px 25px;
  46.   text-align: center;
  47.   text-decoration: none;
  48.   text-transform:lowercase;
  49.   font-family: 'Spectral SC', serif;
  50.   text-align:center;
  51.   font-size:20pt;
  52.   display:block;
  53. }    
  54.  
  55. a.findyourway:hover {
  56. text-decoration:none;
  57. background-color:#fff;
  58. color:#698792;
  59. }
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68.  
  69. a.navModal,  a.navModal:link,  a.navModal:active,  a.navModal:visited  {
  70.   background-color: #698792;
  71.   color: white;
  72.   padding: 27px 25px;
  73.   text-align: center;
  74.   text-decoration: none;
  75.   text-transform:lowercase;
  76.   font-family: 'Spectral SC', serif;
  77.   text-align:center;
  78.   font-size:15pt;
  79.   display:block;
  80. }    
  81.  
  82. a.navModal:hover {
  83. text-decoration:none;
  84. background-color:#fff;
  85. color:#698792;
  86. }
  87.  
  88. .modal-window {
  89.   position: fixed;
  90.   background-color: rgba(200, 200, 200, 0.75);
  91.   top: 0;
  92.   right: 0;
  93.   bottom: 0;
  94.   left: 0;
  95.   z-index: 999;
  96.   opacity: 0;
  97.   pointer-events: none;
  98.   -webkit-transition: all 0.3s;
  99.   -moz-transition: all 0.3s;
  100.   transition: all 0.3s;
  101. }
  102.  
  103. .modal-window:target {
  104.   opacity: 1;
  105.   pointer-events: auto;
  106. }
  107.  
  108. .modal-window>div {
  109.   width: 600px;
  110.   height:500px;
  111.   position: relative;
  112.   margin: 10% auto;
  113.   padding: 2rem;
  114.   background: #fff;
  115.   color: #444;
  116. }
  117.  
  118. .modal-window header {
  119.   font-weight: bold;
  120. }
  121.  
  122. .modal-close {
  123.   color: #aaa;
  124.   line-height: 50px;
  125.   font-size: 80%;
  126.   position: absolute;
  127.   right: 0;
  128.   text-align: center;
  129.   top: 0;
  130.   width: 70px;
  131.   text-decoration: none;
  132. }
  133.  
  134. .modal-close:hover {
  135.   color: #000;
  136. }
  137.  
  138. .modal-window h1 {
  139.  font-family: 'Spectral SC', serif;
  140.     font-size: 25pt;
  141.     color: #698792;
  142.     text-align: center;
  143.     display: block;
  144.     margin: 0;
  145.     line-height: 34px;
  146.     text-align: center;
  147.     text-transform:uppercase;
  148. }
  149.  
  150.  
  151. .modal-window h2 {
  152.  font-family: 'Spectral SC', serif;
  153.     font-size: 15pt;
  154.     color: #232426;
  155.     text-align: center;
  156.     display: block;
  157.     margin: 0;
  158.     line-height: 20px;
  159.     vertical-align:middle;
  160.     text-align: center;
  161.     text-transform:uppercase;
  162. }
  163.  
  164. .paragraphStuff {
  165.   color: black;
  166.   font-size: 12px;
  167.   position:absolute;
  168.   top:0;
  169.   bottom:0;
  170.   left:0;
  171.   right:0;
  172.   margin:auto;
  173.   width:400px;
  174.   height:400px;
  175.   text-align: justify;
  176.   overflow:auto;
  177.   font-family: 'Spectral SC', serif;
  178. }
  179.  
  180. .ownerBlock{
  181.   width:185px;
  182.   height:185px;
  183.   overflow:auto;
  184.   display:inline-block;
  185. }
  186.  
  187.  
  188. .contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12, .btext, .redtext, .redbtext {display:none;height:0px;!important;visibility:hidden} td td td td {border:0px;width:0px;text-align:left;} table, td, tr {padding:0px;width:;background-color:transparent} table table table {padding:1px;height:.01%;width:100%;} table table,table table table table,table,tr,td {height:0px;!important;border:0px;!important} a.text, table div font a, .navbar font, tr td font {visibility:hidden;display:none;height:0px;!important;} #footerWarpper{display: none;} table table table table,table table table table td.text, td.text td.text table{display:none;} td.text table table{display:inline;visibility:visible;} table td table tr td.text table{visibility:hidden;} table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;} table.footer {display: none;} div table a.navbar img {display:none;} div table.navigationBar {margin-bottom:-30px;} .profileInfo {display:none;} .profileInfo td {text-align:left;} .profileInfo a img {position:relative; margin-bottom:-1px; margin-bottom:-2px; width:125px; margin-right:-6px; margin-top:4px; _margin-top:3px; display:block;} .profileInfo td td, .nametext, .msOnlineNow img {display:none;} .profileInfo td td.text {display:table-cell; _display:inline;} .profileInfo .text {font-size:7px; line-height:8px; text-transform:uppercase; font-family:small fonts;} .msOnlineNow {font-family:small fonts; letter-spacing:0px; font-size:7px; line-height:8px; padding:2px; padding-left:0px; text-transform:uppercase; font-weight:normal; display:none; text-decoration:blink; letter-spacing:2px;} .userAlbums {display:none;} div td {display:none;} </span>
  189. </style>
  190.  
  191.  
  192.  
  193.  
  194.  
  195.  
  196.  
  197.  
  198.  
  199.  
  200.  
  201.  
  202.  
  203. <!--Like to meet-->
  204. <html>
  205. <body>
  206. <div class="container">
  207. <img src="https://via.placeholder.com/400x400.png?text=this+is+where+a+picture+goes" class="mainImage">
  208. <div class="linksContainer">
  209. <a href="#storylineModal" class="findyourway">Storyline</a>
  210. <a href="#ownersModal" class="findyourway" style="margin-top:20px;">Owners</a>
  211. <a href="#contentModal" class="findyourway" style="margin-top:20px;">Content</a>
  212. <a href="#affiliatesModal" class="findyourway" style="margin-top:20px;">Affiliates</a>
  213. </div>
  214. </div>
  215.  
  216.  
  217. <!--storyline modal begins -->
  218.  
  219. <div id="storylineModal" class="modal-window">
  220.   <div>
  221.     <a href="#modal-close" title="Close" class="modal-close" style="color:#000;">x</a>
  222.         <div class="verticalScrollBoxes">
  223.             <div class="explainerHolder">
  224.                 <div class="overlay">
  225.                     <div class="paragraphStuff">
  226. <h1>About the group</h1>
  227. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit ipsum ut mi imperdiet, pulvinar efficitur dolor pulvinar. Ut ac egestas tortor. Suspendisse cursus sem eu lectus varius blandit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et lacus luctus, finibus purus eu, porttitor est. Fusce consectetur ante consectetur, sodales odio id, dictum purus. Duis arcu tortor, aliquam a quam ac, lobortis ultricies ex. Phasellus viverra orci odio, at consectetur sem egestas id. Nunc sed consectetur tortor. Ut sed efficitur dui, eu imperdiet arcu.
  228. <br><br>
  229. Aenean commodo sapien ac ipsum luctus convallis. Praesent a odio eu metus lobortis rutrum. Mauris maximus ligula orci, non blandit urna condimentum sit amet. Nam congue, lorem a sagittis aliquet, est diam facilisis enim, et commodo erat lectus et nisl. Sed dapibus ipsum ex, a volutpat tortor gravida imperdiet. Ut non lorem hendrerit libero interdum tincidunt vitae sit amet massa. Mauris in libero vel est tempus tincidunt eget vel dui. Nam aliquet tempor purus, non placerat justo. Sed id leo eget turpis sodales rutrum.
  230. <br><br>
  231. Vivamus eu metus condimentum, pretium mauris a, elementum magna. Duis id nulla at arcu maximus laoreet. Pellentesque scelerisque sem quis leo consectetur, a posuere arcu dictum. Sed ut orci at ex viverra viverra. Quisque at lobortis tellus, lobortis laoreet lacus. Nulla aliquam turpis vel imperdiet iaculis. Mauris dapibus interdum neque et commodo. In lorem lacus, aliquet non consectetur ac, mattis a ex. Cras consectetur turpis neque, ut sagittis felis rutrum sit amet. Suspendisse placerat tortor non nibh facilisis pretium.
  232. <br><br>
  233. Donec fringilla, sapien et feugiat aliquam, purus nisi finibus elit, et rutrum nulla erat et metus. Donec vitae tincidunt ante. Pellentesque et nibh auctor, tempus dolor at, blandit turpis. Fusce ac vulputate nisi. Mauris sagittis, ex egestas hendrerit dapibus, nisl arcu lobortis ex, id volutpat metus est non magna. Duis iaculis purus sit amet fringilla accumsan. Integer in nisi tincidunt, interdum ex vulputate, faucibus lectus. Aliquam egestas tellus vitae felis posuere, pharetra ornare mi ultrices. Nam ac libero mattis, dignissim ligula quis, tristique risus. Proin eget blandit mauris.
  234. <br><br>
  235. Nulla vehicula arcu ac orci maximus, in imperdiet neque iaculis. Aenean id consectetur magna. Ut lectus erat, lacinia sed erat a, lacinia interdum lectus. Nunc vulputate diam a enim elementum, id dignissim nunc auctor. Nunc ut consequat tortor, ac tincidunt eros. Donec sodales auctor nisi id ornare. In mollis arcu sem, vitae pharetra elit congue dignissim. Nam sagittis ipsum ut augue pellentesque condimentum. Vivamus ligula orci, consectetur eu ligula at, venenatis rutrum velit. Etiam bibendum egestas augue, quis blandit ipsum semper a. Aliquam varius, elit nec vehicula egestas, lacus massa sollicitudin augue, in cursus nulla erat eget lacus. Quisque vulputate velit et sodales tincidunt. Nullam vel commodo felis. Praesent pharetra, lacus sit amet ultrices tristique, nisi velit gravida lorem, in tincidunt diam augue nec quam.
  236.  
  237.                   </div>
  238.                   </div>
  239.             </div>
  240.         </div>
  241.   </div>
  242. </div>
  243.  
  244. <!--storyline modal ends-->
  245.  
  246.  
  247.  
  248.  
  249.  
  250.  
  251.  
  252.  
  253.  
  254.  
  255.  
  256.  
  257.  
  258.  
  259.  
  260.  
  261.  
  262.  
  263.  
  264.  
  265.  
  266.  
  267. <!--owners modal begins -->
  268.  
  269. <div id="ownersModal" class="modal-window">
  270.   <div style="height:620px!important; margin:5% auto!important;">
  271.     <a href="#modal-close" title="Close" class="modal-close" style="color:#000;">x</a>
  272.         <div class="verticalScrollBoxes">
  273.             <div class="explainerHolder">
  274.                 <div class="overlay">
  275.                     <div class="paragraphStuff" style="height:620px;">
  276.                      <h1>Meet the Owners</h1>
  277.                       <img src="https://via.placeholder.com/185x185.png?text=owner+1" class="mainImage">
  278.                       <div class="ownerBlock">
  279.                           <h2>Name Here</h2>
  280.                           Nulla vehicula arcu ac orci maximus, in imperdiet neque iaculis. Aenean id consectetur magna. Ut lectus erat, lacinia sed erat a, lacinia interdum lectus. Nunc vulputate diam a enim elementum, id dignissim nunc auctor. Nunc ut consequat tortor, ac tincidunt eros. Donec sodales auctor nisi id ornare. In mollis arcu sem, vitae pharetra elit congue dignissim. Nam sagittis ipsum ut augue pellentesque condimentum. Vivamus ligula orci, consectetur eu ligula at, venenatis rutrum velit. Etiam bibendum egestas augue, quis blandit ipsum semper a. Aliquam varius, elit nec vehicula egestas, lacus massa sollicitudin augue, in cursus nulla erat eget lacus. Quisque vulputate velit et sodales tincidunt. Nullam vel commodo felis. Praesent pharetra, lacus sit amet ultrices tristique, nisi velit gravida lorem, in tincidunt diam augue nec quam.
  281.                       </div>
  282. <br>
  283.                       <div class="ownerBlock">
  284.                           <h2>Name Here</h2>
  285.                          Nulla vehicula arcu ac orci maximus, in imperdiet neque iaculis. Aenean id consectetur magna. Ut lectus erat, lacinia sed erat a, lacinia interdum lectus. Nunc vulputate diam a enim elementum, id dignissim nunc auctor. Nunc ut consequat tortor, ac tincidunt eros. Donec sodales auctor nisi id ornare. In mollis arcu sem, vitae pharetra elit congue dignissim. Nam sagittis ipsum ut augue pellentesque condimentum. Vivamus ligula orci, consectetur eu ligula at, venenatis rutrum velit. Etiam bibendum egestas augue, quis blandit ipsum semper a. Aliquam varius, elit nec vehicula egestas, lacus massa sollicitudin augue, in cursus nulla erat eget lacus. Quisque vulputate velit et sodales tincidunt. Nullam vel commodo felis. Praesent pharetra, lacus sit amet ultrices tristique, nisi velit gravida lorem, in tincidunt diam augue nec quam.
  286.                       </div>
  287.                       <img src="https://via.placeholder.com/185x185.png?text=owner+2" class="mainImage">
  288. <br>
  289.  <img src="https://via.placeholder.com/185x185.png?text=owner+3" class="mainImage">
  290.                       <div class="ownerBlock">
  291.                           <h2>Name Here</h2>
  292.                           Nulla vehicula arcu ac orci maximus, in imperdiet neque iaculis. Aenean id consectetur magna. Ut lectus erat, lacinia sed erat a, lacinia interdum lectus. Nunc vulputate diam a enim elementum, id dignissim nunc auctor. Nunc ut consequat tortor, ac tincidunt eros. Donec sodales auctor nisi id ornare. In mollis arcu sem, vitae pharetra elit congue dignissim. Nam sagittis ipsum ut augue pellentesque condimentum. Vivamus ligula orci, consectetur eu ligula at, venenatis rutrum velit. Etiam bibendum egestas augue, quis blandit ipsum semper a. Aliquam varius, elit nec vehicula egestas, lacus massa sollicitudin augue, in cursus nulla erat eget lacus. Quisque vulputate velit et sodales tincidunt. Nullam vel commodo felis. Praesent pharetra, lacus sit amet ultrices tristique, nisi velit gravida lorem, in tincidunt diam augue nec quam.
  293.                       </div>
  294.                   </div>
  295.                   </div>
  296.             </div>
  297.         </div>
  298.   </div>
  299. </div>
  300.  
  301. <!--ownersmodal ends-->
  302.  
  303.  
  304.  
  305.  
  306.  
  307.  
  308.  
  309.  
  310.  
  311.  
  312.  
  313.  
  314.  
  315.  
  316.  
  317.  
  318.  
  319.  
  320.  
  321. <!--content modal begins -->
  322.  
  323. <div id="contentModal" class="modal-window">
  324.   <div>
  325.     <a href="#modal-close" title="Close" class="modal-close" style="color:#000;">x</a>
  326.         <div class="verticalScrollBoxes">
  327.             <div class="explainerHolder">
  328.                 <div class="overlay">
  329.                     <div class="paragraphStuff" style="height:420px;">
  330.                      <h1>Navigation</h1>
  331.                      <div style="width:185px; display:inline-block; vertical-align:top;">
  332.                      <a href="" class="navModal" style="margin-top:15px;">Rules</a>
  333.                      <a href="" class="navModal" style="margin-top:5px;">Message</a>
  334.                      <a href="" class="navModal" style="margin-top:5px;">Audition Form</a>
  335.                      </div>
  336.                      <div style="width:185px; display:inline-block; vertical-align:top;">
  337.                      <a href="" class="navModal" style="margin-top:15px;">Taken Info</a>
  338.                      <a href="" class="navModal" style="margin-top:5px;">Neighborhoods</a>
  339.                      </div>
  340.                      
  341.                   </div>
  342.                   </div>
  343.             </div>
  344.         </div>
  345.   </div>
  346. </div>
  347.  
  348. <!--content modal ends-->
  349.  
  350.  
  351.  
  352.  
  353.  
  354.  
  355.  
  356.  
  357.  
  358.  
  359.  
  360.  
  361.  
  362.  
  363.  
  364.  
  365. <!--affiliate modal begins -->
  366.  
  367. <div id="affiliatesModal" class="modal-window">
  368.   <div>
  369.     <a href="#modal-close" title="Close" class="modal-close" style="color:#000;">x</a>
  370.         <div class="verticalScrollBoxes">
  371.             <div class="explainerHolder">
  372.                 <div class="overlay">
  373.                     <div class="paragraphStuff" style="height:420px;">
  374.                      <h1>Affiliates</h1>
  375.                      <div style="width:185px; display:inline-block; vertical-align:top;">
  376.                      <a href="" class="navModal" style="margin-top:15px;">affiliate</a>
  377.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  378.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  379.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  380.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  381.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  382.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  383.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  384.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  385.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  386.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  387.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  388.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  389.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  390.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  391.                      </div>
  392.                      <div style="width:185px; display:inline-block; vertical-align:top;">
  393.                      <a href="" class="navModal" style="margin-top:15px;">affiliate</a>
  394.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  395.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  396.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  397.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  398.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  399.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  400.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  401.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  402.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  403.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  404.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  405.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  406.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  407.                      <a href="" class="navModal" style="margin-top:5px;">affiliate</a>
  408.                      </div>
  409.                      
  410.                   </div>
  411.                   </div>
  412.             </div>
  413.         </div>
  414.   </div>
  415. </div>
  416.  
  417. <!--affiliate modal ends-->
  418.  
  419.  
  420.  
  421.  
  422.  
  423. </body>
  424. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!