69 lines
1.3 KiB
CSS
69 lines
1.3 KiB
CSS
.container {
|
|
max-width: 75%;
|
|
margin: 1em auto;
|
|
}
|
|
html {
|
|
font-family: Arial,Helvetica,sans-serif;
|
|
}
|
|
h2 {
|
|
font-size: 2.8rem;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: 98vh;
|
|
grid-gap: 1vw;
|
|
margin: 0 auto;
|
|
max-width: 96rem;
|
|
}
|
|
|
|
.column {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 4vw);
|
|
grid-template-rows: repeat(10, 8vh);
|
|
transition: 1s ease;
|
|
}
|
|
|
|
.column:hover {
|
|
padding-right: 15vw;
|
|
}
|
|
|
|
.column1 {
|
|
background-color: #CCF0E8;
|
|
opacity: 1;
|
|
background-position: center;
|
|
}
|
|
.column1:hover {
|
|
opacity: 1;
|
|
background-image: url(1.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.column2 {
|
|
background-color: #ffbdbd;
|
|
background-position: center;
|
|
}
|
|
.column2:hover {
|
|
background-image: url(2.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.column3 {
|
|
background-color: #A1CDE4;
|
|
background-position: center;
|
|
}
|
|
.column3:hover {
|
|
background-image: url(3.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.column4 {
|
|
background-color: #f1cbff;
|
|
background-position: center;
|
|
}
|
|
.column4:hover {
|
|
background-image: url(4.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
} |