Business Card Design | HTML And CSS | Website Design
BusinessCard Design | HTML And CSS |
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> 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="avatar.png">
</div>
</div>
<div class="lower-container">
<div><h3>Website Design</h3>
<h4>Founder, Website Design</h4>
</div>
<div>
<p>Create Contact or Business Card<br>Using HTML And CSS<br><br>Email:- help.webcode@gmail.com<br>Blog:- webcode-hub.blospot.com</p>
</div>
<div>
<a href="#" class="btn">View profile</a>
</div>
</div>
</div>
</body>
</html>
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.
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, I will put some details of the user like user picture, name, position and a simple button with hover effect. So let's get started.
1. CREATE HTML BLOCK
2. ADD 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="avatar.png">
</div>
</div>
<div class="lower-container">
<div><h3>Website Design</h3>
<h4>Founder, Website Design</h4>
</div>
<div>
<p>Create Contact or Business Card<br>Using HTML And CSS<br><br>Email:- help.webcode@gmail.com<br>Blog:- webcode-hub.blospot.com</p>
</div>
<div>
<a href="#" class="btn">View profile</a>
</div>
</div>
</div>
</body>
</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.
3. ADD CSS
body
{
margin: 0;
padding: 0;
background: #f1f1f1;
font-family: arial;
box-sizing: border-box;
}
.card-container
{
width: 300px;
height: 450px;
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: 0.6;
font-weight: lighter;
}
.lower-container h4
{
color: #7f00ff;
opacity: 10;
font-weight: bold;
}
.lower-container p
{
font-size: 16px;
color: gray;
margin-bottom: 35px;
}
.lower-container .btn
{
padding: 12px 20px;
background: #7f00ff;
border: none;
color: white;
border-radius: 15px;
font-size: 19px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease-in;
}
.lower-container .btn:hover
{
background: transparent;
color: yellowgreen;
border: 2px solid #7f00ff;
}
{
margin: 0;
padding: 0;
background: #f1f1f1;
font-family: arial;
box-sizing: border-box;
}
.card-container
{
width: 300px;
height: 450px;
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: 0.6;
font-weight: lighter;
}
.lower-container h4
{
color: #7f00ff;
opacity: 10;
font-weight: bold;
}
.lower-container p
{
font-size: 16px;
color: gray;
margin-bottom: 35px;
}
.lower-container .btn
{
padding: 12px 20px;
background: #7f00ff;
border: none;
color: white;
border-radius: 15px;
font-size: 19px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease-in;
}
.lower-container .btn:hover
{
background: transparent;
color: yellowgreen;
border: 2px solid #7f00ff;
}
4. YouTube Video
Here I am attaching a YouTube link 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.
Download source file
Profile Card
Website Design
Founder, Website Design
Create Contact or Business Card
Using HTML And CSS
Email:- help.webcode@gmail.com
Blog:- webcode-hub.blospot.com
Website Design
Founder, Website Design
Create Contact or Business Card
Using HTML And CSS
Email:- help.webcode@gmail.com
Blog:- webcode-hub.blospot.com
Using HTML And CSS
Email:- help.webcode@gmail.com
Blog:- webcode-hub.blospot.com
Comments
Post a Comment