Skip to main content

Profile Card Design | HTML And CSS

by Rustcode
profile-card-design-html-and-css

When we design any websites, we need to design a profile page, which is contained the profile card. Apart from this, we design a profile card of our clients, users, employees to show the profile of them. For an attractive website ui design, we need to design an attractive profile card with various animation effects. Here I am going to design a profile card. This profile card is very simple and attractive, does not contain too many effects.  

In this profile card design, we will put some details of the user like user picture, name, position and a simple button with hover effect. So let's get started.


RELATED POST:


1. CREATE HTML BLOCK

Before starting writing code, we need to create a basic structure of an HTML document, so that the browser can understand document type and may start some process. The basic HTML structure looks as below. 

<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
    <style>
    </style>
  </head>

  <body>

    Content of the document.

    <script type="text/javascript">
    </script>
  </body>
</html>

2. ADD HTML

After Writing the basic structure of the HTML document, you can write your required tags and content also, after that run this code on your browser and see the output. As we know that HTML only shows content in a basic format, it does not beautify that content. To beautify our content we need for CSS, which is inserted in an HTML document and it creates an attractive user interface. 

<!DOCTYPE html>
<html>
   <head>
      <title>Profile Card</title>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <div class="card-container">
         <div class="upper-container">
            <div class="image-container">
               <img src="profile.jpg" />
            </div>
         </div>
         <div class="lower-container">
            <div>
               <h3>Alaina Wick</h3>
               <h4>Front-end Developer</h4>
            </div>
            <div>
               <p>sodales accumsan ligula. Aenean sed diam tristique,
                  fermentum mi nec, ornare arch.
               </p>
            </div>
            <div>
               <a href="#" class="btn">View profile</a>
            </div>
         </div>
      </div>
   </body>
</html>

3. ADD CSS

Now, it's time to beautify our HTML content, so we need to add to CSS in our HTML file. CSS can be added to the HTML document in three ways, here we are using the External CSS method. Write CSS which is shown below and see the output on your browser. 

body{
margin: 0px;
padding: 0px;
background: #f1f1f1;
font-family: arial;
box-sizing: border-box;
}
.card-container{
width: 300px;
height: 430px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container{
height: 150px;
background: #7F00FF;
}
.image-container{
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(100px,100px);
}
.image-container img{
width: 80px;
height: 80px;
border-radius: 50%;
}
.lower-container{
height: 280px;
background: #FFF;
padding: 20px;
padding-top: 40px;
text-align: center;
}
.lower-container h3, h4{
box-sizing: border-box;
line-height: .6;
font-weight: lighter;
}
.lower-container h4{
color: #7F00FF;
opacity: .6;
font-weight: bold;
}
.lower-container p{
font-size: 16px;
color: gray;
margin-bottom: 30px;
}
.lower-container .btn{
padding: 12px 20px;
background: #7F00FF;
border: none;
color: white;
border-radius: 30px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
transition: all .3s ease-in;
}
.lower-container .btn:hover{
background: transparent;
color: #7F00FF;
border: 2px solid #7F00FF;
}

4. YouTube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my  YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.




Comments

Post a Comment