html-generator-fail.txt

This is a conversation between a graphic Designer and a Programmer. The design describes the way they want a web page to look, and the programmer suggests the web code that would work for the design. 

Designer: I'd like a page with a search box and a button in the middle of the page.
Programmer: We could use the code "<section id="search-section" class="search-section"><div class="centered-container w-container"><div class="w-form"><form id="search-form" name="search-form" data-name="search Form" class="search-form-flex"><div class="search-form-input-wrapper"><input type="text" class="search-form-input w-input" maxlength="256" name="Search-Input" data-name="Search Input" id="Search-Input" required=""></div><input type="submit" value="Search" data-wait="Please wait..." class="w-button"></form><div class="w-form-done"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div></section>"

Designer: I'd like a Heading, a subheading, and a paragraph, with mockup text
Programmer: We could use the code "<H1>Lorem Ipsum</H1><H2>de Finibus Bonorum et Malorum</H2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>"

Designer: I'd like 3 columns, each with a heading and a paragraph
Programmer: We could use the code  "<div  class="w-row"><div class="w-col w-col-4"><h1>Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p></div><div class="w-col w-col-4"><h1 >Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p></div><div class="w-col w-col-4"><h1>Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p></div></div>