commit 8b7817841c8ccc61a34c00bd90dfff6f84635f4f Author: usifk Date: Sun Nov 23 15:07:07 2025 +0200 Add initial HTML, CSS, and JS files for ShowJoe.Social website diff --git a/index.html b/index.html new file mode 100644 index 0000000..735a522 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + ShowJoe.Social + + + + +

Yousseif Muhammed

ShowJoe.Social - Connect with me on social media

+ +

+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..931c763 --- /dev/null +++ b/style.css @@ -0,0 +1,167 @@ +body { + margin: 0; + padding: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #e8e8e8; + color: #333; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + text-align: center; + max-width: 800px; + padding: 50px 20px; + animation: fadeIn 1s ease-out; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +h1 { + font-size: 3.5em; + margin-bottom: 15px; + color: #2c3e50; + font-weight: 700; + letter-spacing: -1px; +} + +p { + font-size: 1.3em; + margin-bottom: 50px; + color: #5a6c7d; + font-weight: 300; +} + +.social-links { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 30px; + max-width: 700px; + margin: 0 auto; +} + +.social-link { + display: flex; + flex-direction: column; + align-items: center; + text-decoration: none; + color: #333; + background: #fff; + padding: 30px 20px; + border-radius: 20px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + position: relative; + overflow: hidden; +} + +.social-link::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); + transition: left 0.5s; +} + +.social-link:hover::before { + left: 100%; +} + +.social-link:hover { + transform: translateY(-10px) scale(1.05); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); +} + +.social-link i { + font-size: 3em; + margin-bottom: 15px; + transition: transform 0.3s ease; +} + +.social-link:hover i { + transform: scale(1.1); +} + +.social-link span { + font-size: 1em; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Platform-specific colors */ +.social-link:nth-child(1) i { color: #28a745; } /* Portfolio - green */ +.social-link:nth-child(2) i { color: #333; } /* Github - black */ +.social-link:nth-child(3) i { color: #0077b5; } /* LinkedIn - blue */ + +/* Responsive Design */ +@media (max-width: 768px) { + body { + padding: 20px; + height: auto; + min-height: 100vh; + } + + .container { + padding: 30px 15px; + } + + h1 { + font-size: 2.5em; + } + + p { + font-size: 1.1em; + margin-bottom: 30px; + } + + .social-links { + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 20px; + } + + .social-link { + padding: 20px 15px; + } + + .social-link i { + font-size: 2.5em; + } +} + +@media (max-width: 480px) { + h1 { + font-size: 2em; + } + + p { + font-size: 1em; + } + + .social-links { + grid-template-columns: 1fr; + gap: 15px; + } + + .social-link { + padding: 15px 10px; + } + + .social-link i { + font-size: 2em; + } +}