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<html>2 <head>3 <style>4 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,li{display:block}table{border-collapse:separate;border-spacing:0}*,*:after,*:before{padding:0;margin:0;border:0;background-color:transparent;box-sizing:border-box}@media only screen and (max-device-width:960px){html{-webkit-text-size-adjust:none}}input:invalid,textarea:invalid{box-shadow:none}button::-moz-focus-inner{border:0;padding:0}a:link{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}*:focus,button{outline:none}@font-face{font-family:'Whitney-Bold';font-display:auto;src:url('../fonts/Whitney-Bold.woff2') format('woff2'),url('../fonts/Whitney-Bold.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Whitney-BoldItalic';font-display:auto;src:url('../fonts/Whitney-BoldItalic.woff2') format('woff2'),url('../fonts/Whitney-BoldItalic.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Whitney-Book';font-display:auto;src:url('../fonts/Whitney-Book.woff2') format('woff2'),url('../fonts/Whitney-Book.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Whitney-BookItalic';font-display:auto;src:url('../fonts/Whitney-BookItalic.woff2') format('woff2'),url('../fonts/Whitney-BookItalic.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Whitney-Light';font-display:auto;src:url('../fonts/Whitney-Light.woff2') format('woff2'),url('../fonts/Whitney-Light.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Whitney-LightItalic';font-display:auto;src:url('../fonts/Whitney-LightItalic.woff2') format('woff2'),url('../fonts/Whitney-LightItalic.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Whitney-Medium';font-display:auto;src:url('../fonts/Whitney-Medium.woff2') format('woff2'),url('../fonts/Whitney-Medium.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Whitney-MediumItalic';font-display:auto;src:url('../fonts/Whitney-MediumItalic.woff2') format('woff2'),url('../fonts/Whitney-MediumItalic.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Whitney-Semibold';font-display:auto;src:url('../fonts/Whitney-Semibold.woff2') format('woff2'),url('../fonts/Whitney-Semibold.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Whitney-SemiboldItalic';font-display:auto;src:url('../fonts/Whitney-SemiboldItalic.woff2') format('woff2'),url('../fonts/Whitney-SemiboldItalic.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'MoskBold700';font-display:auto;src:url('../fonts/MoskBold700.woff2') format('woff2'),url('../fonts/MoskBold700.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'MoskExtra-Bold800';font-display:auto;src:url('../fonts/MoskExtra-Bold800.woff2') format('woff2'),url('../fonts/MoskExtra-Bold800.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'MoskExtra-Light200';font-display:auto;src:url('../fonts/MoskExtra-Light200.woff2') format('woff2'),url('../fonts/MoskExtra-Light200.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'MoskLight300';font-display:auto;src:url('../fonts/MoskLight300.woff2') format('woff2'),url('../fonts/MoskLight300.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'MoskMedium500';font-display:auto;src:url('../fonts/MoskMedium500.woff2') format('woff2'),url('../fonts/MoskMedium500.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'MoskNormal400';font-display:auto;src:url('../fonts/MoskNormal400.woff2') format('woff2'),url('../fonts/MoskNormal400.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'MoskSemi-Bold600';font-display:auto;src:url('../fonts/MoskSemi-Bold600.woff2') format('woff2'),url('../fonts/MoskSemi-Bold600.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'MoskThin100';font-display:auto;src:url('../fonts/MoskThin100.woff2') format('woff2'),url('../fonts/MoskThin100.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'MoskUltra-Bold900';font-display:auto;src:url('../fonts/MoskUltra-Bold900.woff2') format('woff2'),url('../fonts/MoskUltra-Bold900.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Corporate-Logo-Rounded';font-display:auto;src:url('../fonts/Corporate-Logo-Rounded.woff2') format('woff2'),url('../fonts/Corporate-Logo-Rounded.woff') format('woff');font-weight:normal;font-style:normal}html{font-size:62.5%;min-width:320px}body{min-height:100vh;min-width:320px;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;color:#625868;background-color:#96c}body,input,button{font-family:"Whitney-Book",Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}input[type="text"]::-webkit-input-placeholder,input[type="email"]::-webkit-input-placeholder{color:#625868}input[type="text"]:-moz-placeholder,input[type="email"]:-moz-placeholder{color:#625868}input[type="text"]::-moz-placeholder,input[type="email"]::-moz-placeholder{color:#625868}input[type="text"]:-ms-input-placeholder,input[type="email"]:-ms-input-placeholder{color:#625868}select{-moz-appearance:none;-webkit-appearance:none;position:relative;cursor:pointer;padding-top:6.5px;padding-bottom:6.5px}select::-ms-expand{display:none}.irp{position:absolute;left:-9999px;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px}.hide{display:none}.disabled{opacity:.33;cursor:default}.o_10{opacity:.1}.o_20{opacity:.2}.o_30{opacity:.3}.o_40{opacity:.4}.o_50{opacity:.5}.o_60{opacity:.6}.o_70{opacity:.7}.o_80{opacity:.8}.o_90{opacity:.9}.o_100{opacity:1}.left{text-align:left}.center{text-align:center}.right{text-align:right}.space>*{margin-bottom:30px}.space>.reset{margin-bottom:0}.space>*:last-child{margin-bottom:0}.space>.blockquote:not(.no_bubble){margin-bottom:15px}.btn a{font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;font-size:18px;text-transform:uppercase;padding:6.5px 20px;text-align:center;transition:all .3s ease-in-out;background-position:0 -40px;background-size:1px 80px;display:inline-block;vertical-align:top;border-radius:5px;box-shadow:0 1px 1px rgba(98,88,104,0.04),0 2px 2px rgba(98,88,104,0.04),0 4px 4px rgba(98,88,104,0.04),0 8px 8px rgba(98,88,104,0.04),0 16px 16px rgba(98,88,104,0.04);text-decoration:none}.btn a:hover{background-position:0 0}.bg_link{display:inline-block;vertical-align:middle;position:relative;text-transform:uppercase;text-decoration:none;font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;color:#96c;margin:0 10px -2px}.bg_link span{position:relative}.bg_link:before{display:block;content:"";position:absolute;left:-10px;top:-3px;width:calc(100% + 20px);height:calc(100% + 6px);background-color:#fad900;z-index:0;transform:rotate(-1.5deg);transition:background-color .3s ease-in-out}.bg_link:hover:before{background-color:#ffee7b}.bg_link.nocase{text-transform:none}.bg_link.reverse{color:#fff}.bg_link.reverse:before{background-color:#96c}.bg_link.reverse:hover:before{background-color:#a679d2}.bg_link.var{color:#fad900}.bg_link.var:before{background-color:#669933}.bg_link.var:hover:before{background-color:#73ac39}.bg_link.rogue{color:#fff}.bg_link.rogue:before{background-color:#e34439}.bg_link.rogue:hover:before{background-color:#e6594f}.bg_link.grey{color:#625868;text-transform:none;font-family:"MoskNormal400",Arial,Helvetica,sans-serif}.bg_link.grey:before{background-color:#edebee}.bg_link.grey:hover:before{background-color:#e0dde2}.bg_link.dark_grey{color:#fff;text-transform:none}.bg_link.dark_grey:before{background-color:#625868}.bg_link.dark_grey:hover:before{background-color:#554d5a}.c1{color:#625868}.c2{color:#96c}.c3{color:#fad900}.c4{color:#edebee}.c5{color:#e34439}.c6{color:#669933}.c7{color:#E0DDE2}.c8{color:#fff}.c9{color:#2F76FB}.c10{color:#FF8B17}.content .c1{color:#625868}.content .c2{color:#96c}.content .c3{color:#fad900}.content .c4{color:#edebee}.content .c5{color:#e34439}.content .c6{color:#669933}.content .c7{color:#E0DDE2}.content .c8{color:#fff}.content .c9{color:#2F76FB}.content .c10{color:#FF8B17}.col50,.col33,.col66{max-width:600px;margin-left:auto;margin-right:auto;margin-bottom:30px}.col50:last-child,.col33:last-child,.col66:last-child{margin-bottom:0}.accordion li{position:relative}.accordion li+li{margin-top:-1px}.accordion li>input{position:absolute;opacity:0;pointer-events:none}.accordion .select{display:block;cursor:pointer;font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal;padding:7px 50px 7px 10px;width:100%;font-size:16px;border:1px solid #E0DDE2;color:#625868;transition:color .3s ease-in-out;user-select:none}.accordion .select:hover,.accordion li>input:checked+.select{color:#96c}.content .accordion .select:after{top:12px}.accordion .answer{border-left:1px solid #E0DDE2;border-right:1px solid #E0DDE2;background-color:#f9f9f9;max-height:0px;overflow:hidden}.accordion .answer p{padding:30px}.accordion .answer p+p{padding-top:0}.accordion li>input:checked+.select:after{transform:rotate(-135deg);top:16px}.accordion li>input:checked~.answer{max-height:999em;overflow:visible}.accordion li:last-child>input:checked~.answer{border-bottom:1px solid #E0DDE2}.inline_toggle{position:absolute;opacity:0;pointer-events:none}.inline_toggle+.more{max-height:0px;overflow:hidden;margin-bottom:0}.inline_toggle:checked+.more{max-height:999em;overflow:visible;margin-bottom:30px;padding-left:15px;border-left:1px solid #E0DDE2}.expand span{display:inline-block;vertical-align:top;transform:rotate(180deg) scale(1.5);transform-origin:center 7px;line-height:1}.content h2.title{box-decoration-break:clone;padding:3px 8px;color:#fad900;transform:rotate(-1.5deg)}.content h2.bg_purple{background-color:#96c}.content h2.bg_purple.white{color:#fff}.content h2.bg_yellow{background-color:#fad900;color:#96c}.content h2.bg_grey{background-color:#625868;color:#fff}.content h2.bg_orange{background-color:#FF8B17;color:#fff}.content h2.bg_green{background-color:#669933;color:#fff}.content h2.bg_blue{background-color:#2F76FB;color:#fff}.content h2.bg_red{background-color:#e34439}.content h2{text-transform:uppercase;font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;font-size:25px}.content h3{font-size:20px;font-family:"Whitney-Medium",Arial,Helvetica,sans-serif}.content h3 strong{font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal}.content h4{font-family:"Whitney-MediumItalic",Arial,Helvetica,sans-serif;font-style:normal}.content h4 strong{font-family:"Whitney-BoldItalic",Arial,Helvetica,sans-serif;font-weight:normal;font-style:normal}.content small{display:block}.content .small,.content small{font-size:14px}.content .large{font-size:20px}.content h2 a,.content h3 a,.content h4 a{text-decoration:none}.content p strong,.content li strong,.content td strong,.content .msg strong{font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal}.content p strong em,.content li strong em,.content td strong em,.content .msg strong em,.content p em strong,.content li em strong,.content td em strong,.content .msg em strong{font-family:"Whitney-SemiboldItalic",Arial,Helvetica,sans-serif;font-weight:normal;font-style:normal}.content p em,.content li em,.content td em,.content .msg em{font-family:"Whitney-BookItalic",Arial,Helvetica,sans-serif;font-style:normal}.content .msg+.msg{margin-top:-25px}.content a{color:#96c;transition:all .3s ease-in-out;text-decoration-color:#96c;text-decoration-thickness:2px}.content a:hover{color:#b38cd9}.content .u_grey{text-decoration-color:#625868}.content .u_yellow{text-decoration-color:#fad900}.content .u_purple{text-decoration-color:#96c}.content label.u_grey{text-decoration:underline;text-decoration-color:#625868;text-decoration-thickness:2px}.content label.u_yellow{text-decoration:underline;text-decoration-color:#fad900;text-decoration-thickness:2px}.content label.u_purple{text-decoration:underline;text-decoration-color:#96c;text-decoration-thickness:2px}.content hr{height:1px;background-color:#E0DDE2}.content hr:nth-of-type(odd){transform:rotate(.5deg)}.content hr:nth-of-type(even){transform:rotate(-0.5deg)}.content ul:not(.basic)>li{text-indent:-13px;margin-left:30px;margin-bottom:8px}.content ul:not(.basic)>li:before{content:"⢠";font-family:Arial,Helvetica,sans-serif;font-size:20px;font-size:2rem;position:relative;top:2px;left:-13px;color:#96c}.content ul:not(.basic)>li:last-child{margin-bottom:0}.content ul:not(.basic)>li ol{margin-left:5px}.content ul:not(.basic)>li ol li{text-indent:0}.content ul:not(.basic)>.separate{margin-top:20px}.content ol{list-style:none;counter-reset:true}.content ol li{counter-increment:true;text-indent:-13px;margin-left:30px;margin-bottom:8px}.content ol li:before{content:counter(true);display:inline-block;position:relative;left:-9px;color:#96c;width:13px;text-align:center;font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal}.content ol ol{margin-left:5px}.content ul ul,.content ol ol,.content ol ul,.content ul ol{margin-top:8px}.content img{display:block;width:100%;height:auto}.content .img_med{width:75%}.content .img_sml{width:50%}.content img.right{margin-left:auto}.content img.center{margin-left:auto;margin-right:auto}.content .embed{position:relative;padding-bottom:56.25%;overflow:hidden;max-width:100%;height:auto}.content .embed iframe,.content .embed object,.content .embed embed{position:absolute;top:0;left:0;width:100%;height:100%}.content video{width:100%;height:auto;display:block}.content audio{width:100%}.content video.right,.content .video.right{margin-left:auto}.content video.center,.content .video.center{margin-left:auto;margin-right:auto}.content table{border:1px solid #E0DDE2;margin:0 auto;width:100%}.content table td,.content table th{padding:8px 10px;vertical-align:top;text-align:left}.content table th{font-weight:normal;background-color:#edebee}.content table td+td,.content table th+th{border-left:1px solid #E0DDE2}.content table tr~tr>td{border-top:1px solid #E0DDE2}.content .msg{padding:8px 10px;background-color:#f9f9f9}.content .msg.border{background-color:#fff;border:1px solid #edebee}.content .msg.error{background-color:#e34439;color:#fff}.content .msg.error a{color:#fff}.content .msg.notice{background-color:#625868;color:#fff}.content .msg.notice a{color:#fff}.content .msg.warning{background-color:#fad900}.content .msg.success{background-color:#669933;color:#fff}.content .msg.success a{color:#fff}.content blockquote{padding:30px;border-radius:10px;position:relative}.content blockquote p{font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal}.content blockquote:after{display:block;content:"";border-top:25px solid transparent;border-right:25px solid transparent;position:absolute;top:calc(100% - 1px);left:60px}.content blockquote.yellow{background-color:#fad900}.content blockquote.yellow:after{border-top-color:#fad900}.content blockquote.purple{background-color:#96c;color:#fad900}.content blockquote.purple:after{border-top-color:#96c}.content blockquote.grey{background-color:#edebee}.content blockquote.grey:after{border-top-color:#edebee}.content blockquote.dark{background-color:#625868;color:#fff}.content blockquote.dark:after{border-top-color:#625868}.content blockquote.reverse:after{border-right:none;border-left:25px solid transparent;left:auto;right:60px}.content blockquote+footer{margin-top:45px;font-size:14px;margin-left:30px;font-family:"Whitney-BookItalic",Arial,Helvetica,sans-serif;font-style:normal}.content blockquote.reverse+footer{text-align:right;margin-left:0;margin-right:30px}.content .no_bubble blockquote{padding:0;border-radius:0}.content .no_bubble blockquote:after{display:none}.content .no_bubble blockquote+footer{margin-left:0;margin-top:7.5px}.content form label{display:block}.content form .type_text,.content form select{background-color:#fff;font-family:"Whitney-Medium",Arial,Helvetica,sans-serif;color:#625868;padding:0 10px;height:40px;width:100%;border:1px solid #E0DDE2;font-size:16px}.content form select{font-size:16px;padding:0 6px}.content form .med{width:75%}.content form .sml{width:50%}.content form fieldset{margin-bottom:15px}.content form textarea.type_text{min-height:150px;resize:vertical;padding:10px}.content form .checkbox{display:inline-block;vertical-align:top;margin-right:1px;margin-bottom:1px;position:relative}.content form .checkbox input{position:absolute;top:0;left:0;opacity:0;pointer-events:none}.content form .checkbox label{display:block;cursor:pointer;padding:8px 10px;background-color:#f9f9f9;border-radius:5px}.content form .checkbox label:before{display:inline-block;vertical-align:middle;content:"";text-align:center;line-height:7px;width:13px;height:13px;margin-right:10px;position:relative;top:-2px;background-color:#fff;border:1px solid #E0DDE2}.content form .tickbox input:checked+label:before{content:"â";color:#96c;font-family:Arial,Helvetica,sans-serif;text-indent:2px}.content form .radio label:before{border-radius:100%}.content form .radio input:checked+label:before{background-color:#96c;border:1px solid #96c}.content form label.error{color:#e34439 !important}.content form label.error+.input>*{border:1px solid #e34439}.content form .med+*{width:75%}.content form .sml+*{width:50%}.content .select{position:relative}.content .select:after{display:block;content:"";display:inline-block;vertical-align:middle;width:10px;height:10px;border-right:2px solid #96c;border-bottom:2px solid #96c;transform:rotate(45deg);position:absolute;top:calc(50% - 7px);right:12px}.content button,.content .button{background-image:linear-gradient(to top, #96c 0%, #ccb3e6 50%);padding:6.5px 20px;text-align:center;transition:all .3s ease-in-out;background-position:0 -40px;background-size:1px 80px;height:40px;cursor:pointer;font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;font-size:18px;text-transform:uppercase;color:#fff;margin-right:5px}.content button:hover,.content .button:hover{background-position:0 0}.content button:last-child,.content .button:last-child{margin-right:0}.content .button{text-decoration:none;display:inline-block;vertical-align:top}.content .button:hover{color:#fff}.content .cancel{background-image:linear-gradient(to top, #625868 0%, #958a9c 50%)}.anchor_nav .bg_link{margin-left:0;margin-bottom:8px}.anchor{position:relative;top:-145px}.image_slider .prev{left:-10px}.image_slider .next{right:-10px}.image_slider.right{margin-left:auto}.image_slider.center{margin-left:auto;margin-right:auto}.grid_slider .prev{left:-10px}.grid_slider .next{right:-10px}main{background-color:#fff}.container{max-width:1200px;margin-left:auto;margin-right:auto;padding:15px}[class*="max"]{margin-left:auto;margin-right:auto}.max1100{max-width:1100px}.max1000{max-width:1000px}.max900{max-width:900px}.max800{max-width:800px}.max700{max-width:700px}.max600{max-width:600px}.max500{max-width:500px}.max400{max-width:400px}.find_bar{position:fixed;top:0;left:0;width:calc(100vw - (100vw - 100%));box-shadow:0 1px 1px rgba(98,88,104,0.04),0 2px 2px rgba(98,88,104,0.04),0 4px 4px rgba(98,88,104,0.04),0 8px 8px rgba(98,88,104,0.04),0 16px 16px rgba(98,88,104,0.04);background-color:#E0DDE2;min-height:101px;font-family:"Whitney-Medium",Arial,Helvetica,sans-serif;min-width:320px;z-index:5;color:#625868}.find_bar .container{padding:7.5px}.find_bar form input{background-color:#fff;font-size:calc(13px + (16 - 13) * ( (100vw - 320px) / ( 500 - 320 ) ))}.find_bar form button{background-image:linear-gradient(to top, #edebee 0%, #fff 50%);border-left:1px solid #E0DDE2}.find_bar form button:after{background-image:url('../img/search_purple.svg')}.find_bar form+div{width:100%;margin:5px 0 0 0;font-size:calc(13px + (17.5 - 13) * ( (100vw - 500px) / ( 1024 - 500 ) ));text-align:center}.find_bar form+div h3{display:block;margin-top:3px}.find_bar form+div li{display:inline-block;vertical-align:middle;margin:0 10px}.find_bar form+div li:first-child{margin-left:0}.find_bar form+div li:last-child{margin-right:0}.find_bar form+div a{font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;text-decoration:none;color:#96c;transition:color .3s ease-in-out}.find_bar form+div a:hover{color:#625868}.search{position:relative}.search input{padding:0 50px 0 7.5px;width:100%;font-family:"Whitney-Medium",Arial,Helvetica,sans-serif;height:40px}.search button{background-image:linear-gradient(to top, #96c 0%, #ccb3e6 50%);padding:6.5px 20px;text-align:center;transition:all .3s ease-in-out;background-position:0 -40px;background-size:1px 80px;border-left:1px solid #fff;height:40px;cursor:pointer;position:absolute;top:0;right:0}.search button:hover{background-position:0 0}.search button:after{display:block;content:"";background-repeat:no-repeat;background-position:50%;background-size:20px 20px;background-image:url('../img/search_white.svg');width:20px;height:20px;position:absolute;top:calc(50% - 20px/2);left:calc(50% - 20px/2);pointer-events:none}#menu_toggle{position:absolute;top:0;left:0;opacity:0;cursor:default;pointer-events:none}#menu{font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;font-size:18px;text-transform:uppercase;background-image:linear-gradient(to top, #625868 0%, #958a9c 50%);padding:6.5px 20px;text-align:center;transition:all .3s ease-in-out;background-position:0 -40px;background-size:1px 80px;display:inline-block;vertical-align:top;border-radius:5px;box-shadow:0 1px 1px rgba(98,88,104,0.04),0 2px 2px rgba(98,88,104,0.04),0 4px 4px rgba(98,88,104,0.04),0 8px 8px rgba(98,88,104,0.04),0 16px 16px rgba(98,88,104,0.04);cursor:pointer;color:rgba(255,255,255,0);margin-top:15px;width:40px;letter-spacing:-15px;position:relative}#menu:hover{background-position:0 0}#menu:before,#menu:after,#menu span:before{display:block;content:"";width:14px;height:2px;background-color:#fff;position:absolute;left:13px}#menu:before{top:14px}#menu:after{top:50%;margin-top:-1px}#menu span:before{bottom:14px}#menu ::-moz-selection{background:rgba(0,0,0,0);color:rgba(0,0,0,0)}#menu ::selection{background:rgba(0,0,0,0);color:rgba(0,0,0,0)}.header{position:relative;padding-top:101px;z-index:4;background-color:#96c}.header>*{position:relative}.header a{text-decoration:none}h1{width:194px;height:100px;margin:0 auto;position:relative;z-index:1}h1 a{display:block;width:100%;height:100px;background:url('../img/logo.png') no-repeat 50% / 194px 100px;transition:opacity .3s ease-in-out}h1 a:hover{opacity:.75}.nav{position:absolute;top:-9999px;left:-9999px;margin-top:15px;width:100%;display:flex;flex-direction:column;justify-content:space-between;z-index:1}.nav:before{display:block;content:"";width:calc(100vw - (100vw - 100%));position:absolute;top:0;bottom:auto;left:0;height:1px;background-color:#fff;transform:rotate(-1deg);opacity:.25}.nav>li.active>a,.nav>li.active label{background:url('../img/line2_yellow.svg') no-repeat 50% 100%;color:#fad900;position:relative;cursor:default}.nav>li.has_sub.active label{cursor:pointer}.nav a,.nav label{color:#fff}.nav>li>a,.nav>li label{font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;font-size:18px;text-transform:uppercase;display:block;text-align:center;padding:15px;transition:color .3s ease-in-out}.nav>li>a:hover,.nav>li label:hover{color:#fad900}.nav label{cursor:pointer;position:relative}.nav label span:after{display:block;content:"";display:inline-block;vertical-align:middle;width:10px;height:10px;border-right:2px solid #fad900;border-bottom:2px solid #fad900;transform:rotate(45deg) translate(0, -6px);margin-left:5px}.nav input:checked+label span:after{border-right:none;border-bottom:none;border-left:2px solid #fad900;border-top:2px solid #fad900;transform:rotate(45deg) translate(3px, -3px)}.nav .has_sub{position:relative}.nav ul{position:absolute;top:-9999px;left:-9999px;width:calc(100% + 15px + 15px);margin:10px 0 10px -15px;background-color:#edebee;box-shadow:0 5px 5px -5px rgba(98,88,104,0.5)}.nav ul a{font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;text-transform:lowercase;display:block;padding:5px 15px;text-align:center;color:#96c;border-bottom:1px solid rgba(98,88,104,0.1);transition:color .3s ease-in-out}.nav ul a:hover{color:#625868}.nav ul li:first-child a{padding-top:15px}.nav ul li:last-child a{border-bottom:none;padding-bottom:15px}.nav input:checked~ul{position:static;top:auto;left:auto}.nav input{position:absolute;top:0;left:0;opacity:0;cursor:default;pointer-events:none}#menu_toggle:checked+.header #menu:after{opacity:0}#menu_toggle:checked+.header #menu:before,#menu_toggle:checked+.header #menu span:before{transform-origin:0 50%;width:14px;left:15px}#menu_toggle:checked+.header #menu:before{transform:rotate(45deg)}#menu_toggle:checked+.header #menu span:before{transform:rotate(-45deg)}#menu_toggle:checked+.header .nav{position:static;top:auto;left:auto;position:relative}.members{box-shadow:0 1px 1px rgba(98,88,104,0.04),0 2px 2px rgba(98,88,104,0.04),0 4px 4px rgba(98,88,104,0.04),0 8px 8px rgba(98,88,104,0.04),0 16px 16px rgba(98,88,104,0.04);border-radius:5px;width:calc(100% - 45px - 15px*2);position:absolute;top:130px;right:15px}.members li{display:inline-block;vertical-align:top}.members li:first-child a{margin-bottom:0;border-radius:5px 0 0 5px;border-right:1px solid rgba(98,88,104,0.15)}.members li:last-child a{border-radius:0 5px 5px 0;border-left:1px solid rgba(255,255,255,0.75)}.members li:only-child a{border-radius:5px;border:none}.members li{width:50%}.members li:only-child{width:100%}.members a{font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;font-size:18px;text-transform:uppercase;background-image:linear-gradient(to top, #edebee 0%, #fff 50%);padding:6.5px 20px;text-align:center;transition:all .3s ease-in-out;background-position:0 -40px;background-size:1px 80px;font-size:15px;padding-top:8.75px;padding-bottom:8.75px;display:block;color:#96c}.members a:hover{background-position:0 0}.members a:hover{color:#625868}.intro{text-align:center;position:relative}.intro>*{max-width:400px;margin-left:auto;margin-right:auto}.intro:before{display:block;content:"";width:calc(100vw - (100vw - 100%));position:absolute;top:auto;bottom:25px;left:0;height:1px;background-color:#E0DDE2;transform:rotate(-1deg);opacity:1}.intro .container>div:first-child{position:relative}.intro input{position:absolute;bottom:0;left:0;pointer-events:none;opacity:0}.intro .drawings{display:inline-block;vertical-align:middle;max-width:200px;pointer-events:none}.intro .items{padding:0 15px;color:#96c;margin:15px 0}.intro .items h3{font-size:calc(15px + (20 - 15) * ( (100vw - 320px) / ( 768 - 320 ) ));line-height:1.2;margin-bottom:10px}.intro .items h2{font-size:calc(22px + (35 - 22) * ( (100vw - 320px) / ( 768 - 320 ) ));line-height:1.2;font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;max-width:400px;margin-left:auto;margin-right:auto}.intro .items .slick-dots{margin-top:15px}.intro .items .slick-dots li{display:inline-block;vertical-align:middle;width:15px;height:15px;border:2px solid #fad900;border-radius:100%;margin:0 5px;cursor:pointer}.intro .items .slick-dots li button{font-size:1px;opacity:0}.intro .items .slick-dots .slick-active{border:none;background-color:#fad900}.intro .bg_link{display:block;margin-top:30px;max-width:190px;margin-left:auto;margin-right:auto}.drawings span{display:inline-block;vertical-align:middle;width:calc(33.33333333333333% + 40px);position:relative}.drawings span:after{display:block;content:"";width:125px;height:35px;position:absolute;background:url('../img/tape.svg') no-repeat;opacity:.05}.drawings span:nth-child(2){z-index:1}.drawings span:nth-child(2),.drawings span:nth-child(3){margin-left:-60px}.drawings img{display:block;width:100%;height:auto}.drawings_set_1 span:nth-child(1){transform:rotate(3deg);box-shadow:1px 1px 3px 0 rgba(98,88,104,0.015),0 1px 2px rgba(98,88,104,0.015),0 2px 4px rgba(98,88,104,0.015),0 4px 8px rgba(98,88,104,0.015),0 8px 16px rgba(98,88,104,0.015),0 16px 32px rgba(98,88,104,0.015),0 32px 64px rgba(98,88,104,0.015)}.drawings_set_1 span:nth-child(1):after{transform:rotate(15deg);left:10%;top:-15%}.drawings_set_1 span:nth-child(2){transform:rotate(-3deg);margin-top:50px;box-shadow:1px 1px 3px 0 rgba(98,88,104,0.015),0 -1px 2px rgba(98,88,104,0.015),0 -2px 4px rgba(98,88,104,0.015),0 -4px 8px rgba(98,88,104,0.015),0 -8px 16px rgba(98,88,104,0.015),0 -16px 32px rgba(98,88,104,0.015),0 -32px 64px rgba(98,88,104,0.015)}.drawings_set_1 span:nth-child(2):after{transform:rotate(-10deg) scale(.8);bottom:-10%;right:-20%}.drawings_set_1 span:nth-child(3){transform:rotate(4deg);margin-top:-50px;box-shadow:1px 1px 3px 0 rgba(98,88,104,0.015),0 1px 2px rgba(98,88,104,0.015),0 2px 4px rgba(98,88,104,0.015),0 4px 8px rgba(98,88,104,0.015),0 8px 16px rgba(98,88,104,0.015),0 16px 32px rgba(98,88,104,0.015),0 32px 64px rgba(98,88,104,0.015)}.drawings_set_1 span:nth-child(3):after{transform:rotate(-2deg) scale(.8);top:-10%;right:10%}.drawings_set_2 span:nth-child(1){transform:rotate(-6deg);margin-top:-50px;box-shadow:1px 1px 3px 0 rgba(98,88,104,0.015),0 1px 2px rgba(98,88,104,0.015),0 2px 4px rgba(98,88,104,0.015),0 4px 8px rgba(98,88,104,0.015),0 8px 16px rgba(98,88,104,0.015),0 16px 32px rgba(98,88,104,0.015),0 32px 64px rgba(98,88,104,0.015)}.drawings_set_2 span:nth-child(1):after{transform:rotate(5deg) scale(1, .8);right:-10%;top:-10%}.drawings_set_2 span:nth-child(2){transform:rotate(3deg);margin-top:40px;box-shadow:1px 1px 3px 0 rgba(98,88,104,0.015),0 -1px 2px rgba(98,88,104,0.015),0 -2px 4px rgba(98,88,104,0.015),0 -4px 8px rgba(98,88,104,0.015),0 -8px 16px rgba(98,88,104,0.015),0 -16px 32px rgba(98,88,104,0.015),0 -32px 64px rgba(98,88,104,0.015)}.drawings_set_2 span:nth-child(2):after{transform:rotate(15deg);left:-15%;bottom:-10%}.drawings_set_2 span:nth-child(3){transform:rotate(10deg);margin-top:10px;box-shadow:1px 1px 3px 0 rgba(98,88,104,0.015),0 -1px 2px rgba(98,88,104,0.015),0 -2px 4px rgba(98,88,104,0.015),0 -4px 8px rgba(98,88,104,0.015),0 -8px 16px rgba(98,88,104,0.015),0 -16px 32px rgba(98,88,104,0.015),0 -32px 64px rgba(98,88,104,0.015)}.drawings_set_2 span:nth-child(3):after{transform:rotate(-15deg) scale(.6, 1);right:-20%;bottom:-10%}.title,.title a{text-transform:uppercase;font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;font-size:25px;display:inline-block;vertical-align:middle;color:#625868;text-decoration:none}.rotd,.featured,.by_grade ul{text-align:center;max-width:400px;margin-left:auto;margin-right:auto}@keyframes shake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}.features .rotd .review{background-color:#edebee;margin-top:15px;border-radius:10px;padding:15px}.features .rotd .review .details h3:after{background:url('../img/line_purple.svg') no-repeat;width:58px;height:24px;left:-24px}.features .rotd .review hgroup h3 span{background-color:#fff}.features .featured{margin-top:15px}.features .featured>div{margin-top:15px;margin-right:-10px;margin-left:-10px}.features .featured .review{display:inline-block;vertical-align:top;width:50%;padding-left:10px;padding-right:10px}.features .featured .review>div{border:3px solid #E0DDE2;border-radius:10px;padding:13px}.features .featured .review .details h3:before{display:block;content:"";width:9px;height:8px;background-color:#fff;position:absolute;top:9px;left:-18px;transform:rotate(50deg)}.features .featured .review .details h3:after{background-image:url('../img/line_grey.svg');left:-16px;height:14px;width:50px}.features .featured .review .details h3 strong:before{display:block;content:"";width:3px;height:5px;background-color:#fff;position:absolute;top:14px;left:-18px}.features .featured .slick-slider,.features .featured .slick-list,.features .featured .slick-track{height:100%}.features .review hgroup{text-align:center}.features .review hgroup h2{font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;font-size:25px;transform:rotate(-1.5deg)}.features .review hgroup h2 a{text-decoration:none;background-color:#96c;color:#fad900;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:3px 8px}.features .review hgroup h3{transform:rotate(1.5deg) translate(0, 12px)}.features .review hgroup h3 span{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:5px 8px;background-color:#edebee;position:relative}.features .review img{display:block;width:100%;height:auto}.features .review img:hover{animation:shake .9s cubic-bezier(.4, 0, .2, 1) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}.features .review h3 strong{font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal}.features .review .details{text-align:left}.features .review .details h3{color:#96c;position:relative;padding-left:40px}.features .review .details h3 strong{display:inline-block}.features .review .details h3:after{display:block;content:"";display:inline-block;vertical-align:middle;position:absolute;top:5px}.features .slick-slider:before,.features .slick-slider:after{display:block;content:"";width:10px;height:calc(100% + 10px);background-color:#fff;position:absolute;top:-5px;z-index:1}.features .slick-slider:before{left:-1px}.features .slick-slider:after{right:-1px}.features .prev{left:0}.features .next{right:0}.by_grade{margin-top:-15px;text-align:center}.by_grade li{margin-top:15px}.by_grade img{display:block;width:100%;height:auto;max-width:300px;margin-left:auto;margin-right:auto}.by_grade img:hover{animation:shake .9s cubic-bezier(.4, 0, .2, 1) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}.by_grade h2{margin-bottom:-5px;text-transform:uppercase;margin-left:-1.5px;font-size:20px;position:relative;z-index:1}.by_grade a{text-decoration:none;color:#96c}.featured_members{margin-top:-15px;text-align:center}.featured_members hgroup{margin-top:15px}.featured_members hgroup+.bg_link{margin-top:30px}.featured_members .members_slider{margin-top:30px}.featured_members .members_slider a,.featured_members .members_slider div>img{display:inline-block;vertical-align:top;width:12.5%}.featured_members .members_slider a img{display:block;width:100%;height:auto}.featured_members p{margin-top:7.5px}.featured_members .prev{left:-10px}.featured_members .next{right:-10px}.featured_testimonials{position:relative;margin:7.5px 0 15px;text-align:center;background-color:#edebee}.featured_testimonials>*{position:relative}.featured_testimonials .quotes_fader{max-width:800px;margin-left:auto;margin-right:auto;margin-top:15px}.featured_testimonials p{font-size:calc(16px + (25 - 16) * ((100vw - 320px) / (1200 - 320)));margin-bottom:15px;color:#625868;font-family:"Whitney-Medium",Arial,Helvetica,sans-serif}.featured_testimonials p .bg_link{font-size:16px}.featured_testimonials footer{line-height:1.2}.featured_testimonials cite{display:inline-block;vertical-align:top}.featured_testimonials .author{font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal;display:block;margin-bottom:3px;color:#96c}.featured_testimonials .school,.featured_testimonials .club,.featured_testimonials .location{font-size:calc(12px + (14 - 12) * ((100vw - 320px) / (1200 - 320)));padding:0 2.5px;color:#625868}.featured_testimonials .slick-dots{margin-top:15px}.featured_testimonials .slick-dots li{display:inline-block;vertical-align:middle;width:15px;height:15px;border:2px solid #96c;border-radius:100%;margin:0 5px;cursor:pointer}.featured_testimonials .slick-dots li button{font-size:1px;opacity:0}.featured_testimonials .slick-dots .slick-active{border:none;background-color:#96c}.featured_testimonials:last-child{padding-bottom:30px;margin-bottom:-30px}.features .title,.by_grade .title,.featured_members .title{margin:0 5px}.testimonials .col50:nth-child(odd) blockquote{transform:rotate(1deg)}.testimonials .col50:nth-child(even) blockquote{transform:rotate(-1deg)}.memberships{text-align:center}.memberships>li{background-color:#f9f9f9;margin-bottom:2px}.memberships>li>*{padding:20px}.memberships>li h3{font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal}.memberships>li>h4{padding-top:0;margin-top:-20px;border-bottom:2px solid #edebee;font-family:"Whitney-SemiboldItalic",Arial,Helvetica,sans-serif;font-weight:normal;font-style:normal}.memberships>li li{margin-bottom:0 !important}.memberships>li .c6~ul li:before{color:#669933}.memberships>li .c9~ul li:before{color:#2F76FB}.memberships>li:last-child{margin-bottom:0}.memberships>.special{background-color:#fff;outline:5px solid #fff;box-shadow:0 0 20px 10px rgba(0,0,0,0.05);position:relative}.memberships>.special h4{position:relative}.memberships>.special h4:after{display:block;content:"";height:2px;background-color:#edebee;width:calc(100% + 12px);position:absolute;top:100%;left:-6px}.memberships .bg_link{width:calc(100% - 20px);text-align:center;max-width:253.33333px;margin-bottom:5px}.memberships .c6~p .bg_link{color:#fff}.memberships .c6~p .bg_link:before{background-color:#669933}.memberships .c2~p .bg_link{color:#fff}.memberships .c2~p .bg_link:before{background-color:#96c}.memberships .c9~p .bg_link{color:#fff}.memberships .c9~p .bg_link:before{background-color:#2F76FB}.memberships td{background-color:#fff}.memberships .table+.table{margin-top:-20px}.footer{padding-top:15px;position:relative;z-index:1;color:#fff;background-color:#96c}.footer>*{position:relative;max-width:600px}.footer a{text-decoration:none;color:#fad900;font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal}.footer nav{text-align:center;margin-bottom:30px}.footer nav li{line-height:2}.footer nav li a{display:inline-block;transition:opacity .3s ease-in-out}.footer nav li a:hover{opacity:.5}.footer .copyright{font-size:11px}.footer form{display:inline-block;vertical-align:middle;width:100%;padding:15px;position:relative}.footer form .title{color:#fad900;position:relative;padding-left:30px}.footer form .title:after{display:block;content:"";display:inline-block;vertical-align:middle;background:url('../img/line_yellow.svg') no-repeat;width:50px;height:24px;position:absolute;top:12px;left:-23px}.footer form p{font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal;padding-right:60px}.footer form:before{display:block;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.1);transform:rotate(1deg);border-radius:5px}.footer form>*{position:relative}.footer form input{background-color:#fff;text-align:left;width:100%;padding:0 7.5px;font-family:"Whitney-Medium",Arial,Helvetica,sans-serif;height:40px;margin-bottom:1px}.footer form button{width:110px;background-image:linear-gradient(to top, #edebee 0%, #fff 50%);padding:6.5px 20px;text-align:center;transition:all .3s ease-in-out;background-position:0 -40px;background-size:1px 80px;height:40px;cursor:pointer;font-family:"Whitney-Bold",Arial,Helvetica,sans-serif;font-weight:normal;font-size:18px;text-transform:uppercase;color:#96c;margin-left:auto;display:block}.footer form button:hover{background-position:0 0}.footer form button:hover{color:#625868}.footer .social{width:40px;margin-left:-40px;display:inline-block;vertical-align:top;transform:rotate(-1.5deg) translate(-7.5px, -7.5px)}.footer .social li{margin-bottom:1px}.footer .social a{display:block;width:40px;height:40px;background-color:#fff;background-repeat:no-repeat;background-position:50%;border-radius:5px;position:relative}.footer .social a:after{display:block;content:"";width:35px;height:35px;position:absolute;top:2.5px;left:2.5px;background-color:#fff;opacity:0}.footer .social a:hover:after{opacity:.25}.footer .social .i a{background-image:url('../img/i.svg')}.footer .social .t a{background-image:url('../img/t.svg')}.footer .social .f a{background-image:url('../img/f.svg')}.footer address{margin-top:30px;text-align:center}.footer address a{transition:opacity .3s ease-in-out}.footer address a:hover{opacity:.5}.footer address div{margin-bottom:7.5px}.footer address h4{font-family:"Whitney-Semibold",Arial,Helvetica,sans-serif;font-weight:normal}.footer address ul{margin-top:7.5px}.footer address li:last-child{margin-top:7.5px}.footer_basic{padding-top:0}.footer_basic nav{margin-bottom:0;width:100% !important}.slick-slider{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-slider,.slick-slider *{min-height:0;min-width:0}.slick-list{position:relative;overflow:hidden}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-track,.slick-slide,.slick-slide img{transform:translate3d(0, 0, 0);outline:1px solid transparent}.slick-track{position:relative;left:0;top:0}.slick-track:before,.slick-track:after{content:"";display:table}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden;overflow:hidden}.intro_fader .slick-track,.quotes_fader .slick-track{display:flex}.intro_fader .slick-track .slick-slide,.quotes_fader .slick-track .slick-slide{display:flex;flex-direction:column;height:auto;align-items:center;justify-content:center}.slick-slide{height:100%;min-height:1px}.slick-slide img{display:block}.slick-initialized .slick-slide{display:inline-block;vertical-align:top}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-loading .slick-slide{visibility:hidden}.prev,.next{display:inline-block;vertical-align:top;width:40px;height:40px;border:2px solid #E0DDE2;background-color:#fff;position:absolute;cursor:pointer;border-radius:5px;top:50%;margin-top:-20px;z-index:2;box-shadow:0 1px 1px rgba(98,88,104,0.04),0 2px 2px rgba(98,88,104,0.04),0 4px 4px rgba(98,88,104,0.04),0 8px 8px rgba(98,88,104,0.04),0 16px 16px rgba(98,88,104,0.04)}.prev:after,.next:after{display:block;content:"";width:10px;height:10px;border-right:3px solid #625868;border-bottom:3px solid #625868;transform:rotate(135deg);position:absolute;top:50%;left:50%;margin-left:-4px;margin-top:-5px}.next:after{transform:rotate(-45deg);margin-left:-7px}@media only screen and (min-width:500px){.anchor{top:-135px}.grid33{display:inline-block;vertical-align:top;width:50%}#menu{position:absolute;top:15px;left:15px;z-index:2;margin-top:0;min-width:100px;letter-spacing:0;color:#fff;padding-left:33px}.members{top:15px;right:15px;width:auto;margin-left:0;margin-top:0}.members li{display:block;width:auto}.members a{min-width:100px}.members li:first-child a{border-radius:5px;border-right:none}.members li:last-child a{border-radius:5px;border-left:none}.members li:first-child a{margin-bottom:1px}.find_bar{min-height:90px}.find_bar form input{padding:8px 50px 8px 10px;font-size:16px}.find_bar form+div{display:block}.find_bar form+div h3,.find_bar form+div ul{display:inline-block;vertical-align:bottom}.find_bar form+div h3{margin-right:20px}.header{padding-top:90px}.intro .drawings{max-width:350px}.intro .drawings_set_1{margin-top:5px}.intro .items{margin:30px 0}.by_grade ul{width:calc(100% + 15px);margin-left:-15px;max-width:999em}.by_grade li{display:inline-block;vertical-align:top;width:calc(50% - 15px);margin-left:15px}.by_grade img{max-width:999em}.footer address{text-align:left}.footer address ul{text-align:right;margin-top:-84.5px}}@media only screen and (min-width:600px){.block>.content.max700 video.med,.block>.content.max800 video.med,.block>.content.max900 video.med,.block>.content.max1000 video.med,.block>.content.max1100 video.med,.block>.content.max1200 video.med,.block>.content.max700 .video.med,.block>.content.max800 .video.med,.block>.content.max900 .video.med,.block>.content.max1000 .video.med,.block>.content.max1100 .video.med,.block>.content.max1200 .video.med{width:75%}.block>.content.max700 video.sml,.block>.content.max800 video.sml,.block>.content.max900 video.sml,.block>.content.max1000 video.sml,.block>.content.max1100 video.sml,.block>.content.max1200 video.sml,.block>.content.max700 .video.sml,.block>.content.max800 .video.sml,.block>.content.max900 .video.sml,.block>.content.max1000 .video.sml,.block>.content.max1100 .video.sml,.block>.content.max1200 .video.sml{width:50%}.content form .med{width:50%}.content form .sml{width:25%}.content form .med+*{width:50%}.content form .sml+*{width:25%}.content video.med,.content .video.med{width:75%}.content video.sml,.content .video.sml{width:75%}.intro>*{max-width:1366px}.rotd,.featured{max-width:999em}.rotd,.featured,.by_grade,.featured_members{text-align:left}.rotd .container,.featured .container,.by_grade .container,.featured_members .container{position:relative}.rotd,.featured{position:relative}.rotd .title+.bg_link,.featured .title+.bg_link{position:absolute;top:5px;right:0}.by_grade .title+.bg_link,.featured_members hgroup+.bg_link{position:absolute;top:20px;right:15px;margin-top:0}.features .title,.by_grade .title,.featured_members .title{margin:0}.featured_members .members_slider{margin-top:15px}.footer form input{width:calc(50% - 56px);margin-right:1px}.footer form button{display:inline-block;vertical-align:top}}@media only screen and (min-width:769px){.content h2.title{margin-left:-8px}.col50,.col25,.col29,.col33,.col66,.col71,.col75{display:inline-block;vertical-align:top;max-width:999em;padding-right:30px}.col50{width:50%}.col25,.col29,.col33{width:33.33333%}.col66,.col71,.col75{width:66.66666%}.col50:nth-child(2n),.col25:nth-child(2n),.col29:nth-child(2n),.col33:nth-child(2n),.col66:nth-child(2n),.col71:nth-child(2n),.col75:nth-child(2n){padding-right:0;padding-left:30px}.grid33{display:inline-block;vertical-align:top;width:33.33333%}.short{width:75%}.shorter{width:50%}.sticky{position:sticky;top:120px}#menu{display:none}.container{padding:30px}.nav{flex-direction:row;margin-top:15px;position:static;top:auto;left:auto;min-height:auto}.nav:before{display:none}.nav>li.active>a:before,.nav>li.active label:before,.nav>li.active>a:after,.nav>li.active label:after{display:block;content:"";background:url('../img/line2_yellow.svg') no-repeat 0 0;height:12px;width:5px;position:absolute;bottom:.1px}.nav>li.active>a:before,.nav>li.active label:before{left:-5px}.nav>li.active>a:after,.nav>li.active label:after{right:-5px;background-position:100% 0}.nav>li.active:nth-child(1)>a:before{bottom:.2px}.nav>li.active:nth-child(1)>a:after{bottom:.3px}.nav>li.active:nth-child(4)>a{background-position:43% 100%}.nav>li.active:nth-child(4)>a:before{bottom:.5px}.nav>li.active:nth-child(4)>a:after{bottom:3.2px}.nav .has_sub{position:relative}.nav ul{width:100%;margin:0;border-radius:2px;transform:rotate(-2.2deg)}.nav ul:hover,.nav label:hover~ul,.nav input:checked~ul{position:absolute;top:45px;left:3.5px}.members{border-radius:5px}.members li{display:inline-block;vertical-align:top}.members li:first-child a{margin-bottom:0;border-radius:5px 0 0 5px;border-right:1px solid rgba(98,88,104,0.15)}.members li:last-child a{border-radius:0 5px 5px 0;border-left:1px solid rgba(255,255,255,0.75)}.members li:only-child a{border-radius:5px;border:none}.intro:before{bottom:40px}.intro .container{display:flex;flex-direction:column;justify-content:space-evenly}.intro .drawings{display:inline-block;vertical-align:middle;width:27%}.intro .drawings_set_1{margin-top:0}.intro .items{display:inline-block;vertical-align:middle;width:46%}.intro .items{margin:0;padding:0 30px}.intro .items h2{font-size:calc(25px + (30 - 25) * ( (100vw - 769px) / ( 1024 - 769 ) ))}.intro .items h3{font-size:20px}.intro .bg_link{margin-top:25px}.features{margin-top:-15px}.features .container>div{display:flex;flex-direction:row}.features .rotd,.features .featured{display:flex;flex-direction:column}.features .rotd{padding-right:7.5px;width:60%}.features .featured{padding-left:7.5px;margin-top:0;width:40%}.features .featured h3 span{display:none}.features .review hgroup{text-align:left}.features .review{display:flex;flex-direction:column;margin-bottom:auto;height:100%}.features .review>div{display:flex;flex-direction:column;height:100%}.features .details{margin-top:auto}.features img,.features .img{display:block;margin-top:auto;margin-bottom:15px}.by_grade li{width:calc(25% - 15px);text-align:left}.rotd .title+.bg_link{right:7.5px}.by_grade .title+.bg_link,.featured_members hgroup+.bg_link{top:35px;right:30px}.testimonials .col50:nth-child(n) blockquote{transform:none}.testimonials .col50:nth-child(4n+0) blockquote,.testimonials .col50:nth-child(4n+1) blockquote{transform:rotate(1deg)}.testimonials .col50:nth-child(4n+2) blockquote,.testimonials .col50:nth-child(4n+3) blockquote{transform:rotate(-1deg)}.memberships{display:flex;width:calc(100% + 6px);margin-left:-3px;text-align:left}.memberships>li{width:33.33333%;border:1px solid #fff;margin-bottom:0;display:flex;flex-direction:column}.footer>*{max-width:1200px}.footer nav,.footer form{display:inline-block;vertical-align:middle}.footer nav{width:35%;text-align:left;margin-bottom:0}.footer form{width:calc(65% - 15px);margin-left:15px}.footer address br{display:none}.footer address ul{text-align:right;margin-top:-55.5px}.footer address li{display:inline-block;vertical-align:top;margin-left:15px}.footer address li:last-child{display:block}}@media only screen and (min-width:1024px){.col29{width:29%}.col71{width:71%}.sticky{top:85px}.anchor{top:-100px}.nav{margin-top:-50px;width:calc(100% + 30px);margin-left:-15px}.nav>li:nth-child(3){padding-right:107px}.nav>li:nth-child(4){padding-left:107px}.nav>li:nth-child(3) ul{width:calc(100% - (194px/2) - 10px)}.members{top:30px;right:30px}.find_bar{min-height:55px}.find_bar .container{padding:7.5px 30px}.find_bar form,.find_bar form+div{display:inline-block;vertical-align:middle}.find_bar form{width:40%}.find_bar form+div{width:60%}.find_bar form{padding-right:25px}.find_bar form button{right:25px}.find_bar form+div{margin:0;padding-left:25px;text-align:right;font-size:17.5px}.header{padding-top:55px}.intro .items h2{font-size:30px}.intro .drawings{width:30%}.intro .items{width:40%}.features .rotd,.features .featured{margin-top:-15px}.features .rotd{width:45%}.features .rotd .review h2{font-size:calc(30px + (35 - 30) * ((100vw - 1024px) / (1200 - 1024)))}.features .featured{width:55%}.features .featured .review h2{font-size:calc(20px + (25 - 20) * ((100vw - 1024px) / (1200 - 1024)))}.features .featured h3 span{display:inline}.footer nav{width:28%}.footer form{width:calc(44% - 15px)}.footer address{display:inline-block;vertical-align:middle;text-align:right;width:28%;margin-top:0}.footer address br{display:inline}.footer address div{margin-bottom:52px}.footer address h4{margin-bottom:15px}.footer address ul{margin-top:0}.footer address li{display:block}.footer address li:last-child{margin-top:0}.content form table~input+img{display:inline-block;height:1px;margin-top:-1px}}@media only screen and (min-width:1200px){.col25{width:25%}.col75{width:75%}.find_bar form,.find_bar form+div{width:50%}.intro .items h2{font-size:35px}.features .rotd{width:50%;padding-right:15px}.features .rotd .review h2{font-size:35px}.features .featured{width:50%;padding-left:15px}.features .featured .review h2{font-size:25px}.rotd .title+.bg_link{right:15px}.featured_testimonials p{font-size:25px}.featured_testimonials .school,.featured_testimonials .club,.featured_testimonials .location{font-size:14px}}5 6 7 8ul.SlideShow {9 position: relative;10 height: 195px;11 padding: 0px;12 margin: 0px;13 list-style-type: none;14}15 16ul.SlideShow .slide {17 position: absolute;18 left: -20px;19 top: -20px;20 width: 280px;21 height: 195px;22 opacity: 0;23 z-index: 1;24 25 -webkit-transition: opacity 1s;26 -moz-transition: opacity 1s;27 -o-transition: opacity 1s;28 transition: opacity 1s;29}30 31 32ul.SlideShow .slide.showing {33 opacity: 1;34 z-index: 2;35}36 37ul.SlideShow li.slide.showing img38{39 width: 280px;40 height: 195px;41}42 43 44ul.SlideShow li.slide img45{46 width: 280px;47 height: 195px;48}49 50 51 52div.indent {53 margin: 5px 5px 5px 5px;54 padding-left: 5%;55}56 57div.SchoolState {58 font-size: 120%;59 font-weight: bold;60 margin-top: 20px;61 margin-bottom: 5px;62}63 64div.SchoolNameListItem {65 xmargin: 0px 5px 5px 5px;66 margin-top: 0px;67 margin-bottom: 5px;68 69}70 71h3.listHeader {72 margin: 5px 5px 5px 5px;73}74 75.bold {76 font-weight: bold;77}78 79div.review p{80 margin-top: 15px;81 margin-bottom: 15px;82}83 84.letterNav a, div.letterNav h2 a85{86 margin-left: 3px;87 margin-right: 3px;88}89 90div.letterNav h291{92 margin-left: 25px;93 margin-right: 25px;94 font-weight: bold;95 text-transform: uppercase;96}97 98.white a:link, .white a:active, .white a:visited, .white a:hover99{100 color: white;101}102 103 104 105div.ClassReviewList {106 font-weight: bold;107}108 109div.ClassStudentList {110 font-weight: bold;111}112 113div.Registration input[type=text]{114 margin: 8px 0;115 box-sizing: border-box;116 border: 1px solid black;117 border-radius: 4px;118}119 120 121div.Registration select {122 margin: 8px 0;123 box-sizing: border-box;124 border: 1px solid black;125 border-radius: 4px;126 width: auto;127}128 129div.Registration input[type = submit], input[type = reset] {130 background-color: #96c;131 border: none;132 text-decoration: none;133 color: white;134 padding: 10px 10px;135 margin: 20px 20px;136 cursor: pointer;137 border-radius: 4px;138}139 </style>140 <meta content="Az520Inasey3TAyqLyojQa8MnmCALSEU29yQFW8dePZ7xQTvSt73pHazLFTK5f7SyLUJSo2uKLesEtEa9aUYcgMAAACPeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZS5jb206NDQzIiwiZmVhdHVyZSI6IkRpc2FibGVUaGlyZFBhcnR5U3RvcmFnZVBhcnRpdGlvbmluZyIsImV4cGlyeSI6MTcyNTQwNzk5OSwiaXNTdWJkb21haW4iOnRydWUsImlzVGhpcmRQYXJ0eSI6dHJ1ZX0=" http-equiv="origin-trial">141 </head>142 <body class="page_home">143 <hey>144 1145 </hey>146 <meta charset="utf-8">147 <meta content="The largest site of children's book reviews written and illustrated by kids for kids. Read our reviews or submit your own!" property="description">148 <meta content="If you want to be really sad and emotional, read Who Was Helen Keller. Helen was deaf and blind. It is an emotional book because Helen got sick. Long ago, they did not have many cures. Therefore, her mother thought she would do something to help her daughter. Read this book to find out what happened to Helen Keller.149 150In my opinion, this book will make you feel many emotions. I believe this is a sad book because Helen is sick. My favorite part was when Annie Sullivan taught Helen. She learned numbers and letters. This story reminds me of when I had a blind puppy. I had to help the puppy get around the house. I helped the puppy like Annie helped Helen. Clearly, you will enjoy this book if you are a good helper. 151 152I recommended this book, if you enjoy helping people. Also, if you want learn about sign language then read this book. The type of reader who would enjoy this book are children ages eight-ten years old. If you enjoy biographies, you will like this book. I think this book might interest you to help someone who is blind. If you have a friend who is blind, then you should read this book to find out how to help them. This book might be emotional for you." property="og:description">153 <meta content="article" property="og:type">154 <meta content="Spaghetti Book Club: Who Was Helen Keller?" property="og:title">155 <meta content="" property="og:image">156 <title>157 Who Was Helen Keller?158 </title>159 <meta content="initial-scale=1.0" name="viewport">160 <meta content="book reviews, book reviews by kids for kids, children, children's161book reviews, by kids, by children, for kids, for children, great books for kids, children's literature, publishing, publishing student book reviews, Spaghetti Book Club" name="keywords">162 <section class="block find_bar">163 <div class="container">164 <form action="title.php" class="search" method="post">165 <input class="type_text" name="searchByTitle" placeholder="What are you interested in reading today?" type="text">166 <!--167 /-->168 <button>169 <span class="irp">170 Search171 </span>172 </button>173 </form>174 <!--175 176 /-->177 <div>178 <h3>179 Browse reviews by:180 </h3>181 <!--182 /-->183 <ul>184 <li>185 <a>186 Title187 </a>188 </li>189 <!--190 /-->191 <li>192 <a>193 Author194 </a>195 </li>196 <!--197 /-->198 <li>199 <a>200 Grade201 </a>202 </li>203 <!--204 /-->205 <li>206 <a>207 School/Group208 </a>209 </li>210 </ul>211 </div>212 </div>213 <!-- end container -->214 </section>215 <!-- end find_bar -->216 <section class="block header header_basic">217 <header class="container">218 <h1>219 <a>220 <span class="irp">221 Spaghetti Book Club - Book Reviews by Kids for Kids222 </span>223 </a>224 </h1>225 </header>226 <!-- end container -->227 </section>228 <!-- end header -->229 <main>230 <section class="block">231 <div style="background-color:white;color:black">232 <div class="container max700 content space">233 <div class="center">234 <h2 class="c1">235 Who Was Helen Keller?236 </h2>237 <p>238 Written by Gare Thompson239 </p>240 <p>241 Illustrated by Nancy Harrison242 </p>243 <br>244 <h3 class="bold">245 Reviewed by 246 Sabella M. (age 9)247 </h3>248 <br>249 <img alt="Who Was Helen Keller?" class="" src="rick.jpg">250 </div>251 <p>252 </p>253 <div class="review">254 <p>255 If you want to be really sad and emotional, read Who Was Helen Keller. Helen was deaf and blind.256 </p>257 <p>258 In my opinion, this book will make you feel many emotions. I believe this is a sad book because Helen is sick.259 </p>260 <p>261 I recommended this book, if you enjoy helping people. Also, if you want learn about sign language then read this book.262 </p>263 </div>264 <div class="center">265 <a>266 Sabella M.267 </a>268 <br>269 is a student in270 <br>271 <a>272 Ms. Tierney's 3rd Grade Class273 </a>274 </div>275 </div>276 </div>277 </section>278 </main>279 <footer class="block footer footer_basic">280 <div class="container">281 <nav>282 <ul>283 <li class="copyright center">284 ©1999-2023 Happy Medium Productions, Inc.285 </li>286 </ul>287 </nav>288 </div>289 <!-- end container -->290 </footer>291 <!-- end footer -->292 </body>293</html>294