Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Code foundation to be created by Dev Team (TBD).

Desktop:

 

Mobile:

Code Block
<div class="filter-block">
    <h2>Non-Appropriated Fund (NAF) Openings</h2>
    <form action="#" class="filter">
        <div class="box">
            <label for="job-number">Job Number:</label>
            <input type="text" placeholder="Text Field with Active Box" id="job-number">
        </div>
        <div class="box">
            <label for="department">Department:</label>
            <select id="department">
                <option>All</option>
            </select>
        </div>
        <input type="submit" value="Submit">
    </form>
</div>
<div class="result-container">
    <div class="loading-block">
        <div class="result-content loading-holder">
            <div class="holder-row">
                <span style="width:57.3%" class="job-title"><em>Job Title</em></span>
                <span class="installation"><em>Installation</em></span>
                <span class="date"><em>Closing Date</em></span>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
            <div class="result-row">
                <div style="width:57.3%" class="job-title"> <a href="#">Job Title/Number Here, 00-12345</a></div>
                <div class="installation">
                    <dl>
                        <dt>Installation: </dt>
                        <dd>NAS Installation Name</dd>
                    </dl>
                </div>
                <div class="date">
                    <dl>
                        <dt>Closing Date: </dt>
                        <dd>September 30, 2015</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="load-box">
            <a href="inc/result1.html" class="load-more more-link">Load more</a>
        </div>
    </div>
</div>