Skip to main content
Back to top
#homepage-panel { --panels: 4; --panel-1-color: var(--color-red); --panel-2-color: var(--color-yellow); --panel-3-color: var(--color-purple); --panel-4-color: var(--color-green); } .panel-container { display: flex; flex-direction: column; height: 100%; } .panel{ position: relative; display:flex; justify-content: center; overflow:hidden; width:100%; height:25%; background-size:cover; top:0; -webkit-transition: transform var(--normal-speed) var(--easy-ease); -moz-transition: transform var(--normal-speed) var(--easy-ease); -o-transition: transform var(--normal-speed) var(--easy-ease); transition: transform var(--normal-speed) var(--easy-ease); } .panel .background-img{ height: 150%; width: 150%; top:-20%; position: absolute; display: block; background-position: 50% 15%; background-size: cover; -webkit-transition: transform var(--normal-speed) var(--easy-ease); -moz-transition: transform var(--normal-speed) var(--easy-ease); -o-transition: transform var(--normal-speed) var(--easy-ease); transition: transform var(--normal-speed) var(--easy-ease); } .panel .background-img img{ min-height: 100%; min-width: 100%; object-fit: cover; } .panel .background-img::after { background-image: linear-gradient(45deg, rgba(35,31,32,0.9), rgba(35,31,32,0.5)); opacity: 0.5; -webkit-transition: opacity var(--normal-speed) ease; -moz-transition: opacity var(--normal-speed) ease; -o-transition: opacity var(--normal-speed) ease; transition: opacity var(--normal-speed) ease; } .panel:nth-of-type(2) .panel-summary p:nth-of-type(2) strong::after{ background-color: #eea520; } .panel:nth-of-type(3) .panel-summary p:nth-of-type(2) strong::after{ /*background-color: #464670;*/ background-color: #9146ff; } .panel:nth-of-type(4) .panel-summary p:nth-of-type(2) strong::after{ background-color: #759d33; } .panel .content{ z-index: 30; width: 80%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction:column; text-align:center; background-image: radial-gradient(rgba(32,32,32,0.2), rgba(32,32,32,0), rgba(32,32,32,0)); -webkit-transform: translateY(-0.5rem); transform: translateY(-0.5rem); } .panel-heading { z-index: 1; } .panel-heading p:first-of-type { -webkit-transform: translateY(0.25rem); transform: translateY(0.25rem); } .panel-summary { z-index: 1; display: flex; flex-direction: column; } .panel-summary p:nth-of-type(2){ display: flex; justify-content: center; } .panel-summary p:nth-of-type(2) strong{ position: absolute; } .panel-summary p:nth-of-type(2) strong::after{ content: ''; display: inline-block; position: relative; width: 0%; height: 2px; background: #e6474a; -webkit-transform: translateY(-0.75rem); transform: translateY(-0.75rem); -webkit-animation: underlineReset 0ms var(--easy-ease) both; animation-name: underlineReset; animation-duration: 0ms; animation-timing-function: var(--ease-ease); animation-fill-mode: both; } .page-animation-ready .panel:hover .panel-summary p:nth-of-type(2) strong::after, .page-animation-ready .panel:focus .panel-summary p:nth-of-type(2) strong::after{ -webkit-animation: underlineHover var(--normal-speed) var(--easy-ease) both; animation-name: underlineHover; animation-duration: var(--normal-speed); animation-timing-function: var(--ease-ease); animation-fill-mode: both; } html.cssanimations .page-animation-ready .panel-summary p:nth-of-type(2) strong::after{ -webkit-animation: underlineReset var(--normal-speed) var(--easy-ease) both; animation-name: underlineReset; animation-duration: var(--normal-speed); } .panel:hover .background-img, .panel:focus .background-img{ -webkit-transform: scale(0.85); transform: scale(0.85); } .panel:hover .background-img::after, .panel:focus .background-img::after{ opacity: 1; } @-webkit-keyframes underlineReset { from { width: 100%; } } @keyframes underlineReset { from { width: 100%; } } @-webkit-keyframes underlineHover { to { width: 100%; } } @keyframes underlineHover { to { width: 100%; } } @media screen and (min-width: 30em){ .panel-container{ flex-direction: row; flex-wrap: wrap; } .panel{ width: 50%; height: auto; background-size:cover; } } @media screen and (min-width: 68em){ .panel-container{ flex-wrap: nowrap; width: 110vw; -webkit-transform: translateX(-5vw); transform: translateX(-5vw); } .panel{ width:25%; height:100%; -webkit-transform: skewX(-10deg); transform: skewX(-10deg); } .panel-heading { -webkit-transform: translateY(4rem); transform: translateY(4rem); } .panel-heading { -webkit-animation: animateRevert var(--normal-speed) var(--easy-ease) both; animation-name: animateRevert; animation-duration: 0ms; animation-timing-function: var(--ease-ease); animation-fill-mode: both; --animation-translate-x: 0; --animation-translate-y: 1.5rem; } html.cssanimations .page-animation-ready .panel-heading{ -webkit-animation-duration: var(--normal-speed); animation-duration: var(--normal-speed); } .panel-heading p:first-of-type { -webkit-transform: translateY(0.25rem); transform: translateY(0.25rem); } .panel-heading .font-size-xl{ font-size: 1.6rem; } .panel-summary { width: 80%; min-height: 8rem; -webkit-animation: animateRevert var(--normal-speed) var(--easy-ease) both; animation-name: animateRevert; animation-duration: 0ms; animation-timing-function: var(--ease-ease); animation-fill-mode: both; --animation-opacity: 0; --animation-translate-x: 0; --animation-translate-y: -2rem; } html.cssanimations .page-animation-ready .panel-summary{ -webkit-animation-duration: var(--normal-speed); animation-duration: var(--normal-speed); } .panel-summary p:nth-of-type(2) strong{ font-size: 0.75rem; } .panel-summary p:nth-of-type(2) strong::after{ -webkit-transform: translateY(-0.5rem); transform: translateY(-0.5rem); } .panel:nth-of-type(1) { width:30%; } .panel:nth-of-type(4){ width:30%; } .panel:nth-of-type(4) .background-img{ background-position: 90%; } .panel .background-img{ height: 110%; top:-5%; -webkit-transform: skewX(10deg); transform: skewX(10deg); } .panel .background-img::after { background-image: linear-gradient(45deg, rgba(35,31,32,0.75), rgba(35,31,32,0.25)); opacity: 0.1; } .panel .content{ align-content: center; align-items: center; -webkit-transform: skewX(10deg) translateX(-0.25rem); transform: skewX(10deg) translateX(-0.25rem); } .panel:first-of-type .content{ -webkit-transform: skewX(10deg) translateX(10%); transform: skewX(10deg) translateX(10%); } .panel:last-of-type .content{ -webkit-transform: skewX(10deg) translateX(-10%); transform: skewX(10deg) translateX(-10%); } .panel:hover, .panel:focus{ -webkit-transform: scale(1.1) skewX(-10deg); transform: scale(1.1) skewX(-10deg); } .panel:hover .background-img, .panel:focus .background-img{ -webkit-transform: scale(0.85) skewX(10deg); transform: scale(0.85) skewX(10deg); } .page-animation-ready .panel:hover .panel-heading, .page-animation-ready .panel:focus .panel-heading{ -webkit-animation: animate var(--normal-speed) var(--easy-ease) both; animation-name: animate; } .page-animation-ready .panel:hover .panel-summary, .page-animation-ready .panel:focus .panel-summary{ -webkit-animation: animate var(--normal-speed) var(--easy-ease) both; animation-name: animate; } .panel:hover .panel-summary p:nth-of-type(2) strong::after, .panel:focus .panel-summary p:nth-of-type(2) strong::after{ -webkit-animation-delay: var(--fast-speed); animation-delay: var(--fast-speed); } } @media screen and (min-width: 72em){ .panel-heading .font-size-xl{ font-size: 1.7rem; } } @media screen and (min-width: 90em){ .panel:nth-of-type(1), .panel:nth-of-type(4){ width: 28%; } .panel-heading .font-size-xl{ font-size: 2rem; } .panel-summary{ width: 20rem; } } @media screen and (min-width: 125em){ .panel:nth-of-type(1) .background-img img, .panel:nth-of-type(4) .background-img img{ margin-top: -2vh; } }

New on Campus

Alumni

A Wizard at Blizzard: Designer PJ Rivas Casts His Spell on Magic, D&D, and World of Warcraft

The DigiPen alum’s combat design on World of Warcraft: The War Within completes a personal career “trifecta.”

Alumni

How Data Sets Sent Adam Estela on an Upstream Journey to Spotify

DigiPen graduate Adam Estela reflects on an unexpected career path that led him to a data engineering job at one of the world’s largest streaming services.

Our Students Are Amazing

Student Showcase
  • Ranked Top 50

    Ranked as one of the Top 50 Creative Schools in the Rookies Global School Rankings for 2023.

  • 514 Selections

    Student films from DigiPen's three global campuses have earned 514 awards and festival selections.

  • 2,000+ Games

    DigiPen alumni have helped ship more than 2,000 commercial game titles, including some of the most popular video games of all time.

  • 313 Awards

    Students from DigiPen's three global campuses have won 313 awards for game projects and academic papers.

Do What You Love.  Love What You Do.

We prepare students for a wide range of careers — doing the kind of work that challenges the mind and excites the imagination. Check out some examples of what our alumni have gone on to do after DigiPen.

Alumni Success
An image of DigiPen's viewbook

Stay in the Loop

Stay in the Loop

Don’t miss any updates and get access to our digital viewbook!

Don’t miss any updates and get access to our digital viewbook!