<div class="projects_block theme_default">
<div class="projects_inner">
<div class="projects_header">
<h2 class="projects_title">Our Projects</h2>
<div class="projects_view_all">
<a href="#" class="projects_link">
<span class="projects_link_inner">
<span class="projects_link_label">View All</span>
<span class="projects_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
<div class="projects_main">
<div class="projects">
<div class="project project-1">
<div class="project_inner">
<div class="project_header">
<h3 class="project_title">
<a class="project_title_link" href="#">Hopkins Student Center</a>
</h3>
<div class="project_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas nibh rhoncus, pulvinar purus eget, sagittis felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas nibh rhoncus, pulvinar purus eget, sagittis felis.
</div>
</div>
<div class="project_action">
<a href="#" class="project_link">
<span class="project_link_inner">
<span class="project_link_label">Read More</span>
<span class="project_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
<div class="project project-2">
<div class="project_inner">
<div class="project_header">
<h3 class="project_title">
<a class="project_title_link" href="#">The SNF Agora Building</a>
</h3>
<div class="project_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas nibh rhoncus, pulvinar purus eget, sagittis felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas nibh rhoncus, pulvinar purus eget, sagittis felis.
</div>
</div>
<div class="project_action">
<a href="#" class="project_link">
<span class="project_link_inner">
<span class="project_link_label">Read More</span>
<span class="project_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
<div class="project project-3">
<div class="project_inner">
<div class="project_header">
<h3 class="project_title">
<a class="project_title_link" href="#">Wyman Park Building Renovation</a>
</h3>
<div class="project_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas nibh rhoncus, pulvinar purus eget, sagittis felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas nibh rhoncus, pulvinar purus eget, sagittis felis.
</div>
</div>
<div class="project_action">
<a href="#" class="project_link">
<span class="project_link_inner">
<span class="project_link_label">Read More</span>
<span class="project_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
<div class="project project-4">
<div class="project_inner">
<div class="project_header">
<h3 class="project_title">
<a class="project_title_link" href="#">MSE Library Modernization Project</a>
</h3>
<div class="project_description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas nibh rhoncus, pulvinar purus eget, sagittis felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas nibh rhoncus, pulvinar purus eget, sagittis felis.
</div>
</div>
<div class="project_action">
<a href="#" class="project_link">
<span class="project_link_inner">
<span class="project_link_label">Read More</span>
<span class="project_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="projects_tabs_lg">
<button class="js-swap project_tab project-1" data-swap-active="true" data-swap-target=".project-1" data-swap-group="projects" data-swap-options='{"collapse": false}'>
<span class="project_tab_media">
<img class="project_tab_image" srcset="https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
</span>
<span class="project_tab_title">Hopkins Student Center</span>
</button>
<button class="js-swap project_tab project-2" data-swap-active="false" data-swap-target=".project-2" data-swap-group="projects" data-swap-options='{"collapse": false}'>
<span class="project_tab_media">
<img class="project_tab_image" srcset="https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
</span>
<span class="project_tab_title">The SNF Agora Building</span>
</button>
<button class="js-swap project_tab project-3" data-swap-active="false" data-swap-target=".project-3" data-swap-group="projects" data-swap-options='{"collapse": false}'>
<span class="project_tab_media">
<img class="project_tab_image" srcset="https://images.fastspot.com/framework/500x375/3 500w, https://images.fastspot.com/framework/300x225/3 300w" src="https://images.fastspot.com/framework/300x225/3" alt="" loading="lazy" width="300" height="225">
</span>
<span class="project_tab_title">Wyman Park Building Renovation</span>
</button>
<button class="js-swap project_tab project-4" data-swap-active="false" data-swap-target=".project-4" data-swap-group="projects" data-swap-options='{"collapse": false}'>
<span class="project_tab_media">
<img class="project_tab_image" srcset="https://images.fastspot.com/framework/500x375/4 500w, https://images.fastspot.com/framework/300x225/4 300w" src="https://images.fastspot.com/framework/300x225/4" alt="" loading="lazy" width="300" height="225">
</span>
<span class="project_tab_title">MSE Library Modernization Project</span>
</button>
</div>
<div class="projects_tabs_sm">
<div class="projects_tab_mini project-1">
<button class="js-swap projects_tab_mini_button" data-swap-target=".project-4" data-swap-group="projects" data-swap-linked="project-4" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">
<svg class="icon icon_arrow_left">
<use href="/images/icons.svg#arrow_left" />
</svg>
</span>
<span class="projects_tab_mini_label">Previous</span>
</span>
</button>
<button class="js-swap projects_tab_mini_button" data-swap-active="false" data-swap-target=".project-2" data-swap-group="projects" data-swap-linked="project-2" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="projects_tab_mini_label">Next</span>
</span>
</button>
</div>
<div class="projects_tab_mini project-2">
<button class="js-swap projects_tab_mini_button" data-swap-target=".project-1" data-swap-group="projects" data-swap-linked="project-1" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">
<svg class="icon icon_arrow_left">
<use href="/images/icons.svg#arrow_left" />
</svg>
</span>
<span class="projects_tab_mini_label">Previous</span>
</span>
</button>
<button class="js-swap projects_tab_mini_button" data-swap-active="false" data-swap-target=".project-3" data-swap-group="projects" data-swap-linked="project-3" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="projects_tab_mini_label">Next</span>
</span>
</button>
</div>
<div class="projects_tab_mini project-3">
<button class="js-swap projects_tab_mini_button" data-swap-target=".project-2" data-swap-group="projects" data-swap-linked="project-2" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">
<svg class="icon icon_arrow_left">
<use href="/images/icons.svg#arrow_left" />
</svg>
</span>
<span class="projects_tab_mini_label">Previous</span>
</span>
</button>
<button class="js-swap projects_tab_mini_button" data-swap-active="false" data-swap-target=".project-4" data-swap-group="projects" data-swap-linked="project-4" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="projects_tab_mini_label">Next</span>
</span>
</button>
</div>
<div class="projects_tab_mini project-4">
<button class="js-swap projects_tab_mini_button" data-swap-target=".project-3" data-swap-group="projects" data-swap-linked="project-3" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">
<svg class="icon icon_arrow_left">
<use href="/images/icons.svg#arrow_left" />
</svg>
</span>
<span class="projects_tab_mini_label">Previous</span>
</span>
</button>
<button class="js-swap projects_tab_mini_button" data-swap-active="true" data-swap-target=".project-1" data-swap-group="projects" data-swap-linked="project-1" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="projects_tab_mini_label">Next</span>
</span>
</button>
</div>
</div>
</div>
<div class="project_medias">
<div class="project_media project-1">
<picture class="project_picture">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x686/1" width="1220" height="686">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/980x552/1" width="980" height="552">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x740/1" width="740" height="740">
<img class="project_image" src="//images.fastspot.com/framework/555x740/1" alt="" loading="lazy" width="555" height="740">
</picture>
</div>
<div class="project_media project-2">
<picture class="project_picture">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x686/2" width="1220" height="686">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/980x552/2" width="980" height="552">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x740/2" width="740" height="740">
<img class="project_image" src="//images.fastspot.com/framework/555x740/2" alt="" loading="lazy" width="555" height="740">
</picture>
</div>
<div class="project_media project-3">
<picture class="project_picture">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x686/3" width="1220" height="686">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/980x552/3" width="980" height="552">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x740/3" width="740" height="740">
<img class="project_image" src="//images.fastspot.com/framework/555x740/3" alt="" loading="lazy" width="555" height="740">
</picture>
</div>
<div class="project_media project-4">
<picture class="project_picture">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x686/4" width="1220" height="686">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/framework/980x552/4" width="980" height="552">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x740/4" width="740" height="740">
<img class="project_image" src="//images.fastspot.com/framework/555x740/4" alt="" loading="lazy" width="555" height="740">
</picture>
</div>
</div>
</div>
</div>
<div class="projects_block{% if theme %} theme_{{ theme }}{% else %} theme_default{% endif %}">
<div class="projects_inner">
<div class="projects_header">
<h2 class="projects_title">{{ title }}</h2>
<div class="projects_view_all">
{% include '@partial-link' with {
class: 'projects',
title: 'View All',
url: '#',
icon: 'arrow_right'
} %}
</div>
</div>
<div class="projects_main">
<div class="projects">
{% for item in items %}
<div class="project project-{{ loop.index }}">
<div class="project_inner">
<div class="project_header">
<h3 class="project_title">
<a class="project_title_link" href="#">{{ item.title }}</a>
</h3>
<div class="project_description">
{{ item.description }}
</div>
</div>
<div class="project_action">
{% include '@partial-link' with {
class: 'project',
title: 'Read More',
url: '#',
icon: 'arrow_right'
} %}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="projects_tabs_lg">
{% for item in items %}
<button class="js-swap project_tab project-{{ loop.index }}" data-swap-active="{{ loop.first }}" data-swap-target=".project-{{ loop.index }}" data-swap-group="projects" data-swap-options='{"collapse": false}'>
<span class="project_tab_media">
{% include '@partial-image' with {
class: 'project_tab',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.full.xsml,
img.full.xxsml
]
} %}
</span>
<span class="project_tab_title">{{ item.title }}</span>
</button>
{% endfor %}
</div>
<div class="projects_tabs_sm">
{% for item in items %}
<div class="projects_tab_mini project-{{ loop.index }}">
<button class="js-swap projects_tab_mini_button" data-swap-target=".project-{{ loop.first ? items|length : loop.index - 1 }}" data-swap-group="projects" data-swap-linked="project-{{ loop.first ? items|length : loop.index - 1 }}" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">{{ icon('arrow_left') }}</span>
<span class="projects_tab_mini_label">Previous</span>
</span>
</button>
<button class="js-swap projects_tab_mini_button" data-swap-active="{{ loop.last }}" data-swap-target=".project-{{ loop.last ? 1 : loop.index + 1 }}" data-swap-group="projects" data-swap-linked="project-{{ loop.last ? 1 : loop.index + 1 }}" data-swap-options='{"collapse": false}'>
<span class="projects_tab_mini_inner">
<span class="projects_tab_mini_icon">{{ icon('arrow_right') }}</span>
<span class="projects_tab_mini_label">Next</span>
</span>
</button>
</div>
{% endfor %}
</div>
</div>
<div class="project_medias">
{% for item in items %}
<div class="project_media project-{{ loop.index }}">
{% include '@partial-picture' with {
class: 'project',
alt: '',
image: item.image,
loading: 'lazy',
default: img.portraitFull.sml,
sources: {
'1220px': img.wide.lrg,
'980px': img.wide.med,
'500px': img.square.sml
}
} %}
</div>
{% endfor %}
</div>
</div>
</div>
No notes defined.