152 lines
1.8 KiB
CSS
152 lines
1.8 KiB
CSS
|
|
|
|
.event{
|
|
margin: 30px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.event .image-container{
|
|
display: block;
|
|
border-radius: 50px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.image-container img{
|
|
height: 300px;
|
|
width: 100%;
|
|
}
|
|
|
|
.event .data-time{
|
|
padding: 20px;
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 50px;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
background-color: #D9D9D9;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.event .add-info{
|
|
padding: 20px 60px;
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 50px;
|
|
color: #fff;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
background-color: #242424;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.bottom-nav{
|
|
padding: 0;
|
|
}
|
|
|
|
.bottom-nav .col{
|
|
margin: 15px 0;
|
|
|
|
}
|
|
|
|
.bottom-nav_item{
|
|
height: 100%;
|
|
padding: 15px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
text-align: center;
|
|
background: linear-gradient(#707070, #A1A1A1);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.title-h3{
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.translation-box{
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.translation-box .image-container{
|
|
display: block;
|
|
border-radius: 27px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
@media (max-width: 1200px) {
|
|
.event .data-time{
|
|
font-size: 24px;
|
|
}
|
|
|
|
.event .add-info{
|
|
padding: 20px 40px;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.event .data-time{
|
|
padding: 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.event .add-info{
|
|
padding: 10px 20px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.event .data-time{
|
|
padding: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.event .add-info{
|
|
padding: 5px 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.title-h3{
|
|
font-size: 28px;
|
|
}
|
|
|
|
.bottom-nav{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.event .data-time{
|
|
padding: 3px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.event .add-info{
|
|
padding: 3px 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.title-h3{
|
|
font-size: 24px;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 398px) {
|
|
.title-h3{
|
|
font-size: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|