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.7k
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 6/* http://meyerweb.com/eric/tools/css/reset/ 7 v2.0 | 201101268 License: none (public domain)9*/10 11html, body, div, span, applet, object, iframe,12h1, h2, h3, h4, h5, h6, p, blockquote, pre,13a, abbr, acronym, address, big, cite, code,14del, dfn, em, img, ins, kbd, q, s, samp,15small, strike, strong, sub, sup, tt, var,16b, u, i, center,17dl, dt, dd, ol, ul, li,18fieldset, form, label, legend,19table, caption, tbody, tfoot, thead, tr, th, td,20article, aside, canvas, details, embed, 21figure, figcaption, footer, header, hgroup, 22menu, nav, output, ruby, section, summary,23time, mark, audio, video {24 margin: 0;25 padding: 0;26 border: 0;27 font-size: 100%;28 font: inherit;29 vertical-align: baseline;30}31/* HTML5 display-role reset for older browsers */32article, aside, details, figcaption, figure, 33footer, header, hgroup, menu, nav, section {34 display: block;35}36body {37 line-height: 1;38}39ol, ul {40 list-style: none;41}42 43q {44 quotes: "\201C""\201D""\2018""\2019";45}46q:before {47 content: open-quote;48}49q:after {50 content: close-quote;51}52 53table {54 border-collapse: collapse;55 border-spacing: 0;56}57 58body {59background: url(../images/white_texture.jpg) repeat top left;60color:#8d6d6b;61font-family: Verdana, "Lucida Sans", Helvetica, Arial, sans-serif;62font-size:16px;63line-height:150%;64width:100%;65-moz-text-size-adjust:none;66-webkit-text-size-adjust:none;67-ms-text-size-adjust:none;68text-size-adjust:none;69}70 71h1, 72h2, 73h3 {74font-family: "Tangerine", cursive, script, sans-serif;75font-weight: 700;76}77 78 79header a img {80transition: all .5s;81}82 83 84header a:hover img {85 -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));86 -moz-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));87 -ms-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));88 -o-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));89 filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));90}91 92p, 93ul, 94ol, 95dl, 96h1, 97h2, 98h3, 99h4,100address,101time {102margin:20px;103}104 105 106 107 108header {109/* background: url(../images/header-new.jpg) no-repeat center; */110background: url(/images/header-1440.jpg) no-repeat center;111background-size: cover;112margin:0 auto;113min-height: 320px;114padding:20px 0 0 0;115width:100%;116-webkit-background-size: cover;117-moz-background-size: cover;118-o-background-size: cover;119background-size: cover;120}121 122@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),123 only screen and ( min--moz-device-pixel-ratio: 1.3 ),124 only screen and ( -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */125 only screen and ( min-device-pixel-ratio: 1.3 ),126 only screen and ( min-resolution: 124.8dpi ),127 only screen and ( min-resolution: 1.3dppx ) {128 129 header {130 background: url(/images/header-1748.jpg) no-repeat center;131 background-size: cover;132 }133 134}135 136#headertop {137background:#fff;138background:rgba(255,255,255,0.8);139border-radius: 6px;140box-shadow: 1px 1px 12px #666;141color:#ddd;142height:64px;143position:relative;144margin:0 auto;145max-width:1048px;146}147 148#headertop h1 {149color:#493D26;150float:left;151font-size:56px;152line-height:64px;153margin:0;154padding: 0 0 0 100px;155}156 157 158 159#headertop nav {160float:right;161margin:0;162padding:0;163}164 165 166 167.clear {clear:both;}168nav ul {169margin:0;170list-style-type:none;171}172 173nav li {174display:inline;175line-height:60px;176}177 178nav a {179color:#333;180font-size:14px;181padding:25px 12px 22px 12px;182text-decoration:none;183text-shadow: -1px -1px 0 rgba(255,255,255,0.5);184text-transform: uppercase;185}186 187nav a:hover {188background:#fff;189}190 191nav form {192display:inline;193padding:25px 12px 22px 12px;194}195 196form input {197font-size:18px;198padding:4px 6px;199}200 201 202 203nav form input[type=text],204nav form input[type=search],205input[type=email] {206 border-radius:4px;207max-width:9em;208-webkit-appearance:none;209appearance:none;210box-shadow:inset 2px 2px 8px rgb(0,0,0,.25);211border:0;212transition:border .5s, width .5s;213border:2px solid transparent;214}215 216input[type=email] {width:100%;}217 218.mc_embed_signup {overflow:auto;background:#f9f9f9;text-align:center}219 220nav form input[type=text]:focus,221nav form input[type=search]:focus,222input[type=email]:focus {border-radius:4px;outline:0;border:2px solid #e27e7f;}223 224 225input[type="search"]::-webkit-search-cancel-button {226-webkit-appearance: none;227height: 1em;228width: 1em;229background: url(/svg/icon-ux/close2-lexi-opt.svg) no-repeat 0 0;230background-position-x: 100%;231background-position-y: center;232background-size: 1em 1em;233}234 235 236 237/*styling for searchbar*/238.menu {239}240 241.menu a {242color: #fff;243font-size: 23px;244font-weight: normal;245padding:16px 12px 20px 12px;246text-shadow: 2px 2px 1px rgba(0,0,0,0.5); 247}248 249.menu a img {250vertical-align:-6px; 251}252 253.search-mobile {254display:none;}255 256.search-mobile a {257border-radius:0 6px 6px 0;258font-family: Symbola, 'Segoe UI Symbol', 'Segoe UI Emoji', sans-serif;259font-size: 20px;260padding:17px 12px 20px 12px;261}262 263#cse-search-box{264display:inline;265position:relative;266top:-2px;267}268 269#cse-search-box, #cse-search-results{270 text-align:center;271 }272 273.lines {274fill:#f5abad;275stroke:1px 1px 0 rgba(0,0,0,0.5);276}277 278svg {279height:24px;280width:24px;281vertical-align:-4px;282}283 284 285#logo {286height:101px;287position:absolute;288top:-16px;289left:0;290width:100px;291}292 293#container {294width:100%;295max-width: 1048px;296margin: -48px auto 0 auto;297}298 299 300article {301 max-width: 728px;302 width: 69.4%;303 /*background-color: #FFFFFF;*/304 float: left;305 border-radius: 6px; 306 box-shadow: 1px 1px 12px #666;307 box-shadow: 1px 1px 2em rgba(0,0,0,.25);308 background:rgba(255,255,255,0.8);309} 310 311article h1 {312background: #fff;313border-radius: 6px;314box-shadow: inset 1px 1px 20px #f5abad;315font-size: 46px;316line-height: 100%;317margin: 20px -10px;318padding: 10px 20px;319text-shadow: -1px -1px 0 rgba(255,255,255,0.5);320}321 322article h1 a {323border-radius:6px;324color: #8d6d6b;325display:block;326transition:color 1s, background 1s, box-shadow 1s, border 1s;327}328 329article h1 a:hover {330background: #fff;331box-shadow: 1px 1px 12px #999;332}333 334h2 a, 335h3 a {336color: #e27e7f;337}338 339h1, 340h2, 341h3 {342line-height:100%;343}344 345h2 {346font-size: 38px;347}348 349h3 {350font-size: 30px;351}352 353 354.rel {font-size: 30px}355 356 357article ol, article ul {358list-style-position:inside;359margin: 20px 20px 20px 40px;360text-indent: -16px;361}362 363.linkbox ol, .linkbox ul {364margin:20px;365list-style-position:none;366text-indent: 0;367}368 369article ol {list-style-type:decimal;}370article ul {list-style-type:disc;}371 372 373.bullets li {display:list-item}374.bullets, .numbers375{margin-left:1.4em;-moz-padding-start:1.4em;-webkit-padding-start:1.4em;padding-start:1.4em;overflow:hidden;zoom:1}376ol {margin-left:2em;-moz-padding-start:2.5em;-webkit-padding-start:2.5em;padding-start:2.5em}377.bullets li, ol li {padding:.3em 0;line-height:1.4}378.numbers {text-indent:-21px}379 380a {381color:#f5abad;382text-decoration:none;383 -webkit-transition: color 0.5s, background .5s;384 -moz-transition: color 0.5s, background .5s;385 -ms-transition:color 0.5s, background .5s;386 -o-transition: color 0.5s, background .5s;387 transition: color 0.5s, background .5s; 388} 389 390a:hover {391 color: #cfaac7;392 }393 394 395dt {clear:both;}396 397dd {398 margin-bottom:20px;399 min-height:100px;400 }401 402dd p {margin:0;}403 404dt a {width:100%;}405 406dt img {407float:left;408margin:5px 10px 5px 0; 409border-radius:10px;410}411 412/*peach colored text*/413.peach {color: #e27e7f;414font-family:Georgia, Times New Roman, Times, serif}415/*peach box for video description*/416#peach-box {417background-color: #f5abad;418clear:both;419color:#FFF;420margin:20px 0;421padding: 10px 0;422text-indent:20px;423}424 425.divider {426width: 100%;427color:#999;428margin-left:0;429border-bottom-width: 1px;430border-bottom-style: solid;431}432 433.center div {margin:auto;text-align: center;}434 435p.center {436 margin-left:auto;437 margin-right:auto;438 text-align: center;439}440 441.lefty {float:left;}442.righty {float:right;}443 444.abs, a[] {445line-height:24px;446padding: 4px 0px 4px 30px;447background:url(/svg/icon-social/albinoblacksheep-opt.svg) center left no-repeat;448background-size:24px 24px;449}450 451footer .center a {padding:4px 6px;}452 453.archives {text-align: center;margin:30px 20px;}454 455/*italics for quotes*/456em, q {font-style: italic;}457 458/*blockquote style*/459blockquote {460 background: #f9f9f9;461 border-radius:6px;462 border-left:0px solid #e27e7f;463 quotes: "\201C""\201D""\2018""\2019";464 margin:20px;465 padding:20px 30px;466 position:relative;467 box-shadow:inset 1px 1px 3px rgba(0,0,0,0.5);468}469 470blockquote:before,471blockquote:after {472 /* color: #e27e7f; */473 font-family:"Tangerine", Times New Roman, Times, serif;474 font-size: 122px;475 font-weight:bold;476 position:absolute;477}478 479blockquote:before {480 content: open-quote;481 left:10px;482}483/*blockquote:after {484content: close-quote;485}*/486 487blockquote:after {488content: close-quote;489bottom:0;490right:20px;491}492 493#center {494 display: inline;495 margin: 2px auto 0; 496 padding-top: 20px;497 text-align: center;498}499 500 501aside {502 max-width: 300px;503 width:28.6%;504 background-color: #FFF;505 float: right;506 border-radius: 6px; 507 box-shadow: 1px 1px 12px #666;508 box-shadow: 1px 1px 2em rgba(0,0,0,.25);509}510/* top, right, bottom left */ 511aside p { margin-left: 10px; margin-right: 10px;}512 513/*social media icons using sprite map*/514 515/*516.social-media {padding: 10px;padding-top: 20px;text-align: center;}517 518.facebook, .twitter, .youtube, .instagram, .pinterest {background: url(../images/sprite-mobile5.jpg) no-repeat; 519display: inline-block; text-indent: -5000px; background-size:32px auto; padding-right:10px;}520.facebook {background-position:0 0;width:32px;height:32px;}521.twitter {background-position:0 -32px;width:32px;height:32px;}522.youtube {background-position:0 -64px;width:32px;height:32px;}523.instagram {background-position: 0 -96px;width:32px;height:32px;}524.pinterest {background-position: 0 -128px;width:32px;height:32px;}525 526.social-media img {margin-top: 20px; margin-right: 10px; width: 32px; height: 32px;}527*/528 529 530 531/*google ad on side bar*/532#google-ad {margin: auto;padding-top: 12px;text-align: center;width: 300px;}533#mobile-ad {margin: auto; text-align: center;}534 535#map_canvas {width: 500px; height: 500px; margin: auto; border: 1px solid black;}536 537footer {538background-color: transparent;539box-shadow: 0px -12px 12px -12px #000;540box-shadow:0px 0em 2em 1em rgb(0 0 0 / 25%);541clear: both;542margin:0 auto;543padding:40px 0 60px 0;544text-align: center;545width:100%;546} 547 548 549footer a {text-align:center; color:#e27e7f;} 550footer a:hover {color: #f5abad;}551 552.clear {clear: both;}553img {max-width: 100%; height: auto;}554 555 556.linkbox-audio, 557.linkbox li {558list-style-type: none;559}560 561.linkbox-audio {margin:20px; padding: 10px 10px 4px; background: #f9f9f9; width: auto; height: 60px; border-radius: 5px; -moz-border-radius: 5px;-webkit-border-radius: 5px; box-shadow:inset 2px 2px 6px rgba(0,0,0,.5);562 }563 /* top, right, bottom left */ 564#audioplayer1 {padding-top:6px;margin:0 auto;width:100%;height:44px}565 566 567.linkbox li {568border-radius: 5px; 569clear:both;570display: block; 571width: 100%; 572}573 574/*video link box */575.linkbox a {576border-radius: 5px; 577box-shadow:inset 1px 1px 3px rgba(0,0,0,0.5);578display: block; 579height: 80px; 580width: 100%;581}582 583/*linkbox changes color when you hover */584.linkbox a:hover {background: #f3e0e0;} 585 586.linkbox img {587float: left; 588margin: 6px 10px 6px 6px; 589background-size: 90px 68px;}590 591.outside {margin-left:47px;list-style-position:outside;text-indent:0}592.rel, h2, h3, h4 {clear:both}593strong, b {font-weight:bold}594em, cite, i {font-weight:italic}595.embed-container {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%} 596.embed-container iframe, .embed-container object, .embed-container embed {position:absolute;top:0;left:0;width:100%;height:100%}597input.gsc-search-button-v2 {margin-top:7px !important}598table.gsc-search-box td {vertical-align: top}599.gsc-control-cse {600 font-family: Arial, sans-serif;601 border-color: transparent !important;602 background-color: transparent !important;}603 604@keyframes myfirst605{from {height:0;}606to {height:522px;}}607@-moz-keyframes myfirst608{from {height:0;}609to {height:522px;}}610@-webkit-keyframes myfirst611{from {height:0;margin:4px auto 0 auto;}612to {height:522px;margin:4px auto 52px auto;}}613 614 615#openmenu {background:#666;background:rgba(0,0,0,0.6);color:#fff;616max-width:460px;617margin:4px auto 52px auto;618text-align:center;619border-radius:6px;620border:1px solid #333;621box-shadow: 1px 1px 12px #000;622overflow:hidden;623clear:both;624transition: all 2s;625animation: myfirst 2s ease-in-out;626-moz-animation: myfirst 2s ease-in-out;627-webkit-animation: myfirst 2s ease-in-out;628-o-animation: myfirst 2s ease-in-out;629-ms-animation: myfirst 2s ease-in-out;630}631 632#openmenu li {633display:block;634line-height:27px;635padding:0;636border:0;637border-bottom:1px solid #202020;638border-bottom-color:rgba(0,0,0,.5);639border-top:1px solid #535353;640border-top-color:rgba(102,102,102,.5);641}642 643#openmenu a {display:block;}644#openmenu a:hover {background:#222;background:rgba(255,255,255,0.1);}645#openmenu ul {margin:auto;}646 647 648/* Wide iPad */649@media screen and (max-width: 1048px) {650 651header, footer {652max-width:1048px;653}654article h1 {655margin: 20px 0;656}657 658}659 660 661/* smartphone (narrow screen) layout */662@media screen and (max-width: 978px) {663 664article h1 {665margin: 10px 0;666}667 668 669p, 670ul, 671ol, 672dl, 673h1, 674h2, 675h3,676blockquote,677.linkbox ol, 678.linkbox ul,679address,680time {681margin:10px;682}683 684header {685width: 100%;686margin: 0;687min-height: 200px;688}689 690footer {691width: 100%;692}693 694#headertop {695width: auto;696margin: 0;697}698 699article h1 {700padding: 10px 10px;701}702 703article ol, article ul {704list-style-position:inside;705margin: 10px 10px 10px 25px;706text-indent: -16px;707}708 709 710.music, .videos, .poses, .search-mobile {display:none;}711 712table.center {display:none;}713 714h1 {715word-wrap: break-word;716} 717 718#container {719width:100%;720}721 722article, aside {723width:100%;724margin:0;725max-width:100%;726}727 728 729#peach-box {730text-indent:10px;731}732 733.linkbox-audio {margin:10px;}734audio {padding-top:6px;margin:0 auto;width:100%;height:44px}735 736.linkbox a {height:56px;}737.linkbox img {height:44px;width:auto;}738 739dt img {740width:320px;741height:auto;742margin:0 auto 8px auto;743text-align:center;744display:block;745float:none;746padding: 0;747}748 749dt, dd {max-width:320px;margin:auto;}750 751/* comment this out for thinner listings */752dt img {width:480px}753dt, dd {max-width:480px}754 755 756dt {font-size:150%;line-height: 1.25;}757 758dd {padding: 5px 0 40px 0;text-align:left;}759 760dl, dt, dt a {margin:auto;text-indent:0;text-align:center;}761 762 763 764.menu {display:inline;}765.search-mobile a {font-size: 20px;}766.menu img {vertical-align: -6px;}767 768#map_canvas {width: 300px; height: 300px;}769 770}771 772@media screen and (max-width: 720px) { 773.menu, .search-mobile {display:inline;}774.search {display:none;}775}776 777@media all and (min-width:0px) and (max-width:480px) {778 779/*780header {background-image: url(../images/header-mobile1.jpg);} */781 782#headertop {height:54px;}783 784 785#headertop h1 {786font-size: 42px;787line-height:54px;788padding:0 0 0 80px;789} 790 791 792 header a:hover img {793 -webkit-filter: none;794 -moz-filter:none;795 -ms-filter:none;796 -o-filter:none;797 filter:none;798}799 800#logo {801width:80px;802height:auto;803} 804 805article h1 {font-size:34px;} 806 807h2 {text-align: left; margin: 10px;} 808 809p, ul, ol, dl {margin:10px;} 810 811.linkbox p {font-size:14px;} 812 813nav li {line-height:50px;}814nav a {padding:12px 12px;}815.menu a {padding:10px 12px 15px 12px;}816.search-mobile a {font-size: 20px;817padding:12px 12px 15px 12px;}818 819 820#openmenu ul {margin:auto} 821 822 823}824 825 826li {padding-top:4px;827padding-bottom:4px;}828 829 830/* Social 2021 */831.social-icons {832padding: 10px;833padding-top: 20px;834text-align: center;835overflow:auto;836box-sizing:border-box;837max-width:300px;838margin:0 auto;839}840.social-icons li {display:inline-block;margin:0 2%;vertical-align:top;float:left;width:16%;box-sizing:border-box;}841.social-icons a {842width:100%;843display:block;844color:#fff;845background:#f5abad;846width:100%;height:100%;847padding:5px;848border-radius:4px;849box-sizing:border-box;850}851 852.social-icons a:hover {background:#e27e7f;}853.social-icons svg {width:100%;height:100%;display:block;box-sizing:border-box;}854 </style>855 <meta charset="utf-8">856 <title>857 Namati Yoga Mat Bag | LexiYoga858 </title>859 <!--[if IE]><![endif]-->860 <meta content="Namati Yoga Bag Giveaway. Win a lovely handmade knit yoga mat bag, accessory bag and a re-grip mat wash. This bag is quite a fashion statement, and is 100% cotton, so it's soft to touch and is machine washable. " name="description">861 <meta content="Namati Yoga Bag, handmade, knit, handcrafted yoga mat bag, accessory mat, re-grip mat wash, Canadian made, 100% cotton, soft to touch, standard yoga mat " name="keywords">862 <meta content="summary" name="twitter:card">863 <meta content="@lexiyoga" name="twitter:site">864 <meta content="Namati Yoga Mat Bag" name="twitter:title">865 <meta content="Namati Yoga Mat Bag" property="og:title">866 <meta content="Namati Yoga Bag Giveaway. Win a lovely handmade knit yoga mat bag, accessory bag and a re-grip mat wash. This bag is quite a fashion statement, and is 100% cotton, so it's soft to touch and is machine washable. " name="twitter:description">867 <meta content="Namati Yoga Bag Giveaway. Win a lovely handmade knit yoga mat bag, accessory bag and a re-grip mat wash. This bag is quite a fashion statement, and is 100% cotton, so it's soft to touch and is machine washable. " name="og:description">868 <meta content="" name="twitter:image">869 <meta content="" property="og:image">870 <meta content="" name="twitter:url">871 <meta content="" name="og:url">872 <meta content="43.76889, -79.41263" name="ICBM">873 <meta content="LexiYoga" name="DC.title">874 <meta content="telephone=no" name="format-detection">875 <meta content="5a39bec583b0e7ad7c3dec00b5a17923" name="p:domain_verify">876 <!--[if lt IE 9]>877 878<![endif]-->879 <meta content="width=device-width, initial-scale=1.0" name="viewport">880 <!-- -->881 <meta content="66_PP8IDQsHYMQ-E590DKz5Ehc48pfQqzW9sajfXApw" name="google-site-verification">882 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">883 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">884 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">885 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">886 </head>887 <body>888 <header>889 <div id="headertop">890 <a>891 <img alt="LexiYoga" height="202" id="logo" src="rick.jpg" width="200">892 <h1>893 LexiYoga894 </h1>895 </a>896 <nav>897 <ul>898 <li class="menu">899 <a onclick="showhide(document.getElementById('openmenu')); return false;">900 ☰901 </a>902 </li>903 <li class="videos">904 <a>905 Yoga Videos906 </a>907 </li>908 <li class="poses">909 <a>910 Yoga Poses911 </a>912 </li>913 <li class="music">914 <a>915 Yoga Reviews916 </a>917 </li>918 </ul>919 </nav>920 </div>921 <div id="openmenu" style="display:none;">922 <ul>923 <li>924 <a>925 Yoga Music926 </a>927 </li>928 <li>929 <a>930 Yoga Videos931 </a>932 </li>933 <li>934 <a>935 Yoga Poses936 </a>937 </li>938 <li>939 <a>940 Yoga Styles941 </a>942 </li>943 </ul>944 </div>945 </header>946 <div id="container" style="height: auto !important;">947 <article style="height: auto !important;">948 <h1>949 Namati Yoga Bag Giveaway950 </h1>951 <div style="margin-top: 20px;">952 <!-- Responsive Ad -->953 <ins class="adsbygoogle" data-ad-client="ca-pub-6405183578653972" data-ad-format="auto" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" style="display: block; height: 280px;">954 <div aria-label="Advertisement" id="aswift_0_host" style="border: none; height: 280px; width: 727px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: visible;" tabindex="0" title="Advertisement">955 </div>956 </ins>957 </div>958 <p>959 I'd like to thank Namati for sending me a lovely handmade knit yoga mat bag, accessory bag and a re-grip mat wash. I think it's such a unique and creative idea to knit yoga bags, as you can choose the pattern and color of your choice.960 </p>961 <p>962 Namati has a whole page on their website about how colors affects us. I chose the color purple, since it's my favorite.963 </p>964 <blockquote cite="">965 <p>966 Choosing a purple mat or wearing purple active wear stimulates imagination, promotes creativity, and is uplifting. Purple can help you to re-balance your life and remove obstacles.967 </p>968 </blockquote>969 <p class="center">970 <div class="" style="width: 400px; height: 208px;">971 <img alt="Namati Yoga Bag" class="reflected" height="160" src="rick.jpg" style="vertical-align: bottom;" title="Namati Yoga Bag" width="400">972 <canvas height="48" style="height: 48px; width: 400px;" width="400">973 </canvas>974 </div>975 </p>976 <p>977 The lacey pattern of the mat bag provides proper ventilation, especially if you're taking a hot yoga class, and your mat gets soaked.978 <a>979 Manduka Yoga Mat980 </a>981 inside mine. This bag is quite a fashion statement, and is 100% cotton, so it's soft to touch and is machine washable.982 </p>983 <p>984 The accessory bag is quite useful, as you can keep you keys, wallet, water bottle, or any other items you need to take to your yoga class. It's really a nice sized bag that's perfect for all your yoga class needs.985 </p>986 <div class="google-auto-placed ap_container" style="width: 100%; height: auto; clear: both; text-align: center;">987 <ins class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6405183578653972" data-ad-format="auto" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent; height: 280px;">988 <div aria-label="Advertisement" id="aswift_3_host" style="border: none; height: 280px; width: 727px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: visible;" tabindex="0" title="Advertisement">989 </div>990 </ins>991 </div>992 <p>993 Here's the Namati story, and how they started out as a yoga mat bag company:994 </p>995 <blockquote>996 <p>997 We are a Canadian family company located in Kitchener, Ontario.998 </p>999 <p>1000 A couple of years ago my sister and I were planning to attend a retreat in Toronto held by the Chopra Center. As part of the retreat they were holding introductory yoga classes.1001 </p>1002 <p>1003 We created an attractive yoga mat bag out of 100% cotton that was travel friendly. We attended the retreat, fell in love with yoga, and had people asking about our bags.1004 </p>1005 <p>1006 Namati was born.1007 </p>1008 </blockquote>1009 <h2>1010 Win a free Namati Yoga Mat Bag1011 </h2>1012 <p>1013 Namati would like to send a free handmade yoga mat bag, accessory bag and re-grip mat spray to one lucky winner. You get to choose the color of the bags and the scent of the spray.1014 </p>1015 <p>1016 In order to win a Namati yoga mat bag, accessory bag and re-grip mat wash, these are the following steps you have to take:1017 </p>1018 <ol class="outside">1019 <li>1020 Add LexiYoga on1021 <a>1022 Twitter1023 </a>1024 .1025 </li>1026 <li>1027 Add LexiYoga on1028 <a>1029 Pintrest1030 </a>1031 .1032 </li>1033 <li>1034 Become a fan on1035 <a>1036 Facebook1037 </a>1038 .1039 </li>1040 <li>1041 Subscribe on1042 <a>1043 YouTube1044 </a>1045 .1046 </li>1047 </ol>1048 <p>1049 The winner will be announced on1050 <strong>1051 Sunday August 12th1052 </strong>1053 .1054 </p>1055 <p>1056 Good luck to everyone! This is my sixth giveaway on my website.1057 </p>1058 <div style="margin-top: 20px;">1059 <!-- Responsive Ad -->1060 <ins class="adsbygoogle" data-ad-client="ca-pub-6405183578653972" data-ad-format="auto" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" style="display: block; height: 0px;">1061 <div aria-label="Advertisement" id="aswift_1_host" style="border: none; height: 0px; width: 727px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: hidden; opacity: 0;" tabindex="0" title="Advertisement">1062 </div>1063 </ins>1064 </div>1065 <h2 class="rel">1066 Related Links1067 </h2>1068 <ul>1069 <li>1070 See more1071 <a>1072 Reviews1073 </a>1074 .1075 </li>1076 <li>1077 <a>1078 Champion USA Shape Wear Review1079 </a>1080 </li>1081 <li>1082 <a>1083 The Search for the Perfect Yoga Mat1084 </a>1085 </li>1086 <li>1087 <a>1088 The Original Yoga Sheep Skin Mat1089 </a>1090 </li>1091 </ul>1092 </article>1093 <aside style="height: auto !important;">1094 <ul class="social-icons">1095 <li>1096 <a rel="me" title="Facebook">1097 </a>1098 </li>1099 <li>1100 <a rel="me" title="Twitter">1101 </a>1102 </li>1103 <li>1104 <a title="YouTube">1105 </a>1106 </li>1107 <li>1108 <a title="Instagram">1109 </a>1110 </li>1111 </ul>1112 <p class="peach">1113 <q>1114 You cannot always control what goes on outside. But you can always control what goes on inside.1115 </q>1116 Mr. Yoga1117 </p>1118 <!--1119<div class="side">1120<p class="center" style="margin: auto;"><a ><img src="rick.jpg" width="125" height="125" alt="Online casino & Slots Betway" />1121</a></p>1122</div>1123-->1124 <div class="side">1125 <p>1126 <strong>1127 NEW1128 </strong>1129 -1130 <a>1131 Advertise Your Business1132 </a>1133 </p>1134 <p>1135 <strong>1136 Daily1137 </strong>1138 <a>1139 Horoscope1140 </a>1141 </p>1142 <p>1143 <strong>1144 Add1145 </strong>1146 <a>1147 horoscopes to your site1148 </a>1149 </p>1150 <p>1151 <strong>1152 Add1153 </strong>1154 <a>1155 Live Earth & Moon1156 </a>1157 </p>1158 </div>1159 <!-- Begin Mailchimp Signup Form -->1160 <div class="mc_embed_signup" id="mc_embed_signup">1161 <form action="" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" target="_blank">1162 <div id="mc_embed_signup_scroll">1163 <h2>1164 Mailing List1165 </h2>1166 <!--1167<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>-->1168 <div class="mc-field-group">1169 <p>1170 <label for="mce-EMAIL">1171 Email:1172 <!--<span class="asterisk">*</span>-->1173 </label>1174 <input class="required email" id="mce-EMAIL" name="EMAIL" required type="email" value>1175 </p>1176 </div>1177 <div class="clear" id="mce-responses">1178 <div class="response" id="mce-error-response" style="display:none">1179 </div>1180 <div class="response" id="mce-success-response" style="display:none">1181 </div>1182 </div>1183 <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->1184 <div aria-hidden="true" style="position: absolute; left: -5000px;">1185 <input name="b_5e770388d321ea3973803380c_0d4f4b5c78" tabindex="-1" type="text" value>1186 </div>1187 <div class="clear">1188 <p>1189 <input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe">1190 </p>1191 </div>1192 </div>1193 </form>1194 <div class="google-auto-placed" style="width: 100%; height: auto; clear: both; text-align: center;">1195 <ins class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6405183578653972" data-ad-format="auto" data-adsbygoogle-status="done" style="display: block; margin: 10px auto; background-color: transparent; height: 240px;">1196 <div aria-label="Advertisement" id="aswift_5_host" style="border: none; height: 240px; width: 300px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: visible;" tabindex="0" title="Advertisement">1197 </div>1198 </ins>1199 </div>1200 </div>