<html>
<head>
<title>Vishal Shukla - Front-End Developer </title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
body {
font-size: 12px;
font-family: 'Roboto', sans-serif;
margin-top: 20px;
background: #e8e3dc; /* Old browsers */
color: #333;
}
a {
text-decoration: none;
color: #00a5e2;
font-size: 12px;
}
#home-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-position: fixed;
}
.card {
width: 300px;
height: 190px;
background: #fff;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
padding: 10px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -160px;
margin-top: -95px;
border: 1px solid #bbb;
border-bottom: 5px solid #33b5e5;
}
.card h1 {
font-size: 14px;
padding-bottom: 5px;
margin: 0 0 10px 0;
border-bottom: 1px solid #ccc;
text-align:left;
}
.title {
float: right;
font-size: 12px;
}
table tr td:first-child {
padding-right: 10px;
}
table td {
padding-bottom: 5px;
}
.pro-title {
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
width: 150px;
font-weight: bold;
}
img {
vertical-align: middle;
margin-right: 10px;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
margin-left: -111px;
margin-top: -290px;
}
/* ============================================================================= */
.wrapper {
width: 860px;
margin: 0 auto;
}
h1 {
font-size: 100px;
margin: 10px;
text-align: center;
color: #666;
}
h2 {
text-align: center;
margin: 0 0 40px 0;
color: #999;
text-transform: uppercase;
}
.doc-tabs {
padding-left: 10px;
}
.doc-tab {
background: white;
display: inline-block;
padding: 8px 15px;
border-top: 5px solid #ccc;
}
.doc-tab:hover {
border-top: 5px solid #999;
cursor: pointer;
}
.doc-tab.active {
border-color: #09c;
}
#methods {
/*border-color: #f80;
*/
}
.docs {
margin-bottom: 40px;
}
.doc {
background: white;
padding: 15px;
border: 1px solid #ddd;
display: none;
}
.doc:first-child {
display: block;
}
.doc table {
width: 100%;
border-collapse: collapse;
/*font-family:"Ubuntu";*/
}
.doc table th {
text-align: left;
border: 1px solid #ddd;
padding: 5px 5px;
background: #d9d9d9;
color: #333;
}
.doc table td {
border: 1px solid #ddd;
padding: 15px 10px;
font-size: 12px;
vertical-align: top;
}
.doc table tbody tr:nth-child(2n) {
background: #f3f3f3;
}
.param-line h4{
margin:20px 0 5px 0;
color:#01759b;
font-size:14px;
/*text-transform: uppercase;*/
}
.param-line h4:first-child{
margin-top:0;
}
.method-param{
color:#B1280E;
}
.syntaxhighlighter {
padding: 5px;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.diamonds{
position:fixed;
width:212px;
height:222px;
background:url(../assets/images/bg-diamonds.png);
left:20px;
bottom:40px;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script></script>
</head>
<body>
<div id="home-wrapper" >
<div class="logo"><img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png" width="222"></div>
<div class="card"
<h1>Vishal Shukla<span class="title">Front-End Developer</span> </h1>
<table cellspacing="0" cellspadding="0">
<tr>
<td>email:</td>
<td><a href="mailto:cheuk.alex@gmail.com">shukla304@gmail.com</a></td>
</tr>
<tr>
<td>facebook:</td>
<td><a href="http://fb.me/shukla304">facebook Profile</a></td>
</tr>
<tr>
<td>Website</td>
<td><a href="http://slidecoder.wc.lt/"> Profile</a></td>
</tr>
</table>
<div class="pro-title">Proficient in</div>
<img src="https://cdn2.iconfinder.com/data/icons/designer-skills/128/code-programming-javascript-software-develop-command-language-64.png" title="Javascript"/>
<img src="https://cdn1.iconfinder.com/data/icons/iconza-circle-social/64/697066-html5-64.png" title="HTML5"/>
<img src="https://cdn2.iconfinder.com/data/icons/designer-skills/128/code-programming-css-style-develop-layout-language-64.png" title="CSS"/>
<img src="https://cdn4.iconfinder.com/data/icons/web-development-5/500/window-php-coding-48.png" title="PHP"/>
</div>
</div>
<script src="../code.jquery.com/jquery-1.10.1.min.js"></script>
</body>
</html>
A Simple Html and CSS based Profile Card
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.