tinder

<!--
© erika-writes
-->

<head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<title>untitled</title>

<style type="text/css">

body {
font-family:open sans;
font-size:10px;
line-height:15px;
letter-spacing:.5px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {
color:#000;
}

hr {
border:.5px solid #eee;
width:280px;
margin-top:10px;
margin-bottom:10px;
}

#container {
width:300px;
height:500px;
margin: 0 auto;
overflow:hidden;
border:0px solid #000;
border-radius:12px;
padding:10px;
margin-top:100px;
margin-bottom:30px;
box-shadow: 5px 4px 10px 5px #eee;
}

#name {
font-family:arial;
font-size:30px;
font-weight:bold;
text-transform:lowercase;
letter-spacing:-2.5px;
text-align:left;
margin:7px;
margin-top:15px;
margin-bottom:-2px;
}

#info {
font-family:open sans;
font-size:10px;
font-weight:none;
text-transform:lowercase;
letter-spacing:.5px;
line-height:12px;
text-align:left;
padding:8px;
margin: auto;
}

#photo img {
width:290px;
height:auto;
margin:5px;
}

#nav {
position:fixed;
left:25px;
top:20px;
font-family:open sans;
font-size:9px;
font-weight:500;
text-transform:lowercase;
letter-spacing:1px;
height:32px;
border-left:1px solid #000;
padding-left:15px;
}

#nav a {
text-decoration:none;
}

#credit {
position:fixed;
right:25px;
bottom:15px;
font-family:helvetica;
font-size:15px;
font-weight:bold;
letter-spacing:-1px;
}

#credit a {
text-decoration:none;
}

#credit img {
width:100px;
}

</style>
</head>

<body>

<div id="nav">
<a href="/">home</a>
<br><a href="http://tumblr.com/dashboard">dashboard</a>
</div>

<div id="container">
<div id="photo"><img src="image url here"></div>
<div id="name">name, age</div>
<div id="info">
<br><i class="fas fa-birthday-cake"></i> birthday
<br><i class="fas fa-home"></i> residency
<br><i class="fa fa-briefcase"></i> occupation
<br><i class="fas fa-smile"></i> faceclaim

<hr>

<div style="height:80px;width:290px;overflow:auto;">here for a good time not for a long time or w/e

<p>this isn't very big but you can put as much information as you want because this box scrolls yeehaw!!!!

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacinia ipsum, sit amet porta sapien commodo ut. Maecenas luctus sem elit, id imperdiet purus molestie in. Sed rutrum dolor in erat lacinia, non sodales odio porttitor. Sed a ornare massa, egestas lobortis purus. Vivamus bibendum, leo id blandit posuere, ipsum dui imperdiet ligula, vitae consectetur mauris metus ut enim. Quisque fermentum volutpat mi, id lacinia lectus luctus ac. Donec eu consectetur turpis, nec posuere nibh. Sed non arcu blandit, imperdiet enim sed, pellentesque enim. Donec ut egestas ex. Aenean tincidunt nisl nec odio bibendum, quis venenatis metus tempor. Donec mollis vestibulum augue vitae posuere. Quisque malesuada feugiat iaculis. In ut volutpat eros.
</div>

</div>

<div id="credit"><a href="http://erika-writes.tumblr.com">e.</a></div>

</body>