Widget - Table

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">
							Top Donations
						</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">
										<ol id="OL_17">
											<li id="LI_18">
												<span id="SPAN_19"><span id="SPAN_20">Donated</span></span><span id="SPAN_21">$3,000</span>
											</li>
											<li id="LI_22">
												<span id="SPAN_23"><span id="SPAN_24">Pledged</span></span><span id="SPAN_25">$3,000</span>
											</li>
											<li id="LI_26">
												<span id="SPAN_27"><span id="SPAN_28">Donated</span></span><span id="SPAN_29">$2,000</span>
											</li>
											<li id="LI_30">
												<span id="SPAN_31"><span id="SPAN_32">Donated</span></span><span id="SPAN_33">$1,000</span>
											</li>
											<li id="LI_34">
												<span id="SPAN_35"><span id="SPAN_36">Donated</span></span><span id="SPAN_37">$1,000</span>
											</li>
											<li id="LI_38">
												<span id="SPAN_39"><span id="SPAN_40">Pledged</span></span><span id="SPAN_41">$800</span>
											</li>
											<li id="LI_42">
												<span id="SPAN_43"><span id="SPAN_44">Donated</span></span><span id="SPAN_45">$500</span>
											</li>
											<li id="LI_46">
												<span id="SPAN_47"><span id="SPAN_48">Donated</span></span><span id="SPAN_49">$400</span>
											</li>
											<li id="LI_50">
												<span id="SPAN_51"><span id="SPAN_52">Donated</span></span><span id="SPAN_53">$400</span>
											</li>
											<li id="LI_54">
												<span id="SPAN_55"><span id="SPAN_56">Donated</span></span><span...

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: 470px;
    left: 719px;
    position: absolute;
    right: 241px;
    text-decoration: none solid rgba(255, 255, 255, 0.86);
    text-rendering: geometricPrecision;
    top: 80px;
    width: 230px;
    z-index: 39;
    column-rule-color: rgba(255, 255, 255, 0.86);
    perspective-origin: 115px 235px;
    transform-origin: 115px 235px;
    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: 469px;
    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: 470px;
    text-decoration: none solid rgba(255, 255, 255, 0.86);
    text-rendering: geometricPrecision;
    width: 230px;
    column-rule-color: rgba(255, 255, 255, 0.86);
   ...