DigiPen Institute of Technology

#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; } }