Spaces:
Running
on
T4
Running
on
T4
| /*<!-- HTML !-->*/ | |
| /*<button class="button-73" role="button">Button 73</button>*/ | |
| .flex-container { | |
| display: flex; | |
| height: 100vh; /* Full viewport height */ | |
| } | |
| left-column { | |
| width: 100px; /* Fixed width */ | |
| background-color: #f2f2f2; /* Just for demonstration */ | |
| } | |
| .left-column img { | |
| width: auto; /* Make the image responsive to the container width */ | |
| height: 100%; /* Maintain aspect ratio */ | |
| } | |
| .right-column { | |
| flex-grow: 1; /* Fill the remaining width */ | |
| background-color: #e8e8e8; | |
| /* More styles for the right column content */ | |
| } | |
| /* Style for the Three.js canvas container */ | |
| #canvas-container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* CSS */ | |
| .container { | |
| position: absolute; | |
| top: 3%; | |
| left: 20%; | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 30px; | |
| } | |
| /* CSS */ | |
| .button-74 { | |
| background-color: #fbeee0; | |
| border: 2px solid #422800; | |
| border-radius: 30px; | |
| box-shadow: #422800 4px 4px 0 0; | |
| color: #422800; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-weight: 600; | |
| font-size: 18px; | |
| padding: 0 18px; | |
| line-height: 50px; | |
| text-align: center; | |
| text-decoration: none; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| touch-action: manipulation; | |
| } | |
| .button-74:hover { | |
| background-color: #fff; | |
| } | |
| .button-74:active { | |
| box-shadow: #422800 2px 2px 0 0; | |
| transform: translate(2px, 2px); | |
| } | |
| @media (min-width: 768px) { | |
| .button-74 { | |
| min-width: 120px; | |
| padding: 0 25px; | |
| } | |
| } |