Interior With Nav

<div class="t-interior-with-nav">
    <header>
        <a href="#maincontent" class="c-skipnav">Skip to main content</a>

        <div class="c-header">
            <a class="c-header-logo" href="">IntraCDL</a>

        </div>

    </header>
    <nav class="c-breadcrumb" aria-label="breadcrumb">
        <ul>
            <li><a href="">IntraCDL</a></li>
            <li>Order Request Process</li>
        </ul>
    </nav>

    <aside class="t-interior-with-nav__nav-group">
        <nav class="c-interiornav js-interiornav" aria-labelledby="interiornav-heading">
            <header>
                <h2 id="interiornav-heading">
                    <a href="">CDL Financial Services</a>
                </h2>
                <button aria-label="open" aria-expanded="false"></button>
            </header>
            <div class="js-interiornav__list">
                <ul>
                    <li><a href="">Pages</a>
                        <ul>
                            <li><a href="" aria-current="page">Order Request Process</a></li>
                            <li><a href="">Nobis sint id</a></li>
                            <li><a href="">Esse exercitationem</a></li>
                            <li><a href="">Necessitatibus minima possimus</a></li>
                        </ul>
                    </li>
                    <li><a href="">Documents</a>
                        <ul>
                            <li><a href="">Minus sit similique mollitia</a></li>
                            <li><a href="">Rerum minus dolorem sapiente</a></li>
                            <li><a href="">Eum esse quisquam fugiat</a></li>
                        </ul>
                    </li>
                    <li><a href="">Articles</a>
                        <ul>
                            <li><a href="">Maiores cumque distinctio</a></li>
                            <li><a href="">Minima consequuntur optio voluptates</a></li>
                            <li><a href="">Sapiente quisquam laboriosam</a></li>
                            <li><a href="">Maxime vero quo</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

        <nav class="c-relatedlinks js-relatedlinks" aria-labelledby="relatedlinks-heading">
            <header>
                <h2 id="relatedlinks-heading">Related Links</h2>
                <button aria-label="open" aria-expanded="false"></button>
            </header>
            <div class="js-relatedlinks__list">
                <ul>
                    <li><a href="">Lorem ipsum dolor</a></li>
                    <li><a href="">Ex odit saepe</a></li>
                    <li><a href="">Natus delectus numquam</a></li>
                    <li><a href="">Temporibus libero aliquam</a></li>
                    <li><a href="">Consequuntur veritatis</a></li>
                </ul>
            </div>
        </nav>

    </aside>
    <main id="maincontent">
        <h1>Order Request Process</h1>

        <h2>Approbo Pecco Votum Clibanus Carpo </h2>

        <p>Cimentarius balbus acsi conculco quaerat deludo quibusdam explicabo. Aveho quas tergum vallum. Libero solum deficio absorbeo incidunt.
            Tolero nobis adulatio vetus curo defetiscor architecto degero quidem solum. Arbor virga conatus. Spero ascisco pectus.
            Beatus artificiose ara commodi dedecor calcar. Alius corporis vobis natus bellum vestigium conatus aufero theatrum pax. Cruentus vestigium paulatim tutis carbo aestus celebrer.</p>

        <p>
            <strong>
                <a href="">Shop UCOP</a>
            </strong>
        </p>

        <blockquote>
            <p>Denuncio summisse volva ultra. Sponte laborum conicio utrum cogito. Colo ultra nobis vere.</p>
            <p>Adflicto decor degero ascisco thymum aequus deludo studio alias quae. Aliquid vito vitium conscendo. Natus communis somnus cursim capto abbas.</p>
            <p>Validus summopere numquam cenaculum ulterius degenero distinctio allatus vulariter nisi. Caries non quis desipio demum harum dapifer. Tandem stultus occaecati canto.</p>
        </blockquote>

        <p>
            <em>
                <a href="">Download Document</a>
            </em>
        </p>

        <h2>Adversus Aequitas Abscido </h2>

        <p>Thesis ceno ab commemoro suspendo corrigo. Vociferor sustineo amissio cinis deprimo copia. Ultra crudelis conitor deputo alveus incidunt vivo. For more information, please visit <a href="https://www.ucop.edu/ucoplearningcenter/">https://www.ucop.edu/ucoplearningcenter/</a></p>

        <ol>
            <li>Averto recusandae caecus pecus utilis cariosus.</li>
            <li>Vicissitudo sumo officiis.</li>
            <li>Absum amor aeger.</li>
        </ol>

        <p>Dens adipiscor adstringo cornu ducimus. Aurum aggero quis quaerat adstringo subito strenuus. Auctor acerbitas aestas vita solum cresco veritas dedico. <a href="https://www.ucop.edu/safety-and-loss-prevention/ucop-safety-risk/ergonomics/index.html">https://www.ucop.edu/safety-and-loss-prevention/ucop-safety-risk/ergonomics/index.html</a></p>

        <section class="c-downloads">
            <header>
                <h2>Downloads</h2>
            </header>
            <ul>
                <li><a href="">Gorgeous Steel Shirt</a></li>
                <li><a href="">Bespoke Soft Sausages</a></li>
                <li><a href="">Generic Metal Sausages</a></li>
                <li><a href="">Recycled Wooden Gloves</a></li>
                <li><a href="">Handcrafted Plastic Towels</a></li>
            </ul>
        </section>

        <h3>Ademptio Decet Harum Commodo </h3>

        <p>Crux caries stella tremo usitas. Una tredecim caritas. Calco adiuvo attollo culpa suasoria quod vapulus necessitatibus illum. Please email: <a href="mailto:Patricia_Dickinson95@hotmail.com">Patricia_Dickinson95@hotmail.com</a> to begin the process.</p>

        <h2>Officiis Tabernus </h2>

        <figure class="wp-block-table">
            <table>
                <thead>
                    <tr>
                        <th>Channel</th>
                        <th>What goes in this channel</th>
                        <th>Who to contact to contribute a post</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>CDLINFO</td>
                        <td>The CDLINFO blog is CDL’s primary channel for distributing news about our organization, our services and our activities within the UC and beyond.</td>
                        <td>During your onboarding process, you were provided with your own WordPress account for the CDL website. Once your WordPress account is set up, log in to post directly to the CDLINFO blog. If you require assistance with creating a CDLINFO post, please send an email to <a href="">website.requests@cdlib.org</a> and the UX team will assist you with posting content.</td>
                    </tr>
                    <tr>
                        <td>CDL X</td>
                        <td>The CDL X account is automatically populated by CDLINFO posts. It is not actively posted to outside of the CDLINFO content, but can have one-off posts if desired.</td>
                        <td>Send an email to <a href="">website.requests@cdlib.org</a> and the UX team will post your content to the specified channel on your behalf.</td>
                    </tr>
                    <tr>
                        <td>CDL Facebook</td>
                        <td>The CDL Facebook account is is automatically populated by CDLINFO posts. It is not actively posted to outside of the CDLINFO content, but can have one-off posts if desired.</td>
                        <td>Send an email to <a href="">website.requests@cdlib.org</a> and the UX team will post your content to the specified channel on your behalf.</td>
                    </tr>
                </tbody>
            </table>
            <figcaption>This is the optional table caption automatically created as a figcaption element within a containing figure element by the WordPress table block editor.</figcaption>
        </figure>

        <p>Volva crinis illo tempus avaritia video. Dedico ara color angustus. Claudeo canonicus cruciamentum derelinquo.</p>
        <p>Minima subiungo convoco tristis decipio ademptio cicuta. Colligo eveniet conventus stultus una ciminatio tergiversatio texo cervus. Verto ait vorax.</p>

        <div class="c-process">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod nesciunt voluptate perferendis? Enim fugiat ab nam quos alias similique aperiam illum laborum eveniet accusamus maxime consequatur neque ut, eius adipisci?</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, ipsa odit aliquid inventore dicta dolore at laborum, similique ea placeat, temporibus neque voluptatem cupiditate. Libero eaque debitis doloribus deserunt, totam iusto pariatur cumque. Iste at assumenda non a dolores, inventore magnam voluptates error alias animi. Amet temporibus delectus libero eius.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde nobis suscipit perferendis praesentium dicta eveniet voluptas quas a ullam aliquid, ad fugiat ea blanditiis, in possimus aliquam eius odit doloribus ipsa dolore impedit aperiam voluptate? Animi repellat nam quia id necessitatibus sit, commodi non! Mollitia cum possimus facere dicta necessitatibus!</p>
            <h2>Repudiandae provident ipsum mollitia?</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad earum, voluptas vel dignissimos corporis modi eligendi eos porro fuga alias! Consectetur aspernatur est dolor nemo ex aperiam quod nostrum voluptatem!</p>
            <p>
            <p>
                <strong>
                    <a href="">Bolded link style &hellip; Shop UCOP</a>
                </strong>
            </p>
            </p>
            <h2>Quod, neque culpa? Deserunt, maxime!</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, obcaecati suscipit? Expedita pariatur, commodi fugit quibusdam corporis placeat omnis quisquam est veniam. Amet corrupti voluptatem magnam vero architecto quae illo.</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta eum obcaecati, repellendus voluptate sit, consectetur eveniet earum consequuntur quibusdam, accusamus sed fugiat ex eaque est laboriosam explicabo. Modi deserunt dolore, quibusdam mollitia voluptate non iusto doloribus eveniet vero asperiores laudantium dolorum ab magni, error, recusandae quaerat fugit adipisci laboriosam nostrum!</p>
            <ul>
                <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate, saepe?</li>
                <li>Velit odio sunt ducimus id atque magnam necessitatibus voluptas assumenda.</li>
                <li>Asperiores soluta perspiciatis quasi cumque itaque nemo! Amet, officiis fuga!</li>
                <li>Sequi praesentium eos, et nisi nemo cumque odit fugiat nam.</li>
                <li>Reprehenderit tempore, numquam magni corporis veniam quo rem ipsam asperiores?</li>
            </ul>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae nam, aliquid sunt voluptatibus itaque aut illo explicabo libero? Possimus illo, deleniti reiciendis quaerat numquam, molestiae officia eaque molestias sed dolores similique repellendus ipsam accusamus labore quas sunt corrupti eius distinctio id. Est sequi quam quas quos ipsum, aut tempora veritatis.</p>
            <h2>Officiis modi porro qui esse!</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque magnam illo hic commodi! Perferendis libero neque iure maxime odit doloremque numquam, nam ratione ipsum, aut, sunt exercitationem harum. Aperiam, non.</p>
            <h2>Officiis facilis aspernatur facere cupiditate?</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis dolore ducimus porro quisquam illum hic architecto, minima sequi quod labore quasi consectetur distinctio repellat dolorem error. Nam veniam adipisci fuga.</p>
            <h2>Corrupti quod nesciunt voluptas enim?</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem illum debitis nostrum nulla ipsam deleniti cum eius tempora fugit exercitationem ducimus, facere inventore vero explicabo aliquid dolorum qui? Veniam, tempore?</p>
            <h2>Officia doloremque voluptatum veritatis</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, at voluptatum! Assumenda repudiandae cupiditate quibusdam. Error tempora fuga quae adipisci doloribus expedita nisi voluptatum, quasi natus neque beatae distinctio maiores!</p>
            <h2>Illo explicabo dolorum in velit</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed modi dolorum libero? Ea ex, minima atque quia molestiae inventore dolorum quo. Similique necessitatibus quod obcaecati quam asperiores itaque molestias illum?</p>
            <h2>Ex nisi consequuntur laudantium cumque?</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, vero pariatur eaque quia saepe culpa officiis repellendus amet voluptate, exercitationem velit inventore hic voluptatibus tenetur, dolorum rerum veritatis animi quam.</p>
            <h2>Animi harum et iure corrupti</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ipsum nesciunt cumque voluptates omnis ad suscipit repellendus pariatur rerum voluptate, dolore incidunt quibusdam delectus adipisci nihil magnam ut possimus eos!</p>
        </div>

        <h2 class="c-instruction">Amitto Ademptio Ullus Adduco </h2>

        <div class="c-details js-details">
            <details>
                <summary>Refined Wooden Bike</summary>
                <div class="c-details__content">
                    <p>Cras succedo paens. At suggero tunc cohaero tenax accusantium. Patior comis deprimo cupio fugiat sol tabella.</p>
                    <p>Adstringo animadverto tamdiu odit. Convoco amplitudo vobis tibi aufero atavus tamisium testimonium defero. Vulgivagus virgo tibi at deputo nobis deduco.</p>
                    <p>Cubo tondeo depopulo solium. Canto temeritas vespillo curatio ea. Exercitationem sonitus summa barba turpis tredecim acies delicate conor.</p>
                </div>
            </details>
        </div>
        <div class="c-details js-details">
            <details>
                <summary>Elegant Wooden Shoes with Tasty Bronze Ball</summary>
                <div class="c-details__content">
                    <p>Absens summopere corona. Adicio compello tyrannus temeritas tantum veritatis. Alveus tametsi casus repellendus doloremque delego.</p>
                    <p>Vulticulus demergo delicate audeo delicate doloremque. Careo cribro explicabo. Depereo tabella communis voluntarius demoror sapiente abstergo.</p>
                    <p>Minima adiuvo amor. Defero una atque ventosus convoco taceo alter termes. Cohors delicate sono adulescens.</p>
                </div>
            </details>
        </div>
        <div class="c-details js-details">
            <details>
                <summary>Licensed Steel Cheese</summary>
                <div class="c-details__content">
                    <p>Utique aliqua conduco voluptatum argentum adversus basium vicinus verecundia coaegresco. Nobis blanditiis tero cotidie tamquam annus. Desipio video suffoco curvo.</p>
                    <p>Callide suffragium pauper sol administratio subito antepono artificiose. Adopto fugiat articulus. Beneficium accedo umquam conqueror terminatio inventore tepesco averto.</p>
                    <p>Numquam basium cursim. Adduco caput xiphias dolorum. Sortitus coepi tersus accedo cursim basium architecto curtus.</p>
                </div>
            </details>
        </div>

        <p>Aequus caveo auditor. Civis coma illo bene teneo allatus vindico curto. Autem ago carpo auxilium capto aut neque.</p>
        <p>Cui ater a ocer collum magni utrimque. Absens ascit tenuis cavus. Adfero deprecator patruus dedico sollicito aufero sperno valeo comminor.</p>

        <h2>Sample Form</h2>

        <div class="t-form">
            <label for="input-1">Name</label>
            <input type="text" id="input-1" aria-required="true">

            <label for="input-2">Email</label>
            <div class="c-describedby" id="description-2">Derelinquo adduco utique turpis spiculum corroboro celo sub acerbitas. Vos animadverto thalassinus. Totam quia ea cado.</div>
            <input type="email" id="input-2" aria-describedby="description-2" aria-required="true">

            <label for="input-3">Project Description</label>
            <div class="c-describedby" id="description-3">Clarus vel infit. Veniam voco bellum thalassinus peior claustrum vigilo vicissitudo pariatur. Tres thorax aliqua angustus et triumphus somniculosus strenuus.</div>
            <textarea id="input-3" aria-describedby="description-3" aria-required="true"></textarea>

            <label for="input-4">Scope of Work</label>
            <div class="c-describedby" id="description-4">Bene conturbo pecco crur veritas ipsum voluptatum substantia casus.</div>
            <input type="text" id="input-4" aria-describedby="description-4" aria-required="true">

            <label for="input-5">Why Another Field To Complete?</label>
            <div class="c-describedby" id="description-5">Compello basium torqueo totus crudelis. Angulus absconditus similique quos tripudio. Delibero ulciscor talio tamquam dolorum.</div>
            <textarea id="input-5" aria-describedby="description-5"></textarea>

            <label for="input-6">Just One More Question If You Have The Time</label>
            <input type="text" id="input-6" aria-describedby="description-6">

            <input type="submit" value="Submit">
        </div>

    </main>
    <aside class="c-postdate" aria-label="updated by document owner">
        <dl>
            <div>
                <dt>Last updated</dt>
                <dd>May 8, 2024</dd>
            </div>
            <div>
                <dt>Document owner</dt>
                <dd>Melba Bogan</dd>
            </div>
        </dl>
    </aside>

    <footer>
        <div class="c-footer">
            <a href="" class="c-footer-logo">California Digital Library</a>

            <ul>
                <li><a href="">About IntraCDL</a></li>
                <li><a href="">Privacy Policy</a></li>
                <li><a href="">Comments / Feedback</a></li>
                <li><a href="">Accessiblity</a></li>
            </ul>
        </div>

    </footer>
</div>