SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA 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 "easy" version of the Design2Code testset 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.
6379
1<html>2 <head>3 <style>4 /* cyrillic-ext */5@font-face {6 font-family: 'Montserrat';7 font-style: normal;8 font-weight: 300;9 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');10 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;11}12/* cyrillic */13@font-face {14 font-family: 'Montserrat';15 font-style: normal;16 font-weight: 300;17 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');18 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;19}20/* vietnamese */21@font-face {22 font-family: 'Montserrat';23 font-style: normal;24 font-weight: 300;25 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');26 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;27}28/* latin-ext */29@font-face {30 font-family: 'Montserrat';31 font-style: normal;32 font-weight: 300;33 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');34 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;35}36/* latin */37@font-face {38 font-family: 'Montserrat';39 font-style: normal;40 font-weight: 300;41 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');42 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;43}44/* cyrillic-ext */45@font-face {46 font-family: 'Montserrat';47 font-style: normal;48 font-weight: 400;49 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');50 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;51}52/* cyrillic */53@font-face {54 font-family: 'Montserrat';55 font-style: normal;56 font-weight: 400;57 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');58 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;59}60/* vietnamese */61@font-face {62 font-family: 'Montserrat';63 font-style: normal;64 font-weight: 400;65 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');66 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;67}68/* latin-ext */69@font-face {70 font-family: 'Montserrat';71 font-style: normal;72 font-weight: 400;73 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');74 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;75}76/* latin */77@font-face {78 font-family: 'Montserrat';79 font-style: normal;80 font-weight: 400;81 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');82 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;83}84/* cyrillic-ext */85@font-face {86 font-family: 'Montserrat';87 font-style: normal;88 font-weight: 700;89 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');90 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;91}92/* cyrillic */93@font-face {94 font-family: 'Montserrat';95 font-style: normal;96 font-weight: 700;97 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');98 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;99}100/* vietnamese */101@font-face {102 font-family: 'Montserrat';103 font-style: normal;104 font-weight: 700;105 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');106 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;107}108/* latin-ext */109@font-face {110 font-family: 'Montserrat';111 font-style: normal;112 font-weight: 700;113 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');114 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;115}116/* latin */117@font-face {118 font-family: 'Montserrat';119 font-style: normal;120 font-weight: 700;121 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');122 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;123}124/* cyrillic-ext */125@font-face {126 font-family: 'Roboto';127 font-style: normal;128 font-weight: 400;129 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');130 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;131}132/* cyrillic */133@font-face {134 font-family: 'Roboto';135 font-style: normal;136 font-weight: 400;137 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');138 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;139}140/* greek-ext */141@font-face {142 font-family: 'Roboto';143 font-style: normal;144 font-weight: 400;145 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');146 unicode-range: U+1F00-1FFF;147}148/* greek */149@font-face {150 font-family: 'Roboto';151 font-style: normal;152 font-weight: 400;153 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');154 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;155}156/* vietnamese */157@font-face {158 font-family: 'Roboto';159 font-style: normal;160 font-weight: 400;161 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');162 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;163}164/* latin-ext */165@font-face {166 font-family: 'Roboto';167 font-style: normal;168 font-weight: 400;169 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');170 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;171}172/* latin */173@font-face {174 font-family: 'Roboto';175 font-style: normal;176 font-weight: 400;177 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');178 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;179}180/* cyrillic-ext */181@font-face {182 font-family: 'Roboto';183 font-style: normal;184 font-weight: 700;185 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');186 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;187}188/* cyrillic */189@font-face {190 font-family: 'Roboto';191 font-style: normal;192 font-weight: 700;193 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');194 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;195}196/* greek-ext */197@font-face {198 font-family: 'Roboto';199 font-style: normal;200 font-weight: 700;201 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');202 unicode-range: U+1F00-1FFF;203}204/* greek */205@font-face {206 font-family: 'Roboto';207 font-style: normal;208 font-weight: 700;209 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');210 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;211}212/* vietnamese */213@font-face {214 font-family: 'Roboto';215 font-style: normal;216 font-weight: 700;217 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');218 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;219}220/* latin-ext */221@font-face {222 font-family: 'Roboto';223 font-style: normal;224 font-weight: 700;225 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');226 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;227}228/* latin */229@font-face {230 font-family: 'Roboto';231 font-style: normal;232 font-weight: 700;233 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');234 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;235}236 237 238 239html {240 background-color: #bbbbbb;241 padding: 0px;242 scroll-behavior: smooth;243}244body {245 width: 80%;246 min-height: calc(100vh - 4em);247 margin: 0 auto;248 padding: 2em;249 background-color: #dddddd;250 border-color: #eeeeee;251 border-left-style: solid;252 border-right-style: solid;253 border-width: 20px;254}255p {256 color: #444444;257 font-family: 'Roboto', sans-serif;258 font-size: 18.5pt;259 line-height: 1.15;260 margin: 4pt;261}262 263p.value {264 margin-top: 22px;265 margin-bottom: 22px;266 text-indent: -16pt;267 margin-left: 20pt;268 font-size: 24pt;269 line-height: 2.11666656px;270 letter-spacing: 0.03em;271 font-family: 'Montserrat';272}273 274p.axis_name {275 margin-top: 50px;276 color: #333333;277 font-size: 19pt;278 font-family: 'Montserrat';279}280p.question {281 margin: 16pt auto;282 color: #333333;283 font-family: 'Montserrat', sans-serif;284 font-weight: normal;285 width: 70%;286 min-width: 500pt;287 min-height: 144pt;288 background-color: #eeeeee;289 padding: 16pt;290 border-radius: 16pt;291 font-size: 36pt;292 display: flex;293 justify-content: center;294 align-items: center;295 text-align: center;296 297}298h1 {299 color: #222222;300 font-family: 'Montserrat', sans-serif;301 font-size: 72pt;302 text-align: center;303 line-height: 72pt;304 margin-top: 0pt;305 margin-bottom: 0pt;306}307#twitplug {308 color: #333333;309 font-family: 'Montserrat', sans-serif;310 font-size: 28pt;311 text-align: center;312 line-height: 28pt;313 margin-top: 0pt;314 margin-bottom: 10pt;315}316h2 {317 color: #333333;318 font-family: 'Montserrat', sans-serif;319 font-size: 34pt;320 line-height: 36pt;321 margin-top: 12pt;322 margin-bottom: 10pt;323}324li {325 font-size: 16pt;326 text-indent: 16pt;327}328a {329 font-family: inherit;330}331div.center {332 background-color: #eeeeee;333 font-family: 'Montserrat', sans-serif;334 border-radius: 8pt;335 padding: 6pt;336 color: white;337 width: 50%;338 min-width: 488pt;339 text-align: center;340 text-decoration: none;341 display: block;342 font-size: 24pt;343 margin: auto;344}345div.leftexplain {346 display: block;347 text-align: left;348 padding-left: 175px;349 padding-right: 40px;350 margin:auto;351 min-height: 160px;352}353div.rightexplain {354 display: block;355 text-align: left;356 padding-left: 40px;357 margin:auto;358 min-height: 160px;359}360img.leftexplain {361 display: block;362 float: left;363 width: 160px;364 margin:auto;365 transition: transform .3s;366}367img.rightexplain {368 display: block;369 float: right;370 width: 160px;371 transition: transform .3s;372}373img.quadcolumn {374 width: 23.75%;375 transition: transform .3s;376}377img.quadcolumn:hover {378 transform: scale(1.05);379 }380div.quadcolumn {381 width: 23.75%;382}383div.axis_name {384 color: #333333;385 font-size: 19pt;386 font-family: 'Montserrat';387 display: inline-block;388 padding-bottom: 8.65pt;389}390.spacer {391 display: flex;392}393.spacer > div{394 margin-top: 10px;395 display: inline-block;396 *display: inline; /* For IE7 */397 text-align: center;398}399.button {400 background-color: #2196f3;401 font-family: 'Montserrat', sans-serif;402 border: none;403 border-radius: 8pt;404 color: white;405 padding: 8pt;406 width: 50%;407 min-width: 500pt;408 text-align: center;409 text-decoration: none;410 display: block;411 font-size: 24pt;412 margin: -2px auto;413 cursor: pointer;414}415.button:hover, .button:focus { background: #1687e0; }416.stronglyAgree { background: #1b5e20; }417.stronglyAgree:hover, .stronglyAgree:focus { background: #154a19; }418.agree { background: #4caf50; }419.agree:hover, .agree:focus { background: #29942e; }420.neutral { background: #949494; }421.neutral:hover, .neutral:focus { background: #656565; }422.disagree { background: #f44336; }423.disagree:hover, .disagree:focus { background: #d6271a; }424.stronglyDisagree { background: #b71c1c; }425.stronglyDisagree:hover, .stronglyDisagree:focus { background: #a00e0e; }426 427.small_button, .small_button_off {428 background-color: #333;429 font-family: 'Montserrat', sans-serif;430 border: none;431 border-radius: 8pt;432 color: white;433 padding: 8pt;434 width: 10%;435 min-width: 100pt;436 text-align: center;437 text-decoration: none;438 display: block;439 font-size: 18pt;440 margin: -2px auto;441 cursor: pointer;442}443 444.small_button:hover, .small_button:focus {445 background: #222;446}447 448.small_button_off {449 background-color: #ddd;450 color: #888;451 border: 2px solid #888;452 cursor: not-allowed;453 margin: -4px auto;454}455.arrow {456 width: 60%;457 height: auto;458}459div.explanation_blurb_left {460 vertical-align: top;461 width: 37%;462 margin-left: 1%;463 margin-right: 1%;464}465div.explanation_blurb_right {466 vertical-align: top;467 width: 37%;468 margin-left: 1%;469 margin-right: 1%;470}471div.explanation_axis {472 width: 20.9%;473 vertical-align: top;474}475div.axis {476 width: 100%;477 display: flex;478 align-items: center;479 justify-content: center;480}481div.bar {482 height: 36pt;483 line-height: 36pt;484 padding: 8pt;485 margin-top: 4pt;486 margin-bottom: 4pt;487 border-width: 4px;488 border-right-width: 1px;489 border-top-style: solid;490 border-bottom-style: solid;491 border-color: #222222;492 background-color: #eeeeee;493 display: block;494 width: 50%;495}496div.text-wrapper {497 font-family: 'Montserrat', sans-serif;498 font-size: 36pt;499 line-height: 36pt;500 color: #222222;501 display: inline-block;502}503div.equality {504 background-color: #50ABF1;505 text-align: left;506 border-right-style: solid;507}508div.wealth {509 background-color: #28AE1F;510 text-align: right;511 border-left-style: solid;512}513div.liberty {514 background-color: #FFD800;515 text-align: left;516 border-right-style: solid;517}518div.authority {519 background-color: #0080FF;520 text-align: right;521 border-left-style: solid;522}523div.peace {524 background-color: #FF8F00;525 text-align: right;526 border-left-style: solid;527}528div.might {529 background-color: #A6BBDA;530 text-align: left;531 border-right-style: solid;532}533div.progress {534 background-color: #5BCEFA;535 text-align: right;536 border-left-style: solid;537}538div.tradition {539 background-color: #EA90AB;540 text-align: left;541 border-right-style: solid;542}543span.weight-300 {544 font-weight: 300;545}546.explanation_bg {547 background-color: #eeeeee;548 border-radius: 25px;549 margin-top: 15px;550}551#banner {552 border-color: #444444;553 border-style: solid;554 border-width: 2px;555 border-radius: 8pt;556 display: block;557 margin: 8pt;558 margin-left: auto;559 margin-right: auto;560}561 </style>562 <title>563 transvalues564 </title>565 <meta charset="utf-8">566 <meta content="AlK2UR5SkAlj8jjdEc9p3F3xuFYlF6LYjAML3EOqw1g26eCwWPjdmecULvBH5MVPoqKYrOfPhYVL71xAXI1IBQoAAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3NTgwNjcxOTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">567 <meta content="Amm8/NmvvQfhwCib6I7ZsmUxiSCfOxWxHayJwyU1r3gRIItzr7bNQid6O8ZYaE1GSQTa69WwhPC9flq/oYkRBwsAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3NTgwNjcxOTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">568 <meta content="A9wSqI5i0iwGdf6L1CERNdmsTPgVu44ewj8QxTBYgsv1LCPUVF7YmWOvTappqB1139jAymxUW/RO8zmMqo4zlAAAAACNeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiRmxlZGdlQmlkZGluZ0FuZEF1Y3Rpb25TZXJ2ZXIiLCJleHBpcnkiOjE3MzY4MTI4MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">569 <meta content="A+d7vJfYtay4OUbdtRPZA3y7bKQLsxaMEPmxgfhBGqKXNrdkCQeJlUwqa6EBbSfjwFtJWTrWIioXeMW+y8bWAgQAAACTeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiRmxlZGdlQmlkZGluZ0FuZEF1Y3Rpb25TZXJ2ZXIiLCJleHBpcnkiOjE3MzY4MTI4MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">570 </head>571 <body>572 <h1>573 transvalues574 </h1>575 <h2 id="twitplug">576 by577 <a id="twitplug">578 [Username Redacted]579 </a>580 </h2>581 <hr>582 <div class="center">583 <div class="axis_name quadcolumn">584 SOCIALS585 </div>586 <div class="axis_name quadcolumn">587 TRUSCUM588 </div>589 <div class="axis_name quadcolumn">590 HRT ACCESS591 </div>592 <div class="axis_name quadcolumn">593 TRANS LIBERATION594 </div>595 <a>596 <img class="quadcolumn" src="rick.jpg">597 </a>598 <a>599 <img class="quadcolumn" src="rick.jpg">600 </a>601 <a>602 <img class="quadcolumn" src="rick.jpg">603 </a>604 <a>605 <img class="quadcolumn" src="rick.jpg">606 </a>607 <a>608 <img class="quadcolumn" src="rick.jpg">609 </a>610 <a>611 <img class="quadcolumn" src="rick.jpg">612 </a>613 <a>614 <img class="quadcolumn" src="rick.jpg">615 </a>616 <a>617 <img class="quadcolumn" src="rick.jpg">618 </a>619 </div>620 <br>621 <button class="button" onclick="location.href='instructions.html';" style="font-size:36pt;">622 Click here to start!623 </button>624 <br>625 <hr>626 <h2>627 What is transvalues?628 </h2>629 <p>630 Transvalues is, in essence, a half serious shitpost quiz that attempts to assign percentages for eight different values related to trans issues.631 <b>632 It is generally made for trans people but cis people very familiar with trans issues can probably take it too.633 </b>634 You will be presented by a statement, and then you will answer with your opinion on the statement, from635 <b>636 Strongly Agree637 </b>638 to639 <b>640 Strongly Disagree641 </b>642 , with each answer slightly affecting your scores.643 <br>644 <br>645 There are646 <b>647 <u>648 <span id="numOfQuestions">649 37650 </span>651 </u>652 </b>653 questions in the test.654 </p>655 <br>656 <p>657 this is a fork of658 <b>659 8values660 </b>661 , which you can check out662 <a>663 here664 </a>665 </p>666 <hr>667 <h2>668 Axes explained669 </h2>670 <a>671 <img class="leftexplain" src="rick.jpg">672 </a>673 <div class="leftexplain">674 <p>675 "Twitter User", a member of the twitter subculture. Overtly progressive and terminally online.676 </p>677 </div>678 <br>679 <a>680 <img class="leftexplain" src="rick.jpg">681 </a>682 <div class="leftexplain">683 <p>684 "4chan User", a member of the 4chan /tttt/ subculture. It's 4chan meets trans people, what else can I say?685 </p>686 </div>687 <br>688 <a>689 <img class="leftexplain" src="rick.jpg">690 </a>691 <div class="leftexplain">692 <p>693 "Truscum", a term coined by a Tumblr user meaning true transsexual scum. It is often refered to as transmedicalism or "transmed".694 </p>695 </div>696 <br>697 <a>698 <img class="leftexplain" src="rick.jpg">699 </a>700 <div class="leftexplain">701 <p>702 "Self-ID" is pretty self explanatory. Self-ID advocates say that you are the gender you say you are, no matter what.703 </p>704 </div>705 <br>706 <a>707 <img class="leftexplain" src="rick.jpg">708 </a>709 <div class="leftexplain">710 <p>711 "DIY HRT" are transgender hormones that are ordered online without a prescription. Although usually not regulated with blood tests and endocronological supervision, the advocates of diy hrt say it is necessary for people who have trouble getting a prescription for whatever reason.712 </p>713 </div>714 <br>715 <a>716 <img class="leftexplain" src="rick.jpg">717 </a>718 <div class="leftexplain">719 <p>720 "Restricted HRT Access", people in favor of this argue that the grey DIY market is dangerous. They say life-changing drugs like gender-affirming hormones should never be sold over the counter and should instead only be given after multiple appointments with psychologists deem it necessary.721 </p>722 </div>723 <br>724 <a>725 <img class="leftexplain" src="rick.jpg">726 </a>727 <div class="leftexplain">728 <p>729 "Trans Assimilation" encourages people to try to "pass" as the opposite gender and fit into modern day gender roles as a way to counter transphobia. Assimilationists consider "stealth"(=passing while nobody knows you are trans) the holy grail of transitioning.730 </p>731 </div>732 <br>733 <a>734 <img class="leftexplain" src="rick.jpg">735 </a>736 <div class="leftexplain">737 <p>738 "Trans Liberation" is derived from the "Gay liberation" movement from 1960-1980s, but more specified towards trans people. It argues that for trans people to free themselves from oppression, they must engage in radical direct action.739 </p>740 </div>741 <br>742 <!-- This is the script for the page itself -->743 <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;">744 <div id="aswift_0_host" style="border: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;">745 </div>746 </ins>747 </body>748</html>749