Визитка

by Alexander Shpak

HTML

<div class="wrapper">
    <div class="card">
        <div class="name">
            <div class="subtitle">Союз Советских Социалистических</div>
            <div class="title">Республик</div>
        </div>
        <table class="contacts">
            <tr>
                <td><b>Тел.:</b> (385-2) 12-34-56</td>
                <td><b>Email:</b> [email protected]</td>
            </tr>
        </table>
    </div>
</div>

CSS

body {
    background: #eee;
}
.wrapper {
    width: 350px;
    margin: 10px auto;
}
.card {
    padding:0;
    width:350px;
    height:200px;
    font:normal 100% sans-serif;
    border-radius:8px;
    background: -webkit-linear-gradient(top, #fff, #ddd);
    background: -opera-linear-gradient(top, #fff, #ddd);
    background: -moz-linear-gradient(top, #fff, #ddd);
    box-shadow: 0 0 4px 2px #aaa;
}
.card .name {
    margin:0;
    padding:0
}
.card .name .title {
    font:bold 250% sans-serif;
    padding:0px 0 16px 8px;
    text-transform:uppercase
}
.card .name .subtitle {
    font:normal 150% sans-serif;
    padding:28px 0 4px 8px
}
.wrapper .card .contacts {
    background-color:#666;
    width:100%;
    padding:16px 8px
}
.wrapper .card .contacts td {
    font:normal 80% sans-serif;
    color:#eee
}