'); 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; } @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; } }
Job title