Perfil de Links Sociais

49 fathyhesham2001

Abrir no Editor Publique Seu Código

Recomendado

24 March 2025

Painel de administração do AdminHub v2.1

21 June 2025

Contêiner de efeitos de luz HTML com CSS

22 April 2025

Um Código de andres.stahr

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);
}

Recomendado

Painel de administração do AdminHub v2.1

Contêiner de efeitos de luz HTML com CSS

Um Código de andres.stahr

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS