Team Ai
Datasetpublic

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.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face
22likes2.8kdownloads
8366.html674 linesDownload Raw Back to root
1<!DOCTYPE html>2<html>3 <head>4  <style>5   *,*::before,*::after{box-sizing:border-box}*{margin:0;word-wrap:break-word}html,body{height:100%;min-width:300px}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}ul,ol{list-style-type:none;padding:0;margin:0}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;word-wrap:break-word}#root,#__next{isolation:isolate}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted}.flex-container-row-wrap{display:flex;flex-wrap:wrap;flex-direction:row}.flex-row{display:flex;flex-direction:row}.flex-col{display:flex;flex-direction:column}.flex-row-space-between{display:flex;flex-direction:row;justify-content:space-between}.font-red{color:#9b0101}.font-dark-grey{color:#313131}body{font-family:Georgia,Arial,Helvetica,lato,sans-serif;font-size:10px;text-decoration-skip-ink:auto}h1,.heading-1{font-size:1.8rem;line-height:2rem;font-weight:700}h2,.heading-2{font-size:1.5rem;line-height:1.7rem;padding-bottom:1rem;font-weight:700;margin:30px 0 10px}h3,.heading-3{font-size:1.2rem;line-height:1.4rem;font-weight:700;color:#9b0101;border-bottom:1px solid #9b0101;margin-top:20px;margin-bottom:20px;padding:0 0 12px}h4,.heading-4,h5,.heading-5,h6,.heading-6{font-size:1.2rem;line-height:1.4rem;font-weight:700;padding-top:1rem;padding-bottom:1rem;text-decoration-skip-ink:auto}.underline{text-decoration:underline}.bold,strong{font-weight:700}p{padding-bottom:1rem}p,div,span{font-size:1rem;line-height:1.8rem}a{text-decoration:none;color:inherit;padding-bottom:1px;text-decoration:underline;text-decoration-color:#9b0101;text-underline-offset:4px;text-decoration-skip-ink:auto}a:hover,a:focus{color:#fd0505}.text-color-red{color:#9b0101}.strong{font-weight:700!important}.upper{text-transform:uppercase}.cta{padding:3px;background-color:transparent;border:none;text-decoration:underline}.btn{all:unset;border:1px solid #9b0101;padding:8px 10px;border-radius:15px;background-color:#fff}.btn:focus,.btn:active,.btn:hover{background-color:#9b0101;border:1px solid #313131;color:#fff;padding:8px 20px}@media screen and (min-width:800px){h1,.heading-1{font-size:2rem;line-height:2.2rem;font-weight:700}h2,.heading-2{font-size:1.8rem;line-height:2.4rem;padding-bottom:1rem;font-weight:700}h3,.heading-3{font-size:1.6rem;line-height:2rem;font-weight:700;color:#9b0101}h4,.heading-4{font-size:1.4rem;line-height:1.6rem;font-weight:700}h5,.heading-5{font-size:1.2rem;line-height:1.4rem;font-weight:700}h6,.heading-6{padding-top:unset;font-size:1.2rem;line-height:1.4rem;font-weight:700}p{padding-bottom:2rem}}@keyframes slideLeft{0%{opacity:0;transform:translateX(100%)}100%{opacity:1;transform:translateX(0%)}}@keyframes slideRight{0%{opacity:1;transform:translateX(0%)}100%{opacity:0;transform:translateX(100%)}}.header{width:95%;max-width:1200px;margin:0 auto}.header .container{color:#000;width:100%;max-width:95vw;height:auto;min-height:50px;padding:0 2rem;margin:0 auto}.header .container a{color:#000;border:none}@media only screen and (max-width:992px){.header .container{padding:0 1rem;margin:0 auto}}.brand{display:none}.logo{max-width:200px;max-height:50px}.ct-slide-panel.ct-slide-panel--open{z-index:30}.header{display:block;top:0;left:0;width:100%;height:auto;padding:1rem 0;margin:0 auto;z-index:25;border:none;outline:none}.header .wrapper{display:flex;align-items:center;min-height:50px;position:relative}.header-item-left{display:flex;flex:0 0 17%}.header-item-center{display:flex;flex:0 0 66%}.header-item-right{display:flex;flex:0 0 17%;align-items:center;justify-content:flex-end;height:50px;position:absolute;right:0}.header-item-right .menu-icon{font-size:1.35rem;display:flex;align-items:center;justify-content:center;gap:1rem;margin-left:1rem;border:none;outline:none;transition:all .3s ease}.header .menu>ul>li{display:inline-block;line-height:3.125rem;margin-left:1rem;margin-right:1rem}.header .menu>ul>li>a{position:relative;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.25;border:none;outline:none;text-transform:capitalize;text-rendering:optimizeLegibility;transition:color .3s ease-in-out}.header .menu>ul>li .menu-subs{position:absolute;width:100%;height:auto;margin-top:1.75rem;padding:1rem 2rem;border:none;outline:none;z-index:99999999999;opacity:0;visibility:hidden;border-radius:.25rem;transition:all .5s ease-in-out;background-color:#fff}.header .menu>ul>li .menu-subs>ul>li{line-height:1}.header .menu>ul>li .menu-subs>ul>li>a{display:inline-block;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.25;padding:.75rem 0;color:#000;border:none;outline:none;text-transform:capitalize;text-rendering:optimizeLegibility;transition:all .3s ease-in-out}.header .menu>ul>li .menu-column-1{min-width:16rem;max-width:20rem}.header .menu>ul>li .menu-subs.menu-mega{left:50%;transform:translateX(-50%)}.header .menu>ul>li .menu-subs.menu-mega>.list-item>ul>li{display:block;line-height:1}.header .menu>ul>li .menu-subs.menu-mega>.list-item>ul>li>a{display:inline-block;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.25;padding:.5rem 0;border:none;outline:none;text-transform:capitalize;text-rendering:optimizeLegibility;transition:color .3s ease-in-out}.header .menu>ul>li .menu-subs.menu-mega>.list-item>ul>li a:hover{text-decoration-thickness:2px}.header .menu>ul>li .menu-subs.menu-column-4{display:flex;flex-wrap:wrap;max-width:68rem;width:100%;padding:1.25rem 1rem}.header .menu>ul>li .menu-subs.menu-column-4>.list-item{flex:0 0 25%;padding:0 1rem}.header .menu>ul>li .menu-subs.menu-column-4 .list-item.text-center{border:1px solid #9b0101}.header .menu>ul>li .menu-subs.menu-column-4 .manufacturer-logo{margin-right:10px;display:flex;flex-direction:row;justify-content:center}.header .menu>ul>li .menu-subs.menu-column-4 .manufacturer-logo img{border-radius:50%}.header .menu>ul>li .menu-subs.menu-column-4 .title{font-family:inherit;font-size:1rem;font-weight:700;line-height:1;padding:.75rem 0;border:none;outline:none;text-transform:initial;text-rendering:optimizeLegibility;transition:all .3s ease-in-out;color:#000;border-bottom:1px solid #9b0101}.header .menu>ul>li .menu-subs.menu-column-4.text-center .title{text-align:start}.header .menu>ul>li .menu-subs.menu-column-4.text-center-desktop .title{text-align:center}.header .menu>ul>li .menu-subs.menu-column-4 img.responsive{max-width:100px;width:100%;height:auto;margin-top:.75rem;object-fit:cover;vertical-align:middle}.header .menu>ul>li a:hover{text-decoration-thickness:2px}@media only screen and (min-width:993px){.header-item-center{justify-content:center}.header .menu>ul>li.menu-item-has-children:hover .menu-subs{margin-top:.5rem;opacity:1;visibility:visible}.mobile-span{display:none}}.menu-mobile-header,.menu-mobile-trigger{display:none}@media only screen and (max-width:1114px){.header-item-center{flex:0 0 100%;order:3}.header-item-left,.header-item-right{flex:none}.wrapper{justify-content:space-between}.header .menu-mobile-trigger{position:relative;display:block;cursor:pointer;width:1.75rem;height:1rem;border:none;outline:none;margin-left:1.25rem;background:0 0;transform:rotate(0);transition:.35s ease-in-out}.header .menu-mobile-trigger span{display:block;position:absolute;width:100%;height:2px;left:0;border:none;outline:none;opacity:1;border-radius:.25rem;transform:rotate(0);transition:.25s ease-in-out;background-color:#000}.header .menu-mobile-trigger span:nth-child(1){top:0}.header .menu-mobile-trigger span:nth-child(2),.header .menu-mobile-trigger span:nth-child(3){top:.5rem}.header .menu-mobile-trigger span:nth-child(4){top:1rem}.header-item-right{align-items:center}.header .menu{position:fixed;top:0;left:0;width:20rem;height:100%;z-index:1099;overflow:hidden;background:#fff;transform:translate(-100%);transition:all .5s ease-in-out}.header .menu.active{transform:translate(0%);background-color:#fff}.header .menu>ul>li{display:block;line-height:1;margin:0;border-bottom:1px solid #9b0101}.header .menu>ul>li>a{display:block;line-height:3.125rem;height:3.125rem;padding:0 3.125rem 0 1rem;border-bottom:1px solid rgba(0,0,0,.1);position:relative}.header .menu>ul>li>a i.ion{position:absolute;font-size:1.25rem;line-height:3.125rem;top:0;right:0;width:3.125rem;height:3.125rem;text-align:center;transform:rotate(-90deg)}.header .menu>ul>li>a .mobile-span{position:absolute;font-size:1.25rem;line-height:3.125rem;top:0;right:0;width:3.125rem;height:3.125rem}.header .menu .menu-mobile-header{position:relative;position:sticky;display:flex;align-items:center;justify-content:space-between;top:0;height:3.125rem;z-index:501;border-bottom:1px solid rgba(0,0,0,.1);background:#fff}.header .menu .menu-mobile-header .menu-mobile-arrow{color:#000;display:none;font-size:1rem;font-weight:700;line-height:1.7rem;width:3.125rem;height:3.125rem;cursor:pointer;text-align:center}.header .menu .menu-mobile-header.active .menu-mobile-arrow{display:block}.header .menu .menu-mobile-header .menu-mobile-title{font-family:inherit;font-size:1rem;font-weight:500;line-height:inherit;text-transform:capitalize;text-rendering:optimizeLegibility}.header .menu .menu-mobile-header .menu-mobile-close{font-size:1rem;font-weight:700;line-height:1.7rem;cursor:pointer;width:3.125rem;height:3.125rem;text-align:center}.header .menu .menu-section{height:100%;overflow-y:auto;overflow-x:hidden}.header .menu>ul>li .menu-subs{position:absolute;display:none;top:0;left:0;max-width:none;min-width:auto;width:100%;height:100%;margin:0;padding:1rem;padding-top:4rem;opacity:1;overflow-y:auto;visibility:visible;transform:translateX(0%);box-shadow:none}.header .menu>ul>li .menu-subs.menu-mega{position:absolute;display:none;top:0;left:0;max-width:none;min-width:auto;width:100%;height:100%;margin:0;padding:1rem;padding-top:4rem;opacity:1;overflow-y:auto;visibility:visible;transform:translateX(0%);box-shadow:none}.header .menu>ul>li .menu-subs.active{display:block}.header .menu>ul>li .menu-subs.menu-column-4>.list-item{flex:0 0 100%;padding:0}.header .menu>ul>li .menu-subs.menu-column-4>.list-item img.responsive{margin-top:0}.header .menu>ul>li .menu-subs.menu-column-4>.list-item.text-center .title{margin-bottom:1.25rem}.header .menu>ul>li .menu-subs.menu-column-4>.list-item.text-center:last-child .title{margin-bottom:0}.header .menu>ul>li .menu-subs>ul>li>a{display:block}.header .menu>ul>li .menu-subs.menu-mega>.list-item>ul{margin-bottom:1rem}.header .menu>ul>li .menu-subs.menu-mega>.list-item>ul>li>a{display:block}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1098;opacity:0;visibility:hidden;background:rgba(0,0,0,.55);transition:all .5s ease-in-out}.overlay.active{opacity:1;visibility:visible}}.ToC-Container{margin-top:40px;padding-bottom:30px}.ToC-Container .ToC-heading,.ToC-Container .ToC-heading>.heading-3{padding-bottom:5px}.ToC-Container #TableOfContents ul li{font-weight:700;padding-left:10px;padding-bottom:5px;font-size:1rem}.ToC-Container #TableOfContents ul li ul li,.ToC-Container #TableOfContents ul li ul li em{font-style:unset;font-size:.8rem}.ToC-Container #TableOfContents ul li ul li::before{content:"> "}footer{content-visibility:auto;contain-intrinsic-size:120px;min-height:100px;background-color:#313131;color:#fff;padding:30px 30px 10px}footer .footer-container{max-width:1200px;margin:0 auto}footer .footer-container .multi-col{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}footer .footer-container .multi-col .col{width:100%;padding:0 15px;margin-bottom:20px}@media screen and (min-width:500px){footer .footer-container .multi-col .col{max-width:45%}}@media screen and (min-width:1000px){footer .footer-container .multi-col .col{max-width:30%}}footer .footer-container .disclaimer-heading .disclaimer-heading-text{color:#fff;border-bottom:1px solid #fff}footer .footer-container .disclaimer-copy .disclaimer-copy-text p{font-size:.8rem}footer .footer-container .disclaimer-copy .disclaimer-copy-text h4{font-size:.8rem}footer .footer-container .categories-heading .categories-heading-text{color:#fff;border-bottom:1px solid #fff}footer .footer-container .categories-list-container{color:#fff}footer .footer-container .categories-list-container .categories-list-item{border-bottom:1px solid #fff;min-height:35px}footer .footer-container .categories-list-container .categories-list-link{border-bottom:none;text-decoration:none;padding:5px 0;line-height:1.2rem}footer .footer-container .categories-list-container .categories-list-link:hover,footer .footer-container .categories-list-container .categories-list-link:focus{color:#fff;text-decoration:underline}footer .footer-container .single-col{display:flex;flex-direction:row;align-content:flex-end;align-items:flex-end;height:30px}footer .footer-container .single-col.pull-right{justify-content:end}footer .footer-container .single-col .copyright-text,footer .footer-container .single-col .rights-reserved-text{color:#fff;font-size:.8rem;margin-left:10px;padding-bottom:0;line-height:1rem}.new-tab{position:relative}.new-tab:after{position:absolute;top:3px;right:-12px;content:"\1f855";font-size:13px;color:#000;line-height:3px;height:5px;width:5px;border-right:2px solid #fff;border-top:2px solid #fff}.new-tab:before{position:absolute;top:5px;right:-12px;content:" ";border:1px solid #000;width:8px;height:8px}body{background-color:#f5f5f5;min-width:300px}main.container{background-color:#fff;width:95%;max-width:1200px;min-height:80vh;margin:0 auto;padding:10px 20px;-webkit-box-shadow:0 5px 8px 0 rgba(0,0,0,.2);box-shadow:0 5px 8px rgba(0,0,0,.2)}.sidebar{position:absolute}table thead tr th{text-align:start;font-size:1rem;padding:1.5rem 5px}table thead tr th:empty{display:none}table tbody tr td{padding:15px 10px;width:fit-content;max-width:50vw;font-size:1rem}table tbody tr:nth-child(even){background-color:#cacaca}.hide{display:none!important}input{border:1px solid #000;transition:border-color .5s ease-out;width:100%;max-width:300px;min-height:30px}input[type=text],input[type=email]{padding:13px 40px 13px 16px;line-height:1rem;font-size:.9rem;border-radius:4px}input:required,textarea:required{border-color:#000}input:required:invalid,textarea:required:invalid{border-color:#9b0101}input:required:valid,textarea:required:valid{border-color:green}input:optional{border-color:#000}textarea{padding:13px 40px 13px 16px}*{scrollbar-width:thin;scrollbar-color:#9b0101 #DFE9EB}*::-webkit-scrollbar{width:10px;width:10px}*::-webkit-scrollbar-track{border-radius:5px;background-color:#dfe9eb}*::-webkit-scrollbar-track:hover{background-color:#b8c0c2}*::-webkit-scrollbar-track:active{background-color:#9b0101}*::-webkit-scrollbar-thumb{border-radius:5px;background-color:#9b0101}*::-webkit-scrollbar-thumb:hover{background-color:#9b0101}*::-webkit-scrollbar-thumb:active{background-color:#313131}.authors-container{padding:20px 0}.authors-container .author-profile-link{color:#9b0101}.authors-container .author-label{font-weight:700}.authors-container .author-profile-link:hover{color:#000}.categories-list{min-width:250px;margin-bottom:30px}.categories-list .categories-heading-lists-container .categories-heading-lists-text.heading-3{border:1px solid #000;position:relative;text-transform:uppercase;padding:4px 12px;z-index:3;font-size:14px;text-align:center;display:block;background-color:#fff;color:#9b0101;margin-bottom:20px}.categories-list .categories-heading-lists-container .categories-heading-lists-text.heading-3::after{border:1px solid #000;content:"";position:absolute;left:-5px;right:-5px;bottom:3px;display:block;z-index:1;height:100%}.categories-list .categories-lists-ul{min-width:250px;margin-bottom:30px}.categories-list .categories-lists-ul .categories-lists-li{border-bottom:1px solid #888;padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}.categories-list .categories-lists-ul .categories-lists-li .categories-lists-link{border:unset;color:#313131;font-size:.8rem}.categories-list .categories-lists-ul .categories-lists-li .categories-lists-link::before{content:"> ";padding-right:10px}.categories-list .categories-lists-ul .categories-lists-li .categories-lists-link:hover{color:#9b0101}.categories-list .categories-lists-ul .categories-lists-li .countNumber{color:#313131;font-style:italic;font-size:1rem}.sidebar{display:inline-block;max-width:350px;word-wrap:normal;word-break:break-all;padding-left:20px;position:sticky}.sidebar .stl-container{max-height:500px;overflow-y:auto;padding-right:10px}.sidebar .stl-container .stl-header-container{position:sticky;top:0;background-color:#fff;border-bottom:#9b0101 1px solid;line-height:1rem}.sidebar .stl-container .stl-header-container .stl-header{font-size:1.3rem;line-height:1.4rem;margin:5px 0;text-underline-offset:5px}.sidebar .stl-container .stl-row-container{padding-bottom:5px;border-bottom:1px solid #000;padding-left:10px}.sidebar .stl-container .stl-row-container .product-container{padding:5px 0}.sidebar .stl-container .stl-row-container .product-container .product-name{font-size:1rem;line-height:1.8rem;margin-top:5px;white-space:wrap;word-break:break-word}.sidebar .stl-container .stl-row-container .get-product-container{padding-bottom:10px}.sidebar .stl-container .stl-row-container .get-product-container .get-product-link{font-size:.9rem;line-height:1rem}.sidebar .featured-posts-headings{padding:10px 0}.sidebar .featured-posts-headings .heading-2{padding-bottom:unset;font-size:1.3rem;line-height:1.4rem;margin:20px 0 10px}.sidebar .featured-posts-ul .featured-posts-list-items{padding-bottom:10px;font-size:.9rem;white-space:wrap;word-break:break-word}.sidebar .featured-posts-ul .featured-posts-list-items a{word-break:keep-all}.sidebar .featured-posts-ul .featured-posts-list-items::before{content:"> ";padding-right:8px}#breadcrumbs{max-width:1200px;min-width:300px;width:95%;margin:0 auto;overflow-x:auto;overflow-y:hidden}#breadcrumbs .slice{display:inline;margin-bottom:5px;width:fit-content}#breadcrumbs .slice a{word-spacing:0;display:inline;font-weight:400;font-size:.6rem;padding:2px 5px;border-bottom:none;text-decoration:none}#breadcrumbs .slice a span{font-size:.8rem}#breadcrumbs .slice a:hover,#breadcrumbs .slice a:focus{color:#000;border-bottom:1px solid #9b0101}#breadcrumbs .slice::after{content:" | "}#breadcrumbs .slice:last-child::after{content:""}.affiliate-Table{max-width:100%}.affiliate-Table .product-name-heading{text-align:start}.affiliate-Table .product-name-heading,.affiliate-Table .product-name{max-width:450px}.affiliate-Table .table-headings{display:none}.affiliate-Table .table-body{width:100%}.affiliate-Table .row{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;width:100%}.affiliate-Table .row .product-name{font-weight:700;white-space:wrap;text-overflow:ellipsis;max-width:100%;overflow:hidden;max-height:100px;height:100%}.affiliate-Table .row .retailer-name{width:45%;display:flex;flex-direction:row;justify-content:center}.affiliate-Table .row .retailer-name img{height:30px;display:inline-block}.affiliate-Table .row .get-price{width:45%;display:flex;flex-direction:row;justify-content:center}summary.faq-question-heading{cursor:pointer}summary.faq-question-heading:hover{text-decoration:underline}.faq-answer-content{padding:10px}.product-review{outline:1px solid #000;padding:20px 10px 30px;margin-bottom:20px}@media screen and (min-width:800px){.product-review .product-name{width:50%;display:inline-block}}.product-review .product-name-text{font-weight:700;font-size:1.3rem;text-transform:capitalize;text-align:center;text-decoration-skip-ink:auto}@media screen and (min-width:800px){.product-review .product-name-text{display:inline-block;text-align:start}}@media screen and (min-width:800px){.product-review .product-image{float:right;position:relative;height:100%;padding-right:40px}}.product-review .product-image-img{object-fit:contain;object-position:center;min-width:100px;max-width:200px}.product-review .product-image .second-list-mount{height:100%}@media screen and (min-width:800px){.product-review .content-block{width:70%;padding-right:20px}}.product-review .aff-cta{display:inline-block}.product-review .aff-heading{padding-top:20px;padding-bottom:10px}@media screen and (min-width:800px){.product-review .aff-heading{padding-bottom:0}}.product-review .aff-heading-text{font-weight:700;padding-bottom:10px}.product-review .row{display:flex;flex-direction:row;align-items:center;align-content:center;padding:0 10px}.product-review .row .logo-container{padding-right:10px}.byline-container{display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center;padding:0 0 20px;margin-bottom:10px;max-width:800px}@media screen and (min-width:800px){.byline-container{flex-direction:row}}.byline-container .author-container{line-height:unset}.byline-container .author-container .author-name{padding-right:10px;margin-right:10px;line-height:unset}@media screen and (min-width:800px){.byline-container .author-container .author-name{border-right:1px solid #000}}.byline-container .author-container .author-name span{font-size:.8rem}.byline-container .reading-time{line-height:unset;font-size:.8rem;padding-right:10px;margin-right:10px}@media screen and (min-width:800px){.byline-container .reading-time{border-right:1px solid #000}}.byline-container .dates-container .last-modified-text{line-height:unset;font-size:.8rem}.headline-container{margin-top:20px;margin-bottom:10px;padding-left:10px;background-color:rgba(255,255,255,.6);max-width:800px}.headline-container .headline-text{text-align:center;padding:7px 0;text-transform:uppercase;letter-spacing:.2rem}.feature-image-container{min-height:200px;max-width:800px;height:100%;max-height:500px;display:flex;flex-direction:row;justify-content:flex-start;margin-bottom:20px}.feature-image-container .feature-image{max-height:100%;width:100%;object-fit:contain}.content-container{width:100%;max-width:800px}.content-container .ToC-Container .heading-3{border-bottom:0;margin-bottom:0}.content-body-container{width:100%}.content-body-container ul,.content-body-container ol{list-style-type:square;margin-left:15px}.content-body-container figure{padding-bottom:20px}.content-body-container img{width:fit-content;margin:0 auto;max-height:300px}.content-body-container figcaption{text-align:center;font-weight:700;font-size:.8rem}6 7 8@media screen and (min-width:800px){.feature-image-container{height:40vh;width:100%;background-position:50%}.feature-image-container .headline-container .headline-text{text-align:start}}@media screen and (min-width:1055px){.main-container{display:flex;flex-direction:row}.page-wrapper{max-width:800px}}9  </style>10  <meta charset="utf-8">11  <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" name="viewport">12  <title>13   What You Need to Know for Happy, Healthy Curls | CurlyHair.com14  </title>15  <meta content="madamenoire.com16We know having healthy pH levels are important for your overall wellbeing, but did you know having an unbalanced pH&nbsp;on your scalp can limit the growth and overall health of your curly hair? No worries! We are going to walk you through the proper routine to make sure your curly hair is its healthiest and happiest.17First things first: what is pH? pH is the measurement of acidity in a substance on a scale of 0-14." name="description">18  <meta content="index" name="robots">19  <meta content="articlePage" name="doctype">20  <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">21  <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">22  <!-- Google tag (gtag.js) -->23  <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">24 </head>25 <body>26  <div class="root-container">27   <header class="header">28    <div class="container">29     <div class="wrapper">30      <div class="header-item-left">31       <a>32        <img alt="Logo" class="logo" fetchpriority="high" src="rick.jpg">33       </a>34      </div>35      <div class="header-item-center">36       <div class="overlay">37       </div>38       <nav class="menu">39        <div class="menu-mobile-header">40         <button class="menu-mobile-arrow" type="button">41          <i>42           &lt;43          </i>44         </button>45         <div class="menu-mobile-title">46         </div>47         <button class="menu-mobile-close" type="button">48          X49         </button>50        </div>51        <ul class="menu-section">52         <li>53          <a>54           Home55          </a>56         </li>57         <li class="menu-item-has-children">58          <a>59           Products60           <i class="mobile-span">61            &gt;62           </i>63          </a>64          <div class="menu-subs menu-mega menu-column-4">65           <div class="list-item">66            <h4 class="title strong">67             Haircare68            </h4>69            <ul>70             <li>71              <a>72               Best Curly Hair Shampoo73              </a>74             </li>75             <li>76              <a>77               Best Sulfate-Free Shampoo78              </a>79             </li>80             <li>81              <a>82               Best Shampoo for the Curly Girl Method83              </a>84             </li>85             <li>86              <a>87               Best Curly Hair Conditioners88              </a>89             </li>90            </ul>91           </div>92           <div class="list-item">93            <h4 class="title strong">94             Styling and Care95            </h4>96            <ul>97             <li>98              <a>99               8 Things Every Curly Girl Needs100              </a>101             </li>102             <li>103              <a>104               Affordable Curl Care Masks105              </a>106             </li>107             <li>108              <a>109               Curl Care Products for Fine Curls110              </a>111             </li>112             <li>113              <a>114               Moisturisers for Natural Curls115              </a>116             </li>117            </ul>118           </div>119           <div class="list-item">120            <h4 class="title strong">121             Make your own122            </h4>123            <ul>124             <li>125              <a>126               Edge Control Gel127              </a>128             </li>129             <li>130              <a>131               Chemical Free Hairspray132              </a>133             </li>134             <li>135              <a>136               Curl Custard137              </a>138             </li>139             <li>140              <a>141               Conditioning Bar142              </a>143             </li>144            </ul>145           </div>146           <div class="list-item">147            <h4 class="title strong">148             Curly Girl Method149            </h4>150            <ul>151             <li>152              <a>153               Tried &amp; True Products154              </a>155             </li>156             <li>157              <a>158               Suave Products159              </a>160             </li>161             <li>162              <a>163               Approved Cowashes164              </a>165             </li>166             <li>167              <a>168               Approved Products169              </a>170             </li>171            </ul>172           </div>173          </div>174         </li>175         <li class="menu-item-has-children">176          <a>177           Hairstyles178           <i class="mobile-span">179            &gt;180           </i>181          </a>182          <div class="menu-subs menu-mega menu-column-4">183           <div class="list-item">184            <h4 class="title strong">185             by Features186            </h4>187            <ul>188             <li>189              <a>190               for Black Hair191              </a>192             </li>193             <li>194              <a>195               for 4c Curls196              </a>197             </li>198             <li>199              <a>200               for Round Faces201              </a>202             </li>203             <li>204              <a>205               for Short Hair206              </a>207             </li>208            </ul>209           </div>210           <div class="list-item">211            <h4 class="title strong">212             Hair Cuts213            </h4>214            <ul>215             <li>216              <a>217               How to Cut Curly Hair218              </a>219             </li>220             <li>221              <a>222               Bobs with Curly Hair223              </a>224             </li>225             <li>226              <a>227               Bangs with Curly Hair228              </a>229             </li>230             <li>231              <a>232               Short Cuts with Curly Hair233              </a>234             </li>235            </ul>236           </div>237           <div class="list-item">238            <h4 class="title strong">239             by Occasion240            </h4>241            <ul>242             <li>243              <a>244               Curly Hair Styles for Prom245              </a>246             </li>247             <li>248              <a>249               Curly Hair Styles for a Summer Wedding250              </a>251             </li>252             <li>253              <a>254               Curly Hair Styles for Brides255              </a>256             </li>257             <li>258              <a>259               Curly Hair Styles for Work260              </a>261             </li>262            </ul>263           </div>264           <div class="list-item">265            <h4 class="title strong">266             Ways to wear267            </h4>268            <ul>269             <li>270              <a>271               A Messy Bun272              </a>273             </li>274             <li>275              <a>276               A Slicked Back Ponytail277              </a>278             </li>279             <li>280              <a>281               Pigtails282              </a>283             </li>284             <li>285              <a>286               An Updo287              </a>288             </li>289            </ul>290           </div>291          </div>292         </li>293         <li class="menu-item-has-children">294          <a>295           Hair Tips296           <i class="mobile-span">297            &gt;298           </i>299          </a>300          <div class="menu-subs menu-mega menu-column-4">301           <div class="list-item">302            <h4 class="title strong">303             Best practices304            </h4>305            <ul>306             <li>307              <a>308               Growing Long Strong Curls309              </a>310             </li>311             <li>312              <a>313               Correctly Moisturising Curls314              </a>315             </li>316             <li>317              <a>318               Understanding Your Curls319              </a>320             </li>321             <li>322              <a>323               Avoiding Curl Breakage324              </a>325             </li>326            </ul>327           </div>328           <div class="list-item">329            <h4 class="title strong">330             Need to Know331            </h4>332            <ul>333             <li>334              <a>335               Curly Hair Lingo336              </a>337             </li>338             <li>339              <a>340               Curl Care Product Not Working?341              </a>342             </li>343             <li>344              <a>345               Curly Hacks Part 1346              </a>347             </li>348             <li>349              <a>350               Curly Hacks Part 2351              </a>352             </li>353            </ul>354           </div>355           <div class="list-item">356            <h4 class="title strong">357             What not to do358            </h4>359            <ul>360             <li>361              <a>362               Bad Habits Harming Your Curls363              </a>364             </li>365             <li>366              <a>367               Sabotaging Curls368              </a>369             </li>370             <li>371              <a>372               Avoiding Triangle Hair373              </a>374             </li>375             <li>376              <a>377               Mistakes You're Making with Your Curls378              </a>379             </li>380            </ul>381           </div>382           <div class="list-item">383            <h4 class="title strong">384             Products385            </h4>386            <ul>387             <li>388              <a>389               DIY Curl Treatments390              </a>391             </li>392             <li>393              <a>394               Coconut Oil395              </a>396             </li>397            </ul>398           </div>399          </div>400         </li>401        </ul>402       </nav>403      </div>404      <div class="header-item-right">405       <button class="menu-mobile-trigger" type="button">406        <span>407        </span>408        <span>409        </span>410        <span>411        </span>412        <span>413        </span>414       </button>415      </div>416     </div>417    </div>418   </header>419   <main class="container">420    <ul id="breadcrumbs" itemscope itemtype="">421     <li class="slice" itemprop="itemListElement" itemscope itemtype="">422      <a class="strong" itemprop="item">423       <span itemprop="name">424        Home425       </span>426      </a>427      <meta content="1" itemprop="position">428     </li>429     <li class="slice" itemprop="itemListElement" itemscope itemtype="">430      <a itemprop="item">431       <span itemprop="name">432        Hair tips433       </span>434      </a>435      <meta content="2" itemprop="position">436     </li>437     <li class="slice" itemprop="itemListElement" itemscope itemtype="">438      <a itemprop="item">439       <span itemprop="name">440        What You Need to Know for Happy, Healthy Curls441       </span>442      </a>443      <meta content="3" itemprop="position">444     </li>445    </ul>446    <div id="ezoic-pub-ad-placeholder-184">447    </div>448    <div class="headline-container">449     <h1 class="headline-text">450      What You Need to Know for Happy, Healthy Curls451     </h1>452    </div>453    <div class="byline-container">454     <div class="author-container">455      <div class="author-name">456       <span class="bold">457        by458       </span>459       <span class="upper">460        Staff Writer461       </span>462      </div>463     </div>464     <div class="reading-time">465      1 min read466     </div>467     <div class="dates-container">468      <div class="last-modified-container">469       <div class="last-modified-text" id="last-modified-date">470        Last modified:471        <time datetime="2022-11-19 00:28:20 +0000 UTC">472         Nov 19, 2022473        </time>474       </div>475      </div>476     </div>477    </div>478    <div class="main-container">479     <div class="page-wrapper">480      <div class="content-container">481       <section class="content-body-container">482        <p>483         <img alt="Healthy Scalp pH for Healthy Curls" decoding="async" loading="lazy" src="rick.jpg">484        </p>485        <p>486         madamenoire.com487        </p>488        <p>489         We know having healthy pH levels are important for your overall wellbeing, but did you know having an unbalanced pH&nbsp;on your scalp can limit the growth and overall health of your curly hair? No worries!490        </p>491        <p>492         <strong>493          First things first494         </strong>495         : what is pH?496        </p>497        <p>498         Healthy pH levels are crucial for your curly hair, as this is what will fight off unwanted bacterias and funguses, as well as allow your curls to retain essential moisture. Your goal is&nbsp;to keep your hair&rsquo;s pH between 4.5-5.5 for optimal scalp and curl health.499        </p>500        <p>501         <strong>502          Use the right products503         </strong>504         : Avoid products using&nbsp;chemicals such as Triethanolamine and&nbsp;sodium hydroxide, which have an alkaline level of over 7.505        </p>506        <p>507         If your hair currently has good elasticity, this is a good indicator of the overall health of your curls. In order to keep your curls at their best and bounciest, you&rsquo;re going to want to maintain essential moisture.508        </p>509        <p>510         Finally, avoid overusing&nbsp;chemical treatments on your delicate curls, such as relaxers, perms or hair dyes. Use of these chemicals drastically alters your natural pH levels, which can cause the protein structure of your curls to weaken.511        </p>512       </section>513      </div>514     </div>515     <aside class="sidebar">516      <div class="sidebar-container sticky">517       <div id="ezoic-pub-ad-placeholder-185">518       </div>519       <div class="featured-posts-container">520        <div class="featured-posts-headings">521         <p class="heading-2 text-color-red">522          Featured Posts523         </p>524        </div>525        <ul class="featured-posts-ul">526         <li class="featured-posts-list-items">527          <a>528           Best Products for Oily Curly Hair529          </a>530         </li>531         <li class="featured-posts-list-items">532          <a>533           Best Curly Hair Shampoo534          </a>535         </li>536         <li class="featured-posts-list-items">537          <a>538           Best Dandruff Shampoos for Curly Hair539          </a>540         </li>541         <li class="featured-posts-list-items">542          <a>543           Best Curly Hair Conditioners544          </a>545         </li>546        </ul>547       </div>548       <div class="categories-list">549        <div class="categories-heading-lists-container">550         <div class="categories-heading-lists-text heading-3">551          Curly Hair Posts552         </div>553        </div>554        <div class="categories-lists-container">555         <ul class="categories-lists-ul">556          <li class="categories-lists-li">557           <a class="categories-lists-link">558            Curly Hair559           </a>560           <span class="countNumber">561            (397)562           </span>563          </li>564          <li class="categories-lists-li">565           <a class="categories-lists-link">566            Extensions567           </a>568           <span class="countNumber">569            (4)570           </span>571          </li>572          <li class="categories-lists-li">573           <a class="categories-lists-link">574            Hair Products575           </a>576           <span class="countNumber">577            (560)578           </span>579          </li>580          <li class="categories-lists-li">581           <a class="categories-lists-link">582            Hair Tips583           </a>584           <span class="countNumber">585            (332)586           </span>587          </li>588         </ul>589        </div>590       </div>591      </div>592     </aside>593    </div>594    <div id="ezoic-pub-ad-placeholder-103">595    </div>596   </main>597  </div>598  <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;">599   <div aria-label="Advertisement" id="aswift_0_host" style="border: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;" tabindex="0" title="Advertisement">600   </div>601  </ins>602  <footer>603   <div class="footer-container">604    <div class="row multi-col">605     <div class="col">606      <div class="disclaimer-heading">607       <p class="disclaimer-heading-text heading-3">608        Disclaimer609       </p>610      </div>611      <div class="disclaimer-copy">612       <div class="disclaimer-copy-text">613        <h4>614         PLEASE NOTE615        </h4>616        <p>617         Content on this site is intended for informational purposes only and does not constitute professional, medical or healthcare advice or diagnosis, and may not be used as such.618        </p>619        <h4>620         DISCLOSURE621        </h4>622        <p>623         CurlyHair.com is a participant in the Amazon Services LLC Associates Program. As an Amazon Associate, we earn from qualifying purchases.624        </p>625       </div>626      </div>627     </div>628     <div class="col">629      <div class="categories-heading">630       <p class="categories-heading-text heading-3">631        Categories632       </p>633      </div>634      <div class="categories-list-container">635       <ul class="categories-list">636        <li class="categories-list-item">637         <a class="categories-list-link">638          Products639         </a>640        </li>641        <li class="categories-list-item">642         <a class="categories-list-link">643          Hairstyles644         </a>645        </li>646        <li class="categories-list-item">647         <a class="categories-list-link">648          Hair Tips649         </a>650        </li>651        <li class="categories-list-item">652         <a class="categories-list-link">653          Routine654         </a>655        </li>656       </ul>657      </div>658     </div>659     <div class="col">660     </div>661    </div>662    <div class="row single-col pull-right">663     <p class="rights-reserved-text">664      All Right Reserved.665     </p>666     <p class="copyright-text">667      &copy; copyright 2023668     </p>669    </div>670   </div>671  </footer>672 </body>673</html>674