Code Asteroid IDE : User profile card with social media details and bio description in HTML and CSS.

- Home
- Services
- Our Products
  ›
  - Back
    ‹
  - Palette RGB
  - Code Asteroid
- Skill Test
- Code War
- Videos
- News
  ›
  - Back
    ‹
  - Jobs & Hiring
  - Tech News
  - Startups
- Aptitude Test
- Technology
  ›
  - Back
    ‹
  - Developer Corner
  - Tutorials

User profile card with social media details and bio description in HTML and CSS. Views: 898 By: Ankur Hack

Contribute Run

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
            <div class="event-performer-profile">
                <div class="performer-profile-con">
                    <div class="small-cover-img">
                        <img src="https://www.hackhackathon.com/ImagesGallery/AdminImageGallery/imagePath/2021-12-21-12-04-angular-blazor.png">
                    </div>
                    <div class="prof-img-con-outer">
                        <div class="small-profile-img">
                            <img src="https://www.hackhackathon.com/ImagesGallery/AdminImageGallery/imagePath/2021-12-21-12-30-nitin-pandit.jpg">
                        </div>
                    </div>
                </div>
                <div class="performer-other-details text-center">
                    <div class="p-name">
                        <h5>Nitin Pandit</h5>
                    </div>
                    <div class="p-social-media">
                        <a href="#" class="c-footer-social-link">
                            <div class="icon-round-block fb-color">
                                <i class="fab fa-facebook-f"></i>
                            </div>
                        </a>
                        <a href="#" class="c-footer-social-link">
                            <div class="icon-round-block twitter-color">
                                <i class="fab fa-twitter"></i>
                            </div>
                        </a>
                        <a href="#" class="c-footer-social-link">
                            <div class="icon-round-block linkedin-color">
                                <i class="fab fa-linkedin-in"></i>
                            </div>
                        </a>
                        <a href="#" class="c-footer-social-link">
                            <div class="icon-round-block skype-color">
                                <i class="fab fa-skype"></i>
                            </div>
                        </a>
                        <a href="#" class="c-footer-social-link">
                            <div class="icon-round-block insta-color">
                                <i class="fab fa-instagram"></i>
                            </div>
                        </a>
                    </div>
                    <div class="p-about">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4"></div>
    </div>
</div>

CSS

.event-performer-profile {
    box-shadow: 0 0 5px #666666;
  	margin-top: 50px;
    margin-bottom: 50px;
}
.performer-profile-con {
    position: relative;
}
.small-cover-img img {
    width: 100%;
}
.prof-img-con-outer {
    position: absolute;
    bottom: -40px;
    width: 100%;
}
.small-profile-img {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    margin: auto;
    border: 4px solid #bdbdbdad;
}
.small-profile-img img {
    width: 100%;
}
.text-center {
    text-align: center!important;
}
.performer-other-details {
    padding: 50px 15px 15px 15px;
}
.p-social-media {
    margin: 15px 0px;
}
.p-about {
    margin-bottom: 10px;
    display: block;
    display: -webkit-box;
    height: auto;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.icon-round-block {
    border-radius: 50%;
    display: inline-block;
    height: 40px;
    margin: 0px 0px 0px;
    background-color: #a2a2a24f;
    position: relative;
    text-align: center;
    width: 40px;
}
.icon-round-block i {
    display: block;
    font-size: 17px;
    line-height: 2.4;
    color: #fff;
}

.fb-color {
    background-color: #3b5998 !important;
}
.twitter-color {
    background-color: #00acee !important;
}
.linkedin-color {
    background-color: #0e76a8 !important;
}
.skype-color {
    background-color: #00AFF0 !important;
}
.insta-color {
    background-color: #e41f95 !important;
}

Site

Training

Save Code

No code found to submit, Please add code in editors.

Thank you for your contribution. Our experts are soon review your canvas and update you.