Uol Homepage Concept V 2

<div id="uol-homepage-concept-v2">
    <div id="bannerSlideshow" class="bannerSlideshow">
        <div class="slideshowImages">

            <div class="image" style="background-image: url(/placeholders/new-homepage/1.png); animation-delay: 0s; animation-duration: 24s"></div>

            <div class="image" style="background-image: url(/placeholders/new-homepage/4.png); animation-delay: 8s; animation-duration: 24s"></div>

            <div class="image" style="background-image: url(/placeholders/new-homepage/8.png); animation-delay: 16s; animation-duration: 24s"></div>

        </div>
    </div>
    <div class="bannerSlideshowControls">
        <div class="slideshowControlsInner">
            <button id="playButton" class="slideshowControl uol-button-v2 uol-icon uol-icon--mdiPlay uol-icon--icon-only uol-icon--icon-only--large" type="button">Play</button>
            <button id="pauseButton" class="slideshowControl uol-button-v2 uol-icon uol-icon--mdiPause uol-icon--icon-only uol-icon--icon-only--large" type="button">Pause</button>
        </div>
    </div>

    <div class="uol-task-banner">
        <div class="uol-task-banner__outer">
            <div class="uol-task-banner__inner">
                <div class="uol-task-banner__key-task">
                    <div id="block1" class="uol-content-block">

                        <h2 class="uol-content-block__heading">Shape the world you want</h2>

                        <p class="uol-content-block__copy">Starting with your experiences and the University of Leeds and going far beyond, to the industry, career and society you’re equipped to thrive in</p>

                        <button class="uol-button-v2 uol-button--default
    " type="submit">Hear from our students</button>

                    </div>
                </div>
                <div class="uol-task-banner__course-section">
                    <div class="uol-task-banner__course-search">

                        <div class="uol-form__container   ">

                            <div class="uol-form__inner-wrapper">

                                <h2 class="uol-form__title">Find your course</h2>

                                <form class="uol-form" action="/" role=search>

                                    <div class="uol-form__input-group  uol-form__input-group--inline">

                                        <div class="uol-form__input-container 
">

                                            <div role="radiogroup" aria-labelledby="radio-group-id" class="uol-form__custom-fieldset">

                                                <span id="radio-group-id" class="uol-form__custom__legend">Course type</span>

                                                <div class="uol-form__inputs-wrapper ">

                                                    <div class="uol-form__input--radio-wrapper">
                                                        <input class="uol-form__input--radio" type="radio" id="radio-undergraduate" name="course-type" value="undergraduate" checked>
                                                        <label class="uol-form__input--radio__label" for="radio-undergraduate">Undergraduate</label>
                                                        <span class="uol-form__input--custom-radio" hidden>
                                                            <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                                                <circle cx="12" cy="12" r="12" />
                                                            </svg>
                                                        </span>
                                                    </div>

                                                    <div class="uol-form__input--radio-wrapper">
                                                        <input class="uol-form__input--radio" type="radio" id="radio-masters" name="course-type" value="masters">
                                                        <label class="uol-form__input--radio__label" for="radio-masters">Masters</label>
                                                        <span class="uol-form__input--custom-radio" hidden>
                                                            <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                                                <circle cx="12" cy="12" r="12" />
                                                            </svg>
                                                        </span>
                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="uol-form--button-inline">

                                        <div class="uol-form__inputs-wrapper">

                                            <div class="uol-form__input-container 
">

                                                <label class="uol-form__input-label" for="inputId2">
                                                    <span class="uol-form__input-label__text">Search courses</span>

                                                </label>

                                                <div class="uol-form__input-wrapper
               uol-form__input-wrapper--search
               uol-form__input-wrapper--with-icon " data-field-invalid=false>

                                                    <!--  -->

                                                    <input class="uol-form__input  uol-form__input--search" type="search" id="inputId2" name="searchCourses" value="" autocomplete="off">

                                                    <!--  -->
                                                </div>

                                            </div>

                                        </div>

                                        <div class="uol-form__button-wrapper">
                                            <button class="uol-button-v2 uol-button--default
    " type="submit">Search</button>

                                        </div>

                                    </div>

                                </form>

                                <div class="uol-rich-text">
                                    <div class="uol-form__additional-content uol-form__additional-content--after">
                                        <p><a href="#">Course A-Z</a><a href="#">Browse by subject</a></p>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>
                    <div class="uol-task-banner__course-cards">
                        <div id="undergraduate1" class="uol-content-block">

                            <h3 class="uol-content-block__heading">Open days and campus visits</h3>

                            <p class="uol-content-block__copy">Get a feel for our campus and university life at Leeds</p>

                            <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Upcoming open days</a></p>

                        </div>
                        <div id="undergraduate2" class="uol-content-block">

                            <h3 class="uol-content-block__heading">Help with your application</h3>

                            <p class="uol-content-block__copy">All you need to know in our step-by-step guide to applying</p>

                            <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Application information</a></p>

                        </div>
                        <div id="masters1" class="uol-content-block">

                            <h3 class="uol-content-block__heading">Postgraduate discovery days</h3>

                            <p class="uol-content-block__copy">Ask our experts anything about masters study.</p>

                            <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Upcoming fairs</a></p>

                        </div>
                        <div id="masters2" class="uol-content-block">

                            <h3 class="uol-content-block__heading">Funding and scholarships</h3>

                            <p class="uol-content-block__copy">Learn about the different ways we can help you fund your studies</p>

                            <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Funding options</a></p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>