cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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>
<head>
</head>
<body class="perspective">
	<div class="conntainer">
	<div id="sun">
		<img src="https://lh3.googleusercontent.com/kH8UJOr16_mOsNCZjhOF_NYQsabtVwD8k2pmorpTGtps2Y2mstiJrTgLmoIyg1VsyzJjaAZte5Pr-GgGP8zmJXLE4Yr7w8hRmUijnHqoEIdw-BFeFi-q0J5VUBuCM3_v7GvnjRA-5BCKd6W4fEnqk7QRpjEYsZCa27PVyjrmSXekneAmL4wC7HsxcHajWNGjdZEvs90zAaIre2CVC_Zw-8pM0_-GFCOCkCDU0rlwqFytVsy3Beynaz09OULZnB78grXbHCQppj49wper3Ws9IN0-FNkEee6LqmelOtDdIk9U_tskekF_d8mAXJgHiHjy_4owVeoKZXnMatZibxENGNcBqR7QzqFyb4FgKJDR1hI9gqC2uAp7nWCpx3sfbbTq284NERVN-_9tPenpqhbX96Oid2WrlpUavZysoDPUe9DNC57fErKD8cpj9hEyenChuiUtOPT9oWBwT5UC-PhrOFRU-9GP29Knbh34KKwrh406UYTJpNp0Ih9GGCLykn0kpRQp1NWIcmvFd6RYg3mrWQUXFJaecwLxGGr71i7ZFDVBXq9H4kAoqYQ6lfCHo0K-qDqWaU2C2aL3b4uE3SISG9A7XtOXm__uM00bryegrKjIYan9HIxkEiwnr0vLucdwu50Vb87qVfr2aFSX_iJWPSlcU1fr131ZiaxRovR1fA=s638-no">
	</div>
	<div id="rainbow">
		<img src="https://lh3.googleusercontent.com/4xgnJnHOH6pXHcWVae1y3xydGDiZrPKOPzIGZMmyE9HpVtpkucNP2Y_DT2Yg0fMmrAh1IvxB6ALI48Bj78dl25e_SMy2GKQqBNt1hAfRCwz4aJy0Z8evEElTMR61nGPJPWN9zCoSdeiXd9nSjTaZByBmhI6iTS3YUDEs2JrEzDrg9wWn-WcsDXJaNJu6dxVmYtLz_TBFEDE4dcqdhnOkF20JMfeUsXJVyvsXXiCO3Ckall1r8IM9eb7966ZxuN9LSiA9DwK0YfT7mfI1lFoQcKXQVfvxD7i3Jlb6T79l6O-GaOrUJn9rb1d8w1uz4bKKeKoIZSE5DZhxUvixn530LmJ6DO6KH5OAxWcjnBaHdxOlWtKKPBD4S2hIF1YwCYi0jvlCa04tCptcddUV7ge-0QJmdwv0ZnXtLSWyJr8t1ngyGfspFFwvqBjgMWTcXaNltPatF0hHqh8GOa09ERe01yXF4f5o1caTY_vLItXuaVLhMopzH__zWwDAQkm7eToU-96Wcug5hOv1NCMseKCSldImqLNF8BXgr7pk3Bir9kF4f2A0YREWvmUmq5pWvIacCE0JRzklnG6GZ7TABcS06agZaTJDKTNcAge_yRgkrDlxjJDghgkxbe0tcpHAdSwaluNANbIbk_o8jhvYoiZO9fsLzoVILlsQb69kLOxmhQ=w1025-h638-no">
	</div>
	<div id="rain">
		<img src="https://lh3.googleusercontent.com/tcLawUWb25RHyGsgpt1FkKW08B5KTmu3GUuBlvxe5SsuHf9fdtc3n8Ys6qq4iRjW8FyIOHwi0vXdOWRjLLpShGmUvVokxbQIWynIdIhLuwXaXQLXJw04yQN8wmeECmSHgp4tvleWVOuP2Ewt8xDukY_D7U0Q0-PUvTekVWvWR_6jJcypyggGnfbR1CocTlimsdS43pdT0958ct-VYpPerjNbHwPUUztJtQuanLsCxCXNxm8tEXwJ0zNujr-zgGgQ8vgPKtSwospKfCD4sKF_Ify9Cy4hGhH1kVfazbp4uylXFu_uYYhf2QrYE5MqS4lUhblJy41L5V9zkBhKXYwklidpm4WiZxcWazvRZXWkulpNU8MON7rPfP_ebv1FWhv7JNhmYd1LSSymK93hmyss9sQC4q2Nt7fd6nTS-NjHj9ijSk4fle8Mfxx7PyyVJv7Y_bol-152OzWEwrLTkbULpk_wkzwE0EBQDF4RhJ5yGUd14wi-wc0GyA9R9SUo-zuKi-0d7o-KEX4agRfY7aQ8xI8UsQmJ8U1Siz1b3RkVe_t-LVwcy7yubExGU8XL-cDyqUBwyceGsM8ivrYAKhXHKsfyX-ecRo7XEA4I61CWzQeZicdy0z-LOz-mEsTSTcOdfPPlE-Ix1fxRzoso7G2CPa-14UjsXdBerFqiiXIbDw=w766-h638-no">
	</div>

	<div id="cloud-container">
		<div class="clouds" id="cloud1">
			<svg version="1.1" id="cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="314.47px" height="145.914px" viewBox="0 0 314.47 145.914" enable-background="new 0 0 314.47 145.914"
	 xml:space="preserve">
<polygon fill="#F2F2F2" points="128.713,51.681 149.678,13.164 184.782,0 234.024,13.651 250.601,60.944 300.332,72.958 
	314.47,117.5 276.441,137.002 232.074,122.375 208.671,130.664 180.394,122.863 140.415,145.914 90.685,120.425 36.079,145.914 
	0,119.938 11.701,90.684 55.581,80.446 79.958,49.73 "/>
<polygon fill="#EEEEEE" points="0,116.037 47.181,82.406 11.037,92.345 0,115.428 "/>
<polygon fill="#FFFFFF" points="33.863,144.319 44.421,84.373 0.344,120.185 "/>
<polygon fill="#EEEEEE" points="89.79,120.842 69.175,105.591 43.969,86.943 33.96,143.762 "/>
<polygon fill="#FFFFFF" points="78.05,52.134 87.127,118.872 61.524,72.958 "/>
<polygon fill="#FFFFFF" points="124.163,52.134 108.668,129.643 81.69,78.896 "/>
<polygon fill="#EEEEEE" points="145.295,143.101 122.631,59.793 122.631,136.799 "/>
<polygon fill="#FFFFFF" points="171.698,127.877 155.878,89.034 135.55,39.121 155.042,135.783 "/>
<polygon fill="#EEEEEE" points="246.061,47.992 143.056,25.331 155.234,87.452 "/>
<polygon fill="#EEEEEE" points="260.085,63.235 283.167,83.043 311.157,107.063 300.332,72.958 "/>
<polygon fill="#FFFFFF" points="276.441,137.002 284.832,84.471 301.38,124.213 "/>
<polygon fill="#EEEEEE" points="283.167,83.043 242.836,125.923 276.125,136.897 "/>
<polygon fill="#FFFFFF" points="260.085,64.601 232.074,122.375 200.381,67.837 "/>
<polygon fill="#EEEEEE" points="209.749,40.003 207.982,6.432 175.894,32.555 "/>
<polygon fill="#FFFFFF" points="180.394,122.863 200.381,67.837 208.671,130.664 "/>
</svg>
		</div>
		<div class="clouds" id="cloud2">
			<svg version="1.1" id="cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="314.47px" height="145.914px" viewBox="0 0 314.47 145.914" enable-background="new 0 0 314.47 145.914"
	 xml:space="preserve">
<polygon fill="#F2F2F2" points="128.713,51.681 149.678,13.164 184.782,0 234.024,13.651 250.601,60.944 300.332,72.958 
	314.47,117.5 276.441,137.002 232.074,122.375 208.671,130.664 180.394,122.863 140.415,145.914 90.685,120.425 36.079,145.914 
	0,119.938 11.701,90.684 55.581,80.446 79.958,49.73 "/>
<polygon fill="#EEEEEE" points="0,116.037 47.181,82.406 11.037,92.345 0,115.428 "/>
<polygon fill="#FFFFFF" points="33.863,144.319 44.421,84.373 0.344,120.185 "/>
<polygon fill="#EEEEEE" points="89.79,120.842 69.175,105.591 43.969,86.943 33.96,143.762 "/>
<polygon fill="#FFFFFF" points="78.05,52.134 87.127,118.872 61.524,72.958 "/>
<polygon fill="#FFFFFF" points="124.163,52.134 108.668,129.643 81.69,78.896 "/>
<polygon fill="#EEEEEE" points="145.295,143.101 122.631,59.793 122.631,136.799 "/>
<polygon fill="#FFFFFF" points="171.698,127.877 155.878,89.034 135.55,39.121 155.042,135.783 "/>
<polygon fill="#EEEEEE" points="246.061,47.992 143.056,25.331 155.234,87.452 "/>
<polygon fill="#EEEEEE" points="260.085,63.235 283.167,83.043 311.157,107.063 300.332,72.958 "/>
<polygon fill="#FFFFFF" points="276.441,137.002 284.832,84.471 301.38,124.213 "/>
<polygon fill="#EEEEEE" points="283.167,83.043 242.836,125.923 276.125,136.897 "/>
<polygon fill="#FFFFFF" points="260.085,64.601 232.074,122.375 200.381,67.837 "/>
<polygon fill="#EEEEEE" points="209.749,40.003 207.982,6.432 175.894,32.555 "/>
<polygon fill="#FFFFFF" points="180.394,122.863 200.381,67.837 208.671,130.664 "/>
</svg>
		</div>
		<div class="clouds" id="cloud3">
			<svg version="1.1" id="cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="314.47px" height="145.914px" viewBox="0 0 314.47 145.914" enable-background="new 0 0 314.47 145.914"
	 xml:space="preserve">
<polygon fill="#F2F2F2" points="128.713,51.681 149.678,13.164 184.782,0 234.024,13.651 250.601,60.944 300.332,72.958 
	314.47,117.5 276.441,137.002 232.074,122.375 208.671,130.664 180.394,122.863 140.415,145.914 90.685,120.425 36.079,145.914 
	0,119.938 11.701,90.684 55.581,80.446 79.958,49.73 "/>
<polygon fill="#EEEEEE" points="0,116.037 47.181,82.406 11.037,92.345 0,115.428 "/>
<polygon fill="#FFFFFF" points="33.863,144.319 44.421,84.373 0.344,120.185 "/>
<polygon fill="#EEEEEE" points="89.79,120.842 69.175,105.591 43.969,86.943 33.96,143.762 "/>
<polygon fill="#FFFFFF" points="78.05,52.134 87.127,118.872 61.524,72.958 "/>
<polygon fill="#FFFFFF" points="124.163,52.134 108.668,129.643 81.69,78.896 "/>
<polygon fill="#EEEEEE" points="145.295,143.101 122.631,59.793 122.631,136.799 "/>
<polygon fill="#FFFFFF" points="171.698,127.877 155.878,89.034 135.55,39.121 155.042,135.783 "/>
<polygon fill="#EEEEEE" points="246.061,47.992 143.056,25.331 155.234,87.452 "/>
<polygon fill="#EEEEEE" points="260.085,63.235 283.167,83.043 311.157,107.063 300.332,72.958 "/>
<polygon fill="#FFFFFF" points="276.441,137.002 284.832,84.471 301.38,124.213 "/>
<polygon fill="#EEEEEE" points="283.167,83.043 242.836,125.923 276.125,136.897 "/>
<polygon fill="#FFFFFF" points="260.085,64.601 232.074,122.375 200.381,67.837 "/>
<polygon fill="#EEEEEE" points="209.749,40.003 207.982,6.432 175.894,32.555 "/>
<polygon fill="#FFFFFF" points="180.394,122.863 200.381,67.837 208.671,130.664 "/>
</svg>
		</div>
	</div>
	<div id="flower-container">
		<div id="flower1" class="flower">
			
<svg version="1.1" id="flower_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="180.126px" height="187.025px" viewBox="0 0 180.126 187.025" enable-background="new 0 0 180.126 187.025"
	 xml:space="preserve">
<polygon class="flower1P" fill="#52BAEA" points="41.961,71.035 37.356,90.822 25.927,94.916 13.476,88.604 5.97,77.176 8.358,67.794 17.74,61.653 
	23.966,59.266 23.966,55.854 4.776,51.59 0,41.526 4.435,29.927 11.77,22.593 23.539,20.546 30.533,25.492 36.503,37.944 
	39.403,37.944 45.714,16.281 52.708,14.746 66.183,19.692 73.347,27.368 75.905,35.556 71.471,43.402 64.477,47.155 56.119,50.737 
	56.631,53.296 72.153,54.831 79.999,61.995 79.999,72.912 75.394,81.1 61.748,89.628 52.366,84.852 44.52,71.035 "/>
<polygon class="flower1P" fill="#F2EA28" points="42.132,38.513 52.594,43.972 56.347,51.249 56.347,58.981 52.366,65.919 44.406,70.354 
	35.65,69.898 27.804,64.213 24.961,58.526 24.961,49.43 29.055,43.062 35.537,39.764 "/>
<polygon class="flower1P" fill="#F4EE72" points="36.901,41.242 45.657,44.995 49.296,54.434 46.794,60.802 38.266,65.009 28.827,59.778 
	26.667,57.049 27.462,47.838 "/>
<polygon class="flower1P" fill="#F9F6B9" points="39.403,48.179 43.383,51.477 44.179,55.911 36.901,59.096 32.921,54.434 32.921,49.998 
	35.877,48.179 "/>
<path class="root11" fill="#1CA44A" d="M43.88,71.675l1.706,4.265l2.516,4.733l0.597,1.706l1.365,2.089l2.942,3.07l2.9,2.921l3.561,2.687
	l1.407,1.365l3.774,1.919l1.258,0.469l1.13,1.002l5.203,2.559c0,0,2.516,1.258,2.601,1.322c0.085,0.063,1.919,1.471,1.919,1.471
	l2.239,1.791c0,0,1.109,0.661,1.173,0.726c0.064,0.063,1.897,1.685,1.897,1.685s2.623,2.622,2.623,2.687
	c0,0.063,2.538,2.729,2.538,2.729l1.258,1.578h-0.938l-2.537-2.708l-2.068-1.663l-2.089-1.173l-4.414-1.705l-4.947-2.666
	l-5.543-2.942l-5.032-2.793L53.709,93.7l-4.072-4.243l-3.433-5.373l-1.322-2.708l-1.301-2.942l-0.469-1.577v-0.618v-2.432v-1.833
	v-0.938l0.959,0.021L43.88,71.675z"/>
<path fill="#45B64A" d="M68.244,114.446l-1.72-2.335l-1.123-1.905l-0.896-1.407l-0.512-1.194l0.1-0.653l0.924-0.071l1.947,0.058
	l1.904,0.014l2.019-0.071h1.137h1.734l0.98,0.171l1.293,0.298l0.64,0.214l0.271,0.128c0,0,1.066,0.369,1.166,0.412
	s1.166,0.327,1.166,0.327l0.896,0.384c0,0,0.512,0.341,0.568,0.355c0.057,0.015,0.568,0.213,0.568,0.213s0.825,0.696,0.867,0.725
	c0.043,0.029,1.066,0.47,1.066,0.47l0.497,0.397l0.555,0.412l0.426,0.44l0.541,0.484c0,0,0.668,0.582,0.682,0.625
	c0.014,0.042,0.483,0.583,0.483,0.583l0.441,0.497l0.512,0.512h0.607l0.672-0.081l-0.384-0.516l-0.441-0.626l-1.336-1.336
	l-1.436-1.705l-1.592-1.706l-1.194-1.066l-0.952-0.881l-0.683-0.782l-1.535-1.038l-0.241-0.739l0.057-2.615l0.213-1.037l0.014-1.806
	l0.185-1.605l0.355-0.427c0,0,2.175,1.279,2.189,1.322s2.204,1.322,2.204,1.322l1.464,1.222l1.933,1.223l1.18,1.308l0.697,0.824
	l0.896,1.08l0.412,0.384l0.796-2.458l0.611-1.209l1.351-2.189l2.217-2.971l1.677-1.62l1.009-1.108l1.365-1.066l0.64,0.853
	l0.526,1.862l0.654,1.592l0.412,1.436l0.298,1.092l0.224,1.151l0.192,1.119l0.267,1.535v1.439l0.053,0.746v1.023l-0.107,0.757
	l0.896-0.586l3.006-1.609l2.495-1.099l1.503-0.427l2.559-0.703l2.089-0.352l1.706-0.032l1.162-0.032l0.512,0.31l-0.277,1.173
	c0,0-0.288,0.938-0.309,0.97c-0.021,0.032-0.437,1.269-0.437,1.269l-0.458,1.002l-0.533,1.173l-0.395,1.269l-0.714,1.493
	l-0.853,1.428l-1.162,1.259l-0.213,0.795l-2.004-0.166l-1.279,0.106l-2.175-0.117l-7.186,0.074l-5.427,0.043l-6.108-0.021
	l-12.313-0.106H70.17l-1.663,0.106H68.244z"/>
<polygon fill="#DE5A26" points="43.23,114.383 142.024,114.383 142.024,130.608 131.225,130.427 130.926,135.47 130.425,138.369 
	129.785,141.994 128.496,149.104 127.248,156.919 126.225,162.577 122.159,186.599 61.215,186.599 60.564,183.272 59.047,174.118 
	57.029,162.775 54.982,151.659 53.219,140.459 51.656,130.537 43.23,130.509 "/>
<path class="root11" fill="#1CA44A" d="M129.293,56.11l-0.508,4.564l-1.165,5.232l-0.121,1.804l-0.759,2.378l-2.019,3.742l-2.017,3.588
	l-2.716,3.538l-0.993,1.69l-3.126,2.854l-1.088,0.788l-0.822,1.267l-4.333,3.853c0,0-2.09,1.882-2.155,1.966
	c-0.065,0.085-1.458,1.93-1.458,1.93l-1.681,2.322c0,0-0.893,0.933-0.938,1.012c-0.044,0.078-1.38,2.129-1.38,2.129
	s-1.829,3.227-1.812,3.288c0.017,0.062-1.719,3.307-1.719,3.307l-0.792,1.855l0.905-0.25l1.724-3.285l1.551-2.154l1.702-1.688
	l3.799-2.819l4.058-3.887l4.56-4.313l4.106-4.033l5.589-6.831l2.795-5.175l1.877-6.094l0.553-2.961l0.47-3.184l0.032-1.646
	l-0.165-0.597l-0.647-2.343l-0.489-1.767l-0.25-0.904l-0.919,0.276L129.293,56.11z"/>
<polygon class="flower1PP" fill="#F6A4BA" points="130.191,57.078 115.675,71.29 103.837,68.602 96.728,56.588 96.539,42.917 103.594,36.287 
	114.806,36.15 121.34,37.481 123.173,34.605 109.281,20.696 110.662,9.643 120.635,2.245 130.763,0 141.788,4.599 145.028,12.529 
	143.371,26.238 145.816,27.796 162.78,12.919 169.503,15.382 178.209,26.795 180.126,37.118 177.884,45.398 169.927,49.632 
	162.013,49.039 153.04,47.568 152.096,50.001 164.361,59.637 167.128,69.896 161.263,79.102 152.979,83.532 136.887,83.391 
	131.541,74.321 132.35,58.453 "/>
<polygon class="flower1PP" fill="#F2EA28" points="147.813,29.743 153.702,39.968 152.956,48.122 148.8,54.644 141.716,58.354 132.62,57.817 
	125.48,52.728 121.918,43.717 122.577,37.394 127.465,29.722 134.34,26.552 141.578,27.254 "/>
<polygon class="flower1PP" fill="#F4EE72" points="141.934,29.233 147.303,37.104 145.299,47.02 139.767,51.045 130.314,50.01 125.165,40.526 
	124.809,37.063 130.43,29.724 "/>
<polygon class="flower1PP" fill="#F9F6B9" points="140.316,36.428 141.9,41.348 140.189,45.516 132.34,44.291 131.489,38.219 133.873,34.479 
	137.343,34.534 "/>
</svg>

		</div>
		<div id="flower2" class="flower">
			
<svg version="1.1" id="flower_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="180.126px" height="187.025px" viewBox="0 0 180.126 187.025" enable-background="new 0 0 180.126 187.025"
	 xml:space="preserve">
<polygon class="flower2P" fill="#52BAEA" points="41.961,71.035 37.356,90.822 25.927,94.916 13.476,88.604 5.97,77.176 8.358,67.794 17.74,61.653 
	23.966,59.266 23.966,55.854 4.776,51.59 0,41.526 4.435,29.927 11.77,22.593 23.539,20.546 30.533,25.492 36.503,37.944 
	39.403,37.944 45.714,16.281 52.708,14.746 66.183,19.692 73.347,27.368 75.905,35.556 71.471,43.402 64.477,47.155 56.119,50.737 
	56.631,53.296 72.153,54.831 79.999,61.995 79.999,72.912 75.394,81.1 61.748,89.628 52.366,84.852 44.52,71.035 "/>
<polygon class="flower2P" fill="#F2EA28" points="42.132,38.513 52.594,43.972 56.347,51.249 56.347,58.981 52.366,65.919 44.406,70.354 
	35.65,69.898 27.804,64.213 24.961,58.526 24.961,49.43 29.055,43.062 35.537,39.764 "/>
<polygon class="flower2P" fill="#F4EE72" points="36.901,41.242 45.657,44.995 49.296,54.434 46.794,60.802 38.266,65.009 28.827,59.778 
	26.667,57.049 27.462,47.838 "/>
<polygon class="flower2P" fill="#F9F6B9" points="39.403,48.179 43.383,51.477 44.179,55.911 36.901,59.096 32.921,54.434 32.921,49.998 
	35.877,48.179 "/>
<path class="root22" fill="#1CA44A" d="M43.88,71.675l1.706,4.265l2.516,4.733l0.597,1.706l1.365,2.089l2.942,3.07l2.9,2.921l3.561,2.687
	l1.407,1.365l3.774,1.919l1.258,0.469l1.13,1.002l5.203,2.559c0,0,2.516,1.258,2.601,1.322c0.085,0.063,1.919,1.471,1.919,1.471
	l2.239,1.791c0,0,1.109,0.661,1.173,0.726c0.064,0.063,1.897,1.685,1.897,1.685s2.623,2.622,2.623,2.687
	c0,0.063,2.538,2.729,2.538,2.729l1.258,1.578h-0.938l-2.537-2.708l-2.068-1.663l-2.089-1.173l-4.414-1.705l-4.947-2.666
	l-5.543-2.942l-5.032-2.793L53.709,93.7l-4.072-4.243l-3.433-5.373l-1.322-2.708l-1.301-2.942l-0.469-1.577v-0.618v-2.432v-1.833
	v-0.938l0.959,0.021L43.88,71.675z"/>
<path fill="#45B64A" d="M68.244,114.446l-1.72-2.335l-1.123-1.905l-0.896-1.407l-0.512-1.194l0.1-0.653l0.924-0.071l1.947,0.058
	l1.904,0.014l2.019-0.071h1.137h1.734l0.98,0.171l1.293,0.298l0.64,0.214l0.271,0.128c0,0,1.066,0.369,1.166,0.412
	s1.166,0.327,1.166,0.327l0.896,0.384c0,0,0.512,0.341,0.568,0.355c0.057,0.015,0.568,0.213,0.568,0.213s0.825,0.696,0.867,0.725
	c0.043,0.029,1.066,0.47,1.066,0.47l0.497,0.397l0.555,0.412l0.426,0.44l0.541,0.484c0,0,0.668,0.582,0.682,0.625
	c0.014,0.042,0.483,0.583,0.483,0.583l0.441,0.497l0.512,0.512h0.607l0.672-0.081l-0.384-0.516l-0.441-0.626l-1.336-1.336
	l-1.436-1.705l-1.592-1.706l-1.194-1.066l-0.952-0.881l-0.683-0.782l-1.535-1.038l-0.241-0.739l0.057-2.615l0.213-1.037l0.014-1.806
	l0.185-1.605l0.355-0.427c0,0,2.175,1.279,2.189,1.322s2.204,1.322,2.204,1.322l1.464,1.222l1.933,1.223l1.18,1.308l0.697,0.824
	l0.896,1.08l0.412,0.384l0.796-2.458l0.611-1.209l1.351-2.189l2.217-2.971l1.677-1.62l1.009-1.108l1.365-1.066l0.64,0.853
	l0.526,1.862l0.654,1.592l0.412,1.436l0.298,1.092l0.224,1.151l0.192,1.119l0.267,1.535v1.439l0.053,0.746v1.023l-0.107,0.757
	l0.896-0.586l3.006-1.609l2.495-1.099l1.503-0.427l2.559-0.703l2.089-0.352l1.706-0.032l1.162-0.032l0.512,0.31l-0.277,1.173
	c0,0-0.288,0.938-0.309,0.97c-0.021,0.032-0.437,1.269-0.437,1.269l-0.458,1.002l-0.533,1.173l-0.395,1.269l-0.714,1.493
	l-0.853,1.428l-1.162,1.259l-0.213,0.795l-2.004-0.166l-1.279,0.106l-2.175-0.117l-7.186,0.074l-5.427,0.043l-6.108-0.021
	l-12.313-0.106H70.17l-1.663,0.106H68.244z"/>
<polygon fill="#DE5A26" points="43.23,114.383 142.024,114.383 142.024,130.608 131.225,130.427 130.926,135.47 130.425,138.369 
	129.785,141.994 128.496,149.104 127.248,156.919 126.225,162.577 122.159,186.599 61.215,186.599 60.564,183.272 59.047,174.118 
	57.029,162.775 54.982,151.659 53.219,140.459 51.656,130.537 43.23,130.509 "/>
<path class="root22" fill="#1CA44A" d="M129.293,56.11l-0.508,4.564l-1.165,5.232l-0.121,1.804l-0.759,2.378l-2.019,3.742l-2.017,3.588
	l-2.716,3.538l-0.993,1.69l-3.126,2.854l-1.088,0.788l-0.822,1.267l-4.333,3.853c0,0-2.09,1.882-2.155,1.966
	c-0.065,0.085-1.458,1.93-1.458,1.93l-1.681,2.322c0,0-0.893,0.933-0.938,1.012c-0.044,0.078-1.38,2.129-1.38,2.129
	s-1.829,3.227-1.812,3.288c0.017,0.062-1.719,3.307-1.719,3.307l-0.792,1.855l0.905-0.25l1.724-3.285l1.551-2.154l1.702-1.688
	l3.799-2.819l4.058-3.887l4.56-4.313l4.106-4.033l5.589-6.831l2.795-5.175l1.877-6.094l0.553-2.961l0.47-3.184l0.032-1.646
	l-0.165-0.597l-0.647-2.343l-0.489-1.767l-0.25-0.904l-0.919,0.276L129.293,56.11z"/>
<polygon class="flower2PP" fill="#F6A4BA" points="130.191,57.078 115.675,71.29 103.837,68.602 96.728,56.588 96.539,42.917 103.594,36.287 
	114.806,36.15 121.34,37.481 123.173,34.605 109.281,20.696 110.662,9.643 120.635,2.245 130.763,0 141.788,4.599 145.028,12.529 
	143.371,26.238 145.816,27.796 162.78,12.919 169.503,15.382 178.209,26.795 180.126,37.118 177.884,45.398 169.927,49.632 
	162.013,49.039 153.04,47.568 152.096,50.001 164.361,59.637 167.128,69.896 161.263,79.102 152.979,83.532 136.887,83.391 
	131.541,74.321 132.35,58.453 "/>
<polygon class="flower2PP" fill="#F2EA28" points="147.813,29.743 153.702,39.968 152.956,48.122 148.8,54.644 141.716,58.354 132.62,57.817 
	125.48,52.728 121.918,43.717 122.577,37.394 127.465,29.722 134.34,26.552 141.578,27.254 "/>
<polygon class="flower2PP" fill="#F4EE72" points="141.934,29.233 147.303,37.104 145.299,47.02 139.767,51.045 130.314,50.01 125.165,40.526 
	124.809,37.063 130.43,29.724 "/>
<polygon class="flower2PP" fill="#F9F6B9" points="140.316,36.428 141.9,41.348 140.189,45.516 132.34,44.291 131.489,38.219 133.873,34.479 
	137.343,34.534 "/>
</svg>

		</div>
		<div id="flower3" class="flower">
			
<svg version="1.1" id="flower_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="180.126px" height="187.025px" viewBox="0 0 180.126 187.025" enable-background="new 0 0 180.126 187.025"
	 xml:space="preserve">
<polygon class="flower3P" fill="#52BAEA" points="41.961,71.035 37.356,90.822 25.927,94.916 13.476,88.604 5.97,77.176 8.358,67.794 17.74,61.653 
	23.966,59.266 23.966,55.854 4.776,51.59 0,41.526 4.435,29.927 11.77,22.593 23.539,20.546 30.533,25.492 36.503,37.944 
	39.403,37.944 45.714,16.281 52.708,14.746 66.183,19.692 73.347,27.368 75.905,35.556 71.471,43.402 64.477,47.155 56.119,50.737 
	56.631,53.296 72.153,54.831 79.999,61.995 79.999,72.912 75.394,81.1 61.748,89.628 52.366,84.852 44.52,71.035 "/>
<polygon class="flower3P" fill="#F2EA28" points="42.132,38.513 52.594,43.972 56.347,51.249 56.347,58.981 52.366,65.919 44.406,70.354 
	35.65,69.898 27.804,64.213 24.961,58.526 24.961,49.43 29.055,43.062 35.537,39.764 "/>
<polygon class="flower3P" fill="#F4EE72" points="36.901,41.242 45.657,44.995 49.296,54.434 46.794,60.802 38.266,65.009 28.827,59.778 
	26.667,57.049 27.462,47.838 "/>
<polygon class="flower3P" fill="#F9F6B9" points="39.403,48.179 43.383,51.477 44.179,55.911 36.901,59.096 32.921,54.434 32.921,49.998 
	35.877,48.179 "/>
<path class="root33" fill="#1CA44A" d="M43.88,71.675l1.706,4.265l2.516,4.733l0.597,1.706l1.365,2.089l2.942,3.07l2.9,2.921l3.561,2.687
	l1.407,1.365l3.774,1.919l1.258,0.469l1.13,1.002l5.203,2.559c0,0,2.516,1.258,2.601,1.322c0.085,0.063,1.919,1.471,1.919,1.471
	l2.239,1.791c0,0,1.109,0.661,1.173,0.726c0.064,0.063,1.897,1.685,1.897,1.685s2.623,2.622,2.623,2.687
	c0,0.063,2.538,2.729,2.538,2.729l1.258,1.578h-0.938l-2.537-2.708l-2.068-1.663l-2.089-1.173l-4.414-1.705l-4.947-2.666
	l-5.543-2.942l-5.032-2.793L53.709,93.7l-4.072-4.243l-3.433-5.373l-1.322-2.708l-1.301-2.942l-0.469-1.577v-0.618v-2.432v-1.833
	v-0.938l0.959,0.021L43.88,71.675z"/>
<path fill="#45B64A" d="M68.244,114.446l-1.72-2.335l-1.123-1.905l-0.896-1.407l-0.512-1.194l0.1-0.653l0.924-0.071l1.947,0.058
	l1.904,0.014l2.019-0.071h1.137h1.734l0.98,0.171l1.293,0.298l0.64,0.214l0.271,0.128c0,0,1.066,0.369,1.166,0.412
	s1.166,0.327,1.166,0.327l0.896,0.384c0,0,0.512,0.341,0.568,0.355c0.057,0.015,0.568,0.213,0.568,0.213s0.825,0.696,0.867,0.725
	c0.043,0.029,1.066,0.47,1.066,0.47l0.497,0.397l0.555,0.412l0.426,0.44l0.541,0.484c0,0,0.668,0.582,0.682,0.625
	c0.014,0.042,0.483,0.583,0.483,0.583l0.441,0.497l0.512,0.512h0.607l0.672-0.081l-0.384-0.516l-0.441-0.626l-1.336-1.336
	l-1.436-1.705l-1.592-1.706l-1.194-1.066l-0.952-0.881l-0.683-0.782l-1.535-1.038l-0.241-0.739l0.057-2.615l0.213-1.037l0.014-1.806
	l0.185-1.605l0.355-0.427c0,0,2.175,1.279,2.189,1.322s2.204,1.322,2.204,1.322l1.464,1.222l1.933,1.223l1.18,1.308l0.697,0.824
	l0.896,1.08l0.412,0.384l0.796-2.458l0.611-1.209l1.351-2.189l2.217-2.971l1.677-1.62l1.009-1.108l1.365-1.066l0.64,0.853
	l0.526,1.862l0.654,1.592l0.412,1.436l0.298,1.092l0.224,1.151l0.192,1.119l0.267,1.535v1.439l0.053,0.746v1.023l-0.107,0.757
	l0.896-0.586l3.006-1.609l2.495-1.099l1.503-0.427l2.559-0.703l2.089-0.352l1.706-0.032l1.162-0.032l0.512,0.31l-0.277,1.173
	c0,0-0.288,0.938-0.309,0.97c-0.021,0.032-0.437,1.269-0.437,1.269l-0.458,1.002l-0.533,1.173l-0.395,1.269l-0.714,1.493
	l-0.853,1.428l-1.162,1.259l-0.213,0.795l-2.004-0.166l-1.279,0.106l-2.175-0.117l-7.186,0.074l-5.427,0.043l-6.108-0.021
	l-12.313-0.106H70.17l-1.663,0.106H68.244z"/>
<polygon fill="#DE5A26" points="43.23,114.383 142.024,114.383 142.024,130.608 131.225,130.427 130.926,135.47 130.425,138.369 
	129.785,141.994 128.496,149.104 127.248,156.919 126.225,162.577 122.159,186.599 61.215,186.599 60.564,183.272 59.047,174.118 
	57.029,162.775 54.982,151.659 53.219,140.459 51.656,130.537 43.23,130.509 "/>
<path class="root33" fill="#1CA44A" d="M129.293,56.11l-0.508,4.564l-1.165,5.232l-0.121,1.804l-0.759,2.378l-2.019,3.742l-2.017,3.588
	l-2.716,3.538l-0.993,1.69l-3.126,2.854l-1.088,0.788l-0.822,1.267l-4.333,3.853c0,0-2.09,1.882-2.155,1.966
	c-0.065,0.085-1.458,1.93-1.458,1.93l-1.681,2.322c0,0-0.893,0.933-0.938,1.012c-0.044,0.078-1.38,2.129-1.38,2.129
	s-1.829,3.227-1.812,3.288c0.017,0.062-1.719,3.307-1.719,3.307l-0.792,1.855l0.905-0.25l1.724-3.285l1.551-2.154l1.702-1.688
	l3.799-2.819l4.058-3.887l4.56-4.313l4.106-4.033l5.589-6.831l2.795-5.175l1.877-6.094l0.553-2.961l0.47-3.184l0.032-1.646
	l-0.165-0.597l-0.647-2.343l-0.489-1.767l-0.25-0.904l-0.919,0.276L129.293,56.11z"/>
<polygon class="flower3PP" fill="#F6A4BA" points="130.191,57.078 115.675,71.29 103.837,68.602 96.728,56.588 96.539,42.917 103.594,36.287 
	114.806,36.15 121.34,37.481 123.173,34.605 109.281,20.696 110.662,9.643 120.635,2.245 130.763,0 141.788,4.599 145.028,12.529 
	143.371,26.238 145.816,27.796 162.78,12.919 169.503,15.382 178.209,26.795 180.126,37.118 177.884,45.398 169.927,49.632 
	162.013,49.039 153.04,47.568 152.096,50.001 164.361,59.637 167.128,69.896 161.263,79.102 152.979,83.532 136.887,83.391 
	131.541,74.321 132.35,58.453 "/>
<polygon class="flower3PP" fill="#F2EA28" points="147.813,29.743 153.702,39.968 152.956,48.122 148.8,54.644 141.716,58.354 132.62,57.817 
	125.48,52.728 121.918,43.717 122.577,37.394 127.465,29.722 134.34,26.552 141.578,27.254 "/>
<polygon class="flower3PP" fill="#F4EE72" points="141.934,29.233 147.303,37.104 145.299,47.02 139.767,51.045 130.314,50.01 125.165,40.526 
	124.809,37.063 130.43,29.724 "/>
<polygon class="flower3PP" fill="#F9F6B9" points="140.316,36.428 141.9,41.348 140.189,45.516 132.34,44.291 131.489,38.219 133.873,34.479 
	137.343,34.534 "/>
</svg>

		</div>
				
	</div>
		
	</div>
	<div class="buttons">
            <button id="btnPlay">play</button>
            <button id="btnPause">pause</button>
            <button id="btnResume">resume</button>
            <button id="btnReverse">reverse</button>
            <button id="btnSpeedUp">speed up</button>
            <button id="btnSlowDown">slow down</button>
            <button id="btnSeek">seek 1 sec</button>
            <button id="btnProgress">go to 50%</button>
            <button id="btnRestart">restart</button>
        </div>
        <div id="thankyou">
        	<h3>thank you for watching<br>           
        	 <button id="btnRestartt">restart</button>
</h3>

        </div>


</body>
</html>
            
          
!
            
              body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

.conntainer {
	width: 100%;
	height: 100vh;
    background: -webkit-linear-gradient(#31a7ae, #FFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#31a7ae, #FFF)  !important; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#31a7ae, #FFF)  !important; /* For Firefox 3.6 to 15 */
    background: linear-gradient(#31a7ae, #FFF) !important; /* Standard syntax */
    overflow: hidden;
}
.conntainer img {
	width: 100%
}
#rainbow {
    position: absolute;
    top: 0;
}
#rain {
    position: absolute;
    top: 0;
}
#cloud-container {
    position: absolute;
    top: 0px;
    display: flex;
    width: 100%;
    justify-content: space-around;
}
#flower-container {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    justify-content: space-around;
}
#sun img {
    width: 130px;
}

#sun {
    position: absolute;
    top: 20px;
    left: 20px;
}
.buttons {
	position: absolute;
	bottom: 15px;
	right: 15px
}
.buttons button {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    background: #777777;
    color: #fff;
    border: 0;
    padding: 5px 10px;
}
#thankyou {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #03123d;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-family: monospace;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#thankyou button {
	    margin-top: 40px;
    background: #333;
    border: 0;
    text-transform: uppercase;
    padding: 10px 30px;
    color: #fff;
    border-radius: 5px;
}
            
          
!
            
              $(document).ready(function(){
	var cont = $(".conntainer"),
		cloudContainer = $("#cloud-container"),
		rain = $("#rain"),		
		rainBow = $("#rainbow"),		
		sun = $("#sun"),		
		root11 = $(".root11"),		
		flower1P = $(".flower1P"),		
		flower1PP = $(".flower1PP"),
		root22 = $(".root22"),		
		flower2P = $(".flower2P"),		
		flower2PP = $(".flower2PP"),
		root33 = $(".root33"),		
		flower3P = $(".flower3P"),		
		flower3PP = $(".flower3PP"),		
		thank = $("#thankyou"),		
		tm = new TimelineMax();
		//start animating
		tm
		.from(cloudContainer , 10 , {left:'-100%' , ease:Power1.easeInOut})
		.fromTo(rain , 7 ,{top:'-200%' , ease:Power1.easeInOut},{top:'200%' , ease:Power1.easeInOut})
		.to(cloudContainer , 5 , {left:'100%' , ease:Power1.easeInOut} ,"-=4")
		.from(sun , 5 , {autoAlpha:0 ,rotationZ:-1440 ,ease:Power1.easeInOut})
		.from(rainbow , 5 , {autoAlpha:0 ,ease:Power1.easeInOut } ,"-=2")
		.to(cont , 1 , {scale:2 , transformOrigin:'0% 100%' ,ease:Power1.easeInOut})
		.from(root11 , 1 ,{autoAlpha:0,ease:Power1.easeInOut})
		.from(flower1P , 1 ,{autoAlpha:0,ease:Power1.easeInOut})
		.from(flower1PP , 1 ,{autoAlpha:0,ease:Power1.easeInOut})
		.to(cont , 1 , {scale:1 , transformOrigin:'0% 100%' ,ease:Power1.easeInOut})
		.to(cont , 1 , {scale:2 , transformOrigin:'50% 100%' ,ease:Power1.easeInOut})
		.from(root22 , 1 ,{autoAlpha:0,ease:Power1.easeInOut})
		.from(flower2P , 1 ,{autoAlpha:0,ease:Power1.easeInOut})
		.from(flower2PP , 1 ,{autoAlpha:0,ease:Power1.easeInOut})
		.to(cont , 1 , {scale:1 , transformOrigin:'50% 100%' ,ease:Power1.easeInOut})
		.to(cont , 1 , {scale:2 , transformOrigin:'100% 100%' ,ease:Power1.easeInOut})
		.from(root33 , 1 ,{autoAlpha:0,ease:Power1.easeInOut})
		.from(flower3P , 1 ,{autoAlpha:0,ease:Power1.easeInOut})
		.from(flower3PP , 1 ,{autoAlpha:0,ease:Power1.easeInOut})
		.to(cont , 1 , {scale:1 , transformOrigin:'100% 100%' ,ease:Power1.easeInOut})
		.to(cont , 3, {autoAlpha:0 , scale:0 ,transformOrigin:'50% 50%',delay:2})
		.from(thank , 3, {autoAlpha:0 , scale:0,transformOrigin:'50% 50%' },"-=3");




		$('#btnPlay').on('click',function(){
		tm.play();
	});

	$('#btnPause').on('click',function(){
		tm.pause();
	});

	$('#btnResume').on('click',function(){
		tm.resume();
	});

	$('#btnReverse').on('click',function(){
		tm.reverse();
	});

	$('#btnSpeedUp').on('click',function(){
		tm.timeScale(8);
	});

	$('#btnSlowDown').on('click',function(){
		tm.timeScale(0.5);
	});

	$('#btnSeek').on('click',function(){
		tm.seek(1);
	});

	$('#btnProgress').on('click',function(){
		tm.progress(0.5);
	});

	$('#btnRestart').on('click',function(){
		tm.restart();
	});

	$('#btnRestartt').on('click',function(){
		tm.restart();
	});

		


})
            
          
!
999px
Loading ..................

Console