My First Attempt

My First Attempt - student project

Constructive comments encouraged and appreciated. This is by no means perfect.

I linked all the pages together to make one website out of several disjointed pages. Tried to keep the look consistent among all pages. Did most of the practices, yet some didn't work so they were removed; including skip-link and error-messages. Will have to practice those concepts.

HOME PAGE:

My First Attempt - image 1 - student project

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="accessHome.css" type="text/css">
    <title>Home Page | Clothes Unlimited</title>
    <style>
    body{
      margin: 2em;
      padding: 1em;
      border: 2px double black;
      border-radius: 15px;
    }    
    h1{
      text-align: center;
    }    
    ul#process_list{
      list-style-type: none;
    }    
    </style>
</head>
<body>
  <header>
    <div class="wrapper">
      <h1>Clothes Unlimited</h1>
      <h2>Home</h2>
      <img src="cloths.png" alt="We carry popular seasonal clothing." id="clothes">
    </div>
    <div class="nav">
      <label for="search">Search Our Website</label>    
      <input id="search" type="search" name="search">
      <input type="submit" value="search">    
      <nav class="navigation" aria-label="site">
        <ul>
          <li><a href="home.html">Home Page</a></li>
          <li><a href="aboutUs.html">About Us</a></li>
          <li><a href="pricing.html">Sales Data</a></li>
          <li><a href="contact_form.html">Contact Our Team</a></li>
          </ul>
      </nav>
    </div>
  </header>

    <h2>Software Services</h2>
       <ul>
         <li>Software Solutions</li>
         <li>Consultations</li>
         <li>Scaling Support</li>
       </ul>
        
    <h2>The Process</h2>
       <ul id="process_list">
         <li>1. Define the problem</li>
         <li>2. Define Requirements To Solve Said Problem</li>
         <li>3. Architect Solution </li>
         <li>4. Build your Customized Software</li>
         <li>5. Test Compatibility With System Architecture</li>
         <li>6. Pray That Everything Works As Expected!</li>
       </ul>

    <h3>FAQ</h3>
      <dl>
        <dt><b>How much does it cost?</b></dt>
          <dd>It depends <a href="#">Read more about our price structure here...</a></dd>
        <dt><b>How do I get my free consultation?</b></dt>
        <dd>Visit the contact page, fill out the form, and we will
            be back with you in 2 business days <br/><a href="#">Read more about free consultations here...</a></dd>
      </dl>
</body>
</html>

ABOUT US:

My First Attempt - image 2 - student project

<!DOCTYPE html>
<!-- Use the language tag, en for English. -->
<html lang="en">
<head>
    <meta charset="UTF-8">
<!-- These two meta tags allow the text to be increased 200%. This can also be acheived with em unit of measure. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include  info with title so it shows in the URL. -->
    <title>About Us| Clothes Unlimited</title>
    <link rel="stylesheet" href="accessHome.css">
</head>
<body>
<!-- Split these div elements into Header, nav, main, footer, aside.
     Use each attribute only once. -->
  <header>
    <div class="wrapper">
      <h1>Clothes Unlimited</h1>
      <h2>About Us</h2>
      <img src="cloths.png" alt="We carry popular seasonal clothing." id="clothes">
    </div>
    <div class="nav">
      <label for="search">Search Our Website</label>    
      <input id="search" type="search" name="search">
      <input type="submit" value="search">    
      <nav class="navigation" aria-label="site">
        <ul>
          <li><a href="home.html">Home Page</a></li>
          <li><a href="aboutUs.html">About Us</a></li>
          <li><a href="pricing.html">Sales Data</a></li>
          <li><a href="contact_form.html">Contact Our Team</a></li>
          </ul>
      </nav>
    </div>
  </header>

    <div class="team">
      <main class="main">
         <h2><strong>About Accessable Website Designs</strong></h2>
           <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi, numquam error
           <br/>facere pariatur eveniet rerum temporibus fugit quas reprehenderit harum facilis deleniti optio iusto deserunt? Minus impedit commodi rerum excepturi.</p>

         <h2><strong>Our Services</strong></h2>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dolorum, iusto
           <br/>voluptate magnam nam accusamus saepe accusantium pariatur eveniet autem odio perferendis explicabo sapiente corrupti. Ducimus natus tempore possimus blanditiis.</p>

         <h2><strong>Our Mission</strong></h1>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed unde impedit aliquam
           <br/> recusandae optio minus? Eum, tempore! Sed minima ratione quis! Maxime quod totam officiis alias facere odio unde incidunt?</p>

          <h3 id="contact"><strong>Contact Our Team</strong></h3>
           <p>Company President: John Hancock</p>
           <p>Sales Associate: Mary Quite Contrary</p>
           <p>Technical Support: Yao Wei</p>
           <p>Public Relations: Henry VIII</p>
      
    </div>
    </main>
    <aside class="sidebar">
      <h3>External Links</h3>
        <ul >
         <li><a href="#">Sub Link 1</a></li>
         <li><a href="#">Sub Link 2</a></li>
         <li><a href="#">Sub Link 3</a></li>
         <li><a href="#">Sub Link 4</a></li>
        </ul>
      </div>
    </aside>
    
    <footer class="footer">
    <div class="nav">
    <h4>Website Navigation</h4>  
        <nav id="foot-nav" aria-label="site">
          <ul>
            <li><a href="#">Home Page</a></li>
            <li><a href="#">About Our Company</a></li>
            <li><a href="#">Services We Offer</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
        </div>
    </footer>
</body>
</html>

 

SALES DATA:

My First Attempt - image 3 - student project

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sales Data | Clothes Unlimited</title>
    <link rel="stylesheet" href="accessHome.css" type="text/css">
</head>
<body>
  <header>
    <div class="wrapper">
      <h1>Clothes Unlimited</h1>
      <h2>Sales Data</h2>
      <img src="cloths.png" alt="We carry popular seasonal clothing." id="clothes">
    </div>
    <div class="nav">
      <label for="search">Search Our Website</label>    
      <input id="search" type="search" name="search">
      <input type="submit" value="search">    
      <nav class="navigation" aria-label="site">
        <ul>
          <li><a href="home.html">Home Page</a></li>
          <li><a href="aboutUs.html">About Us</a></li>
          <li><a href="pricing.html">Sales Data</a></li>
          <li><a href="contact_form.html">Contact Our Team</a></li>
          </ul>
      </nav>
    </div>
  </header>
 <main>
   <table>
     <h2>Product Availability by Country</h2>
     <thead>
       <tr class="blue">
         <th>&nbsp;</th>
         <th>&nbsp;</th>
         <th>Clothes</th>
         <th>Accessories</th>
       </tr>
       <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
         <th scope="col">Pants</th>
         <th scope="col">Skirts</th>
         <th scope="col">Dresses</th>
         <th scope="col">Bracelets</th>
         <th scope="col">Rings</th>
        </tr>
    </thead>
    <tbody>
       <th scope="rowgroup">Belgium</th>
       <th scope="row">Antwerp</th>
        <td>56</td>
        <td>22</td>
        <td>43</td>
        <td>72</td>
        <td>23</td>
     <tr>
       <th>&nbsp;</th>
       <th scope="row">Gent</th>
        <td>46</td>
        <td>18</td>
        <td>50</td>
        <td>61</td>
        <td>15</td>
     </tr>
     <tr>
       <th>&nbsp;</th>
       <th scope="row">Brussels</th>
        <td>51</td>
        <td>27</td>
        <td>38</td>
        <td>69</td>
        <td>28</td>
     </tr>
     <tr>
       <th scope="rowgroup">The Netherlands</th>
       <th scope="row">Amsterdam</th>
        <td>89</td>
        <td>34</td>
        <td>69</td>
        <td>85</td>
         <td>38</td>
     </tr>
     <tr>
       <th>&nbsp;</th>
       <th scope="row">Utrecht</th>
        <td>80</td>
        <td>12</td>
        <td>43</td>
        <td>36</td>
        <td>19</td>
     </tr>
    </tbody>
    </table>
 
<!-- Same table as above, using ID instead of SCOPE. -->
    <table>
     <h2>Items Sold by Clothes Unlimited</h2>
      <thead>
       <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
         <th id="clothes">Clothes</th>
         <th id="accessories">Accessories</th>
       </tr>
       <tr>
         <th>&nbsp;</th>
         <th>&nbsp;</th>
         <th id="pants">Pants</th>
         <th id="skirts">Skirts</th>
         <th id="dresses">Dresses</th>
         <th id="bracelets">Bracelets</th>
         <th id="rings">Rings</th>
       </tr>
      </thead>
    <tbody>
         <th id="belgium">Belgium</th>
         <th id="antwerp">Antwerp</th>
              <td headers="belgium antwerp clothes pants">56</td>
              <td headers="belgium antwerp clothes skirts">22</td>
              <td headers="belgium antwerp clothes dresses">43</td>
              <td headers="belgium antwerp clothes bracelets">72</td>
              <td headers="belgium antwerp clothes rings">23</td>
            <tr>
             <th>&nbsp;</th>
             <th id="gent">Gent</th>
              <td headers="gent Pants">46</td>
              <td headers="gent Skirts">18</td>
              <td headers="gent Dresses">50</td>
              <td headers="gent Bracelets">61</td>
              <td headers="gent Rings">15</td>
            </tr>
            <tr>
             <th>&nbsp;</th>
             <th id="brussels">Brussels</th>
              <td headers="Brussels Pants">51</td>
              <td headers="Brussels Skirts">27</td>
              <td headers="Brussels Dresses">38</td>
              <td headers="Brussels Bracelets">69</td>
              <td headers="Brussels Rings">28</td>
            </tr>
            <tr>
             <th id="the Netherlands">The Netherlands</th>
             <th id="Amsterdam">Amsterdam</th>
              <td headers="Amsterdam Pants">89</td>
              <td headers="Amsterdam Skirts">34</td>
              <td headers="Amsterdam Dresses">69</td>
              <td headers="Amsterdam Bracelets">85</td>
              <td headers="Amsterdam Rings">38</td>
            </tr>
            <tr>
             <th>&nbsp;</th>
             <th id="utrecht">Utrecht</th>
              <td headers="Utrecht Pants">80</td>
              <td headers="Utrecht Skirts">12</td>
              <td headers="Utrecht Dresses">43</td>
              <td headers="Utrecht Bracelets">36</td>
              <td headers="Utrecht Rings">19</td>
            </tr>
          </tbody>
    </table>
    </main>
   </body>
</html>

 

CONTACT FORM:

My First Attempt - image 4 - student project

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="accessHome.css" type="text/css">
    <title>Contact Form | Clothes Unlimited</title>
</head>
<body>

  <header>
    <div class="wrapper">
      <h1>Clothes Unlimited</h1>
      <h2>Contact Our Team</h2>
      <img src="cloths.png" alt="We carry popular seasonal clothing." id="clothes">
    </div>
    <div class="nav">
      <label for="search">Search Our Website</label>    
      <input id="search" type="search" name="search">
      <input type="submit" value="search">    
      <nav class="navigation" aria-label="site">
        <ul>
          <li><a href="home.html">Home Page</a></li>
          <li><a href="aboutUs.html">About Us</a></li>
          <li><a href="pricing.html">Sales Data</a></li>
          <li><a href="contact_form.html">Contact Our Team</a></li>
          </ul>
      </nav>
    </div>
  </header>
      <p>We want to hear from you! Please, fill out the required form fields and click the submit button.</p>
<!-- explicit labels -->
    <form action="/signup" method="POST" novalidate>
      <section id="errors" aria-live="assertive" tabindex="-1">
        <label for="name">Name:(Required)
        <span class="error-message">Name cannot be empty</label>
        <input type="text" placeholder="Name" required>
            
        <label for="email">Email:(Required)
        <span class="error-message"> Email cannot be empty</label></label>  
        <input type="email" placeholder="Email" required>
              
        <label for="phone number">Phone Number:(Required)
        <span class="error-message">Phone cannot be empty</label></label>             
        <input type="tel" placeholder="Phone Number" required>              
      </section>  
<!-- implicit label  - wrapped in a <label>. Fieldset used to group radio buttons. -->
      <fieldset>
        <legend>Phone Number Types:</legend>        
         <label>Work
           <input type="radio" name="phone" value="work" id="work">
         </label>
           
         <label>Home
           <input type="radio" name="phone" value="home" id="home">
         </label>
           
         <label> Cell
           <input type="radio" name="phone" value="cell" id="cell">
         </label>    
       </fieldset>
       
         <label>Street:
           <input type="text" name="street" placeholder="Street">
         </label>
           
         <label for="street">City: </label>
           <input type="text" name="city" placeholder="City">
         </label>
        
        <label>State:</label>        
        <select name="state">
             <option value="AL">Alabama</option>
             <option value="AK">Alaska</option>
             <option value="AZ">Arizona</option>
             <option value="AR">Arkansas</option>
             <option value="CA">California</option>
             <option value="CO">Colorado</option>
             <option value="CT">Connecticut</option>
             <option value="DE">Delaware</option>
             <option value="DC">District Of Columbia</option>
             <option value="FL">Florida</option>
             <option value="GA">Georgia</option>
             <option value="HI">Hawaii</option>
             <option value="ID">Idaho</option>
             <option value="IL">Illinois</option>
             <option value="IN">Indiana</option>
             <option value="IA">Iowa</option>
             <option value="KS">Kansas</option>
             <option value="KY">Kentucky</option>
             <option value="LA">Louisiana</option>
             <option value="ME">Maine</option>
             <option value="MD">Maryland</option>
             <option value="MA">Massachusetts</option>
             <option value="MI">Michigan</option>
             <option value="MN">Minnesota</option>
             <option value="MS">Mississippi</option>
             <option value="MO">Missouri</option>
             <option value="MT">Montana</option>
             <option value="NE">Nebraska</option>
             <option value="NV">Nevada</option>
             <option value="NH">New Hampshire</option>
             <option value="NJ">New Jersey</option>
             <option value="NM">New Mexico</option>
             <option value="NY">New York</option>
             <option value="NC">North Carolina</option>
             <option value="ND">North Dakota</option>
             <option value="OH">Ohio</option>
             <option value="OK">Oklahoma</option>
             <option value="OR">Oregon</option>
             <option value="PA">Pennsylvania</option>
             <option value="RI">Rhode Island</option>
             <option value="SC">South Carolina</option>
             <option value="SD">South Dakota</option>
             <option value="TN">Tennessee</option>
             <option value="TX">Texas</option>
             <option value="UT">Utah</option>
             <option value="VT">Vermont</option>
             <option value="VA">Virginia</option>
             <option value="WA">Washington</option>
             <option value="WV">West Virginia</option>
             <option value="WI">Wisconsin</option>
             <option value="WY">Wyoming</option>
        </select>

        <label for="zip code">Zip Code:    
          <input type="text" pattern="[0-9]{5}" name="zip" id="zip" placeholder="Zip Code">    
        </label>
        
        <label for="suscribe to our newsletter">Check here to subscribe to our newsletter:
          <input type="checkbox" name="subscribe" id="subscribe">
        </label>
        
        <input type="submit" value="Submit">
    </form>
    
</body>
</html>

(The End!)

Glo Russo
Always Learning...