API tools faq
paste
mebuckner

Custom Order - Nola Reine - Layout

mebuckner
Aug 27th, 2020 (edited)
145
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.18 KB | None | 0 0
raw download clone embed print report
  1. <!--about me-->
  2. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  3. <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
  4. <style type="text/css">
  5. @import url('https://fonts.googleapis.com/css2?family=Suez+One&display=swap');
  6. @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  7.  
  8. body {
  9. background-color:#3f384e;
  10. background-repeat:no-repeat;
  11. background-attachment:fixed;
  12. margin: 0;
  13. overflow:auto;
  14. background-image:url('https://i.imgur.com/WeKervw.png');
  15. background-size:cover;
  16. }
  17.  
  18. table, tr, td, li, p, div, .profileInfo td.text {
  19. font-size: 10px;
  20. color: #fff;
  21. font-family: Georgia;
  22. }
  23.  
  24. .container{
  25. width: 900px; height: 604px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; background: #0f0f0f; text-align: center; border: solid 10px #844c4f;
  26. }
  27.  
  28. h1{
  29. font-family: Georgia; font-size: 16px; color: #fff; margin: 0; display: inline-block; margin-right: 258px;
  30. }
  31.  
  32. h2{
  33. font-family: Georgia; font-size: 16px; color: #fff; margin: 0; display: inline-block; margin-right: 258px; width: 320px; text-align: center; padding-top: 10px; padding-bottom: 10px; background: #844d4f; margin: 0; margin-bottom: 10px;
  34. }
  35.  
  36. h3{
  37. font-family: Georgia; font-size: 16px; color: #fff; margin: 0; display: inline-block; margin-right: 258px; width: 130px; text-align: center; padding-top: 10px; padding-bottom: 10px; background: #844d4f; margin: 0; margin-bottom: 10px;
  38. }
  39.  
  40.  
  41. h4{
  42. font-family: Georgia; font-size: 16px; color: #844d4f; margin: 0; display: inline-block; margin-right: 258px; width: 295px; text-align: center; padding-top: 10px; padding-bottom: 10px; margin: 0; margin-bottom: 10px;
  43. }
  44.  
  45. h5{
  46. font-family: Georgia; font-size: 16px; color: #fff; margin: 0; display: inline-block; margin-right: 258px; width: 190px; text-align: center; padding-top: 10px; padding-bottom: 10px; background: #844d4f; margin: 0; margin-bottom: 10px;
  47. }
  48.  
  49. strong{background: #844e4f; padding: 5px; line-height: 36px;}
  50.  
  51. a:link, a:active, a:visited {
  52.     color: #fff;
  53.     font-size: 12px;
  54.     font-family: Georgia;
  55.     text-transform: uppercase;
  56.     margin-left: 25px;
  57. }
  58.  
  59. a:hover{
  60. text-decoration:none;
  61. color:#000;
  62. }
  63.  
  64.  
  65. a.connectionName:link, a.connectionName:visited {
  66. background-color: #844e4f; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; width: 241px; border-bottom: solid 5px #101010; font-family: Georgi; font-size: 12px; margin-left: 0;
  67. }
  68.  
  69. a.connectionName:hover, a.connectionName:active {
  70.   background-color: #101010;
  71. }
  72.  
  73.  
  74. ::-webkit-scrollbar-thumb:vertical {height:12px; background:#0f0f0f; border-top:10px solid #844d4f; border-bottom:10px solid #844d4f;}
  75. ::-webkit-scrollbar-thumb:horizontal {background-color:#0f0f0f;}
  76. ::-webkit-scrollbar {width:5px; height:7px;}
  77.  
  78.  
  79. .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>
  80. </style>
  81.  
  82.  
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90. <!--like to meet-->
  91. <html>
  92. <body>
  93. <div class="container">
  94. <div style="width: 880px; height: auto; background: #844c4f; padding: 10px; padding-top: 0px;">
  95. <h1>NOLA REINE</h1>
  96.  
  97. <a href="/">home.</a>
  98. <a href="/">message.</a>
  99. <a href="/">comment.</a>
  100. <a href="/">stream.</a>
  101. <a href="/">blog.</a>
  102. <a href="/">photos.</a>
  103.  
  104. </div>
  105.  
  106. <img src="https://i.imgur.com/HexJgPG.png" style="margin-top:20px;">
  107.  
  108. <div style="width: 325px; font-family:Georgia; font-size:12px; text-align:justify; color:#fff; height: 290px; display: inline-block; margin-top: 10px; margin-left: 20px; padding: 10px; overflow: auto; vertical-align: top;">
  109. <h2>the story of the girl</h2>
  110. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mauris nunc, tempus id condimentum id, facilisis eu tellus. Duis pellentesque tellus magna, feugiat cursus mi ullamcorper at. Quisque sodales, mi at consequat molestie, diam dui euismod lacus, at facilisis massa quam vel lorem. Nullam vehicula augue in ante auctor posuere non at felis. Quisque lacus urna, interdum scelerisque orci vel, venenatis ornare quam. Nullam accumsan ac metus porta sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse dapibus mattis ultrices. Proin finibus sapien dapibus magna interdum sollicitudin. Sed vehicula nibh lectus, non facilisis turpis consectetur vel. Sed nec vestibulum nisl. Suspendisse semper tortor a odio efficitur, sit amet iaculis dolor mattis. Vivamus mollis luctus tellus, vel pharetra massa finibus non. Maecenas efficitur lectus in augue hendrerit malesuada.
  111. <br><br>
  112. Phasellus viverra molestie odio id aliquet. Donec sed sagittis ligula, id cursus massa. In tincidunt tortor a sollicitudin tristique. Donec non felis iaculis, ullamcorper erat ac, convallis orci. Nulla at consequat libero. Sed dignissim urna non odio accumsan tincidunt. Fusce viverra placerat urna, nec iaculis lorem feugiat non. Quisque ex orci, rutrum eget lacinia a, aliquam eget erat. Curabitur lacinia, lorem eget luctus volutpat, urna leo tempor velit, ac venenatis tellus tellus ut nibh. Mauris tempus mi nec nunc gravida, nec rhoncus ipsum sodales. Aenean sit amet est vitae neque semper ultrices. Fusce ac dapibus tortor. Sed interdum mi nec nibh pellentesque porta. Fusce sollicitudin, ante vel aliquet pellentesque, libero nisl commodo diam, ut suscipit purus nibh quis quam.
  113. <br><br>
  114. Aliquam venenatis sagittis consectetur. Ut et hendrerit arcu. Donec at sollicitudin lorem. Maecenas fringilla lectus metus, in lobortis mi cursus id. In interdum molestie elementum. Pellentesque porta orci non cursus vulputate. Nunc ac elit rutrum, laoreet nibh ut, gravida arcu. Fusce rhoncus sed mauris ac malesuada. Fusce et erat nec tortor efficitur sollicitudin. Pellentesque molestie vel lorem id faucibus. Proin nulla justo, ullamcorper sit amet dui in, facilisis varius justo. Suspendisse mollis vulputate nibh ac laoreet. Nam fringilla velit ut odio congue, sit amet ullamcorper massa tincidunt.
  115. <br><br>
  116. Nullam blandit velit ut hendrerit elementum. Proin luctus augue sed mi ornare, eu ornare augue finibus. Sed eu turpis sed tellus tristique convallis porttitor nec mauris. Integer interdum blandit massa et maximus. Aliquam arcu erat, tristique vitae velit in, blandit pharetra tellus. Nam sodales id justo non imperdiet. Proin condimentum sapien quis lectus sagittis dignissim. Donec iaculis faucibus ante, in scelerisque erat malesuada volutpat. Pellentesque non turpis nisl. Mauris lacinia risus pellentesque enim accumsan convallis. Aenean blandit lacinia bibendum. Integer vehicula vel justo lacinia consectetur. Vestibulum id ligula vel velit sollicitudin porttitor vitae vel enim. Quisque nibh mi, dictum eget finibus nec, lacinia sed velit. Aenean nec lacinia odio.
  117. <br><br>
  118. Suspendisse commodo imperdiet ante at rutrum. Nunc sit amet dignissim tellus, vel rutrum odio. Nullam tincidunt faucibus gravida. Ut in tortor metus. Integer quis faucibus elit. In et erat erat. Vivamus dictum eros ut iaculis tristique. Vestibulum lacus sem, finibus id pulvinar sit amet, condimentum vitae eros.
  119. </div>
  120.  
  121. <div style="width:130px; font-family:Georgia; font-size:12px; text-align:justify; color:#fff; height: 290px; display: inline-block; margin-top: 10px; margin-left: 20px; padding: 10px; overflow: auto; vertical-align: top;">
  122. <h3>i owe you</h3>
  123. <b>name</b> - starter - 00/00 <br>
  124. <b>name</b> - reply - 00/00 <br>
  125. <b>name</b> - starter - 00/00 <br>
  126. <b>name</b> - reply - 00/00 <br>
  127.  
  128. <h3 style="margin-top:10px;">you owe me</h3>
  129.  
  130. <b>name</b> - starter - 00/00 <br>
  131. <b>name</b> - reply - 00/00 <br>
  132. <b>name</b> - starter - 00/00 <br>
  133. <b>name</b> - reply - 00/00 <br>
  134.  
  135. <h3 style="margin-top:10px;">last updated: --/--</h3>
  136. </div>
  137.  
  138.  
  139. <div style="width:300px; font-family:Georgia; font-size:12px; text-align:justify; color:#fff; height: 190px; display: inline-block; margin-top: 20px; margin-left: 20px; padding: 10px; overflow: auto; vertical-align: top;">
  140. <h4>main connections</h4>
  141. <a href="/" class="connectionName">connection name</a>
  142. <a href="/" class="connectionName">connection name</a>
  143. <a href="/" class="connectionName">connection name</a>
  144. <a href="/" class="connectionName">connection name</a>
  145. <a href="/" class="connectionName">connection name</a>
  146. <a href="/" class="connectionName">connection name</a>
  147. <a href="/" class="connectionName">connection name</a>
  148. <a href="/" class="connectionName">connection name</a>
  149. <a href="/" class="connectionName">connection name</a>
  150. <a href="/" class="connectionName">connection name</a>
  151. <a href="/" class="connectionName">connection name</a>
  152.  
  153. </div>
  154.  
  155. <div style="width:300px; font-family:Georgia; font-size:12px; text-align:justify; color:#fff; height: 210px; display: inline-block; margin-top: 20px; margin-left: 20px; padding: 10px; overflow: auto; vertical-align: top;">
  156.  
  157. <img src="https://i.imgur.com/V4FLYF6.png">
  158. <div style="height:80px; width:190px; display:inline-block; vertical-align:top; margin-bottom:10px; padding:5px; font-family:Georgia; font-size:12px; text-align:justify; color:#fff; overflow:auto;">
  159. <h5>Klaus Mikaelson</h5>
  160. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not.
  161. </div>
  162. <br>
  163. <div style="height:80px; width:190px; display:inline-block; vertical-align:top; margin-bottom:10px; padding:5px; font-family:Georgia; font-size:12px; text-align:justify; color:#fff; overflow:auto; margin-top:10px;">
  164. <h5>Armand Navarro</h5>
  165. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not. talk about your storyline here and what not.
  166. </div>
  167. <img src="https://i.imgur.com/iOMEqKP.png" style="margin-top:10px;">
  168. </div>
  169.  
  170. <div style="width:160px; font-family:Georgia; font-size:12px; text-align:justify; color:#fff; height: 190px; display: inline-block; margin-top: 20px; margin-left: 20px; padding: 10px; overflow: auto; vertical-align: top;">
  171. <img src="https://i.imgur.com/KwxnfsT.png" style="margin-bottom:10px; width:155px;">
  172. <strong>status:</strong> here <br>
  173. <strong>since:</strong> here <br>
  174. <strong>to whom:</strong> here <br>
  175. <strong>comments:</strong> here <br>
  176.  
  177. </div>
  178.  
  179.  
  180.  
  181. </div>
  182. </body>
  183. </html>
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!