Merge ce32a2899d
into 9409685c9a
commit
ca3fc6f4e7
@ -1,63 +0,0 @@
|
|||||||
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Muli', sans-serif;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
width: 90vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
height: 80vh;
|
|
||||||
border-radius: 50px;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
flex: 0.5;
|
|
||||||
margin: 10px;
|
|
||||||
position: relative;
|
|
||||||
-webkit-transition: all 700ms ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel h3 {
|
|
||||||
font-size: 24px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
|
||||||
left: 20px;
|
|
||||||
margin: 0;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel.active {
|
|
||||||
flex: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel.active h3 {
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 0.3s ease-in 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.container {
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel:nth-of-type(4),
|
|
||||||
.panel:nth-of-type(5) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in new issue