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 /* FONTS */6/* http://www.digitale-chancen.org/globalcustoms/fonts/open_sans/license.txt */7/* normal */8@font-face {9 font-family:'Open Sans';10 font-style: normal;11 font-weight: 400;12 src: local('Open Sans'), local('OpenSans'),13 url('/globalcustoms/fonts/open_sans/OpenSans-Regular-webfont.eot') format('eot'),14 url('/globalcustoms/fonts/open_sans/OpenSans-Regular-webfont.ttf') format('truetype'), 15 url('/globalcustoms/fonts/open_sans/OpenSans-Regular-webfont.woff') format('woff');16}17 18/* bold */19@font-face {20 font-family:'Open Sans';21 font-style: normal;22 font-weight: 700;23 src: local('Open Sans Bold'), local('OpenSans-Bold'),24 url('/globalcustoms/fonts/open_sans/OpenSans-Bold-webfont.eot') format('eot'),25 url('/globalcustoms/fonts/open_sans/OpenSans-Bold-webfont.ttf') format('truetype'), 26 url('/globalcustoms/fonts/open_sans/OpenSans-Bold-webfont.woff') format('woff');27}28 29/* normal italic */30@font-face {31 font-family:'Open Sans';32 font-style: italic;33 font-weight: 400;34 src: local('Open Sans Italic'), local('OpenSans-Italic'),35 url('/globalcustoms/fonts/open_sans/OpenSans-Italic-webfont.eot') format('eot'),36 url('/globalcustoms/fonts/open_sans/OpenSans-Italic-webfont.ttf') format('truetype'), 37 url('/globalcustoms/fonts/open_sans/OpenSans-Italic-webfont.woff') format('woff');38}39 40/* bold italic */41@font-face {42 font-family:'Open Sans';43 font-style: italic;44 font-weight: 700;45 src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), 46 url('/globalcustoms/fonts/open_sans/OpenSans-BoldItalic-webfont.eot') format('eot'),47 url('/globalcustoms/fonts/open_sans/OpenSans-BoldItalic-webfont.ttf') format('truetype'), 48 url('/globalcustoms/fonts/open_sans/OpenSans-BoldItalic-webfont.woff') format('woff');49}50 51@font-face {52 font-family: 'Patua One';53 font-style: normal;54 font-weight: 400;55 src: local('Patua One'), local('PatuaOne-Regular'), 56 url('/globalcustoms/fonts/patuaOne/PatuaOne-Regular.eot') format('eot'),57 url('/globalcustoms/fonts/patuaOne/PatuaOne-Regular.ttf') format('truetype'), 58 url('/globalcustoms/fonts/patuaOne/PatuaOne-Regular.woff') format('woff');59 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;60}61 62/*63@font-face {64 font-family: 'Patua One';65 font-style: normal;66 font-weight: 400;67 src: local('Patua One'), local('PatuaOne-Regular'), url(https://fonts.gstatic.com/s/patuaone/v6/yAXhog6uK3bd3OwBILv_SFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');68}69*/70 71 72 73*, *:before, *:after {margin:0;padding:0;box-sizing:border-box;}74html, body, #wrapper {width:100%;}75body > #wrapper {float:right;}76 77#wrapper {78position:relative;79height:auto !important;80min-height:100%;81margin:0px auto -320px;82/*83background: #D5D5D5;84background: -webkit-linear-gradient(#D5D5D5, #fff);85background: -o-linear-gradient(#D5D5D5, #fff);86background: -moz-linear-gradient(#D5D5D5, #fff);87*/88background: linear-gradient(#D5D5D5, #fff);89}90 91div#minheight {92height:320px;93clear:both;94}95 96main {display: block;}97 98#main {99 background-color:#fff;100 width:1024px;101 -moz-hyphens: none;102 -o-hyphens: none;103 -webkit-hyphens: none;104 -ms-hyphens: none;105 hyphens: none;106 margin:auto;107 }108 109.clearfix:after {110 content:".";111 display:block;112 height:1px;113 clear:both;114 visibility:hidden;115 overflow:hidden;116}117 118* html .clearfix { height:1%;}119 120body {121 font-family:"Open Sans";122 font-style:normal;123 font-variant:normal;124 font-weight:400;125 line-height:1.5;126 }127 128h1, h2, h3, h4, p, ul {margin-bottom:1em;}129h1, legend {font-size:1.2em;}130h1 a {text-decoration:none;color:#000;}131h2, h3 {font-size:1em;}132ul li, ol li {margin-left:30px;padding:0;}133ol, ul {margin-bottom:1em;}134label {display:inline-block;width:10em;vertical-align:top;}135fieldset {border:0;}136legend {font-weight:bold;padding-bottom:1em;}137.formalign {margin-left:13.3em;}138.zwischenabstand {margin-left:1em;}139.clearer {clear:both;height:1px;line-height:1px;}140 141img {border:0;max-width:720px;}142button, .clickable {cursor:pointer;}143input, textarea {font-family:"Open Sans";font-size:0.9em;}144input:focus, a:focus {/* border:1px solid #5686A7; */cursor:pointer;}145 146a {color:#17375E;}147a:hover {color:#000;border-bottom:2px solid #5686A7;cursor:pointer;text-decoration:none;}148a.hlink {position: absolute;top: -1000px;left: -1000px;}149a.hlink:focus,150a.hlink:active {151 position: absolute;152 top: auto;153 left: auto;154 z-index: 10001;155 background-color: #ffffff;156 padding: 3px;157 width: auto;158 border: 1px solid #17375E;159 font-size: 12px;160 font-weight: bold;161}162 163.nospace {margin-bottom:0;}164.brmobile, .brmobile2 {visibility:hidden;display:none;}165.ndcleft {float:left;display:inline;}166.ndccenter {text-align:center;}167.ndcright {float:right;display:inline;}168 169.errorflag {170 color:#B6001E;171 background-color:#FDF3F4;172 padding:10px;173 border:1px solid #B6001E;174 font-size:0.875em;175 margin-bottom:2em;176 width:87.5%;177 font-weight:bold;178}179 180.redflag {border:2px solid #B6001E !important;padding:2px;}181 182.greenflag {183 color:#000;184 background-color:#ccffcc;185 padding:10px;186 border:1px solid #00b300;187 font-size:0.875em;188 margin-bottom:2em;189 width:79%;190}191.mbutton {background-color:#fff;color:#000;padding:8px;font-weight:bold;}192button.border_tuerkis:hover, button.border_tuerkis:focus {background-color:#17375E;color:#fff;}193.fakebutton {border:0;background-color:#fff;font-family: "Open Sans"}194.fakebutton:hover, .fakebutton:focus {/*text-decoration:underline;*/border-bottom: 2px solid #5686A7; cursor: pointer;}195 196.border_tuerkis {border:2px solid #17375E;}197.bgtuerkis {background-color:#5686A7;}198 199/* Navigationsleiste oben */200#header {border-bottom:5px solid #5686A7;width:1024px;z-index:98;height:140px;position:fixed;top:0px;background-color:#fff;}201#header.nofix {border:0;position:relative;}202#content.nofix {margin-top:0;}203#logo {float:left;position:relative;top:30px;left:17px;}204#logo img {height:100px;width:211px;}205#content {margin-top:140px;}206#iconbar {margin-top:21px;padding-left:575px;float:left;}207#iconbar a {margin-right:10px;color:#434343;font-weight:bold;}208 209#cookieBar {210 border:1px solid black;211 font-size:0.8em;212 background-color:#f5f5f5;213 border: 1px solid #ddd;214 padding:5px 15px 0 15px;215 min-height: 3em;216 position:fixed;217 z-index:99;218 right:0;219 left:0;220 }221 222#cookieBar p {223 color:#555;224 margin-bottom:0.5em;225 }226 227#cBar2 {margin:auto;max-width:960px;}228#cBar2 a {color:#555;font-size:0.9em;}229 230/* Breadcrumb */231#breadcrumb {list-style-type:none;margin:20px 0 2em 0;color:#17375E;font-size:0.8em;padding:0;}232#breadcrumb a {color:#17375E;text-decoration:none;}233#breadcrumb li {display:inline-block;margin:0;padding-right:10px;vertical-align:middle;}234 235/* Navigation oben */236#navigation {vertical-align:bottom;}237#navigation a {font-weight:bold;color:#000;text-decoration:none;}238#navigation ul {list-style-type:none;padding:80px 0 0 250px;}239#navigation ul li {display:inline-block;margin-right:10px;}240 241#bluebox1, #bluebox2, #bluebox3, #bluebox4, #bluebox5 {background-color:#5686A7;visibility:hidden;display:inline-block;width:15px;height:15px;vertical-align:middle;margin-right:10px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}242#ntopic1.navon #bluebox1, #ntopic2.navon #bluebox2, #ntopic3.navon #bluebox3, #ntopic4.navon #bluebox4, #ntopic5.navon #bluebox5 {visibility:visible;}243 244#pheader {margin:10px 0 1em 0;height:55px;width:100%;}245#pheader h1 {color:#fff;font-weight:bold;text-align:center;line-height:55px;}246 247/* Startseite Kopfteil */248/* Neu MR */249#bigheader {height:330px;margin:0 0 2em 0;width:100%;}250.responsivebig { width: 100%;251 max-width: 580px;252 height: auto;}253 254/* alt */255/* #bigheadertext {256 position:absolute;257 z-index:1;258 overflow:hidden;259 margin: 25px 0 0 50px;260 background-color:#fff;261 width:280px;262 height:280px;263 color:#000;264 font-weight:bold;265 border-radius: 230px;266 padding:70px 40px 40px 50px;267 } */268/* neu */269#bigheadertext {270 position:relative;271 text-align: left272 z-index:1;273 overflow:hidden;274 margin: -110px auto;275 background:#fff 0% 0% no-repeat;276 opacity: 0.85;277 width:100%;278 height:32%;279 color:#000;280 font-weight:bold;281 padding: 1.5rem 1rem;282 }283 284 285#bigpic {margin:auto;width:580px;height:100%;overflow:hidden;z-index:0;}286#bhtext2, #bhtext3, #bhtext4, #bp2, #bp3, #bp4, #bp5 {display:none;}287#bigheadertext p {margin-bottom:0;}288 289#bigleiste {z-index:1;position:relative;width:90px;margin:-50px auto;height:35px;text-align: center;}290 291 292#playerbar {box-sizing:border-box;/*border:1px solid black;padding:0 10px 0 10px;*/ margin: 5px auto;height:35px;width:90px;/* background-color:#5686A7; */}293.poeppel {294 display: inline-block;295 width: 9px;296 height: 9px;297 margin: 0;298 text-indent: -999px;299 cursor: pointer;300 background-color: #000;301 background-color: rgba(0,0,0,0);302 border: 1px solid #000;303 border-radius: 9px;304 305}306 307.poeppel:active {background-color: #000;}308.poeppel_active {background-color: rgba(0,0,0) /* rgba(255,255,255,255)*/;}309#bp1 img,#bp2 img,#bp3 img,#bp4 img,#bp5 img {object-fit:cover;}310 311#navleiste {margin:1em 1em 0 0;background-color:#fff;width:25%;float:right;}312#navleiste ul {color:#5686A7;}313#navleiste ul li, #navleiste h2, #navleiste p {font-size:0.8em;line-height:1.8em;}314#navleiste h2 {margin-bottom:0.5em;}315.sform button, .sform2 button {line-height:1em;}316.sform2 input {line-height:2em;width:74%;}317.sform input {line-height:2em;}318#infobox {display:none;}319 320.leftpage {float:left;width:69%;padding-left:20px;}321#fullpage {width:70%;min-height:600px;padding-left:20px;}322#fullpage2 {width:900px;min-height:600px;padding-left:20px;}323#fullpage3 {width:100%;min-height:600px;padding-left:20px;}324 325.partpage {width:100%;}326.rightlist {float:right;width:200px;}327.rightlist img {max-width:200px;}328.leftlist {float:left;max-width:72%;}329 330/* Listen im Content */331.contlist {margin-bottom:2em;}332.contlist dt {float: left;font-weight:bold;color:#696969;}333.contlist dd {margin-left:12em;margin-bottom:0.8em;}334 335.autorbox {padding:5px 0 5px 0;border-top:1px solid #5A5A5A;border-bottom:1px solid black;font-size:0.9em;font-weight:bold;width:100%;}336.autorbox {337 display: -webkit-box;338 display: -moz-box;339 display: -ms-flexbox;340 display: -webkit-flex;341 display: flex;342 343 -ms-flex-align:center;344 -webkit-align-items:center;345 -webkit-box-align:center;346 align-items: center;347 flex-direction:row;348 justify-content:flex-end;}349.autorbox img {max-height:110px;}350#ab3 {margin-right:auto;padding-right:20px;}351 352/* Fußteil */353#footer {354 position:absolute;355 bottom:0px !important;356 width:1024px;357 height:320px;358 margin:0px auto;359}360#footer0 {background-color:#434343;}361#footer1 a {font-weight:normal;color:#fff;text-decoration:none;}362 363#footer1 {height:85px;border:0;}364#footer1 ul {padding:30px 90px 0 60px;list-style-type:none;text-align: justify;}365#footer1 ul::after {width: 100%; display: inline-block; content: "."; visibility: hidden}366#footer1 ul li {display:inline-block;}367 368#footer2 {margin:auto;padding-left:10px;}369#footer2 ul {list-style-type:none;display:table;width:100%;}370#footer2 ul li {display:table-cell;color:#6F6F6F;vertical-align:middle;/*width:33%;*/}371#footer2 ul li:nth-child(1) {text-align:left;vertical-align:top;padding-top:10px;}372#footer2 ul li:nth-child(2) {text-align:left;padding:50px 0 0 40px;}373#footer2 ul li:nth-child(3) div {width:210px;margin-left:100px;}374#footer2 ul li:nth-child(3) div span {margin-left:20px;}375 376/*Kacheln*/377#kachelbox {378 display: -webkit-box;379 display: -moz-box;380 display: -ms-flexbox;381 display: -webkit-flex;382 display: flex;383 flex-direction:row;justify-content:space-around;}384#kachelbox2 {margin-top:4em;width:100%;min-height:600px;}385#kachelbox2 a, #kachelbox a {text-decoration:none;color:#fff;}386.kachel2 {float:left;}387.goleft {margin-left:50px;}388.kachel, .kachel2 {background-color:#17375E;height:300px;width:315px;margin-bottom:2em;}389.kachel img, .kachel2 img {width:100%;height:180px;}390.kachel h2 a:hover, .kachel2 h2 a:hover, #footer1 a:hover {border-bottom:2px solid #fff;}391.kachel h2 a:focus, .kachel2 h2 a:focus, #footer1 a:focus {border:2px solid #fff;}392.kachel h2, .kachel p, .kachel2 h2, .kachel2 p {padding:10px 0 0 10px;color:#fff;margin-bottom:0;}393.kachel p, .kachel2 p {padding:0 10px 0 10px;}394 395.dokkachel {height:350px;}396 397#klappe {display:none;}398#klapp-navigation {399 width: 0;400 overflow: hidden;401 position: fixed;402 top: 0;403 left: 0;404 height: 100%;405 background-color:#fff;406 display:none;407 z-index:99999 !important;408}409 410#maincontent {padding:10px;}411#karte1 #map {width:300px !important;height:300px !important;border:1px solid black;}412 413/*Suchmaske*/414#suchboerse input[type=text] {height:2.5em;width:40%;padding-left:10px;}415#suchboerse input[type=checkbox], input[type=radio] {}416#suchboerse textarea {width:66%;padding:5px;}417#suchboerse select {padding:9px;width:40%;}418#suchboerse .pinkform:focus {outline:none;border:2px solid #C4124C;}419#suchboerse .tuerkisform:focus {outline:none;border:2px solid #17375E;}420#suchboerse label {width:11em;}421.makeroom {padding-bottom:2em;margin-bottom:2em;}422.makeroom2 {padding-bottom:1em;margin-bottom:2em;}423 424.sucheleft {float:left;width:290px;margin-left:10px;}425.sucheright {float:right;width:290px;margin-left:10px;}426.sucheleft hr, .sucheright hr {margin-right:80px;}427 428#suchboerse select, #suchboerse input, #suchboerse textarea {429 background-color:#fff;430 border:1px solid #ddd;431 border-radius: 5px;432}433.suchbutton {border:1px solid black;padding:5px;margin-right:20px;background-color:#fff;}434.suchbutton:hover, .suchbutton:focus {background-color:#5686A7;color:#fff;}435.xecke {padding-right:22px;background-image:url(/assets/images/xecke.gif);background-repeat:no-repeat;background-position:right top;}436 437.smaller {font-size:0.8em;font-weight:normal;}438.terminliste {margin-top:1em;}439.terminliste dt {float:left;}440.terminbox {margin-top:0.3em;width:50px;height:50px;color:#fff;padding:5px;text-align:center;line-height:1.2em;background-color:#5686A7;}441.terminliste dd {margin:0 0 1.5em 70px;}442.terminliste dd a {color:#000;text-decoration:none;}443.terminliste dd h2 {margin:0;padding:0;}444.terminliste dd:after {clear:both;}445 446.themenliste {margin:0;padding:0;list-style-type:none;}447/*.themenliste a {color:#000;text-decoration:none;cursor:pointer;}*/448.themenliste449.themenliste h2 {margin:0;padding:0;}450.themenliste h2 a {color:#000;text-decoration:none;}451.themenliste li {clear:both;margin:0;padding:0.5em 0 2em 0;display:table;min-height:240px;}452.themenliste div {display: table-cell;vertical-align:top;}453.themenliste p, #matliste p {font-weight:normal;}454.themenliste .vorschaubild {padding:1.9em 20px 0 0;width:297px;}455.themenliste .vorschaubild img {position:absolute;clip:rect(0px,255px,170px,0px);}456 457.fokusliste {list-style-type:none;}458.fokusliste , .fokusliste h2, .fokusliste li, .fokusliste h1 {margin:0;padding:0;}459.fokusbild img {max-width:100%;}460.fokusliste li ul, .fokusliste li ol {margin-left:2em;}461 462.paging {463 clear: both;464 font-size: 12px;465 margin-bottom: 2em;466 padding: 10px 0px 3px 0px;467}468 469.paging div {470 padding: 0em;471 display: inline;472}473.paging strong, .paging a, .paging_button {474 color: #000;475 font-weight: bold;476 text-decoration: none;477 padding: 2px 5px;478 margin: 0px 0.25em 0px 0.25em;479 background: #fff;480}481 482.paging a:hover, .paging strong {483 background:#17375E;484 color:#fff !important;485}486 487.paging strong, .paging a, .paging_button {488 border: 1px solid #5686A7;489}490 491.domore {display:inline-block;float:right;}492.domore a {color:#17375E;font-size:2em;}493 494.artikelbildrechts {float:right;padding:5px 0 10px 20px;}495.artikelbildlinks {float:left;padding:0.5em 20px 10px 0;}496.artikelbildlinks img {width:100%;max-width:255px;}497 498.autorleiste {font-size:0.8em;margin:-1em 0 1em 0;}499.autorzeile {padding:5px 0 5px 0;border-top:1px solid #5A5A5A;border-bottom:1px solid #5A5A5A;font-size:0.8em;color:#5A5A5A;display:block !important;}500 501#geduld {502 display:none;503 position: absolute;504 top: 150px;505 left: 20%;506 background-color:#fff;507 border:5px solid #17375E;508 padding:20px;509 height:200px;510 width:400px;511 text-align:center;512 font-weight:bold;513 opacity: 1;514 -moz-box-shadow:0 1px 8px #000000;515 -o-box-shadow:0 1px 8px #000000;516 -webkit-box-shadow:0 1px 8px #000000;517 }518 519 520.nohover:hover, .nohover:hover img {border:0;}521 522.gojump {display: block;height:150px;margin-top:-150px;visibility:hidden;}523 524a.infobox {position:relative;z-index:24;text-decoration:underline;}525a.infobox:hover, a.infobox:focus {z-index:25;background-color:#ff0;}526a.infobox span {display:none;}527a.infobox:hover span, a.infobox:focus span {528 display:block;position:absolute;529 top:2em; left:2em; width:26em;530 border:2px solid #5686A7;color:#000;background-color:#fff;531 padding:10px;}532 533#applyform input[type="text"], #applyform textarea, #applyform select {padding:10px; line-height: 15px;534 border: 1px solid #5686A7;535 border-radius: 5px;536 box-shadow: 5px 5px 10px grey;537 width:22em;538 margin-bottom:2em;539 }540 541#applyform input[type="text"]:focus, #applyform textarea:focus, #applyform select:focus {border:2px solid #5686A7;}542#applyform input[type="submit"] {background-color:#fff;border:2px solid #5686A7;padding:10px;font-weight:bold;}543#applyform input[type="submit"]:hover, #applyform input[type="submit"]:focus {background-color:#005DA8;color:#fff;}544 545.termin dt {float:left;}546.termin dd {margin:0 0 1.5em 8em;}547.termin dd a {color:#000;text-decoration:none;}548.termin dd h2 {margin:0;padding:0;}549.termin dd:after {clear:both;}550 551.rbblock {margin:1em 0 2em 2em;width:20em;}552.dblock {line-height:1.5em;display:block;}553.dblock span {display:inline-block;margin-left:.8rem;}554.row {display: table-row;width:50%;}555.cblock {display: table-cell;vertical-align:middle;max-width:30px;}556.dblock2 {display: table-cell;padding-left:10px;}557.dblock2 {line-height:1.3em;margin-left:10px;width:100%;}558 559#entryform.kontaktform {width:70%;padding:0;}560 561#entryform input, #entryform textarea, #entryform select {562 line-height:1.5em;563 border:1px solid #D6D6D6;564 -webkit-border-radius:2px;565 -khtml-border-radius:2px;566 -moz-border-radius:2px;567 border-radius:2px;568 font-size:1em;569 font-family:Open Sans570 }571 572#entryform select {width:28.5%;}573 574.ileft {float:left;width:12em;margin-right:1em;}575.ileft input {width:90%;}576 577#entryform label {display:block;line-height:1.5em;font-weight:bold;color:#111;}578#entryform label.ilong, #entryform input.ilong, #entryform textarea.ilong {width:70%;}579#entryform .rbox input {float:left;margin:5px 2% 0 0;}580#entryform .rbox label {font-weight:normal;width:85%;}581#entryform .rbox {width:75%;}582#entryform p {width:75%;}583.rwtable, #entryform .rbox {width:85%;}584#entryform .rbox p {width:85%;}585 586#entryform.kontaktform p {width:auto;}587 588#entryform legend {color:#39579A;font-weight:bold;font-size:1.2em;}589#entryform fieldset {border:0;margin-bottom:2em;}590 591/* Fuer den Honeypot */592.mail_wdh {593 display: none;594}595 596/* Fuer die Luftballons */597.snowflake {598 color: #fff;599 font-size: 1em;600 font-family: Arial, sans-serif;601 text-shadow: 0 0 5px #000;602}603 604@-webkit-keyframes snowflakes-fall{0%{top:-10%}0%{top:100%}}605@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}606@keyframes snowflakes-fall{0%{top:-10%}0%{top:100%}}607@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623.kachel2, #iconbar, .leftpage, #navleiste, .themenliste .vorschaubild, #fullpage, #fullpage2, #fullpage3, #main, #footer, #footer1, #footer2, #header, #navigation {width:100%;}624.themenliste .vorschaubild, .themenliste div, .themenliste li, #kachelbox2, #kachelbox, #klappe, #footer1 ul {display:block;}625#navleiste, .artikelbildlinks {float:none;}626.artikelbildlinks img, .vorschaubild img {width:100%;max-width:none;}627 628.themenliste .vorschaubild {padding:0;width:100%;}629.artikelbildrechts {float:none;width:100%;}630.themenliste .vorschaubild img {position:relative;clip:auto;}631.themenliste li, .fokusliste {padding:0 0 2em 0;}632 633#fullpage3, #fullpage2 {padding-left:0;}634#navigation {display:none;}635#footer0, #footer1, #footer2 {height:auto;}636#footer1 ul, #footer2 ul {padding: 20px 0 0 20px;overflow:hidden;}637#kachelbox2 {margin-top: 1em;}638#navleiste {padding: 0.5em 1em 0 1em;}639.themenliste {margin-bottom:2em;}640 641#logo {top:5px;left:5px;}642#logo img {width:160px;height:auto;}643#iconbar {padding:0;margin:0 2% 0 0;text-align:right;}644 645#bigpic {width:100%;}646#bp1, #bp2, #bp3, #bp4, #bp5 {height:80px;}647/*#bp2 img, #bp3 img, #bp4 img, #bp5 img {margin-left:-30%;}*/648 649/*neu*/650#bigheader {max-height: 330px;margin:0 0 2em 0;width:100%;background-color: #fff;}651#bigheadertext {font-size:0.8em;652 width: 100%;653 height: 34%;654 position:relative;655 text-align: left;656 z-index:1;657 overflow:hidden;658 margin: 132px auto;659 background:#fff 0% 0% no-repeat;660 opacity: 0.85;661 color:#000;662 font-weight:bold;663 padding: 1.8rem 0.8rem;}664 /*width:190px;665 height:190px;666 border-radius:130px;667 padding:35px 30px 0 35px;}*/668#bigleiste {/* margin-top:200px;*/ margin-top: -245px;}669 670#klappe {width:48px;margin:28px 5px 0 0;float:right;}671#klapp-navigation {transition: width 0.3s ease;font-size:0.8em;display:block;overflow:scroll;}672#klapp-navigation:target {width:290px;z-index:2;}673#klapp-navigation:target + #wrapper {width:20%;}674 675#main:target + #klapp-navigation {display:none;}676 677#klapp-navigation ul {list-style-type:none;padding:0;margin:0;width:275px;border-bottom:1px solid #ccc;font-weight:bold;}678#klapp-navigation li {margin:0;display:block;height:auto;letter-spacing:0.1em;padding:12px 0 12px 5px;border-top:1px solid #ccc;}679#klapp-navigation .item2 {margin-left:25px;}680#klapp-navigation .item2 a {display:block;}681#klapp-navigation li:focus {background-color:#EBEBEB;}682#klapp-navigation li.nohover:focus {background-color:#77335C;}683#klapp-navigation li a {color:#000;text-decoration:none;padding-left:25px;}684#klapp-navigation .tuerkisactive {background:url(/assets/images/tuerkisaktiv.gif) no-repeat 1% 50%;}685#klapp-navigation .tuerkis_border2 {border-top:2px solid #00818F;border-bottom:0;}686 687 .kachel:nth-child(1),.kachel:nth-child(2),.kachel:nth-child(3) {margin:auto;max-width:100%;margin-bottom:2em;}688 689#suchboerse input[type=text], #suchboerse select {width:90%;float:none;display:block;margin-bottom:2em;}690.zwischenabstand {margin-left:0;}691#geduld {top:200px;left:5%;width:80%;}692 693#footer1 ul li, #footer2 ul li {float:none;margin:0 0 2em 0;width:100%;display:block;}694#footer1 ul, #footer2 ul {display:block;}695#footer2 ul li:nth-child(2) {padding:0;}696#footer2 ul li:nth-child(3) div {padding:0;margin:0;width:100%;}697 698.sform2 input {width:50%;}699 700a.infobox:hover span, a.infobox:focus span {position:relative;width:80%;}701.dokkachel {height:auto;padding-bottom:1em;}702 </style>703 <meta charset="utf-8">704 <title>705 childrens-rights.digital706 </title>707 <meta content="noodp" name="googlebot">708 <meta content="default-src 'self';style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-inline';img-src 'self'" http-equiv="Content-Security-Policy">709 <meta content="Stiftung Digitale Chancen" name="copyright">710 <meta content="Child Protection,Children’s Rights,Digital World,digital environment,children’s digital environment,UN-Convention on the Rights of the Child,Right to Access,Right to Freedom of Expression and Information,Right to Assembly and Association, Participation and Play,Right to Privacy and Data Protection,Right to Education and Digital Literacy,Right to Protection and Safety" name="Keywords">711 <meta content="The project ‘Child Protection and Children’s Rights in the Digital World’ analyses the impact of digitisation on the everyday life of children and young people and measures for child protection and risk prevention. The aim is to develop and implement a strategy for child and youth policy measures that supports the realization of children's rights in all aspects of life and that enables children to exercise their rights and strengthens their ability for self-protection." name="Description">712 <meta content="All" name="audience">713 <meta content="3 days" name="revisit-after">714 <meta content="article" property="og:type">715 <meta content="" property="og:url">716 <meta content="Child Protection and Children’s Rights in the Digital World" property="og:title">717 <meta content="The project ‘Child Protection and Children’s Rights in the Digital World’ analyses the impact of digitisation on the everyday life of children and young people and measures for child protection and risk prevention. The aim is to develop and implement a strategy for child and youth policy measures that supports the realization of children's rights in all aspects of life and that enables children to exercise their rights and strengthens their ability for self-protection." property="og:description">718 <meta content="" property="og:image">719 <meta content="" property="og:image:url">720 <meta content="Child Protection and Children’s Rights in the Digital World" property="og:site_name">721 <meta content="" property="og:publisher">722 <meta content="en_en" property="og:locale">723 <meta content="summary" name="twitter:card">724 <meta content="Child Protection and Children’s Rights in the Digital World" name="twitter:creator">725 <meta content="" name="twitter:site">726 <meta content="Child Protection and Children’s Rights in the Digital World" name="twitter:title">727 <meta content="The project ‘Child Protection and Children’s Rights in the Digital World’ analyses the impact of digitisation on the everyday life of children and young people and measures for child protection and risk prevention. The aim is to develop and implement a strategy for child and youth policy measures that supports the realization of children's rights in all aspects of life and that enables children to exercise their rights and strengthens their ability for self-protection." name="twitter:description">728 <meta content="" name="twitter:image:src">729 <meta content="INDEX,FOLLOW" name="robots">730 <meta content="width=device-width, initial-scale=1" name="viewport">731 </head>732 <body>733 <a class="hlink" title="Jump to main content keyboard shortcut 2">734 Jump to main content keyboard shortcut 2735 </a>736 <a class="hlink" title="Jump to navigation menu keyboard shortcut 1">737 Jump to navigation menu keyboard shortcut 1738 </a>739 <a class="hlink" title="Jump to search keyboard shortcut 5">740 Jump to search keyboard shortcut 5741 </a>742 <div id="wrapper">743 <div id="klapp-navigation">744 <ul role="menu">745 <li class="bgtuerkis" role="menuitem">746 <a title="Close navigation">747 <img alt="Close navigation" height="20" src="rick.jpg" width="20">748 </a>749 </li>750 <li role="menuitem">751 <a>752 INTRO753 </a>754 </li>755 <li role="menuitem">756 <a>757 FOCUS758 </a>759 </li>760 <li role="menuitem">761 <a>762 BACKGROUND763 </a>764 </li>765 </ul>766 </div>767 <div id="main">768 <div id="header">769 <div id="klappe">770 <a title="Show navigation">771 <img alt="Show navigation" height="48" src="rick.jpg" width="48">772 </a>773 </div>774 <div id="logo">775 <a>776 <img alt="childrens-rights digital" height="100px" src="rick.jpg" width="210px">777 </a>778 </div>779 <div id="iconbar">780 <a class="padright" title="Events">781 <img alt="Events" height="20" src="rick.jpg" width="20">782 </a>783 <a class="padright" title="Search">784 <img alt="Search" height="20" src="rick.jpg" width="20">785 </a>786 <a class="padright" title="RSS-Feed">787 <img alt="RSS-Feed" height="20" src="rick.jpg" width="20">788 </a>789 <a class="padright" title="Contact">790 <img alt="Contact" height="21" src="rick.jpg" width="23">791 </a>792 <a title="Deutsche Version anzeigen">793 DE794 </a>795 |796 <a title="Show english version">797 EN798 </a>799 </div>800 <div id="navigation">801 <ul class="clearfix">802 <li id="ntopic1">803 <div id="bluebox1">804 <br>805 </div>806 <a>807 INTRO808 </a>809 </li>810 <li id="ntopic2">811 <div id="bluebox2">812 <br>813 </div>814 <a>815 FOCUS816 </a>817 </li>818 <li id="ntopic3">819 <div id="bluebox3">820 <br>821 </div>822 <a>823 BACKGROUND824 </a>825 </li>826 <li class="navon" id="ntopic5" title="Active topic">827 <div id="bluebox5">828 <br>829 </div>830 <a>831 PROJECT832 </a>833 </li>834 </ul>835 </div>836 </div>837 <div class="clearfix" id="content">838 <div class="bgtuerkis" id="pheader">839 <h1>840 PROJECT841 </h1>842 </div>843 <div id="maincontent">844 <div id="fullpage">845 <ul id="breadcrumb">846 <li>847 <a>848 <img alt="Home" height="19" src="rick.jpg" width="21">849 </a>850 </li>851 <li>852 > Project853 </li>854 </ul>855 <div class="partpage">856 <h1>857 Child Protection and Children’s Rights in the Digital World858 </h1>859 <p>860 In April 2016 the Council of Europe adopted the so-called Sofia Strategy for implementing the UN Convention on the Rights of the Child. Next to aspects like equal opportunities, participation, a life free from violence and child-friendly justice it also encompasses children’s rights in the digital environment.861 </p>862 <p>863 Against this backdrop, research within the project ‘Child Protection and Children’s Rights in the Digital World’ analyses the impact of digitisation on the everyday life of children and young people and measures for child protection and risk prevention. The aim is to develop and implement a strategy for child and youth policy measures that supports the realization of children''s rights in all aspects of life and that enables children to exercise their rights and strengthens their ability for self-protection.864 </p>865 <p>866 The project supports the Council of Europe’s activities for the implementation of the Sofia Strategy and collaborates with international committees at the EU- and UN-level in the sector of Internet Governance as well as ICANN and further institutions. In close cooperation with the child charity Deutsches Kinderhilfswerk the project communicates German activities into the European and international context and promotes the implementation of the UN-CRC with regard to the digitization of the lifeworld of children.867 </p>868 <br>869 </div>870 </div>871 </div>872 </div>873 <div id="minheight">874 </div>875 <div class="clearfix" id="footer">876 <div class="clearfix" id="footer0">877 <div id="footer1">878 <ul>879 <li>880 <a>881 IMPRINT882 </a>883 </li>884 <li>885 <a>886 NEWSLETTER887 </a>888 </li>889 <li>890 <a>891 CONTACT892 </a>893 </li>894 <li>895 <a>896 PRIVACY897 </a>898 </li>899 </ul>900 </div>901 </div>902 <div class="clearfix" id="footer2">903 <ul>904 <li>905 © 2023906 </li>907 <li>908 <div>909 <a rel="noopener" target="_blank" title="Link zur Stiftung Digitale Chancen öffnet in neuem Fenster">910 <img alt="Logo: Stiftung Digitale Chancen" height="100" src="rick.jpg" width="210">911 </a>912 </div>913 </li>914 <li>915 <div>916 Funded by:917 <br>918 <a rel="noopener" target="_blank" title="Link Federal Ministry for Family Affairs, Senior Citizens, Women and Youth">919 <img alt="Funded by: Federal Ministry for Family Affairs, Senior Citizens, Women and Youth" height="104" src="rick.jpg" width="213">920 </a>921 </div>922 </li>923 </ul>924 </div>925 </div>926 </div>927 </div>928 </body>929</html>930