Skip to content

Instantly share code, notes, and snippets.

@jcotzin

jcotzin/mock.css

Created July 2, 2016 16:48
Show Gist options
  • Save jcotzin/c696c180b4ae5964a4109cdae345ce67 to your computer and use it in GitHub Desktop.
Save jcotzin/c696c180b4ae5964a4109cdae345ce67 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mock.css
.header {
border:1px dotted gray;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
display: flex;
justify-content: space-between;
}
.header h1 {
margin-left: 29px;
font-size: 20px;
font-family: sans-serif;
}
.werd {
margin-left:20px;
font: bold 15px sans-serif;
margin-left: 12px;
padding: 5px 5px 5px 5px;
}
.title {
position: relative;
top: -8px;
left: -2%;
font-size: 17px;
}
.return-button {
position: relative;
top: 16px;
right: 61%;
font-size: 11px;
}
.graph {
margin-left: 12px;
}
.table1 {
font-size: 12.5px;
margin-left: 10px;
}
span {
font-size: 15px;
font-weight: bold;
}
body {
font-family: Helvetica;
}
.week-month {
float: right;
margin-right: 75%;
}
.drop {
margin-left: 28%;
display: flex;
justify-content: space-between
}
Raw
mock.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mock.css" />
<title>Analytics Mock-Up</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<script src="https://use.fontawesome.com/18d7b7a6f1.js"></script>
</head>
<body>
<div class="main-container">
<div class="header">
<div class="title">
<h1>Analytics</h1>
</div>
<div class="return-button">
<button type="button">Return to Channel</button>
</div>
</div>
<div class="week-month">
<button type="button" class="Week">Week</button>
<button type="button" class="Month">Month</button>
</div>
<div class="drop">
<input type="text" placeholder=" 04/17/2011 - 05/16/2011">
<button class="drop-down" type="button">Go!</button>
</div>
<div class="graph">
<img src = "https://dl.dropboxusercontent.com/s/22k9tw6oj5361xg/Jess_Chart_01.jpg?dl=0" alt="line-graph" style="width:44%; height:8%;">
</div>
<div class="werd">
<p>Overview</p>
</div>
<table border="1" class="table1">
<tr>
<td>Total Viewer Minutes<br><span>&emsp;4,2888&emsp;</span><i class="fa fa-arrow-up" aria-hidden="true"><span style="color:green">25%</span></i>
</td>
<td>Total Streams<br><span>&emsp;1,215&emsp;</span><i class="fa fa-arrow-up" aria-hidden="true"><span style="color:green">5</span>%</i></td>
<td>Average Time per Viewer<br><span>&emsp;00:00:54&emsp;</span><i class="fa fa-arrow-down" aria-hidden="true"><span style="color:green">5</span>%</i>
</td>
<td>Total Unique Viewersd<br><span>&emsp;655&emsp;</span><i class="fa fa-arrow-down" aria-hidden="true"><span style="color:red">1</span>%</i>
</td>
<td>% New Visitors<br><span>&emsp;54&emsp;</span><i class="fa fa-arrow-up" aria-hidden="true"><span style="color:green">2%</span></i></td>
</tr>
</table>
<div class="werd">
<p>Geolocation</p>
</div>
<div class="graph2">
<img src = "https://dl.dropboxusercontent.com/s/e2kvqd2lt79i7cd/Jess_Geolocation_01.jpg?dl=0
" alt="pie" style="width:44.1%; height:9%;">
</div>
<div class="werd">
<p>Video Views<span style="color:blue;font-size:8px;margin-left: 60px">View Full Report</span><span style="margin-left:85px">Post Views</span><span style="color:blue;font-size:8px;margin-left:60px">View Full Report</p>
</div>
<div class="graph3">
<img src = "https://dl.dropboxusercontent.com/s/frmf7951gzk1zag/Jess_Chart_03.jpg?dl=0" alt="graph" style="width:44.1%; height:9%;">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment