Skip to content

Instantly share code, notes, and snippets.

@Leonti
Created May 2, 2012 20:42
Show Gist options
  • Save Leonti/2580323 to your computer and use it in GitHub Desktop.
Save Leonti/2580323 to your computer and use it in GitHub Desktop.
main page
/* main page */
/**
* The first commented line is your dabblet’s title
*/
html {
background: #f06;
background: linear-gradient(45deg, black, #ccc);
min-height: 100%;
font-size: 0.6em;
}
.card {
background-color: black;
border: solid 1em white;
padding: 1em;
width: 40em;
transition-property: font-size;
transition-duration: 0.5s;
margin: auto;
}
.card:hover {
font-size: 1.2em;
}
.card, .card .info {
overflow: hidden;
_overflow:visible;
zoom:1;
}
.card .profile-wrap {
display: block;
float: left;
width: 15em;
height: 15em;
margin-right: 1em;
background: #ccc;
padding: 1.5em;
border-radius: 15em;
}
.card .profile-img {
display: block;
width: 15em;
height: 15em;
border-radius: 15em;
}
.card .info {
font-family: 'helvetica';
color: white;
font-size: 1.5em;
text-align: right;
}
.card .biggest {
font-size: 1.5em;
}
.card .medium {
font-size: 1.3em;
}
.card .exp-list {
list-style: none;
}
.card a {
color: inherit;
}
.card .exp-list a {
color: inherit;
text-decoration: none;
}
<div class="content">
<div class="card">
<a href="#" class="profile-wrap">
<img class="profile-img" src="data:image/jpeg;base64,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">
</a>
<div class="info">
<span class="biggest">Leonty Belskiy</span><br>
<span class="medium">Freelancer</span>
<ul class="exp-list">
<li><a href="#">PHP/MySQL</a></li>
<li><a href="#">Frontend - JS/CSS</a></li>
<li><a href="#">Java/Spring/Hibernate</a></li>
<li><a href="#">Coldfusion</a></li>
<li><a href="#">You name it :)</a></li>
</ul>
<span>pris<a href="http://mailhide.recaptcha.net/d?k=01erR_oO2KG0UFwUYrMFv6jg==&amp;c=XPMdl-bLnl5fyBX-EYQoOlghwS26ScT_RMks83lI3b0=" onclick="window.open('http://mailhide.recaptcha.net/d?k=01erR_oO2KG0UFwUYrMFv6jg==&amp;c=XPMdl-bLnl5fyBX-EYQoOlghwS26ScT_RMks83lI3b0=', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address">...</a>@gmail.com
</span>
</div>
</div>
</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment