Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

Page: Conference Landing

Below you will find many pieces or modules that can be used to create landing pages for conference-type events.

Here is the listing of modules found below:

Logotype Module

This module can be used when the conference uses some sort of visual logotype/wordmark that does not fit or work in the banner itself.

Template:

 

Subheading Module

This module is used to provide a basic description of the conference along with whatever the theme or slogan of the conference is.

Template:

Subheader of This Conference Goes Here

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<section id="subheading" aria-label="Subheading">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <h2 class="h1 text-center margin-top-0">Subheading of This Conference Goes Here</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
    </div>
</section>

When/Where/Nav Module

Template:

Date, Time and Location

Thursday, Nov. 23, 2022

9 a.m. - 5 p.m.
Dallas College Cedar Valley Campus
3030 N Dallas Ave, Lancaster, TX 75134

Register now! 

<section id="date" arial-label="Date, time and location">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="extra-margin extra-padding border-csecondary" style="border-top:8px solid;">
                <h2 class="sr-only">Date, Time and Location</h2>
                <div class="row">
                    <div class="col-sm-6">
                        <p class="cb-title-lg margin-btm-0">[DAY, DATE, YEAR]</p>
                    </div>
                    <div class="col-sm-6">
                        <p class="margin-bottom-0">9 a.m. - 5 p.m.
                            <br>[LOCATION NAME]<br><a href="[LINK TO GOOGLE MAP]">[LOCATION ADDRESS]</a> </p>
                    </div>
                </div>
            </div>
            <a href="[REGISTRATION LINK]" class="button bg-csecondary button-block text-uppercase"><span class="far fa-check-square ico-left" aria-hidden="true"></span>Register Now!</a>
            <nav aria-label="Conference Pages">
                <ul class="button-group button-group--justified list-inline">
                    <li><a class="button button-mn bg-cprimary" href="#">Conference item 1</a></li>
                    <li><a class="button button-mn bg-cprimary" href="#">Conference item 2</a></li>
                    <li><a class="button button-mn bg-cprimary" href="#">Conference item 3</a></li>
                    <li><a class="button button-mn bg-cprimary" href="#">Conference item 4</a></li>
                </ul>
            </nav>
        </div>
    </div>
</section>

About Module

There may be need for an extra module that provides even more description or explanation. This module is completely flexible for whatever content that additional info requires.

Template:

About the Conference

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

  • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
  • Vel illum dolore eu feugiat nulla facilisis at vero.
  • Eros et accumsan et iusto odio dignissim

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<section id="about" aria-label="About this conference">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
            <h2 class="page-header"><span class="fas fa-users ico-left" aria-hidden="true"></span>About the Conference</h2>
            <p>Lorem ipsum...</p>
        </div>
    </div>
</section>

Featured Speakers Module

Conferences will sometimes feature particular speakers or presenters. This module allows you to highlight those. For instances where there is only one, you will need to alter the bootstrap column so that it is thinner and aligned to the center (using appropriate offsets).

Template:

Featured or Keynote Speakers

Dr. Joe May

Chancellor,
Dallas College

Homer J. Simpson

Nuclear Safety Technician,
Springfield Nuclear Power Plant

George Bluth

President,
The Bluth Company

<section id="speakers" aria-label="Featured Speakers">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
            <h2 class="page-header">
            <span class="fas fa-microphone ico-left" aria-hidden="true"></span>Featured (or Keynote) Speakers</h2>
            <div class="card-group">
                <div class="card bg-cgrey-05 shadow-1">
                    <img class="card-img-top img-responsive border-csecondary" src="[IMG URL]" alt="" style="border-bottom:8px solid;">
                    <div class="card-block">
                        <h3 class="h4">
                            <a href=[BIO URL]">[SPEAKER NAME]</a></h3>
                        <p class="card-text">[SPEAKER TITLE],<br />[SPEAKER ORGANIZATION]</p>
                    </div>
                </div>
                <div class="card bg-cgrey-05 shadow-1">
                    <img class="card-img-top img-responsive border-csecondary" src="[IMG URL]" alt="" style="border-bottom:8px solid;">
                    <div class="card-block">
                        <h3 class="h4">
                            <a href=[BIO URL]">[SPEAKER NAME]</a></h3>
                        <p class="card-text">[SPEAKER TITLE],<br />[SPEAKER ORGANIZATION]</p>
                    </div>
                </div>
                <div class="card bg-cgrey-05 shadow-1">
                    <img class="card-img-top img-responsive border-csecondary" src="[IMG URL]" alt="" style="border-bottom:8px solid;">
                    <div class="card-block">
                        <h3 class="h4">
                            <a href=[BIO URL]">[SPEAKER NAME]</a></h3>
                        <p class="card-text">[SPEAKER TITLE],<br />[SPEAKER ORGANIZATION]</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Conference Tracks Module

Template:

Conference Tracks

<section id="tracks" aria-label="Conference Tracks">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <h2 class="page-header">
                <span class="far fa-list-alt ico-left" aria-hidden="true"></span>Conference Tracks</h2>
            <div class="spacer-1"></div>
            <ul class="list-unstyled col-count-2">
                <li class="h4"><a href="#">[TRACK 1]</a></li>
                <li class="h4"><a href="#">[TRACK 2]</a></li>
                <li class="h4"><a href="#">[TRACK 3]</a></li>
                <li class="h4"><a href="#">[TRACK 4]</a></li>
                <li class="h4"><a href="#">[TRACK 5]</a></li>
            </ul>
        </div>
    </div>
</section>

Agenda Module

Template:

Conference Agenda

10:00 a.m.

Keynote Presentation: To Infinity And Beyond
Lone Star Lobby

11:00 a.m.

Keynote Presentation: To Infinity And Beyond
Lone Star Lobby

2:00 p.m.

Keynote Presentation: To Infinity And Beyond
Lone Star Lobby 

<section id="agenda" aria-label="Conference Agenda">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <h2 class="page-header">
                <span class="fas fa-calendar-alt ico-left" aria-hidden="true"></span>Conference Agenda</h2>
            <div class="spacer-1"></div>
            <div class="event-card shadow-1">
                <div class="event-head">
                    <div class="row bg-cgrey-05">
                        <div class="col-md-2 col-sm-3 event-time">
                            <h3 class="h4">10:00 a.m.</h3>
                        </div>
                        <div class="col-md-7 col-sm-9 event-card-title">
                            <span class="h4">Keynote Presentation: To Infinity And Beyond</span> </div>
                        <div class="col-md-3 col-md-offset-0 col-sm-9 col-sm-offset-3 event-location">
                            <a href="#"><span class="text-cprimary ico fas fa-map-marker-alt ico-left" aria-label="Location"></span>Lone Star Lobby</a></div>
                    </div>
                </div>
            </div>
            <div class="event-card shadow-1">
                <div class="event-head">
                    <div class="row bg-cgrey-05">
                        <div class="col-md-2 col-sm-3 event-time">
                            <h3 class="h4">11:00 a.m.</h3>
                        </div>
                        <div class="col-md-7 col-sm-9 event-card-title">
                            <span class="h4">Keynote Presentation: To Infinity And Beyond</span> </div>
                        <div class="col-md-3 col-md-offset-0 col-sm-9 col-sm-offset-3 event-location">
                            <a href="#"><span class="text-cprimary ico fas fa-map-marker-alt ico-left" aria-label="Location"></span>Lone Star Lobby</a> </div>
                    </div>
                </div>
            </div>
            <div class="event-card shadow-1">
                <div class="event-head">
                    <div class="row bg-cgrey-05">
                        <div class="col-md-2 col-sm-3 event-time">
                            <h3 class="h4">2:00 p.m.</h3>
                        </div>
                        <div class="col-md-7 col-sm-9 event-card-title">
                            <span class="h4">Keynote Presentation: To Infinity And Beyond</span> </div>
                        <div class="col-md-3 col-md-offset-0 col-sm-9 col-sm-offset-3 event-location">
                            <a href="#"><span class="text-cprimary ico fas fa-map-marker-alt ico-left" aria-label="Location"></span>Lone Star Lobby</a> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Sponsors Module

Template:

Conference Sponsors

Become a partner

 
Alt text
Alt text
Alt text
Alt text

<section id="sponsors" aria-label="Conference Sponsors">
    <h2 class="h1 page-header border-csecondary" style="border-width:8px;">
        <span aria-hidden="true" class="ico fas fa-handshake ico-left"></span>Conference Sponsors<br></h2>
    <p class="text-right">
        <a href="[SPONSORSHIP PACKET]" class="pgs-action-link">
            <span aria-hidden="true" class="ico fas fa-chevron-right ico-left"></span>Become a partner</a></p>
    <div class="spacer-1"></div>
    <div class="row">
        <div class="col-sm-3 col-xs-6 text-center">
            <a href="[SPONSOR LINK]"><img alt="Alt text" src="[IMG URL]" class="img-responsive"></a></div>
        <div class="col-sm-3 col-xs-6 text-center">
            <a href="[SPONSOR LINK]"><img alt="Alt text" src="[IMG URL]" class="img-responsive"></a></div>
        <div class="col-sm-3 col-xs-6 text-center">
            <a href="[SPONSOR LINK]"><img alt="Alt text" src="[IMG URL]" class="img-responsive"></a></div>
        <div class="col-sm-3 col-xs-6 text-center">
            <a href="[SPONSOR LINK]"><img alt="Alt text" src="[IMG URL]" class="img-responsive"></a></div>
    </div>
</section>