Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'master' of github.com:kohlikohl/OWA-user-visualizer

  • Loading branch information...
commit ee71538fd68c13220ac5a0553917800431bf30f9 2 parents 3e4ec7a + 4c78bcb
Matthias Knoll authored
View
92 css/style.css
@@ -2,10 +2,98 @@ body{
background-image: url(../images/bkg.jpg);
margin: 0px;
padding: 0px;
+ font-family: Helvetica, Arial, sans-serif;
}
-body div{
+.background {
background-image: url(../images/hackety-hack-hack.png);
- width: 1100px;
+ width: 1500px;
height: 1000px;
+}
+
+.tooltip {
+ background: #fff;
+ padding: 8px 12px;
+ text-transform: uppercase;
+ color: #010101;
+ font-size: 10px;
+ line-height: 1;
+ font-weight: bold;
+ display: inline-block;
+ margin-bottom: 9px;
+ position: relative;
+ display: none;
+}
+
+.tooltip .tail {
+ height: 9px;
+ width: 16px;
+ position: absolute;
+ bottom: -9px;
+ left: 47%;
+ background: url('../images/tooltip-tail.png') no-repeat 0 0;
+}
+
+.infocard {
+ background: #fff;
+ padding: 10px 10px 0;
+ position: relative;
+ margin-bottom: 9px;
+ display: inline-block;
+ width: 300px;
+ display: none;
+}
+
+.infocard .tail {
+ height: 9px;
+ width: 16px;
+ position: absolute;
+ bottom: -9px;
+ left: 47%;
+ background: url('../images/tooltip-tail.png') no-repeat 0 0;
+}
+
+.infocard h1 {
+ font-size: 14px;
+ font-weight: bold;
+ color: #010101;
+ margin: 4px 0 8px;
+}
+
+.infocard p {
+ color: #838383;
+ font-size: 11px;
+ margin: 0;
+}
+
+.infocard img {
+ float: left;
+ margin: 0 10px 10px 0;
+}
+
+.infocard .footer {
+ margin: 0 -10px;
+ padding: 8px 10px;
+ background: #f7f8f8;
+ border-top: 1px solid #dce0e1;
+ clear: both;
+}
+
+.infocard .footer ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.infocard .footer ul li {
+ font-size: 11px;
+ color: #838383;
+ border-right: 1px solid #dce0e1;
+ padding-right: 5px;
+ margin-right: 5px;
+ display: inline;
+}
+
+.infocard .footer ul li:last-child {
+ border: none;
}
View
BIN  images/avatar.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/hackety-hack-hack.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/tooltip-tail.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
21 index.html
@@ -20,6 +20,25 @@
<script src="js/main.js" type="text/javascript" ></script>
</head>
<body>
- <div></div>
+ <div class="background">
+ <div class="tooltip">
+ This is just dummy text innit
+ <span class="tail"></span>
+ </div>
+
+ <div class="infocard">
+ <img src="images/avatar.png">
+ <h1>Simon Hammond</h1>
+ <p>Senior Developer</p>
+ <div class="footer">
+ <ul>
+ <li>Repeat visitor</li>
+ <li>Location, UK</li>
+ <li><strong>Logged in</strong></li>
+ </ul>
+ </div>
+ <span class="tail"></span>
+ </div>
+ </div>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.