#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; -webkit-animation: translateUpRevert var(--normal-speed) var(--easy-ease) both; animation-name: translateUpRevert; animation-duration: var(--normal-speed); animation-timing-function: var(--ease-ease); animation-fill-mode: both; } .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; -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-summary p:nth-of-type(2){ display: flex; justify-content: center; } .panel-summary p:nth-of-type(2) strong{ position: absolute; } .page-animation-ready .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 var(--normal-speed) var(--easy-ease) both; animation-name: underlineReset; animation-duration: var(--normal-speed); 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; } .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%; } } @-webkit-keyframes translateUp { to { -webkit-transform: translateY(0rem); transform: translateY(0rem); } } @keyframes translateUp { to { transform: translateY(0rem); } } @-webkit-keyframes translateUpRevert { from { -webkit-transform: translateY(0rem); transform: translateY(0rem); } } @keyframes translateUpRevert { from { transform: translateY(0rem); } } @-webkit-keyframes fadeInDown { from { -webkit-transform: translateY(-2rem); transform: translateY(-2rem); } } @keyframes fadeInDown { from { transform: translateY(-2rem); } } @-webkit-keyframes fadeInDownRevert { to { -webkit-transform: translateY(-2rem); transform: translateY(-2rem); } } @keyframes fadeInDownRevert { to { transform: translateY(-2rem); } } @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 .content::after{ content: ''; height: 80%; width: 200%; position: absolute; z-index: 0; background: radial-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2),rgba(0,0,0,0),rgba(0,0,0,0) ); } */ .panel-heading { -webkit-transform: translateY(4rem); transform: translateY(4rem); } .panel-summary{ width: 80%; min-height: 8rem; opacity: 0; -webkit-animation: fadeInDownRevert var(--normal-speed) var(--easy-ease) both; animation-name: fadeInDownRevert; animation-duration: var(--normal-speed); animation-timing-function: var(--ease-ease); animation-fill-mode: both; } .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, .panel:focus .panel-heading{ -webkit-animation: translateUp var(--normal-speed) var(--easy-ease) both; animation-name: translateUp; animation-duration: var(--normal-speed); animation-timing-function: var(--ease-ease); animation-fill-mode: both; } .page-animation-ready .panel:hover .panel-summary, .panel:focus .panel-summary{ opacity: 1; -webkit-animation: fadeInDown var(--normal-speed) var(--easy-ease) both; animation-name: fadeInDown; animation-duration: var(--normal-speed); animation-timing-function: var(--ease-ease); animation-fill-mode: both; } .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: 90em){ .panel:nth-of-type(1), .panel:nth-of-type(4){ width: 28%; } .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
George Boden Designs for Retro Thrills on Contra: Operation Galuga
As a level designer at WayForward Technologies, game design graduate George Boden specializes in crafting gauntlets of action and mayhem.
Students
Tall Order Wins Best Student Short at KINO Short Film Fest
Student film director Christophe Jacques Bouchard talks about the childhood drawing that would go on to inspire an award-winning DigiPen student animation.
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