Skip to content

Instantly share code, notes, and snippets.

@johnivanoff

johnivanoff/iPhone_contact_html_mockup

Created November 16, 2011 17:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnivanoff/1370726 to your computer and use it in GitHub Desktop.
Save johnivanoff/1370726 to your computer and use it in GitHub Desktop.
Download ZIP
An iPhone Contact Page Marked Up With HTML5
Raw
iPhone_contact_html_mockup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Person</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="user-scalable=no, width=device-width" />
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
background-color: #ddd; /* Background color */
color: #222; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */
}
h1 {
color: #222;
font-size: 20px;
font-weight: bold;
margin: 0 auto;
padding: 10px 0;
text-align: center;
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(#999));
}
dl {
list-style: none;
padding: 0;
}
dt, dd {
background-color: #fff; /* Background color */
color: #222222; /* Foreground color used for text */
border: 1px solid #999;
font-weight: bold;
margin: 0;
padding: 12px 10px;
}
dt:first-child {
-webkit-border-top-left-radius: 8px;
}
dt:first-child + dd { /* This rounds the first definition item */
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
dd:last-child {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
}
dt {
float: left; /* this will 'bring up' the dd */
border: 0; /* remove border */
padding-top: 13px; /* alignment tweaking */
color: #516691;
text-align: right;
width: 60px;
background-color: transparent; /* clears up the top left corner */
}
div#namecompany{
padding-left: 90px; /* Makes room for the photo */
background: transparent url(../i/person-icon.png) 10px 0 no-repeat; /* This sets up the position of the image */
height: 70px; /* Set the hieght of the div */
}
div#namecompany h2, div#namecompany p {
margin: 0; /* Just smash it all together */
}
div#namecompany, dl {
margin: 10px;
}
a {
text-decoration: none;
color: #000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
width: inherit;
}
</style>
</head>
<body>
<h1>Info</h1>
<div id="namecompany">
<h2>John Ivanoff</h2>
<p>Some Company</p>
</div>
<dl>
<dt>work</dt>
<dd><a href="tel:972-555-1212">972-555-1212</a></dd>
<dt>home</dt>
<dd><a href="tel:972-555-1213">972-555-1213</a></dd>
</dl>
<dl>
<dt>work</dt>
<dd><a href="mailto:unknown@unknown.org">unknown@unknown.org</a></dd>
<dt>home</dt>
<dd><a href="mailto:unknown.unknown@areallyreallyreallylongurl.org"> unknown.unknown@areallyreallyreallylongurl.org</a></dd>
</dl>
<dl>
<dt>work</dt>
<dd><a href="http://goo.gl/1nTU8">123 Chicago Ave<br/>Lebanon, KS 76051-7693 </a></dd>
</dl>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment