Untitled
unknown
css
3 years ago
2.0 kB
5
Indexable
@font-face { font-family: 'ChillaxRegular'; src: url("../fonts/Chillax-Regular.otf"); } @font-face { font-family: 'ChillaxBold'; src: url("../fonts/Chillax-Semibold.otf"); } .wrapper { width: 100%; } .grid-container { display: grid; grid-template-columns: repeat(2, minmax(450px, 270px)); grid-template-rows: repeat(1, minmax(290px, 270px)); grid-gap: 20px; row-gap: 10px; margin: 0 auto; /* new styles below */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .grid-item { text-align: center; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; margin-bottom: 20px; } .grid-item:hover { ::webkit-transform: scale(1.008); transform: scale(1.008); } .grid-item img { width: 420px; height: 231px; border-radius: 15px; max-width: 100%; } .project-name { font-family: Lato, sans-serif; font-size: 30px; font-weight: bold; text-decoration: none; color: #6A31FF; } .slider-wrapper { position: relative; max-width: 40rem; margin: 0 auto; } .slider { display: flex; aspect-ratio: 2 / 1; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25); border-radius: 1rem; } .slider img { flex: 1 0 100%; scroll-snap-align: start; object-fit: cover; } .slider-nav { display: flex; column-gap: 1rem; position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1; } .slider-nav a { width: 0.7rem; height: 0.7rem; border-radius: 50%; background-color: #fff; opacity: 0.75; transition: opacity ease 250ms; } .slider-nav a:hover { opacity: 1; } .button-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
Editor is loading...