<div class="homepage-campus">
<div class="homepage-campus__container">
<div class="homepage-campus__wrapper">
<div class="homepage-campus__text">
<div class="homepage-campus__line"></div>
<h2 class="homepage-campus__header">
World-class university, micro-urban city
</h2>
<div class="homepage-campus__body">
<p>Studying urban planning at UIUC means you have access to the resources, facilities, and minds of a global R1 university. It also makes you part of a long tradition—planning has been offered at Illinois since 1912.</p>
<p>Getting involved in planning issues at all levels is easy in Champaign-Urbana. Work with three plan commissions, two city councils, a county board, the Bicycle and Pedestrian Advisory Board, the Sustainability Advisory Commission,
the Community Development Commission, and more!</p>
</div>
</div>
<ul class="homepage-campus__cta">
<li class="homepage-campus__cta-list">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">See the benefits of studying at the U of I</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/></svg></span></span>
</div>
</a>
</li>
<li class="homepage-campus__cta-list">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Explore life in Champaign-Urbana</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/></svg></span></span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="homepage-campus">
<div class="homepage-campus__container">
<div class="homepage-campus__wrapper">
<div class="homepage-campus__text">
<div class="homepage-campus__line"></div>
<h2 class="homepage-campus__header">
{{ campus.header }}
</h2>
<div class="homepage-campus__body">
{{ campus.body | raw }}
</div>
</div>
<ul class="homepage-campus__cta">
<li class="homepage-campus__cta-list">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'internal-link',
text: campus.cta1.text,
url: campus.cta1.url,
width: regular,
}
} %}
</li>
{% if campus.cta2.text and campus.cta2.url %}
<li class="homepage-campus__cta-list">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'internal-link',
text: campus.cta2.text,
url: campus.cta2.url,
width: regular,
}
} %}
</li>
{% endif %}
</ul>
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"campus": {
"header": "World-class university, micro-urban city",
"body": "<p>Studying urban planning at UIUC means you have access to the resources, facilities, and minds of a global R1 university. It also makes you part of a long tradition—planning has been offered at Illinois since 1912.</p><p>Getting involved in planning issues at all levels is easy in Champaign-Urbana. Work with three plan commissions, two city councils, a county board, the Bicycle and Pedestrian Advisory Board, the Sustainability Advisory Commission, the Community Development Commission, and more!</p>",
"cta1": {
"text": "See the benefits of studying at the U of I",
"url": "#"
},
"cta2": {
"text": "Explore life in Champaign-Urbana",
"url": "#"
}
}
}
breakpointSmall = 784px
breakpointLarge = 1300px
backgroundPosition()
content ""
display block
height 75vw
left 0
position absolute
top 0
width 100vw
+above(breakpointSmall)
bottom 0
height auto
left calc(100% * (3 / 8))
position absolute
top 0
width s('calc((%s * (5 / 8)) + ((100vw - %s) / 2) + 16px)', maxContentWidth, maxContentWidth)
+above(breakpointLarge)
left calc(100% * (4 / 12))
width s('calc((%s * (8 / 12)) + ((100vw - %s) / 2) + 16px)', maxContentWidth, maxContentWidth)
.homepage-campus
background-color altgeld
position relative
&__container
@extends $contentContainer
&__wrapper
padding-top 80px
padding-bottom 96px
+above(breakpointSmall)
@supports (display: grid)
display grid
grid-template-columns 5fr 3fr
padding-bottom 128px
padding-top 128px
position relative
+above(breakpointLarge)
grid-template-columns 8fr 4fr
padding-bottom 160px
padding-top 160px
&:before
background transparent url('../assets/images/uiuc-campus.jpg') no-repeat left center
background-size cover
mix-blend-mode multiply
opacity 0.15
backgroundPosition()
&__line
border-top 8px solid white
left 0
position absolute
top 0
width 100vw
z-index 1
+above(breakpointSmall)
margin-bottom 32px
&__text
padding-top 24px
+above(breakpointSmall)
padding-top 40px
padding-right 48px
+above(breakpointLarge)
padding-right 128px
position relative
z-index 1
&__header
@extends $primaryTitle
color white
margin-bottom 16px
&__body
& em
font-style italic
& strong
font-weight 500
& p
@extends $primaryParagraph
color white
& a
border-bottom 1px solid white
color white
cursor pointer
font-weight 500
text-decoration none
transition all 0.3s
&:focus
&:hover
&:active
background-color charcoalLighter
&__cta
align-content start
@supports (display: grid)
display grid
grid-gap 16px
grid-template-columns 1fr
padding-top 32px
+above(breakpointSmall)
padding-top 40px
position relative
z-index 1
There are no notes for this item.