Profil de liens sociaux

1,565 fathyhesham2001

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

6 August 2025

Morphing de particules avec Three.js

22 July 2025

Page de destination du Samsung Galaxy S24 Ultra

20 March 2026

Exemple de formulaire de connexion HTML avec connexion via les réseaux sociaux

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="Professional profile of Fathy Hesham Fathy - Front-End Developer and Machine Learning Engineer based in Cairo, Egypt. Connect with me on various social platforms.">
    <meta name="keywords"
        content="Fathy Hesham Fathy, Front-End Developer, Machine Learning Engineer, Web Development, Cairo, Egypt, GitHub, LinkedIn, Frontend Mentor">
    <meta name="author" content="Fathy Hesham Fathy">
    <title>Fathy Hesham | Front-End Developer & ML Engineer</title>
    
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
</head>

<body>
    
    <main>
        <div class="wave-container">
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
        </div>
        <div class="bubble-container">
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
        </div>
        <div class="container">
            <div class="box">
                <div class="info">
                    <div class="image">
                        <img src="images/profile.png" alt="image profile">
                        <span class="name">Fathy Hesham Fathy</span>
                        <address>Cairo - Egypt</address>
                        <div class="position">
                            <span><q>Front-End Developer</q></span>
                            <span><q>Machine Learning Engineer.</q></span>
                        </div>
                    </div>
                </div>
                <div class="links">
                    <a href="https://github.com/FathyHesham">GitHub</a>
                    <a href="https://www.linkedin.com/in/fathy-hesham-fathy/">LinkedIn</a>
                    <a href="https://www.frontendmentor.io/profile/FathyHesham">Frontend Montor</a>
                    <a href="https://www.facebook.com/fathy.hesham.520/">Facebook</a>
                    <a href="https://www.instagram.com/fathy__hesham/">Instagram</a>
                </div>
            </div>
        </div>
    </main>
    
</body>

</html>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    height: 100vh;
    background: linear-gradient(135deg, #e9ecf3 0%, #dde6f6 60%, #b8c6db 100%);
    position: relative;
    overflow: hidden;
}

.wave-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wave-container .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 200px;
    background: linear-gradient(45deg, rgba(120, 144, 156, 0.5), rgba(121, 134, 203, 0.5));
    animation: wave-animation 10s ease-in-out infinite;
    opacity: 0.7;
}

.wave-container .wave:nth-child(2) {
    height: 150px;
    background: linear-gradient(45deg, rgba(121, 134, 203, 0.3), rgba(186, 104, 200, 0.2));
    animation: wave-animation 8s ease-in-out infinite reverse;
    opacity: 0.5;
}

.wave-container .wave:nth-child(3) {
    height: 100px;
    background: linear-gradient(45deg, rgba(186, 104, 200, 0.15), rgba(120, 144, 156, 0.15));
    animation: wave-animation 6s ease-in-out infinite;
    opacity: 0.3;
}

.wave-container .wave::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50% 50% 0 0;
}

@keyframes wave-animation {

0%,
    100% {
        transform: translateX(-50%) translateY(0px);
        border-radius: 40% 60% 70% 30%;
    }

25% {
        transform: translateX(-60%) translateY(-10px);
        border-radius: 30% 70% 50% 50%;
    }

50% {
        transform: translateX(-70%) translateY(-20px);
        border-radius: 60% 40% 30% 70%;
    }

75% {
        transform: translateX(-40%) translateY(-10px);
        border-radius: 50% 50% 60% 40%;
    }
}

.bubble-container {
    position: absolute;
    width: 100%;
    height: 100%;
    /* pointer-events: none; */
}

.bubble-container .bubble {
    position: absolute;
    background: radial-gradient(circle, rgba(121, 134, 203, 0.10) 0%, rgba(186, 104, 200, 0.06) 100%);
    border-radius: 50%;
    filter: blur(5px);
    animation: bubble-animation 8s ease-in-out infinite;
}

.bubble-container .bubble:nth-child(1) {
    width: 60px;
    height: 60px;
    left: 10%;
    animation-delay: 0;
}

.bubble-container .bubble:nth-child(2) {
    width: 40px;
    height: 40px;
    left: 30%;
    animation-delay: 2s;
}

.bubble-container .bubble:nth-child(3) {
    width: 80px;
    height: 80px;
    right: 20%;
    animation-delay: 4s;
}

.bubble-container .bubble:nth-child(4) {
    width: 30px;
    height: 30px;
    right: 10%;
    animation-delay: 6s;
}

@keyframes bubble-animation {

0%,
    100% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }

10% {
        transform: scale(1);
        opacity: 1;
    }

90% {
        transform: scale(1);
        opacity: 1;
    }

100% {
        transform: translateY(-100px) scale(0);
        opacity: 0;
    }
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    padding: 20px;
    z-index: 20;
    position: relative;
}

.container .box {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px);
    border-radius: 30px;
    padding: 50px;
    width: 420px;
    box-shadow: 0 25px 50px rgba(121, 134, 203, 0.10), 0 1px 0 rgba(120, 144, 156, 0.08);
    border: 1px solid rgba(121, 134, 203, 0.13);
    position: relative;
    overflow: hidden;
    animation: float-in 1s ease-out;
}

@keyframes float-in {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }

to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.container .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.1) 100%);
    border-radius: 30px;
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {

0%,
    100% {
        opacity: 0.5;
    }

50% {
        opacity: 1;
    }
}

.wave-container .container .info {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.container .box .info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.container .box .info .image img {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #b8c6db 0%, #a5aee4 100%);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: image-profile 2s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(121, 134, 203, 0.13);
    display: block;
}

@keyframes image-profile {

0%,
    100% {
        transform: scale(1);
    }

50% {
        transform: scale(1.1);
    }
}

.container .box .info .name {
    color: #3a3d40;
    text-shadow: 0 2px 10px rgba(121, 134, 203, 0.10);
    font-size: 25px;
    font-weight: 300;
    margin-bottom: 10px;
    display: block;
}

.container .box .info address {
    font-size: 16px;
    font-weight: 300px;
    text-align: center;
    display: block;
    margin-bottom: 10px;
}

.container .box .info .position {
    margin-bottom: 10px;
}

.container .box .info .position span {
    font-size: 16px;
    font-weight: 300px;
    text-align: center;
    display: block;
}

.container .box .links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container .box .links a {
    text-decoration: none;
    /* text-transform: uppercase; */
    color: #3a3d40;
    background: linear-gradient(90deg, #a5aee4 0%, #b8c6db 100%);
    border: none;
    margin: 5px;
    padding: 7px;
    width: 100%;
    border-radius: 0 10px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 2px;
    box-shadow: 0 15px 35px rgba(121, 134, 203, 0.10);
    position: relative;
    overflow: hidden;
}

.container .box .links a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(121, 134, 203, 0.08);
    border-radius: 0 10px;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
}

.container .box .links a:hover::before {
    width: 300px;
    height: 300px;
}

.container .box .links a:hover {
    background: linear-gradient(90deg, #b8c6db 0%, #a5aee4 100%);
    box-shadow: 0 20px 40px rgba(186, 104, 200, 0.13);
    color: #6a1b9a;
}

.container .box .links a:active {
    transform: translateY(-1px);
}