index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--=============== REMIXICONS ===============-->
        <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

        <!--=============== CSS ===============-->
        <link rel="stylesheet" href="assets/css/styles.css">

        <title>Profile card ui design - Bedimcode</title>
    </head>
    <body>
        <div class="container">
            <div class="card">
                <div class="card__border">
                    <img src="assets/img/profile-img.png" alt="card image" class="card__img">
                </div>

                <h3 class="card__name">Emily Jules</h3>
                <span class="card__profession">UI/UX Designer</span>

                <div class="card__social" id="card-social">
                    <div class="card__social-control">
                        <!-- Toggle button -->
                        <div class="card__social-toggle" id="card-toggle">
                            <i class="ri-add-line"></i>
                        </div>
    
                        <span class="card__social-text">My social networks</span>
    
                        <!-- Card social -->
                        <ul class="card__social-list">
                            <a href="https://www.facebook.com/" target="_blank" class="card__social-link">
                                <i class="ri-facebook-line"></i>
                            </a>
    
                            <a href="https://www.instagram.com/" target="_blank" class="card__social-link">
                                <i class="ri-instagram-line"></i>
                            </a>
    
                            <a href="https://twitter.com/" target="_blank" class="card__social-link">
                                <i class="ri-twitter-line"></i>
                            </a>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--=============== MAIN JS ===============-->
        <script src="assets/js/main.js"></script>
    </body>
</html>