HTML과 CSS만을 사용하여 빛나는 소셜 미디어 아이콘을 만드는 방법.

4478 단어 htmlcsswebdev
안녕하세요 여러분, 이 게시물에서는 HTML과 CSS만 사용하여 소셜 미디어 아이콘을 빛나게 하는 방법을 볼 것입니다.

빛나는 SocialMedia 페이지의 라이브 링크입니다https://ajaysharma12799.github.io/Glowing-SocialMedia-Icon/

LinkedIn에서 나를 팔로우하세요

Github에서 나를 팔로우하세요https://www.github.com/ajaysharma12799/

생성 단계:-
  • 텍스트 편집기를 선택하십시오(VSCode 권장).
  • 현재 프로젝트 디렉토리, index.html 및
    스타일.css.
  • 아래 HTML 및 CSS 코드를 사용하여 페이지를 구축하십시오.

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Social Media Icons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="facebook"><i class="fab fa-facebook"></i></div>
        <div class="instagram"><i class="fab fa-instagram"></i></div>
        <div class="twitter"><i class="fab fa-twitter"></i></div>
        <div class="linkedin"><i class="fab fa-linkedin"></i></div>
        <div class="github"><i class="fab fa-github"></i></div>
        <div class="youtube"><i class="fab fa-youtube"></i></div>
    </div>
</body>
</html>




    :root{
    --fbColor: #4267B2;
    --instaColor: #cd486b;
    --twitterColor: #1DA1F2;
    --linkedinColor: #0077b5;
    --githubColor: black;
    --ytColor: #FF0000;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #CAD5E2;
}
.container {
    width: 50vw;
    margin: 0 auto;
    margin-top: 50vh;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
}
.fab {
    border: 1px solid;
    padding: 30px;
    font-size: 30px;
    border-radius: 50%;
    cursor: pointer;
}
.fab:hover {
    border: none;
    animation: grow 1s infinite alternate ease-in-out
}
.facebook:hover {
    background-color: var(--fbColor);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 50px var(--fbColor);
}
.instagram:hover {
    background-color: var(--instaColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--instaColor);
}
.twitter:hover {
    background-color: var(--twitterColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--twitterColor);
}
.linkedin:hover {
    background-color: var(--linkedinColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--linkedinColor);
}
.github:hover {
    background-color: var(--githubColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--githubColor);
}
.youtube:hover {
    background-color: var(--ytColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--ytColor);
}
@keyframes grow {
    from {
        transform: scale(1);
        font-size: 30px;
    }
    to {
        transform: scale(1.5);
        font-size: 50px;
    }
}
@media (max-width: 768px) {
    .container {
        margin: 0 auto;
        display: grid;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .fab {
        border: 1px solid;
        padding: 30px;
        font-size: 30px;
        border-radius: 50%;
        cursor: pointer;
    }
    .fab:hover {
        border: none;
        animation: grow 1s infinite alternate ease-in-out
    }
    .facebook, .instagram, .twitter, .linkedin, .github, .youtube {
        margin-top: 20%;
    }
}
    HDFS_미 러 파일
    Linux 시스템 -shell 스크립트 실행 프로그램

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage