forked from darcey25/jobTracker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mockup.html
174 lines (161 loc) · 9.41 KB
/
mockup.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-deep_orange.min.css" />
<link href="https://fonts.googleapis.com/css?family=Lato|Lobster" rel="stylesheet">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="mockup.css">
<title></title>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout--fixed-header mdl-layout--fixed-tabs">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout__title CompanyTitle">Cool App Name</span>
<div class="mdl-layout-spacer"></div>
</div>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#fixed-tab-1" class="mdl-layout__tab is-active">Need to Apply</a>
<a href="#fixed-tab-2" class="mdl-layout__tab">Applied</a>
<a href="#fixed-tab-3" class="mdl-layout__tab">Interviewing</a>
<a href="#fixed-tab-3" class="mdl-layout__tab">Offer</a>
<a href="#fixed-tab-3" class="mdl-layout__tab">Rejected</a>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title CompanyTitle">Cool App Name</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Jobs</a>
<a class="mdl-navigation__link" href="#">Calander</a>
<a class="mdl-navigation__link" href="#">Map</a>
<a class="mdl-navigation__link" href="#">Help</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="mdl-grid">
<!-- small card -->
<div class="demo-card-event mdl-card mdl-shadow--2dp mini-card" style="background: #00BCD4;">
<div class="mdl-card__title mini-title">
<p class="mini-title mini-title-font">Google</p>
</div>
<div class="mdl-card__supporting-text mini-sub mini-title" style="height: auto; width: auto;">
web developer
</div>
<div class="mdl-card__actions mdl-card--border mini-card-footer" style="background: #00a9be;">
<i class="material-icons delete-button">delete</i>
</div>
</div>
<div class="demo-card-event mdl-card mdl-shadow--2dp mini-card" style="background: #F44336;">
<div class="mdl-card__title mini-title">
<p class="mini-title mini-title-font">Facebook</p>
</div>
<div class="mdl-card__supporting-text mini-sub mini-title" style="height: auto; width: auto;">
web developer
</div>
<div class="mdl-card__actions mdl-card--border mini-card-footer" style="background: #db3c30;">
<i class="material-icons delete-button">delete</i>
</div>
</div>
<div class="demo-card-event mdl-card mdl-shadow--2dp mini-card" style="background: #3F51B5;">
<div class="mdl-card__title mini-title">
<p class="mini-title mini-title-font">Facebook</p>
</div>
<div class="mdl-card__supporting-text mini-sub mini-title" style="height: auto; width: auto;">
web developer
</div>
<div class="mdl-card__actions mdl-card--border mini-card-footer" style="background: #3848a2;">
<i class="material-icons delete-button">delete</i>
</div>
</div>
</div>
<!-- card -->
<div class="card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Google - WebDev</h2>
</div>
<hr>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--2-col-tablet mdl-cell--1-col-phone mdl-tabs__tab-bar">
<a href="#info-panel2" class="mdl-tabs__tab is-active mdl-color-text--orange-800"><i class="material-icons">info</i></a>
<a href="#contact-panel2" class="mdl-tabs__tab mdl-color-text--orange-800"><i class="material-icons">people</i></a>
<a href="#calander-panel2" class="mdl-tabs__tab mdl-color-text--orange-800"><i class="material-icons">event</i></a>
<a href="#notes-panel2" class="mdl-tabs__tab mdl-color-text--orange-800"><i class="material-icons"><i class="material-icons">format_list_bulleted</i></i></a>
</div>
<div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone info-border">
<div class="mdl-tabs__panel is-active" id="info-panel2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet est ac nisi convallis scelerisque vel a arcu. Cras ultricies vel lectus commodo ultrices. Maecenas euismod pellentesque iaculis. Nulla bibendum, sapien id
rhoncus bibendum, lorem massa cursus justo, id imperdiet arcu erat eu ante. Nulla egestas scelerisque nulla et convallis. Quisque consequat dignissim nibh eget finibus. Aliquam est mauris, ornare eu urna fermentum, iaculis pharetra
leo. Nulla mollis eros at nibh gravida ullamcorper. Mauris tincidunt nisi eget ante porta, vel feugiat leo blandit. Donec in tortor augue. Donec mollis ut tortor quis malesuada. In ac massa id nibh pharetra malesuada. Nullam efficitur
pharetra mi, quis fermentum eros rutrum egestas. Aenean at nunc id quam auctor placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mollis fringilla nulla sed efficitur. Integer ultrices
gravida quam, eget porttitor odio efficitur sed. Nulla sit amet efficitur ligula. In mauris tortor, aliquam et turpis at, tempus venenatis nisl. Fusce euismod risus eu congue ornare. Duis a tellus sed massa laoreet semper. Praesent
at turpis velit. Vivamus euismod, massa vitae maximus sagittis, purus turpis euismod magna, eget feugiat magna lorem nec nunc. Donec ligula velit, mollis eget sapien non, condimentum dapibus diam. Donec mattis odio libero, eu rhoncus
massa vulputate a. In eget augue et erat vehicula aliquam. Quisque mi ipsum, iaculis tincidunt nulla varius, dictum scelerisque tellus. Praesent ut vestibulum eros. Suspendisse sagittis placerat nisi eu auctor.</p>
</div>
<div class="mdl-tabs__panel" id="contact-panel2">
<ul class="demo-list-two mdl-list">
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Christopher Walken</span>
<span class="mdl-list__item-sub-title">Email: thewalken@gmail.com</span>
<span class="mdl-list__item-sub-title">Phone: 999.999.9999</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">edit</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">create</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Crispen Glover</span>
<span class="mdl-list__item-sub-title">Email: theglover@gmail.com</span>
<span class="mdl-list__item-sub-title">Phone: 999.888.8888</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">edit</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">create</i></a>
</span>
</li>
</ul>
</div>
<div class="mdl-tabs__panel" id="calander-panel2">
<p>calanderInfo</p>
</div>
<div class="mdl-tabs__panel" id="notes-panel2">
<form action="#">
<div class="mdl-textfield mdl-js-textfield notes-input">
<textarea class="mdl-textfield__input" type="text" rows= "3" id="note-text2" ></textarea>
<label class="mdl-textfield__label">Take a note...</label>
</div>
<div class="save-button">
<button class="mdl-button mdl-js-button mdl-button--primary">Save</button>
</div>
</form>
<p>former note</p>
</div>
</div>
</div>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">close</i>
</button>
</div>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">
More Information
</div>
</div>
</footer>
</main>
</div>
</body>
</html>