Simple and awesome Hire Me Card with CSS3 for Blogger

Today we’re going to build a card-style “Hire Me” widget that you can quickly drop onto any web page. Along the way we’ll learn a bunch of great stuff about CSS positioning and how to use pseudo elements to pull off some cool effects.

I think every portfolio should have a clear way to hire the designer and this provides an easy and attractive way to integrate that functionality.

DEMO

The HTML

The first thing that we’re going to do is set up some very basic HTML that will serve as the structure for our badge. We’ll use a two div structure: the outer div will hold the card as a whole and the inner div will be a nice and easy way to group all of our text objects together.

<div class="hireme">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOCYjg79l_m051mRD2uC8QJ1Yq9E_kg85vGqyTn2XCEqaKVBcdWcKa6I7QkU_HgUDqABgGYtECvZ2bCorHtSLlGXtey2eg9foD92agXEIefTadBMOoZOFQSPLbYliWvhDzFbgqUC_D4ZH/s200/Abu+Shaleh+logo.png" alt="Abu Shaleh Logo">
<div class="hiretext">
<h3>Abu Shaleh</h3>
<p>Web Designer</p>
<a href="http://www.abushaleh.net/">Hire Me</a>
</div>
</div>

We’ve got all of the markup we’ll need for this entire Widget. :)

The CSS

Below we have all CSS codes for the Hire Me Card. :)

* {
margin: 0; padding: 0;
}
.hireme, .hireme:before, .hireme:after {
height: 100px;
width: 235px;
background: #ccc;
border-radius: 10px;
-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
background-image: linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -o-linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -moz-linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -webkit-linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -ms-linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.4, rgb(217,217,217)), color-stop(0.7, rgb(245,245,245)));
}
/*Hire Me Card*/
.hireme {
margin: 40px;
position: relative;
}
.hireme img {
margin: 10px 0 0 10px;
border-radius: 10px;
height: 80px;
width: 80px;
}

/*Hire Me Text*/
.hiretext {
position: absolute;
top: 8px;
left: 105px;
text-align: center;
}
.hiretext h3 {
font: 20px Verdana, sans-serif;
color: #1b83a0;
}
.hiretext p {
font: 12px Verdana, sans-serif;
color: #494949;
}
.hiretext a {
border-radius: 5px;
border: 1px solid #00adef;
color: #fff;
background: #01bcf3;
padding: 8px 20px;
font: 15px/3.4 Helvetica, Verdana, sans-serif;
text-decoration: none;

-webkit-box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5), 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5), 1px 1px 2px rgba(0,0,0,0.2);
}
.hiretext a:hover {
background: #2ecefd;
}

We’re all finished! We now have an awesome little “Hire Me” Card/badge that can be easily dropped/installed onto any web page. :D

How to Add this widget in your Blogger Blog?

Well, this step for Beginner Bloggers and Blogger/blogspot users. Not every one have compatibility with coding.

To add this Menu to your blogger blog follow below steps:

1. Go to Blogger Dashboard > Layout
2. Add a HTML/Javascript widget and paste the below codes:

<style type="text/css">
* {
margin: 0; padding: 0;
}
.hireme, .hireme:before, .hireme:after {
height: 100px;
width: 235px;
background: #ccc;
border-radius: 10px;
-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
background-image: linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -o-linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -moz-linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -webkit-linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -ms-linear-gradient(bottom, rgb(217,217,217) 40%, rgb(245,245,245) 70%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.4, rgb(217,217,217)), color-stop(0.7, rgb(245,245,245)));
}
/*Hire Me Card*/
.hireme {
margin: 40px;
position: relative;
}
.hireme img {
margin: 10px 0 0 10px;
border-radius: 10px;
height: 80px;
width: 80px;
}

/*Hire Me Text*/
.hiretext {
position: absolute;
top: 8px;
left: 105px;
text-align: center;
}
.hiretext h3 {
font: 20px Verdana, sans-serif;
color: #1b83a0;
}
.hiretext p {
font: 12px Verdana, sans-serif;
color: #494949;
}
.hiretext a {
border-radius: 5px;
border: 1px solid #00adef;
color: #fff;
background: #01bcf3;
padding: 8px 20px;
font: 15px/3.4 Helvetica, Verdana, sans-serif;
text-decoration: none;

-webkit-box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5), 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5), 1px 1px 2px rgba(0,0,0,0.2);
}
.hiretext a:hover {
background: #2ecefd;
}
</style>
<div class="hireme">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOCYjg79l_m051mRD2uC8QJ1Yq9E_kg85vGqyTn2XCEqaKVBcdWcKa6I7QkU_HgUDqABgGYtECvZ2bCorHtSLlGXtey2eg9foD92agXEIefTadBMOoZOFQSPLbYliWvhDzFbgqUC_D4ZH/s200/Abu+Shaleh+logo.png" alt="Abu Shaleh Logo">
<div class="hiretext">
<h3>
Abu Shaleh</h3>
<p>
Web Designer</p>
<a href="http://www.abushaleh.net/">Hire Me</a>
</div>
</div>

3. Save and Done :)

Leave a comment below and let me know what you think.

Abu Shaleh