Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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.

HTML

            
              <div class="header">
  <h1 class="title">Codevember <span class="number"> #25 </span></h1>
  <h2 class="type">Avocado</h2>
  <div class="social">
    <a href="https://www.linkedin.com/in/rominamartinliberon/" class="social"><img src="http://www.freepngimg.com/thumb/linkedin/3-2-linkedin-download-png-thumb.png" alt="linkedin"></img></a>
		<a href="https://rominamartin.github.io/" class="social"><img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github"></img></a>
		<a href="https://twitter.com/rominamartinlib" class="social"><img src="https://i.imgsafe.org/43/431dd07874.png" alt="twitter"></img></a>
  </div>
</div>

<h2 class="description">YOU COMPLETE ME</h2>

<div class="content">
	<svg x="0px" y="0px" width="55%" viewBox="0 0 287.333 151.332">
		<g id="right">
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#010101" d="M269.267,82.083c0.037,4.235-0.494,8.421-1.377,12.546
				c-1.26,5.903-4.828,10.307-9.389,14.066c-6.934,5.717-14.702,9.702-23.494,11.63c-4.566,1.004-9.207,1.838-13.854,1.943
				c-6.672,0.148-13.33-0.462-19.635-3.037c-2.674-1.092-4.896-2.817-6.98-4.771c-3.593-3.369-7.539-6.413-10.298-10.564
				c-4.126-6.211-5.94-12.945-5.219-20.526c0.815-8.57,3.592-16.306,8.688-23.118c4.08-5.455,7.653-11.21,11.173-17.016
				c1.746-2.881,2.275-6.139,2.879-9.366c0.825-4.419,1.458-8.877,3.484-12.979c3.986-8.071,13.166-13.506,21.729-12.278
				c9.423,1.354,16.274,6.385,19.958,15.384c1.561,3.809,2.074,7.881,3.094,11.826c1.848,7.168,5.092,13.689,9.373,19.719
				c2.029,2.857,3.826,5.871,5.605,8.893C268.22,69.889,269.355,75.835,269.267,82.083z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#9ACC76" d="M207.786,20.309c1.913-3.313,4.647-5.817,7.944-7.645
				c3.143-1.74,6.188-1.176,9.027,0.92c5.178,3.819,8.615,8.73,9.322,15.239c1.152,10.603,5.746,19.673,12.119,28.016
				c3.268,4.276,6.543,8.566,8.6,13.623c3.047,7.497,4.15,15.206,2.426,23.173c-0.891,4.117-3,7.675-5.713,10.866
				c-2.496,2.938-5.266,5.597-8.3,7.973c-3.502,1.999-7.413,2.531-11.303,3.043c-7.299,0.96-14.452-0.084-21.437-2.13
				c-5.096-1.489-9.641-3.993-13.559-7.778c-2.869-2.77-5.271-5.737-6.648-9.423c-1.289-3.445-1.862-7.002-1.81-10.782
				c0.087-6.139,2.58-11.416,4.874-16.847c2.262-5.352,5.184-10.418,7.008-15.947c2.004-6.073,3.759-12.214,4.104-18.675
				C204.693,29.2,205.677,24.606,207.786,20.309z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#455637" d="M223.679,10.842c2.89-0.826,5.462-0.166,8.021,0.818
				c8.541,3.283,13.191,9.734,14.975,18.463c1.18,5.772,2.652,11.441,5.197,16.783c1.857,3.899,4.473,7.322,6.838,10.908
				c2.547,3.861,5.199,7.679,6.793,12.088c1.014,2.808,1.553,5.719,1.734,8.666c0.373,5.991-0.277,11.919-1.918,17.688
				c-1.189,4.182-3.986,7.387-7.125,10.267c-3.381,3.104-7.391,5.271-11.424,7.385c-0.295,0.156-0.6,0.3-0.904,0.436
				c-0.32,0.145-0.705,0.23-0.93-0.063c-0.303-0.398,0.166-0.586,0.375-0.786c1.297-1.242,2.58-2.504,3.932-3.682
				c5.48-4.783,8.803-10.826,10.424-17.843c0.734-3.178,0.266-6.409,0.037-9.601c-0.24-3.369-0.967-6.667-2.084-9.868
				c-1.92-5.503-4.941-10.372-8.502-14.949c-3.002-3.859-5.291-8.199-8.011-12.248c-2.77-4.122-3.57-8.825-4.466-13.538
				c-0.659-3.47-1.137-6.993-2.732-10.221c-2.2-4.445-5.682-7.675-9.734-10.378C224.046,11.081,223.916,10.997,223.679,10.842z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#6B8C51" d="M207.786,20.309c-0.359,1.451-0.927,2.842-1.38,4.261
				c-0.984,3.088-1.445,6.247-1.621,9.44c-0.215,3.89-1,7.661-1.928,11.421c-1.371,5.559-3.371,10.888-5.887,16.021
				c-2.387,4.87-4.478,9.867-6.541,14.876c-0.977,2.374-1.26,4.892-1.518,7.433c-0.391,3.842,0.023,7.563,1.264,11.194
				c1.27,3.724,3.189,7.029,6.248,9.616c1.525,1.292,2.863,2.79,4.486,3.991c1.459,1.08,3.078,1.828,4.686,2.6
				c5.176,2.488,10.74,3.454,16.389,4.063c5.662,0.612,11.215,0.09,16.724-1.354c1.53-0.402,2.931-1.174,4.504-1.397
				c-3.12,3.513-7.091,5.533-11.64,6.379c-8.682,1.609-17.363,1.705-25.979-0.466c-2.993-0.756-5.745-2.08-8.058-4.158
				c-3.512-3.155-7.28-6.08-10.201-9.813c-4.664-5.966-6.98-12.639-6.326-20.399c0.828-9.824,4.641-18.221,10.73-25.833
				c4.524-5.657,8.471-11.738,10.795-18.682c1.272-3.803,1.502-7.86,2.456-11.752C205.625,25.154,206.187,22.539,207.786,20.309z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#020102" d="M202.489,75.78c1.053-6.705,4.745-11.564,10.77-14.438
				c6.173-2.943,12.33-2.59,18.067,1.346c5.944,4.077,8.871,9.681,8.405,16.978c-0.216,3.381-1.009,6.572-2.514,9.614
				c-1.378,2.785-3.069,5.261-5.874,6.797c-1.713,1.514-3.867,2.088-6.004,2.277c-3.323,0.294-6.689,0.388-9.999-0.294
				c-5.416-1.113-8.933-4.505-11.069-9.452c-1.616-3.739-2.412-7.643-2.027-11.74C202.279,76.494,202.312,76.122,202.489,75.78z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#6B8D51" d="M202.489,75.78c-0.115,3.987,0.175,7.902,1.665,11.672
				c2.349,5.938,6.336,9.818,12.918,10.519c4.906,0.52,9.746,0.49,14.271-1.894c-2.479,4.307-6.435,5.869-11.165,6.093
				c-3.777,0.176-7.429-0.222-10.779-2.098c-1.786-1.002-3.291-2.327-4.491-4.049c-1.15-1.652-2.223-3.298-2.916-5.212
				c-1.148-3.157-1.092-6.373-0.664-9.616c0.189-1.439,0.232-2.903,0.641-4.313C202.083,76.478,202.135,76.064,202.489,75.78z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#AC7132" d="M209.294,66.026c6.357-6.894,19.48-7.757,25.938,2.921
				c2.963,4.901,3.354,10.036,1.752,15.414c-0.568,1.909-1.123,3.845-2.349,5.482c-1.143,1.272-2.737,1.734-4.249,2.308
				c-4.195,1.592-8.541,1.734-12.827,0.66c-3.261-0.815-5.769-2.81-7.396-5.923c-2.393-4.581-3.471-9.301-2.863-14.504
				C207.57,70.065,208.175,68.003,209.294,66.026z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#774E23" d="M209.294,66.026c-0.037,0.287-0.015,0.602-0.122,0.859
				c-2.718,6.533-2.269,12.878,1.014,19.103c0.979,1.856,1.946,3.607,3.821,4.796c1.805,1.14,3.694,1.795,5.783,2.089
				c3.273,0.462,6.473,0.24,9.611-0.777c1.496-0.486,3.01-0.942,4.317-1.882c0.26-0.186,0.608-0.25,0.916-0.37
				c-1.49,2.93-3.96,4.728-6.993,5.691c-3.73,1.186-7.582,1.144-11.388,0.403c-4.805-0.938-8.122-3.829-9.873-8.348
				c-1.87-4.83-2.679-9.811-1.146-14.926C206.001,70.105,207.361,67.885,209.294,66.026z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#030203" d="M209.131,43.563c-1.253-1.504-1.15-3.724,0.218-5.123
				c1.396-1.43,3.874-1.857,5.862-1.012c2.137,0.907,3.265,2.813,2.762,4.785c-0.097,0.374,0.024,1.029-0.506,1.067
				c-0.672,0.046-0.67-0.613-0.752-1.033c-0.167-0.838-0.54-1.604-0.992-2.342c-0.71-1.162-1.896-1.546-3.33-1.274
				c-1.375,0.263-2.171,0.996-2.29,2.268C210.018,41.83,210.035,42.823,209.131,43.563z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#030203" d="M224.414,48.096c1.07,1.504,0.982,3.724-0.186,5.123
				c-1.193,1.43-3.309,1.857-5.007,1.012c-1.825-0.907-2.788-2.813-2.358-4.785c0.082-0.374-0.021-1.029,0.432-1.067
				c0.574-0.046,0.572,0.613,0.643,1.033c0.143,0.838,0.461,1.604,0.847,2.342c0.606,1.162,1.619,1.546,2.845,1.274
				c1.174-0.263,1.854-0.996,1.955-2.268C223.657,49.83,223.642,48.836,224.414,48.096z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#030203" d="M223.627,43.698c-1.254-1.504-1.15-3.724,0.217-5.123
				c1.397-1.43,3.874-1.857,5.863-1.012c2.137,0.907,3.265,2.813,2.761,4.785c-0.096,0.374,0.025,1.029-0.505,1.067
				c-0.673,0.046-0.67-0.613-0.753-1.033c-0.167-0.838-0.539-1.604-0.991-2.342c-0.71-1.162-1.896-1.546-3.331-1.274
				c-1.374,0.263-2.17,0.996-2.289,2.268C224.513,41.965,224.531,42.958,223.627,43.698z"/>
			<path class="arm" fill="#010101" d="M166.346,38.709c0.077,2.31-0.16,4.539-0.389,6.797c0.034,0.057,0.069,0.111,0.102,0.167
				c1.383,1.185,2.28,2.799,3.458,4.25c1.737,2.143,3.643,4.141,5.68,5.98c3.575,3.23,7.576,5.802,11.519,8.506
				c0.541,0.372-0.159,1.229-0.694,1.109c-4.458-1-9.398-4.945-13.333-8.566c-2.36-2.17-5.56-5.01-7.333-8.146
				c-0.108-0.02-0.217-0.059-0.313-0.149c-1.073-0.984-2.282-1.845-3.631-2.36c-0.991-0.377-2.406-0.189-2.934-1.25
				c-0.082-0.165-0.019-0.38,0.081-0.518c0.047-0.064,0.093-0.129,0.139-0.193c0.178-0.246,0.501-0.353,0.785-0.311
				c1.416,0.203,2.742,0.673,3.937,1.383c-0.274-0.37-0.547-0.741-0.814-1.121c-0.603-0.854-1.254-1.649-1.477-2.697
				c-0.138-0.65,0.7-1.312,1.261-0.953c0.891,0.568,1.399,1.451,1.988,2.332c0.045,0.067,0.086,0.136,0.132,0.203
				c-0.218-1.384-0.392-2.775-0.44-4.207C164.016,37.441,166.295,37.177,166.346,38.709z"/>
			<path class="arm" fill="#010101" d="M256.282,60.987c6.502-4.731,11.311-10.35,16.24-16.5c-0.107-0.505-0.164-1.039-0.224-1.585
				c-0.174-1.597-0.313-2.987,0.809-4.186c0.03-0.033,0.097-0.034,0.126,0.002c0.645,0.82,0.792,1.668,0.9,2.6
				c0.372-0.629,0.766-1.244,1.203-1.818c0.726-0.952,2.137-0.125,1.601,0.969c-0.488,0.995-1.089,1.955-1.747,2.871
				c0.007,0.139-0.011,0.286-0.091,0.446c-0.134,0.267-0.279,0.528-0.421,0.791c0.005,0.03,0.007,0.06,0.012,0.09
				c1.646-0.412,3.351-0.649,5.006-0.955c1.148-0.212,1.606,1.557,0.457,1.759c-1.809,0.318-3.648,0.712-5.49,0.892
				c-0.012,0.059-0.018,0.116-0.033,0.175c-0.103,0.409-11.2,12.025-17.313,16.3C256.191,63.625,255.197,61.776,256.282,60.987z"/>
			<path class="shy" opacity="0.33" fill="#F76A8A" d="M215.13,47.126c-0.335-1.241-1.539-1.788-2.725-1.571
				c-1.03,0.188-2.061,0.414-3.077,0.662c-1.018,0.249-2.267,0.613-2.702,1.671c-0.271,0.66-0.232,1.276,0.266,1.816
				c0.854,0.93,2.203,0.805,3.344,0.646c1.108-0.155,2.222-0.299,3.323-0.5C214.74,49.634,215.423,48.217,215.13,47.126z"/>
			<path class="shy" opacity="0.33" fill="#F76A8A" d="M234.451,43.571c-2.063,0.155-4.584,0.291-5.815,2.194
				c-0.442,0.685-0.127,1.795,0.605,2.147c1.644,0.789,3.477,0.173,5.221,0.121C237.352,47.946,237.295,43.356,234.451,43.571z"/>
		</g>
		<path class="leg" fill="#010101" d="M199.314,117.2c-0.127-0.385-0.769-0.494-0.899-0.006
			c-2.02,7.516-2.218,15.308-2.337,23.043c-0.755,0.021-1.386,0.351-1.884,1.027c-0.229,0.311,0.056,0.694,0.388,0.726
			c0.052,0.005,0.104,0.006,0.155,0.009c0.089,0.049,0.199,0.067,0.328,0.031c0.036-0.01,0.072-0.02,0.107-0.03
			c0.479-0.028,0.926-0.154,1.368-0.381c0.192-0.053,0.384-0.106,0.575-0.16c0.197-0.056,0.363-0.233,0.363-0.448
			c0-7.829,0.656-15.644,1.981-23.361C199.493,117.462,199.423,117.308,199.314,117.2z"/>
		<path class="leg" fill="#010101" d="M239.828,144.245c-0.006-0.228-0.127-0.438-0.334-0.507
			c-0.894-0.294-1.742-0.682-2.558-1.181c-0.049-0.031-0.1-0.047-0.149-0.058c-0.085-0.238-0.154-0.491-0.211-0.751
			c-0.055-3.792-0.225-7.578-0.512-11.354c-0.213-3.883-0.551-7.754-1.001-11.61c-0.042-0.365-0.343-0.451-0.59-0.347
			c-0.285-0.037-0.629,0.211-0.572,0.623c0.511,3.643,0.909,7.302,1.196,10.972c0.107,1.895,0.188,3.793,0.236,5.691
			c0.039,1.514-0.125,4.075,0.305,6.165c0.011,0.769,0.018,1.536,0.018,2.305c0,0.209,0.131,0.459,0.336,0.506l3.009,0.694
			c0.127,0.027,0.239,0.004,0.332-0.049c0.254,0.035,0.523-0.118,0.514-0.479C239.84,144.659,239.834,144.452,239.828,144.245z"/>
		<g id="left">
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#010101" d="M24.872,80.474c-0.037,4.235,0.494,8.421,1.377,12.546
				c1.26,5.903,4.828,10.307,9.389,14.066c6.934,5.717,14.702,9.702,23.494,11.63c4.566,1.004,9.207,1.838,13.854,1.943
				c6.672,0.148,13.33-0.462,19.635-3.037c2.674-1.092,4.896-2.817,6.98-4.771c3.593-3.369,7.539-6.413,10.298-10.564
				c4.126-6.211,5.94-12.945,5.219-20.526c-0.815-8.57-3.592-16.306-8.688-23.118c-4.08-5.455-7.653-11.21-11.173-17.016
				c-1.746-2.881-2.275-6.139-2.879-9.366c-0.825-4.419-1.458-8.877-3.484-12.979C84.907,11.209,75.728,5.775,67.164,7.002
				c-9.423,1.354-16.274,6.385-19.958,15.384c-1.561,3.809-2.074,7.881-3.094,11.826c-1.848,7.168-5.092,13.689-9.373,19.719
				c-2.029,2.857-3.826,5.871-5.605,8.893C25.919,68.281,24.784,74.227,24.872,80.474z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#9ACC76" d="M86.354,18.701c-1.913-3.313-4.647-5.817-7.944-7.645
				c-3.143-1.74-6.188-1.176-9.027,0.92c-5.178,3.819-8.615,8.73-9.322,15.239c-1.152,10.603-5.746,19.673-12.119,28.016
				c-3.268,4.276-6.543,8.566-8.6,13.623c-3.047,7.497-4.15,15.206-2.426,23.173c0.891,4.117,3,7.675,5.713,10.866
				c2.496,2.938,5.266,5.597,8.3,7.973c3.502,1.999,7.413,2.531,11.303,3.043c7.299,0.96,14.452-0.084,21.437-2.13
				c5.096-1.489,9.641-3.993,13.559-7.778c2.869-2.77,5.271-5.737,6.648-9.423c1.289-3.445,1.862-7.002,1.81-10.782
				c-0.087-6.139-2.58-11.416-4.874-16.847c-2.262-5.352-5.184-10.418-7.008-15.947c-2.004-6.073-3.759-12.214-4.104-18.675
				C89.446,27.591,88.462,22.998,86.354,18.701z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#455637" d="M70.46,9.234c-2.89-0.826-5.462-0.166-8.021,0.818
				c-8.541,3.283-13.191,9.734-14.975,18.463c-1.18,5.772-2.652,11.441-5.197,16.783c-1.857,3.899-4.473,7.322-6.838,10.908
				c-2.547,3.861-5.199,7.679-6.793,12.088c-1.014,2.808-1.553,5.719-1.734,8.666c-0.373,5.991,0.277,11.919,1.918,17.688
				c1.189,4.182,3.986,7.387,7.125,10.267c3.381,3.104,7.391,5.271,11.424,7.385c0.295,0.156,0.6,0.3,0.904,0.436
				c0.32,0.145,0.705,0.23,0.93-0.063c0.303-0.398-0.166-0.586-0.375-0.786c-1.297-1.242-2.58-2.504-3.932-3.682
				c-5.48-4.783-8.803-10.826-10.424-17.843c-0.734-3.178-0.266-6.409-0.037-9.601c0.24-3.369,0.967-6.667,2.084-9.868
				c1.92-5.503,4.941-10.372,8.502-14.949c3.002-3.859,5.291-8.199,8.011-12.248c2.77-4.122,3.57-8.825,4.466-13.538
				c0.659-3.47,1.137-6.993,2.732-10.221c2.2-4.445,5.682-7.675,9.734-10.378C70.093,9.472,70.224,9.388,70.46,9.234z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#7D9E5F" d="M86.354,18.701c0.359,1.451,0.927,2.842,1.38,4.261
				c0.984,3.088,1.445,6.247,1.621,9.44c0.215,3.89,1,7.661,1.928,11.421c1.371,5.559,3.371,10.888,5.887,16.021
				c2.387,4.87,4.478,9.867,6.541,14.876c0.977,2.374,1.26,4.892,1.518,7.433c0.391,3.842-0.023,7.563-1.264,11.194
				c-1.27,3.724-3.189,7.029-6.248,9.616c-1.525,1.292-2.863,2.79-4.486,3.991c-1.459,1.08-3.078,1.828-4.686,2.6
				c-5.176,2.488-10.74,3.454-16.389,4.063c-5.662,0.612-11.215,0.09-16.724-1.354c-1.53-0.402-2.931-1.174-4.504-1.397
				c3.12,3.513,7.091,5.533,11.64,6.379c8.682,1.609,17.363,1.705,25.979-0.466c2.993-0.756,5.745-2.08,8.058-4.158
				c3.512-3.155,7.28-6.08,10.201-9.813c4.664-5.966,6.98-12.639,6.326-20.399c-0.828-9.824-4.641-18.221-10.73-25.833
				c-4.524-5.657-8.471-11.738-10.795-18.682c-1.272-3.803-1.502-7.86-2.456-11.752C88.515,23.545,87.952,20.93,86.354,18.701z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#020102" d="M91.65,74.171c-1.053-6.705-4.745-11.564-10.77-14.438
				c-6.173-2.943-12.33-2.59-18.067,1.346c-5.944,4.077-8.871,9.681-8.405,16.978c0.216,3.381,1.009,6.572,2.514,9.614
				c1.378,2.785,3.069,5.261,5.874,6.797c1.713,1.514,3.867,2.088,6.004,2.277c3.323,0.294,6.689,0.388,9.999-0.294
				c5.416-1.113,8.933-4.505,11.069-9.452c1.616-3.739,2.412-7.643,2.027-11.74C91.86,74.885,91.827,74.513,91.65,74.171z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#6B8C51" d="M84.845,64.417c-6.357-6.894-19.48-7.757-25.938,2.921
				c-2.963,4.901-3.354,10.036-1.752,15.414c0.568,1.909,1.123,3.845,2.349,5.482c1.143,1.272,2.737,1.734,4.249,2.308
				c4.195,1.592,8.541,1.734,12.827,0.66c3.261-0.815,5.769-2.81,7.396-5.923c2.393-4.581,3.471-9.301,2.863-14.504
				C86.569,68.457,85.964,66.395,84.845,64.417z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#6B8C51" d="M84.845,64.417c0.037,0.287,0.015,0.602,0.122,0.859
				c2.718,6.533,2.269,12.878-1.014,19.103c-0.979,1.856-1.946,3.607-3.821,4.796c-1.805,1.14-3.694,1.795-5.783,2.089
				c-3.273,0.462-6.473,0.24-9.611-0.777c-1.496-0.486-3.01-0.942-4.317-1.882c-0.26-0.186-0.608-0.25-0.916-0.37
				c1.49,2.93,3.96,4.728,6.993,5.691c3.73,1.186,7.582,1.144,11.388,0.403c4.805-0.938,8.122-3.829,9.873-8.348
				c1.87-4.83,2.679-9.811,1.146-14.926C88.138,68.497,86.778,66.277,84.845,64.417z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#060404" d="M82.859,38.851c-0.095-0.936-0.151-1.932-1.368-1.907
				c-1.116,0.02-1.104,0.983-1.095,1.766c0.007,0.836,0.073,1.854,1.169,1.897C82.673,40.649,82.782,39.677,82.859,38.851z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#070504" d="M65.521,38.559c-0.199-0.659-0.066-1.684-1.139-1.594
				c-0.787,0.068-1.337,0.772-1.297,1.592c0.038,0.816,0.174,1.854,1.287,1.826C65.408,40.355,65.42,39.381,65.521,38.559z"/>
			<path class="straight" d="M65.794,136.336c-0.472-0.263-1.004-0.422-1.574-0.512c-0.004-5.646-0.009-11.292-0.014-16.938
				c0-0.587-1.256-0.615-1.255-0.024c0.005,5.906,0.009,11.812,0.015,17.717c0,0.262,0.265,0.442,0.611,0.47
				c0.566,0.044,1.132,0.089,1.699,0.134c0.056,0.004,0.107,0.004,0.156-0.001c0.218,0,0.444-0.084,0.557-0.214
				C66.184,136.744,66.065,136.488,65.794,136.336z"/>
			<path class="straight" d="M84.927,136.336c-0.472-0.263-1.004-0.422-1.574-0.512c-0.004-5.646-0.009-11.292-0.014-16.938
				c0-0.587-1.256-0.615-1.255-0.024c0.005,5.906,0.009,11.812,0.015,17.717c0,0.262,0.265,0.442,0.611,0.47
				c0.566,0.044,1.132,0.089,1.699,0.134c0.056,0.004,0.107,0.004,0.156-0.001c0.218,0,0.444-0.084,0.557-0.214
				C85.317,136.744,85.198,136.488,84.927,136.336z"/>
			<path class="jump" display="none" d="M86.504,118.31c-0.674,3.935,4.254,8.034-7.535,13.741
				c0.873,0.388,1.646,0.957,2.223,1.643c0.285,0.341,0.11,0.893-0.456,0.718c-0.933-0.289-1.786-0.681-2.602-1.217
				c-0.039-0.024-0.072-0.051-0.102-0.078c-0.004-0.001-0.008-0.002-0.012-0.004c-0.382-0.11-1.134-1.125-0.876-1.315
				c10.705-7.884,7.006-7.819,7.292-13.688C84.462,117.554,86.613,117.672,86.504,118.31z"/>
			<path class="jump" display="none" d="M60.66,119.766c-0.179,3.988-5.866,6.946,4.44,15.029
				c-0.936,0.193-1.812,0.586-2.521,1.133c-0.351,0.272-0.297,0.849,0.293,0.798c0.973-0.084,1.889-0.285,2.801-0.636
				c0.043-0.016,0.081-0.034,0.116-0.054c0.004-0.001,0.008-0.001,0.012-0.002c0.397-0.026,1.347-0.858,1.136-1.099
				c-8.783-9.98-5.183-9.131-4.214-14.926C62.816,119.462,60.689,119.121,60.66,119.766z"/>
			<path fill="#4C1334" d="M77.734,51.916c0.21-0.418,0.339-0.854,0.426-1.298c0.081-1.967-0.108-3.971-0.174-6.108
				c-2.111-0.306-4.432-0.009-6.482,0.317c-0.15,0.073-0.273,0.203-0.307,0.415c-0.389,2.494-0.055,8.448,3.429,8.812
				C76.018,54.199,77.158,53.063,77.734,51.916z"/>
			<path fill="#E26D98" d="M76.319,50.461c-1.727-0.708-3.49-0.161-4.447,1.21c0.546,1.276,1.417,2.243,2.754,2.382
				c1.392,0.146,2.532-0.991,3.108-2.138c0.072-0.143,0.123-0.29,0.177-0.436C77.446,51.059,76.919,50.707,76.319,50.461z"/>
			<path class="arm" d="M122.868,80.5c-0.107-2.626,0.159-5.163,0.411-7.733c-0.039-0.063-0.081-0.125-0.12-0.189
				c-1.641-1.333-2.712-3.159-4.11-4.797c-2.066-2.419-4.33-4.672-6.746-6.742c-4.245-3.638-8.985-6.521-13.658-9.557
				c-0.642-0.417,0.031-1.25,0.646-1.06c5.953,1.838,11.297,5.319,15.967,9.396c2.8,2.445,6.597,5.641,8.713,9.189
				c0.128,0.021,0.255,0.064,0.371,0.166c1.272,1.107,2.707,2.074,4.303,2.646c1.17,0.42,2.84,0.191,3.47,1.392
				c0.099,0.188,0.025,0.433-0.091,0.59c-0.055,0.073-0.109,0.147-0.164,0.221c-0.208,0.281-0.588,0.406-0.925,0.362
				c-1.671-0.218-3.24-0.738-4.657-1.533c0.327,0.418,0.653,0.836,0.972,1.267c0.716,0.965,1.49,1.862,1.76,3.052
				c0.167,0.737-0.816,1.499-1.481,1.097c-1.054-0.637-1.661-1.636-2.362-2.631c-0.054-0.077-0.104-0.154-0.156-0.23
				c0.264,1.572,0.481,3.152,0.548,4.779C125.628,81.918,122.939,82.242,122.868,80.5z"/>
			<path class="arm" d="M39.739,49.502c-8.266,5.798-14.424,12.748-20.745,20.363c0.123,0.637,0.184,1.308,0.247,1.995
				c0.184,2.01,0.329,3.757-1.105,5.238c-0.04,0.04-0.123,0.04-0.158-0.005c-0.793-1.044-0.959-2.111-1.076-3.284
				c-0.48,0.782-0.987,1.545-1.548,2.256c-0.933,1.18-2.687,0.111-1.989-1.25c0.635-1.239,1.41-2.43,2.255-3.566
				c-0.005-0.174,0.02-0.358,0.125-0.558c0.173-0.331,0.36-0.657,0.544-0.983c-0.004-0.038-0.008-0.075-0.012-0.113
				c-2.076,0.48-4.22,0.742-6.306,1.09c-1.445,0.241-1.983-1.989-0.534-2.219c2.277-0.359,4.594-0.816,6.91-1.001
				c0.017-0.074,0.025-0.145,0.045-0.22c0.138-0.511,14.32-14.854,22.087-20.088C39.909,46.193,41.118,48.534,39.739,49.502z"/>
			<path class="shy" opacity="0.33" fill="#F76A8A" d="M67.655,43.536c-0.242-1.172-1.332-1.747-2.446-1.611
				c-0.968,0.118-1.938,0.27-2.897,0.445c-0.96,0.174-2.142,0.445-2.605,1.403c-0.29,0.599-0.287,1.173,0.146,1.704
				c0.743,0.912,2.003,0.871,3.072,0.786c1.04-0.083,2.083-0.154,3.118-0.28C67.154,45.846,67.868,44.566,67.655,43.536z"/>
			<path class="shy" opacity="0.33" fill="#F76A8A" d="M85.579,45.452c2.692,0.079,2.894-4.192,0.237-4.15
				c-1.926,0.03-4.278,0.016-5.528,1.717"/>
		</g>
		<g id="heart">
			<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" fill="#D8224E" d="M145.909,30.303
				c-3.081-0.142-7.63-6.142-7.415-10.834c0.102-2.203,2.07-3.861,4.273-3.76c2.203,0.102,3.706,2.321,3.666,3.208
				c0.04-0.887,1.74-2.959,3.943-2.858s4.012,1.933,3.91,4.136C154.071,24.887,149.353,30.461,145.909,30.303z"/>
		</g>
	</svg>
</div>
            
          
!

CSS

            
              html, body {
  margin:0;
  width: 100%;
  height: 100%;
	background: #f4ffe1;
  font-family: "Quicksand";
  position: absolute;
  overflow: hidden;
}

.header { position: absolute; z-index: 1;}
.header h1, h2 { margin: 0; }
.header h1 { color: #533156; }
.number {color: #9ACC76}
.type { color: #6B8C51; text-shadow: 2px 4px 3px rgba(0, 119, 119,0.3); }
.social a img { height: 1.5em; }
.description { color: rgba(172, 113, 50, .5); text-shadow: 1px 1px #f6f1ed; text-align: center; margin-top: 80px; padding-bottom: 5px; font-family: 'Coming Soon'; font-weight: bold}
h3.instructions {
  margin: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 10px
}

.content {
  text-align: center;
  width: 100%;
}

svg {
  max-width: 550px;
}

#heart {
  transform-origin: bottom;
  animation: swing 2s linear forwards infinite, pulse 4s linear alternate infinite;
}

#left, #right {
  transform-origin: bottom;
  animation: swing 2s linear alternate infinite;
}

#left .arm {
  transform-origin: center;
  animation: swing 1s linear forwards infinite;
}

@keyframes pulse {
  0% {opacity: .6}
  50% {opacity: .8}
  100% {opacity: 1}
}

@keyframes swing {
  0%{transform: rotate(3deg);}
  50%{transform: rotate(-3deg)}
  100%{transform: rotate(3deg);}
}
            
          
!

JS

            
              
            
          
!
999px

Console