HTML Snippet for hero

<div class="hero-lcc-wrapper" style="background-image: url('https://www.leeds.gov.uk/_catalogs/masterpage/public/images/home-hero-images/1.jpg');">
    <div class="hero-lcc">
        <div class="hero-lcc__content">
            <div class="hero-lcc__intro">
                <h1 class="hero-lcc__intro-header"><span>Welcome to </span>LEEDS.GOV.UK</h1>
                <h2 class="hero-lcc__intro-secondary">How can we help you today?</h2>
            </div>
            <div class="hero-lcc__actions">
                <div class="hero-lcc__search-wrapper">
                    <div class="input-group hero-lcc__search">
                        <label class="sr-only" for="hero-site-search">Search the website</label>
                        <input type="text" class="form-control hero-lcc__search-input" placeholder="Find information, advice and more" id="hero-site-search">
                        <span class="input-group-btn hero-lcc__search-btn-wrapper">
                            <button class="btn btn-green" type="button"><span>Search</span><i class="fa fa-search" aria-hidden="true"></i></button>
                        </span>
                    </div>
                </div>
                <div class="hero-lcc__most-popular-wrapper">
                    <ul class="hero-lcc__most-popular two">
                        <li class="hero-lcc__most-popular-item"><a href="#" class="btn">Check your bin day</a></li>
                        <li class="hero-lcc__most-popular-item"><a href="#" class="btn">Online payments</a></li>
                        <li class="hero-lcc__most-popular-item"><a href="#" class="btn">Apply for a primary school</a></li>
                        <li class="hero-lcc__most-popular-item"><a href="#" class="btn">Roadworks and closures</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>