+ Kristijan Popovski
+Do something. Dare to grow! 🚀 @popovski.k
+diff --git a/assets/images/kristijan.jpeg b/assets/images/kristijan.jpeg new file mode 100644 index 0000000..1db3fe7 Binary files /dev/null and b/assets/images/kristijan.jpeg differ diff --git a/assets/images/msos_ikona.jpeg b/assets/images/msos_ikona.jpeg new file mode 100644 index 0000000..5a226df Binary files /dev/null and b/assets/images/msos_ikona.jpeg differ diff --git a/css/style.css b/css/style.css index de8f4e0..cdb272e 100644 --- a/css/style.css +++ b/css/style.css @@ -1738,3 +1738,180 @@ textarea { transform: none; } } + +/* ========================================================================== + Link In Bio Page Styles + ========================================================================== */ + +.linkbio-body { + background: var(--color-surface); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.linkbio-wrapper { + flex-grow: 1; + display: flex; + justify-content: center; + padding: var(--space-10) var(--space-4) var(--space-16); +} + +.linkbio-container { + width: 100%; + max-width: 38rem; + display: flex; + flex-direction: column; + align-items: center; +} + +.linkbio-header { + text-align: center; + margin-bottom: var(--space-6); +} + +.linkbio-avatar { + width: 110px; + height: 110px; + margin: 0 auto var(--space-4); + border-radius: 50%; + overflow: hidden; + border: 3px solid var(--color-white); + box-shadow: var(--shadow-card); +} + +.linkbio-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.linkbio-name { + margin: 0 0 var(--space-1); + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 800; + letter-spacing: -0.02em; + color: var(--color-surface-ink); +} + +.linkbio-tagline { + margin: 0; + font-size: 0.95rem; + color: var(--color-text-muted); + font-weight: 500; +} + +.linkbio-social-icons { + display: flex; + justify-content: center; + gap: var(--space-4); + margin-bottom: var(--space-10); +} + +.linkbio-social-icons a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.75rem; + height: 2.75rem; + border-radius: 50%; + background: rgba(0, 45, 167, 0.06); + color: var(--color-primary); + transition: transform var(--transition-standard), background var(--transition-standard); +} + +.linkbio-social-icons a:hover { + transform: translateY(-2px); + background: rgba(0, 45, 167, 0.12); +} + +.linkbio-social-icons svg { + width: 1.3rem; + height: 1.3rem; +} + +.linkbio-links { + width: 100%; + display: grid; + gap: var(--space-4); +} + +.linkbio-btn { + display: flex; + align-items: center; + padding: var(--space-4) var(--space-5); + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(196, 197, 215, 0.24); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-soft); + text-decoration: none; + color: var(--color-text); + transition: transform var(--transition-standard), box-shadow var(--transition-standard), border-color var(--transition-standard); +} + +.linkbio-btn:hover, +.linkbio-btn:focus-visible { + transform: translateY(-3px); + box-shadow: var(--shadow-card); + border-color: rgba(0, 45, 167, 0.18); +} + +.linkbio-btn-icon { + width: 2.2rem; + height: 2.2rem; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + background: rgba(0, 45, 167, 0.06); + color: var(--color-primary); + flex-shrink: 0; +} + +.linkbio-btn-icon svg { + width: 1.1rem; + height: 1.1rem; +} + +.linkbio-btn-icon img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.linkbio-btn-text { + flex-grow: 1; + text-align: center; + font-family: var(--font-display); + font-weight: 700; + font-size: 1rem; + color: var(--color-surface-ink); + padding: 0 var(--space-4); +} + +.linkbio-btn-icon-right { + width: 1.2rem; + height: 1.2rem; + color: var(--color-text-soft); + flex-shrink: 0; + transition: color var(--transition-standard); +} + +.linkbio-btn:hover .linkbio-btn-icon-right { + color: var(--color-primary); +} + +.linkbio-divider { + text-align: center; + font-size: 0.85rem; + font-weight: 600; + color: var(--color-text-soft); + margin: var(--space-4) 0 var(--space-2); +} + +.linkbio-footer { + margin-top: var(--space-12); + text-align: center; +} diff --git a/linkinbio.html b/linkinbio.html new file mode 100644 index 0000000..39ea131 --- /dev/null +++ b/linkinbio.html @@ -0,0 +1,14 @@ + + +
+ + +Redirecting to linkinbio/...
+ + diff --git a/linkinbio/index.html b/linkinbio/index.html new file mode 100644 index 0000000..1c968c4 --- /dev/null +++ b/linkinbio/index.html @@ -0,0 +1,83 @@ + + + + + +
+ Do something. Dare to grow! 🚀 @popovski.k
+