Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>NETWORK</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <!---
- HERE'S MY CARD
- a minimalist about me page
- design 3/3
- º ciralism º
- ---->
- <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- <style type="text/css">
- /* BASICS */
- body {background-color:#f3f3f3;font-family:Roboto;color:#666;font-size:11px;font-weight:300;}
- a {color:#000;text-decoration:none;-webkit-transition-duration:600ms;-o-transition-duration:600ms;-moz-transition-duration:600ms;-ms-transition-duration:600ms;}
- a:hover, a:active {color:#94b1cc;border-bottom-color:#94b1cc;}
- b, em {font-weight:bold;color:#94b1cc;}
- .credit {position:fixed;text-transform:uppercase;font-size:7px;font-weight:bold;right:5px;bottom:5px;letter-spacing:1px;}
- .card {
- width:310px;
- height:160px;
- background-color:#fff;
- padding:20px;
- box-shadow:2px 2px 3px #ccc;
- margin:100px auto 20px auto;
- }
- .left {
- border-right:1px solid #eee;
- width:70px;
- height:100%;
- padding-right:10px;
- text-align:center;
- }
- .icon {width:40px;height:40px;border-radius:50%;-webkit-border-radius:50%;margin-top:10px;}
- .title {font-family:Lato, Sans-Serif;text-transform:uppercase;font-weight:100;letter-spacing:2px;font-size:8px;line-height:13px;margin-top:10px;color:#000;}
- .title b {font-weight:900!important;color:#000!important;}
- nav ul {
- list-style-type:none;
- padding:0;
- margin:10px 0 -7px 30px;
- }
- nav li {
- position:relative;
- text-align:right;
- margin:0 0 7px;
- }
- nav li::before {
- content:"";
- position:absolute;
- top:7px;
- left:-30px;
- right:0;
- height:1px;
- background-color:#eee;
- }
- nav a {
- text-transform:uppercase;padding:0px 1px 0px 5px;background-color:#fff;color:#666;border:none;font-family:Lato;leter-spacing:1px;font-size:6px;letter-spacing:1px;position:relative;text-align:right;
- }
- .right {padding:25px;text-align:left;height:150px;width:250px;margin-top:-185px;margin-left:65px;}
- .name {color:#000;letter-spacing:3px;font-family:Lato;font-weight:900;text-transform:uppercase;margin-top:20px;margin-left:10px;}
- .nametitle {font-family:Didot;font-style:italic;font-weight:bold;margin-top:5px;margin-left:10px;}
- article {padding:5px;display:inline-block;vertical-align:bottom;margin-top:20px;}
- .info {float:right;width:60px;margin-right:20px;}
- .info a {display:block;text-align:left;margin-top:5px;font-weight:300;font-size:10px;color:#666;}
- .info a i {transform:scale(.8);-webkit-transform:scale(.8);}
- .desc {font-weight:300;font-size:9px;padding:0!important;letter-spacing:1px;margin-left:10px;line-height:13px;margin-top:30px;width:150px;}
- .bio {
- width:310px;padding:20px;background-color:#fff;box-shadow:2px 2px 3px #ccc;margin:0 auto;font-weight:300;line-height:180%;font-size:10px;letter-spacing:1px;}
- .bio b {font-weight:500;}
- .bio a {border-bottom:1px solid #eee;}
- h1 {font-size:12px;display:block;padding:0px 0px 10px 0px;margin:0;font-family:Didot;font-weight:bold;}
- </style>
- </head>
- <body>
- <div class="card">
- <div class="left">
- <img class="icon" src="IMAGE URL HERE">
- <div class="title">COMPANY TITLE</div>
- <nav class="leftlinks">
- <ul>
- <li><a href="LINK URL">LINK NAME</a></li>
- <li><a href="LINK URL">LINK NAME</a></li>
- <li><a href="http://ciralism.tumblr.com">credit</a></li>
- </ul>
- </nav>
- </div>
- <div class="right">
- <div class="name">NAME HERE</div>
- <div class="nametitle">TITLE HERE</div>
- <article class="desc">DESCRIPTION HERE </article>
- <article class="info">
- <a href="LINK URL"><i class="fa fa-question-circle"></i> LINK NAME
- <a href="LINK URL"><i class="fa fa-file-text-o"></i> LINK NAME</a>
- <a href="LINK URL"><i class="fa fa-clock-o"></i> LINK NAME</a>
- <a href="mailto:SOMEONE@EXAMPLE.COM?Subject=Hello%20again" target="_top"><i class="fa fa-envelope-o"></i> email</a>
- </article>
- </div>
- </div>
- <div class="bio">
- <h1>BIOGRAPHY TITLE</h1>
- Biography goes here. </div>
- <a class="credit" href="http://ciralism.tumblr.com" target="_blank">ciralism</a>
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement