|
|
| 28行目: |
28行目: |
| </div> | | </div> |
| </div> | | </div> |
|
| |
| <html>
| |
| <style>
| |
| .search-card {
| |
| border: 1px solid #ddd;
| |
| border-radius: 8px;
| |
| padding: 10px;
| |
| margin-bottom: 12px;
| |
| max-width: 600px;
| |
| transition: box-shadow 0.2s;
| |
| max-height: 332px;
| |
| }
| |
| .search-card:hover {
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2);
| |
| }
| |
| .card-header {
| |
| margin-bottom: 5px;
| |
| }
| |
| .card-title {
| |
| margin: 0;
| |
| }
| |
| .card-genre {
| |
| margin: 0;
| |
| font-size: calc(1em - 3px);
| |
| }
| |
| .img-crop {
| |
| height: 200px;
| |
| overflow-x: auto;
| |
| overflow-y: hidden;
| |
| white-space: nowrap;
| |
| }
| |
| .img-crop p,
| |
| .img-crop div {
| |
| height: 100%;
| |
| margin: 0;
| |
| display: flex;
| |
| flex-direction: row;
| |
| width: max-content;
| |
| }
| |
| .crop-img img {
| |
| width: 200px;
| |
| height: 200px;
| |
| object-fit: cover;
| |
| border-radius: 4px;
| |
| display: inline-block;
| |
| margin-right: 2px;
| |
| }
| |
| .card-info {
| |
| margin-top: 10px;
| |
| }
| |
| .card-cost, .card-address {
| |
| margin: 0;
| |
| font-size: calc(1em - 3px);
| |
| }
| |
| </style>
| |
| </html>
| |
