Profile Card Design

Hello readers, today in this post we are going to share the profile card design.

You can use profile cards to identify and segment contacts, and implement personalization rules. A profile card is a card that contains saved profile keys and profile values. They allow you to assign profile values consistently across all items on your website.

As usually, we will sharing the source code at here and you can copy the source code or you can download the zip file at the bottom at this post. I am recommend you to download zip because the image I have use i will also put it in the zip file.

So let's see the source code. Here is the source code for the HTML :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Profile Card Design</title> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'> </head> <body> <div class="card-wrapper"> <div class="card-img"> <img src="avatar.png" alt="Avatar" /> </div> <div class="content"> <p class="name">Kenneth L Jones </p><span>Web Developer</span> <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod modi quis, eaque!</p> </div> <div class="contact"> <input type="text" value="codingworld35@gmail.com" class="mail" readonly/> <div class="icons"> <i class='bx bxl-facebook-circle'></i><i class='bx bxl-instagram-alt' ></i><i class='bx bxl-twitter' ></i> </div> </div> </div> </body> </html>

CSS code :

*{ box-sizing: border-box; margin: 0; padding: 0; } body{ display: flex; justify-content: center; background: #D1C4FC; } .card-wrapper{ width: 280px; height: 400px; background: #25235C; margin-top: 75px; border-radius: 15px; position: relative; box-shadow: 0 18px 22px 0 rgba(0, 0, 0, 0.3); } .card-img{ width: 100%; height: 150px; display: flex; justify-content: center; align-items: center; } img{ width: 130px; border-radius: 100%; border: 2px solid #EBEBEB; } .content{ width: 100%; height: 130px; text-align: center; } .content p{ width: 95%; color: #F9F9FC; } p.name{ font-size: 26px; } span{ font-size: 14px; color: #9589CB; } p.lorem{ margin-top: 15px; } .contact{ height: 120px; display: flex; justify-content: center; align-items: center; width: 100%; flex-direction: column; } .contact input{ margin-top: 10px; text-align: center; height: 35px; background: #6B62B9; border-radius: 5px; outline: none; border: none; color: #F9F9FC; } .icons{ display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 15px; } .icons i{ font-size: 30px; margin:0 15px; display: flex; justify-content: center; align-items: center; color: #A899E1; }

Download ZIP here

Download Files

Please wait..

If the download didn't start automatically, click here.

Coding World

Profile Card Design

1 comment