Advertisement
xrxrxr

ugly html

Nov 11th, 2018
216
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.32 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  6. <style>
  7. body {
  8. font-family: 'ciclefina', italic;
  9. font-style: oblique;
  10. font-weight: 400;
  11. background-color:#b71540;
  12.  
  13. }
  14.  
  15. h1 {color: #f7f1e3;}
  16.  
  17. .topnav {
  18. overflow: hidden;
  19. background-color: #333;
  20. position: relative;
  21. }
  22.  
  23. .topnav #myLinks {
  24. display: none;
  25. }
  26.  
  27. .topnav a {
  28. color: white;
  29. padding: 14px 16px;
  30. text-decoration: none;
  31. font-size: 17px;
  32. display: block;
  33. }
  34.  
  35. .topnav a.icon {
  36. background: black;
  37. display: block;
  38. position: absolute;
  39. right: 0;
  40. top: 0;
  41. }
  42.  
  43. .topnav a:hover {
  44. background-color: #ddd;
  45. color: black;
  46. }
  47.  
  48. .active {
  49. background-color: #787878;
  50. color: white;
  51. }
  52.  
  53.  
  54. </style>
  55. </head>
  56. <body>
  57.  
  58. <!-- Simulate a smartphone / tablet -->
  59. <div class="mobile-container">
  60.  
  61. <!-- Top Navigation Menu -->
  62. <div class="topnav">
  63. <a href="#home" class="active">Logo</a>
  64. <div id="myLinks">
  65. <a href="#news">News</a>
  66. <a href="#contact">Contact</a>
  67. <a href="#about">About</a>
  68. </div>
  69. <a href="javascript:void(0);" class="icon" onclick="myFunction()">
  70. <i class="fa fa-bars"></i>
  71. </a>
  72. </div>
  73.  
  74.  
  75. <!-- End smartphone / tablet look -->
  76. </div>
  77.  
  78. <script>
  79. function myFunction() {
  80. var x = document.getElementById("myLinks");
  81. if (x.style.display === "block") {
  82. x.style.display = "none";
  83. } else {
  84. x.style.display = "block";
  85. }
  86. }
  87. </script>
  88.  
  89. </body>
  90. </html>
  91.  
  92. <body>
  93. <font color="white">
  94. <div align="center left">
  95. </style></head><body><header><h1>This is <em>still</em> a motherfucking website.</h1>
  96.  
  97. <aside>And it's more fucking perfect than the last guy's.
  98. </aside>
  99. </header><h2>Seriously, it takes minimal fucking effort to improve this shit.
  100. </h2><p><strong>
  101. 7 fucking declarations.
  102. </strong></p><p>
  103. That's how much CSS it took to turn that <a
  104. href="http://motherfuckingwebsite.com/">grotesque pile of shit
  105. </a> into this easy-to-read masterpiece. It's so fucking simple and it <em>still</em> has all the glory of the original perfect-ass website:</p><ul><li>Shit's <em>still</em> lightweight and loads fast</li><li><em>Still</em> fits on all your shitty screens</li><li><em>Still</em> looks the same in all your shitty browsers</li><li>The motherfucker's <em>still</em> accessible to every asshole that visits your site</li><li>Shit's <em>still</em> legible and gets your fucking point across</li></ul><h3>And guess what, motherfucker:</h3><p>You never knew it, but it's easy to improve readability on your site. Here's how.</p><h2>Let it breathe</h2><p>Look at lines 1 and 2 of some shitty website you're building. Assuming they're not married they probably shouldn't be humping. The defaults are trash -- pick a minimum <code>line-height: 1.4</code> for body copy. Headings should be tighter. If you can't see that...piss off.</p><p>If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book.</p><h2>A little less contrast
  106. </h2><p>Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would've even made this site's background a nice <code>#EEEEEE</code> if I wasn't so focused on keeping declarations to a lean 7 fucking lines.</p>
  107. <h2>Size Matters</h2>
  108. <p>I know your partner says otherwise, but it's true. Bump that body copy to render close to 16px or more. Smaller type works well for print, not the screen.</p>
  109. <h2>Line-width, motherfucker</h2>
  110. <p>Looking at an LCD screen is strainful enough. Don't make me read a line of text that's 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.</p>
  111. <h3>Yes, this is <em>also</em> fucking satire, you fuck</h3>
  112. <p>I love what the creator of <a
  113. href="http://motherfuckingwebsite.com/">this site's inspiration</a> did. What I'm saying is that it's so, so simple to make sites easier to read. Websites are broken by default, they are functional, high-performing, and accessible, but they're also fucking ugly. You and all the other web designers out there need to make them not total shit.</p><blockquote>"You're a fucking moron if you use default browser styles."
  114. <br>
  115. - Eleanor Roosevelt</blockquote><hr><h2>Epilogue</h2><p>Inspired by the geniuses behind <a
  116. href="http://motherfuckingwebsite.com/">motherfuckingwebsite.com</a> and <a
  117. href="http://txti.es">txti</a>.</p><p>This page&mdash;that isn't a total fucking eyesore&mdash;was created by <a
  118. href="https://twitter.com/drew_mc">me</a> with help from <a
  119. href="https://twitter.com/gabehammersmith">him</a>. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-46163202-2','auto');ga('send','pageview');</script> </body></html>$
  120. </font>
  121. </div>
  122. <center> <audio controls autoplay>
  123. <source src="http://stream.247drumandbass.com:8000/96k.ogg" type="audio/ogg">
  124. </audio>
  125. </center>
  126. <div id="root"></div>
  127. <script src="main.js" type="text/javascript"></script>
  128. </body>
  129. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement