'); background-size: cover; display: flex; overflow: hidden; } .business-card .back { background-color: white; display: flex; justify-content: center; align-items: center; flex-direction: column; transform: rotateY(180deg); } #qr { width: 30vmin; max-width: 300px; } .back h1 { margin-top: clamp(5px,2vmin,20px); } .back h2 { margin-bottom: clamp(5px,2vmin,20px); } .left { padding-left: clamp(7.5px,3vmin,30px); padding-right: clamp(5px,2vmin,20px); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .right { margin-left: clamp(5px,2vmin,20px); padding-right: clamp(5px,2vmin,20px); flex: 1; display: flex; flex-direction: column; justify-content: center; } h1, h2{ margin: 0; font-size: clamp(10px,4vmin,40px); color: #333; } .left p { text-align: center; margin: 5px 0; font-size: clamp(7.5px,3vmin,30px); color: #666; } .info-item { display: flex; align-items: center; margin-top: clamp(1.25px,0.5vmin,5px); } svg { width: clamp(7.5px,3vmin,30px); height: clamp(7.5px,3vmin,30px); } .left img { width: clamp(75px,30vmin,300px); height: clamp(75px,30vmin,300px); margin-bottom: clamp(2.5px,1vmin,10px); border-radius: clamp(40px,16vmin,160px); object-fit: cover; border: clamp(2.5px,1vmin,10px) solid white; padding: 1px; background-color: #d0d0d0; } .info-item span { margin-left: 5px; font-size: clamp(6.25px,2.5vmin,25px); color: #333; } .download-btn a { position: absolute; top: 15px; right: 15px; background-color: #777; color: #fff; width: 40px; height: 40px; border-radius: 5px; transition: background-color 0.3s; } .download-btn a:hover { background-color: #555; } .download-btn a svg { width: 40px; height: 40px; } #company { margin: 0; margin-bottom: clamp(10px,4vmin,40px); font-size: clamp(7.5px,3vmin,30px); color: #333; } #address { margin-top: clamp(10px,4vmin,40px); bottom: clamp(5px,2vmin,20px); } .address-item { display: flex; align-items: center; margin-top: clamp(1.25px,0.5vmin,5px); } .address-item span { margin-left: 5px; font-size: clamp(5px,2vmin,20px); color: #333; } #fullscreen { display: none; right: 70px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ffffff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15' /%3E%3C/svg%3E%0A"); } #fullscreen.fullscreen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ffffff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25' /%3E%3C/svg%3E%0A"); } @media print { body { height: auto; } .business-card .front { border: 1px solid black; margin-top: 30px; position: relative; } .business-card .back { border: 1px solid black; margin-top: 30px; transform: none; position: relative; } .download-btn { display: none; } } @media (max-width: 868px) and (orientation: landscape) { .card-container { perspective: 400px; transform: scale(1.6); } body { height: 100vh; } #fullscreen { display: block; } }
Site Admin