Advertisement
ciralism

Here's My Card - 2/3

Jul 31st, 2015
1,374
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.66 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5. <title>NETWORK</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. <!---
  9.  
  10. HERE'S MY CARD
  11. a minimalist about me page
  12.  
  13. design 2/3
  14.  
  15. º ciralism º
  16.  
  17. ---->
  18.  
  19. <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
  20. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  21.  
  22. <style type="text/css">
  23. /* BASICS */
  24. body {background-color:#f3f3f3;font-family:Lato;color:#000;font-size:11px;font-weight:300;}
  25. a {color:#000;text-decoration:none;-webkit-transition-duration:600ms;-o-transition-duration:600ms;-moz-transition-duration:600ms;-ms-transition-duration:600ms;}
  26. a:hover, a:active {color:#94b1cc;border-bottom-color:#94b1cc;}
  27. b, em {font-weight:bold;color:#94b1cc;}
  28. h1 {padding-bottom:1px;margin:0;}
  29. .credit {position:absolute;text-transform:uppercase;font-size:10px;font-weight:normal;right:5px;bottom:6px;letter-spacing:1px;}
  30.  
  31. .card {
  32. width:310px;
  33. height:160px;
  34. background-color:#fff;
  35. position:fixed;
  36. left:50%;top:50%;
  37. margin-left:-175px;margin-top:-130px;
  38. padding:20px;
  39. box-shadow:2px 2px 3px #ccc;
  40. text-align:center;
  41. }
  42.  
  43. .name {text-transform:uppercase;font-size:15px;letter-spacing:3px;font-weight:bold;margin-top:45px;font-family:Didot;}
  44.  
  45. .title {font-family:Didot;font-style:italic;padding-top:5px;}
  46.  
  47. .company {text-transform:uppercase;font-weight:lighter!important;font-size:8px;letter-spacing:2px;padding-top:5px;}
  48.  
  49. .links {position:absolute;bottom:15px;width:100px;height:50px;vertical-align:bottom;text-transform:uppercase;font-size:7px;letter-spacing:1px;text-align:left!important;}
  50.  
  51. .links a {display:block;margin-top:7px;}
  52. </style>
  53. </head>
  54. <body>
  55. <div class="card">
  56. <div class="name">NAME HERE</div>
  57. <div class="title">TITLE HERE</div>
  58. <div class="company">COMPANY HERE</div>
  59. <div class="links">
  60. <a href="LINK URL"><i class="fa fa-home"></i> LINK NAME</a>
  61. <a href="LINK URL"><i class="fa fa-envelope-o"></i> LINK NAME</a>
  62. <a href="LINK URL"><i class="fa fa-folder-o"></i> LINK NAME</a>
  63. </div>
  64. <a class="credit" href="http://ciralism.tumblr.com" target="_blank"> ©</a>
  65.  
  66. </div>
  67. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement