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<html class="">2 <head>3 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">4 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">5 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">6 <title>7 All work and no play makes Jack a dul - TranslationParty8 </title>9 <meta content="index,follow" name="robots">10 <meta content="All work and no play makes Jack a dull boy All work and no play makes Jack a dull boy All work and no play makes Jack a dull boy " name="description">11 <style>12 @font-face {13 font-family: 'Lato';14 font-style: normal;15 font-weight: 300;16 src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwiPHA.ttf) format('truetype');17}18@font-face {19 font-family: 'Lato';20 font-style: normal;21 font-weight: 400;22 src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');23}24 25 26 27@font-face{font-family:ARSMaquettePro;src:url(../../fonts/ars_maquette/ARSMaquettePro-Light.eot);src:url(../../fonts/ars_maquette/ARSMaquettePro-Light.woff2) format('woff2'),url(../../fonts/ars_maquette/ARSMaquettePro-Light.woff) format('woff'),url(../../fonts/ars_maquette/ARSMaquettePro-Light.ttf) format('truetype'),url(../../fonts/ars_maquette/ARSMaquettePro-Light.svg#ARSMaquettePro-Light) format('svg'),url(../../fonts/ars_maquette/ARSMaquettePro-Light.eot?#iefix) format('embedded-opentype');font-weight:100;font-style:normal}@font-face{font-family:ARSMaquettePro;src:url(../../fonts/ars_maquette/ARSMaquettePro-Regular.eot);src:url(../../fonts/ars_maquette/ARSMaquettePro-Regular.woff2) format('woff2'),url(../../fonts/ars_maquette/ARSMaquettePro-Regular.woff) format('woff'),url(../../fonts/ars_maquette/ARSMaquettePro-Regular.ttf) format('truetype'),url(../../fonts/ars_maquette/ARSMaquettePro-Regular.svg#ARSMaquettePro-Regular) format('svg'),url(../../fonts/ars_maquette/ARSMaquettePro-Regular.eot?#iefix) format('embedded-opentype');font-weight:400;font-style:normal}@font-face{font-family:ARSMaquettePro;src:url(../../fonts/ars_maquette/ARSMaquettePro-Medium.eot);src:url(../../fonts/ars_maquette/ARSMaquettePro-Medium.woff2) format('woff2'),url(../../fonts/ars_maquette/ARSMaquettePro-Medium.woff) format('woff'),url(../../fonts/ars_maquette/ARSMaquettePro-Medium.ttf) format('truetype'),url(../../fonts/ars_maquette/ARSMaquettePro-Medium.svg#ARSMaquettePro-Medium) format('svg'),url(../../fonts/ars_maquette/ARSMaquettePro-Medium.eot?#iefix) format('embedded-opentype');font-weight:500;font-style:normal}@font-face{font-family:ARSMaquettePro;src:url(../../fonts/ars_maquette/ARSMaquettePro-Bold.eot);src:url(../../fonts/ars_maquette/ARSMaquettePro-Bold.woff2) format('woff2'),url(../../fonts/ars_maquette/ARSMaquettePro-Bold.woff) format('woff'),url(../../fonts/ars_maquette/ARSMaquettePro-Bold.ttf) format('truetype'),url(../../fonts/ars_maquette/ARSMaquettePro-Bold.svg#ARSMaquettePro-Bold) format('svg'),url(../../fonts/ars_maquette/ARSMaquettePro-Bold.eot?#iefix) format('embedded-opentype');font-weight:600;font-style:normal}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}button,html,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:1.6em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:'';content:none}small{font-size:75%}.no-border{border:0!important;padding:48px 24px 0!important}.bar-loader{background:#fff url(../img/animated-stripe.gif) repeat no-repeat bottom!important}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}nav ol,nav ul{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html{padding:0;margin:0}body{padding:0;margin:0 0 110px 0;line-height:1.4;color:rgba(0,0,0,.9);font-size:32px}body{font-family:ARSMaquettePro,Helvetica Neue,Arial,sans-serif;font-weight:400;text-rendering:auto;font-smoothing:antialiased;-webkit-font-smoothing:antialiased!important;-moz-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}.card.front.no-border{padding-top:24px!important}@media all and (max-width:500px){body{font-size:24px}.card.front.no-border{padding-right:0!important;padding-left:0!important}.flip_container .card_inner{padding:32px 24px 8px!important}.card.front.no-border{padding-top:8!important}}body .inverted{color:#fff}h1,h2,h3,h4,h5{margin:0;color:rgba(0,0,0,.9)}.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5{color:#fff}p{margin:0 0 24px}@media all and (max-width:500px){p{margin:0 0 12px}}.less{color:rgba(0,0,0,.4)}.inverted .less{color:rgba(255,255,255,.6)}.section .section_inner{max-width:800px;margin:50px auto}@media all and (max-width:500px){.section .section_inner{margin:0;max-width:none}}form{padding:0;margin:0}.card{background:#fff;padding:24px;margin:0;position:relative}@media all and (max-width:500px){.card{padding:12px!important;border-bottom:1px solid #f4f6f8}}.card .card_inner{max-width:1100px;margin:0 auto}@media all and (max-width:500px){.card .card_inner{margin:0;max-width:none}}#results .card{background:#fff}#results .card.success{background:#3a9280!important}#results .card.success a{color:#fff}#results .card.abject_failure{background:#ed7a5b!important}.language{font-weight:300;font-size:14.4px;text-transform:uppercase;color:#000;margin-bottom:12px}button,input,select,textarea{font-size:24px;font-weight:400;color:rgba(0,0,0,.9)}@media all and (max-width:500px){button,input,select,textarea{font-size:24px}}input[type=text],textarea{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;width:100%;margin:0 0 12px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(0,0,0,.15);font-family:ARSMaquettePro,Helvetica Neue,Arial,sans-serif;padding:8px 10px;background:#fafafa}textarea:hover{-webkit-box-shadow:0 0 0 1px #768190,0 1px 2px rgba(0,0,0,.16);box-shadow:0 0 0 1px #768190,0 1px 2px rgba(0,0,0,.16)}textarea:active,textarea:focus{outline:0;-webkit-box-shadow:0 0 0 2px #0055b8,0 1px 2px rgba(0,0,0,.16);box-shadow:0 0 0 2px #0055b8,0 1px 2px rgba(0,0,0,.16)}.button,button,input[type=button],input[type=submit]{display:inline-block;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:.75em;text-align:center;font-family:ARSMaquettePro,Helvetica Neue,Arial,sans-serif;font-weight:400;line-height:1em;border:none;-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:25.6px;font-family:ARSMaquettePro,Helvetica Neue,Arial,sans-serif}.button,.button:link,.button:visited,button,button:link,button:visited,input[type=button],input[type=button]:link,input[type=button]:visited,input[type=submit],input[type=submit]:link,input[type=submit]:visited{background:#0055b8;cursor:pointer}button:disabled,button:hover:disabled{background:#00479a;-webkit-box-shadow:0 6px 0 0 #aaa,0 -1px 0 0 #bbb inset;-moz-box-shadow:0 6px 0 0 #aaa,0 -1px 0 0 #bbb inset;box-shadow:0 6px 0 0 #aaa,0 -1px 0 0 #bbb inset;cursor:not-allowed}.button:hover,button:hover,input[type=button]:hover,input[type=submit]:hover{background:#00479a}.button:focus,button:focus,input[type=button]:focus,input[type=submit]:focus{outline:0}.button,.button.stayActive,.button:active,.button:hover,.button:link,.button:visited,button,button.stayActive,button:active,button:hover,button:link,button:visited,input[type=button],input[type=button].stayActive,input[type=button]:active,input[type=button]:hover,input[type=button]:link,input[type=button]:visited,input[type=submit],input[type=submit].stayActive,input[type=submit]:active,input[type=submit]:hover,input[type=submit]:link,input[type=submit]:visited{color:#fff;text-decoration:none}@media all and (max-width:500px){.button,button,input[type=button],input[type=submit]{display:block}}@media all and (max-width:500px){.button,button,input[type=button],input[type=submit]{font-size:19.2px}}@media all and (max-width:500px){.button,button,input[type=button],input[type=submit]{display:block;width:100%}}a{color:#666}a.no-style{text-decoration:none}a:link,a:visited{text-decoration:none}a:hover{text-decoration:none}.margin_none{margin:0}.otherparties ul{padding-left:0}.otherparties h4{margin:8px 0 8px 0;font-size:1em}.otherparties .oparty.card:hover{background:#f2f5f7}#otherparties-box .oparty.card .card_inner{display:flex;align-items:center}.oparty{font-size:.75em;cursor:pointer}.oparty .b{border:1px solid #abb3bd;min-width:58px;min-height:58px;float:left;margin-right:20px;font-size:14px;text-align:center;cursor:pointer}.oparty .v{border-bottom:1px solid #abb3bd;background:#f4f6f8;padding:4px}.oparty .p{font-size:.9em}.oparty .t{background:#fff;padding:2px 6px}.card .brand{border:0}.brand{font-size:.4em;text-align:right;overflow:auto}.brand img{height:55px;float:left}.brand p{margin:0}.card.brand{border-bottom:none}.card.text-center{max-width:1100px;margin:auto;text-align:left}.flip_container .card_inner{background:#f2f5f7;padding:48px;box-sizing:border-box}.moreparties{display:block;text-align:center;font-size:.8em}.createyourparty{text-align:center}.createyourparty a{color:#17538a;text-decoration:underline}#crash-other-parties{float:right;font-size:.7em}#scroll-up{cursor:pointer;font-size:2em}#scroll-up:hover{color:#aaa}.button-pressed,.button-pressed:hover{border:0;background:#ddd;-webkit-box-shadow:0 2px 0 0 #b2b8bb,0 -1px 0 0 #c1c1c1 inset;-moz-box-shadow:0 2px 0 0 #b2b8bb,0 -1px 0 0 #c1c1c1 inset;box-shadow:0 2px 0 0 #b2b8bb,0 -1px 0 0 #c1c1c1 inset;-webkit-transform:translateY(3px);-moz-transform:translateY(3px);-ms-transform:translateY(3px);-o-transform:translateY(3px);transform:translateY(3px)}#bottom-bar{display:none;position:fixed;z-index:15000;width:100%;bottom:0;font-size:.6em;padding:10px 0}#bottom-bar #votesnum,#bottom-bar .button{width:55px;padding:15px 0;margin-right:10px;margin-bottom:10px}#bottom-bar #votesnum{float:left;text-align:center;border:1px solid #ccc;background:#fff;padding:5px 0}#create-party-btn{width:220px!important}.social{text-align:right}.c{clear:both}.text-center{text-align:center}.col13,.col23,.col33{width:33%;float:left}.social-mobile{display:none}@media all and (max-width:540px){textarea{height:5em!important}.brand{font-size:.5em;text-align:right}.brought{display:none}.brand img{height:55px;float:left}.labs{display:none}.oparty{font-size:.8em}.oparty .v{width:50px}#crash-other-parties{float:none;text-align:center;margin-bottom:1em;margin-top:1.2em}#bottom-bar{margin:0;font-size:.7em;padding:8px}#layer1{width:97%}#layer2{margin-left:5px;width:97%}#bottom-bar #votesnum{margin-bottom:0;width:37px;padding-bottom:3px}#bottom-bar .button{width:44px;padding:12px 0;margin-right:10px;float:left;font-size:.8em}.col13{width:158px}.col23{width:120px}.col33{width:auto}.social{display:none}.social-mobile{display:block;float:right}.x{float:right!important;margin-right:15px!important}.social-mobile a{font-size:1em}#create-party-btn{font-size:1em;width:130px!important}}@media all and (max-width:320px){#bottom-bar{padding:6px;font-size:.6em}#create-party-btn{width:100px!important}.col23{width:100px}#share{margin-right:0!important}}.top-shadow{-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.75);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.75);box-shadow:0 2px 5px 0 rgba(0,0,0,.75);background:#f3f3f3}#ticker{position:relative;margin-bottom:1em;border:1px solid rgba(0,0,0,.15);height:1.6em;overflow:hidden;font-size:.5em;z-index:9999}#ticker .inner{position:absolute;white-space:nowrap;padding:.1em .4em}.live{background:#ed7a5b;font-size:.4em;color:#fff;float:left;padding:.4em;font-weight:700}.icon{cursor:pointer}@font-face{font-family:fontello;src:url(../font/fontello.eot?52934966);src:url(../font/fontello.eot?52934966#iefix) format('embedded-opentype'),url(../font/fontello.woff2?52934966) format('woff2'),url(../font/fontello.woff?52934966) format('woff'),url(../font/fontello.ttf?52934966) format('truetype'),url(../font/fontello.svg?52934966#fontello) format('svg');font-weight:400;font-style:normal}[class*=" icon-"]:before,[class^=icon-]:before{font-family:fontello;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-thumbs-up:before{content:'\e800'}.icon-thumbs-down:before{content:'\e801'}.icon-up-open:before{content:'\e802'}.icon-down-open:before{content:'\e803'}.icon-ok:before{content:'\e804'}.icon-twitter:before{content:'\f099'}.icon-facebook:before{content:'\f09a'}.icon-up-circled:before{content:'\f0aa'}.icon-down-circled:before{content:'\f0ab'}.icon-gplus-squared:before{content:'\f0d4'}.icon-gplus:before{content:'\f0d5'}.icon-angle-circled-up:before{content:'\f139'}.icon-angle-circled-down:before{content:'\f13a'}.icon-ok-squared:before{content:'\f14a'}.icon-thumbs-up-alt:before{content:'\f164'}.icon-thumbs-down-alt:before{content:'\f165'}.icon-tumblr:before{content:'\f173'}.icon-tumblr-squared:before{content:'\f174'}.icon-google:before{content:'\f1a0'}.icon-reddit:before{content:'\f1a1'}.icon-reddit-squared:before{content:'\f1a2'}.icon-stumbleupon:before{content:'\f1a4'}.icon-facebook-official:before{content:'\f230'}.icon-reddit-alien:before{content:'\f281'}.icon-twitter-squared:before{content:'\f304'}.icon-facebook-squared:before{content:'\f308'}.icon-linkedin-squared:before{content:'\f30c'}28 29.async-hide { opacity: 0 !important}30 </style>31 <!-- Google tag (gtag.js) -->32 <meta content="TranslationParty - Find The Equilibrium" property="og:title">33 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">34 <style data-fbcssmodules="css:fb.css.base css:fb.css.dialog css:fb.css.iframewidget css:fb.css.customer_chat_plugin_iframe" type="text/css">35 .fb_hidden{position:absolute;top:-10000px;z-index:10001}.fb_reposition{overflow:hidden;position:relative}.fb_invisible{display:none}.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}.fb_reset>div{overflow:hidden}@keyframes fb_transform{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.fb_animate{animation:fb_transform .3s forwards}36.fb_hidden{position:absolute;top:-10000px;z-index:10001}.fb_reposition{overflow:hidden;position:relative}.fb_invisible{display:none}.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}.fb_reset>div{overflow:hidden}@keyframes fb_transform{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.fb_animate{animation:fb_transform .3s forwards}37.fb_dialog{background:rgba(82, 82, 82, .7);position:absolute;top:-10000px;z-index:10001}.fb_dialog_advanced{border-radius:8px;padding:10px}.fb_dialog_content{background:#fff;color:#373737}.fb_dialog_close_icon{background:url(https://connect.facebook.net/rsrc.php/v3/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;cursor:pointer;display:block;height:15px;position:absolute;right:18px;top:17px;width:15px}.fb_dialog_mobile .fb_dialog_close_icon{left:5px;right:auto;top:5px}.fb_dialog_padding{background-color:transparent;position:absolute;width:1px;z-index:-1}.fb_dialog_close_icon:hover{background:url(https://connect.facebook.net/rsrc.php/v3/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent}.fb_dialog_close_icon:active{background:url(https://connect.facebook.net/rsrc.php/v3/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent}.fb_dialog_iframe{line-height:0}.fb_dialog_content .dialog_title{background:#6d84b4;border:1px solid #365899;color:#fff;font-size:14px;font-weight:bold;margin:0}.fb_dialog_content .dialog_title>span{background:url(https://connect.facebook.net/rsrc.php/v3/yd/r/Cou7n-nqK52.gif) no-repeat 5px 50%;float:left;padding:5px 0 7px 26px}body.fb_hidden{height:100%;left:0;margin:0;overflow:visible;position:absolute;top:-10000px;transform:none;width:100%}.fb_dialog.fb_dialog_mobile.loading{background:url(https://connect.facebook.net/rsrc.php/v3/ya/r/3rhSv5V8j3o.gif) white no-repeat 50% 50%;min-height:100%;min-width:100%;overflow:hidden;position:absolute;top:0;z-index:10001}.fb_dialog.fb_dialog_mobile.loading.centered{background:none;height:auto;min-height:initial;min-width:initial;width:auto}.fb_dialog.fb_dialog_mobile.loading.centered #fb_dialog_loader_spinner{width:100%}.fb_dialog.fb_dialog_mobile.loading.centered .fb_dialog_content{background:none}.loading.centered #fb_dialog_loader_close{clear:both;color:#fff;display:block;font-size:18px;padding-top:20px}#fb-root #fb_dialog_ipad_overlay{background:rgba(0, 0, 0, .4);bottom:0;left:0;min-height:100%;position:absolute;right:0;top:0;width:100%;z-index:10000}#fb-root #fb_dialog_ipad_overlay.hidden{display:none}.fb_dialog.fb_dialog_mobile.loading iframe{visibility:hidden}.fb_dialog_mobile .fb_dialog_iframe{position:sticky;top:0}.fb_dialog_content .dialog_header{background:linear-gradient(from(#738aba), to(#2c4987));border-bottom:1px solid;border-color:#043b87;box-shadow:white 0 1px 1px -1px inset;color:#fff;font:bold 14px Helvetica, sans-serif;text-overflow:ellipsis;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0;vertical-align:middle;white-space:nowrap}.fb_dialog_content .dialog_header table{height:43px;width:100%}.fb_dialog_content .dialog_header td.header_left{font-size:12px;padding-left:5px;vertical-align:middle;width:60px}.fb_dialog_content .dialog_header td.header_right{font-size:12px;padding-right:5px;vertical-align:middle;width:60px}.fb_dialog_content .touchable_button{background:linear-gradient(from(#4267B2), to(#2a4887));background-clip:padding-box;border:1px solid #29487d;border-radius:3px;display:inline-block;line-height:18px;margin-top:3px;max-width:85px;padding:4px 12px;position:relative}.fb_dialog_content .dialog_header .touchable_button input{background:none;border:none;color:#fff;font:bold 12px Helvetica, sans-serif;margin:2px -12px;padding:2px 6px 3px 6px;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog_content .dialog_header .header_center{color:#fff;font-size:16px;font-weight:bold;line-height:18px;text-align:center;vertical-align:middle}.fb_dialog_content .dialog_content{background:url(https://connect.facebook.net/rsrc.php/v3/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;border:1px solid #4a4a4a;border-bottom:0;border-top:0;height:150px}.fb_dialog_content .dialog_footer{background:#f5f6f7;border:1px solid #4a4a4a;border-top-color:#ccc;height:40px}#fb_dialog_loader_close{float:left}.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon{visibility:hidden}#fb_dialog_loader_spinner{animation:rotateSpinner 1.2s linear infinite;background-color:transparent;background-image:url(https://connect.facebook.net/rsrc.php/v3/yD/r/t-wz8gw1xG1.png);background-position:50% 50%;background-repeat:no-repeat;height:24px;width:24px}@keyframes rotateSpinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}38.fb_iframe_widget{display:inline-block;position:relative}.fb_iframe_widget span{display:inline-block;position:relative;text-align:justify}.fb_iframe_widget iframe{position:absolute}.fb_iframe_widget_fluid_desktop,.fb_iframe_widget_fluid_desktop span,.fb_iframe_widget_fluid_desktop iframe{max-width:100%}.fb_iframe_widget_fluid_desktop iframe{min-width:220px;position:relative}.fb_iframe_widget_lift{z-index:1}.fb_iframe_widget_fluid{display:inline}.fb_iframe_widget_fluid span{width:100%}39.fb_mpn_mobile_landing_page_slide_out{animation-duration:200ms;animation-name:fb_mpn_landing_page_slide_out;transition-timing-function:ease-in}.fb_mpn_mobile_landing_page_slide_out_from_left{animation-duration:200ms;animation-name:fb_mpn_landing_page_slide_out_from_left;transition-timing-function:ease-in}.fb_mpn_mobile_landing_page_slide_up{animation-duration:500ms;animation-name:fb_mpn_landing_page_slide_up;transition-timing-function:ease-in}.fb_mpn_mobile_bounce_in{animation-duration:300ms;animation-name:fb_mpn_bounce_in;transition-timing-function:ease-in}.fb_mpn_mobile_bounce_out{animation-duration:300ms;animation-name:fb_mpn_bounce_out;transition-timing-function:ease-in}.fb_mpn_mobile_bounce_out_v2{animation-duration:300ms;animation-name:fb_mpn_fade_out;transition-timing-function:ease-in}.fb_customer_chat_bounce_in_v2{animation-duration:300ms;animation-name:fb_bounce_in_v2;transition-timing-function:ease-in}.fb_customer_chat_bounce_in_from_left{animation-duration:300ms;animation-name:fb_bounce_in_from_left;transition-timing-function:ease-in}.fb_customer_chat_bounce_out_v2{animation-duration:300ms;animation-name:fb_bounce_out_v2;transition-timing-function:ease-in}.fb_customer_chat_bounce_out_from_left{animation-duration:300ms;animation-name:fb_bounce_out_from_left;transition-timing-function:ease-in}.fb_invisible_flow{display:inherit;height:0;overflow-x:hidden;width:0}@keyframes fb_mpn_landing_page_slide_out{0%{margin:0 12px;width:100% - 24px}60%{border-radius:18px}100%{border-radius:50%;margin:0 24px;width:60px}}@keyframes fb_mpn_landing_page_slide_out_from_left{0%{left:12px;width:100% - 24px}60%{border-radius:18px}100%{border-radius:50%;left:12px;width:60px}}@keyframes fb_mpn_landing_page_slide_up{0%{bottom:0;opacity:0}100%{bottom:24px;opacity:1}}@keyframes fb_mpn_bounce_in{0%{opacity:.5;top:100%}100%{opacity:1;top:0}}@keyframes fb_mpn_fade_out{0%{bottom:30px;opacity:1}100%{bottom:0;opacity:0}}@keyframes fb_mpn_bounce_out{0%{opacity:1;top:0}100%{opacity:.5;top:100%}}@keyframes fb_bounce_in_v2{0%{opacity:0;transform:scale(0, 0);transform-origin:bottom right}50%{transform:scale(1.03, 1.03);transform-origin:bottom right}100%{opacity:1;transform:scale(1, 1);transform-origin:bottom right}}@keyframes fb_bounce_in_from_left{0%{opacity:0;transform:scale(0, 0);transform-origin:bottom left}50%{transform:scale(1.03, 1.03);transform-origin:bottom left}100%{opacity:1;transform:scale(1, 1);transform-origin:bottom left}}@keyframes fb_bounce_out_v2{0%{opacity:1;transform:scale(1, 1);transform-origin:bottom right}100%{opacity:0;transform:scale(0, 0);transform-origin:bottom right}}@keyframes fb_bounce_out_from_left{0%{opacity:1;transform:scale(1, 1);transform-origin:bottom left}100%{opacity:0;transform:scale(0, 0);transform-origin:bottom left}}@keyframes slideInFromBottom{0%{opacity:.1;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideInFromBottomDelay{0%{opacity:0;transform:translateY(100%)}97%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}40 </style>41 </head>42 <body class="a-party" data-id="11469488" data-shorturl="" style>43 <div class="card brand">44 <br>45 <div class="card_inner">46 <a>47 <img src="rick.jpg">48 </a>49 <p class="labs">50 <br>51 <a>52 Translated Labs53 </a>54 </p>55 </div>56 </div>57 <div class="flip_container" id="party-form">58 <div class="flip_frame">59 <div class="card front no-border" id="formBox">60 <div class="card_inner">61 <form action="javascript:void(0);" id="form">62 <!--63 <div class="live">LIVE</div>64 <div id="ticker"><div class="inner"></div></div> 65 -->66 <textarea class="phrase" id="phrase-textarea" placeholder="Start with an English phrase…" type="text">All work and no play makes Jack a dull boy All work and no play makes Jack a dull boy All work and no play makes Jack a dull boy</textarea>67 <input class="button margin_none" id="find-equilibrium-btn" name="submit" type="submit" value="Find equilibrium">68 <div id="crash-other-parties">69 or70 <a>71 crash someone else's party72 </a>73 </div>74 <div style="clear:both">75 </div>76 </form>77 </div>78 </div>79 </div>80 </div>81 <div id="results">82 <div class="card bar-loader" style="display: block; z-index: -1; transform: translate(0px, 0px);">83 <div class="card_inner">84 <p class="language">85 You said:86 </p>87 <p>88 All work and no play makes Jack a dull boy All work and no play makes Jack a dull boy All work and no play makes Jack a dull boy89 </p>90 </div>91 </div>92 </div>93 <div class="otherparties" id="otherparties-box" style="display: none;">94 <div id="hotparties">95 <div class="card no-border">96 <div class="card_inner">97 <h4>98 HOT PARTIES99 </h4>100 </div>101 </div>102 <div class="oparty card">103 <div class="card_inner">104 <div class="b">105 <div class="v">106 <span>107 71108 </span>109 <br>110 <small>111 votes112 </small>113 </div>114 <div class="t">115 <small>116 2d ago117 </small>118 </div>119 </div>120 <div class="p">121 <a>122 THERES A PARTY IN MY TUMMY:D (i ate a glowstick and now im glowing)123 </a>124 </div>125 <div style="clear:both">126 </div>127 </div>128 <div style="clear:both">129 </div>130 </div>131 <div class="oparty card">132 <div class="card_inner">133 <div class="b">134 <div class="v">135 <span>136 921137 </span>138 <br>139 <small>140 votes141 </small>142 </div>143 <div class="t">144 <small>145 16d ago146 </small>147 </div>148 </div>149 <div class="p">150 <a>151 Vote if you want to see the downfall of Israel152 </a>153 </div>154 <div style="clear:both">155 </div>156 </div>157 <div style="clear:both">158 </div>159 </div>160 <div class="oparty card">161 <div class="card_inner">162 <div class="b">163 <div class="v">164 <span>165 6158166 </span>167 <br>168 <small>169 votes170 </small>171 </div>172 <div class="t">173 <small>174 30May23175 </small>176 </div>177 </div>178 <div class="p">179 <a>180 Vote if you come from bored button :)181 </a>182 </div>183 <div style="clear:both">184 </div>185 </div>186 <div style="clear:both">187 </div>188 </div>189 <div class="oparty card">190 <div class="card_inner">191 <div class="b">192 <div class="v">193 <span>194 9650195 </span>196 <br>197 <small>198 votes199 </small>200 </div>201 <div class="t">202 <small>203 04Jun22204 </small>205 </div>206 </div>207 <div class="p">208 <a>209 Vote if you're not straight 🏳️‍🌈210 </a>211 </div>212 <div style="clear:both">213 </div>214 </div>215 <div style="clear:both">216 </div>217 </div>218 <div class="oparty card">219 <div class="card_inner">220 <div class="b">221 <div class="v">222 <span>223 3779224 </span>225 <br>226 <small>227 votes228 </small>229 </div>230 <div class="t">231 <small>232 09Apr23233 </small>234 </div>235 </div>236 <div class="p">237 <a>238 I'll give out an iPhone 14 pro max to anyone that votes!(I'm actually not lying)!239 </a>240 </div>241 <div style="clear:both">242 </div>243 </div>244 <div style="clear:both">245 </div>246 </div>247 <div class="oparty card">248 <div class="card_inner">249 <div class="b">250 <div class="v">251 <span>252 599253 </span>254 <br>255 <small>256 votes257 </small>258 </div>259 <div class="t">260 <small>261 41d ago262 </small>263 </div>264 </div>265 <div class="p">266 <a>267 Vote if u like anime😔✌🏼268 </a>269 </div>270 <div style="clear:both">271 </div>272 </div>273 <div style="clear:both">274 </div>275 </div>276 <div class="oparty card">277 <div class="card_inner">278 <div class="b">279 <div class="v">280 <span>281 682282 </span>283 <br>284 <small>285 votes286 </small>287 </div>288 <div class="t">289 <small>290 51d ago291 </small>292 </div>293 </div>294 <div class="p">295 <a>296 I NEED 1,000 VOTES TO GET A KITTEN!297 </a>298 </div>299 <div style="clear:both">300 </div>301 </div>302 <div style="clear:both">303 </div>304 </div>305 <div class="oparty card">306 <div class="card_inner">307 <div class="b">308 <div class="v">309 <span>310 2016311 </span>312 <br>313 <small>314 votes315 </small>316 </div>317 <div class="t">318 <small>319 19Apr23320 </small>321 </div>322 </div>323 <div class="p">324 <a>325 I NEED 1000 VOTES TO GET A GOLDEN RETRIEVER!!!326 </a>327 </div>328 <div style="clear:both">329 </div>330 </div>331 <div style="clear:both">332 </div>333 </div>334 <div class="oparty card">335 <div class="card_inner">336 <div class="b">337 <div class="v">338 <span>339 1622340 </span>341 <br>342 <small>343 votes344 </small>345 </div>346 <div class="t">347 <small>348 11May23349 </small>350 </div>351 </div>352 <div class="p">353 <a>354 upvote if you hate school :) (:355 </a>356 </div>357 <div style="clear:both">358 </div>359 </div>360 <div style="clear:both">361 </div>362 </div>363 <div class="oparty card">364 <div class="card_inner">365 <div class="b">366 <div class="v">367 <span>368 2609369 </span>370 <br>371 <small>372 votes373 </small>374 </div>375 <div class="t">376 <small>377 08Jan23378 </small>379 </div>380 </div>381 <div class="p">382 <a>383 Vote if the kitten quiz on boredbutton that finds where you live scares you384 </a>385 </div>386 <div style="clear:both">387 </div>388 </div>389 <div style="clear:both">390 </div>391 </div>392 <div class="card text-center">393 <button id="more-hot-parties">394 Show me more395 </button>396 </div>397 </div>398 <div id="randomparties">399 <div class="card no-border">400 <div class="card_inner">401 <h4>402 You may want to crash these parties too403 </h4>404 </div>405 </div>406 <div class="oparty card">407 <div class="card_inner">408 <div class="b">409 <div class="v">410 <span>411 1412 </span>413 <br>414 <small>415 votes416 </small>417 </div>418 <div class="t">419 <small>420 26Mar10421 </small>422 </div>423 </div>424 <div class="p">425 <a>426 Welcome to the human race427 </a>428 </div>429 <div style="clear:both">430 </div>431 </div>432 </div>433 <div class="oparty card">434 <div class="card_inner">435 <div class="b">436 <div class="v">437 <span>438 5439 </span>440 <br>441 <small>442 votes443 </small>444 </div>445 <div class="t">446 <small>447 26Mar10448 </small>449 </div>450 </div>451 <div class="p">452 <a>453 i'm never gonna give you up, never gonna let you down, never gonna turn around and hurt you454 </a>455 </div>456 <div style="clear:both">457 </div>458 </div>459 </div>460 <div class="oparty card">461 <div class="card_inner">462 <div class="b">463 <div class="v">464 <span>465 1466 </span>467 <br>468 <small>469 votes470 </small>471 </div>472 <div class="t">473 <small>474 27Mar10475 </small>476 </div>477 </div>478 <div class="p">479 <a>480 what's going on with you today?481 </a>482 </div>483 <div style="clear:both">484 </div>485 </div>486 </div>487 <div class="oparty card">488 <div class="card_inner">489 <div class="b">490 <div class="v">491 <span>492 2493 </span>494 <br>495 <small>496 votes497 </small>498 </div>499 <div class="t">500 <small>501 26Mar10502 </small>503 </div>504 </div>505 <div class="p">506 <a>507 The minor fall and the major lift508 </a>509 </div>510 <div style="clear:both">511 </div>512 </div>513 </div>514 <div class="oparty card">515 <div class="card_inner">516 <div class="b">517 <div class="v">518 <span>519 1520 </span>521 <br>522 <small>523 votes524 </small>525 </div>526 <div class="t">527 <small>528 26Mar10529 </small>530 </div>531 </div>532 <div class="p">533 <a>534 You cannot burn me, I'm already on fire!535 </a>536 </div>537 <div style="clear:both">538 </div>539 </div>540 </div>541 <div class="oparty card">542 <div class="card_inner">543 <div class="b">544 <div class="v">545 <span>546 1547 </span>548 <br>549 <small>550 votes551 </small>552 </div>553 <div class="t">554 <small>555 26Mar10556 </small>557 </div>558 </div>559 <div class="p">560 <a>561 and the rain will kill us all562 </a>563 </div>564 <div style="clear:both">565 </div>566 </div>567 </div>568 <div class="oparty card">569 <div class="card_inner">570 <div class="b">571 <div class="v">572 <span>573 1574 </span>575 <br>576 <small>577 votes578 </small>579 </div>580 <div class="t">581 <small>582 26Mar10583 </small>584 </div>585 </div>586 <div class="p">587 <a>588 I think you'll understand589 </a>590 </div>591 <div style="clear:both">592 </div>593 </div>594 </div>595 <div class="oparty card">596 <div class="card_inner">597 <div class="b">598 <div class="v">599 <span>600 1601 </span>602 <br>603 <small>604 votes605 </small>606 </div>607 <div class="t">608 <small>609 26Mar10610 </small>611 </div>612 </div>613 <div class="p">614 <a>615 I want a cat for my birthday616 </a>617 </div>618 <div style="clear:both">619 </div>620 </div>621 </div>622 <div class="oparty card">623 <div class="card_inner">624 <div class="b">625 <div class="v">626 <span>627 2628 </span>629 <br>630 <small>631 votes632 </small>633 </div>634 <div class="t">635 <small>636 26Mar10637 </small>638 </div>639 </div>640 <div class="p">641 <a>642 how much wood could a woodchuck chuck if a woodchuck could chuck643 </a>644 </div>645 <div style="clear:both">646 </div>647 </div>648 </div>649 <div class="oparty card">650 <div class="card_inner">651 <div class="b">652 <div class="v">653 <span>654 2655 </span>656 <br>657 <small>658 votes659 </small>660 </div>661 <div class="t">662 <small>663 26Mar10664 </small>665 </div>666 </div>667 <div class="p">668 <a>669 The problems of the future, today670 </a>671 </div>672 <div style="clear:both">673 </div>674 </div>675 </div>676 <div class="card text-center">677 <button id="more-random-parties">678 More, I need more!679 </button>680 </div>681 </div>682 </div>683 <!-- footer bar -->684 <div class="card top-shadow" id="bottom-bar" style>685 <div class="card_inner">686 <div id="layer1">687 <div class="col13">688 <div id="votesnum">689 <div class="n">690 1691 </div>692 <small>693 votes694 </small>695 </div>696 <a class="icon-thumbs-up button" id="upvote">697 </a>698 <a class="icon-thumbs-down button" id="downvote">699 </a>700 </div>701 <div class="col23" style="text-align:center">702 <input class="button margin_none" id="create-party-btn" onclick="location.href='https://www.translationparty.com';" type="button" value="Create a party!">703 </div>704 <div class="social col33">705 <a class="icon-facebook button" id="facebook" title="Share on facebook">706 </a>707 <a class="icon-twitter button" id="twitter" title="Share on twitter">708 </a>709 <a class="icon-reddit button" id="reddit" title="Share on reddit">710 </a>711 </div>712 <div class="social-mobile col33">713 <a class="button" id="share">714 share715 </a>716 </div>717 </div>718 <div id="layer2">719 </div>720 </div>721 </div>722 <div class="fb_reset" id="fb-root">723 <div style="position: absolute; top: -10000px; width: 0px; height: 0px;">724 <div>725 </div>726 </div>727 </div>728 </body>729</html>730