123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <main>

	<h1>404</h1>
	<svg id="fox" viewBox="0 0 438 722" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD-Copy-2" transform="translate(-884.000000, -302.000000)">
            <g id="Group-3" transform="translate(817.000000, 294.000000)">
                <g transform="translate(193.000000, 0.000000)">
                    <path d="M134,175 L149,162.655753 C149,156.885251 151,151.905103 155,147.715308 C169,142 165,144 181,139 C188.508321,141.032125 190.897012,153.102988 184,160 C165.695901,167.333333 149.029234,176.333333 134,187 L134,175 Z" id="Path-2-Copy" fill="#D57140"></path>
                    <polygon id="Path-6-Copy" fill="#FBFBFB" points="142 167 143 185 130 193 127 179"></polygon>
                    <path d="M192.086957,60.1489362 C214.347826,90.8085106 227.333333,106.138298 231.043478,106.138298 C233.826087,98.7388451 229.188406,79.6927458 217.130435,49 C217.130435,49 218.521739,51.322695 221.304348,55.9680851 C225.014493,63.4007092 230.57971,80.5886525 238,107.531915 L192.086957,180 L142,167.457447 L192.086957,60.1489362 Z" id="Rectangle" fill="#CCCCCC"></path>
                    <path d="M124,164 L139,151.655753 C139,145.885251 141,140.905103 145,136.715308 C159,131 155,133 171,128 C178.508321,130.032125 180.897012,142.102988 174,149 C155.695901,156.333333 139.695901,166.666667 126,180 L124,164 Z" id="Path-2" fill="#D57140"></path>
                    <polygon id="Path-6" fill="#FBFBFB" points="132 156 133 174 120 182 117 168"></polygon>
                    <path d="M2.84217094e-14,144.565333 C2.84217094e-14,170.565333 44,223.565333 85,337.565333 C105.501139,393.007543 129,445.565333 104,445.565333 C110,461.565333 134.406568,456.630333 133,445.565333 C111,378.521778 101.333333,346.333333 104,349 C111.333333,366.710222 126.333333,396.231999 149,437.565333 C170,414.565333 170,419.565333 160,414.565333 C138.666667,411.231999 123.666667,383.231999 115,330.565333 L149,310.565333 C171.666667,358.565333 183,394.898666 183,419.565333 C197,419.565333 198.875447,418.45332 197,409.565333 C179.666667,368.898666 170.333333,342.565333 169,330.565333 C179.44186,357.154479 194.44186,383.487812 214,409.565333 C219.16279,416.449052 232.379908,410.451786 229,402.565333 C207.666667,392.188444 184.666667,352.521778 160,283.565333 L85,294.565333 C40.3333333,176.589135 12,126.589135 2.84217094e-14,144.565333 Z" id="Path-9" fill="#713131"></path>
                    <g id="Group-2" transform="translate(18.000000, 86.000000)">
                        <path d="M206.907282,154.469263 C206.907282,184.519 207.624033,178.024196 199.319686,223.024196 C231.624033,245.024196 234.437974,253.744695 242.437974,275.744695 C262.54616,282.103976 258.365657,290.891627 276.365657,290.891627 C280.365657,285.891627 284.448504,280.974473 281.365657,277.891627 C273.365657,268.891627 266.437974,263.794432 251.437974,258.744695 C223.437974,211.794432 224.624033,205.024196 217.169781,162.024196 C215.014387,156.17384 210.714741,148.429844 206.907282,154.469263 Z" id="Path-5-Copy" fill="#D57140" transform="translate(240.883739, 221.584761) rotate(-12.000000) translate(-240.883739, -221.584761) "></path>
                        <path d="M29,59 C52.7773077,47.7607877 66.7773077,45.3803939 71,51.8588184 C76.971139,61.0196975 65.4784755,111.960794 71,113.858818 C84.3333333,105.192152 100.333333,95.525485 119,84.8588184 L119,102.358818 C94.3333333,126.786273 74.6666667,145.619606 60,158.858818 C39.3333333,138.286273 29,105 29,59 Z" id="Rectangle-Copy-6" fill="#333333"></path>
                        <path d="M27.163707,0 C39.8303737,6 54.163707,22 70.163707,48 C78.054569,110 89.7212357,158.333333 105.163707,193 C103.765609,219.563864 72.2212027,225.143739 62.163707,200 C19.163707,126 -32.836293,90 27.163707,0 Z" id="Rectangle-Copy-5" fill="#1A1A1A"></path>
                        <path d="M201,238 C205.226986,242.497947 212.226986,231.997947 222,206.5 C215.030498,172.833333 205.697165,144.333333 194,121 C160.087703,121 124.484333,152.309692 103,169 C98.5357405,172.468102 90.5357405,193.134769 79,231 C113.213937,209.52043 136.213937,195.187096 148,188 C163.849382,178.335108 176.471838,161.934602 183,165 C203.714941,174.727016 187.840479,223.99692 201,238 Z" id="Rectangle-Copy-4" fill="#1A1A1A"></path>
                        <path d="M197,204.950263 C197,235 202,233 193.695652,278 C226,300 230,307.950263 238,329.950263 C259,332 259,334.950263 277,334.950263 C281,329.950263 285.082846,325.03311 282,321.950263 C274,312.950263 262,318 247,312.950263 C219,266 219,260 211.545748,217 C209.390353,211.149644 200.807459,198.910845 197,204.950263 Z" id="Path-5" fill="#D57140"></path>
                        <path d="M197,241 C204.697165,247 212.363832,252.333333 220,257 L197,142 C146.656222,152.206461 114.322889,162.873128 100,174 C95.7077187,177.3345 73.1411369,186.042295 66.5967857,202.5 C62.9312926,211.717966 65.947564,227.742642 76,236 C88.5758254,241.309793 126.320905,207.780644 144,197 C159.849382,187.335108 165,174 172,174 C195,179 193.695652,193 197,241 Z" id="Rectangle-Copy-3" fill="#1A1A1A"></path>
                        <path d="M19,48 C20.8021217,30.4702704 54.6659616,31.1411816 61,40.8588184 C66.971139,50.0196975 55.4784755,100.960794 61,102.858818 C74.3333333,94.1921517 90.3333333,84.525485 109,73.8588184 L109,91.3588184 C84.3333333,115.786273 64.6666667,134.619606 50,147.858818 C19,117 15.3021217,83.9702704 19,48 Z" id="Rectangle-Copy-2" fill="#333333"></path>
                    </g>
                    <g id="Group" transform="translate(85.602873, 78.310253) rotate(38.000000) translate(-85.602873, -78.310253) translate(25.602873, 25.810253)">
                        <path d="M59.2670499,91.523556 L68.4172047,69.9770781 C91.1428992,60.1888428 102.505746,56.1104114 102.505746,57.741784 C102.505746,59.3731565 103.125538,57.5378624 104.365121,52.2359016 L111.802621,47.9535487 L115.521371,40.6123722 L119.859913,28.3770781 C95.4814408,37.3496271 81.8460242,41.4280585 78.953663,40.6123722 C76.0613019,39.7966859 73.7887325,33.6790389 72.1359547,22.259431 L43.0057464,36.941784 C38.4606075,21.0359016 33.5022742,8.80060749 28.1307464,0.235901607 C33.0890797,24.0947251 20.0734547,24.7064898 29.3703297,39.3888428 C22.4697915,42.0204308 7.67762138,13.6947251 0.859913048,10.6359016 C3.95887138,44.8947251 -1.61925362,30.2123722 2.71928805,49.7888428 C7.26442694,56.7221761 11.8095658,62.43198 16.3547047,66.9182545 L20.6932464,104.235902 L31.8494964,92.0006075 L59.2670499,91.523556 Z" id="Path" fill="#D57140"></path>
                        <path d="M115.26903,36.7665933 C88.0592243,44.1143649 77.4883845,57.5954221 59.727091,53.937552 C41.5083318,60.5422935 30.0868275,67.275097 25.462578,74.1359627 C23.8109651,78.2200468 22.3658038,88.430257 21.1270942,104.766593 L32.2754813,93.1269537 L58.1034944,91.6585422 L68.8174167,71.6855122 C90.2883845,61.475302 101.643223,57.1870137 102.881933,58.8206474 C103.707739,58.0038306 104.327094,55.9617885 104.739997,52.6945212 L112.172255,48.406233 C115.060873,43.7171269 116.712486,40.4498597 117.127094,38.6044312 C116.507739,37.9918185 115.26903,36.7665933 115.26903,36.7665933 Z" id="Path-3" fill="#FFFFFF" opacity="0.959658668"></path>
                        <path d="M18.5238408,53.8756854 C18.5238408,49.8545214 22.3856295,45.0291245 30.1092067,39.3994949 C22.3856295,38.5952621 14.0522961,30.7539923 5.1092067,15.8756854 L18.5238408,53.8756854 Z" id="Path-4" fill="#FBFBFB"></path>
                    </g>
                    <path d="M136.158116,95.6868783 C138.71549,100.4917 140.756195,102.623659 142.280233,102.082756 C144.994177,101.119537 146.030233,94.9844609 146.030233,92.026838 C144.363566,92.026838 141.07286,93.2468514 136.158116,95.6868783 Z" id="Path-2" fill="#000000" transform="translate(141.094174, 97.095845) rotate(37.000000) translate(-141.094174, -97.095845) "></path>
                    <polygon id="Path-7" fill="#FBFBFB" points="34 102.5 40 94 71 104.517852 71 114"></polygon>
                    <path d="M70,115 C71.3564507,119.079038 73.5266695,121.509034 75,120.035703 C77,114 76,115 76,111 C73.4760751,109 71.4760751,108 70,108 C69.2376338,110.374124 69.2376338,112.707458 70,115 Z" id="Path-8" fill="#F04343"></path>
                </g>
       
            </g>
        </g>
    </g>
</svg>
	<div>
		<h5>Something seems to be amiss</h5>
		<h6>The page you are looking for cannot be found</h6>
		<a>Let's head on home and find something new</a>
	</div>

</main>
            
          
!
            
              main {
	width: 100vw;
	height: 1000px;
	background: linear-gradient(145deg,  #1A1A1A 0%, #1A1A1A 40%,  #F0EEE9 40%, #F0EEE9 100%);
	text-align: center;
}

h1 {
	z-index: 10;
	padding-top: 20vh;
	font-size: 10rem;
	text-align: center;
	font-family: serif;
	color: #C89C1B;
}
h5 {font-size: 1.69rem;}
h6 {font-size: 1.3rem;}

h5,h6 {
	padding-bottom: 1rem;
	line-height: 1.2rem;
	width: 100%;
	color: #1A1A1A
}

a {
	margin-top: 1rem;
	border-bottom: dotted #C89C1B;
	color: #C89C1B;
	box-shadow: inset 0 0px 0  #C89C1B;
	transition: .2s all ease-in;
}
a:hover{
	box-shadow: inset 0 -100px 0 #C89C1B;
	color: #1a1a1a;
}

#fox {
  position: relative;
  height: 20rem;
  z-index: 3;
  top: 5vh;
  right: 2rem;
  animation-name: rock;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  }

@keyframes rock {
  to {transform: rotate(4deg);}
}

@media screen and (min-width: 700px){
	main > div {
		margin-top: -10rem;
	}
	h1 {
		font-size: 15rem;
	}
	h5 {font-size: 2rem;}
	h6 {font-size: 1.7rem;}
	h5,h6 {
	line-height: 1.5rem;
	width: 100%;
	color: #1A1A1A;
}
	#fox {
		
		height: 30rem;
		top: -5rem;
		right: 0rem;
	}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console