html captions

<main>
        <div class="logo"><img src="img/logo.png"/></div>
        <div class="mtlsr-images-for-lightbox">
            <div class="section" data-caption="&Uuml;berschrift 1">
                <ul>
                    <li class="circle">
                        <a href="img/1.jpg">
                            <img src="img/1.jpg" alt="Samira" />
                        </a>
                        <!--<div class="overlay"></div>-->
                    </li>
                    <li class="plus hidden">
                        <a href="img/1a.jpg">
                            <img src="img/plus.png"/>
                        </a>
                    </li>
                    <li class="subcircle hidden one">
                        <a href="img/1a.jpg">
                            <img src="img/1a.jpg" alt="Samira" />
                        </a>
                    </li>
                    <li class="subcircle hidden two">
                        <a href="img/1b.jpg">
                            <img src="img/1b.jpg" alt="" />
                        </a>
                    </li>
                    <li class="subcircle hidden three">
                        <a href="img/1c.jpg">
                            <img src="img/1c.jpg" alt="" />
                        </a>
                    </li>
                    <li class="subcircle hidden four">
                        <a href="img/1d.jpg">
                            <img src="img/1d.jpg" alt="" />
                        </a>
                    </li>
                </ul>
            </div>
            <div class="section" data-caption="&Uuml;berschrift 2">
                <ul>
                    <li class="circle">
                        <a href="img/2.jpg">
                            <img src="img/2.jpg" alt="" />
                        </a>
                    </li>
                    <li class="plus hidden">
                        <a href="img/1a.jpg">
                            <img src="img/plus.png"/>
                        </a>
                    </li>
                    <li class="subcircle hidden one">
                        <a href="img/2a.jpg">
                            <img src="img/2a.jpg" alt="" />
                        </a>
                    </li>
                    <li class="subcircle hidden two">
                        <a href="img/2b.jpg">
                            <img src="img/2b.jpg" alt="" />
                        </a>
                    </li>
                    <li class="subcircle hidden three">
                        <a href="img/2c.jpg">
                            <img src="img/2c.jpg" alt="" />
                        </a>
                    </li>
                    <li class="subcircle hidden four">
                        <a href="img/2d.jpg">
                            <img src="img/2d.jpg" alt="" />
                        </a>
                    </li>
                </ul>
            </div>
            <div class="section" data-caption="&Uuml;berschrift 3">
                <ul>
                    <li class="circle">
                        <a href="img/3.jpg">
                            <img src="img/3.jpg" alt="" />
                        </a>
                    </li>
                    <li class="plus hidden">
                        <a href="img/1a.jpg">
                            <img src="img/plus.png"/>
                        </a>
                    </li>
                    <li class="subcircle hidden one">
                        <a href="img/3a.jpg">
                            <img src="img/3a.jpg" alt="" />
                        </a>
                    </li>
                    <li class="subcircle hidden two">
                        <a href="img/3b.jpg">
                            <img src="img/3b.jpg" alt="" />
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="mtlsr-lightbox">
            <a href="#" class="close"><img src="img/close.png" alt="Schliessen"/></a>
            <a href="#" class="prev"><img src="img/prev.png" alt="Zurück"/></a>
            <a href="#" class="next"><img src="img/next.png" alt="Vor"/></a>
        </div>
    </main>

    <a class="cd-menu-trigger" href="#main-nav"><span></span></a>
    <nav id="main-nav">

      <ul>
          <div class="logo"><img src="img/logo.png"/></div>
          <img src="img/logo2.png"/>
        <p><strong>TRUELOVE</strong> GmbH<br>
            Dorfstrasse 27 A &bull; CH-8902 Urdorf ZH<br>
            Switzerland
        </p>
        <p>P +41 43 817 35 11<br>
        M +41 79 447 65 01<br>
        E <a href="mailto:[email protected]">[email protected]</a>
      </ul>
       <a href="#0" class="cd-close-menu">Close<span></span></a>
       <a class="cd-menu-trigger-bottom"><span></span></a>
   </nav>