Team Ai
Datasetpublic

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.

sourceHugging Faceodc-byupdated 2y agoView on Hugging Face
6likes622downloads
g71.html911 linesDownload Raw Back to root
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