Abhijeet Pitumbur
@font-face {
font-family: Open Sans;
font-style: normal;
font-display:swap;font-weight: 800;
src: local("Open Sans ExtraBold "),local("Open Sans-ExtraBold"),url(/static/open-sans-latin-800-aaeffaf205b9bbb09920089a14dbe9e8.woff2) format("woff2"),url(/static/open-sans-latin-800-c6aa0c4a601fb6ac66f8253fa594dff5.woff) format("woff")
}
@font-face {
font-family: Open Sans;
font-style: italic;
font-display:swap;font-weight: 800;
src: local("Open Sans ExtraBold italic"),local("Open Sans-ExtraBolditalic"),url(/static/open-sans-latin-800italic-6b3973ffe02bb6a8be0f8453506ec032.woff2) format("woff2"),url(/static/open-sans-latin-800italic-79b58175343190550489efe46a7f1138.woff) format("woff")
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace,monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b,strong {
font-weight: bolder
}
code,kbd,samp {
font-family: monospace,monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
img {
border-style: none
}
button,input,optgroup,select,textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,input {
overflow: visible
}
button,select {
text-transform: none
}
[type=button],[type=reset],[type=submit],button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
[hidden],template {
display: none
}
html {
box-sizing: border-box
}
*,:after,:before {
box-sizing: inherit
}
body,html {
margin: 0;
padding: 0;
height: 100%
}
html {
font-family: Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
font-size: 16px;
line-height: 1.5
}
@media (min-width: 992px) {
html {
font-size:18px;
line-height: 1.375
}
}
body {
color: #e6e6e6;
background-color: #000;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
a {
color: #42dca3
}
a:focus,a:hover {
color: #1d9b6c
}
@media (min-width: 768px) {
a {
text-decoration:none
}
a:focus,a:hover {
text-decoration: underline
}
}
img {
display: block;
max-width: 100%;
margin: 0 0 1rem
}
figure {
margin: 2rem 0
}
figcaption {
font-size: 80%
}
table {
margin-bottom: 1rem;
width: 100%;
font-size: 85%;
border: 1px solid #e5e5e5;
border-collapse: collapse
}
td,th {
padding: .25rem .5rem;
border: 1px solid #e5e5e5
}
th {
text-align: left
}
tbody tr:nth-child(odd) td,tbody tr:nth-child(odd) th {
background-color: #f9f9f9
}
h1,h2,h3,h4,h5,h6 {
margin-bottom: .5rem;
font-family: Rubik,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
font-weight: 500;
color: #fff;
text-rendering: optimizeLegibility
}
h1 {
font-size: 2rem;
line-height: 1.125
}
@media (min-width: 992px) {
h1 {
font-size:3rem;
line-height: 1.05
}
}
h2 {
font-size: 1.5rem;
line-height: 1.25
}
@media (min-width: 768px) {
h2 {
font-size:2rem;
line-height: 1.25
}
}
@media (min-width: 992px) {
h2 {
font-size:2.25rem
}
}
h3 {
font-size: 1.25rem;
line-height: 1.25
}
@media (min-width: 992px) {
h3 {
font-size:1.75rem
}
}
h4,h5,h6 {
font-size: 1.125rem;
line-height: 1.11111111
}
@media (min-width: 768px) {
h4,h5,h6 {
line-height:1.22222222
}
}
p {
margin: 0 0 1rem
}
strong {
color: #fff
}
dl,ol,ul {
margin-top: 0;
margin-bottom: 1rem
}
dt {
font-weight: 700
}
dd {
margin-bottom: .5rem
}
hr {
position: relative;
margin: 1.5rem 0;
border: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #fff
}
abbr {
font-size: 85%;
font-weight: 700;
color: #555;
text-transform: uppercase
}
abbr[title] {
cursor: help;
border-bottom: 1px dotted #e5e5e5
}
blockquote {
padding: .5rem 1rem;
margin: .8rem 0;
color: #fff;
border-left: .25rem solid #262626
}
blockquote p:last-child {
margin-bottom: 0
}
blockquote cite {
color: #7a7a7a
}
@media (min-width: 576px) {
blockquote {
padding-right:5rem;
padding-left: 1.25rem
}
}
#___gatsby {
min-height: 100vh
}
</style>
<meta name="generator" content="Gatsby 2.6.0"/>
<link rel="canonical" href="https://thebestmotherfuckingwebsite.co/" data-baseprotocol="https:" data-basehost="thebestmotherfuckingwebsite.co"/>
<link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"/>
<title data-react-helmet="true">The Best Motherfucking Website</title>
<meta data-react-helmet="true" name="description" content="Your motherfucking websites got nothing compared to this beauty."/>
<meta data-react-helmet="true" name="keywords" content="web design, motherfucking website, motherfuckingwebsite"/>
<meta data-react-helmet="true" property="og:title" content="The Best Motherfucking Website"/>
<meta data-react-helmet="true" property="og:type" content="website"/>
<meta data-react-helmet="true" property="og:image" content="/image-og.png"/>
<meta data-react-helmet="true" property="og:description" content="Your motherfucking websites got nothing compared to this beauty."/>
<meta data-react-helmet="true" property="og:url" content="https://thebestmotherfucking.co/index.html"/>
<link as="script" rel="preload" href="/webpack-runtime-1ec28e316a1b14b88455.js"/>
<link as="script" rel="preload" href="/app-ac1f236cf2dbc62ca34a.js"/>
<link as="script" rel="preload" href="/styles-ebbd600b037040a15a0d.js"/>
<link as="script" rel="preload" href="/1-607bd627c631d57f3fde.js"/>
<link as="script" rel="preload" href="/component---src-pages-index-tsx-99f6fea4dfa1edd9305a.js"/>
<link as="fetch" rel="preload" href="/static/d/140/path---index-6a9-0SUcWyAf8ecbYDsMhQkEfPzV8.json" crossorigin="use-credentials"/>
</head>
<body>
<noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript>
<div id="___gatsby">
<div style="outline:none" tabindex="-1" role="group">
<header class="Masthead-module--masthead--2T9q-">
<div class="Container-module--container--3KHiT">
<div class="Masthead-module--mastheadInner--19b4E">
<div class="Masthead-module--mastheadTitle--2R4uc">
<button type="button">
<span class="Masthead-module--brand--3Te7a">■</span>
TBMFW
</button>
</div>
<nav class="Masthead-module--mastheadNav--uG8zX">
<a href="#about" class="MastheadNavLink-module--mastheadNavLink--2v8Xt">About</a>
<a href="#features" class="MastheadNavLink-module--mastheadNavLink--2v8Xt">Features</a>
<a href="#epilogue" class="MastheadNavLink-module--mastheadNavLink--2v8Xt">Epilogue</a>
</nav>
</div>
</div>
</header>
<main style="display:flex;flex-direction:column;min-height:100vh;padding-top:60px">
<div class="Intro-module--intro--7DbWt">
<div class="Intro-module--introInner--RTiws">
<div class="Container-module--container--3KHiT">
<h1>THIS IS THE BEST MOTHERFUCKING WEBSITE.</h1>
<p>Your motherfucking websites got nothing compared to this beauty.</p>
</div>
</div>
<a class="Intro-module--introScrollThingy--1aQhZ">▼ scroll thingy ▼</a>
<div class="Intro-module--credit--3jl4L">
<a class="UnsplashCreditBadge-module--unsplashCreditBadge--2mVMc" href="https://unsplash.com/@levibare1?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos by Levi Bare from Unsplash">
<span>
<img alt="Visit Page" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgPHRpdGxlPjwvdGl0bGU+CiAgPHBhdGggZD0iTTIwLjggMTguMWMwIDIuNy0yLjIgNC44LTQuOCA0LjhzLTQuOC0yLjEtNC44LTQuOGMwLTIuNyAyLjItNC44IDQuOC00LjggMi43LjEgNC44IDIuMiA0LjggNC44em0xMS4yLTcuNHYxNC45YzAgMi4zLTEuOSA0LjMtNC4zIDQuM2gtMjMuNGMtMi40IDAtNC4zLTEuOS00LjMtNC4zdi0xNWMwLTIuMyAxLjktNC4zIDQuMy00LjNoMy43bC44LTIuM2MuNC0xLjEgMS43LTIgMi45LTJoOC42YzEuMiAwIDIuNS45IDIuOSAybC44IDIuNGgzLjdjMi40IDAgNC4zIDEuOSA0LjMgNC4zem0tOC42IDcuNWMwLTQuMS0zLjMtNy41LTcuNS03LjUtNC4xIDAtNy41IDMuNC03LjUgNy41czMuMyA3LjUgNy41IDcuNWM0LjItLjEgNy41LTMuNCA3LjUtNy41eiI+PC9wYXRoPgo8L3N2Zz4K"/>
</span>
<span>Levi Bare</span>
</a>
</div>
</div>
<div id="about" name="about" class="FullScreenSection-module--fullScreenSection--3MOzW">
<div class="FullScreenSection-module--fullScreenSectionInner--gDGj4">
<div class="Container-module--container--3KHiT">
<h1>LIKE SERIOUSLY, DOES IT EVEN FUCKING MATTER?</h1>
<p>
If you look at the granddaddies of motherfucking websites,
<!-- -->
<a href="http://motherfuckingwebsite.com" target="_blank" rel="noopener noreferrer">every</a>
<a href="http://bettermotherfuckingwebsite.com" target="_blank" rel="noopener noreferrer">single</a>
<a href="http://evenbettermotherfucking.website" target="_blank" rel="noopener noreferrer">one</a>
<!-- -->
of them say that websites are bloated, and therefore need to look fugly to stay lightweight.
<!-- -->
<strong>What a stupid idea.</strong>
</p>
<p>
You guys fucking complain about page load while trying to load YouTube from your
<!-- -->
<a href="https://fiber.google.com/" target="_blank" rel="noopener noreferrer">Google Fiber</a>
<!-- -->
whereas I, a third-world country peasant, would cry tears of actual joy if true broadband connection would ever reach us. Y 'all keep trying to pretend that page bloat is a big fucking issue, and that the existence of JavaScript has become a bane to humanity 's shitty existence, yet forgot that web performance is something that requires some TLC and actual fucking effort, and all of the page bloat hoohah doesn 't even matter as much anymore.
</p>
<p>
This is where <em>The Best Motherfucking Website</em>
― <strong>TBMFW</strong>
― comes in. To prove all you fuckers wrong, plus it also works as an eye bleach.
</p>
<p>Now I know you 're probably thinking, really?</p>
</div>
</div>
</div>
<div id="features" name="features" class="FullScreenSection-module--fullScreenSection--3MOzW">
<div class="FullScreenSection-module--fullScreenSectionInner--gDGj4">
<div class="Container-module--container--3KHiT">
<div class="Row-module--row--2m96w" style="padding-top:4rem;padding-bottom:4rem">
<div class="Col-module--col--2SqTI">
<div class="Features-module--featureBox--12NmR">
<h2 style="color:black">WELL, GUESS WHAT:</h2>
<p>Look at this fucking beauty. It 's sleek. It loads faster than you can even take a shit. And not to mention that it still has all the glory of a perfect-ass website:</p>
<ul>
<li>Shit loads fast, even with all this fancystuffs thrown into the mix.</li>
<li>
<em>Still</em>
fits on all of 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
<sup>
<small>[1]</small>
</sup>
.
</li>