I will post the HTML and then the CSS for it. It shows you how to do forms and lists and HTML 5. Code: <!DOCTYPE html> <!-- ONLY TOUCH THE FORM FIELD IN THIS FILE --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Online SPA Store Houston, TX</title> <link rel="StyleSheet" href="css/default.css" type="text/css"/> <link rel="StyleSheet" href="css/layout.css" type="text/css"/> </head> <body> <div class="menu"> <a class="active" href="#">Home</a> <a href="#"><span>Shop Now</span></a> <a href="#"><span>Products</span></a> <a href="#"><span>Contact Us</span></a> </div> <div class="header"> <h1>SPA and Beauty Source</h1> <div id="contact"> <h1>Call us at (866) 555-5555</h1> <div>Houston, TX 12345</div> </div> </div> <div class="site"> <img src="images/59411041.png" alt="Refresh Discount SPA Source"/> <form id="contactus"> <h1>Contact Us Today:</h1> <label for="form-name">Name</label> <input type="text" id="form-name" placeholder="Your Name"/> <label for="phone-number">Phone number</label> <input type="text" id="phone-number" placeholder="123-456-7890"/> <label>Do you like this site?</label> <input type="radio" name="likable" value="YES" id="yes" checked="checked"/><label for="yes">Yes</label> <input type="radio" name="likable" value="NO" id="no"/><label for="no">No</label> <label for="select">Reason to contact us</label> <select id="select"> <option>Please select...</option> <option>Website</option> <option>Products</option> <option>Services</option> </select> <label for="message">Message</label> <textarea id="message" placeholder="Your Message"></textarea> <input type="submit" value="Submit"/> <input type="reset" value="Clear" /> </form> <div id="body"> <h1>SPA and Beauty Source Based in Houston, Texas</h1> <p> Shop with our online SPA and beauty source for great discount prices. Refresh Discount SPA Source based in Houston, Texas, offers high-quality goods at very low prices. The merchandise we offer ranges from beauty products and home decor to spirtual items and collectables. </p> <div id="promotion"> <img src="images/57459629.png" alt="20% off Promotion"/> <h2>Use Coupon Code New20 at checkout</h2> </div> <div id="offers"> <ul class="products"> <li>Bath & Body</li> <li>Bulk Buys</li> <li>Candleholders</li> <li>Candles</li> <li>CDs</li> <li>Collectables</li> <li>Himalayan Crystal Salt</li> <li>Incense</li> <li>Jewelry</li> <li>Loofas</li> <li>Massage Oils</li> <li>Massage Stones</li> <li>Shampoos & Conditioners</li> <li>Spiritual & Religious</li> </ul> <h2>Refresh Discount SPA Source</h2> <p> As a fairly new business, our company was formed soon after this great opportunity presented itself. The owner of <span id="refreshdiscount">Refresh Discount SPA Source</span> recognized as an ideal business model the convenience of being able to shop online. </p> <p> We enjoy being able to offer so many great items and tremendous discounted prices to people. Saving shoppers money is why we have so many regular customers and we love the simplicity of this type of business operation. </p> </div> </div> <div id="footer"> <p> To place your orders for beauty products and home decor or any of our discounted merchandise, use our online SPA variety store today. </p> <p> <a href="#">Click Here</a> to visit our online SPA variety store! </p> <div id="hours"> <h1>Contact Hours:</h1> Monday–Saturday, 9 a.m.–6 p.m.</p> </div> </div> </div> </body> </html> This is the CSS Code: /* This file is incomplete; please add extra CSS and elements */ body { margin: auto auto; } html { background-image: url('../images/41131813.jpeg'); background-repeat: repeat-x; } div.menu a { display: block; float: left; padding: 0; text-align: center; line-height: 43px; height: 100%; text-align: center; text-decoration: none; } div.menu a.active { background-image: url('../images/41131823.jpeg'); color: black; } div.header { width: 900px; margin: auto; } div.header>h1 { width: 300px; color: black; float: left; } div.header #contact { float: right; display: inline-block; } div.header #contact h1 { margin: 0; } .site { width: 966px; margin-left: 29px; } #contactus { float: right; border-style: dashed; border-width: 2px; padding: 20px; } #contactus h1 { font-size: 16px; margin: 0; color: black; } #body { margin-right: 240px; } #offers { margin-left: 200px; } #promotion { display: block; float: left; } #promotion h2 { text-align: center; line-height: 32px; margin-left: -10px; margin-right: 10px; } .products li { list-style: square; } .products li:nth-child(odd) { float: left; width: 240px; } #refreshdiscount { font-weight: bold; } #footer { text-align: center; clear: both; } #footer p:first-child { font-weight: bold; } #footer #hours { border-top: 1px solid #368C1D; padding-top: 25px; margin-top: 50px; } #footer #hours h1 { font-weight: bold; color: black; display: inline; } #contactus label { display: block; margin-top: 16px; } #contactus label[for=yes], #contactus label[for=no] { display: inline; } #contactus textarea { width: 100%; height: 100px; } This is a table design we had to make in class which I found a little odd but it shows you how to work with tables. Code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> table { border: none; border-collapse: collapse; } td { background:transparent; padding: 25px; border: none; } td[colspan="2"], td[colspan="3"], td[rowspan="2"], td[rowspan="3"] { background-color: black; } </style> </head> <body> <table> <tr> <td colspan="3"></td> <td></td> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> <td rowspan="3"></td> <td></td> </tr> <tr> <td colspan="2"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> </table> </body> </html>
hehe I feel for you I lack creativity so I do not think I will be doing website development as a career
