osem/_includes/modals.html

<div class="portfolio-modal modal fade" id="splashModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='splashImage'>
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h2>Splash Pages</h2>
                        <p>
                            Build a splash page for your event. Let visitors know what will happen when, how and where!
                        </p>
                        <hr class="star-primary">
                        <img id='splashImage' class="img-responsive img-centered" alt="An event splash page" data-imgsrc="img/portfolio/splash.jpg">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="portfolio-modal modal fade" id="scheduleModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='scheduleImage'>
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h2>Schedules</h2>
                        <p>
                            Provide an event schedule with detailed information about your program.
                        </p>
                        <hr class="star-primary">
                        <img id="scheduleImage" data-imgsrc="img/portfolio/schedule.jpg" class="img-responsive img-centered" alt="Schedule of a typical event in OSEM">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="portfolio-modal modal fade" id="sessionModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='sessionImage'>
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h2>Session Pages</h2>
                        <p>
                            Show visitors all the details of your sessions.
                        </p>
                        <hr class="star-primary">
                        <img id='sessionImage' data-imgsrc="img/portfolio/events.jpg" class="img-responsive img-centered" alt="A detailed session page">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="portfolio-modal modal fade" id="cfpModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='cfpImage'>
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h2>Paper Submission</h2>
                        <p>
                            Receive proposals for Talks, Workshops for your Event. Classify and rate them!
                        </p>
                        <hr class="star-primary">
                        <img id='cfpImage' data-imgsrc="img/portfolio/cfp.jpg" class="img-responsive img-centered" alt="Screenshots of the paper submission workflow">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="portfolio-modal modal fade" id="registrationModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='registrationImage'>
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h2>Visitor Registration</h2>
                        <p>
                            Let visitors sign up for your event. Optionally sell them tickets!
                        </p>
                        <hr class="star-primary">
                        <img id='registrationImage' data-imgsrc="img/portfolio/registration.jpg" class="img-responsive img-centered" alt="Screenshots of the registration workflow">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="portfolio-modal modal fade" id="adminModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='adminImage'>
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h2>Administration</h2>
                        <p>
                            Find all the important info about your Event on the administrator dashboard!
                        </p>
                        <hr class="star-primary">
                        <img id='adminImage' data-imgsrc="img/portfolio/dashboard.png" class="img-responsive img-centered" alt="An administration dashboard">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>