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.7k
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover" name="viewport">5 <title>6 Pendelbahn - Erlebnispark Steinau (Steinau an der Straße, Hesse, Germany)7 </title>8 <meta content="Looking for statistics on the fastest, tallest or longest roller coasters? Find it all and much more with the interactive Roller Coaster Database." name="description">9 <meta content="rcdb" name="application-name">10 <style>11 :root {--left: 0px;}12:root {--right: 0px;}13:root {--pleft: env(safe-area-inset-left);}14:root {--pright: env(safe-area-inset-right);}15:root {--ptop: env(safe-area-inset-top);}16:root {--pbottom: env(safe-area-inset-bottom);}17@media all and (min-width: 1281px)18{19 :root {--left: calc((100% - 1280px) / 2);}20 :root {--right: calc((100% - 1280px) / 2);}21 :root {--pleft: 0px;}22 :root {--pright: 0px;}23}:root {--body-back: #fff;}24:root {--body-text: #000;}25:root {--title-text: #000;}26:root {--link-link: #0000ee;}27:root {--link-visited: #551a8b;}28:root {--menu-back: #303231;}29:root {--menu-text: #e0e0e0;}30:root {--menu-hov: #505050;}31:root {--menu-line: #505050;}32:root {--head-text: #000;}33:root {--bg-color: rgba(239,138,8,0.8);}34:root {--shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);}35:root {--tbl-head: #000;}36:root {--tbl-body: #c0c0c0;}37:root {--tbl-hov: rgba(0,0,0,0.06);}38:root {--bg-image: url(60.svg);}39:root {--img-camera: url(17.svg);}40:root {--img-tree-open: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjZTBlMGUwIiBkPSJNNTEyLDc1IDUxMiw0MzcgMTUwLDQzN3oiLz48L3N2Zz4=");}41:root {--img-tree-clos: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNlMGUwZTAiIGQ9Ik0yNTYsMCA1MTIsMjU2IDI1Niw1MTJ6TTMwNiwxMjAuNzEgNDQxLjI5LDI1NiAzMDYsMzkwLjI5eiIvPjwvc3ZnPg==");}42:root {--img-swap: url(/50.svg);}43 44:root {--ctrl-back: #fff;}45:root {--ctrl-back-rev: #141d26;}46:root {--ctrl-text-rev: #aab8c2;}47:root {--ctrl-bdr: 1px solid var(--bg-color);}48 49:root {--img-sort-not: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAsNWgxMGwtNSwtNXpNMCw3aDEwbC01LDV6IiBmaWxsPSIjY2NjIi8+PC9zdmc+");}50:root {--img-sort-asc: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAsNWgxMGwtNSwtNXoiLz48cGF0aCBkPSJNMCw3aDEwbC01LDV6IiBmaWxsPSIjY2NjIi8+PC9zdmc+");}51:root {--img-sort-dec: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAsNWgxMGwtNSwtNXoiIGZpbGw9IiNjY2MiLz48cGF0aCBkPSJNMCw3aDEwbC01LDV6Ii8+PC9zdmc+");}52 53:root {--img-close: url("data:image/svg+xml;base64,Cjxzdmcgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ic2lsdmVyIj4KICAgIDxwYXRoIGQ9Ik01MCwwTDAsNTBMNDYyLDUxMkw1MTIsNDYyWiIvPgogICAgPHBhdGggZD0iTTUwLDUxMkwwLDQ2Mkw0NjIsMEw1MTIsNTBaIi8+CiAgPC9nPgo8L3N2Zz4=");}54.shade {overflow-y: auto;}@media all and (max-width: 1280px)55{56 #pbox {display: none;}57}58 59html {-webkit-text-size-adjust: 100%;}60body {background-color: var(--body-back); color: var(--body-text);}61body {line-height: 1.4;}62body {margin: 0 var(--right) 0 var(--left); padding: var(--ptop) calc(var(--pright) + 6px) var(--pbottom) calc(var(--pleft) + 6px);}63body, select, input, textarea {font-size: 16px; font-family: Arial, Helvetica, sans-serif;}64 65.locsel, select, input, textarea {background-color: var(--ctrl-back); color: var(--body-text); border: var(--ctrl-bdr); box-sizing: border-box; padding: 3px 6px;}66select:not([multiple]), input, textarea {-webkit-appearance: none; -moz-appearance: none; appearance: none;}67.locsel, select, input:not([type=radio]), textarea {border-radius: 6px;}68input[type=radio]:checked {background-image: url(data:image/svg+xml;base64,PHN2ZyAgdmlld0JveD0iMCAwIDggOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGZpbGw9IiM5OGE5YjYiIGN4PSI0IiBjeT0iNCIgcj0iMiIvPjwvc3ZnPg==);}69input[type=radio], input[type='checkbox'] {height: 22px; width: 22px;}70input[type=radio] {position: relative; top: -4px; border-radius: 11px; margin-right: 6px;}71input[type=checkbox] {margin: 2px 6px 2px 0; vertical-align: bottom;}72input[type=checkbox]:checked {background-image: url(data:image/svg+xml;base64,PHN2ZyAgdmlld0JveD0iLTEwIC0xMCA1MS4zIDUxLjMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzk4YTliNiIgZD0iTTguNCAxNS43bC03LTcuMWMtMi0yLTEuOS01LjIuMy03LjIgMi4xLTEuOSA1LjUtMS44IDcuNS4ybDYuNSA2LjYgNi41LTYuNmMyLTIgNS40LTIuMiA3LjUtLjIgMi4xIDEuOSAyLjMgNS4xLjMgNy4ybC03IDcuMSA3IDcuMWMyIDIgMS45IDUuMi0uMyA3LjItMi4xIDEuOS01LjUgMS44LTcuNS0uM2wtNi41LTYuNi02LjUgNi42Yy0yIDItNS40IDIuMi03LjUuMy0yLjEtMS45LTIuMy01LjEtLjMtNy4ybDctNy4xeiIvPjwvc3ZnPg==);}73.locsel, select:not([multiple]) {padding-right: 26px; background-repeat: no-repeat; background-position: right 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSItMTAwIC0xMDAgNzEyIDcxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjOThhOWI2IiBkPSJNNTA0IDI1NmMwIDEzNy0xMTEgMjQ4LTI0OCAyNDhTOCAzOTMgOCAyNTYgMTE5IDggMjU2IDhzMjQ4IDExMSAyNDggMjQ4em0tMTQzLjYtMjguOUwyODggMzAyLjZWMTIwYzAtMTMuMy0xMC43LTI0LTI0LTI0aC0xNmMtMTMuMyAwLTI0IDEwLjctMjQgMjR2MTgyLjZsLTcyLjQtNzUuNWMtOS4zLTkuNy0yNC44LTkuOS0zNC4zLS40bC0xMC45IDExYy05LjQgOS40LTkuNCAyNC42IDAgMzMuOUwyMzkgNDA0LjNjOS40IDkuNCAyNC42IDkuNCAzMy45IDBsMTMyLjctMTMyLjdjOS40LTkuNCA5LjQtMjQuNiAwLTMzLjlsLTEwLjktMTFjLTkuNS05LjUtMjUtOS4zLTM0LjMuNHoiLz48L3N2Zz4=);}74.locsel:focus, select:focus, textarea:focus, input:focus {box-shadow: 0 0 0 1px var(--bg-color); outline: none;}75 76.locsel {display: inline-block;}77.locsel:link {color: var(--body-text);}78.locsel:hover {text-decoration: none;}79 80.pop {color: var(--menu-text); background: var(--menu-back); box-shadow: var(--shadow); padding: 6px;}81.pop input,82.pop select,83.pop textarea {background-color: var(--ctrl-back-rev); color: var(--ctrl-text-rev);}84 85ul.ll.inline {display: inline;}86ul.ll {margin: .75em 0; padding: 0;}87ul.ll li {display: inline;}88ul.ll li:not(:first-child):before {content: '\2022'; margin: 0 6px;}89 90.bold {font-weight: bold;}91 92a {text-decoration: none;}93a:link {color: var(--link-link);}94a:visited {color: var(--link-visited);}95a:hover {text-decoration: underline;}96/*a:focus {outline: thin dotted;}*/97 98form {margin: 0px;}99 100h1 {margin: 6px 0 12px 0; padding: 0; font-size: 1.5em; font-weight: bold; color: var(--title-text);}101h2 {margin: 0; padding: 0; font-size: 1.25em; font-weight: bold;}:root {--menu-w: 32px;}102:root {--look-w: 32px;}103:root {--home-w: 92px;}104:root {--find-w: 32px;}105:root {--sign-w: 32px;}106:root {--margin: calc((100% - var(--menu-w) - var(--look-w) - var(--home-w) - var(--find-w) - var(--sign-w)) / 8);}107 108#menu {width: var(--menu-w);}109#look {width: var(--look-w);}110#home {width: var(--home-w); background-image: url(61.svg);}111#find {width: var(--find-w);}112#sign {width: var(--sign-w);}113 114:root {--head-height: 32px;}115:root {--head-padding: 6px;}116 117:root {--head-total: calc(var(--head-height) + var(--head-padding) * 2);}118 119.svg {background-size: contain; background-repeat: no-repeat; background-position: center;}120.nav {position: fixed; left: var(--left); right: var(--right); box-shadow: var(--shadow);}121 122#menudrop {left: calc(var(--left) + var(--pleft)); white-space: nowrap;}123#signdrop {right: calc(var(--right) + var(--pright));}124 125#head {top: 0; height: var(--head-height); overflow: hidden; white-space: nowrap;}126#head {background: var(--bg-color); padding: var(--head-padding) calc(var(--pright) + 6px) var(--head-padding) calc(var(--pleft) + 6px);}127#head a {display: inline-block; position: relative; height: 32px;}128#head a:not(:first-child) {margin-left: var(--margin);}129#head a:not(:last-child) {margin-right: var(--margin);}130 131#bg {position: fixed; z-index: -1; left: 0; right: 0; top: var(--head-total); bottom: 0;}132#bg {background-image: var(--bg-image);}133 134#spacer {height: var(--head-total);}135 136#mask {position: fixed; display: none; top: var(--head-total); bottom: 0; left: 0; right: 0;}137 138@media all and (max-width: 640px)139{140 .shade > div > h2 {font-size: 22px;}141 142 .shade {width: 100%;}143 144 .mg a {padding: 6px 12px; font-size: 20px;}145 146 #signdrop form > * {padding: 9px;}147 .pref > * {padding: 9px 0;}148 149 #signdrop, 150 #signdrop select,151 #signdrop input {font-size: 22px;}152 153 #signdrop input[type='checkbox'] {height: 30px; width: 30px; margin: 0 12px 0 0;}154}155 156@media all and (min-width: 641px)157{158 .shade > div > h2 {font-size: 17px;}159 160 /*Not sure what wide did*/161 /*.wide {width: calc(50% + 32px); left: 50%; transform: translate(-50%, 0);}*/162 163 .mg a {padding: 3px 12px; font-size: 17px;}164 165 #signdrop form > * {padding: 6px;}166 .pref > * {padding: 6px 0;}167 168 #signdrop input[type='checkbox'] {margin: 0 6px 0 0;}169}170 171.shade > div > h2 {margin: 0; padding: 6px 0 6px 0; font-variant: small-caps;}172.shade > div > h2 {margin: 0; padding: 6px 0;}173 174#sqsr:empty {display: none;}175#lookdrop div {padding: 0 0 12px 0; font-size: 16px; border: 0;}176#lookdrop div:not(:first-child) {padding-top: 6px; border-top: 1px solid var(--menu-line);}177#lookdrop div:not(:last-child) {padding-bottom: 6px;}178#lookdrop div > a {display: block; text-decoration: none; padding: 3px;}179#lookdrop div > a:hover {background-color: var(--menu-hov);}180#lookdrop div > a > span {display: block;}181 182#signdrop input[type=text],183#signdrop input[type=password] {width: 100%; min-width: 215px;}184#signdrop label span,185.pref span {display: inline-block; padding-bottom: 1px;}186.pref {padding-left: 6px;}187 188#signdrop input,189#signdrop select {background-color: var(--ctrl-back-rev); color: var(--ctrl-text-rev);}190 191.shade {position: fixed; background: var(--menu-back); height: 0px; max-height: calc(100% - var(--head-total)); color: var(--menu-text);}192.shade {transition: height 0s ease;}193 194.mg a:hover {background-color: var(--menu-hov);}195.mg a {display: block; text-decoration: none;}196 197.shade a:link,198.shade a:visited,199.shade a:active {color: var(--menu-text);}200 201.shade {padding: 0 12px; box-sizing: border-box;}202.shade > div {padding: 6px 0;}203.shade > div:not(:first-child) {border-top: 1px solid var(--menu-line);}204.shade > div:not(:last-child) {border-bottom: 1px solid var(--menu-line);}205.shade > div > h2 {font-variant: small-caps;}206 207.shade {box-shadow: var(--shadow);}208 209/*#signdrop input[type=submit] {background-color: var(--bg-color); color: black; -webkit-appearance: none;}*/210 211#www {position: relative;}212#fpw {height: 16px; position: absolute; right: 6px; top: 0; bottom: 0; margin: auto; text-decoration: none;}213/*#fpw:hover {text-decoration: underline;}*/214 215#head {-webkit-tap-highlight-color: rgba(0,0,0,0);}216 217@media all and (max-width: 639px)218{219 #lookdrop {width: 100%; left: 0;}220 #qsf {width: calc(100% - 12px - 12px - 12px - 12px - 32px - 32px); left: calc(32px + 12px + 12px);}221 #qsf input {font-size: 22px; margin: 0px 16px;}222}223 224@media all and (min-width: 640px)225{226 #lookdrop {width: calc(50% - (var(--left) + var(--right)) / 2 + 48px); left: 50%; transform: translate(-50%, 0);}227 #qsf {width: calc(var(--look-w) + var(--home-w) + var(--find-w) + var(--margin) * 4 + 16px); left: 50%; transform: translate(-50%, 0);}228 #qsf input {font-size: 16px; margin: 4px 16px;}229}230 231#lookdrop > div {padding: 6px 0;}232#lookdrop div:last-child {font-size: 12px;}233 234#qs:focus {box-shadow: none;}235 236#qsf {display: none; position: absolute; top: 6px; height: calc(32px - 6px);}237#qsf {background-color: #141d26; border-radius: 16px;}238#qsf {padding: 3px 0px;}239 240#qsf input {box-sizing: border-box; width: calc(100% - 32px - 16px); -webkit-appearance: none;}241#qsf input {padding: 0;}242#qsf input {border: none;}243#qsf input:focus {outline: none;}244#qsf input::-ms-clear {display: none;}245#qsf input {background-color: transparent; color: #aab8c2;}246 247#qsc {display: none; width: 32px; height: 32px; position: absolute; right: 0; top: 0; cursor: pointer;}:root {--height: 6px;}248#menu.head {position: relative;}249#menu.head * {margin: 0; position: absolute; background-color: black; border-radius: calc(var(--height) / 2);}250 251#menu.head :nth-child(1) {top: 0; height: var(--height);}252#menu.head :nth-child(3) {top: calc(50% - var(--height) / 2); bottom: calc(50% - var(--height) / 2);}253#menu.head :nth-child(5) {bottom: 0; height: var(--height);}254#menu.head :nth-child(odd) {left: 0; right: 0;}255 256#menu.head :nth-child(2) {transform: rotate(45deg);}257#menu.head :nth-child(4) {transform: rotate(-45deg);}258#menu.head :nth-child(even) {top: calc(50% - var(--height) / 2); bottom: calc(50% - var(--height) / 2);}259#menu.head :nth-child(even) {left: calc(50% - var(--height) / 2); right: calc(50% - var(--height) / 2);}260 261@keyframes squishdown262{263 from {top: 0;}264 to {top: calc(50% - var(--height) / 2);}265}266 267@keyframes squishdownx268{269 from {top: calc(50% - var(--height) / 2);}270 to {top: 0;}271}272 273@keyframes squishup274{275 from {bottom: 0;}276 to {bottom: calc(50% - var(--height) / 2);}277}278 279@keyframes squishupx280{281 from {bottom: calc(50% - var(--height) / 2);}282 to {bottom: 0;}283}284 285@keyframes shrink286{287 from {left: 0; right: 0;}288 to {left: calc(50% - var(--height) / 2); right: calc(50% - var(--height) / 2);}289}290 291@keyframes shrinkx292{293 from {left: calc(50% - var(--height) / 2); right: calc(50% - var(--height) / 2);}294 to {left: 0; right: 0;}295}296 297@keyframes grow298{299 from {left: calc(50% - var(--height) / 2); right: calc(50% - var(--height) / 2);}300 to {left: calc(50% - (100% * 1.414) / 2 + var(--height) / 2); right: calc(50% - (100% * 1.414) / 2 + var(--height) / 2);}301}302 303@keyframes growx304{305 from {left: calc(50% - (100% * 1.414) / 2 + var(--height) / 2); right: calc(50% - (100% * 1.414) / 2 + var(--height) / 2);}306 to {left: calc(50% - var(--height) / 2); right: calc(50% - var(--height) / 2);}307}308 309#menu.head.gox :nth-child(1) {animation: squishdown 100ms linear forwards, shrink 100ms linear 100ms forwards;}310#menu.head.gox :nth-child(3) {animation: shrink 100ms linear 100ms forwards;}311#menu.head.gox :nth-child(5) {animation: squishup 100ms linear forwards, shrink 100ms linear 100ms forwards;}312#menu.head.gox :nth-child(even) {animation: grow 100ms linear 200ms forwards}313 314#menu.head.goh :nth-child(1) {top: calc(50% - var(--height) / 2);}315#menu.head.goh :nth-child(5) {bottom: calc(50% - var(--height) / 2);}316#menu.head.goh :nth-child(odd) {left: calc(50% - var(--height) / 2); right: calc(50% - var(--height) / 2);}317#menu.head.goh :nth-child(even) {left: calc(50% - (100% * 1.414) / 2 + var(--height) / 2); right: calc(50% - (100% * 1.414) / 2 + var(--height) / 2);}318 319#menu.head.goh :nth-child(even) {animation: growx 100ms linear forwards;}320#menu.head.goh :nth-child(5) {animation: shrinkx 100ms linear 100ms forwards, squishupx 100ms linear 200ms forwards;}321#menu.head.goh :nth-child(3) {animation: shrinkx 100ms linear 100ms forwards;}322#menu.head.goh :nth-child(1) {animation: shrinkx 100ms linear 100ms forwards, squishdownx 100ms linear 200ms forwards;}.stdtbl {overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;}323.stdtbl table {width: 100%; border-spacing: 0; line-height: 2em;}324.stdtbl table th,325.stdtbl table td {padding: 0px 6px;}326.stdtbl table th,327.stdtbl table th a:link,328.stdtbl table th a:visited {color: var(--title-text);}329.stdtbl table thead tr:first-child th {border-top: 1px solid var(--tbl-head);}330.stdtbl table thead tr:last-child th {border-bottom: 1px solid var(--tbl-head);}331.stdtbl table tbody tr:not(:last-child) td {border-bottom: 1px solid var(--tbl-body);}332.stdtbl table tbody tr:last-child td {border-bottom: 1px solid var(--tbl-head);}333.stdtbl table tbody tr:hover {background: var(--tbl-hov);}334 335.stdtbl th[data-sort]:hover {background-color: var(--tbl-hov);}336 337@media all and (min-width: 640px)338{339 .stdtbl tr[data-dsort] th:not(:last-child) {border-right: 1px solid var(--tbl-body);}340 .stdtbl th[data-sort] {background-repeat: no-repeat; background-size: auto 50%; background-position: right 6px center; padding-right: 24px;}341 342 .stdtbl th[data-sort] {background-image: var(--img-sort-not);}343 .stdtbl th[data-sort].asc {background-image: var(--img-sort-asc);}344 .stdtbl th[data-sort].dec {background-image: var(--img-sort-dec);}345}section > h3 {margin: 0 0 3px 0; border-bottom: 1px solid var(--tbl-head);}346section > h3:not(:last-child) {margin-top: 12px;}347section > h3 {font-variant: small-caps;}348section > h4 {font-variant: small-caps; font-size: 1.17em; margin: 12px 0 0 0; color: var(--title-text);}349.ctr table {margin-top: 0px;}350 351.alert > h2 {display: inline; margin: 0 0 0 6px; vertical-align: middle;}352.alert > div {display: inline-block; vertical-align: middle;}353 354.stat-tbl {border-collapse:collapse;}355.stat-tbl tbody tr th {padding: 4px; text-align: right; vertical-align: top; white-space: nowrap;}356.stat-tbl tbody tr th:after{content: ':';}357.stat-tbl tbody tr td {padding: 4px; vertical-align: top;}358.stat-tbl tbody tr td:not(:last-child) {padding-right: 20px;} 359 360#modelDiv {column-count: auto;}361#modelDiv table {display: inline-block;}362#modelDiv table tr th {text-align: left;}363#modelDiv table tr td:nth-child(1) {text-align: right; width: 30px;}364#modelDiv table tr td:nth-child(2) {white-space: nowrap;}365 366.lcam {width: 19px; height: 14px; background-image: var(--img-camera); background-repeat: no-repeat; background-size: contain; background-position: center center;}367 368.ctr table th:nth-child(1),369.ctr table td:nth-child(1) {text-align: center; width: 19px;}370.ctr table th:nth-child(1) span,371.ctr table td:nth-child(1) a {display: inline-block;}372.ctr table th:nth-child(n+2):nth-child(-n+5) {text-align: left;}373.ctr table th:nth-child(n+6),374.ctr table td:nth-child(n+6) {text-align: right;}375 376#icons a {height: 32px;}377 378#demo {width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;}379#demo > a {margin: 6px 6px 0 0; text-decoration: none;}380#demo > div {margin-top: 6px;}381#demo > div h1 {margin: 0;}382 383@media all and (max-width: 640px)384{385 #demo > a {display: block;}386 #demo > div {display: block;}387 #icons {margin-top: 6px;}388 #icons a {display: inline-block; vertical-align: middle;}389 #icons a:not(:last-child) {margin-right: 10px;}390}391 392@media all and (min-width: 641px)393{394 #demo {display: flex; flex-direction: row;}395 #demo > a {flex: 0 0 auto;}396 #demo > div {flex: 1 1 auto;}397 #icons {text-align: center; position: absolute; right: 0; top: 0;}398 #icons a {display: block;}399 #icons a:not(:last-child) {margin-bottom: 10px;}400}401 402.pic-strip {margin-top: 6px; font-size: 0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;}403.pic-strip a {display: inline-block;}404.pic-strip a:not(:first-child) {margin-left: 3px;}405.pic-strip a:not(:last-child) {margin-right: 3px;}406 407.clear {clear: both; margin: 0;}408 409.cover {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .5);}410 411.close {display: block; width: 24px; height: 24px; background-image: var(--img-close);}412.close {position: absolute; right: 6px;}413 414.map-tpl h1,415.map-tpl h3,416.vid-tpl h1 {text-align: center; color: var(--menu-text);}417 418.map-tpl h1,419.vid-tpl h1 {border-bottom: 2px solid var(--menu-line); margin-top: 0;}420 421.map-tpl {position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}422 423.map-tpl {white-space: nowrap; text-align: center;}424.map-tpl h3 {margin: 6px 0 0 0; font-variant: small-caps; font-size: 1.17em;}425.map-tpl div a {display: inline-block; margin: 0 6px;}426 427.map-tpl,428.vid-tpl {display: none;}429 430.vid-tpl {overflow-y: auto;}431.vid-tpl {display: none; flex-flow: column;}432 433.vid-tpl > div:nth-of-type(1) {flex: 0 1 auto;}434.vid-tpl > div:nth-of-type(1) {text-align: center; padding: 6px 0;}435.vid-tpl > div:nth-of-type(1) span {white-space: nowrap;}436.vid-tpl > div:nth-of-type(1) input[type='radio'] {margin-left: 12px; vertical-align: top; margin-top: 2px;}437 438.vid-tpl > div:nth-of-type(2) {flex: 1 1 auto;}439.vid-tpl > div:nth-of-type(2) {overflow-y: auto;}440.vid-tpl > div:nth-of-type(2) > a {display: block; text-decoration: none; font-size: 14px;}441.vid-tpl > div:nth-of-type(2) > a:link,442.vid-tpl > div:nth-of-type(2) > a:visited {color: var(--menu-text);}443.vid-tpl > div:nth-of-type(2) > a:not(:last-child) {padding-bottom: 12px; border-bottom: 1px solid var(--menu-line);}444.vid-tpl > div:nth-of-type(2) > a:not(:first-child) {padding-top: 12px; border-top: 1px solid var(--menu-line);}445.vid-tpl > div:nth-of-type(2) > a > p {margin: 0; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis;}446.vid-tpl > div:nth-of-type(2) > a > div {width: 100%;}447.vid-tpl > div:nth-of-type(2) > a > div {background-position: center; background-repeat: no-repeat;}448 449@media all and (max-width: 640px)450{451 .vid-tpl {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 10;}452 .vid-tpl {-webkit-overflow-scrolling: touch;}453}454 455@media all and (min-width: 641px)456{457 .vid-tpl {display: none; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-height: 70%;}458 .vid-tpl {width: 100%; max-width: 480px;}459}460 461#media_row {font-size: 0;}462#media_row a {display: inline-block;}463#media_row a:not(:first-child) {margin-left: 6px;}464 465.sec div {padding-left: 4px;}466.sec div:not(:last-child) {padding-bottom: 10px;}467 468.text td {vertical-align: top; padding: 0;}469.text tr:not(:first-child) td {padding-top: 3px;}470.text tr:not(:last-child) td {padding-bottom: 3px;}471.text.dates td:first-child {text-align: right; white-space: nowrap;}472.text.dates time:not(:empty)::after {content: '-'; margin: 0 3px;}473 </style>474 </head>475 <body>476 <div id="spacer">477 </div>478 <section id="objdiv">479 <div id="demo">480 <a aria-label="Picture" data-height="216" data-id="13276" data-offset="0" data-url="/aaatqqc" data-width="288" id="opfAnchor" style='width: 288px; height: 216px; background-size: cover; background-image: url("/aaatqqc");'>481 482 </a>483 <div id="feature">484 <div>485 <h1>486 Pendelbahn487 </h1>488 <a>489 Erlebnispark Steinau490 </a>491 (492 <a>493 Steinau an der Straße494 </a>495 ,496 <a>497 Hesse498 </a>499 ,500 <a>501 Germany502 </a>503 )504 <br>505 </div>506 <p>507 <a>508 Operating509 </a>510 since511 <time datetime="1998">512 1998513 </time>514 </p>515 <ul class="ll">516 <li>517 <a>518 Roller Coaster519 </a>520 </li>521 <li>522 <a>523 Steel524 </a>525 </li>526 <li>527 <a>528 Sit Down529 </a>530 </li>531 <li>532 <a>533 Family534 </a>535 </li>536 </ul>537 <ul class="ll">538 <li>539 <a>540 U Shuttle541 </a>542 </li>543 <li>544 <a>545 Shuttle546 </a>547 </li>548 </ul>549 <div class="scroll">550 <p>551 Make:552 <a>553 Sunkid GmbH554 </a>555 <br>556 Model:557 <a>558 Butterfly559 </a>560 /561 <a>562 Original563 </a>564 </p>565 </div>566 <ul class="ll">567 <li>568 <a data-offset="-1" id="pic-lnk">569 Pictures570 </a>571 </li>572 <li id="youTubeSpan">573 <a data-by="by" data-published="Published" data-target="popVidsInner" data-video-ids="_-WhFGkL6ps,IgtfgEhwJYU" data-views="Views" id="vid-lnk">574 Videos575 </a>576 </li>577 <li id="mapsSpan">578 <a id="map-lnk">579 Maps580 </a>581 </li>582 </ul>583 </div>584 </div>585 <div class="pic-strip">586 <a aria-label="Picture" data-offset="0" style='background-image: url("/aadaad"); background-position: 0px 0px; height: 100px; width: 100px;'>587 </a>588 <a aria-label="Picture" data-offset="1" style='background-image: url("/aadaad"); background-position: -100px 0px; height: 100px; width: 100px;'>589 </a>590 <a aria-label="Picture" data-offset="2" style='background-image: url("/aadaad"); background-position: -200px 0px; height: 100px; width: 100px;'>591 </a>592 <a aria-label="Picture" data-offset="3" style='background-image: url("/aadaad"); background-position: -300px 0px; height: 100px; width: 100px;'>593 </a>594 <a aria-label="Picture" data-offset="4" style='background-image: url("/aadaad"); background-position: -400px 0px; height: 100px; width: 100px;'>595 </a>596 <a aria-label="Picture" data-offset="5" style='background-image: url("/aadaad"); background-position: -500px 0px; height: 100px; width: 100px;'>597 </a>598 <a aria-label="Picture" data-offset="6" style='background-image: url("/aadaad"); background-position: -600px 0px; height: 100px; width: 100px;'>599 </a>600 <a aria-label="Picture" data-offset="7" style='background-image: url("/aadaad"); background-position: -700px 0px; height: 100px; width: 100px;'>601 </a>602 <a aria-label="Picture" data-offset="8" style='background-image: url("/aadaad"); background-position: -800px 0px; height: 100px; width: 100px;'>603 </a>604 </div>605 </section>606 <section>607 <h3>608 Tracks609 </h3>610 <table class="stat-tbl">611 <tbody>612 <tr>613 <th>614 Height615 </th>616 <td>617 <span class="float">618 20.0619 </span>620 ft621 </td>622 </tr>623 <tr>624 <th>625 Inversions626 </th>627 <td>628 0629 </td>630 </tr>631 </tbody>632 </table>633 </section>634 <section>635 <h3>636 Trains637 </h3>638 <table class="stat-tbl">639 <tbody>640 <tr>641 <th>642 Arrangement643 </th>644 <td>645 1 car. Riders are arranged inline in 2 rows for a total of 2 riders.646 </td>647 </tr>648 </tbody>649 </table>650 </section>651 <section>652 <h3>653 Details654 </h3>655 <table class="stat-tbl">656 <tbody>657 <tr>658 <th>659 Former names660 </th>661 <td>662 Butterfly663 <br>664 </td>665 </tr>666 </tbody>667 </table>668 </section>669 <section class="sec">670 <h3>671 Etymology672 </h3>673 <table class="text">674 <tbody>675 <tr>676 <td>677 "Pendelbahn" is German for "Pendulum Track".678 </td>679 </tr>680 </tbody>681 </table>682 </section>683 <div class="map-tpl pop">684 <a class="close">685 </a>686 <h1>687 Maps688 </h1>689 <h3>690 Aerial Imagery691 </h3>692 <div>693 <a class="bkg" data-background="/40.svg" data-height="48" data-ratio="1" rel="noopener" style='width: 48px; height: 48px; background-image: url("/40.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center;' target="_blank">694 </a>695 <a class="bkg" data-background="/41.svg" data-height="48" data-ratio="1" rel="noopener" style='width: 48px; height: 48px; background-image: url("/41.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center;' target="_blank">696 </a>697 <a class="bkg" data-background="/35.svg" data-height="48" data-ratio="1" rel="noopener" style='width: 48px; height: 48px; background-image: url("/35.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center;' target="_blank">698 </a>699 </div>700 </div>701 <div class="vid-tpl pop">702 <h1>703 Videos704 </h1>705 <a class="close">706 </a>707 <div>708 <span>709 Sort By:710 </span>711 <span>712 <label>713 <input data-sort="date" name="sort" type="radio">714 Published715 </label>716 <label>717 <input data-sort="view" name="sort" type="radio">718 Views719 </label>720 <label>721 <input data-sort="rate" name="sort" type="radio">722 Rating723 </label>724 </span>725 </div>726 <div class="vid-hole">727 </div>728 </div>729 <nav class="nav" id="head">730 <a aria-label="Menu" class="head" data-close="goh" data-open="gox" data-target="menudrop" id="menu">731 <p>732 </p>733 <p>734 </p>735 <p>736 </p>737 <p>738 </p>739 <p>740 </p>741 </a>742 <a aria-label="Search" data-aux="qsf" data-focus="qs" data-target="lookdrop" id="look">743 </a>744 <a aria-label="Home" class="svg" id="home">745 </a>746 <a aria-label="What's Nearby" id="find">747 </a>748 <a aria-label="Preferences" data-target="signdrop" id="sign">749 </a>750 <form action="/qs.htm" id="qsf" method="get">751 <input autocapitalize="off" autocomplete="off" autocorrect="off" id="qs" name="qs" placeholder="Search rcdb.com" spellcheck="false" type="text">752 </form>753 </nav>754 <div id="mask">755 <div class="shade scroll-y" data-speed=".5" id="menudrop">756 <div class="mg">757 <h2>758 Reports759 </h2>760 <a>761 New for 2024762 </a>763 <a>764 New for 2023765 </a>766 <a>767 New for 2022768 </a>769 <a>770 Census771 </a>772 <a>773 Record Holders774 </a>775 <a>776 World View777 </a>778 <a>779 Inversions780 </a>781 </div>782 <div class="mg">783 <h2>784 Search785 </h2>786 <a>787 Roller Coasters788 </a>789 <a>790 Amusement Parks791 </a>792 <a>793 Companies794 </a>795 <a>796 People797 </a>798 </div>799 <div class="mg">800 <h2>801 More802 </h2>803 <a>804 Glossary805 </a>806 <a>807 About This Site808 </a>809 <a>810 Terms Of Use / Privacy811 </a>812 <a>813 Contact Us814 </a>815 </div>816 </div>817 <div class="shade scroll-y" data-speed=".5" id="lookdrop">818 </div>819 <div class="shade scroll-y" data-speed=".5" id="signdrop">820 <div>821 <h2>822 Sign On823 </h2>824 <form>825 <div>826 <input id="user" placeholder="Username, email or phone" type="text">827 </div>828 <div>829 <input id="pass" placeholder="Password" type="password">830 </div>831 <div>832 <div>833 <label>834 <input data-name="uom" type="checkbox">835 <span>836 Stay signed on837 </span>838 </label>839 </div>840 </div>841 <div id="www">842 <input id="gogo" type="submit" value="Log In">843 <a id="fpw">844 Forgot password?845 </a>846 </div>847 </form>848 </div>849 <div>850 <h2>851 Options852 </h2>853 <div class="pref">854 <div>855 <select data-name="lan">856 <option selected value>857 English858 </option>859 <option value="2">860 Français861 </option>862 <option value="3">863 Deutsch864 </option>865 <option value="4">866 Español867 </option>868 <option value="5">869 Nederlands870 </option>871 <option value="6">872 Português873 </option>874 <option value="7">875 Italiano876 </option>877 <option value="8">878 Svenska879 </option>880 <option value="9">881 日本語882 </option>883 <option value="10">884 中文885 </option>886 </select>887 </div>888 <div>889 <div>890 <label>891 <input data-name="uom" type="checkbox" value="2">892 <span>893 Metric894 </span>895 </label>896 </div>897 </div>898 <div>899 <div>900 <label>901 <input data-name="dm" type="checkbox" value="1">902 <span>903 Dark Mode904 </span>905 </label>906 </div>907 </div>908 <div id="pbox">909 <div>910 <label>911 <input checked data-name="npb" type="checkbox" value="1">912 <span>913 Pillarbox914 </span>915 </label>916 </div>917 </div>918 </div>919 </div>920 </div>921 </div>922 <div class="svg" id="bg">923 </div>924 </body>925</html>926