Case Studies
Below are three case studies that highlight my relevant work.
.hover-item {
position: relative;
cursor: pointer;
}
.hover-item media-item {
position: absolute;
top: 20%;
left: 0%;
width: 30vw;
pointer-events: none;
opacity: 0;
transition: opacity 0.1s ease-in;
}
.hover-item:hover media-item {
opacity: 1;
}
body.mobile .hover-item media-item{
display: none;
}
---books---
.hover-book {
position: fixed;
cursor: pointer;
}
.hover-book media-item {
position: fixed;
top: -100%;
left: 30%;
width: 50vw;
pointer-events: none;
opacity: 0;
transition: opacity 0.1s ease-in;
}
.hover-book:hover media-item {
opacity: 1;
}
body.mobile .hover-book media-item{
display: none;
}
----boooks ----
[id="Y3091787029"] bodycopy {
}
[id="Y3091787029"].page {
background-color: #f5f5f5;
min-height: var(--viewport-height);
}
[id="Y3091787029"] .backdrop {
}
.mobile [id="Y3091787029"] .backdrop {
}
.mobile [id="Y3091787029"] .page-layout {
}
[id="Y3091787029"] .page-content {
width: 100%;
background-color: #f5f5f5;
align-items: flex-start;
}