1
ewpratten.com/_sass/site/dev/software-landing.scss
2021-03-10 15:16:42 -05:00

93 lines
1.6 KiB
SCSS

#software-hero {
position: relative;
background: rgb(18, 23, 19);
background: linear-gradient(
0deg,
rgba(18, 23, 19, 1) 0%,
rgba(20, 20, 12, 1) 100%
);
height: 80vh;
img {
position: absolute;
top: 0;
right: 0;
height: 80vh;
}
#content {
position: absolute;
width: 100vw;
@media (min-width: 843px) {
width: 55vw;
}
height: 100%;
z-index: 1;
overflow: hidden;
#tilt {
position: absolute;
width: 100vw;
height: 100%;
@media (min-width: 843px) {
height: 200%;
width: 100%;
top: -80%;
left: -10%;
transform: rotate(15deg);
}
background-color: var(--color-purple);
}
#align-wrapper {
position: absolute;
top: 35vh;
margin-left: 10vw;
@media (min-width: 843px) {
margin-left: 5vw;
}
@media (min-width: 1105px) {
margin-left: 10vw;
}
z-index: 2;
h1 {
width: max-content;
color: white;
margin: 0;
text-transform: uppercase;
}
}
}
}
#software-experience {
background-color: var(--color-dark-purple);
min-height: 100vh;
.content{
color: white;
padding-top:30vh;
h1{
text-transform: uppercase;
}
.work-experience-item{
background-color: unset;
border-color: white;
padding:10px;
transition: color 0.4s cubic-bezier(0, 0, 0.58, 1), border 0.4s cubic-bezier(0, 0, 0.58, 1);
&:hover {
cursor: pointer;
border-color:var(--color-red);
color:var(--color-red);
transition: color 0.1s cubic-bezier(0, 0, 0.58, 1), border 0.1s cubic-bezier(0, 0, 0.58, 1);
}
}
}
}