<div class="sidekick">
<div class="sidekick__container">
<div class="sidekick__column sidekick__column--one">
<div class="sidekick__heading" data-sal="slide-up" data-sal-duration="400" data-sal-easing="ease-out-quint">
Start your professional theatre career
</div>
<div class="sidekick__image sidekick__image--one" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="sidekick__image-overlay"></div>
<div class="sidekick__circle sidekick__circle--one">
<svg class="spotlight-circle__container spotlight-circle spotlight-circle--illini-orange" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 824 616">
<path class="spotlight-circle__path" id="path--circle1"
fill="none" stroke="none"
stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
/>
<circle class="spotlight-circle__shape" id="circle1"
cx="0" cy="0" r="325" stroke="#FF552E" stroke-width="4"
data-spotlight-circle-id="circle1"
data-spotlight-circle-animation="animation1"
data-spotlight-circle-duration="2s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<div class="sidekick__circle sidekick__circle--two">
<svg class="spotlight-circle__container spotlight-circle spotlight-circle--heritage-orange" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 824 616">
<path class="spotlight-circle__path" id="path--circle2"
fill="none" stroke="none"
stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
/>
<circle class="spotlight-circle__shape" id="circle2"
cx="0" cy="0" r="325" stroke="#FF552E" stroke-width="4"
data-spotlight-circle-id="circle2"
data-spotlight-circle-animation="animation2"
data-spotlight-circle-duration="2s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/632/424?random=1" alt="" width="632" height="424">
</figure>
</div>
</div>
<div class="sidekick__column sidekick__column--two">
<div class="sidekick__image sidekick__image--two" data-sal="slide-up" data-sal-duration="400" data-sal-delay="800" data-sal-easing="ease-out-quint">
<div class="sidekick__image-overlay"></div>
<div class="sidekick__circle sidekick__circle--three">
<svg class="spotlight-circle__container spotlight-circle spotlight-circle--arches-blue" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 824 616">
<path class="spotlight-circle__path" id="path--circle3"
fill="none" stroke="none"
stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
/>
<circle class="spotlight-circle__shape" id="circle3"
cx="0" cy="0" r="325" stroke="#FF552E" stroke-width="4"
data-spotlight-circle-id="circle3"
data-spotlight-circle-animation="animation3"
data-spotlight-circle-duration="2s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<div class="sidekick__circle sidekick__circle--four">
<svg class="spotlight-circle__container spotlight-circle spotlight-circle--industrial-blue" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 824 616">
<path class="spotlight-circle__path" id="path--circle4"
fill="none" stroke="none"
stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
/>
<circle class="spotlight-circle__shape" id="circle4"
cx="0" cy="0" r="325" stroke="#FF552E" stroke-width="4"
data-spotlight-circle-id="circle4"
data-spotlight-circle-animation="animation4"
data-spotlight-circle-duration="2s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/632/424?random=1" alt="" width="632" height="424">
</figure>
</div>
<div class="sidekick__description" data-sal="slide-up" data-sal-duration="400" data-sal-delay="1200" data-sal-easing="ease-out-quint">
Don't just imagine your professional theatre career. Begin it. Our rigorous, conservatory-style training empowers you with the practical skills to become a working theatre professional, whether your art lives onstage, backstage, or in the booth.
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="sidekick">
<div class="sidekick__container">
<div class="sidekick__column sidekick__column--one">
<div class="sidekick__heading"
data-sal="slide-up"
data-sal-duration="400"
data-sal-easing="ease-out-quint">
{{ sidekick.heading }}
</div>
<div class="sidekick__image sidekick__image--one"
data-sal="slide-up"
data-sal-duration="400"
data-sal-delay="400"
data-sal-easing="ease-out-quint"
>
<div class="sidekick__image-overlay"></div>
<div class="sidekick__circle sidekick__circle--one">
{% include 'bits/spotlight-circle/spotlight-circle.twig' with {
animation: 'animation1',
color: 'illini-orange',
duration: '2s',
id: 'circle1',
size: '325',
stroke: '4',
viewBoxWidth: '824',
viewBoxHeight: '616',
} %}
</div>
<div class="sidekick__circle sidekick__circle--two">
{% include 'bits/spotlight-circle/spotlight-circle.twig' with {
animation: 'animation2',
color: 'heritage-orange',
duration: '2s',
id: 'circle2',
size: '325',
stroke: '4',
viewBoxWidth: '824',
viewBoxHeight: '616',
} %}
</div>
{{ imageMacros.create(sidekick.imageOne, 632, 424, 'dark') }}
</div>
</div>
<div class="sidekick__column sidekick__column--two">
<div class="sidekick__image sidekick__image--two"
data-sal="slide-up"
data-sal-duration="400"
data-sal-delay="800"
data-sal-easing="ease-out-quint"
>
<div class="sidekick__image-overlay"></div>
<div class="sidekick__circle sidekick__circle--three">
{% include 'bits/spotlight-circle/spotlight-circle.twig' with {
animation: 'animation3',
color: 'arches-blue',
duration: '2s',
id: 'circle3',
size: '325',
stroke: '4',
viewBoxWidth: '824',
viewBoxHeight: '616',
} %}
</div>
<div class="sidekick__circle sidekick__circle--four">
{% include 'bits/spotlight-circle/spotlight-circle.twig' with {
animation: 'animation4',
color: 'industrial-blue',
duration: '2s',
id: 'circle4',
size: '325',
stroke: '4',
viewBoxWidth: '824',
viewBoxHeight: '616',
} %}
</div>
{{ imageMacros.create(sidekick.imageTwo, 632, 424, 'dark') }}
</div>
<div class="sidekick__description"
data-sal="slide-up"
data-sal-duration="400"
data-sal-delay="1200"
data-sal-easing="ease-out-quint">
{{ sidekick.description }}
</div>
</div>
</div>
</div>
{
"siteUnit": "theatre",
"departmentName": "Theatre",
"background": "light",
"sidekick": {
"heading": "Start your professional theatre career",
"description": "Don't just imagine your professional theatre career. Begin it. Our rigorous, conservatory-style training empowers you with the practical skills to become a working theatre professional, whether your art lives onstage, backstage, or in the booth.",
"imageOne": {
"src": "https://picsum.photos/632/424?random=1",
"alt": "Alt text"
},
"imageTwo": {
"src": "https://picsum.photos/632/424?random=1",
"alt": "Alt text"
}
}
}
.sidekick
background-color illiniBlueDark
fluid(padding-bottom, 500px, maxContentWidth, 96px, 176px)
fluid(padding-top, 500px, maxContentWidth, 96px, 176px)
position relative
&__container
@extends $contentContainer
align-items center
display flex
flex-direction column
position relative
+above(largeDeviceBreakpoint)
flex-direction row
&__column
+above(largeDeviceBreakpoint)
width 50%
&--one
+above(largeDeviceBreakpoint)
margin-right 64px
+below(largeDeviceBreakpoint)
margin-bottom 80px
&__heading
@extends $billboardTitle
color white
margin-bottom -24px
position relative
text-align center
z-index 2
+above(largeDeviceBreakpoint)
margin-bottom -48px
text-align end
&__description
@extends $headline3
color white
margin-top 48px
&__image-overlay
background illiniBlueDark
bottom 0
left 0
mix-blend-mode lighten
position absolute
right 0
top 0
&__image
position relative
&__circle
bottom 0
left 0
position absolute
right 0
top 0
z-index 1
There are no notes for this item.