Election Widget

Developer
Tom Markart
Size
6,152 Kb
Views
14,168
  1. Election Widget Previews
  2. Election Widget HTML Codes
  3. Election Widget CSS Codes

How do I make an election widget?

What is a election widget? How do you make a election widget? This script and codes were developed by Tom Markart on 06 November 2022, Sunday.

Election Widget Previews
IQ Test

Election Widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Election Widget</title> <link rel='stylesheet prefetch' href='http://www.mcclatchydc.com/static/theme/mcclatchydc-2020/base/css/main-1.0.90-05f5567.css?sVer=1.0.90-05f5567'>
<link rel='stylesheet prefetch' href='http://media.mcclatchydc.com/static/graphics/20160220-ElexMap/css/ResultsTable.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="content-body"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable" data-electiondate="2016-06-14" data-officename="U.S. House" data-party="GOP" data-racetype="Primary" data-seatname="District 1" data-statepostal="SC"> <h4> U.S. House District 1 Republican Primary </h4> <table> <tr> <td> Christopher Horne<span> (D)</span> </td> <td> <span class="tot">(54,178)</span> </td> <td> <span class="pct">45%</span> </td> </tr> <tr> <td> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span>Richard Sanford<span> (R)</span> </td> <td> <span class="tot">(66,217)</span> </td> <td> <span class="pct">55%</span> </td> </tr> </table> <div class="reporting"> 62% Precincts Reporting </div> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable results-inline" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA"> <h4> County Commissioner District 2 </h4> <table> <tr> <td> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span>John Doe<span> (D)</span> </td> <td> <span class="tot">(1,497)</span> </td> <td> <span class="pct">75%</span> </td> </tr> <tr> <td> Michelle Longlastname-Withhyphen<span> (R)</span> </td> <td> <span class="tot">(507)</span> </td> <td> <span class="pct">25%</span> </td> </tr> </table> <div class="reporting"> 100% Precincts Reporting </div> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable results-inline" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA" id="election-02"> <h4> County Commissioner District 5 </h4> <table> <tr class="democrat"> <td> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span>John Shanahan<span class="party"> (D)</span> </td> <td> <span class="tot">(1,497)</span> </td> <td> <span class="pct">75%</span> </td> </tr> <tr class="republican"> <td> Michael Woo<span class="party"> (R)</span> </td> <td> <span class="tot">(507)</span> </td> <td> <span class="pct">25%</span> </td> </tr> </table> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <div class="reporting"> 81% Precincts Reporting </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable results-inline" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA" id="election-03"> <h4> North Carolina Governer </h4> <table> <tr class="democrat"> <td> <img class="candidate-photo" src="http://www.tmarkart.com/codepen/images/nc-gov-cooper-roy.jpg" /> </td> <td> Roy Cooper<span class="party"> (D)</span> </td> <td> <span class="tot">(125,001)</span> </td> <td> <span class="pct">51%</span><span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> </tr> <tr class="republican"> <td> <img class="candidate-photo" src="http://www.tmarkart.com/codepen/images/nc-gov-mccrory-pat.jpg" /> </td> <td> Pat McCrory<span class="party"> (R)</span> </td> <td> <span class="tot">(125,000)	</span> </td> <td> <span class="pct">49%</span> </td> </tr> </table> <div class="reporting"> 66% Precincts Reporting </div> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable results-inline" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA" id="election-03"> <h4> North Carolina Governer </h4> <table> <tr class="democrat"> <td> Roy Cooper<span class="party"> (D)</span> </td> <td> <span class="tot">(125,001)</span> </td> <td> <span class="pct">51%</span><span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> </tr> <tr class="republican"> <td> Pat McCrory<span class="party"> (R)</span> </td> <td> <span class="tot">(125,000)	</span> </td> <td> <span class="pct">49%</span> </td> </tr> </table> <div class="reporting"> 66% Precincts Reporting </div> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p>
</div>
</body>
</html>

Election Widget - Script Codes CSS Codes

/* ---------- MOCK LAYOUT ONLY ---------- */
#content-body { margin: 20px auto; /*max-width:580px;*/ width: 90%;
}
/* ---------- CSS OVERWRITES ---------- */
.resultsTable,
.resultsTable table { width: 100%;
}
.resultsTable > table { font-size: 14px;
}
.results-inline { float: none; margin: 25px auto;
}
.resultsTable > .reporting { text-transform: uppercase; color: #999; text-align: center; font-size: 12px; font-weight: 400; margin: 1em 0;
}
.resultsTable > table tbody td .tot { font-family: "McClatchy Sans", Helvetica, Arial, sans-serif;
}
.resultsTable .glyphicon-check { color: #21A52D; margin-right: 5px;
}
.updated { color: #aaa; font-size: 12px; font-weight: 400; margin: .5em 0; text-align: center; text-transform: uppercase;
}
/* ---------- ELECTION VERSION 02 ---------- */
#election-02 { border-bottom: none; margin: 25px auto; width: 100%;
}
#election-02 h4 { padding: 5px 0; font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-weight: 500;
}
#election-02 table { width: 100%;
}
#election-02 .democrat .party { color: #5186B4;
}
#election-02 .republican .party { color: #C33E4A;
}
#election-02 .tot { color: #666;
}
#election-02 .updated { margin: 10px 0 0 0;
}
#election-02 .reporting { background-color: #888; color: #fff; margin-top: 7px; padding: 2px 0;
}
.resultsTable > table tbody tr.republican:hover > td { background: #f0c5c9 !important;
}
.resultsTable > table tbody tr.democrat:hover > td { background: #bed8ee !important;
}
/* ---------- ELECTION VERSION 03 ---------- */
#election-03 { border-bottom: none; border-top: none; margin: 1em auto; width: 100%;
}
#election-03 h4 { background-color: #ba2814; color: #fff; padding: 4px 0 0 0; font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-weight: 500; margin-bottom: 7px;
}
#election-03 table { width: 100%;
}
#election-03 td { padding: 7px;
}
#election-03 .tot { color: #666; font-size: .9em;
}
#election-03 .democrat .party { color: #5186B4;
}
#election-03 .republican .party { color: #C33E4A;
}
#election-03 .candidate-photo { border-radius: 50%; height: 50px; width: 50px;
}
#election-03 .reporting { background-color: #ddd; background: linear-gradient(to right, #bbb 0%, #bbb 66%, #ddd 66%, #ddd 100%); color: #666; margin: .5em 0 0 0; padding: 4px 0;
}
#election-03 .updated { margin-top: 1em;
}
#election-03 .glyphicon { font-size: 22px; margin-left: 10px; margin-right: 0;
}
/* ----- SM Breakpoint ----- */
@media screen and (min-width: 768px) { .resultsTable, .resultsTable table { width: auto; } .results-inline { float: left; margin: 20px 40px 20px 0; } #election-02, #election-03 { border-bottom: none; border-top: none; border-right: 1px solid #ccc; margin: 10px 20px 5px 0; padding-right: 20px; width: auto; } #election-03 { border-right: none; margin: .5em .5em .5em 0; }
}
/* ----- MD Breakpoint ----- */
/* ----- LG Breakpoint ----- */
Election Widget - Script Codes
Election Widget - Script Codes
Home Page Home
Developer Tom Markart
Username tmarkart
Uploaded November 06, 2022
Rating 3
Size 6,152 Kb
Views 14,168
Do you need developer help for Election Widget?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Markart (tmarkart) Script Codes
Name
Story Detail 1.0 - related content - asset types - aspect ratio
Election Widget Vertical
CSS truncation with ellipsis
Story Detail 1.0b
Navigation Hover
Slide out nav
McClatchy svg logos
Story Detail 0.5
Responsive nav
Overlay nav
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!