style: add QR code to sharepic layout
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
@@ -117,18 +117,41 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cta-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.cta-badge {
|
.cta-badge {
|
||||||
align-self: flex-start;
|
|
||||||
background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
|
background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
|
||||||
color: #0f172a;
|
color: #0f172a;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
padding: 12px 28px;
|
padding: 14px 28px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
box-shadow: 0 4px 20px rgba(56, 189, 248, 0.25);
|
box-shadow: 0 4px 20px rgba(56, 189, 248, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.qr-code {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
.right-col {
|
.right-col {
|
||||||
flex: 0.9;
|
flex: 0.9;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -249,9 +272,14 @@
|
|||||||
Führe dein Bordlogbuch modern & digital: Reisetage, GPS-Tracks, Crew- und Schiffsdaten —
|
Führe dein Bordlogbuch modern & digital: Reisetage, GPS-Tracks, Crew- und Schiffsdaten —
|
||||||
<strong>Ende-zu-Ende-verschlüsselt</strong>, als App installierbar und <strong>auch offline</strong> auf See nutzbar.
|
<strong>Ende-zu-Ende-verschlüsselt</strong>, als App installierbar und <strong>auch offline</strong> auf See nutzbar.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="cta-container">
|
||||||
<div class="cta-badge">
|
<div class="cta-badge">
|
||||||
kapteins-daagbok.eu
|
kapteins-daagbok.eu
|
||||||
</div>
|
</div>
|
||||||
|
<div class="qr-code">
|
||||||
|
<img src="assets/qr-kapteins-daagbok.eu.png" alt="QR Code" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-col">
|
<div class="right-col">
|
||||||
<div class="features-card">
|
<div class="features-card">
|
||||||
|
|||||||
Reference in New Issue
Block a user