Multipage

<article class="multipage-form" role="form">
    <ol class="progress">
        <li class="progress__step current completed" data-page-no="1">
            <div class="progress__icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="52" height="48" viewBox="0 0 52 48">
                    <g id="a7809c90-d393-4919-a860-807736e71a6b" data-name="Layer 2">
                        <g id="aa1c7c4f-2559-4779-8d51-e64d65349774" data-name="Icon Set">
                            <path d="M39,5h7a5,5,0,0,1,5,5V42a5,5,0,0,1-5,5H6a5,5,0,0,1-5-5V10A5,5,0,0,1,6,5h7" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"></path>
                            <line x1="17" y1="5" x2="35" y2="5" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"></line>
                            <line x1="1" y1="15" x2="47" y2="15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                            <path d="M17,9a2,2,0,0,1-4,0V3a2,2,0,0,1,4,0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
                            <path d="M39,9a2,2,0,0,1-4,0V3a2,2,0,0,1,4,0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
                            <line x1="9" y1="23" x2="13" y2="23" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                            <line x1="19" y1="23" x2="23" y2="23" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                            <line x1="29" y1="23" x2="33" y2="23" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                            <line x1="39" y1="23" x2="43" y2="23" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                            <line x1="9" y1="31" x2="13" y2="31" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                            <line x1="9" y1="39" x2="13" y2="39" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                            <line x1="19" y1="31" x2="23" y2="31" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                            <line x1="19" y1="39" x2="23" y2="39" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                            <path d="M35.4549,39.4081l-2.6326,1.4628a1.0117,1.0117,0,0,1-1.4865-1.0527l.53-3.2678a1.1207,1.1207,0,0,0-.3025-.96L29.289,33.25a1.0177,1.0177,0,0,1,.575-1.7152l3.0413-.4669a1.12,1.12,0,0,0,.8444-.6326l1.3343-2.8536a1.01,1.01,0,0,1,1.8294,0l1.3343,2.8536a1.12,1.12,0,0,0,.8444.6326l3.046.4676a1.0153,1.0153,0,0,1,.5736,1.7111L40.4342,35.59a1.12,1.12,0,0,0-.3025.96l.53,3.2678a1.0117,1.0117,0,0,1-1.4865,1.0527l-2.6326-1.4628A1.12,1.12,0,0,0,35.4549,39.4081Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"></path>
                        </g>
                    </g>
                </svg>

                <div class="progress__tick">
                    <svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52">
                        <g id="ac9f6acb-05bf-4e9b-b492-d9d7cdb8c70c" data-name="Layer 2">
                            <g id="e78389a6-ba16-4afc-b573-11cb375ab817" data-name="Icons">
                                <g id="bc7c2e9a-0be4-4131-b0ca-96f025d76fe7" data-name="tick">
                                    <circle cx="26" cy="26" r="25" style="fill:#900;" stroke="none" stroke-linejoin="round" stroke-width="2"></circle>
                                    <polygon points="22 29 16 23 12 27 22 37 40 19 36 15 22 29" style="fill:#fff;" stroke="none" stroke-linejoin="round" stroke-width="2"></polygon>
                                </g>
                            </g>
                        </g>
                    </svg>

                </div>
            </div>
            <div class="progress__title">
                Date and course
            </div>

        </li>
        <li class="progress__separator" data-page-no="1">
            <div class="progress__separator-bar"></div>
        </li>
        <li class="progress__step current" data-page-no="2">
            <div class="progress__icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="56" viewBox="0 0 40 56">
                    <g id="af24c694-3e7f-4bd5-b3e5-91ccf9a3bfe7" data-name="Layer 2">
                        <g id="b1fc630d-4bfc-46c0-af81-2a4d5c57084f" data-name="Icons">
                            <g id="baa25a69-c52d-40e9-8292-fe111a2ee9c1" data-name="checklist">
                                <path d="M9,9H5a4,4,0,0,0-4,4V51a4,4,0,0,0,4,4H35a4,4,0,0,0,4-4V13a4,4,0,0,0-4-4H31" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
                                <circle cx="20" cy="6" r="1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle>
                                <path d="M20,1a5.0022,5.0022,0,0,1,4.8462,3.7644,1.9918,1.9918,0,0,0,1.6024,1.477l2.88.48A2,2,0,0,1,31,8.6943V13a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V8.6943a2,2,0,0,1,1.6712-1.9728l2.88-.48a1.9918,1.9918,0,0,0,1.6024-1.477A5.0022,5.0022,0,0,1,20,1" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"></path>
                                <line x1="21" y1="25" x2="33" y2="25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                                <line x1="21" y1="29" x2="29" y2="29" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                                <line x1="21" y1="39" x2="33" y2="39" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                                <line x1="21" y1="43" x2="29" y2="43" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                                <rect x="7" y="23" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect>
                                <rect x="7" y="37" width="8" height="8" rx="1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect>
                            </g>
                        </g>
                    </g>
                </svg>

                <div class="progress__tick">
                    <svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52">
                        <g id="ac9f6acb-05bf-4e9b-b492-d9d7cdb8c70c" data-name="Layer 2">
                            <g id="e78389a6-ba16-4afc-b573-11cb375ab817" data-name="Icons">
                                <g id="bc7c2e9a-0be4-4131-b0ca-96f025d76fe7" data-name="tick">
                                    <circle cx="26" cy="26" r="25" style="fill:#900;" stroke="none" stroke-linejoin="round" stroke-width="2"></circle>
                                    <polygon points="22 29 16 23 12 27 22 37 40 19 36 15 22 29" style="fill:#fff;" stroke="none" stroke-linejoin="round" stroke-width="2"></polygon>
                                </g>
                            </g>
                        </g>
                    </svg>

                </div>
            </div>
            <div class="progress__title">
                Your details
            </div>

        </li>
        <li class="progress__separator" data-page-no="2">
            <div class="progress__separator-bar"></div>
        </li>
        <li class="progress__step" data-page-no="3">
            <div class="progress__icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
                    <g id="f1eb81fd-f465-4ab6-ba19-2148e6813e2a" data-name="Layer 2">
                        <g id="a3be89f5-03ea-422b-afa1-b0dda0e54463" data-name="Icons">
                            <g id="b7e63521-3362-4c90-b9da-f3f8ec9ada0d" data-name="Message">
                                <line x1="11" y1="19" x2="37" y2="19" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                                <line x1="11" y1="31" x2="29" y2="31" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                                <line x1="37" y1="25" x2="11" y2="25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
                                <path d="M24,47A23.0012,23.0012,0,1,0,7.7365,40.2627L3,47Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"></path>
                            </g>
                        </g>
                    </g>
                </svg>

                <div class="progress__tick">
                    <svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52">
                        <g id="ac9f6acb-05bf-4e9b-b492-d9d7cdb8c70c" data-name="Layer 2">
                            <g id="e78389a6-ba16-4afc-b573-11cb375ab817" data-name="Icons">
                                <g id="bc7c2e9a-0be4-4131-b0ca-96f025d76fe7" data-name="tick">
                                    <circle cx="26" cy="26" r="25" style="fill:#900;" stroke="none" stroke-linejoin="round" stroke-width="2"></circle>
                                    <polygon points="22 29 16 23 12 27 22 37 40 19 36 15 22 29" style="fill:#fff;" stroke="none" stroke-linejoin="round" stroke-width="2"></polygon>
                                </g>
                            </g>
                        </g>
                    </svg>

                </div>
            </div>
            <div class="progress__title">
                Data preferences
            </div>

        </li>
    </ol>
    <section class="multipage-form__page" data-page-no="1" aria-labelledby="page-1-heading">
        <h2 id="page-1-heading">Page 1</h2>
        <fieldset>
            <legend class="">Example legend</legend>

            <div class="form__item">
                <label for="select">Example select</label>
                <select id="select">

                    <option value="" selected="selected">Please select a subject</option>
                    <option value="Accounting and Finance" data-key="0/36/37/38">
                        Accounting and Finance
                    </option>
                    <option value="Allied Health and Paramedic Science" data-key="0/36/37/274">
                        Allied Health and Paramedic Science
                    </option>
                    <option value="Animation" data-key="0/36/37/174">
                        Animation
                    </option>
                    <option value="Art and Design" data-key="0/36/37/175">
                        Art and Design
                    </option>
                    <option value="Augmented and Virtual Realities" data-key="0/36/37/490">
                        Augmented and Virtual Realities
                    </option>
                    <option value="Biological and Biomedical Sciences" data-key="0/36/37/176">
                        Biological and Biomedical Sciences
                    </option>
                    <option value="Business and Marketing" data-key="0/36/37/177">
                        Business and Marketing
                    </option>
                    <option value="Computer Science, AI and Robotics" data-key="0/36/37/178">
                        Computer Science, AI and Robotics
                    </option>
                    <option value="Drama, Performance and Theatre Studies" data-key="0/36/37/179">
                        Drama, Performance and Theatre Studies
                    </option>
                    <option value="Education" data-key="0/36/37/180">
                        Education
                    </option>
                    <option value="Engineering" data-key="0/36/37/181">
                        Engineering
                    </option>
                    <option value="English, Creative Writing and Philosophy" data-key="0/36/37/182">
                        English, Creative Writing and Philosophy
                    </option>
                    <option value="Esports" data-key="0/36/37/262">
                        Esports
                    </option>
                    <option value="Fashion" data-key="0/36/37/183">
                        Fashion
                    </option>
                    <option value="Film and Media" data-key="0/36/37/184">
                        Film and Media
                    </option>
                    <option value="Forensic Sciences and Policing" data-key="0/36/37/186">
                        Forensic Sciences and Policing
                    </option>
                    <option value="Games Arts and Visual Effects" data-key="0/36/37/281">
                        Games Arts and Visual Effects
                    </option>
                    <option value="Games Culture, PR and Management" data-key="0/36/37/429">
                        Games Culture, PR and Management
                    </option>
                    <option value="Games Design, Production and Programming" data-key="0/36/37/280">
                        Games Design, Production and Programming
                    </option>
                    <option value="International Studies and History" data-key="0/36/37/464">
                        International Studies and History
                    </option>
                    <option value="Journalism and Content Creation" data-key="0/36/37/192">
                        Journalism and Content Creation
                    </option>
                    <option value="Law" data-key="0/36/37/193">
                        Law
                    </option>
                    <option value="Music and Sound" data-key="0/36/37/194">
                        Music and Sound
                    </option>
                    <option value="Nursing and Midwifery" data-key="0/36/37/195">
                        Nursing and Midwifery
                    </option>
                    <option value="Psychology and Counselling" data-key="0/36/37/199">
                        Psychology and Counselling
                    </option>
                    <option value="Social Work and Social Welfare" data-key="0/36/37/202">
                        Social Work and Social Welfare
                    </option>
                    <option value="Sociology, Criminology and Terrorism" data-key="0/36/37/201">
                        Sociology, Criminology and Terrorism
                    </option>
                    <option value="Sport and Exercise" data-key="0/36/37/203">
                        Sport and Exercise
                    </option>
                    <option value="Tourism and Event Management" data-key="0/36/37/205">
                        Tourism and Event Management
                    </option>

        </fieldset>
        <a href="#" class="button  multipage-form__next-btn" data-target="2">
            Next
        </a>
    </section>
    <section class="multipage-form__page" data-page-no="2" aria-hidden="true" aria-labelledby="page-2-heading" style="display: none;">
        <h2 id="page-2-heading">Page 2</h2>
        <fieldset class="form__group">
            <legend>Checkboxes: default</legend>
            <label>
                <input type="checkbox" value="">
                Check this checkbox
            </label>
            <label>
                <input type="checkbox" value="">
                Check this checkbox
            </label>
        </fieldset>
        <a href="#" class="button  multipage-form__prev-btn" data-target="1">
            Prev
        </a>
    </section>
</article>