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 class="dj_webkit dj_chrome dj_contentbox" dir="ltr">3 <!--<![endif]-->4 <head>5 <style>6 </style>7 <meta content="Az520Inasey3TAyqLyojQa8MnmCALSEU29yQFW8dePZ7xQTvSt73pHazLFTK5f7SyLUJSo2uKLesEtEa9aUYcgMAAACPeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZS5jb206NDQzIiwiZmVhdHVyZSI6IkRpc2FibGVUaGlyZFBhcnR5U3RvcmFnZVBhcnRpdGlvbmluZyIsImV4cGlyeSI6MTcyNTQwNzk5OSwiaXNTdWJkb21haW4iOnRydWUsImlzVGhpcmRQYXJ0eSI6dHJ1ZX0=" http-equiv="origin-trial">8 <title>9 Ariana Resources PLC10 </title>11 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">12 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">13 <meta content="Ariana Resources PLC Email Forms" name="description">14 <meta content="Ariana Resources PLC" name="keywords">15 <style type="text/css">16 /* Forms */17 18label {19 display:block;20 width:auto;21 margin-top:8px;22 font-weight:bold;23}24 25.mergeRow {26 padding:0 0 6px 0 !important;27 clear:both;28}29 30.field-group {31 position:relative;32 margin:3px 0 12px 0;33 overflow:hidden;34 background:transparent !important;35}36.mergeRow-radio .field-group, .mergeRow-interests-checkboxes .field-group {margin-bottom:6px;}37 38input, textarea, select {39 display:block;40 margin:0;41 padding:10px;42 background:#fff;43 width:100%;44 border:2px solid #d0d0d0 !important;45 border-radius:3px;46 -webkit-appearance: none;47}48 49.field-group input, select, textarea, .dijitInputField {50 font-size: 14px;51}52 53.field-group.error > input,54.field-group.error > select,55.field-group.error .addressfield input.empty,56.field-group.error .birthdayfield,57.field-group.error .subfields,58.field-group.error .datefield .dijitInputInner,59.datefield .dijitTextBoxError .dijitInputInner,60.field-group.error textarea {61 border-color:#e85c41 !important;62}63 64textarea {65 font:14px/18px 'Helvetica', Arial, sans-serif;66 width:100%;67 height:150px;68 overflow:auto;69}70 71select {72 background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px;73 background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1));74 background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px, -webkit-linear-gradient(top, #fff, #f1f1f1);75 background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px, -ms-linear-gradient(top, #fff, #f1f1f1);76 background:#fff url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat right -295px, linear-gradient(to bottom, #fff, #f1f1f1);77}78html[dir="rtl"] select {background-position:14px -295px;}79 80/* Firefox always displays native select arrow button, so hide the background image arrow. */81@-moz-document url-prefix() {82select {83 padding: 8px;84 background-position: -99px 0 !important;85 -moz-appearance: none;86}87}88 89input:focus, textarea:focus, select:focus, .focused-field .subfields {90border-color:#5d5d5d !important;91outline:none;92}93 94/* Prevent Chrome's autofill yellow box shadow */95input:-webkit-autofill {96 -webkit-box-shadow: 0 0 0 1000px white inset !important;97}98 99 100.field-help {101 display:block;102 font-weight:normal;103 position:static;104 float:none;105 clear:both;106 margin:0;107 padding:0;108 max-height:0;109 overflow:hidden;110 -webkit-transition: all .25s;111 -moz-transition: all .25s;112 -ms-transition: all .25s;113 transition: all .25s;114}115.focused-field .field-help, input:focus + .field-help {116 display:block;117 padding:10px 0;118 max-height:100px;119}120 121.field-help .help {122 min-height:16px;123 text-decoration: none;124}125 126 127/* Error container */128.feedback {129 padding:10px 0;130 line-height:16px;131 font-size:14px;132}133 134.feedback br {display:none;}135 136.feedback div {137 font:14px/20px 'Helvetica', Arial, sans-serif !important;138 padding:0 !important;139 margin:0 !important;140}141 142.indicates-required {text-align:right;}143.indicates-required span {144 font-size:150%;145 font-weight:bold;146 display:inline !important;147}148 149.formstatus {150 margin-bottom:12px;151 font-size:18px;152}153 154.alert {155 background:#e4f3d4;156 border:2px solid #5ca000;157 font-size:14px;158 color:#4e7e0e !important;159 margin:10px 0;160 padding:10px;161}162 163 164/* Groups, checkboxes, radio buttons */165ul.interestgroup_field,166ul.interestgroup_field li,167ul.unsub-options,168ul.unsub-options li,169.interestgroup_row {170 display:block;171 padding:0;172 margin:0;173 list-style:none;174}175label.checkbox, label.radio {176 font-weight:normal;177 position:relative;178 line-height:24px;179}180.checkbox input, .radio input {181 width:auto !important;182 display:inline-block;183 margin-right:5px;184 padding:0;185 border:none;186 background-color:transparent;187}188 189/* Address blocks */190.addressfield span {display:block; margin:3px 0 15px 0;}191.addressfield label {display:none;}192.cityfield {width:35%; float:left; padding-right:12px;}193.statefield {width:30%; float:left; padding-right:12px;}194.zipfield {width:35%; float:left;}195.countryfield {clear:both;}196 197/* Date picker */198.dijitCalendarPopup {position:absolute;}199.dijitComboBox.dijitDateTextBox .dijitArrowButtonContainer {200 cursor:pointer;201 position:absolute;202 top:3px;203 right:2px;204 background:url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat 10px -235px;205 height:34px;206 width:42px;207 opacity:.5;208 padding:0 5px;209}210.dijitComboBox.dijitDateTextBox .dijitArrowButtonContainer input {visibility:hidden;}211.dijitComboBox.dijitDateTextBox .dijitArrowButtonContainer:hover {opacity:1;}212.dijitValidationContainer {display:none;}213 214/* Input placeholder color */215.dijitPlaceHolder {position:absolute; top:10px; left:10px; color:#ababab !important; font-weight:normal;}216::-webkit-input-placeholder {color:#ababab;}217:-moz-placeholder {color:#ababab; opacity:1;}218::-moz-placeholder {color:#ababab; opacity:1;}219:-ms-input-placeholder {color:#ababab;}220 221html[dir="rtl"] .dijitComboBox.dijitDateTextBox .dijitArrowButtonContainer {left:6px; right:auto;}222html[dir="rtl"] .dijitPlaceHolder {left:auto; right:10px;}223 224 225/* Birthday & US phone field */226.subfields {227 display:block;228 margin:0;229 padding:8px 10px;230 background:#fff;231 width:100%;232 border:2px solid #d0d0d0;233 border-radius:3px;234 color:#d0d0d0235}236.subfields input {237 display:inline-block;238 margin:0;239 padding:0;240 width:2.5em;241 border:none !important;242 text-align:center;243}244.subfields label {display:none;}245.phonedetail2 input {width:3.4em;}246.birthdayfield input {width:1.7em;}247 248/* Forward to friend */249.captcha {250 float:left;251 width:320px;252 margin-right:20px;253 min-height:150px;254}255.captcha input {display:inline;}256 257/* Archive list */258#archive-list {259 display:block;260 margin:15px 0;261 padding:0;262 border-top:1px solid #eee;263}264#archive-list li {265 display:block;266 list-style:none;267 margin:0;268 padding:6px 10px;269 border-bottom:1px solid #eee;270}271 272.borderbox, .field-help, input, textarea, select {273 -moz-box-sizing: border-box;274 -webkit-box-sizing: border-box;275 box-sizing: border-box;276}277 278.field-shift {279 left: -9999px; position: absolute;280}281 282html[dir="rtl"] .field-shift {283 right: -9999px;284 left: auto;285}286 287 288/* Image replacement for checkbox and radio buttons. */289/* Placing in @media block forces browsers that don't support :checked to fall back to native inputs. */290@media only screen {291 .mergeRow-radio .field-group, .mergeRow-interests-checkboxes .field-group {margin:0 -6px 11px -6px;}292 293 .checkbox, .radio {294 margin:9px 0 0 0;295 padding:0;296 }297 298 /* Position and hide the real checkboxes and radio buttons */299 .checkbox input, .radio input {300 position:absolute;301 width:24px;302 height:24px;303 overflow:hidden;304 margin:0;305 padding:0;306 outline:0;307 opacity:0;308 }309 310 .checkbox input + span, .radio input + span {311 display:block;312 border-radius:3px;313 padding:6px 6px 6px 38px;314 }315 316 .checkbox:hover span,317 .checkbox input:focus + span,318 .radio:hover span,319 .radio input:focus + span {320 background:rgba(0,0,0,.05);321 }322 323 /* Insert a pseudo element inside each label with a background sprite. */324 .checkbox input + span:before, .radio input + span:before {325 display:block;326 position:absolute;327 top:6px;328 left:6px;329 width:24px;330 height:24px;331 background:url('https://cdn-images.mailchimp.com/product/icons/signup-sprite.png') no-repeat;332 content:" ";333 vertical-align:top;334 }335 336 /* Position the background sprite based on state of checkbox/radio. */337 .radio input:focus + span:before { background-position:0 -30px; }338 .radio input:checked + span:before { background-position:0 -60px; }339 .radio input:checked:focus + span:before { background-position:-0 -90px; }340 .checkbox input + span:before { background-position:0 -120px; }341 .checkbox input:focus + span:before { background-position:0 -150px; }342 .checkbox input:checked + span:before { background-position:0 -180px; }343 .checkbox input:checked:focus + span:before { background-position:0 -210px; }344 345 /* Right-to-left checkbox/radio modifications */346 html[dir="rtl"] .checkbox input + span:before, html[dir="rtl"] .radio input + span:before {left:auto; right:0;}347 html[dir="rtl"] .checkbox input + span, html[dir="rtl"] .radio input + span {padding:6px 38px 6px 6px;}348}349 350/* Use high-res sprite for retina displays */351@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {352 .checkbox input + span:before, .radio input + span:before, .calendar-icon {353 background-image:url('https://cdn-images.mailchimp.com/product/icons/signup-sprite-2x.png');354 background-size: 24px;355 }356}357 358/* IE6 and 7 overrides */359.ie-lte7 .field-group input, .ie-lte7 .subfields {width:535px;}360.ie-lte7 .cityfield input {width:170px;}361.ie-lte7 .statefield input {width:121px;}362.ie-lte7 .zipfield input {width:170px;}363.ie-lte7 .subfields input {width:40px;}364.ie-lte7 .hidden-from-view {display:none;}365.ie-lte7 select {366 display:inline-block;367 width:560px;368}369 370/* IE doesn't support input placeholders until v10, show labels on addresses */371.ie-lte7 .addressfield label, .ie-lte9 .addressfield label {display:block; font-weight:normal; font-size:14px;}372 373/* Dijit styles for date picker */374.dijitPopup .dijitReset{margin:0;border:0;padding:0;font:inherit;line-height:normal;color:inherit;font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans-serif}375.dijitPopup .dj_a11y .dijitReset{-moz-appearance:none;}376.dijitPopup .dijitInline{display:inline-block;border:0;padding:0;vertical-align:middle}377.dijitPopup .dijitInline{display:inline-table;box-sizing:content-box;-moz-box-sizing:content-box}378.dijitPopup .dijitHidden{display:none !important}379.dijitPopup .dijitVisible{display:block !important;position:relative;}380.dijitPopup .dijitInputContainer{overflow:hidden;float:none !important;position:relative}381.dijitPopup .dj_ie .dijitSelect input,382.dijitPopup .dj_ie input.dijitTextBox,383.dijitPopup .dj_ie .dijitTextBox input{font-size:100%}384.dijitPopup .dijitSelect .dijitButtonText{float:left;vertical-align:top}385.dijitPopup .dijitSelect{padding:0 !important;}386.dijitPopup .dijitTextBox .dijitSpinnerButtonContainer,387.dijitPopup .dijitTextBox .dijitArrowButtonContainer,388.dijitPopup .dijitValidationTextBox .dijitValidationContainer{float:right;text-align:center}389.dijitPopup .dijitSelect input.dijitInputField,390.dijitPopup .dijitTextBox input.dijitInputField{padding-left:0 !important;padding-right:0 !important}391.dijitPopup .dijitValidationTextBox .dijitValidationContainer{display:none}392.dijitPopup .dijitTeeny{font-size:1px;line-height:1px}393.dijitPopup .dijitOffScreen{position:absolute !important;left:50% !important;top:-10000px !important}394.dijitPopup .dijitPositionOnly{padding:0 !important;border:0 !important;background-color:transparent !important;background-image:none !important;height:auto !important;width:auto !important}395.dijitPopup .dijitNonPositionOnly{float:none !important;position:static !important;margin:0 0 0 0 !important;vertical-align:middle !important}396.dijitPopup .dijitBackgroundIframe{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;border:0;padding:0;margin:0}397.dijitPopup .dijitDisplayNone{display:none !important}398.dijitPopup .dijitContainer{overflow:hidden;}399 400.dijitPopup{position:absolute;background-color:transparent;margin:0;border:0;padding:0}401.dijitPopup{-webkit-box-shadow:0 6px 6px 1px rgba(0, 0, 0, 0.1);box-shadow:0 6px 6px 1px rgba(0, 0, 0, 0.1);border-radius:6px}402@media screen and (max-width:40em){403 .dijitPopup{width:96% !important;left:50% !important;margin:0 auto 0 -48%}404}405.dijitPopup .dijitMenuTable{width:100% !important}406 407.dijitMenu{border:1px solid #000;background-color:#fff}408.dijitMenuTable{border-collapse:collapse;border-width:0;background-color:#fff}409.dj_webkit .dijitMenuTable td[colspan="2"]{border-right:hidden}410.dijitMenuItem{text-align:left;white-space:nowrap;padding:.1em .2em;cursor:pointer}411.dijitMenuItem:focus{outline:none}412.dijitMenuItemIcon,413.dijitMenuExpand{background-repeat:no-repeat}414.dijitMenuItemDisabled *{opacity:.5;cursor:default}415.dj_ie .dj_a11y .dijitMenuItemDisabled,416.dj_ie .dj_a11y .dijitMenuItemDisabled *,417.dj_ie .dijitMenuItemDisabled *{color:#808080;filter:alpha(opacity=35)}418.dijitMenuItemLabel{position:relative;vertical-align:middle}419.dj_a11y .dijitMenuItemSelected{border:1px dotted #000 !important;}420.dj_ff3 .dj_a11y .dijitMenuItem td{padding:0 !important;background:none !important}421.dj_a11y .dijitMenuItemSelected .dijitMenuItemLabel{border-width:1px;border-style:solid}422.dj_ie8 .dj_a11y .dijitMenuItemLabel{position:static}423.dijitMenuExpandA11y{display:none}424.dj_a11y .dijitMenuExpandA11y{display:inline}425.dijitMenuSeparator td{border:0;padding:0}426.dijitMenuSeparatorTop{height:50%;margin:0;margin-top:3px;font-size:1px}427.dijitMenuSeparatorBottom{height:50%;margin:0;margin-bottom:3px;font-size:1px}428.dijitCheckedMenuItemIconChar{vertical-align:middle;visibility:hidden}429.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar{visibility:visible}430.dj_a11y .dijitCheckedMenuItemIconChar{display:inline !important}431.dj_a11y .dijitCheckedMenuItemIcon{display:none}432.dj_ie .dj_a11y .dijitMenuBar .dijitMenuItem{margin:0}433 434 435 436.dijitCalendarContainer{width:auto;}437.dijitCalendarContainer th,438.dijitCalendarContainer td{padding:0;vertical-align:middle}439.dijitCalendarYearLabel{white-space:nowrap;}440.dijitCalendarNextYear{margin:0 0 0 .55em}441.dijitCalendarPreviousYear{margin:0 .55em 0 0}442.dijitCalendarIncrementControl{vertical-align:middle}443.dijitCalendarIncrementControl,444.dijitCalendarDateTemplate,445.dijitCalendarMonthLabel,446.dijitCalendarPreviousYear,447.dijitCalendarNextYear{cursor:pointer}448.dijitCalendarDisabledDate{color:#808080;text-decoration:line-through;cursor:default}449.dijitSpacer{position:relative;height:1px;overflow:hidden;visibility:hidden}450.dijitCalendarMonthMenu .dijitCalendarMonthLabel{text-align:center}451 452.dijitCalendar{border:solid 1px #cfcfcf;background-color:#fff;text-align:center;padding:18px;border-radius:6px;border-collapse:separate}453.dijitCalendar img{border:none}454.dijitCalendarMonthContainer th{text-align:center;vertical-align:middle}455.dijitCalendarMonthLabel{color:#595959;font-size:.9375em;font-weight:bold;padding:6px 12px}456.dijitA11ySideArrow{display:none}457 458.dijitCalendarArrow{cursor:pointer;border:1px solid transparent;position:relative;}459.dijitCalendarArrow img {display:none;}460.dijitCalendarArrow:hover{background-color:#f2f2f2;border-color:#d0d0d0}461.dijitCalendarArrow:after{content:" "; width:0; height:0; border:6px solid transparent; border-left:6px solid #333; display:block; position:absolute; top:25%; left:45%}462.dijitCalendarArrow:first-child:before{content:" "; width:0; height:0; border:6px solid transparent; border-right:6px solid #333; display:block; position:absolute; top:25%; left:45%}463.dijitCalendarArrow:first-child:after{border:none;}464 465.dijitCalendarCurrentDate {background:#eee;}466.dijitCalendarDayLabelTemplate{text-align:center;font-weight:bold;padding:8px 12px}467.dijitCalendarDayLabel{font-weight:bold;font-size:.9375em;text-align:center;color:#595959}468.dijitCalendarDateTemplate{border-bottom:0 none;font-size:.9375em;font-weight:500;letter-spacing:.05em;text-align:center;color:#595959}469.dijitCalendarPreviousMonth,470.dijitCalendarNextMonth{border-bottom:0 none}471.dijitCalendarDateTemplate .dijitCalendarDateLabel{text-decoration:none;display:block;padding:6px 10px;border:1px solid transparent;-webkit-transition-property:background-color,border;-ms-transition-property:background-color,border;transition-property:background-color,border;-webkit-transition-duration:.35s;-ms-transition-duration:.35s;transition-duration:.35s}472.dijitCalendarPreviousMonth .dijitCalendarDateLabel,473.dijitCalendarNextMonth .dijitCalendarDateLabel{color:#ababab;border-color:#fff;}474.dijitCalendarYearContainer{vertical-align:middle}475.dijitCalendarYearControl{padding:1px 2px 2px 2px}476.dijitCalendarYearLabel{padding:8px 0 0;margin:0;font-size:.9375em}477.dijitCalendarYearLabel span{vertical-align:middle}478.dijitCalendarSelectedYear{padding:0 6px;font-size:.9375em;color:#52bad5}479.dijitCalendarNextYear,480.dijitCalendarPreviousYear{font-size:.9375em;border:1px solid transparent;padding:6px 12px}481.dijitCalendarHoveredDate .dijitCalendarDateLabel,482.dijitCalendarEnabledDate:hover .dijitCalendarDateLabel{background-color:#b1e0ec;border:solid 1px #52bad5;color:#595959;-webkit-transition-duration:.2s;-ms-transition-duration:.2s;transition-duration:.2s}483.dijitCalendarNextYearHover,484.dijitCalendarNextYear:hover,485.dijitCalendarPreviousYearHover,486.dijitCalendarPreviousYear:hover{color:#595959;background-color:#f2f2f2;border-color:#d0d0d0}487.dijitCalendarNextYearActive,488.dijitCalendarNextYear:active .dijitCalendarPreviousYearActive,489.dijitCalendarPreviousYear:active{background-color:#c7c7c7}490.dijitCalendarActiveDate .dijitCalendarDateLabel,491.dijitCalendarEnabledDate:active .dijitCalendarDateLabel{border:solid 1px #fff;-webkit-transition-duration:.1s;-ms-transition-duration:.1s;transition-duration:.1s}492.dijitCalendarSelectedDate .dijitCalendarDateLabel{color:#595959;background-color:#b1e0ec;border:solid 1px #52bad5}493.dijitCalendarDisabledDate .dijitCalendarDateLabel{color:#808080;text-decoration:line-through}494.dijitCalendar .dijitDropDownButton{margin:0;background-color:transparent}495.dijitCalendar .dijitDropDownButtonHover .dijitButtonNode,496.dijitCalendar .dijitDropDownButton:hover .dijitButtonNode{background-color:transparent;border:0 none}497.dijitCalendarMonthMenu{border-color:#ababab;background-color:#fff;text-align:center;background-image:none}498.dijitCalendarMonthMenu .dijitCalendarMonthLabel{border-top:solid 1px transparent;border-bottom:solid 1px transparent}499.dijitCalendarMonthMenu .dijitCalendarMonthLabelHover,500.dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover{background-color:#b1e0ec;border-color:#52bad5;border-width:1px 0}501 502.dijitTooltip{display:none !important;}503 </style>504 <style type="text/css">505 body{506 font:14px/20px 'Helvetica', Arial, sans-serif;507 margin:0;508 padding:75px 0 0 0;509 text-align:center;510 -webkit-text-size-adjust:none;511 }512 p{513 padding:0 0 10px 0;514 }515 h1 img{516 max-width:100%;517 height:auto !important;518 vertical-align:bottom;519 }520 h2{521 font-size:22px;522 line-height:28px;523 margin:0 0 12px 0;524 }525 h3{526 margin:0 0 12px 0;527 }528 .headerBar{529 background:none;530 padding:0;531 border:none;532 }533 .wrapper{534 width:600px;535 margin:0 auto 10px auto;536 text-align:left;537 }538 input.formEmailButton{539 border:none !important;540 }541 .formEmailButton{542 display:inline-block;543 font-weight:500;544 font-size:16px;545 line-height:42px;546 font-family:'Helvetica', Arial, sans-serif;547 width:auto;548 white-space:nowrap;549 height:42px;550 margin:12px 5px 12px 0;551 padding:0 22px;552 text-decoration:none;553 text-align:center;554 cursor:pointer;555 border:0;556 border-radius:3px;557 vertical-align:top;558 }559 .formEmailButton span{560 display:inline;561 font-family:'Helvetica', Arial, sans-serif;562 text-decoration:none;563 font-weight:500;564 font-style:normal;565 font-size:16px;566 line-height:42px;567 cursor:pointer;568 border:none;569 }570 .rounded6{571 border-radius:6px;572 }573 .poweredWrapper{574 padding:20px 0;575 width:560px;576 margin:0 auto;577 }578 .poweredBy{579 display:block;580 }581 span.or{582 display:inline-block;583 height:32px;584 line-height:32px;585 padding:0 5px;586 margin:5px 5px 0 0;587 }588 .clear{589 clear:both;590 }591 .profile-list{592 display:block;593 margin:15px 20px;594 padding:0;595 list-style:none;596 border-top:1px solid #eee;597 }598 .profile-list li{599 display:block;600 margin:0;601 padding:5px 0;602 border-bottom:1px solid #eee;603 }604 html[dir=rtl] .wrapper,html[dir=rtl] .container,html[dir=rtl] label{605 text-align:right !important;606 }607 html[dir=rtl] ul.interestgroup_field label{608 padding:0;609 }610 html[dir=rtl] ul.interestgroup_field input{611 margin-left:5px;612 }613 html[dir=rtl] .hidden-from-view{614 right:-5000px;615 left:auto;616 }617 body,#bodyTable{618 background-color:#eeeeee;619 }620 h1{621 font-size:28px;622 line-height:110%;623 margin-bottom:30px;624 margin-top:0;625 padding:0;626 }627 #templateContainer{628 background-color:none;629 }630 #templateBody{631 background-color:#ffffff;632 }633 .bodyContent{634 line-height:150%;635 font-family:Helvetica;636 font-size:14px;637 color:#333333;638 padding:20px;639 }640 a:link,a:active,a:visited,a{641 color:#336699;642 }643 .formEmailButton:link,.formEmailButton:active,.formEmailButton:visited,.formEmailButton,.formEmailButton span{644 background-color:#5d5d5d !important;645 color:#ffffff !important;646 }647 .formEmailButton:hover{648 background-color:#444444 !important;649 color:#ffffff !important;650 }651 label{652 line-height:150%;653 font-family:Helvetica;654 font-size:16px;655 color:#5d5d5d;656 }657 .field-group input,select,textarea,.dijitInputField{658 font-family:Helvetica;659 color:#5d5d5d !important;660 }661 .asterisk{662 color:#cc6600;663 font-size:20px;664 }665 label .asterisk{666 visibility:hidden;667 }668 .indicates-required{669 display:none;670 }671 .field-help{672 color:#777;673 }674 .error,.errorText{675 color:#e85c41;676 font-weight:bold;677 }678 @media (max-width: 620px){679 body{680 width:100%;681 -webkit-font-smoothing:antialiased;682 padding:10px 0 0 0 !important;683 min-width:300px !important;684 }685 686} @media (max-width: 620px){687 .wrapper,.poweredWrapper{688 width:auto !important;689 max-width:600px !important;690 padding:0 10px;691 }692 693} @media (max-width: 620px){694 #templateContainer,#templateBody,#templateContainer table{695 width:100% !important;696 -moz-box-sizing:border-box;697 -webkit-box-sizing:border-box;698 box-sizing:border-box;699 }700 701} @media (max-width: 620px){702 .addressfield span{703 width:auto;704 float:none;705 padding-right:0;706 }707 708} @media (max-width: 620px){709 .captcha{710 width:auto;711 float:none;712 }713 714} .gdpr-mergeRow{715 margin:10px 0;716 color:#4a4a4a;717 font-family:Helvetica;718 }719 .gdpr-content{720 margin:0 -20px 0 -20px;721 padding:20px;722 background:rgba(255, 255, 255, 0.8);723 }724 #gdpr-label{725 margin-top:0;726 }727 #gdpr-description{728 margin-top:6px;729 margin-bottom:0;730 padding-bottom:11px;731 }732 .gdpr-content p{733 color:#4a4a4a;734 font-size:13px;735 line-height:1.5;736 }737 .gdpr-content .checkbox-group label{738 font-weight:normal;739 font-size:13px;740 }741 #gdpr-legal{742 padding-top:20px;743 margin:0;744 }745 .gdpr-footer{746 margin:0 -20px 0 -20px;747 padding:20px;748 background:rgba(255, 255, 255, 0.9);749 overflow:auto;750 color:#6d6d6d;751 }752 .gdpr-footer p{753 font-size:10px;754 line-height:1.5;755 margin-bottom:0;756 }757 .gdpr-footer a{758 color:#206578;759 }760 .gdpr-footer img{761 width:65px;762 float:left;763 margin-right:15px;764 }765 </style>766 </head>767 <body>768 <div class="wrapper rounded6" id="templateContainer">769 <h1 class="masthead">770 <div style="text-align: center;">771 <img data-file-id="656213" height="95" src="rick.jpg" style="border: 0px ; width: 260px; height: 95px; margin: 0px;" width="260">772 <br>773 <br>774 <span style="font-size:16px">775 Ariana Resources PLC Investor News Signup776 </span>777 </div>778 </h1>779 <div class="bodyContent rounded6" id="templateBody">780 <div id="subscribeFormWelcome">781 <p>782 <span style="color: #696969">783 <span style="font-size: 11px">784 <span style="font-family: arial, helvetica, sans-serif">785 Please enter your details below to subscribe to the Ariana Resources mailing list786 </span>787 </span>788 </span>789 </p>790 </div>791 <div class="indicates-required">792 <span class="asterisk">793 *794 </span>795 indicates required796 </div>797 <form action="" method="POST">798 <input name="u" type="hidden" value="96f9fce922b909b91db30bf62">799 <input name="id" type="hidden" value="f5ce1bd39a">800 <!-- people should not fill these in and expect good things -->801 <div aria-hidden="true" aria-label="Please leave the following three fields empty" class="field-shift">802 <label for="b_name">803 Name:804 </label>805 <input id="b_name" name="b_name" placeholder="Freddie" tabindex="-1" type="text" value>806 <label for="b_email">807 Email:808 </label>809 <input id="b_email" name="b_email" placeholder="[EMAIL REDACTED]" tabindex="-1" type="email" value>810 <label for="b_comment">811 Comment:812 </label>813 <textarea id="b_comment" name="b_comment" placeholder="Please comment" tabindex="-1"></textarea>814 </div>815 <div class="mergeTable" id="mergeTable">816 <div class="mergeRow dojoDndItem mergeRow-email" id="mergeRow-0">817 <label for="MERGE0">818 Email Address819 <span class="req asterisk">820 *821 </span>822 </label>823 <div class="field-group">824 <input autocapitalize="off" autocorrect="off" id="MERGE0" name="MERGE0" size="25" type="email" value>825 </div>826 </div>827 <div class="mergeRow dojoDndItem mergeRow-radio" id="mergeRow-3">828 <label for="MERGE3">829 Your interest in Ariana Resources830 </label>831 <div class="field-group">832 <ul class="interestgroup_field radio-group" id="MERGE3">833 <li>834 <label class="radio" for="MERGE3-0">835 <input class="av-radio" id="MERGE3-0" name="MERGE3" type="radio" value="Investor">836 <span>837 Investor838 </span>839 </label>840 </li>841 <li>842 <label class="radio" for="MERGE3-1">843 <input class="av-radio" id="MERGE3-1" name="MERGE3" type="radio" value="Analyst">844 <span>845 Analyst846 </span>847 </label>848 </li>849 <li>850 <label class="radio" for="MERGE3-2">851 <input class="av-radio" id="MERGE3-2" name="MERGE3" type="radio" value="Journalist">852 <span>853 Journalist854 </span>855 </label>856 </li>857 </ul>858 </div>859 </div>860 <div class="mergeRow gdpr-mergeRow" id="mergeRow-gdpr">861 <div class="gdpr-content">862 <label id="gdpr-label">863 Permission for us to email you864 </label>865 <p id="gdpr-description">866 Ariana Resources PLC will use the information you provide on this form to email you our news releases and any other investor relevant information, such as events we are presenting at. 867 868To ensure we keep sending you these investor emails please check the box below and confirm your subscription below.869 </p>870 <div>871 <ul class="interestgroup_field checkbox-group">872 <li class="!margin-bottom--lv2">873 <label class="checkbox" for="gdpr_1041">874 <input class="av-checkbox" id="gdpr_1041" name="gdpr[1041]" type="checkbox" value="Y" }>875 <span>876 Please continue to email me!877 </span>878 </label>879 </li>880 </ul>881 </div>882 <p id="gdpr-legal">883 You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us, or by contacting us at [EMAIL REDACTED]. We will treat your information with respect.884 </p>885 </div>886 <div class="gdpr-footer">887 <a target="_blank">888 <img alt="GDPR" src="rick.jpg">889 </a>890 <p>891 We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing.892 <a target="_blank">893 Learn more894 </a>895 about Mailchimp's privacy practices.896 </p>897 </div>898 </div>899 </div>900 <div class="submit_container clear">901 <input class="formEmailButton" name="submit" type="submit" value="Subscribe">902 </div>903 <input name="ht" type="hidden" value="9e4b374fc0d00acd4ec01b68798653bbf37ad15e:MTY5ODk3OTg0NS43MTM2">904 <input name="mc_signupsource" type="hidden" value="hosted">905 </form>906 </div>907 </div>908 <div class="poweredWrapper">909 <span class="poweredBy">910 <a>911 <img alt="Email Marketing Powered by Mailchimp" border="0" height="53" src="rick.jpg" style="max-width: 100%; height: auto;" title="Mailchimp Email Marketing" width="137">912 </a>913 </span>914 </div>915 </body>916</html>917