Profile Card Using HTML and CSS
A profile card is a kind of digital card that includes the person's picture, a brief bio, and all of their social network connections. This allows anybody to contact the individual…
Glassmorphism Profile Card Design using HTML and CSS
In this article, you will learn how to create a Glassmorphism Profile Card design using HTML and CSS. Earlier I shared with you tutorials on many more types of web…
Simple Profile Card UI Design using HTML and CSS
In this article, you will learn how to create a simple profile card Ui design using HTML and CSS code. In the meantime, I have made a profile card design using bootstrap. Now is the time to create a beautiful profile card using only HTML and CSS.
If you are a beginner and want to create an HTML CSS card design then this article will help you. Here I have made this design for beginners only relying on HTML and CSS. Many times we see such profile designs in different applications or websites. Along with this, various types of information, social media links, etc. are given. This type of CSS profile card design is also used in many blogs or free-lensing websites. PitangoUX is an end-to-end UX/UI service agency.
I have already shared the design of a Responsive Profile Card with you. However, this design is not Responsive it is just to create an idea about your profile card. If you want to create a Responsive Profile Card using HTML and CSS, you can try my previous design.
Below I have given a live demo that will help you to know how this profile works.
See the Pen
Responsive Profile Card UI by Foolish Developer (@fghty)
on CodePen.
As you saw in the demo above here I first designed a web page. I made a small box on it. I have added images, social-media-icons, and various texts to this box. A shadow has been used here which has made this card design a bit brighter than the webpage.
First of all, I used a profile image here then gave the title and some basic description. Then here are the links on various social media for contact and two buttons at the bottom. All in all, it is a very simple and beautiful profile card design. You can easily make this design if you have a basic idea of HTML and CSS relationships.
Responsive Profile Card UI Design using HTML and CSS
Below I have shared the complete tutorial on how I designed this Html profile card. If you are a beginner then you must follow the tutorial below. Use the download button below the article to download the source code.
Step 1: Design the web page
I designed the webpage using a small amount of CSS code below. Originally set the background color of the webpage here # d5e1ef and gave the font family.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #d5e1ef;
}
Step 2: Create the basic structure of the profile card
I have created a box on the web page using the following HTML and CSS code. The width of this box is 340px and the min-height is 100px. Here I have used white as the background color and box-shadow. The box-shadow helped create a black shadow around this card which made it more attractive and brighter.
<main>
</main>
main {
width: 340px;
overflow: hidden;
background-color: #fdfcfc;
font-size: 16px;
line-height: 22px;
color: #000;
border-radius: 7px;
box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.505);
margin: 50px auto;
}
Step 3: Add a profile image to the card (more…)
Responsive Our Team Section Using HTML, CSS and Bootstrap
Responsive Our Team Section is used in various business and personal websites. Team Section you can easily create with the help of HTML and CSS code. This will increase the quality of your website as well as attract users. Here you can sort some information including profile images of important people of your company or business.
In this article, I will show you how to Create a responsive team section using HTML, CSS, and Bootstrap. Before that, I made many more types of profile cards and team sections.
Here I have used three profile images you can increase or decrease the amount if you want. I have shared in the tutorial below how to increase this amount. It’s a completely responsive team section bootstrap which I used bootstrap programming code to make it responsive. HTML and CSS are mainly used here to design it.
I have used social media icons for each profile image. Under normal circumstances, these icons are completely hidden. These icons appear when you click on the profile box. All in all, it is a beautiful and simple Responsive Our Team Section design.
