Styles

Typography

    <!-- Table with caption -->
    <section>
        <table>
            <caption>Best sellers</caption>
            <tr><th>Name<th>Line<th>Scale
            <tr><td>1936 Mercedes Benz 500k Roadster<td>Vintage Cars<td>1:24
            <tr><td>1954 Greyhound Scenicruiser<td>Trucks and Buses<td>1:32
            <tr><td>1969 Harley Davidson Ultimate Chopper<td>Motorcycles<td>1:10
            <tr><td>1970 Dodge Coronet<td>Classic Cars<td>1:24
        </table>
    </section>

    

Employees

    <!-- Employee photo -->
    <section>
        <h2>Diane Murphy</h2>
        <p>President
        <p class='picture'><img src='./Assets/pictures/DianeMurphy.jpg'></p>
    </section>

    

Firrelli, Julie

Sales Rep

Patterson, Steve

Sales Rep

    <!-- Employee thumbnail -->
    <section class='stuff-thumb'>
        <div>
            <h4>Firrelli, Julie</h4>
            <p>Sales Rep
        </div>
        <div class='md-thumb'>
            <img src='./Assets/pictures/JulieFirrelli.jpg'>
        </div>
    </section>
    
    

Anthony Bow

Sales Manager (NA), San Francisco

Leslie Jennings

Sales Rep, San Francisco

    <!-- Employee small thumbnail -->
    <section class='small-thumb'>
        <div>
            <h2>Anthony Bow</h2>
            <p>Sales Manager (NA), San Francisco
        </div>
        <div class='sm-thumb'>
            <a href='employee/1143'>
                <img src='./assets/pictures/AnthonyBow.jpg' alt='Bow'>
            </a>
        </div>
    </section>
    
    

Offices

    <!-- Office photo -->
    <section>
        <h2>San Francisco, USA</h2>
        <p class="picture-wide"><img src='./assets/offices/san-francisco.jpg' alt='San Francisco, USA'>
        <p>100 Market Street<br>Suite 300<br> 94080 San Francisco, USA
    </section>                
        
    

    <!-- Office photo narrow -->
    <section>
        <h2>San Francisco, USA</h2>
        <p class="picture-wide clip"><img src='./assets/offices/san-francisco.jpg' alt='San Francisco, USA'>
        <p>100 Market Street<br>Suite 300<br> 94080 San Francisco, USA
    </section>                
        
    

Products

    <!-- Pagination links -->
    <div class='pages'>
        <a href=''>1</a>
        <a href=''>2</a>
        <a href='' class='current'>3</a>
        <a href=''>4</a>
    </div>
        
    

1936 Mercedes-Benz 500K

Vendor: Studio M Art Models

Line: Vintage Cars

    <!-- Product thumbnail -->
    <section class='thumb'>
        <div>
            <h2>1936 Mercedes-Benz 500K</h2>
            <p>Vendor: Studio M Art Models
            <p>Line: Vintage Cars
        </div>
        <div>
            <img src='./assets/images/S18_1367.jpg'>
        </div>
    </section>
    
    

    <!-- Product photo -->
    <section>
        <h2>1936 Mercedes-Benz 500K</h2>
        <p>Vendor: Studio M Art Models
        <p>Line: Vintage Cars
        <p class='figure'><img src='./assets/images/S18_1367.jpg'></p>
    </section>
    
    

    <!-- Product boxes -->
    <section class='boxes'>
        <div class='box'>
            <h4>1917 Grand Touring Sedan</h4>
            <p>Vintage Cars
            <img src='./assets/images/S18_1749.jpg'>
        </div>
        <div class='box'>
            <h4>1998 Chrysler Plymouth Prowler</h4>
            <p>Classic Cars
            <img src='./assets/images/S18_2238.jpg'>
        </div>
    </section>
    
    

Forms

    <!-- Narrow form -->
    <section>
        <form action='' method='POST' class='narrow'>
            <h1>Login</h1>
            <input type='text' name='login' id='login' placeholder='Your login' value='' autocomplete='off' required>
            <input type='password' name='pass' id='pass' placeholder='Your password' autocomplete='off' required>
            <input type='submit' value='Log in'>
        </form>

    </section>
    
    

    <!-- Wide form -->
    <section>
        <form action='' method='POST'>
            <h1>Add product</h1>
            <label for='name'>Name</label>
            <input type='text' name='name' id='name' placeholder='Product name' value='' autocomplete='off' required>
            <label for='scale'>Scale</label>
            <select name='scale' id='scale'>
                <option value='1:10' >1:10</option>
                <option value='1:12' >1:12</option>
                <option value='1:18' >1:18</option>
                <option value='1:24' >1:24</option>
                <option value='1:32' >1:32</option>
                <option value='1:50' >1:50</option>
                <option value='1:700' >1:700</option>
                <option value='1:72' >1:72</option>
            </select>                    
            <label for='desc'>Description</label>
            <textarea name='desc' id='desc' placeholder='Product description' autocomplete='off' required></textarea>
            <input type='submit' value='Save'>
        </form>
    </section>