Spaces:
Sleeping
Sleeping
| html2 = """ | |
| <style> | |
| body{ | |
| font-family: sans-serif; | |
| } | |
| h1{ | |
| font-weight: 100; | |
| } | |
| .container{ | |
| width: 100%; | |
| display:block; | |
| overflow:hidden; | |
| } | |
| .carousel{ | |
| display:block; | |
| width: 100%; | |
| height: 420px; | |
| background: white; | |
| overflow-x: scroll; | |
| padding: 10px; | |
| margin: 0; | |
| white-space: nowrap; | |
| border-top: 2px solid rgba(0, 0, 0, 0); | |
| border-bottom: 2px solid rgba(0, 0, 0, 0); | |
| } | |
| .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: 10px; /* Reduced padding for less gap */ | |
| word-wrap: break-word; /* Ensures text breaks at word boundaries */ | |
| white-space: normal; /* Allows the text to wrap naturally */ | |
| overflow: hidden; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 6; | |
| -webkit-box-orient: vertical; | |
| margin: 0; | |
| text-align: center; | |
| } | |
| #image-container{ | |
| width: 100%; | |
| height: 60%; | |
| text-align:center; | |
| font-size: 9em; | |
| color: white; | |
| overflow: hidden; | |
| border-radius: 20px; /* Rounding the image corners */ | |
| } | |
| #image-container img{ | |
| width: 90%; | |
| height: 90%; | |
| object-fit: contain; | |
| border-radius: 20px; /* Ensures images are also rounded */ | |
| margin-bottom: 10px; /* Reduce margin for less space between image and text */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="carousel"> | |
| """ |