API tools faq
paste
Advertisement
jaeilhun07

Whistle

jaeilhun07
Jul 24th, 2018
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.49 KB | None | 0 0
raw download clone embed print report
  1. <p style="text-align:center;">&nbsp;Whistle Layout<br />
  2. <a href="https://pastebin.com/asri2HFL" rel="nofollow">Get Code</a></p>
  3.  
  4. <p style="text-align:center;">&nbsp;</p>
  5.  
  6. <div style="margin:auto;width:750px;height:750px;background-color:#ebf5fb;">
  7. <div style="float:left;padding:80px 0 0 60px;width:690px;height:670px;">
  8. <div style="float:left;width:368px;height:648px;border:solid 1px #d1d4db;">&nbsp;</div>
  9. </div>
  10.  
  11. <div style="float:left;margin-top:-750px;padding:40px 0 0 320px;width:430px;height:710px;">
  12. <div style="float:left;width:390px;height:450px;background-color:#ebf5fb;"><img alt="68c3f4.jpg" src="https://photo.asianfanfics.com/user/909691/68c3f4.jpg" style="width:390px;height:450px;" /></div>
  13. </div>
  14.  
  15. <div style="float:left;margin-top:-720px;padding:0 500px 0 40px;width:210px;height:30px;">
  16. <div style="float:left;height:30px;text-align:left;text-transform:uppercase;font-family:arial;font-size:6px;line-height:10px;letter-spacing:1px;color:#14191c;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. ++Line stops here.</div>
  17. </div>
  18.  
  19. <div style="float:left;margin-top:-660px;padding:0 360px 0 0;width:390px;height:80px;">
  20. <div style="float:left;width:390px;height:40px;text-align:right;text-transform:lowercase;font-family:'arial black';font-size:40px;line-height:40px;letter-spacing:1px;color:#67824d;">whistle</div>
  21.  
  22. <div style="float:right;margin-top:10px;margin-right:10px;width:130px;height:30px;text-align:right;text-transform:uppercase;font-family:arial;font-size:6px;line-height:10px;letter-spacing:1px;color:#14191c;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ++Line stops here.</div>
  23. </div>
  24.  
  25. <div style="float:left;margin-top:-540px;padding:0 0 0 90px;width:400px;height:400px;">
  26. <div style="float:left;width:400px;height:100px;">
  27. <div style="float:left;width:98px;height:98px;border:solid 1px #d1d4db;">&nbsp;</div>
  28.  
  29. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  30.  
  31. <div style="float:left;width:98px;height:98px;border:solid 1px #d1d4db;">&nbsp;</div>
  32.  
  33. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  34. </div>
  35.  
  36. <div style="float:left;width:400px;height:100px;">
  37. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  38.  
  39. <div style="float:left;width:100px;height:100px;background-color:#d1d4db;">&nbsp;</div>
  40.  
  41. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  42.  
  43. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  44. </div>
  45.  
  46. <div style="float:left;width:400px;height:100px;">
  47. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  48.  
  49. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  50.  
  51. <div style="float:left;width:98px;height:98px;border:solid 1px #d1d4db;">&nbsp;</div>
  52.  
  53. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  54. </div>
  55.  
  56. <div style="float:left;width:400px;height:100px;">
  57. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  58.  
  59. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  60.  
  61. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  62.  
  63. <div style="float:left;width:100px;height:100px;background-color:#d1d4db;">&nbsp;</div>
  64. </div>
  65. </div>
  66.  
  67. <div style="float:left;margin-top:-520px;padding:0 0 0 70px;width:400px;height:400px;">
  68. <div style="float:left;width:400px;height:100px;">
  69. <div style="float:left;width:100px;height:100px;background-color:#14191c;">
  70. <div style="float:left;margin:20px;padding:10px;width:40px;height:40px;background-color:#d69e91;text-align:center;text-transform:uppercase;font-family:'arial black';font-weight:bold;font-size:20px;line-height:20px;letter-spacing:1px;color:#14191c;">
  71. <div style="float:left;width:40px;height:20px;">
  72. <div style="float:left;width:20px;height:20px;">y</div>
  73.  
  74. <div style="float:left;width:20px;height:20px;">#</div>
  75. </div>
  76.  
  77. <div style="float:left;width:40px;height:20px;">
  78. <div style="float:left;width:20px;height:20px;">1</div>
  79.  
  80. <div style="float:left;width:20px;height:20px;">8</div>
  81. </div>
  82. </div>
  83. </div>
  84.  
  85. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  86.  
  87. <div style="float:left;width:100px;height:100px;background-color:#ebf5fb;"><img alt="65d42f.jpg" src="https://photo.asianfanfics.com/user/909691/65d42f.jpg" style="width:100px;height:100px;" /></div>
  88.  
  89. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  90. </div>
  91.  
  92. <div style="float:left;width:400px;height:100px;">
  93. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  94.  
  95. <div style="float:left;width:100px;height:100px;background-color:#ebf5fb;"><img alt="e10d20.jpg" src="https://photo.asianfanfics.com/user/909691/e10d20.jpg" style="width:100px;height:100px;" /></div>
  96.  
  97. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  98.  
  99. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  100. </div>
  101.  
  102. <div style="float:left;width:400px;height:100px;">
  103. <div style="float:left;width:200px;height:100px;">
  104. <div style="float:right;margin:20px 20px 0 0;width:160px;height:40px;text-align:right;text-transform:uppercase;font-family:arial;font-weight:bold;font-size:6px;line-height:10px;letter-spacing:1px;color:#14191c;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam.<br />
  105. ++Line stops here.</div>
  106.  
  107. <div style="float:right;margin:10px 30px 0 0;height:10px;text-align:right;text-transform:uppercase;font-family:arial;font-weight:bold;font-size:7px;line-height:10px;letter-spacing:1px;color:#92b1c6;"><a href="#" style="text-decoration:none;color:#92b1c6;">link here</a></div>
  108. </div>
  109.  
  110. <div style="float:left;width:100px;height:100px;background-color:#ebf5fb;">
  111. <div style="float:left;width:100px;height:100px;">
  112. <div style="float:left;width:100px;height:100px;"><img alt="62ca8a.jpg" src="https://photo.asianfanfics.com/user/909691/62ca8a.jpg" style="width:100px;height:100px;" /></div>
  113.  
  114. <div style="float:left;margin:-80px 0px 0 20px; padding:10px;width:40px;height:40px;background-color:#14191c;text-align:center;text-transform:uppercase;font-family:arial;font-weight:bold;font-size:20px;line-height:20px;letter-spacing:1px;color:#d69e91;">
  115. <div style="float:left;width:40px;height:20px;">
  116. <div style="float:left;width:20px;height:20px;">a</div>
  117.  
  118. <div style="float:left;width:20px;height:20px;">b</div>
  119. </div>
  120.  
  121. <div style="float:left;width:40px;height:20px;">
  122. <div style="float:left;width:20px;height:20px;">t</div>
  123.  
  124. <div style="float:left;width:20px;height:20px;">+</div>
  125. </div>
  126. </div>
  127. </div>
  128.  
  129. <div style="float:left;margin-top:-100px;width:100px;height:100px; opacity:.99;">
  130. <div style="float:left;width:100px;height:100px;overflow:hidden;">
  131. <div style="float:left;width:117px;height:100px;overflow:auto;">
  132. <div style="float:left;width:100px;height:auto;">
  133. <div style="float:left;width:100px; height:100px;">
  134. <div style="float:right; margin-top:87px; height:0px; margin-right:3px;border-right:solid 10px #14191c;border-top:solid 10px transparent;">&nbsp;</div>
  135. </div>
  136.  
  137. <div style="float:left;margin-top:3px;padding:10px;width:80px;background-color:#14191c;text-align:right;text-transform:uppercase;font-family:arial;font-size:6px;line-height:10px;letter-spacing:1px;color:#d69e91;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus.<br />
  138. ++Line continues.</div>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144.  
  145. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  146. </div>
  147.  
  148. <div style="float:left;width:400px;height:100px;">
  149. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  150.  
  151. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  152.  
  153. <div style="float:left;width:100px;height:100px;">&nbsp;</div>
  154.  
  155. <div style="float:left;width:100px;height:100px;background-color:#ebf5fb;"><img alt="7dbe03.jpg" src="https://photo.asianfanfics.com/user/909691/7dbe03.jpg" style="width:100px;height:100px;" /></div>
  156. </div>
  157. </div>
  158.  
  159. <div style="float:right;margin:-250px 50px 0 0;width:80px;height:30px;">
  160. <div style="float:left;width:80px;height:7px;text-align:right;text-transform:uppercase;font-family:arial;font-weight:bold;font-size:7px;line-height:10px;letter-spacing:1px;color:#92b1c6;"><a href="#" style="text-decoration:none;color:#92b1c6;">link here</a></div>
  161.  
  162. <div style="float:left;margin-top:3px;width:80px;height:7px;text-align:right;text-transform:uppercase;font-family:arial;font-weight:bold;font-size:7px;line-height:10px;letter-spacing:1px;color:#92b1c6;"><a href="#" style="text-decoration:none;color:#92b1c6;">link here</a></div>
  163.  
  164. <div style="float:left;margin-top:3px;width:80px;height:7px;text-align:right;text-transform:uppercase;font-family:arial;font-weight:bold;font-size:7px;line-height:10px;letter-spacing:1px;color:#92b1c6;"><a href="#" style="text-decoration:none;color:#92b1c6;">link here</a></div>
  165. </div>
  166.  
  167. <div style="float:left;margin:-210px 0 0 30px;width:240px;height:170px;">
  168. <div style="float:left;width:30px;height:170px;">
  169. <div style="float:left;margin:10px 0 15px 0;width:28px;height:28px;border:solid 1px #d1d4db;">&nbsp;</div>
  170.  
  171. <div style="float:left;margin:15px 0;width:28px;height:28px;border:solid 1px #d1d4db;">&nbsp;</div>
  172.  
  173. <div style="float:left;margin:15px 0 10px 0;width:28px;height:28px;border:solid 1px #d1d4db;">&nbsp;</div>
  174. </div>
  175.  
  176. <div style="float:left;margin-left:-10px;width:50px;height:170px;">
  177. <div style="float:left;width:50px;height:50px;background-color:#ebf5fb;"><img alt="ed982d.jpg" src="https://photo.asianfanfics.com/user/909691/ed982d.jpg" style="width:50px;height:50px;" /></div>
  178.  
  179. <div style="float:left;margin-top:10px;width:50px;height:50px;background-color:#ebf5fb;"><img alt="ed982d.jpg" src="https://photo.asianfanfics.com/user/909691/ed982d.jpg" style="width:50px;height:50px;" /></div>
  180.  
  181. <div style="float:left;margin-top:10px;width:50px;height:50px;background-color:#ebf5fb;"><img alt="ed982d.jpg" src="https://photo.asianfanfics.com/user/909691/ed982d.jpg" style="width:50px;height:50px;" /></div>
  182. </div>
  183.  
  184. <div style="float:left;margin-left:-10px;width:170px;height:170px;">
  185. <div style="float:left;margin-top:10px;width:170px;height:40px;">
  186. <div style="float:left;padding:5px;height:10px;background-color:#92b1c6;text-align:left;text-transform:uppercase;font-family:arial;font-weight:bold;font-size:7px;line-height:10px;letter-spacing:1px;color:#14191c;">label here</div>
  187.  
  188. <div style="float:right;margin-top:5px;width:150px;height:10px;text-align:left;text-transform:uppercase;font-family:arial;font-size:6px;line-height:10px;letter-spacing:1px;color:#14191c;">this line is fixed so keep it short.</div>
  189. </div>
  190.  
  191. <div style="float:left;margin-top:20px;width:170px;height:40px;">
  192. <div style="float:left;padding:5px;height:10px;background-color:#92b1c6;text-align:left;text-transform:uppercase;font-family:arial;font-weight:bold;font-size:7px;line-height:10px;letter-spacing:1px;color:#14191c;">label here</div>
  193.  
  194. <div style="float:right;margin-top:5px;width:150px;height:10px;text-align:left;text-transform:uppercase;font-family:arial;font-size:6px;line-height:10px;letter-spacing:1px;color:#14191c;">this line is fixed so keep it short.</div>
  195. </div>
  196.  
  197. <div style="float:left;margin-top:20px;width:170px;height:40px;">
  198. <div style="float:left;padding:5px;height:10px;background-color:#92b1c6;text-align:left;text-transform:uppercase;font-family:arial;font-weight:bold;font-size:7px;line-height:10px;letter-spacing:1px;color:#14191c;">label here</div>
  199.  
  200. <div style="float:right;margin-top:5px;width:150px;height:10px;text-align:left;text-transform:uppercase;font-family:arial;font-size:6px;line-height:10px;letter-spacing:1px;color:#14191c;">this line is fixed so keep it short.</div>
  201. </div>
  202. </div>
  203. </div>
  204.  
  205. <div style="float:right;margin:-190px 110px 0 0;width:190px;height:140px;">
  206. <div style="float:left;width:190px;height:110px;text-align:left;text-transform:uppercase;font-family:arial;font-size:6px;line-height:10px;letter-spacing:1px;color:#14191c;">
  207. <div style="float:left;width:190px;height:110px;overflow:hidden;">
  208. <div style="float:left;width:207px;height:110px;overflow:auto;">
  209. <div style="float:left;width:190px;height:auto;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam.<br />
  210. <br />
  211. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla.<br />
  212. <br />
  213. Aenean dictum lacinia tortor. Nunc iaculis, nibh non...<br />
  214. ++Line continues. Scrollable.</div>
  215. </div>
  216. </div>
  217. </div>
  218.  
  219. <div style="float:right;margin-top:10px;height:20px;text-align:right;text-transform:lowercase;font-family:'arial black';font-weight:bold;font-size:20px;line-height:20px;letter-spacing:1px;color:#67824d;">label here</div>
  220. </div>
  221.  
  222. <div style="float:right;margin:-40px 20px 0 0;width:80px;height:20px;">
  223. <div style="float:right;padding:4px;width:10px;height:10px;border:solid 1px #14191c;text-align:center;text-transform:uppercase;font-family:'arial black';font-weight:bold;font-size:8px;line-height:10px;color:#14191c;"><a href="http://www.asianfanfics.com/story/view/953539" style="text-decoration:none;color:#14191c;" title="Whistle Layout by Cruxiarts | Cruxblader Themes 2018">c</a></div>
  224.  
  225. <div style="float:right;margin-right:5px;padding:5px;width:10px;height:10px;background-color:#92b1c6;text-align:center;text-transform:uppercase;font-family:'arial black';font-weight:bold;font-size:10px;line-height:10px;color:#14191c;"><a href="#" style="text-decoration:none;color:#14191c;">+</a></div>
  226.  
  227. <div style="float:right;margin-right:5px;padding:5px;width:10px;height:10px;background-color:#92b1c6;text-align:center;text-transform:uppercase;font-family:'arial black';font-weight:bold;font-size:10px;line-height:10px;color:#14191c;"><a href="#" style="text-decoration:none;color:#14191c;">+</a></div>
  228. </div>
  229. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!