Spaces:
Sleeping
Sleeping
| html = """ | |
| <style> | |
| body{ | |
| font-family: sans-serif; | |
| } | |
| h1{ | |
| font-weight: 100; | |
| } | |
| .container{ | |
| width: 100%; | |
| display:block; | |
| overflow:hidden; | |
| } | |
| .carousel{ | |
| display:block; | |
| width: 100%; | |
| height: 320px; | |
| background: white; | |
| overflow-x: scroll; | |
| padding: 10px; | |
| margin: 0; | |
| white-space: nowrap; | |
| border-top: 2px solid rgba(0, 0, 0, 0.1); | |
| border-bottom: 2px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .item { | |
| display: inline-block; | |
| overflow: hidden; | |
| width: 250px; | |
| margin: 0 10px; | |
| height: calc(100%); | |
| background: rgba(0, 0, 0, 0.05) no-repeat center center; | |
| background-size: cover; | |
| position:relative; | |
| border-radius: 20px; | |
| box-shadow: 0 0 10px #dfdfdf; | |
| } | |
| .item p { | |
| padding: 20px; | |
| word-break: break-all; | |
| white-space: break-spaces; | |
| overflow: hidden; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 4; | |
| -webkit-box-orient: vertical; | |
| margin: 0; | |
| align: center; | |
| } | |
| #image-container{ | |
| width: 100%; | |
| height: 60%; | |
| text-align:center; | |
| font-size: 9em; | |
| color: white; | |
| overflow: hidden; | |
| } | |
| #image-container img{ | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="carousel"> | |
| """ |