Widget - 2

by patelsan

HTML

<div id="DIV_1">
	<article id="ARTICLE_2">
		<div id="DIV_3">
			<div id="DIV_4">
				<header id="HEADER_5">
					<div id="DIV_6">
						<h1 id="H1_7">
							Average Donation
						</h1>
					</div>
					<div id="DIV_8">
						<a href="#" id="A_9"></a>
						<button id="BUTTON_10">
							0s
						</button>
					</div>
				</header>
				<div id="DIV_11">
					<div id="DIV_12">
						<div id="DIV_13">
							<div id="DIV_14">
								<div id="DIV_15">
									<div id="DIV_16">
										<div id="DIV_17">
											<div id="DIV_18">
												<div id="DIV_19">
													<div id="DIV_20">
														<div id="DIV_21">
															<div id="DIV_22">
																<span id="SPAN_23"><span id="SPAN_24">$</span><span id="SPAN_25">1,120</span></span>
															</div>
														</div>
														<div id="DIV_26">
															<span id="SPAN_27"></span>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</article>
</div>

CSS

#DIV_1 {
    text-rendering: geometricPrecision;
    width: 1190px;
    perspective-origin: 595px 0px;
    transform-origin: 595px 0px;
    font: normal normal normal normal 16px / 16px aktiv-grotesk, Arial, sans-serif, FontAwesome;
}/*#DIV_1*/

#ARTICLE_2 {
    bottom: -550px;
    color: rgba(255, 255, 255, 0.86);
    height: 230px;
    left: 0px;
    position: absolute;
    right: 960px;
    text-decoration: none solid rgba(255, 255, 255, 0.86);
    text-rendering: geometricPrecision;
    top: 320px;
    width: 230px;
    z-index: 33;
    column-rule-color: rgba(255, 255, 255, 0.86);
    perspective-origin: 115px 115px;
    transform-origin: 115px 115px;
    user-select: none;
    caret-color: rgba(255, 255, 255, 0.86);
    border: 0px none rgba(255, 255, 255, 0.86);
    font: normal normal normal normal 16px / 16px aktiv-grotesk, Arial, sans-serif, FontAwesome;
    outline: rgba(255, 255, 255, 0.86) none 0px;
}/*#ARTICLE_2*/

#ARTICLE_2:after {
    bottom: 229px;
    color: rgba(255, 255, 255, 0.86);
    content: '""';
    display: block;
    height: 1px;
    left: 0px;
    position: absolute;
    right: 230px;
    text-decoration: none solid rgba(255, 255, 255, 0.86);
    text-rendering: geometricPrecision;
    top: 0px;
    z-index: 1001;
    column-rule-color: rgba(255, 255, 255, 0.86);
    perspective-origin: 0px 0.5px;
    transform-origin: 0px 0.5px;
    user-select: none;
    caret-color: rgba(255, 255, 255, 0.86);
    background: rgb(128, 182, 54) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgba(255, 255, 255, 0.86);
    font: normal normal normal normal 16px / 16px aktiv-grotesk, Arial, sans-serif, FontAwesome;
    outline: rgba(255, 255, 255, 0.86) none 0px;
}/*#ARTICLE_2:after*/

#DIV_3 {
    color: rgba(255, 255, 255, 0.86);
    height: 230px;
    text-decoration: none solid rgba(255, 255, 255, 0.86);
    text-rendering: geometricPrecision;
    width: 230px;
    column-rule-color: rgba(255, 255, 255, 0.86);
   ...