SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html>3 <head>4 <style>5 .no_screen {6display: none;7}8 9body {10font-size:15px;11line-height: 1.35;12background-color: gray;13font-family: Helvetica,Arial,sans-serif;14color:#000000;15margin:0 auto !important;16padding:0 !important;17}18 19img { max-width: 100%; }20 21h1,h2,h3,h4 { font-family: Helvetica, Arial, sans-serif; }22 23 24h1, h1 A:link, h1 A:active, h1 A:visited {25margin-top:0px;26color: black;27text-decoration: none;28}29 30h1 { font-size: 1.65em; } 31h2 { font-size: 1.45em; } 32h3 { font-size: 1.25em; }33h4 { font-size: 1.1em; } 34 35 36.sans-serif {37font-family:Arial, sans-serif;38font-size:13px;39}40 41td { vertical-align: top; }42 43.content_preface, .content_preface p ul li td, .content_preface_bullets li, .content_preface_bullets li p {44font-size: 1.1em;45}46.article_body {47font-size: 1.1em;48font-family: Palatino, Georgia, "Times New Roman", serif;49line-height: 1.4;50}51.hp_excerpt {52font-size: 1.1em;53font-family: Palatino, Georgia, "Times New Roman", serif;54line-height: 1.4;55}56 57@media (min-width: 520px) and (max-width: 650px) {58body { font-size:1.1em; }59.article_body { font-size: 1.1em; }60.hp_excerpt { font-size: 1.1em; }61.content_preface, .content_preface p ul li td, .content_preface_bullets li, .content_preface_bullets li p {62font-size: 1.1em;63}64}65 66.table_main {67width: 100%;68max-width: 1024px;69border: none;70background: white;71}72#content_cell_padding { padding:15px 33px 0 33px; }73#sidebar { width:350px; max-width:350px; border-left:1px solid gray; }74#mobile_search { display:none; }75 76#logo_top {77max-width: 350px;78float:left;79margin:auto;80padding:5px 18px 0px 18px;81vertical-align:middle;82text-align: center;83}84 85.follow_search_wrapper {86padding:25px 35px 0 20px;87}88 89.follow_tools {90border:none;91padding-bottom: 20px;92text-align:right;93vertical-align:middle;94}95 96.follow_tools img { max-width:48px; }97 98@media screen and (max-width: 1020px) {99.desktop_only { display: none; clear:both; float:none; }100.table_main, #content_cell, header, footer { width: 100% !important; }101}102 103@media screen and (max-width: 850px) {104#sidebar { max-width:300px; }105}106 107@media screen and (min-width: 750px) {108.mobile_only { display: none; }109.nav_search { display:none; }110}111 112@media screen and (max-width: 770px) {113.ad-spot-wide { display: none; }114}115 116@media screen and (max-width: 700px) {117 118#sidebar {119width:370px;120max-width:370px;121display: block;122border:none;123}124 125#content_cell {126display: block;127}128}129 130@media screen and (max-width: 600px) {131 132.desktop_tablet_only { display: none; clear:both; float:none; }133#search_form, #mobile_search { display:none; }134 135#logo_top {136max-width: 350px;137float: none;138clear:both;139margin:auto;140padding:8px 0;141}142.mobile_center_middle {143margin:auto;144vertical-align:middle;145text-align: center; 146}147.follow_search_wrapper { padding:0; }148.follow_tools { padding-bottom: 10px; }149.follow_tools img { max-width:24px; }150}151 152 153@media screen and (max-width: 650px) {154 155.no_mobile { display:none; }156 157table.block, table.block tbody, table.block tr, table.block td, table.block th {158display: block !important;159padding:0;160margin:4px 0 !important;161white-space: normal !important;162}163 164table.block tr, table.block td, table.block th { margin: 0 !important; }165 166table.block tr { margin-bottom: 0 !important; }167table.block td { width:100% !important; padding-left:0 !important; padding-right:0 !important; margin-top: 7px !important; margin-bottom: 7px !important; }168table.block th { text-align: initial; }169 170table.no_block { display: table !important; }171table.no_block tr { display: table-row !important; }172table.no_block td { display: table-cell !important; }173}174 175@media screen and (max-width: 400px) {176 177#content_cell_padding { padding:15px 15px 0 15px; }178#logo_top {179max-width: 280px;180}181#sidebar {182width:300px;183max-width:300px;184display: block;185border:none;186}187 188body { font-size:1.05em; }189.article_body { font-size: 1.05em; }190.hp_excerpt { font-size: 1.05em; }191.content_preface, .content_preface p ul li td, .content_preface_bullets li, .content_preface_bullets li p {192font-size: 1.05m;193}194 195img, object, table {196float:none !important;197margin-right:0 !important;198margin-left:0 !important;199padding-right:0 !important;200padding-left:0 !important;201}202 203}204 205 206@media screen and (max-width: 349px) {207#content_cell_padding { padding:15px 10px 0 10px; }208#sidebar { max-width:300px; padding:0px; }209iframe { max-width:100%; }210 211body { font-size:1.05em; }212.article_body { font-size: 1.05em; }213.hp_excerpt { font-size: 1.05em; }214.content_preface, .content_preface p ul li td, .content_preface_bullets li, .content_preface_bullets li p {215font-size: 1.05m;216}217 218}219 220.right_box {221margin:0 0 10px 0; 222border:1px dotted gray;223border-right:none;224border-left:none;225text-align:left;226}227 228.right_box_heading {229height:24px;230font-family:Arial,sans-serif;231font-size:14px;232color:#2F4251;233padding:7px 0 0 15px;234margin:0 0 10px 0;235background:url(/images/bg_temp.gif);236}237 238.right_box_inner {239padding:0 17px 5px 15px;240}241 242.sidelink {243font-family:Arial,sans-serif;244font-size:small;245padding-top:0;246padding-bottom:0;247margin-top:0;248margin-bottom:3px;249color:#2F4251;250list-style-type: square;251}252 253.sidelink A {254text-decoration: none;255color:#2F4251;256}257 258.sidelink A:link { color:#2F4251; }259.sidelink A:visited { color:#2F4251; }260.sidelink A:hover { text-decoration: underline; }261 262.bottomlink {263font-size:11px;264font-family: Arial, sans-serif;265display:inline;266padding:0 7px 0 7px;267margin:0;268border-right:1px solid gray;269}270 271.graylink A, .graylink A:link, .graylink A:visited {272color:#525252;273text-decoration: none;274}275 276.graylink A:hover { color: blue; }277.theme_bg { background: black; }278.theme { color: #7B0100; }279.hover_line, .hover_line A, .hover_line A:link, .hover_line A:visited { text-decoration: none; }280.hover_line A:hover { text-decoration: underline; }281 282.blue_hover A, .blue_hover A:link, .blue_hover A:visited {283color: #0000FF;284text-decoration: none;285}286 287.blue_hover A:hover { text-decoration: underline; }288tr.c { background-color:#E2E4FF; }289 290table.c_display th, table.c_display td {291font-family:Arial,sans-serif;292font-size:11px;293}294 295table.c_display th { font-size:12px; }296table.c_display td.t { font-size:12px; }297td.b { white-space: nowrap; }298 299.e {300white-space:nowrap;301font-size:11px;302}303 304.video-wrapper {305position: relative;306padding-bottom: 56.25%; /* 16:9 */307padding-top: 25px;308height: 0;309}310.video-wrapper iframe {311position: absolute;312top: 0;313left: 0;314width: 100%;315height: 100%;316}317 318 319 320@media print {321.no_screen {display: block;}322.no_print {display: none;}323body,td,p,blockquote,ul,ol,li {324font-family:Times New Roman, serif;325font-size:12pt;326background:white;327}328h1,h2,h3,h4,h5,h6 {329font-family:Arial,sans-serif;330color:black;331}332h1, h1 A:link, h1 A:active, h1 A:visited {333font-size:18pt;334color:black;335text-decoration:none;336padding-top:0;337}338h2 {font-size:15pt;}339h3 {font-size:13pt;}340h4 {font-size:12pt;}341}342 343 344 345 346/*347 Colorbox Core Style:348 The following CSS is consistent between example themes and should not be altered.349*/350#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}351#cboxOverlay{position:fixed; width:100%; height:100%;}352#cboxMiddleLeft, #cboxBottomLeft{clear:left;}353#cboxContent{position:relative;}354#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}355#cboxTitle{margin:0;}356#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}357#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}358.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}359.cboxIframe{width:100%; height:100%; display:block; border:0;}360#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}361 362/* 363 User Style:364 Change the following styles to modify the appearance of Colorbox. They are365 ordered & tabbed in a way that represents the nesting of the generated HTML.366*/367#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}368#colorbox{outline:0;}369 #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}370 #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}371 #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}372 #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}373 #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}374 #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}375 #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}376 #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}377 #cboxContent{background:#fff; overflow:hidden;}378 .cboxIframe{background:#fff;}379 #cboxError{padding:50px; border:1px solid #ccc;}380 #cboxLoadedContent{margin-bottom:28px;}381 #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}382 #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}383 #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}384 #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}385 386 /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */387 #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }388 389 /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */390 #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}391 392 #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}393 #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}394 #cboxPrevious:hover{background-position:-75px -25px;}395 #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}396 #cboxNext:hover{background-position:-50px -25px;}397 #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}398 #cboxClose:hover{background-position:-25px -25px;}399 400/*401 The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill402 when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.403 See: http://jacklmoore.com/notes/ie-transparency-problems/404*/405.cboxIE #cboxTopLeft,406.cboxIE #cboxTopCenter,407.cboxIE #cboxTopRight,408.cboxIE #cboxBottomLeft,409.cboxIE #cboxBottomCenter,410.cboxIE #cboxBottomRight,411.cboxIE #cboxMiddleLeft,412.cboxIE #cboxMiddleRight {413 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);414}415 </style>416 <title>417 Cheer Up :: The Future of Capitalism418 </title>419 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">420 <meta content="Here are some post-election reasons to be optimistic, even if, like me, you have had or still have your reservations about Donald Trump: Trump the tax-cutter. If taxes are headed in a direction, it's downward, rather than upward, both at the corporate" name="description">421 <meta content="Health Care, Immigration, New York, Politics, Press, Taxes Cheer Up" name="keywords">422 <meta content="width=device-width, initial-scale=1.0" name="viewport">423 <meta content="The Future of Capitalism" property="og:site_name">424 <meta content="Cheer Up" property="og:title">425 <meta content="article" property="og:type">426 <meta content="en_US" property="og:locale">427 <meta content="@CapitalismNow" name="twitter:site">428 <meta content="Here are some post-election reasons to be optimistic, even if, like me, you have had or still have your reservations about Donald Trump: Trump the tax-cutter. If taxes are headed in a direction, it's downward, rather than upward, both at the corporate" property="og:description">429 <meta content="Here are some post-election reasons to be optimistic, even if, like me, you have had or still have your reservations about Donald Trump: Trump the tax-cutter. If taxes are headed in a direction, it's downward, rather than upward, both at the corporate" name="twitter:description">430 <meta content="" name="twitter:image">431 <style type="text/css">432 <!--433@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } /* needed for checkbox hack */434 435.nav {436 position: relative;437 -webkit-animation: bugfix infinite 1s;438 font-family: Arial, Helvetica, sans-serif;439 font-size: 15px;440 font-weight: 600;441 letter-spacing: 0.1px;442 color: #000000;443 background: #F5F6F7;444 border-top: 1px solid #F5F6F7;445 border-bottom: 2px solid #000000;446}447.nav ul {448 display: none;449 list-style: none;450 margin: 0px;451 padding: 0px;452}453.nav ul li a {454 display: block;455 padding: 14px 5px;456 background: #F5F6F7;457 color: #000000;458 text-decoration: none;459 border-right: 1px solid #F5F6F7;460 white-space:nowrap;461}462.nav ul li a:hover {463 background: #016A3A;464 color: #FFFFFF;465}466.nav ul li:last-of-type a {467 border-right: 0px;468}469.nav ul li ul li a {470 padding-left: 1.5em;471}472.nav ul li ul li ul li a {473 padding-left: 3.125em;474}475.nav input.trigger {476 position: absolute;477 top: -9999px;478 left: -9999px;479}480.nav input.trigger:checked ~ ul, .nav input.trigger:checked ~ ul li ul {481 display: block !important;482}483@media (min-width: 900px) {484 .nav input.trigger:checked ~ ul, .nav input.trigger:checked ~ ul li ul {485 /* older flexbox */486 display: -webkit-box;487 display: -moz-box;488 display: box;489 -webkit-box-orient: horizontal;490 -moz-box-orient: horizontal;491 box-orient: horizontal;492 /* newer flexbox */493 display: flex;494 flex-direction: row;495 }496}497.nav label {498 position: relative;499 display: block;500 min-height: 2em;501 padding: .45em;502 margin: 0;503 cursor: pointer;504 line-height: 2em;505 text-transform: uppercase;506 color: #FFFFFF;507 background: #000000;508}509.nav label:after {510 position: absolute;511 right: 1em;512 top: .2em;513 content: "\2261";514 font-stretch: ultra-expanded;515 font-size: 1.8em;516 color: #FFFFFF;517}518@media (min-width: 600px) {519 .nav ul {520 /* older flexbox */521 display: -ms-flexbox;522 flex-direction: -ms-row;523 display: -webkit-box;524 display: -moz-box;525 display: box;526 -webkit-box-orient: horizontal;527 -moz-box-orient: horizontal;528 box-orient: horizontal;529 /* newer flexbox */530 display: flex;531 flex-direction: row;532 }533 .nav ul li {534 position: relative;535 text-align: center;536 /* older flexbox */537 -ms-flex: 1;538 -webkit-box-flex: 1;539 -moz-box-flex: 1;540 box-flex: 1;541 /* newer flexbox */542 flex: 1;543 }544 .nav ul li ul {545 display: none !important;546 position: absolute;547 top: 3.0625em;548 left: 0;549 display: block;550 width: 12.5em;551 z-index: 200;552 }553 .nav ul li ul li {554 text-align: left;555 }556 .nav ul li ul li ul {557 z-index: 300;558 top: 0px;559 left: 12.4em;560 }561 .nav ul li ul li ul li a {562 padding-left: 30px !important;563 }564 .nav ul li:hover > ul {565 display: block !important;566 }567 .nav label {568 display: none;569 }570}571 572.video-wrapper {573position: relative;574padding-bottom: 56.25%; /* 16:9 */575padding-top: 25px;576height: 0;577}578.video-wrapper iframe {579position: absolute;580top: 0;581left: 0;582width: 100%;583height: 100%;584}585 586-->587 </style>588 <meta content="" property="og:url">589 <meta content="summary_large_image" name="twitter:card">590 <meta content="Cheer Up" name="twitter:title">591 <meta content="@CapitalismNow" name="twitter:site">592 <meta content="Ira Stoll" name="author">593 <meta content="en" http-equiv="content-language">594 <meta content="en" name="language">595 <meta content="no-cache" http-equiv="cache-control">596 <meta content="no-cache" http-equiv="pragma">597 <!--598<rdf:RDF xmlns:rdf=""599 xmlns:dc="">600 xmlns:trackback=""601<rdf:Description602 rdf:about=""603 dc:title="Cheer Up"604 dc:identifier=""605 dc:description="Here are some post-election reasons to be optimistic, even if, like me, you have had or still have your reservations about Donald Trump: Trump the tax-cutter. If taxes are headed in a direction, it's downward, rather than upward, both at the corporate"606 dc:creator="Future of Capitalism Blog"607 dc:date="Nov 9, 2016 at 2:36 pm" />608</rdf:RDF>609-->610 <style media="print" type="text/css">611 <!--612.table_main {613width:100%;614border:none;615background:white;616}617.content_cell {618width: 100%;619padding:0;620}621-->622 </style>623 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">624 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">625 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">626 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">627 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">628 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">629 <style type="text/css">630 #st-1 {631 font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;;632 direction: ltr;633 display: block;634 opacity: 1;635 text-align: left;636 z-index: 94034;637}638#st-1.st-animated {639 -moz-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -ms-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -o-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -webkit-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in;640}641#st-1.st-hidden {642 opacity: 0;643}644 645#st-1.st-preview {646 display: none!important;647 opacity: 0!important;648}649#st-1.st-hide {650 display: none;651}652#st-1 .st-btn {653 -moz-box-sizing: border-box;654-webkit-box-sizing: border-box;655box-sizing: border-box;656 -moz-transition: opacity 0.2s ease-in, top 0.2s ease-in; -ms-transition: opacity 0.2s ease-in, top 0.2s ease-in; -o-transition: opacity 0.2s ease-in, top 0.2s ease-in; -webkit-transition: opacity 0.2s ease-in, top 0.2s ease-in; transition: opacity 0.2s ease-in, top 0.2s ease-in;657 -moz-border-radius: 4px;658-webkit-border-radius: 4px;659border-radius: 4px;660 border: none;661 cursor: pointer;662 display: inline-block;663 font-size: 12px;664 height: 40px;665 line-height: 40px;666 margin-right: 8px;667 padding: 0 10px;668 position: relative;669 text-align: center;670 top: 0;671 vertical-align: top;672 white-space: nowrap;673}674#st-1 .st-btn:last-child {675 margin-right: 0;676}677#st-1 .st-btn > svg {678 height: 20px;679 width: 20px;680 position: relative;681 top: 10px;682 vertical-align: top;683}684#st-1 .st-btn > img {685 display: inline-block;686 height: 20px;687 width: 20px;688 position: relative;689 top: 10px;690 vertical-align: top;691}692#st-1 .st-btn > span {693 -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;694 color: #fff;695 display: inline-block;696 font-weight: 500;697 letter-spacing: 0.5px;698 min-width: 67px;699 opacity: 1;700 padding: 0 6px;701 position: relative;702 vertical-align: top;703}704#st-1.st-has-labels .st-btn {705 min-width: 135px;706}707#st-1.st-has-labels .st-btn.st-remove-label {708 min-width: 50px;709}710#st-1.st-has-labels .st-btn.st-remove-label > span {711 display: none;712}713#st-1.st-has-labels .st-btn.st-hide-label > span {714 display: none;715}716#st-1 .st-total {717 color: #555;718 display: inline-block;719 font-weight: 500;720 line-height: 15px;721 margin-right: 0;722 max-width: 80px;723 padding: 4px 8px;724 text-align: center;725}726#st-1 .st-total.st-hidden {727 display: none;728}729#st-1 .st-total > span {730 font-size: 20px;731 line-height: 22px;732 display: block;733 padding: 0;734}735#st-1 .st-total > span.st-shares {736 font-size: 12px;737 line-height: 12px;738}739#st-1.st-justified {740 display: flex;741 text-align: center;742}743#st-1.st-justified .st-btn {744 -moz-flex: 1;745-ms-flex: 1;746-webkit-flex: 1;747flex: 1;748}#st-1 .st-btn:hover {749 opacity: .8;750 top: -4px;751}#st-1 .st-btn[data-network='facebook'] {752 background-color: #4267B2753}754#st-1 .st-btn[data-network='facebook'] img {755 filter: 756}757#st-1 .st-btn[data-network='facebook'] > span {758 color: #fff759}760#st-1 .st-btn[data-network='twitter'] {761 background-color: #000000762}763#st-1 .st-btn[data-network='twitter'] img {764 filter: 765}766#st-1 .st-btn[data-network='twitter'] > span {767 color: #fff768}769#st-1 .st-btn[data-network='email'] {770 background-color: #7d7d7d771}772#st-1 .st-btn[data-network='email'] img {773 filter: 774}775#st-1 .st-btn[data-network='email'] > span {776 color: #fff777}778#st-1 .st-btn[data-network='whatsapp'] {779 background-color: #25d366780}781#st-1 .st-btn[data-network='whatsapp'] img {782 filter: 783}784#st-1 .st-btn[data-network='whatsapp'] > span {785 color: #fff786}787#st-1 .st-btn[data-network='sharethis'] {788 background-color: #95D03A789}790#st-1 .st-btn[data-network='sharethis'] img {791 filter: 792}793#st-1 .st-btn[data-network='sharethis'] > span {794 color: #fff795}796#st-1 .st-btn[data-network='linkedin'] {797 background-color: #0077b5798}799#st-1 .st-btn[data-network='linkedin'] img {800 filter: 801}802#st-1 .st-btn[data-network='linkedin'] > span {803 color: #fff804}805#st-1 .st-btn[data-network='telegram'] {806 background-color: #0088cc807}808#st-1 .st-btn[data-network='telegram'] img {809 filter: 810}811#st-1 .st-btn[data-network='telegram'] > span {812 color: #fff813}#st-1 .st-btn[data-network='snapchat'] > span {814 color: #333};815}816 </style>817 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">818 <style type="text/css">819 #st-2 {820 font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;;821 direction: ltr;822 display: block;823 opacity: 1;824 text-align: left;825 z-index: 94034;826}827#st-2.st-animated {828 -moz-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -ms-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -o-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; -webkit-transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in; transition: o 0.2s ease-in, p 0.2s ease-in, a 0.2s ease-in, c 0.2s ease-in, i 0.2s ease-in, t 0.2s ease-in, y 0.2s ease-in;829}830#st-2.st-hidden {831 opacity: 0;832}833 834#st-2.st-preview {835 display: none!important;836 opacity: 0!important;837}838#st-2.st-hide {839 display: none;840}841#st-2 .st-btn {842 -moz-box-sizing: border-box;843-webkit-box-sizing: border-box;844box-sizing: border-box;845 -moz-transition: opacity 0.2s ease-in, top 0.2s ease-in; -ms-transition: opacity 0.2s ease-in, top 0.2s ease-in; -o-transition: opacity 0.2s ease-in, top 0.2s ease-in; -webkit-transition: opacity 0.2s ease-in, top 0.2s ease-in; transition: opacity 0.2s ease-in, top 0.2s ease-in;846 -moz-border-radius: 4px;847-webkit-border-radius: 4px;848border-radius: 4px;849 border: none;850 cursor: pointer;851 display: inline-block;852 font-size: 12px;853 height: 40px;854 line-height: 40px;855 margin-right: 8px;856 padding: 0 10px;857 position: relative;858 text-align: center;859 top: 0;860 vertical-align: top;861 white-space: nowrap;862}863#st-2 .st-btn:last-child {864 margin-right: 0;865}866#st-2 .st-btn > svg {867 height: 20px;868 width: 20px;869 position: relative;870 top: 10px;871 vertical-align: top;872}873#st-2 .st-btn > img {874 display: inline-block;875 height: 20px;876 width: 20px;877 position: relative;878 top: 10px;879 vertical-align: top;880}881#st-2 .st-btn > span {882 -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;883 color: #fff;884 display: inline-block;885 font-weight: 500;886 letter-spacing: 0.5px;887 min-width: 67px;888 opacity: 1;889 padding: 0 6px;890 position: relative;891 vertical-align: top;892}893#st-2.st-has-labels .st-btn {894 min-width: 135px;895}896#st-2.st-has-labels .st-btn.st-remove-label {897 min-width: 50px;898}899#st-2.st-has-labels .st-btn.st-remove-label > span {900 display: none;901}902#st-2.st-has-labels .st-btn.st-hide-label > span {903 display: none;904}905#st-2 .st-total {906 color: #555;907 display: inline-block;908 font-weight: 500;909 line-height: 15px;910 margin-right: 0;911 max-width: 80px;912 padding: 4px 8px;913 text-align: center;914}915#st-2 .st-total.st-hidden {916 display: none;917}918#st-2 .st-total > span {919 font-size: 20px;920 line-height: 22px;921 display: block;922 padding: 0;923}924#st-2 .st-total > span.st-shares {925 font-size: 12px;926 line-height: 12px;927}928#st-2.st-justified {929 display: flex;930 text-align: center;931}932#st-2.st-justified .st-btn {933 -moz-flex: 1;934-ms-flex: 1;935-webkit-flex: 1;936flex: 1;937}#st-2 .st-btn:hover {938 opacity: .8;939 top: -4px;940}#st-2 .st-btn[data-network='facebook'] {941 background-color: #4267B2942}943#st-2 .st-btn[data-network='facebook'] img {944 filter: 945}946#st-2 .st-btn[data-network='facebook'] > span {947 color: #fff948}949#st-2 .st-btn[data-network='twitter'] {950 background-color: #000000951}952#st-2 .st-btn[data-network='twitter'] img {953 filter: 954}955#st-2 .st-btn[data-network='twitter'] > span {956 color: #fff957}958#st-2 .st-btn[data-network='email'] {959 background-color: #7d7d7d960}961#st-2 .st-btn[data-network='email'] img {962 filter: 963}964#st-2 .st-btn[data-network='email'] > span {965 color: #fff966}967#st-2 .st-btn[data-network='whatsapp'] {968 background-color: #25d366969}970#st-2 .st-btn[data-network='whatsapp'] img {971 filter: 972}973#st-2 .st-btn[data-network='whatsapp'] > span {974 color: #fff975}976#st-2 .st-btn[data-network='sharethis'] {977 background-color: #95D03A978}979#st-2 .st-btn[data-network='sharethis'] img {980 filter: 981}982#st-2 .st-btn[data-network='sharethis'] > span {983 color: #fff984}985#st-2 .st-btn[data-network='linkedin'] {986 background-color: #0077b5987}988#st-2 .st-btn[data-network='linkedin'] img {989 filter: 990}991#st-2 .st-btn[data-network='linkedin'] > span {992 color: #fff993}994#st-2 .st-btn[data-network='telegram'] {995 background-color: #0088cc996}997#st-2 .st-btn[data-network='telegram'] img {998 filter: 999}1000#st-2 .st-btn[data-network='telegram'] > span {1001 color: #fff1002}#st-2 .st-btn[data-network='snapchat'] > span {1003 color: #333};1004}1005 </style>1006 </head>1007 <body>1008 <div id="body_wrapper" style="background:#FFFFFF; margin:auto; margin-top:0; padding:0; max-width:1020px;">1009 <header class="no_print nocontent" style="margin:auto; margin-top:0; max-width:1020px;">1010 <div style="margin:auto; vertical-align:middle; text-align:center;">1011 <a>1012 <img alt="The Future of Capitalism" border="0" class="force_print" id="logo_top" src="rick.jpg" title="The Future of Capitalism" valign="middle">1013 </a>1014 </div>1015 <div class="follow_search_wrapper" style="text-align:right;">1016 <div class="mobile_center_middle">1017 <div class="follow_tools mobile_center_middle" style="border:none;">1018 <span style="white-space:nowrap; margin:auto; vertical-align:middle;">1019 <a>1020 <img alt="Facebook" border="0" src="rick.jpg" title="Facebook">1021 </a>1022 1023 <a>1024 <img alt="Twitter" border="0" src="rick.jpg" title="Twitter">1025 </a>1026 1027 <a>1028 <img alt="RSS" border="0" src="rick.jpg" title="RSS">1029 </a>1030 1031 <a>1032 <img alt="Join Mailing List" border="0" src="rick.jpg" title="Join Mailing List">1033 </a>1034 </span>1035 </div>1036 <div id="search_form" style="margin-bottom:15px; white-space:nowrap; vertical-align:middle;">1037 <form action="" method="get" style="margin:0 0 0 0; padding:0; display:inline; white-space:nowrap;">1038 <input name="cx" type="hidden" value="partner-pub-2951801646144412:p24ltemdv6f">1039 <input name="cof" type="hidden" value="FORID:9">1040 <input name="ie" type="hidden" value="UTF-8">1041 <input name="q" size="25" style="font-family: Arial, sans-serif; =background-color:white; display:inline; margin:0; border:1px solid gray;" type="text">1042 <input name="sa" style="font-family: Arial, sans-serif; background-color:#FBF7F7; color:black; display:inline; margin:0; padding:1px 4px 1px 5px; border:1px solid gray;" type="submit" value="Search">1043 </form>1044 </div>1045 </div>1046 </div>1047 <div style="clear:both;">1048 </div>1049 <nav class="nav nocontent" role="navigation">1050 <input class="trigger" id="mainNavButton" type="checkbox">1051 <label for="mainNavButton" onclick>1052 Navigation Menu1053 </label>1054 <ul>1055 <li>1056 <a>1057 Home1058 </a>1059 </li>1060 <li>1061 <a>1062 Archives1063 </a>1064 </li>1065 <li>1066 <a>1067 About1068 </a>1069 </li>1070 <li>1071 <a>1072 Mailing List1073 </a>1074 </li>1075 </ul>1076 </nav>1077 <div id="mobile_search" style="margin-top:15px; width:100%; text-align:center;">1078 </div>1079 </header>1080 <table align="center" border="0" cellpadding="0" cellspacing="0" class="table_main" style="clear:both; margin-top:0px;">1081 <tbody>1082 <tr>1083 <td id="content_cell">1084 <div id="content_cell_padding">1085 <article>1086 <div itemscope itemtype="">1087 <div id="print_content">1088 <h1 itemprop="name headline" style="margin-bottom:10px;">1089 Cheer Up1090 </h1>1091 <p class="sans-serif" style="margin:10px 0 0 0;">1092 <b>1093 </b>1094 </p>1095 <p class="no_screen" style="margin:0 0 10px 0;">1096 <b>1097 https://www.futureofcapitalism.com/2016/11/cheer-up1098 </b>1099 </p>1100 </div>1101 <!-- PLAINTEXT STRIP BEGIN -->1102 <table border="0" cellpadding="0" cellspacing="0" class="no_print nocontent" id="links" style="margin:10px 0 5px 0;">1103 <tbody>1104 <tr>1105 <td>1106 <div class="sharethis-inline-share-buttons st-left st-inline-share-buttons st-animated" data-email-subject="Cheer Up" data-title="Cheer Up" data-url="" id="st-2" style="margin-top:5px;">1107 <div class="st-btn st-first st-remove-label" data-network="facebook" style="display: inline-block;">1108 <img alt="facebook sharing button" src="rick.jpg">1109 </div>1110 <div class="st-btn st-remove-label" data-network="twitter" style="display: inline-block;">1111 <img alt="twitter sharing button" src="rick.jpg">1112 </div>1113 <div class="st-btn st-remove-label" data-network="email" style="display: inline-block;">1114 <img alt="email sharing button" src="rick.jpg">1115 </div>1116 <div class="st-btn st-remove-label" data-network="whatsapp" style="display: inline-block;">1117 <img alt="whatsapp sharing button" src="rick.jpg">1118 </div>1119 <div class="st-btn st-remove-label" data-network="sharethis" style="display: inline-block;">1120 <img alt="sharethis sharing button" src="rick.jpg">1121 </div>1122 <div class="st-btn st-remove-label" data-network="linkedin" style="display: inline-block;">1123 <img alt="linkedin sharing button" src="rick.jpg">1124 </div>1125 <div class="st-btn st-last st-remove-label" data-network="telegram" style="display: none;">1126 <img alt="telegram sharing button" src="rick.jpg">1127 </div>1128 </div>1129 </td>1130 </tr>1131 </tbody>1132 </table>1133 <!-- PLAINTEXT STRIP END -->1134 <div id="print_content_3">1135 <div class="article_body itemprop_articlebody" itemprop="articleBody">1136 <p>1137 Here are some post-election reasons to be optimistic, even if, like me, you have had or still have your reservations about Donald Trump:1138 </p>1139 <p>1140 <b>1141 Trump the tax-cutter1142 </b>1143 .1144 </p>1145 <p>1146 <b>1147 Trump the ISIS-fighter1148 </b>1149 .1150 </p>1151 <p>1152 <b>1153 Trump the open door on immigration1154 </b>1155 .1156 </p>1157 <p>1158 <b>1159 Trump the free trader1160 </b>1161 : Trump has consistently stressed that he is for free trade, he just wants better deals. Take him at his word, for now, at least.1162 </p>1163 <p>1164 <b>1165 Trump the progressive on gay rights1166 </b>1167 .1168 <a>1169 it1170 </a>1171 even from the vehemently anti-Trump New York Times: "Donald Trump's More Accepting Views on Gay Issues Set Him Apart in G.O.P."1172 </p>1173 <p>1174 <b>1175 Trump the proof that money doesn't buy elections1176 </b>1177 .1178 </p>1179 <p>1180 He could be a good president. Certainly, his victory in itself is an impressive accomplishment.1181 </p>1182 <p>1183 <b>1184 He took on the press and won1185 </b>1186 .1187 </p>1188 <p>1189 <b>1190 Trump has some high quality people around him1191 </b>1192 .1193 </p>1194 <p>1195 <b>1196 Conservative judges1197 </b>1198 .1199 </p>1200 <p>