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="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths" lang="en" style>3 <!--<![endif]-->4 <head>5 <style>6 article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{ display:block}audio,canvas,picture,video{ display:inline-block; *display:inline; *zoom:1}audio:not([controls]){ display:none; height:0}[hidden]{ display:none}html{ font-size:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%}html,button,input,select,textarea{ font-family:sans-serif}body{ margin:0}a:focus{ outline:thin dotted}a:active,a:hover{ outline:0}h1{ font-size:2em; margin:0.67em 0}h2{ font-size:1.5em; margin:0.83em 0}h3{ font-size:1.17em; margin:1em 0}h4{ font-size:1em; margin:1.33em 0}h5{ font-size:0.83em; margin:1.67em 0}h6{ font-size:0.67em; margin:2.33em 0}abbr[title]{ border-bottom:1px dotted}b,strong{ font-weight:bold}blockquote{ margin:1em 40px}dfn{ font-style:italic}hr{ -moz-box-sizing:content-box; box-sizing:content-box; height:0}mark{ background:#ff0; color:#000}p,pre{ margin:1em 0}code,kbd,pre,samp{ font-family:monospace,serif; _font-family:'courier new',monospace; font-size:1em}pre{ white-space:pre; white-space:pre-wrap; word-wrap:break-word}q{ quotes:none}q:before,q:after{ content:''; content:none}small{ font-size:80%}sub,sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline}sup{ top:-0.5em}sub{ bottom:-0.25em}dl,menu,ol,ul{ margin:1em 0}dd{ margin:0 0 0 40px}menu,ol,ul{ padding:0 0 0 40px}nav ul,nav ol{ 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 #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em}legend{ border:0; padding:0; white-space:normal; *margin-left:-7px}button,input,select,textarea{ font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle}button,input{ line-height:normal}button,select{ text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{ -webkit-appearance:button; cursor:pointer; *overflow:visible}button[disabled],html input[disabled]{ cursor:default}input[type="checkbox"],input[type="radio"]{ box-sizing:border-box; padding:0; *height:13px; *width:13px}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,button,input,select,textarea{ color:#222}body{ font-size:1em; line-height:1.4}::-moz-selection{ background:#b3d4fc; text-shadow:none}::selection{ background:#b3d4fc; text-shadow:none}hr{ display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0}img{ vertical-align:middle}fieldset{ border:0; margin:0; padding:0}textarea{ resize:vertical}.chromeframe{ margin:0.2em 0; background:#ccc; color:#000; padding:0.2em 0}.ir{ background-color:transparent; border:0; overflow:hidden; *text-indent:-9999px}.ir:before{ content:""; display:block; width:0; height:150%}.hidden{ display:none !important; visibility:hidden}.visuallyhidden{ border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{ clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto}.invisible{ visibility:hidden}.clearfix:before,.clearfix:after{ content:""; display:table}.clearfix:after{ clear:both}.clearfix{ *zoom:1}@media only screen and (min-width:35em){ }@media print, (-o-min-device-pixel-ratio:5/4), (-webkit-min-device-pixel-ratio:1.25), (min-resolution:120dpi){ }@media print{ *{ background:transparent !important; color:#000 !important; box-shadow:none !important; text-shadow:none !important} a, a:visited{ text-decoration:underline} a[href]:after{ content:"("attr(href) ")"} abbr[title]:after{ content:"("attr(title) ")"} .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after{ content:""} pre, blockquote{ border:1px solid #999; page-break-inside:avoid} thead{ display:table-header-group} tr, img{ page-break-inside:avoid} img{ max-width:100% !important} @page{ margin:0.5cm} p, h2, h3{ orphans:3; widows:3} h2, h3{ page-break-after:avoid}}.section{ clear:both; padding:0px; margin:0px}.breaker{clear:both}.group:before,.group:after{ content:""; display:table}.group:after{ clear:both}.group{ zoom:1}.floatleft{ float:left}.floatright{ float:right}.col{ display:block; float:left; margin:1% 0 1% 1.6%}.col:first-child,.visuallyhidden:first-child+.col{ margin-left:0}@media only screen and (max-width:39em){ .col{ margin:1% 0 1% 0}}.span_12_of_12{ width:100%; margin-left:0}.span_11_of_12{ width:91.46%}.span_10_of_12{ width:83%}.span_9_of_12{ width:74.54%}.span_8_of_12{ width:66.08%}.span_7_of_12{ width:57.62%}.span_6_of_12{ width:49.16%}.span_5_of_12{ width:40.7%}.span_4_of_12{ width:32.24%}.span_3_of_12{ width:23.78%}.span_2_of_12{ width:15.32%}.span_1_of_12{ width:6.86%}.offset_12_of_12{ margin-left:100%}.col.offset_11_of_12{ margin-left:93.06%}.col.offset_10_of_12{ margin-left:84.06%}.col.offset_9_of_12{ margin-left:75.6%}.col.offset_8_of_12{ margin-left:67.14%}.col.offset_7_of_12{ margin-left:58.68%}.col.offset_6_of_12{ margin-left:50.22%}.col.offset_5_of_12{ margin-left:41.76%}.col.offset_4_of_12{ margin-left:33.3%}.col.offset_3_of_12{ margin-left:24.84}.col.offset_2_of_12{ margin-left:16.38%}.col.offset_1_of_12{ margin-left:7.92%}@media only screen and (max-width:39em){ .span_12_of_12{ width:100%} .span_11_of_12{ width:100%} .span_10_of_12{ width:100%} .span_9_of_12{ width:100%} .span_8_of_12{ width:100%} .span_7_of_12{ width:100%} .span_6_of_12{ width:100%} .span_5_of_12{ width:100%} .span_4_of_12{ width:100%} .span_3_of_12{ width:100%} .span_2_of_12{ width:100%} .span_1_of_12{ width:100%} .col.offset_12_of_12, .col.offset_11_of_12, .col.offset_10_of_12, .col.offset_9_of_12, .col.offset_8_of_12, .col.offset_7_of_12, .col.offset_6_of_12, .col.offset_5_of_12, .col.offset_4_of_12, .col.offset_3_of_12, .col.offset_2_of_12, .col.offset_1_of_12{ margin:1% 0 1% 0}}.skip.visuallyhidden{ top:0.25em; left:1em}.skip.visuallyhidden:focus{ overflow:visible; clip:auto; width:auto; height:auto; margin:0}.breadcrumbs.inline::before{ content:'You are here:'; padding-right:0.5em}.breadcrumbs.inline{ margin:0.5em 1.25em; padding:0 1.25em; font-size:0.8em; border:1px dashed #ccc}.breadcrumbs.inline li{ margin:0; padding:0}address,.adr{ font-style:italic; padding-left:1em}address .adr,.adr address{ padding-left:none}body{ padding:0; background-color:#fcfcfc; color:#444; font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12pt; line-height:1.5em}.lead+.col,.lead+.col >:first-child{ margin-top:0}main >aside >ul{ padding-right:5%}blockquote cite{ display:block; text-align:right}blockquote cite::before{ content:' \2014 '}h1,h2,h3,h4,h5,h6,header,footer{ font-family:"Neuton",Georgia,Times,"Times New Roman",serif; font-size:1.1em}h1{ font-size:2em}h2{ font-size:1.5em}h3,h4{ font-size:1.25em; margin-bottom:1em}li{ margin:0.5em 0}header[role=banner],footer[role=contentinfo]{ background-color:#f4f4f4; box-shadow:-1px 0 1px #000; border-top:1px solid #fff; border-bottom:1px solid #fff}picture,img{ /* width:100%; */ max-width:100%;height:auto}.header a picture,.header a img { max-height: 10em;width: auto}nav { padding-top: 1.5em}.banner picture,.banner img{ width:100%; box-shadow:-1px 0 1px #000; border-top:1px solid #fff}.map >div{ width:100% !important}figure{ width:100%; margin:1em 0}figure:last-child{ margin-bottom:0}figcaption{ margin-top:0.75em; text-align:center}.adr span.locality::after{ content:','}.adr span.type::after{ content:':'}.padding-side{ padding:0 1em}h2{ margin:0.5em 0 1em 0; color:#666; font-size:; text-transform:capitalize}h3{ margin-top:2em; border-bottom:1px solid rgba(0,0,0,0.1)}h2+section h3::first-child{ margin-top:1em}h2+div.span_12_of_12:first-child,section h3+div.span_12_of_12 >:first-child{ margin-top:0}main >div.col >section,main >div.col >div.col{ margin:0 auto; max-width:60em}h2+dl,h3+dl,h4+dl{ margin-top:0}dt{ margin:1em 0 0 0.5em; font-style:italic}div.col >section+section{ margin-top:4em}section.event+section.event{ margin-top: 1.5em; padding-top: 1.5em; border-top: 1px solid #eee}dd{ margin-top:1em}dd+dt{ margin-top:2em}table,th,td{ border-collapse:collapse; border:1px solid #eee}th,td{ padding:1em 0.5em; vertical-align:top}td:first-child{ margin-top:0}td:last-child{ margin-bottom:0}table+table{ margin-top:2em}table caption{ margin:0.5em 0; font-weight:bold; text-align:left}.lead{ margin-bottom:1em; font-size:1.5em; font-weight:200; line-height:1.75em}a{ color:#1177a8; text-decoration:underline}a:hover,a:focus{ color:#005580}header[role=banner] a,main >aside a,footer[role=contentinfo]{ text-decoration:none}.muted{ color:#999}a.muted:hover,a.muted:focus{ color:#808080}.text-warning{ color:#c09853}a.text-warning:hover,a.text-warning:focus{ color:#a47e3c}.text-error{ color:#b94a48}a.text-error:hover,a.text-error:focus{ color:#953b39}.text-info{ color:#3a87ad}a.text-info:hover,a.text-info:focus{ color:#2d6987}.text-success{ color:#468847}a.text-success:hover,a.text-success:focus{ color:#356635}.text-left{ text-align:left}.text-right{ text-align:right}.text-center{ text-align:center}ul.unstyled,ol.unstyled{ margin-left:0; list-style:none}ul.inline,ol.inline{ margin-top:0; margin-left:0; padding:0; list-style:none}ul.inline >li,ol.inline >li{ display:inline-block; padding-right:0.5em; padding-left:0.5em}ul.inline >li.col,ol.inline >li.col{ padding-right:0; padding-left:0}hr{ margin:20px 0; border:0; border-top:1px solid #eee; border-bottom:1px solid #fff}abbr[title],abbr[data-original-title]{ cursor:help; border-bottom:1px dotted #999}abbr.initialism{ font-size:90%; text-transform:uppercase}blockquote{ padding:0 0 0 1em; margin:0 0 1em; border-left:0.33em solid #eee}aside blockquote p{ margin-bottom:0; font-size:1.25em; font-weight:300; line-height:1.25em}blockquote small{ display:block; line-height:1.25em; color:#999}blockquote small:before{ content:'\2014 \00A0'}blockquote.pull-right{ float:right; padding-right:1em; padding-left:0; border-right:0.33em solid #eee; border-left:0}blockquote.pull-right p,blockquote.pull-right small{ text-align:right}blockquote.pull-right small:before{ content:''}blockquote.pull-right small:after{ content:'\00A0 \2014'}[class^="icon-"],[class*="icon-"]{ display:inline-block; width:14px; height:14px; margin-top:1px; *margin-right:.3em; line-height:14px; vertical-align:text-top; background-image:url("../img/glyphicons-halflings.png"); background-position:14px 14px; background-repeat:no-repeat}.icon-white,.nav-pills >.active >a >[class^="icon-"],.nav-pills >.active >a >[class*="icon-"],.nav-list >.active >a >[class^="icon-"],.nav-list >.active >a >[class*="icon-"],.navbar-inverse .nav >.active >a >[class^="icon-"],.navbar-inverse .nav >.active >a >[class*="icon-"],.dropdown-menu >li >a:hover >[class^="icon-"],.dropdown-menu >li >a:focus >[class^="icon-"],.dropdown-menu >li >a:hover >[class*="icon-"],.dropdown-menu >li >a:focus >[class*="icon-"],.dropdown-menu >.active >a >[class^="icon-"],.dropdown-menu >.active >a >[class*="icon-"],.dropdown-submenu:hover >a >[class^="icon-"],.dropdown-submenu:focus >a >[class^="icon-"],.dropdown-submenu:hover >a >[class*="icon-"],.dropdown-submenu:focus >a >[class*="icon-"]{ background-image:url("../img/glyphicons-halflings-white.png")}.icon-glass{ background-position:0 0}.icon-music{ background-position:-24px 0}.icon-search{ background-position:-48px 0}.icon-envelope{ background-position:-72px 0}.icon-heart{ background-position:-96px 0}.icon-star{ background-position:-120px 0}.icon-star-empty{ background-position:-144px 0}.icon-user{ background-position:-168px 0}.icon-film{ background-position:-192px 0}.icon-th-large{ background-position:-216px 0}.icon-th{ background-position:-240px 0}.icon-th-list{ background-position:-264px 0}.icon-ok{ background-position:-288px 0}.icon-remove{ background-position:-312px 0}.icon-zoom-in{ background-position:-336px 0}.icon-zoom-out{ background-position:-360px 0}.icon-off{ background-position:-384px 0}.icon-signal{ background-position:-408px 0}.icon-cog{ background-position:-432px 0}.icon-trash{ background-position:-456px 0}.icon-home{ background-position:0 -24px}.icon-file{ background-position:-24px -24px}.icon-time{ background-position:-48px -24px}.icon-road{ background-position:-72px -24px}.icon-download-alt{ background-position:-96px -24px}.icon-download{ background-position:-120px -24px}.icon-upload{ background-position:-144px -24px}.icon-inbox{ background-position:-168px -24px}.icon-play-circle{ background-position:-192px -24px}.icon-repeat{ background-position:-216px -24px}.icon-refresh{ background-position:-240px -24px}.icon-list-alt{ background-position:-264px -24px}.icon-lock{ background-position:-287px -24px}.icon-flag{ background-position:-312px -24px}.icon-headphones{ background-position:-336px -24px}.icon-volume-off{ background-position:-360px -24px}.icon-volume-down{ background-position:-384px -24px}.icon-volume-up{ background-position:-408px -24px}.icon-qrcode{ background-position:-432px -24px}.icon-barcode{ background-position:-456px -24px}.icon-tag{ background-position:0 -48px}.icon-tags{ background-position:-25px -48px}.icon-book{ background-position:-48px -48px}.icon-bookmark{ background-position:-72px -48px}.icon-print{ background-position:-96px -48px}.icon-camera{ background-position:-120px -48px}.icon-font{ background-position:-144px -48px}.icon-bold{ background-position:-167px -48px}.icon-italic{ background-position:-192px -48px}.icon-text-height{ background-position:-216px -48px}.icon-text-width{ background-position:-240px -48px}.icon-align-left{ background-position:-264px -48px}.icon-align-center{ background-position:-288px -48px}.icon-align-right{ background-position:-312px -48px}.icon-align-justify{ background-position:-336px -48px}.icon-list{ background-position:-360px -48px}.icon-indent-left{ background-position:-384px -48px}.icon-indent-right{ background-position:-408px -48px}.icon-facetime-video{ background-position:-432px -48px}.icon-picture{ background-position:-456px -48px}.icon-pencil{ background-position:0 -72px}.icon-map-marker{ background-position:-24px -72px}.icon-adjust{ background-position:-48px -72px}.icon-tint{ background-position:-72px -72px}.icon-edit{ background-position:-96px -72px}.icon-share{ background-position:-120px -72px}.icon-check{ background-position:-144px -72px}.icon-move{ background-position:-168px -72px}.icon-step-backward{ background-position:-192px -72px}.icon-fast-backward{ background-position:-216px -72px}.icon-backward{ background-position:-240px -72px}.icon-play{ background-position:-264px -72px}.icon-pause{ background-position:-288px -72px}.icon-stop{ background-position:-312px -72px}.icon-forward{ background-position:-336px -72px}.icon-fast-forward{ background-position:-360px -72px}.icon-step-forward{ background-position:-384px -72px}.icon-eject{ background-position:-408px -72px}.icon-chevron-left{ background-position:-432px -72px}.icon-chevron-right{ background-position:-456px -72px}.icon-plus-sign{ background-position:0 -96px}.icon-minus-sign{ background-position:-24px -96px}.icon-remove-sign{ background-position:-48px -96px}.icon-ok-sign{ background-position:-72px -96px}.icon-question-sign{ background-position:-96px -96px}.icon-info-sign{ background-position:-120px -96px}.icon-screenshot{ background-position:-144px -96px}.icon-remove-circle{ background-position:-168px -96px}.icon-ok-circle{ background-position:-192px -96px}.icon-ban-circle{ background-position:-216px -96px}.icon-arrow-left{ background-position:-240px -96px}.icon-arrow-right{ background-position:-264px -96px}.icon-arrow-up{ background-position:-289px -96px}.icon-arrow-down{ background-position:-312px -96px}.icon-share-alt{ background-position:-336px -96px}.icon-resize-full{ background-position:-360px -96px}.icon-resize-small{ background-position:-384px -96px}.icon-plus{ background-position:-408px -96px}.icon-minus{ background-position:-433px -96px}.icon-asterisk{ background-position:-456px -96px}.icon-exclamation-sign{ background-position:0 -120px}.icon-gift{ background-position:-24px -120px}.icon-leaf{ background-position:-48px -120px}.icon-fire{ background-position:-72px -120px}.icon-eye-open{ background-position:-96px -120px}.icon-eye-close{ background-position:-120px -120px}.icon-warning-sign{ background-position:-144px -120px}.icon-plane{ background-position:-168px -120px}.icon-calendar{ background-position:-192px -120px}.icon-random{ width:16px; background-position:-216px -120px}.icon-comment{ background-position:-240px -120px}.icon-magnet{ background-position:-264px -120px}.icon-chevron-up{ background-position:-288px -120px}.icon-chevron-down{ background-position:-313px -119px}.icon-retweet{ background-position:-336px -120px}.icon-shopping-cart{ background-position:-360px -120px}.icon-folder-close{ width:16px; background-position:-384px -120px}.icon-folder-open{ width:16px; background-position:-408px -120px}.icon-resize-vertical{ background-position:-432px -119px}.icon-resize-horizontal{ background-position:-456px -118px}.icon-hdd{ background-position:0 -144px}.icon-bullhorn{ background-position:-24px -144px}.icon-bell{ background-position:-48px -144px}.icon-certificate{ background-position:-72px -144px}.icon-thumbs-up{ background-position:-96px -144px}.icon-thumbs-down{ background-position:-120px -144px}.icon-hand-right{ background-position:-144px -144px}.icon-hand-left{ background-position:-168px -144px}.icon-hand-up{ background-position:-192px -144px}.icon-hand-down{ background-position:-216px -144px}.icon-circle-arrow-right{ background-position:-240px -144px}.icon-circle-arrow-left{ background-position:-264px -144px}.icon-circle-arrow-up{ background-position:-288px -144px}.icon-circle-arrow-down{ background-position:-312px -144px}.icon-globe{ background-position:-336px -144px}.icon-wrench{ background-position:-360px -144px}.icon-tasks{ background-position:-384px -144px}.icon-filter{ background-position:-408px -144px}.icon-briefcase{ background-position:-432px -144px}.icon-fullscreen{ background-position:-456px -144px}#my-test-result-came-back-positive-what-does-this-mean picture{ max-width:none;width: 100%}aside li.selected{ list-style-image:url(../img/193-location-arrow.png)}aside li.selected li{ list-style-image:none}main >aside.span_4_of_12{ background:#f1f6f9; background-color:rgba(51,153,202,0.05)}main >aside h2,main >aside dl{ padding:0 0.5em}main .hentry h2{ margin-bottom:0}main ul.imagelist{ list-style-type: none;width: 100%;margin: 1em;padding: 0}main ul.imagelist li{display: inline-block;margin: 0.5em;list-style-type: none}#home main >.col:first-child{ margin-right:0}header[role=banner] .banner{ margin-top:1em}header[role=banner] ul{ margin-bottom:0}header[role=banner] li.span_4_of_12{ min-height:1em; margin-top:0; padding:0 0 0.25em 0; line-height:1em}header[role=banner] ul li.span_4_of_12 a{ display:block; padding:0.25em; background-color:#fcfcfc}header[role=banner] ul li.span_4_of_12.selected a,header[role=banner] ul li.span_4_of_12.ancestor a{ border:1px dashed #bbb; background-color:#fff; box-shadow:0 0 3px #ddd}div.country-name+div.tel{ margin-top:1em}header[role=banner] >div.padding-side >.span_4_of_12,header[role=banner].padding-side >.span_4_of_12{ line-height:6.412em; text-align:center}header[role=banner] ul li.span_4_of_12 a{ padding-left:2.25em; background-position:0.7em 0.25em; background-repeat:no-repeat; background-size:auto 0.9em}h1,h2,h3,h4,h5,h6{ text-align:center}main >aside{ transition:height 50ms}main >aside dl{ margin-bottom:2em}main >aside dt{ margin:0; padding:0; font-size:0.8em; text-transform:uppercase}main >aside dd{ margin:0 0 1em 0}footer[role=contentinfo] nav,footer[role=contentinfo] small{ display:block; border-bottom:1px solid #ccc}footer[role=contentinfo] nav >ul >li:first-child{ display:none}footer[role=contentinfo] nav >ul >li:nth-child(2){ margin-left:0}footer[role=contentinfo] nav ul li{ font-variant:small-caps; text-transform:lowercase}footer[role=contentinfo] nav li.col li.col{ float:none; width:100%; margin:0.25em 0; font-variant:normal; text-transform:none}footer[role=contentinfo] section{ text-align:center}footer[role=contentinfo] small{ vertical-align:middle}@media (min-width:39em){ header[role=banner] ul:first-child li.span_4_of_12{ width:49.16%} header[role=banner] nav ul:nth-child(2) li a{ min-height:2em} h1,h2,h3,h4,h5,h6{ text-align:left} main picture{ float:right; max-width:50%} main figure.gallery { margin-top: 0; text-align: center; } main figure.gallery picture { float: none; max-width: 100%} main figure.gallery figcaption cite { display: block; }}@media (min-width:39em) and (max-width:59em){ header[role=banner].padding-side >.col, header[role=banner] >div.padding-side >.col, main >.col{ clear:both; width:98%; margin:1% 0; padding:0 1%}}@media (min-width:52.5em){ header[role=banner] nav ul:nth-child(2) li a{ min-height:0}}@media (min-width:59em){ #home main >.col{ float:right; margin:1% 1.6% 1% 0}}@media (min-width:59em) and (max-width:75em){ header[role=banner] nav ul:nth-child(2) li a{ min-height:2em}}.lt-ie9 img,.lt-ie9 iframe,.lt-ie9 figure{ display:block !important; width:auto !important; height:auto !important; margin:1em auto !important; text-align:center !important; border:none !important}.lt-ie9 .col{ margin:1em !important; float:none !important; display:block !important; width:100% !important; text-align:left !important}.lt-ie9 h1,.lt-ie9 h2,.lt-ie9 h3,.lt-ie9 h4,.lt-ie9 h5,.lt-ie9 h6{ float:none !important; display:block !important; width:100% !important; text-align:left !important; border-bottom:1px solid #222 !important; margin:1em auto !important}.lt-ie9 ul.inline{ display:block !important; margin:1em auto !important; text-align:center !important}.lt-ie9 ul.inline li{ display:inline !important; padding:0.25em 1em !important; text-align:center !important; margin:0 !important; width:auto !important}.lt-ie9 ul.inline li a{ display: inline !important}.lt-ie9 body,.lt-ie9 header,.lt-ie9 main,.lt-ie9 main aside,.lt-ie9 footer{ display:block !important; background-color:#fff !important; padding:1em !important; margin:1em auto !important}.lt-ie9 body{ margin: 1em !important}.lt-ie9 li.col{ list-style-type:none !important}.lt-ie9 h2{ position:relative !important; display:block !important; width:auto !important; height:auto !important; clip:auto !important; visibility:visible !important}7 8 9 10@font-face {11 font-family: 'Neuton';12 font-style: normal;13 font-weight: 300;14 src: url(http://fonts.gstatic.com/s/neuton/v22/UMBQrPtMoH62xUZKZKovcwr9.ttf) format('truetype');15}16@font-face {17 font-family: 'Neuton';18 font-style: normal;19 font-weight: 400;20 src: url(http://fonts.gstatic.com/s/neuton/v22/UMBTrPtMoH62xUZCwYg_.ttf) format('truetype');21}22@font-face {23 font-family: 'Open Sans';24 font-style: italic;25 font-weight: 400;26 font-stretch: normal;27 src: url(http://fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkWV4exQ.ttf) format('truetype');28}29@font-face {30 font-family: 'Open Sans';31 font-style: italic;32 font-weight: 700;33 font-stretch: normal;34 src: url(http://fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjWV4exQ.ttf) format('truetype');35}36@font-face {37 font-family: 'Open Sans';38 font-style: normal;39 font-weight: 400;40 font-stretch: normal;41 src: url(http://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVc.ttf) format('truetype');42}43@font-face {44 font-family: 'Open Sans';45 font-style: normal;46 font-weight: 700;47 font-stretch: normal;48 src: url(http://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4uaVc.ttf) format('truetype');49}50 </style>51 <meta charset="utf-8">52 <title>53 Healthy sexuality and pregnancy54 </title>55 <meta content="The Dalglish Family 22q Clinic provides patients with care from healthcare experts from many specialties.56" name="description">57 <meta content="width=device-width, initial-scale=1.0" name="viewport">58 <!--[if gt IE 6]><!-->59 <!--<![endif]-->60 </head>61 <body>62 <header class="section header group padding-side" id="top" role="banner">63 <a class="skip visuallyhidden">64 Skip to content65 </a>66 <div class="col span_4_of_12">67 <a>68 <picture alt="Logo">69 <!-- <source media="(min-width: 75em)" /> -->70 <source media="(min-width: 75em)">71 <!-- <source media="(min-width: 59em)" /> -->72 <source media="(min-width: 59em)">73 <!-- <source /> -->74 <source>75 <img alt="Logo" src="rick.jpg">76 </picture>77 <!--[if lt IE 9]><img src="rick.jpg" alt="Logo" ><![endif]-->78 </a>79 </div>80 <h1 class="visuallyhidden">81 The Dalglish Family 22q Clinic82 </h1>83 <nav class="col span_8_of_12" role="navigation">84 <ul class="inline clearfix">85 <li class="col span_4_of_12">86 <a>87 Home88 </a>89 </li>90 <li class="col span_4_of_12">91 <a>92 22q11.2DS Quick Facts93 </a>94 </li>95 </ul>96 <ul class="inline clearfix">97 <li class="col span_4_of_12 ancestor">98 <a>99 Info for Patients and Families100 </a>101 </li>102 <li class="col span_4_of_12">103 <a>104 Info for Medical Professionals105 </a>106 </li>107 <li class="col span_4_of_12">108 <a>109 Info for Educators110 </a>111 </li>112 </ul>113 <ul class="inline clearfix">114 <li class="col span_4_of_12">115 <a>116 Info for Police Officers117 </a>118 </li>119 <li class="col span_4_of_12">120 <a>121 About the Clinic122 </a>123 </li>124 <li class="col span_4_of_12">125 <a>126 Our Research127 </a>128 </li>129 </ul>130 <ul class="inline clearfix">131 <li class="col span_4_of_12">132 <a>133 Same Name Campaign134 </a>135 </li>136 <li class="col span_4_of_12">137 <a>138 Resources139 </a>140 </li>141 <li class="col span_4_of_12">142 <a>143 Donate144 </a>145 </li>146 </ul>147 </nav>148 </header>149 <main class="section group padding-side" id="main" role="main">150 <aside class="col span_4_of_12" role="complementary">151 <h2>152 In this section…153 </h2>154 <ul>155 <li>156 <a>157 Info for Patients and Families158 </a>159 </li>160 <li>161 <a>162 COVID-19 Information163 </a>164 </li>165 <li>166 <a>167 What is 22q? Genetics Q&A168 </a>169 </li>170 <li>171 <a>172 How is 22q11.2 Deletion Syndrome diagnosed?173 </a>174 </li>175 </ul>176 </aside>177 <div class="col span_8_of_12">178 <h2>179 Healthy sexuality and pregnancy180 </h2>181 <div class="col span_12_of_12">182 </div>183 <section id="websites-on-healthy-sexuality" name="websites-on-healthy-sexuality">184 <h3 class="col span_12_of_12">185 Websites on Healthy Sexuality186 </h3>187 <div class="col span_12_of_12">188 <p>189 <a target="_blank">190 www.sexandu.ca191 </a>192 </p>193 <p>194 This website offers information on sexual health for teens, adults, parents, teachers and health professionals.195 </p>196 <p>197 <a target="_blank">198 www.teenhealthsource.com199 </a>200 </p>201 <p>202 This website is a way for young adults to learn more about sexual health and relationships.203 </p>204 </div>205 <p class="text-right">206 [207 <a>208 Return to top209 </a>210 ]211 </p>212 </section>213 <section id="websites-on-pregnancy" name="websites-on-pregnancy">214 <h3 class="col span_12_of_12">215 Websites on Pregnancy216 </h3>217 <div class="col span_12_of_12">218 <p>219 <a target="_blank">220 www.toronto.ca/health/pregnancy221 </a>222 </p>223 <p>224 The Pregnancy section of Toronto Public Health’s website can answer many health-related questions for pregnant women.225 </p>226 <p>227 <a target="_blank">228 www.marchofdimes.com229 </a>230 </p>231 <p>232 Please see the Pregnancy and Newborn section. The March of Dimes is an excellent source of information for women who are planning a pregnancy or are currently pregnant.233 </p>234 </div>235 <p class="text-right">236 [237 <a>238 Return to top239 </a>240 ]241 </p>242 </section>243 </div>244 </main>245 <footer class="section group padding-side" role="contentinfo">246 <section>247 <h2 class="visuallyhidden">248 Copyright249 </h2>250 <small class="section group">251 <span class="col span_4_of_12 offset_2_of_12">252 © 2012–2023 The Dalglish Family 22q Clinic. All rights reserved.253 <br>254 The clinic is supported through The W. Garfield Weston Foundation in association with the UHN Health Network.255 </span>256 <span class="col span_4_of_12">257 <picture alt="Logo for University Health Network / Toronto General Hospital">258 <!-- <source media="(min-width: 75em)" /> -->259 <source media="(min-width: 75em)">260 <!-- <source media="(min-width: 59em)" /> -->261 <source media="(min-width: 59em)">262 <!-- <source /> -->263 <source>264 <img alt="Logo for University Health Network / Toronto General Hospital" src="rick.jpg">265 </picture>266 <!--[if lt IE 9]><img src="rick.jpg" alt="Logo for University Health Network / Toronto General Hospital" ><![endif]-->267 </span>268 </small>269 </section>270 <section>271 <h2 class="hidden">272 Contact us:273 </h2>274 <ul class="inline group section">275 <li class="email col span_2_of_12 offset_2_of_12">276 <a>277 [EMAIL REDACTED]278 </a>279 </li>280 <li class="tel col span_2_of_12">281 <span class="type value-title" title="Voice">282 Phone283 </span>284 <span class="value">285 [PHONE REDACTED]286 </span>287 </li>288 <li class="tel col span_2_of_12">289 <span class="type">290 Fax291 </span>292 <span class="value">293 [PHONE REDACTED]294 </span>295 </li>296 <li class="url col span_2_of_12">297 <a>298 https://22q.ca/299 </a>300 </li>301 </ul>302 <small class="“section" group”>303 <center>304 The Dalglish Family 22q Clinic305 <br>306 [ADDRESS REDACTED]307 <br>308 [ADDRESS REDACTED]309 </center>310 </small>311 </section>312 </footer>313 </body>314</html>315