<!--UCPA Emergency Banner Alert-->
<div id="emergencyalert">
<div id="AppArmorAlertID_2"></div>
<script type="text/javascript" src="//lehigh.apparmor.com/Notifications/Feeds/Javascript/?AlertID=2" async></script>
</div>
<!--End UCPA Emergency Banner Alert-->
<header class="header">
<div class="container-fluid">
<div class="row logo-wrapper">
<button class="navbar-toggler main-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars icon-default"><span class="sr-only">Open menu</span></i><i class="fa fa-times icon-hover"><span class="sr-only"><span>Close menu</span></i></span>
</button>
<div class="logo">
<picture class="image lehigh-logo e11y-ok">
<a href="" class="logo__link">
<img class="web" src="" alt="Lehigh University logo" width="200" height="43" />
<span class="u-a11y-text">Go to homepage</span>
</a>
</picture>
</div><!-- end logo -->
<div class="mobile-search">
<button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
</div><!-- end mobile-search -->
</div>
</div>
<div class="header-wrapper container-fluid">
<div class="row">
<div class="col title">
<span class="site-title"><a href=""></a></span>
</div><!-- title -->
</div>
<div class="navigation-wrapper">
</div><!-- end navigation-wrapper -->
</div><!-- end header-wrapper -->
</header>
<main class="d-print-block accent-">
<a id="main-content" tabindex="-1"></a>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="content-top col-12 col-print-12 ">
<h1 class="page-title">Event Title</h1>
<nav aria-label="breadcrumb">
<h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item active"><a href="#">Home</a></li>
<li class="breadcrumb-item active"><a href="#">Landing Page</a></li>
<li class="breadcrumb-item">Event Title</li>
</ol>
</nav>
</div>
</div>
<div class="quick_buttons">
<ul>
<li><span class="icon far fa-calendar-alt"></span><span class="sr-only">Date of event: </span><span>December 31, 2020 - January 5, 2021</span></li>
<li><span class="icon far fa-clock"></span><span class="sr-only">Time of event: </span><span>8:30am</span></li>
<li><span class="icon fas fa-map-marker-alt"></span><span class="sr-only">Location: </span><span>Location</span></li>
<li><span class="icon fas fa-tag"></span><span class="sr-only">Category: </span><span>Category</span></li>
<li><span class="icon far fa-sitemap"></span><span class="sr-only">Department: </span><span>Department</span></li>
</ul>
</div><!-- end quick_buttons -->
</div>
<div class="container-fluid">
<div class="row">
<section class="main-content col-sm-12 col-md-8 col-lg-9 col-xl-9 col-print-12">
<div class="event_image">
<picture class="image">
<img src="/img/lava-3.jpg" alt="hot lava" />
</picture>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac nisi porttitor tellus malesuada pulvinar. Morbi eget justo urna. Integer lacinia magna nibh, quis finibus sem tristique eu. Proin ac maximus justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non lacus eget urna egestas laoreet. Proin hendrerit mi nisl, et vehicula ex imperdiet eget. Suspendisse tempus euismod ante, maximus placerat mauris blandit eget. Morbi dui neque, sodales et venenatis in, dapibus quis sapien.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras sollicitudin nisl dolor, sed lobortis mi varius volutpat. In a pharetra diam, nec convallis sem. Sed convallis purus interdum, interdum est tristique, viverra libero. Proin interdum condimentum neque, vel aliquet tellus vehicula facilisis. Phasellus velit magna, tristique vitae eleifend a, dapibus sit amet tellus. Praesent vel efficitur magna. Ut porttitor, enim in dictum maximus, justo nunc sollicitudin justo, at tincidunt leo ipsum in sapien. Sed eu felis nulla. Nullam id nulla non arcu commodo tempor eu sed quam. Nulla commodo felis vel ligula mollis, vel interdum augue lacinia. Nam eget semper tortor. Fusce a neque augue. Nunc sed luctus tortor. Nullam tempus egestas tempor.</p>
<p>Duis enim lectus, tincidunt sit amet sagittis ut, tristique ornare nunc. Etiam gravida vehicula iaculis. Praesent dapibus convallis arcu, dictum auctor erat bibendum et. Proin efficitur mi ac dui imperdiet vulputate. Vivamus convallis ultricies nisl vitae aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tempus diam mi, vitae ultrices ipsum tincidunt at. In vestibulum orci vel commodo varius. Nam pharetra neque a orci mollis laoreet. Praesent ut sodales nulla. Nam id diam blandit, maximus eros sit amet, rhoncus ligula. Donec volutpat pharetra lorem quis mattis. Mauris a consequat nulla. In ut turpis ullamcorper, pretium nisi sollicitudin, efficitur nunc. </p>
</section>
<section class="right-content col-sm-12 col-md-4 col-lg-3 col-xl-3 col-print-12">
<div class="side_register">
<a href="#" class="btn btn-primary gold" role="button">
<span class="button_text">Register for Event</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
<div class="sidebar_events-list">
<div class="events-item">
<div class="events-details">
<h3><a href="#">Event Title</a></h3>
<p class="events-dates">January 28, 2021</p>
</div>
<div class="event-img"><img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
</div><!-- end sidebar_events_item -->
<div class="events-item">
<div class="events-details">
<h3><a href="#">Event Title</a></h3>
<p class="events-dates">January 10, 2021</p>
</div>
<div class="event-img"><img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
</div><!-- end sidebar_events_item -->
<div class="events-item">
<div class="events-details">
<h3><a href="#">Event Title</a></h3>
<p class="events-dates">December 23, 2020</p>
</div>
<div class="event-img"><img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
</div><!-- end sidebar_events_item -->
</div><!-- end sidebar_events-list -->
</section>
</div><!-- end row -->
</div><!-- end container-fluid -->
</main>
<footer id="site_footer">
<div class="footer_wrapper">
<div class="row">
<script src="/files/lehigh_footer-clutch-min.js"></script>
<!-- region for footer-main -->
<section class="department_footer">
<!-- Single block styled as department footer -->
<h2>Lehigh's New theme- clutch</h2>
<ul class="social-media">
<li>
<a href="https://twitter.com/lehighu">
<i class="fab fa-twitter"></i>
<span class="sr-only">Like us on Twitter</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/lehighu">
<i class="fab fa-facebook-f"></i>
<span class="sr-only">Like us on Facebook</span>
</a>
</li>
<li>
<a href="https://www.linkedin.com/school/lehigh-college-of-business/">
<i class="fab fa-linkedin"></i>
<span class="sr-only">Like us on LinkedIn</span>
</a>
</li>
<li>
<a href="https://lehighu.tumblr.com/">
<i class="fab fa-tumblr"></i>
<span class="sr-only">Like us on Tumblr</span>
</a>
</li>
<li>
<a href="https://www.tiktok.com/@lehighadmissions">
<i class="fab fa-tiktok"></i>
<span class="sr-only">Like us on TikTok</span>
</a>
</li>
<li>
<a href="https://www.instagram.com/lehighu/">
<i class="fab fa-instagram"></i>
<span class="sr-only">Like us on Instagram</span>
</a>
</li>
<li>
<a href="https://www.youtube.com/user/lehighuofficial">
<i class="fab fa-youtube"></i>
<span class="sr-only">Like us on YouTube</span>
</a>
</li>
</ul>
<ul class="contact-info">
<li>
<i class="fas fa-phone"></i>
<span class="sr-only">Phone Number</span>
<span>(610) 758 4025</span>
</li>
<li>
<i class="fas fa-fax"></i>
<span class="sr-only">Fax Number</span>
<span>(610) 758 4026</span>
</li>
<li>
<a href="https://www.google.com/maps/@40.6078606,-75.379379,19z" target="_blank">
<i class="fas fa-map-marker-alt"></i>
<span class="sr-only">Address</span>
<address>19 Memorial Drive W.<br /> Lehigh University<br /> Bethlehem, PA<br /> 18015</address>
</a>
</li>
<li>
<a href="mailto:email@lehigh.edu">
<i class="fas fa-envelope"></i>
<span class="sr-only">Email address</span>
email@lehigh.edu
</a>
</li>
</ul>
<div class="footer-buttons text-center">
<a href="#" class="btn btn-primary gold" role="button">
<span class="button_text">Contact Us</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary gold" role="button">
<span class="button_text">Get Help</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</section>
<!-- endregion for footer-main -->
<!-- region for footer-group -->
<!-- endregion for footer-group -->
</div>
<div class="row">
<div class="dark-toggle">
<div class="moon">
<span class="sr-only">Dark mode toggle on and off switch</span>
</div>
</div>
</div>
</div>
</footer>
{% extends '@base_layout' %}
{% if has_quick_buttons|default %}
{% block quick_buttons %}
{% include "@quick_buttons" %}
{% endblock quick_buttons %}
{% endif %}
{% block region_main %}
{% block event_image %}
<div class="event_image">
{% include "@images" with {
img_src: images.img_src,
img_alt: images.img_alt
} %}
</div>
{% endblock event_image %}
{{ content }}
{% endblock region_main %}
{% block footer %}
{% render "@footer_option_2" %}
{% endblock footer %}
{
"has_sidebar": true,
"has_page_navigation": false,
"has_quick_buttons": true,
"page_header": "Event Title",
"bread_items": {
"1": {
"text": "Home",
"url": "#"
},
"2": {
"text": "Landing Page",
"url": "#"
},
"3": {
"text": "Event Title",
"url": ""
}
},
"quick_buttons": {
"1": {
"sr_text": "Date of event: ",
"link_text": "December 31, 2020 - January 5, 2021",
"fa_class": "far fa-calendar-alt"
},
"2": {
"sr_text": "Time of event: ",
"link_text": "8:30am",
"fa_class": "far fa-clock"
},
"3": {
"sr_text": "Location: ",
"link_text": "Location",
"fa_class": "fas fa-map-marker-alt"
},
"4": {
"sr_text": "Category: ",
"link_text": "Category",
"fa_class": "fas fa-tag"
},
"5": {
"sr_text": "Department: ",
"link_text": "Department",
"fa_class": "far fa-sitemap"
}
},
"images": {
"img_src": "/img/lava-3.jpg",
"img_alt": "hot lava"
},
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac nisi porttitor tellus malesuada pulvinar. Morbi eget justo urna. Integer lacinia magna nibh, quis finibus sem tristique eu. Proin ac maximus justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non lacus eget urna egestas laoreet. Proin hendrerit mi nisl, et vehicula ex imperdiet eget. Suspendisse tempus euismod ante, maximus placerat mauris blandit eget. Morbi dui neque, sodales et venenatis in, dapibus quis sapien.</p>\n<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras sollicitudin nisl dolor, sed lobortis mi varius volutpat. In a pharetra diam, nec convallis sem. Sed convallis purus interdum, interdum est tristique, viverra libero. Proin interdum condimentum neque, vel aliquet tellus vehicula facilisis. Phasellus velit magna, tristique vitae eleifend a, dapibus sit amet tellus. Praesent vel efficitur magna. Ut porttitor, enim in dictum maximus, justo nunc sollicitudin justo, at tincidunt leo ipsum in sapien. Sed eu felis nulla. Nullam id nulla non arcu commodo tempor eu sed quam. Nulla commodo felis vel ligula mollis, vel interdum augue lacinia. Nam eget semper tortor. Fusce a neque augue. Nunc sed luctus tortor. Nullam tempus egestas tempor.</p>\n<p>Duis enim lectus, tincidunt sit amet sagittis ut, tristique ornare nunc. Etiam gravida vehicula iaculis. Praesent dapibus convallis arcu, dictum auctor erat bibendum et. Proin efficitur mi ac dui imperdiet vulputate. Vivamus convallis ultricies nisl vitae aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tempus diam mi, vitae ultrices ipsum tincidunt at. In vestibulum orci vel commodo varius. Nam pharetra neque a orci mollis laoreet. Praesent ut sodales nulla. Nam id diam blandit, maximus eros sit amet, rhoncus ligula. Donec volutpat pharetra lorem quis mattis. Mauris a consequat nulla. In ut turpis ullamcorper, pretium nisi sollicitudin, efficitur nunc. </p>",
"side_event_register": {
"buttons": {
"1": {
"text": "Register for Event",
"url": "#",
"color": "gold"
}
}
},
"side_events": {
"title": "Upcoming Events",
"events_listings": {
"1": {
"title": "Event Title",
"url": "#",
"date": "January 28, 2021",
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
},
"2": {
"title": "Event Title",
"url": "#",
"date": "January 10, 2021",
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
},
"3": {
"title": "Event Title",
"url": "#",
"date": "December 23, 2020",
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
}
}
}
}
.side_register {
.btn {
width: 225px;
padding: $spacer;
}
}
This show an event page.