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 lang="en">3 <head>4 <style>5 @font-face {6 font-family: 'Playfair Display';7 font-style: italic;8 font-weight: 700;9 src: url(http://fonts.gstatic.com/s/playfairdisplay/v36/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UXtHA_A.ttf) format('truetype');10}11 12 13 14@font-face {15 font-family: 'Inconsolata';16 font-style: normal;17 font-weight: 400;18 font-stretch: normal;19 src: url(http://fonts.gstatic.com/s/inconsolata/v32/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WR32kg.ttf) format('truetype');20}21@font-face {22 font-family: 'Inconsolata';23 font-style: normal;24 font-weight: 700;25 font-stretch: normal;26 src: url(http://fonts.gstatic.com/s/inconsolata/v32/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp2I7WR32kg.ttf) format('truetype');27}28 29 30 31/*! normalize.css v3.0.2 | MIT License | git.io/normalize */32 33/**34 * 1. Set default font family to sans-serif.35 * 2. Prevent iOS text size adjust after orientation change, without disabling36 * user zoom.37 */38 39html {40 font-family: sans-serif; /* 1 */41 -ms-text-size-adjust: 100%; /* 2 */42 -webkit-text-size-adjust: 100%; /* 2 */43}44 45/**46 * Remove default margin.47 */48 49body {50 margin: 0;51}52 53/* HTML5 display definitions54 ========================================================================== */55 56/**57 * Correct `block` display not defined for any HTML5 element in IE 8/9.58 * Correct `block` display not defined for `details` or `summary` in IE 10/1159 * and Firefox.60 * Correct `block` display not defined for `main` in IE 11.61 */62 63article,64aside,65details,66figcaption,67figure,68footer,69header,70hgroup,71main,72menu,73nav,74section,75summary {76 display: block;77}78 79/**80 * 1. Correct `inline-block` display not defined in IE 8/9.81 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.82 */83 84audio,85canvas,86progress,87video {88 display: inline-block; /* 1 */89 vertical-align: baseline; /* 2 */90}91 92/**93 * Prevent modern browsers from displaying `audio` without controls.94 * Remove excess height in iOS 5 devices.95 */96 97audio:not([controls]) {98 display: none;99 height: 0;100}101 102/**103 * Address `[hidden]` styling not present in IE 8/9/10.104 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.105 */106 107[hidden],108template {109 display: none;110}111 112/* Links113 ========================================================================== */114 115/**116 * Remove the gray background color from active links in IE 10.117 */118 119a {120 background-color: transparent;121}122 123/**124 * Improve readability when focused and also mouse hovered in all browsers.125 */126 127a:active,128a:hover {129 outline: 0;130}131 132/* Text-level semantics133 ========================================================================== */134 135/**136 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.137 */138 139abbr[title] {140 border-bottom: 1px dotted;141}142 143/**144 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.145 */146 147b,148strong {149 font-weight: bold;150}151 152/**153 * Address styling not present in Safari and Chrome.154 */155 156dfn {157 font-style: italic;158}159 160/**161 * Address variable `h1` font-size and margin within `section` and `article`162 * contexts in Firefox 4+, Safari, and Chrome.163 */164 165h1 {166 font-size: 2em;167 margin: 0.67em 0;168}169 170/**171 * Address styling not present in IE 8/9.172 */173 174mark {175 background: #ff0;176 color: #000;177}178 179/**180 * Address inconsistent and variable font size in all browsers.181 */182 183small {184 font-size: 80%;185}186 187/**188 * Prevent `sub` and `sup` affecting `line-height` in all browsers.189 */190 191sub,192sup {193 font-size: 75%;194 line-height: 0;195 position: relative;196 vertical-align: baseline;197}198 199sup {200 top: -0.5em;201}202 203sub {204 bottom: -0.25em;205}206 207/* Embedded content208 ========================================================================== */209 210/**211 * Remove border when inside `a` element in IE 8/9/10.212 */213 214img {215 border: 0;216}217 218/**219 * Correct overflow not hidden in IE 9/10/11.220 */221 222svg:not(:root) {223 overflow: hidden;224}225 226/* Grouping content227 ========================================================================== */228 229/**230 * Address margin not present in IE 8/9 and Safari.231 */232 233figure {234 margin: 1em 40px;235}236 237/**238 * Address differences between Firefox and other browsers.239 */240 241hr {242 -moz-box-sizing: content-box;243 box-sizing: content-box;244 height: 0;245}246 247/**248 * Contain overflow in all browsers.249 */250 251pre {252 overflow: auto;253}254 255/**256 * Address odd `em`-unit font size rendering in all browsers.257 */258 259code,260kbd,261pre,262samp {263 font-family: monospace, monospace;264 font-size: 1em;265}266 267/* Forms268 ========================================================================== */269 270/**271 * Known limitation: by default, Chrome and Safari on OS X allow very limited272 * styling of `select`, unless a `border` property is set.273 */274 275/**276 * 1. Correct color not being inherited.277 * Known issue: affects color of disabled elements.278 * 2. Correct font properties not being inherited.279 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.280 */281 282button,283input,284optgroup,285select,286textarea {287 color: inherit; /* 1 */288 font: inherit; /* 2 */289 margin: 0; /* 3 */290}291 292/**293 * Address `overflow` set to `hidden` in IE 8/9/10/11.294 */295 296button {297 overflow: visible;298}299 300/**301 * Address inconsistent `text-transform` inheritance for `button` and `select`.302 * All other form control elements do not inherit `text-transform` values.303 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.304 * Correct `select` style inheritance in Firefox.305 */306 307button,308select {309 text-transform: none;310}311 312/**313 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`314 * and `video` controls.315 * 2. Correct inability to style clickable `input` types in iOS.316 * 3. Improve usability and consistency of cursor style between image-type317 * `input` and others.318 */319 320button,321html input[type="button"], /* 1 */322input[type="reset"],323input[type="submit"] {324 -webkit-appearance: button; /* 2 */325 cursor: pointer; /* 3 */326}327 328/**329 * Re-set default cursor for disabled elements.330 */331 332button[disabled],333html input[disabled] {334 cursor: default;335}336 337/**338 * Remove inner padding and border in Firefox 4+.339 */340 341button::-moz-focus-inner,342input::-moz-focus-inner {343 border: 0;344 padding: 0;345}346 347/**348 * Address Firefox 4+ setting `line-height` on `input` using `!important` in349 * the UA stylesheet.350 */351 352input {353 line-height: normal;354}355 356/**357 * It's recommended that you don't attempt to style these elements.358 * Firefox's implementation doesn't respect box-sizing, padding, or width.359 *360 * 1. Address box sizing set to `content-box` in IE 8/9/10.361 * 2. Remove excess padding in IE 8/9/10.362 */363 364input[type="checkbox"],365input[type="radio"] {366 box-sizing: border-box; /* 1 */367 padding: 0; /* 2 */368}369 370/**371 * Fix the cursor style for Chrome's increment/decrement buttons. For certain372 * `font-size` values of the `input`, it causes the cursor style of the373 * decrement button to change from `default` to `text`.374 */375 376input[type="number"]::-webkit-inner-spin-button,377input[type="number"]::-webkit-outer-spin-button {378 height: auto;379}380 381/**382 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.383 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome384 * (include `-moz` to future-proof).385 */386 387input[type="search"] {388 -webkit-appearance: textfield; /* 1 */389 -moz-box-sizing: content-box;390 -webkit-box-sizing: content-box; /* 2 */391 box-sizing: content-box;392}393 394/**395 * Remove inner padding and search cancel button in Safari and Chrome on OS X.396 * Safari (but not Chrome) clips the cancel button when the search input has397 * padding (and `textfield` appearance).398 */399 400input[type="search"]::-webkit-search-cancel-button,401input[type="search"]::-webkit-search-decoration {402 -webkit-appearance: none;403}404 405/**406 * Define consistent border, margin, and padding.407 */408 409fieldset {410 border: 1px solid #c0c0c0;411 margin: 0 2px;412 padding: 0.35em 0.625em 0.75em;413}414 415/**416 * 1. Correct `color` not being inherited in IE 8/9/10/11.417 * 2. Remove padding so people aren't caught out if they zero out fieldsets.418 */419 420legend {421 border: 0; /* 1 */422 padding: 0; /* 2 */423}424 425/**426 * Remove default vertical scrollbar in IE 8/9/10/11.427 */428 429textarea {430 overflow: auto;431}432 433/**434 * Don't inherit the `font-weight` (applied by a rule above).435 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.436 */437 438optgroup {439 font-weight: bold;440}441 442/* Tables443 ========================================================================== */444 445/**446 * Remove most spacing between table cells.447 */448 449table {450 border-collapse: collapse;451 border-spacing: 0;452}453 454td,455th {456 padding: 0;457}458 459 460/*461* Skeleton V2.0.4462* Copyright 2014, Dave Gamache463* www.getskeleton.com464* Free to use under the MIT license.465* http://www.opensource.org/licenses/mit-license.php466* 12/29/2014467*/468 469 470/* Table of contents471ââââââââââââââââââââââââââââââââââââââââââââââââââ472- Grid473- Base Styles474- Typography475- Links476- Buttons477- Forms478- Lists479- Code480- Tables481- Spacing482- Utilities483- Clearing484- Media Queries485*/486 487 488/* Grid489ââââââââââââââââââââââââââââââââââââââââââââââââââ */490.container {491 position: relative;492 width: 100%;493 max-width: 960px;494 margin: 0 auto;495 padding: 0 20px;496 box-sizing: border-box; }497.column,498.columns {499 width: 100%;500 float: left;501 box-sizing: border-box; }502 503/* For devices larger than 400px */504@media (min-width: 400px) {505 .container {506 width: 85%;507 padding: 0; }508}509 510/* For devices larger than 550px */511@media (min-width: 550px) {512 .container {513 width: 80%; }514 .column,515 .columns {516 margin-left: 4%; }517 .column:first-child,518 .columns:first-child {519 margin-left: 0; }520 521 .one.column,522 .one.columns { width: 4.66666666667%; }523 .two.columns { width: 13.[PHONE REDACTED]%; }524 .three.columns { width: 22%; }525 .four.columns { width: 30.[PHONE REDACTED]%; }526 .five.columns { width: 39.[PHONE REDACTED]%; }527 .six.columns { width: 48%; }528 .seven.columns { width: 56.[PHONE REDACTED]%; }529 .eight.columns { width: 65.[PHONE REDACTED]%; }530 .nine.columns { width: 74.0%; }531 .ten.columns { width: 82.[PHONE REDACTED]%; }532 .eleven.columns { width: 91.[PHONE REDACTED]%; }533 .twelve.columns { width: 100%; margin-left: 0; }534 535 .one-third.column { width: 30.[PHONE REDACTED]%; }536 .two-thirds.column { width: 65.[PHONE REDACTED]%; }537 538 .one-half.column { width: 48%; }539 540 /* Offsets */541 .offset-by-one.column,542 .offset-by-one.columns { margin-left: 8.66666666667%; }543 .offset-by-two.column,544 .offset-by-two.columns { margin-left: 17.[PHONE REDACTED]%; }545 .offset-by-three.column,546 .offset-by-three.columns { margin-left: 26%; }547 .offset-by-four.column,548 .offset-by-four.columns { margin-left: 34.[PHONE REDACTED]%; }549 .offset-by-five.column,550 .offset-by-five.columns { margin-left: 43.[PHONE REDACTED]%; }551 .offset-by-six.column,552 .offset-by-six.columns { margin-left: 52%; }553 .offset-by-seven.column,554 .offset-by-seven.columns { margin-left: 60.[PHONE REDACTED]%; }555 .offset-by-eight.column,556 .offset-by-eight.columns { margin-left: 69.[PHONE REDACTED]%; }557 .offset-by-nine.column,558 .offset-by-nine.columns { margin-left: 78.0%; }559 .offset-by-ten.column,560 .offset-by-ten.columns { margin-left: 86.[PHONE REDACTED]%; }561 .offset-by-eleven.column,562 .offset-by-eleven.columns { margin-left: 95.[PHONE REDACTED]%; }563 564 .offset-by-one-third.column,565 .offset-by-one-third.columns { margin-left: 34.[PHONE REDACTED]%; }566 .offset-by-two-thirds.column,567 .offset-by-two-thirds.columns { margin-left: 69.[PHONE REDACTED]%; }568 569 .offset-by-one-half.column,570 .offset-by-one-half.columns { margin-left: 52%; }571 572}573 574 575/* Base Styles576ââââââââââââââââââââââââââââââââââââââââââââââââââ */577/* NOTE578html is set to 62.5% so that all the REM measurements throughout Skeleton579are based on 10px sizing. So basically 1.5rem = 15px :) */580html {581 font-size: 62.5%; }582body {583 font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */584 line-height: 1.6;585 font-weight: 400;586 font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;587 color: #222; }588 589 590/* Typography591ââââââââââââââââââââââââââââââââââââââââââââââââââ */592h1, h2, h3, h4, h5, h6 {593 margin-top: 0;594 margin-bottom: 2rem;595 font-weight: 300; }596h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}597h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }598h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }599h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }600h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }601h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }602 603/* Larger than phablet */604@media (min-width: 550px) {605 h1 { font-size: 5.0rem; }606 h2 { font-size: 4.2rem; }607 h3 { font-size: 3.6rem; }608 h4 { font-size: 3.0rem; }609 h5 { font-size: 2.4rem; }610 h6 { font-size: 1.5rem; }611}612 613p {614 margin-top: 0; }615 616 617/* Links618ââââââââââââââââââââââââââââââââââââââââââââââââââ */619a {620 color: #1EAEDB; }621a:hover {622 color: #0FA0CE; }623 624 625/* Buttons626ââââââââââââââââââââââââââââââââââââââââââââââââââ */627.button,628button,629input[type="submit"],630input[type="reset"],631input[type="button"] {632 display: inline-block;633 height: 38px;634 padding: 0 30px;635 color: #555;636 text-align: center;637 font-size: 11px;638 font-weight: 600;639 line-height: 38px;640 letter-spacing: .1rem;641 text-transform: uppercase;642 text-decoration: none;643 white-space: nowrap;644 background-color: transparent;645 border-radius: 4px;646 border: 1px solid #bbb;647 cursor: pointer;648 box-sizing: border-box; }649.button:hover,650button:hover,651input[type="submit"]:hover,652input[type="reset"]:hover,653input[type="button"]:hover,654.button:focus,655button:focus,656input[type="submit"]:focus,657input[type="reset"]:focus,658input[type="button"]:focus {659 color: #333;660 border-color: #888;661 outline: 0; }662.button.button-primary,663button.button-primary,664input[type="submit"].button-primary,665input[type="reset"].button-primary,666input[type="button"].button-primary {667 color: #FFF;668 background-color: #33C3F0;669 border-color: #33C3F0; }670.button.button-primary:hover,671button.button-primary:hover,672input[type="submit"].button-primary:hover,673input[type="reset"].button-primary:hover,674input[type="button"].button-primary:hover,675.button.button-primary:focus,676button.button-primary:focus,677input[type="submit"].button-primary:focus,678input[type="reset"].button-primary:focus,679input[type="button"].button-primary:focus {680 color: #FFF;681 background-color: #1EAEDB;682 border-color: #1EAEDB; }683 684 685/* Forms686ââââââââââââââââââââââââââââââââââââââââââââââââââ */687input[type="email"],688input[type="number"],689input[type="search"],690input[type="text"],691input[type="tel"],692input[type="url"],693input[type="password"],694textarea,695select {696 height: 38px;697 padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */698 background-color: #fff;699 border: 1px solid #D1D1D1;700 border-radius: 4px;701 box-shadow: none;702 box-sizing: border-box; }703/* Removes awkward default styles on some inputs for iOS */704input[type="email"],705input[type="number"],706input[type="search"],707input[type="text"],708input[type="tel"],709input[type="url"],710input[type="password"],711textarea {712 -webkit-appearance: none;713 -moz-appearance: none;714 appearance: none; }715textarea {716 min-height: 65px;717 padding-top: 6px;718 padding-bottom: 6px; }719input[type="email"]:focus,720input[type="number"]:focus,721input[type="search"]:focus,722input[type="text"]:focus,723input[type="tel"]:focus,724input[type="url"]:focus,725input[type="password"]:focus,726textarea:focus,727select:focus {728 border: 1px solid #33C3F0;729 outline: 0; }730label,731legend {732 display: block;733 margin-bottom: .5rem;734 font-weight: 600; }735fieldset {736 padding: 0;737 border-width: 0; }738input[type="checkbox"],739input[type="radio"] {740 display: inline; }741label > .label-body {742 display: inline-block;743 margin-left: .5rem;744 font-weight: normal; }745 746 747/* Lists748ââââââââââââââââââââââââââââââââââââââââââââââââââ */749ul {750 list-style: circle inside; }751ol {752 list-style: decimal inside; }753ol, ul {754 padding-left: 0;755 margin-top: 0; }756ul ul,757ul ol,758ol ol,759ol ul {760 margin: 1.5rem 0 1.5rem 3rem;761 font-size: 90%; }762li {763 margin-bottom: 1rem; }764 765 766/* Code767ââââââââââââââââââââââââââââââââââââââââââââââââââ */768code {769 padding: .2rem .5rem;770 margin: 0 .2rem;771 font-size: 90%;772 white-space: nowrap;773 background: #F1F1F1;774 border: 1px solid #E1E1E1;775 border-radius: 4px; }776pre > code {777 display: block;778 padding: 1rem 1.5rem;779 white-space: pre; }780 781 782/* Tables783ââââââââââââââââââââââââââââââââââââââââââââââââââ */784th,785td {786 padding: 12px 15px;787 text-align: left;788 border-bottom: 1px solid #E1E1E1; }789th:first-child,790td:first-child {791 padding-left: 0; }792th:last-child,793td:last-child {794 padding-right: 0; }795 796 797/* Spacing798ââââââââââââââââââââââââââââââââââââââââââââââââââ */799button,800.button {801 margin-bottom: 1rem; }802input,803textarea,804select,805fieldset {806 margin-bottom: 1.5rem; }807pre,808blockquote,809dl,810figure,811table,812p,813ul,814ol,815form {816 margin-bottom: 2.5rem; }817 818 819/* Utilities820ââââââââââââââââââââââââââââââââââââââââââââââââââ */821.u-full-width {822 width: 100%;823 box-sizing: border-box; }824.u-max-full-width {825 max-width: 100%;826 box-sizing: border-box; }827.u-pull-right {828 float: right; }829.u-pull-left {830 float: left; }831 832 833/* Misc834ââââââââââââââââââââââââââââââââââââââââââââââââââ */835hr {836 margin-top: 3rem;837 margin-bottom: 3.5rem;838 border-width: 0;839 border-top: 1px solid #E1E1E1; }840 841 842/* Clearing843ââââââââââââââââââââââââââââââââââââââââââââââââââ */844 845/* Self Clearing Goodness */846.container:after,847.row:after,848.u-cf {849 content: "";850 display: table;851 clear: both; }852 853 854/* Media Queries855ââââââââââââââââââââââââââââââââââââââââââââââââââ */856/*857Note: The best way to structure the use of media queries is to create the queries858near the relevant code. For example, if you wanted to change the styles for buttons859on small devices, paste the mobile query code up in the buttons section and style it860there.861*/862 863 864/* Larger than mobile */865@media (min-width: 400px) {}866 867/* Larger than phablet (also point when grid becomes active) */868@media (min-width: 550px) {}869 870/* Larger than tablet */871@media (min-width: 750px) {}872 873/* Larger than desktop */874@media (min-width: 1000px) {}875 876/* Larger than Desktop HD */877@media (min-width: 1200px) {}878 879 880 881body { font: 14px/20px 'Inconsolata', 'Courier New', monospace; margin: 0; }882 883.container {margin: 8em auto 2em;}884.intro { opacity: 0.6; }885.intro a { font-weight: normal; }886 887#header { margin-bottom: 6em; padding-top: 0.5em; }888/*889#header { position: fixed; }890@media only screen and (max-device-width: 480px) {891 #header {892 position: static !important;893 }894}895*/896 897h1 { font: 14px/20px 'Inconsolata', 'Courier New', monospace; margin: 0; letter-spacing: 0.2em; text-transform: uppercase; }898h2 { font: italic bold 40px 'Playfair Display', serif; color: #575757; letter-spacing: 0.01em; margin: 0 0 1em 0; line-height: 1.25em; }899h2 a, h2 a { color: #333; text-decoration: none; border-bottom: 0;}900 901p { font: 14px/20px 'Inconsolata', 'Courier New', monospace; color: #575757; }902a { font-weight: bold; color: #575757; text-decoration: none; border-bottom: 1px solid #ccc; }903a:hover { color: #0FA0CE; border-color: #0FA0CE; }904 905p.meta { margin-bottom: 8em; }906 907p.subhead {text-align: center; margin-bottom: 50px; opacity: 0.6; }908p.metadata { font-style: italic; opacity: 0.6; }909p.metadata a { font-weight: normal; }910 911img, iframe { max-width: 100%; }912 913.blog {text-align: center;}914.blog p { margin-bottom: 0.2em;}915.blog p.metadata { margin-bottom: 2.0em;}916p.meta, .footer p { opacity: 0.6; }917 918.footer { text-align: left; color: #ccc; border-top: 1px solid #ddd; margin: 7em 0 0 0; padding: 7em 0 4em 0; overflow: hidden; }919.footer a { font-weight: normal; }920.footer strong a { font-weight: bold; }921 922ul.posts { list-style-type: none; margin-bottom: 2em; }923ul.posts span { color: #aaa; }924ul.posts li.archive span { padding-right: 20px; }925 926table.books { width: 100%; }927table.books td,928table.books th,929table.books th:first-child,930table.books td:first-child,931table.books th:last-child,932table.books td:last-child {vertical-align: top; padding: 8px 15px;}933table.books td.year { padding: 4px 15px; background-color: #eee; font-weight: bold; }934table.books td.title { font-style: italic; }935table.books td.author { color: #575757; }936table.books td.stars { font-size: 20px; }937table.books td.currently { color: #575757; }938 </style>939 <meta charset="utf-8">940 <title>941 When Dublin developers roll, they roll big942 </title>943 <meta content="A blog by Emmet Connolly, digital product designer" name="description">944 <meta content="Emmet Connolly" name="author">945 <meta content="width=device-width, initial-scale=1" name="viewport">946 </head>947 <body>948 <div class="container">949 <div class="row">950 <div class="four columns">951 <div id="header">952 <h1>953 <a>954 Thoughtwax955 </a>956 </h1>957 <div class="intro">958 A blog by959 <a>960 Emmet Connolly961 </a>962 <br>963 <br>964 <a>965 Follow me on Twitter →966 </a>967 </div>968 </div>969 </div>970 <div class="eight columns">971 <h2>972 When Dublin developers roll, they roll big973 </h2>974 <div id="post">975 <p>976 In more Dublin urban development news, this is quite odd:977 <a>978 Dublin Coastal Development979 </a>980 , “a new vision for Dublin”. I must embarrassingly admit that I was a couple of minutes into the video before the penny dropped.981 </p>982 <p>983 It’s very slickly produced, sporting just the right amount of cheesiness. It also touches enough contemporary points to be almost believeable; Dublin’s unstoppable urban sprawl and tremendously stupid developments given the green light thanks to planning corruption have resulted in worse travesties than this.984 </p>985 <p>986 (On a meta note, that’s the first time I’ve embedded a YouTube in my site, and I found myself wondering if I wanted to, you know, take my blog in that direction987 <em>988 stylistically989 </em>990 .991 </p>992 </div>993 <p class="meta">994 — 26 Sep 2006995 </p>996 </div>997 </div>998 <div class="row footer">999 <div class="four columns">1000 <p>1001 <strong>1002 Emmet Connolly1003 </strong>1004 <br>1005 [EMAIL REDACTED]1006 </p>1007 </div>1008 <div class="eight columns">1009 <p>1010 <strong>1011 <a>1012 About me1013 </a>1014 </strong>1015 -1016 <a>1017 Archive1018 </a>1019 -1020 <a>1021 RSS feed1022 </a>1023 <br>1024 <a>1025 @thoughtwax1026 </a>1027 -1028 <a>1029 instagram1030 </a>1031 -1032 <a>1033 tumblr1034 </a>1035 -1036 <a>1037 vimeo1038 </a>1039 -1040 <a>1041 pinboard1042 </a>1043 <br>1044 </p>1045 </div>1046 </div>1047 </div>1048 </body>1049</html>1050