forked from Enitanfanegan/HNG-Second-Chance-Group-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintern-dashboard-layout.html
170 lines (157 loc) · 11 KB
/
intern-dashboard-layout.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<script>
if ('CSS' in window && CSS.supports('color', 'var(--color-var)')) {
document.write('<link rel="stylesheet" href="assets/css/style.css">');
} else {
document.write('<link rel="stylesheet" href="assets/css/style-fallback.css">');
}
</script>
<noscript>
<link rel="stylesheet" href="assets/css/style-fallback.css">
</noscript>
<title>Virgo Template by CodyHouse</title>
</head>
<body>
<section class="flex main-body">
<aside class="bg border-right" data-theme="dark" style="width: 328px; height: 100vh;">
<nav class="sidenav js-sidenav dark">
<div class="log-holder padding">
<h2 class="text-bold">HNG</h2>
</div>
<div class="user">
<div class="avatar avatar--lg height-100% ">
<figure class="avatar__figure height-100%" role="img" aria-label="Olivia Gribben">
<svg class="avatar__placeholder" aria-hidden="true" viewBox="0 0 20 20" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="6" r="2.5" stroke="currentColor"/><path d="M10,10.5a4.487,4.487,0,0,0-4.471,4.21L5.5,15.5h9l-.029-.79A4.487,4.487,0,0,0,10,10.5Z" stroke="currentColor"/></svg>
<img class="avatar__img" src="./assets/img/avatarr.png" alt="Olivia Gribben" title="Olivia Gribben">
</figure>
<span role="status" class="avatar__status avatar__status--active" aria-label="Active"></span>
</div>
<div class="name-n-stage padding-left-sm">
<h4>Jeremiah</h4>
<p class="light-text text-sm">Stage-4</p>
</div>
</div>
<div class="sidenav__label">BROWSE</div>
<ul class="sidenav__list">
<li class="sidenav__item">
<a href="#0" class="sidenav__link" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21px" height="21px" viewBox="0 0 50 50" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1;" d="M 24.800781 1.042969 C 24.585938 1.042969 24.371094 1.113281 24.183594 1.246094 L 1.371094 19.058594 C 0.941406 19.394531 0.863281 20.019531 1.203125 20.457031 C 1.539063 20.882813 2.164063 20.960938 2.597656 20.625 L 3.96875 19.554688 L 3.96875 45.636719 C 3.96875 46.179688 4.414063 46.628906 4.960938 46.628906 L 18.847656 46.628906 L 18.847656 28.769531 L 30.753906 28.769531 L 30.753906 46.628906 L 44.644531 46.628906 C 45.1875 46.628906 45.636719 46.179688 45.636719 45.636719 L 45.636719 19.554688 L 47.003906 20.625 C 47.191406 20.761719 47.402344 20.832031 47.617188 20.832031 C 47.917969 20.832031 48.203125 20.707031 48.402344 20.457031 C 48.738281 20.019531 48.660156 19.394531 48.234375 19.058594 L 25.417969 1.246094 C 25.230469 1.113281 25.019531 1.042969 24.800781 1.042969 Z M 34.722656 4.960938 L 34.722656 6.003906 L 40.675781 10.644531 L 40.675781 4.960938 Z "/>
</g>
</svg>
<span class="sidenav__text">Dashboard</span>
</a>
</li>
<li class="sidenav__item sidenav__item--expanded">
<a href="#0" class="sidenav__link">
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="24" height="24" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="scale(0.0416667)"/>
</pattern>
<image id="image0" width="24" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABAElEQVRIie2UPU7EMBCF34ygoclGLByElgY6TrDXIaHj5yT01CDtAbgH3sjjhiryo2J3oYjtbJBS8CQXtsbvG//oAXMQyePO7MlZcM6C68weSR5NBujMHjYW+HPYfc5e2Z9sLHCwWOVSemhUrofqlotq66s5XWwBPbT/1VRKRfcYleuijlB4gjEaDSBxFxkvAHz8BeATiK/ndf0eGW+GCov/MokWiG8i+uy8XwF6PRmARHtWVw0AOO9XIvoC4GQSgAia5aJqdyt6lTIHMt9ABM1ptTN3PjQiuM3ZmwQcYp4EHGoOJLJoP1NKzIuzaEzn3xr8Ral0zdF8s2g2gH8l9QUQD3P88Sry7gAAAABJRU5ErkJggg=="/>
</defs>
</svg>
<span class="sidenav__text">Project Work</span>
<span class="sidenav__counter">2 <i class="sr-only">notifications</i></span>
</a>
</li>
<li class="sidenav__item">
<a href="#0" class="sidenav__link">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 48 48"><title>ic_group_48px</title>
<g fill="#ffffff">
<path d="M32 22c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm-16 0c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm0 4c-4.67 0-14 2.34-14 7v5h28v-5c0-4.66-9.33-7-14-7zm16 0c-.58 0-1.23.04-1.93.11C32.39 27.78 34 30.03 34 33v5h12v-5c0-4.66-9.33-7-14-7z"></path>
</g>
</svg>
<span class="sidenav__text">Community</span>
</a>
<button class="reset sidenav__sublist-control js-sidenav__sublist-control js-tab-focus" aria-label="Toggle sub navigation">
<svg class="icon" viewBox="0 0 12 12"><polygon points="4 3 8 6 4 9 4 3"/></svg>
</button>
<ul class="sidenav__list">
<li class="sidenav__item">
<a href="#0" class="sidenav__link">
<span class="sidenav__text">Complaint &
Recommendation</span>
</a>
</li>
</ul>
</li>
<li class="sidenav__item">
<a href="#0" class="sidenav__link">
<svg class="icon sidenav__icon" viewBox="0 0 16 16">
<g>
<path d="M14,6.883V13H2V6.82L0,5.695V14c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1V5.783L14,6.883z"></path>
<path d="M15,1H1C0.4,1,0,1.4,0,2v1.4l8,4.5l8-4.4V2C16,1.4,15.6,1,15,1z"></path>
</g>
</svg>
<span class="sidenav__text">Certification</span>
</a>
</li>
<li class="sidenav__item">
<a href="#0" class="sidenav__link">
<svg class="icon sidenav__icon" viewBox="0 0 16 16">
<g>
<path d="M14,6.883V13H2V6.82L0,5.695V14c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1V5.783L14,6.883z"></path>
<path d="M15,1H1C0.4,1,0,1.4,0,2v1.4l8,4.5l8-4.4V2C16,1.4,15.6,1,15,1z"></path>
</g>
</svg>
<span class="sidenav__text">Profile</span>
</a>
</li>
</ul>
<div class="sidenav__divider" role="presentation"></div>
</nav>
</aside>
<div class="main-content-container width-100%">
<header class="main-header js-main-header padding-x-md">
<div class="container width-100%">
<div class="main-header__layout">
<div class="main-header__logo">
<button class="reset anim-menu-btn js-anim-menu-btn js-tab-focus" aria-label="Toggle menu">
<i class="anim-menu-btn__icon anim-menu-btn__icon--arrow-right" aria-hidden="true"></i>
</button>
</div>
<form class="expandable-search js-expandable-search">
<input class="form-control" type="search" name="searchInputX" id="searchInputX">
<label class="form-label" for="searchInputX">Search</label>
<button class="reset expandable-search__btn">
<svg class="icon" viewBox="0 0 24 24"><title>Search</title><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor" fill="none" stroke-miterlimit="10"><line x1="22" y1="22" x2="15.656" y2="15.656"></line><circle cx="10" cy="10" r="8"></circle></g></svg>
</button>
</form>
<button class="btn btn--subtle main-header__nav-trigger js-main-header__nav-trigger"
aria-label="Toggle menu" aria-expanded="false" aria-controls="main-header-nav">
<i class="main-header__nav-trigger-icon" aria-hidden="true"></i>
<span>Menu</span>
</button>
<nav class="main-header__nav js-main-header__nav" id="main-header-nav"
aria-labelledby="main-header-nav-label" role="navigation">
<div id="main-header-nav-label" class="main-header__nav-label">Main menu</div>
<ul class="main-header__nav-list">
<li class="main-header__nav-item"><a href="contact.html"
class="main-header__nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>bell-53</title><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" fill="#000000" stroke="#000000"><path data-color="color-2" fill="none" stroke-miterlimit="10" d="M15,20 c0,1.7-1.3,3-3,3s-3-1.3-3-3"></path> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M19,13c0-2.5,0-5,0-5 c0-3.9-3.1-7-7-7S5,4.1,5,8c0,0,0,2.5,0,5c0,4-2,7-2,7h18C21,20,19,17,19,13z"></path></g></svg>
</a></li>
<li class="main-header__nav-item main-header__nav-divider" aria-hidden="true"></li>
<li class="main-header__nav-item"><a href="https://github.com/CodyHouse/virgo-template"
class="btn btn--accent">Logout</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main id="main-content" class=" padding-x-md">
heya
</main>
</div>
</section>
<script src="assets/js/scripts.js"></script>
</body>
</html>