How to make profile card in html and css?

Hello Friends, Today in this blog you’ll learn how to create a how to design profile card in html. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a How to make a full screen video background in html css? Now it’s time to create a how to design profile card with css Or css card ui design HTML & CSS.

Video tutorial of how to design profile card with css.

You may also like:

In the video, you’ve seen the animated profile card. There are many different ways to create this profile card design using html and css one of which is the way we have designed it.

Profile card design using html and css[Source Codes]

So to create these ,css profile card you need to create two different files. The 2 files are index.html & style.css  files. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file. 

Let’s create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your CSS file. Remember you’ve to create a file with a .css extension

CSS CODE

				
					*{
  margin: 0;
  padding: 0;
  font-family: "Open Sans",sans-serif;
  box-sizing: border-box;
  text-decoration: none;
}
body {
	background-color: #6e7876;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}

h2 {
	margin: 10px 0;
	color:#fff;
}
p {
	font-size: 15px;
	line-height: 21px;
	margin: 15px;
}

.card-container {
  background-color: #6e7876;
  border-radius: 20px;
  box-shadow: 0px 10px 20px -10px rgb(0 0 0 / 75%);
  color: #B3B8CD;
  padding-top: 30px;
  position: relative;
  width: 350px;
  max-width: 100%;
  text-align: center;
}

.card-container .pro {
	color: #565d5c;
	background-color: #fff;
	border-radius: 3px;
	font-size: 20px;
	font-weight: bold;
	padding: 3px 7px;
	position: absolute;
	top: 30px;
	left: 30px;
}

.card-container .round {
	border: 1px solid #fff;
	border-radius: 50%;
	padding: 9px;
	margin-bottom: 10px;
}


.social-media{
	position: absolute;
	width: 100%;
	top: 305px;
	left: 0;
	z-index: 1;
  }
  
  .social-media i {
    width: 50px;
    height: 50px;
    background: #565d5c;
    border-radius: 50%;
    color: #f1f1f1;
    font-size: 20px;
    line-height: 50px !important;
    margin: 0px 7px;
    position: relative;
}
  
  .social-media i:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background: #fff;
	left: 0;
	top: 0;
	box-sizing: border-box;
	border-radius: 50%;
	z-index: -1;
	transition: 0.4s linear;
  }
  
  .social-media i:hover:after{
	transform: scale(1.4);
	opacity: 0;
  }
  

button.primary {
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #231E39;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	padding: 10px 25px;
	margin: 20px 0px;
	transition: 0.3s;
}

button.primary.ghost {
	background-color: transparent;
	color: #fff;
	margin-top: 80px;
	transition: 0.6s;
}

button.primary.ghost:hover {
    background-color: #565d5c;
    color: #fff;
    border-color: #565d5c;
}

.skills {
  background-color: #565d5c;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  border-radius: 0 0px 20px 20px;
}

.skills ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.skills ul li {
	border: 1px solid #fff;
	border-radius: 2px;
	display: inline-block;
	font-size: 12px;
	margin: 0 7px 7px 0;
	padding: 7px;
}

.skills ul li:hover {
    color: #fff;
}
				
			

Now create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension

HTML CODE

				
					<!DOCTYPE html>
<!-- Created By MultiWebPress - www.multiwebpress.com -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Profle Card Html & CSS | MultiWebPress </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
  </head>
  <body>
    <div class="card-container">
      <span class="pro"><i class="message fas fa-envelope"></i></span>
      <img decoding="async" class="round" src="MultiWebPress.jpg" alt="user" />
      <h2>AJAZ AHMED</h2>
      <p>Front-end developer and <br/>User interface designer</p>
      <div class="buttons">
        <div class="bottom-section">
          <div class="social-media">
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fas fa-link"></i></a>
          </div>
      </div>
        <button class="primary ghost">
          FOLLOW ME
        </button>
      <div class="skills">
        
        <h6>Skills</h6>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>PHP</li>   
          <li>React JS</li>
          <li>Python</li>
          <li>Django</li>
          <li>WordPress</li>
          <li>Shopify</li>
        </ul>  
      </div>
    </div>
  </body>
</html>
				
			

After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)

That’s all, now you’ve successfully created profile card in html and css? If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.

Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.

Thanks in Advance!

SHARE

Share on whatsapp
WhatsApp
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on telegram
Telegram

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on facebook
Share on whatsapp
Share on telegram
Share on email
Share on twitter
Share on pinterest
Share on linkedin