Scribd
Upload
3 views

style.css

The document contains CSS styles for a web page layout with a grid design, featuring a carousel for displaying items. It includes styles for background color, item dimensions, and responsive positioning based on user input. The carousel is designed to rotate items in a 3D perspective, allowing for a visually appealing display of content.

Uploaded by

futurapplix243
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

style.css

The document contains CSS styles for a web page layout with a grid design, featuring a carousel for displaying items. It includes styles for background color, item dimensions, and responsive positioning based on user input. The carousel is designed to rotate items in a 3D perspective, allowing for a visually appealing display of content.

Uploaded by

futurapplix243
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

body {

background-color: #8c52ff;
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
font-family: 'Poppins', sans-serif;
}

.item img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-top: 15px;
}

.name {
margin-bottom: 2px;
color: #8c52ff;
}

.occupation {
font-style: italic;
margin-top: 2px;
}

main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100vw;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events: none;
}

div.item {
text-align: center;
padding: 20px;
border: 3px solid black;
border-radius: 20px;
background-color: #fff;
position: absolute;
width: 300px;
height: 250px;
background-color: white;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-300px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}

div.item:nth-of-type(1) {
--offset: 1;
}
div.item:nth-of-type(2) {
--offset: 2;
}
div.item:nth-of-type(3) {
--offset: 3;
}
div.item:nth-of-type(4) {
--offset: 4;
}
div.item:nth-of-type(5) {
--offset: 5;
}

input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}

input:nth-of-type(1):checked ~ main#carousel {
--position: 1;
}

input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}

input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}

input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}

input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}

You might also like