sami7777/sami-ahmed-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Social links: icon-only with username tooltips on hover

Browse Source
This commit is contained in:
Sami Ahmed
2026-06-05 23:25:20 -07:00
parent fc3807cc65
commit 11e28d3f02
2 changed files with 25 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+17 -51
View File
@@ -81,106 +81,72 @@ $year = date('Y');
<h2 class="section-title light">I'm available at all these places. Hit me up.</h2> <h2 class="section-title light">I'm available at all these places. Hit me up.</h2>
<div class="social-grid"> <div class="social-grid">
<!-- Telegram --> <!-- Telegram -->
<a href="https://t.me/SamiAhmed7777" target="_blank" class="social-link"> <a href="https://t.me/SamiAhmed7777" target="_blank" class="social-link" title="Telegram: @SamiAhmed7777">
<i class="fa-brands fa-telegram social-logo" style="color:#26A5E4"></i> <i class="fa-brands fa-telegram social-logo" style="color:#26A5E4"></i>
<span class="social-name">Telegram</span>
<span class="social-handle">@SamiAhmed7777</span>
</a> </a>
<!-- Instagram --> <!-- Instagram -->
<a href="https://www.instagram.com/itsfuckinsami7777/" target="_blank" class="social-link"> <a href="https://www.instagram.com/itsfuckinsami7777/" target="_blank" class="social-link" title="Instagram: itsfuckinsami7777">
<img src="/wp-content/uploads/2025/05/Instagram_Fill-32.png" alt="Instagram" class="social-svg"> <img src="/wp-content/uploads/2025/05/Instagram_Fill-32.png" alt="Instagram" class="social-svg">
<span class="social-name">Instagram</span>
<span class="social-handle">itsfuckinsami7777</span>
</a> </a>
<!-- Facebook --> <!-- Facebook -->
<a href="https://fb.me/samiahmed7777official" target="_blank" class="social-link"> <a href="https://fb.me/samiahmed7777official" target="_blank" class="social-link" title="Facebook: samiahmed7777official">
<i class="fa-brands fa-facebook social-logo" style="color:#1877F2"></i> <i class="fa-brands fa-facebook social-logo" style="color:#1877F2"></i>
<span class="social-name">Facebook</span>
<span class="social-handle">samiahmed7777official</span>
</a> </a>
<!-- WhatsApp --> <!-- WhatsApp -->
<a href="https://wa.me/17145766287" target="_blank" class="social-link"> <a href="https://wa.me/17145766287" target="_blank" class="social-link" title="WhatsApp: +1 714-576-6287">
<i class="fa-brands fa-whatsapp social-logo" style="color:#25D366"></i> <i class="fa-brands fa-whatsapp social-logo" style="color:#25D366"></i>
<span class="social-name">WhatsApp</span>
<span class="social-handle">+1 714-576-6287</span>
</a> </a>
<!-- Diamond --> <!-- Diamond -->
<a href="https://diamondapp.com/u/SamiAhmed" target="_blank" class="social-link"> <a href="https://diamondapp.com/u/SamiAhmed" target="_blank" class="social-link" title="Diamond: SamiAhmed">
<img src="/wp-content/uploads/2022/07/diamond-32.png" alt="Diamond" class="social-svg"> <img src="/wp-content/uploads/2022/07/diamond-32.png" alt="Diamond" class="social-svg">
<span class="social-name">Diamond</span>
<span class="social-handle">SamiAhmed</span>
</a> </a>
<!-- YouTube --> <!-- YouTube -->
<a href="https://www.youtube.com/user/SamiAhmed2000" target="_blank" class="social-link"> <a href="https://www.youtube.com/user/SamiAhmed2000" target="_blank" class="social-link" title="YouTube: SamiAhmed2000">
<i class="fa-brands fa-youtube social-logo" style="color:#FF0000"></i> <i class="fa-brands fa-youtube social-logo" style="color:#FF0000"></i>
<span class="social-name">YouTube</span>
<span class="social-handle">SamiAhmed2000</span>
</a> </a>
<!-- X / Twitter --> <!-- X / Twitter -->
<a href="https://twitter.com/RealSamiAhmed" target="_blank" class="social-link"> <a href="https://twitter.com/RealSamiAhmed" target="_blank" class="social-link" title="X / Twitter: RealSamiAhmed">
<i class="fa-brands fa-x-twitter social-logo" style="color:#FFFFFF"></i> <i class="fa-brands fa-x-twitter social-logo" style="color:#FFFFFF"></i>
<span class="social-name">X / Twitter</span>
<span class="social-handle">RealSamiAhmed</span>
</a> </a>
<!-- Reddit --> <!-- Reddit -->
<a href="https://www.reddit.com/user/SamiAhmed1987" target="_blank" class="social-link"> <a href="https://www.reddit.com/user/SamiAhmed1987" target="_blank" class="social-link" title="Reddit: SamiAhmed1987">
<i class="fa-brands fa-reddit-alien social-logo" style="color:#FF4500"></i> <i class="fa-brands fa-reddit-alien social-logo" style="color:#FF4500"></i>
<span class="social-name">Reddit</span>
<span class="social-handle">SamiAhmed1987</span>
</a> </a>
<!-- Discord --> <!-- Discord -->
<a href="https://discord.com/users/itsfuckinsami" target="_blank" class="social-link"> <a href="https://discord.com/users/itsfuckinsami" target="_blank" class="social-link" title="Discord: itsfuckinsami">
<i class="fa-brands fa-discord social-logo" style="color:#5865F2"></i> <i class="fa-brands fa-discord social-logo" style="color:#5865F2"></i>
<span class="social-name">Discord</span>
<span class="social-handle">itsfuckinsami</span>
</a> </a>
<!-- LinkedIn --> <!-- LinkedIn -->
<a href="https://www.linkedin.com/in/samiahmed7777/" target="_blank" class="social-link"> <a href="https://www.linkedin.com/in/samiahmed7777/" target="_blank" class="social-link" title="LinkedIn: samiahmed7777">
<i class="fa-brands fa-linkedin social-logo" style="color:#0A66C2"></i> <i class="fa-brands fa-linkedin social-logo" style="color:#0A66C2"></i>
<span class="social-name">LinkedIn</span>
<span class="social-handle">samiahmed7777</span>
</a> </a>
<!-- VK --> <!-- VK -->
<a href="https://vk.com/samiahmed7777" target="_blank" class="social-link"> <a href="https://vk.com/samiahmed7777" target="_blank" class="social-link" title="VK: samiahmed7777">
<i class="fa-brands fa-vk social-logo" style="color:#0077FF"></i> <i class="fa-brands fa-vk social-logo" style="color:#0077FF"></i>
<span class="social-name">VK</span>
<span class="social-handle">samiahmed7777</span>
</a> </a>
<!-- Gab --> <!-- Gab -->
<a href="https://gab.com/SamiAhmed" target="_blank" class="social-link"> <a href="https://gab.com/SamiAhmed" target="_blank" class="social-link" title="Gab: SamiAhmed">
<img src="/wp-content/uploads/2020/04/gab-32.png" alt="Gab" class="social-svg"> <img src="/wp-content/uploads/2020/04/gab-32.png" alt="Gab" class="social-svg">
<span class="social-name">Gab</span>
<span class="social-handle">SamiAhmed</span>
</a> </a>
<!-- MeWe --> <!-- MeWe -->
<a href="https://mewe.com/i/samiahmed" target="_blank" class="social-link"> <a href="https://mewe.com/i/samiahmed" target="_blank" class="social-link" title="MeWe: samiahmed">
<img src="/wp-content/uploads/2020/09/image2vector-1-32.png" alt="MeWe" class="social-svg"> <img src="/wp-content/uploads/2020/09/image2vector-1-32.png" alt="MeWe" class="social-svg">
<span class="social-name">MeWe</span>
<span class="social-handle">samiahmed</span>
</a> </a>
<!-- Keybase --> <!-- Keybase -->
<a href="https://keybase.io/samiahmed7777" target="_blank" class="social-link"> <a href="https://keybase.io/samiahmed7777" target="_blank" class="social-link" title="Keybase: samiahmed7777">
<i class="fa-brands fa-keybase social-logo" style="color:#33A0FF"></i> <i class="fa-brands fa-keybase social-logo" style="color:#33A0FF"></i>
<span class="social-name">Keybase</span>
<span class="social-handle">samiahmed7777</span>
</a> </a>
<!-- Parler --> <!-- Parler -->
<a href="https://parler.com/#/user/SamiAhmed7777" target="_blank" class="social-link"> <a href="https://parler.com/#/user/SamiAhmed7777" target="_blank" class="social-link" title="Parler: samiahmed7777">
<img src="/wp-content/uploads/2022/10/Parler-Icon-White-Logo.wine_.svg" alt="Parler" class="social-svg"> <img src="/wp-content/uploads/2022/10/Parler-Icon-White-Logo.wine_.svg" alt="Parler" class="social-svg">
<span class="social-name">Parler</span>
<span class="social-handle">samiahmed7777</span>
</a> </a>
<!-- Session --> <!-- Session -->
<a href="https://getsession.org" target="_blank" class="social-link"> <a href="https://getsession.org" target="_blank" class="social-link" title="Session: 05a5ec...326a5c">
<img src="/wp-content/uploads/2020/12/Untitled-design.svg" alt="Session" class="social-svg"> <img src="/wp-content/uploads/2020/12/Untitled-design.svg" alt="Session" class="social-svg">
<span class="social-name">Session</span>
<span class="social-handle">05a5ec...326a5c</span>
</a> </a>
<!-- Iris --> <!-- Iris -->
<a href="https://iris.to/samiahmed7777" target="_blank" class="social-link"> <a href="https://iris.to/samiahmed7777" target="_blank" class="social-link" title="Iris: samiahmed7777">
<img src="/wp-content/uploads/2025/01/matched_image-32.png" alt="Iris" class="social-svg"> <img src="/wp-content/uploads/2025/01/matched_image-32.png" alt="Iris" class="social-svg">
<span class="social-name">Iris</span>
<span class="social-handle">samiahmed7777</span>
</a> </a>
</div> </div>
</div> </div>
wp-content/themes/2017_baby/style.css
+8 -24
View File
@@ -158,13 +158,17 @@ section { padding: 80px 0; position: relative; overflow: hidden; }
.social-link { .social-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; justify-content: center;
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
border-radius: 10px; border-radius: 12px;
padding: 12px 16px; padding: 14px;
color: #fff; color: #fff;
font-size: 0.95rem;
transition: background 0.2s, transform 0.15s; transition: background 0.2s, transform 0.15s;
cursor: pointer;
}
.social-link:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
} }
.social-link:hover { .social-link:hover {
background: rgba(255,255,255,0.2); background: rgba(255,255,255,0.2);
@@ -189,20 +193,6 @@ section { padding: 80px 0; position: relative; overflow: hidden; }
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
} }
.social-name {
font-weight: 600;
font-size: 0.9rem;
line-height: 1.2;
}
.social-handle {
font-size: 0.75rem;
color: rgba(255,255,255,0.5);
line-height: 1.2;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== WRITINGS (Section 2) ===== */ /* ===== WRITINGS (Section 2) ===== */
.writings-section { .writings-section {
@@ -767,12 +757,6 @@ section { padding: 80px 0; position: relative; overflow: hidden; }
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.social-handle {
font-size: 0.7rem;
color: rgba(255,255,255,0.45);
margin-top: 1px;
word-break: break-all;
}
/* ===== PAYMENT CARD WITH NAME/HANDLE ===== */ /* ===== PAYMENT CARD WITH NAME/HANDLE ===== */
.payment-card { .payment-card {