-
Notifications
You must be signed in to change notification settings - Fork 1
/
dashboard.html
154 lines (141 loc) · 5.64 KB
/
dashboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport:" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Dashboard | blocbox</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,700,700i|Open+Sans:300,300i,400,400i,700,700i" rel="stylesheet" type="text/css">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/dropit.css">
</head>
<body class="dashboard">
<!-- RESPONSIVE NAV -->
<a class="hamburger" id="menu" href="#">☰</a>
<!-- LEFT NAV -->
<nav id="left-nav" class="left-nav">
<a href="#" class="site-logo"><img src="images/site-logo.png" /></a>
<div class="settings">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg">
<p>Joey Kirk</p>
<!-- Setting Menu -->
<ul class="settings-menu">
<li>
<a href="#"><i class="fa fa-cog"></i></a>
<ul>
<li><a href="#"><i class="fa fa-circle"></i> My Account</a></li>
<li><a href="#"><i class="fa fa-users"></i> Collaborators</a></li>
<li><a href="#"><i class="fa fa-sign-out"></i> Sign Out</a></li>
</ul>
</div>
<div class="items">
<p>Items</p>
<ul>
<li class="active"><a href="#"><i class="fa fa-th-large"></i>All Items</a></li>
<li><a href="#"><i class="fa fa-file-o"></i> Notes</a></li>
<li><a href="#"><i class="fa fa-picture-o"></i></a><a href="../blocbox/images.html">Images</a></li>
<li><a href="#"><i class="fa fa-link"></i> Links</a></li>
</ul>
<p>Boxes</p>
<ul>
<li><a href="#"><i class="fa fa-inbox"></i> Landing Pages</a></li>
<li><a href="#"><i class="fa fa-inbox"></i> BB Photos</a></li>
<li><a href="#"><i class="fa fa-plus-square-o"></i> Add a new box</a></li>
</ul>
</div>
</nav>
<main role="main">
<!-- BENEFITS SECTION -->
<!-- Benefits - Header -->
<section class="content">
<div class="container">
<div class="header">
<h1>All Items</h1>
<ul class="menu">
<li>
<a href="#" class="btn">+ Add</a>
<ul>
<li><a href="#"><i class="fa fa-file-o"></i> Note</a></li>
<li><a href="#"><i class="fa fa-picture-o"></i> Image</a></li>
<li><a href="#"><i class="fa fa-link"></i> Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Benefits - Content -->
<div class="container">
<div class="content-item">
<div class="item-box">
<img src="https://images.pexels.com/photos/128817/pexels-photo-128817.jpeg?h=350&auto=compress&cs=tinysrgb">
</div>
</div>
<div class="content-item">
<div class="item-box">
<h2><img class="favicon" src="https://www.airbnb.com/favicon.ico"> <a href="http://wwww.airbnb.com">airbnb.com</a></h2>
<p>Vacation Rentals, Homes, Apartments & Rooms for Rent — Airbnb</p>
</div>
</div>
<div class="content-item">
<div class="item-box">
<h2><a href="#">Need to find a designer</a></h2>
<p>We have a one-person design team, but are ready to expand. We need to look for a second designer right now so we can continue to grow.</p>
<p>Put your recommendations here so we can view all of them. ...</p>
</div>
</div>
<div class="content-item">
<div class="item-box">
<img src="http://68.media.tumblr.com/c63e7dbe088ba65fa3ecba919bf8594c/tumblr_o6nnz8Glgm1tubinno1_1280.jpg">
</div>
</div>
<div class="content-item">
<div class="item-box">
<h2><img class="favicon" src="https://www.yourkarma.com/favicon.ico"> <a href="#">yourkarma.com</a></h2>
<p>Karma Go lets you take WiFi everywhere. Pay-as-you-go for data that never expires. No contracts or monthly fees. With nationwide coverage on LTE, stay connected to the internet with all of your devices, seamlessly.</p>
</div>
</div>
<div class="content-item">
<div class="item-box">
<img src="https://images.pexels.com/photos/551853/pexels-photo-551853.jpeg?h=350&auto=compress&cs=tinysrgb">
</div>
</div>
<div class="content-item">
<div class="item-box">
<h2><a href="#">Testing</a></h2>
<p>I love lamp.</p>
</div>
</div>
<div class="content-item">
<div class="item-box">
<h2><img class="favicon" src="https://www.invisionapp.com/favicon.ico"> <a href="#">invisionapp.com</a></h2>
<p>Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision</p>
</div>
</div>
<div class="content-item">
<div class="item-box">
<img src="https://images.pexels.com/photos/135033/pexels-photo-135033.jpeg?h=350&auto=compress&cs=tinysrgb">
</div>
</div>
<div class="content-item">
<div class="item-box">
<h2><a href="#">Why storing inspiration is great</a></h2>
<p>blocbox is a new tool to help collect and store your inspiration and information. From images, to links, to notes like this one, you can keep track of all your favorite things.</p>
</div>
</div>
</section>
</main>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/dropit.js"></script>
<script type="text/javascript">
$(".menu").dropit();
$( "#menu" ).click(function() {
$("#left-nav").toggleClass("open", 200);
});
$(".settings-menu").dropit();
</script>
</body>
</html>