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.
6622
1<html>2 <head>3 <title>4 SexValues5 </title>6 <meta charset="utf-8">7 </head>8 <body>9 <a aria-label="View source on Github" class="github-corner">10 </a>11 <style>12 /* cyrillic-ext */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_i6t8kCHKm459WRhyzbi.woff2) format('woff2');18 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;19}20/* cyrillic */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_i6t8kCHKm459W1hyzbi.woff2) format('woff2');26 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;27}28/* vietnamese */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_i6t8kCHKm459WZhyzbi.woff2) format('woff2');34 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;35}36/* latin-ext */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_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');42 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;43}44/* latin */45@font-face {46 font-family: 'Montserrat';47 font-style: normal;48 font-weight: 300;49 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');50 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;51}52/* cyrillic-ext */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_i6t8kCHKm459WRhyzbi.woff2) format('woff2');58 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;59}60/* cyrillic */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_i6t8kCHKm459W1hyzbi.woff2) format('woff2');66 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;67}68/* vietnamese */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_i6t8kCHKm459WZhyzbi.woff2) format('woff2');74 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;75}76/* latin-ext */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_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');82 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;83}84/* latin */85@font-face {86 font-family: 'Montserrat';87 font-style: normal;88 font-weight: 400;89 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');90 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;91}92/* cyrillic-ext */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_i6t8kCHKm459WRhyzbi.woff2) format('woff2');98 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;99}100/* cyrillic */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_i6t8kCHKm459W1hyzbi.woff2) format('woff2');106 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;107}108/* vietnamese */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_i6t8kCHKm459WZhyzbi.woff2) format('woff2');114 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;115}116/* latin-ext */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_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');122 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;123}124/* latin */125@font-face {126 font-family: 'Montserrat';127 font-style: normal;128 font-weight: 700;129 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');130 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;131}132/* cyrillic-ext */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/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');138 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;139}140/* cyrillic */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/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');146 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;147}148/* greek-ext */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/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');154 unicode-range: U+1F00-1FFF;155}156/* greek */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/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');162 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;163}164/* vietnamese */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/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');170 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;171}172/* latin-ext */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/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');178 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;179}180/* latin */181@font-face {182 font-family: 'Roboto';183 font-style: normal;184 font-weight: 400;185 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');186 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;187}188/* cyrillic-ext */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/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');194 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;195}196/* cyrillic */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/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');202 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;203}204/* greek-ext */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/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');210 unicode-range: U+1F00-1FFF;211}212/* greek */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/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');218 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;219}220/* vietnamese */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/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');226 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;227}228/* latin-ext */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/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');234 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;235}236/* latin */237@font-face {238 font-family: 'Roboto';239 font-style: normal;240 font-weight: 700;241 src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');242 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;243}244 245 246 247html {248 background-color: #bbbbbb;249 padding: 0px;250 scroll-behavior: smooth;251}252body {253 width: 80%;254 min-height: calc(100vh - 4em);255 margin: 0 auto;256 padding: 2em;257 background-color: #dddddd;258 border-color: #eeeeee;259 border-left-style: solid;260 border-right-style: solid;261 border-width: 20px;262}263p {264 color: #444444;265 font-family: "Roboto", sans-serif;266 font-size: 16pt;267 line-height: 1;268 margin: 4pt;269}270 271p.value {272 margin-top: 22px;273 margin-bottom: 22px;274 text-indent: -16pt;275 margin-left: 20pt;276 font-size: 24pt;277 line-height: 2.11666656px;278 letter-spacing: 0.03em;279 font-family: "Montserrat";280}281 282p.axis_name {283 margin-top: 50px;284 color: #333333;285 font-size: 19pt;286 font-family: "Montserrat";287}288p.question {289 margin: 16pt auto;290 color: #333333;291 font-family: "Montserrat", sans-serif;292 font-weight: normal;293 width: 70%;294 min-width: 500pt;295 min-height: 144pt;296 background-color: #eeeeee;297 padding: 16pt;298 border-radius: 16pt;299 font-size: 36pt;300 display: flex;301 justify-content: center;302 align-items: center;303 text-align: center;304}305h1 {306 color: #222222;307 font-family: "Montserrat", sans-serif;308 font-size: 72pt;309 text-align: center;310 line-height: 72pt;311 margin-top: 0pt;312 margin-bottom: 0pt;313}314h2 {315 color: #333333;316 font-family: "Montserrat", sans-serif;317 font-size: 36pt;318 line-height: 36pt;319 margin-top: 12pt;320 margin-bottom: 0pt;321}322h3 {323 color: #333333;324 font-family: "Montserrat", sans-serif;325 font-size: 18pt;326 line-height: 18pt;327 margin-top: 12pt;328 margin-bottom: 0pt;329}330li {331 font-size: 16pt;332 text-indent: 16pt;333}334a {335 font-family: inherit;336}337.selection {338 background-color: #4caf50;339 font-family: "Montserrat", sans-serif;340 border: none;341 border-radius: 8pt;342 color: white;343 padding: 8pt;344 width: 50%;345 min-width: 500pt;346 text-align: center;347 text-decoration: none;348 display: block;349 font-size: 24pt;350 margin: -2px auto;351 cursor: pointer;352}353.num_input {354 background-color: #2196f3;355 font-family: "Montserrat", sans-serif;356 border: none;357 border-radius: 8pt;358 color: white;359 padding: 8pt;360 width: 50%;361 min-width: 500pt;362 text-align: center;363 text-decoration: none;364 display: block;365 font-size: 24pt;366 margin: -2px auto;367 cursor: pointer;368}369.text_input {370 background-color: #2196f3;371 font-family: "Montserrat", sans-serif;372 border: none;373 border-radius: 8pt;374 color: white;375 padding: 8pt;376 width: 50%;377 min-width: 500pt;378 text-align: center;379 text-decoration: none;380 display: block;381 font-size: 24pt;382 margin: -2px auto;383 cursor: pointer;384}385div.center {386 background-color: #eeeeee;387 font-family: "Montserrat", sans-serif;388 border-radius: 8pt;389 padding: 6pt;390 color: white;391 width: 50%;392 min-width: 603.9pt;393 text-align: center;394 text-decoration: none;395 display: block;396 font-size: 24pt;397 margin: auto;398}399img.quadcolumn {400 width: 19%;401 transition: transform 0.3s;402}403img.quadcolumn:hover {404 transform: scale(1.05);405}406div.quadcolumn {407 width: 19%;408}409div.axis_name {410 color: #333333;411 font-size: 17pt;412 font-family: "Montserrat";413 display: inline-block;414 padding-bottom: 8.65pt;415}416.spacer {417 display: flex;418}419.spacer > div {420 margin-top: 10px;421 display: inline-block;422 *display: inline; /* For IE7 */423 text-align: center;424}425.button {426 background-color: #2196f3;427 font-family: "Montserrat", sans-serif;428 border: none;429 border-radius: 8pt;430 color: white;431 padding: 8pt;432 width: 50%;433 min-width: 500pt;434 text-align: center;435 text-decoration: none;436 display: block;437 font-size: 24pt;438 margin: -2px auto;439 cursor: pointer;440}441.button:hover,442.button:focus {443 background: #1687e0;444}445.stronglyAgree {446 background: #1b5e20;447}448.stronglyAgree:hover,449.stronglyAgree:focus {450 background: #154a19;451}452.agree {453 background: #4caf50;454}455.agree:hover,456.agree:focus {457 background: #29942e;458}459.neutral {460 background: #949494;461}462.neutral:hover,463.neutral:focus {464 background: #656565;465}466.disagree {467 background: #f44336;468}469.disagree:hover,470.disagree:focus {471 background: #d6271a;472}473.stronglyDisagree {474 background: #b71c1c;475}476.stronglyDisagree:hover,477.stronglyDisagree:focus {478 background: #a00e0e;479}480 481.small_button,482.small_button_off {483 background-color: #333;484 font-family: "Montserrat", sans-serif;485 border: none;486 border-radius: 8pt;487 color: white;488 padding: 8pt;489 width: 10%;490 min-width: 100pt;491 text-align: center;492 text-decoration: none;493 display: block;494 font-size: 18pt;495 margin: -2px auto;496 cursor: pointer;497}498 499.small_button:hover,500.small_button:focus {501 background: #222;502}503 504.small_button_off {505 background-color: #ddd;506 color: #888;507 border: 2px solid #888;508 cursor: not-allowed;509 margin: -4px auto;510}511.arrow {512 width: 60%;513 height: auto;514}515div.explanation_blurb_left {516 vertical-align: top;517 width: 37%;518 margin-left: 1%;519 margin-right: 1%;520}521div.explanation_blurb_right {522 vertical-align: top;523 width: 37%;524 margin-left: 1%;525 margin-right: 1%;526}527div.explanation_axis {528 width: 20.9%;529 vertical-align: top;530}531div.axis {532 width: 100%;533 display: flex;534 align-items: center;535 justify-content: center;536}537div.bar {538 height: 36pt;539 line-height: 36pt;540 padding: 8pt;541 margin-top: 4pt;542 margin-bottom: 4pt;543 border-width: 4px;544 border-right-width: 1px;545 border-top-style: solid;546 border-bottom-style: solid;547 border-color: #222222;548 background-color: #eeeeee;549 display: block;550 width: 50%;551}552div.text-wrapper {553 font-family: "Montserrat", sans-serif;554 font-size: 36pt;555 line-height: 36pt;556 color: #222222;557 display: inline-block;558}559div.equality {560 background-color: #f44336;561 text-align: left;562 border-right-style: solid;563}564div.wealth {565 background-color: #00897b;566 text-align: right;567 border-left-style: solid;568}569div.liberty {570 background-color: #ffeb3b;571 text-align: left;572 border-right-style: solid;573}574div.authority {575 background-color: #3f51b5;576 text-align: right;577 border-left-style: solid;578}579div.peace {580 background-color: #03a9f4;581 text-align: right;582 border-left-style: solid;583}584div.might {585 background-color: #ff9800;586 text-align: left;587 border-right-style: solid;588}589div.progress {590 background-color: #9c27b0;591 text-align: right;592 border-left-style: solid;593}594div.tradition {595 background-color: #8bc34a;596 text-align: left;597 border-right-style: solid;598}599span.weight-300 {600 font-weight: 300;601}602.explanation_bg {603 background-color: #eeeeee;604 border-radius: 25px;605 margin-top: 15px;606}607#banner {608 border-color: #444444;609 border-style: solid;610 border-width: 2px;611 border-radius: 8pt;612 display: block;613 margin: 8pt;614 margin-left: auto;615 margin-right: auto;616}617 618 619.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}620 </style>621 <h1>622 SexValues Legacy623 </h1>624 <hr>625 <center>626 <h3 style="color:red;">627 DISCLAIMER628 </h3>629 </center>630 <center>631 <p>632 This test is still a mess, hence why it's called legacy. It will be replaced.633 </p>634 </center>635 <hr>636 <div class="center">637 <div class="axis_name quadcolumn">638 ATTRACTION639 </div>640 <div class="axis_name quadcolumn">641 SEX DRIVE642 </div>643 <div class="axis_name quadcolumn">644 DOMINANCE645 </div>646 <div class="axis_name quadcolumn">647 DEVIANCE648 </div>649 <div class="axis_name quadcolumn">650 AFFECTION651 </div>652 <a>653 <img class="quadcolumn" src="rick.jpg">654 </a>655 <a>656 <img class="quadcolumn" src="rick.jpg">657 </a>658 <a>659 <img class="quadcolumn" src="rick.jpg">660 </a>661 <a>662 <img class="quadcolumn" src="rick.jpg">663 </a>664 <a>665 <img class="quadcolumn" src="rick.jpg">666 </a>667 <a>668 <img class="quadcolumn" src="rick.jpg">669 </a>670 <a>671 <img class="quadcolumn" src="rick.jpg">672 </a>673 <a>674 <img class="quadcolumn" src="rick.jpg">675 </a>676 <a>677 <img class="quadcolumn" src="rick.jpg">678 </a>679 <a>680 <img class="quadcolumn" src="rick.jpg">681 </a>682 </div>683 <br>684 <button class="button" onclick="location.href='instructions.html';" style="font-size:36pt;">685 Click here to686 start!687 </button>688 <br>689 <hr>690 <h2>691 What is SexValues?692 </h2>693 <p>694 SexValues is a quiz, running on a modded base of695 <a>696 8values697 </a>698 ,699that attempts to map your sexuality. You will be presented by a statement, and then you will answer with your opinion on the statement, 700from701 <b>702 Strongly Agree703 </b>704 to705 <b>706 Strongly Disagree707 </b>708 , with each answer slightly affecting your scores. At the end of the quiz, your 709answers will becompared to the maximum possible for each value, thus giving you a percentage. Answer honestly!710 <br>711 <br>712 There are713 <b>714 <u>715 <span id="numOfQuestions">716 27717 </span>718 </u>719 </b>720 questions in the test.721 </p>722 <h2>723 <a id="anchor">724 What are the eight values?725 </a>726 </h2>727 <p>728 There are five axes - and each has two opposing values assigned to them. They are:729 </p>730 <div class="explanation_bg">731 <div class="spacer">732 <div class="explanation_blurb_left">733 <p class="value">734 <b style="color:#0099E5;">735 MASCULINE736 </b>737 </p>738 <p class="blurb-text">739 Those with higher Masculine scores have attraction towards masculinity or males. 740 Stereotypical masculine traits are: strength, courage, independence, leadership, assertiveness741 </p>742 </div>743 <div class="explanation_axis">744 <p class="axis_name">745 ATTRACTION746 </p>747 <img class="arrow" src="rick.jpg">748 </div>749 <div class="explanation_blurb_right">750 <p class="value">751 <b style="color:#E50099;">752 FEMININE753 </b>754 </p>755 <p class="blurb-text">756 Those with higher Feminine scores have attraction towards femininity or women.757 Stereotypical feminine traits are: emotional, kind, helpful, devoted758 </p>759 </div>760 </div>761 <div class="spacer">762 <div class="explanation_blurb_left">763 <p class="value">764 <b style="color:#CC0000;">765 HYPERSEXUAL766 </b>767 </p>768 <p class="blurb-text">769 Those with higher Hypersexual scores tend to have extremely frequent or suddenly increased libido.770 </p>771 </div>772 <div class="explanation_axis">773 <p class="axis_name">774 SEX DRIVE775 </p>776 <img class="arrow" src="rick.jpg">777 </div>778 <div class="explanation_blurb_right">779 <p class="value">780 <b style="color:#00CCCC;">781 HYPOSEXUAL782 </b>783 </p>784 <p class="blurb-text">785 Those with higher Hyposexual scores are characterized 786 by a lack or absence of sexual fantasies and desire for sexual activity.787 </p>788 </div>789 </div>790 <div class="spacer">791 <div class="explanation_blurb_left">792 <p class="value">793 <b style="color:#CC7400;">794 DOMINANT795 </b>796 </p>797 <p class="blurb-text">798 Those with higher Dominant scores tend to like having power and influence over others.799 </p>800 </div>801 <div class="explanation_axis">802 <p class="axis_name">803 DOMINANCE804 </p>805 <img class="arrow" src="rick.jpg">806 </div>807 <div class="explanation_blurb_right">808 <p class="value">809 <b style="color:#009957;">810 SUBMISSIVE811 </b>812 </p>813 <p class="blurb-text">814 Those with higher Submissive scores tend to like being dominated and ordered around.815 </p>816 </div>817 </div>818 <div class="spacer">819 <div class="explanation_blurb_left">820 <p class="value">821 <b style="color:#8300E5;">822 DEVIANT823 </b>824 </p>825 <p class="blurb-text">826 Those with higher Deviant scores tend to have many (extremer) fetishes and kinks.827 </p>828 </div>829 <div class="explanation_axis">830 <p class="axis_name">831 DEVIANCE832 </p>833 <img class="arrow" src="rick.jpg">834 </div>835 <div class="explanation_blurb_right">836 <p class="value">837 <b style="color:#bdbdbd;">838 PURE839 </b>840 </p>841 <p class="blurb-text">842 Those with higher Pure scores tend to not have many fetishes and kinks; generally they look for vanilla experience.843 </p>844 </div>845 </div>846 <div class="spacer">847 <div class="explanation_blurb_left">848 <p class="value">849 <b style="color:#B20000;">850 AFFECTIVE851 </b>852 </p>853 <p class="blurb-text">854 Those with higher Affective scores tend to only be sexual around people they have romantic feelings or other affections to.855 </p>856 </div>857 <div class="explanation_axis">858 <p class="axis_name">859 AFFECTION860 </p>861 <img class="arrow" src="rick.jpg">862 </div>863 <div class="explanation_blurb_right">864 <p class="value">865 <b style="color:#00B2B2;">866 HEDONIST867 </b>868 </p>869 <p class="blurb-text">870 Those with higher Hedonist scores tend to be more open about their sexuality and don't see it as only exclusive to their partner(s).871 </p>872 </div>873 </div>874 <br>875 </div>876 <h3>877 Contact878 </h3>879 <p>880 You can contact me via881 <a>882 censusbot3@gmail.com883 </a>884 ,885 <a>886 Discord887 </a>888 or889 <a>890 Twitter891 </a>892 .893 </p>894 <h3>895 Privacy896 </h3>897 <p>898 This site uses Google Analytics. As well at the end of the test, you will be given the option to fill out general demographic information about yourself.899 </p>900 <h3>901 Licencing902 </h3>903 <p>904 SexValues is licensed under the MIT License, which permits "without restriction" the rights to "use, copy, modify,905 merge, publish, distribute, sublicense, and/or sell906 copies of the Software". Same as 8values license.907 </p>908 <!-- This is the script for the page itself -->909 </body>910</html>911 