Create A Simple Profile Card Using HTML & CSS

How To Create A Simple Profile Card Using HTML & CSS In 9 Minutes
524 Views

HTML is to code for your web page. CSS is to style your web page. If you know CSS properly, you can create gorgeous style.

Hi guys, welcome back to anupdebnath.info. Our discussion topic is –

How To Create A Simple Profile Card Using HTML & CSS In 9 Minutes

Before going to write code. let’s see the outlook of our profile card first.

See this image? I am gonna create something like this with html & css. This is a simple hack, you can also do this. To do that, i need some files such as – a html file, a css file , an image.

Add HTML Code

First Step :: On your HTML page, at first create the basic structure of HTML. Later we need to create a profile box. On this box, we will put an image, our information and some social links. Write the code showing below on your code editor-

  <div class="mainbox"> <!-- Everything will be inside this box -->
    <img src="images/a.jpg" style="width: 100%"> <!-- Upload your own image -->
    <h2> Anup Deb Nath Rinku </h2> 
    <p class="boxtitle"> Blogger | Trader | Web Designer </p> 
    <p>anupdebnath.info</p>

    <div class="socialmedia"> <!-- social icons -->
      <a href="#"><i class="fa fa-facebook"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
    </div>

    <p><button>Discover More</button></p> 
  </div>

Did you notice? there are three classes, one H2 tag, one button on the HTML structure. We need to write CSS code for these items.

Apply CSS Code

*,body{
	font-family: georgia;
}
h2{
	text-align: center;
}
.mainbox{
	box-shadow: 0 8px 40px 2px rgba(0,0,0,.2);
	max-width: 300px;
	margin: auto;
	text-align: center;
}
.boxtitle{
	color: gray;
	font-size: 17px;
}
button{
	border:none;
	outline: 0;
	display: inline-block;
	padding: 15px;
	color: #fff;
	background-color: #000;
	text-align: center;
	cursor: pointer;
	width: 100%;
	font-size: 17px;
}
a{
	text-decoration: none;
	color: #000;
	padding: 5px;
}
.socialmedia{
	margin:24px 0;
}

As it is about to coding, there is no need to talk more about it. A video of this coding is far enough. What is your opinion? Let’s start the watch party –

How is this? Coding is fun, isn’t it? :p :p If you like this comment below. If you think it is not so cool as your thought then describe your opinion regarding it on comment box.

Happy watching. <3 .

Related posts for you

Share Your Opinion With Me