Profile Card UI Example Using Pure HTML & CSS

Profile-Card-UI is a simple and awesome profile card UI using pure HTML & CSS. It is a good example for us to learn.

Profile Card UI Example Using Pure HTML & CSS

AuthorLinksMade withLast update
yourcodingcompanionOffice HomeHTML&CSSOct 10, 2022

How to learn this example?

You can download this example source code, and open index.html to learn.

<!Doctype HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link href="https://fonts.googleapis.com/css2?family=Righteous&family=Roboto:wght@300&display=swap" rel="stylesheet"> 
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link href="./css/style.css" rel="stylesheet" type="text/css">
        <title>Profile Card UI | YCC</title>
    </head>

    <body>
        <div class="container">
            <div class="card-template card-template-1">
                <div class="left-part">
                    <span>John</span>
                    <img alt="left-circular-image" src="./media/undraw_male_avatar.png" width="100%" />
                    <div class="social-profiles">
                        <a href="https://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i></a>
                        <a href="https://twitter.com/"><i class="fa fa-twitter-square fa-2x"></i></a>
                        <a href="https://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
                    </div>
                </div>
                <div class="right-part">
                    <h1 class="text-center orig-font">John Doe</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        Turpis massa tincidunt dui ut ornare lectus sit. Eget nunc scelerisque...
                    </p>
                </div>
            </div>
            <div class="card-template card-template-2">
                <div class="left-part">
                    <span>Jane</span>
                    <img alt="left-circular-image" src="./media/undraw_female_avatar.png" width="100%" />
                    <div class="social-profiles">
                        <a href="https://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i></a>
                        <a href="https://twitter.com/"><i class="fa fa-twitter-square fa-2x"></i></a>
                        <a href="https://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
                    </div>
                </div>
                <div class="right-part">
                    <h1 class="text-center orig-font">Jane Doe</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        Turpis massa tincidunt dui ut ornare lectus sit. Eget nunc scelerisque...
                    </p>
                </div>
            </div>
        </div>
        <footer>
            <p>
                Created with <i class="fa fa-heart"></i> by <span class="orig-font">Your Coding Companion</span>
            </p>
        </footer>
    </body>
</html>