Skip to content

Commit e612941

Browse files
dansupdansup
committed
Add aside template
1 parent 73431f6 commit e612941

4 files changed

Lines changed: 343 additions & 0 deletions

File tree

‎css/aside.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
body {
2+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
3+
height: 100%;
4+
}
5+
.button.is-success {
6+
background-color: #2EB398;
7+
}
8+
.nav.is-dark {
9+
background-color: #232B2D;
10+
color: #F6F7F7;
11+
}
12+
.nav.is-dark .nav-item a, .nav.is-dark a.nav-item {
13+
color: #F6F7F7;
14+
}
15+
.nav.is-dark .nav-item a.button.is-default {
16+
color: #F6F7F7;
17+
background-color: transparent;
18+
border-width: 2px;
19+
}
20+
.aside {
21+
background-color: #232B2D;
22+
}
23+
.aside .uploader {
24+
background-color: #2EB398;
25+
height: 95px;
26+
margin:0 -10px;
27+
padding: 25px 30px;
28+
}
29+
.aside .uploader .button {
30+
background-color: transparent;
31+
border: 3px dashed #F6F7F7;
32+
padding: 20px 70px;
33+
color: #F6F7F7;
34+
}
35+
.aside .main {
36+
padding: 40px;
37+
color: #6F7B7E;
38+
}
39+
.aside .title {
40+
color: #6F7B7E;
41+
font-size: 12px;
42+
font-weight: bold;
43+
text-transform: uppercase;
44+
}
45+
.aside .main .item {
46+
display: block;
47+
padding: 10px 0;
48+
color: #6F7B7E;
49+
}
50+
.aside .main .item.active {
51+
color: #F6F7F7;
52+
}
53+
.aside .main .icon {
54+
font-size: 19px;
55+
padding-right: 30px;
56+
}
57+
.aside .main .name {
58+
font-size: 16px;
59+
font-weight: bold;
60+
}
61+
.content {
62+
display: block;
63+
background-color: #fff;
64+
padding: 40px 20px;
65+
}
66+
.nav.menu {
67+
border-bottom: 1px solid #e1e1e1;
68+
}
69+
.nav.menu .nav-item .icon-btn {
70+
border: 3px solid #B7C6C9;
71+
border-radius: 90px;
72+
padding: 5px 7px;
73+
color: #B7C6C9;
74+
}
75+
.nav.menu .nav-item .icon-btn.thin {
76+
padding: 5px 8px;
77+
}
78+
.nav.menu .nav-item.is-active .icon-btn {
79+
color: #2EB398;
80+
border: 3px solid #2EB398;
81+
}
82+
.nav.menu .nav-item .icon-btn .fa {
83+
font-size: 20px;
84+
color: #B7C6C9;
85+
}
86+
.nav.menu .nav-item.is-active .icon-btn .fa {
87+
color: #2EB398;
88+
}
89+
.files {
90+
padding: 50px 0;
91+
}
92+
.file {
93+
display: block;
94+
padding: 20px;
95+
}
96+
a.file:not(.button) {
97+
border-bottom: none;
98+
border-radius: 4px;
99+
}
100+
.file:hover, .file.active, .file:active {
101+
background-color: #E4E9EB;
102+
}
103+
.file .image img {
104+
padding-bottom: 10px;
105+
}
106+
.file .name {
107+
font-weight: bold;
108+
word-wrap: break-word;
109+
word-break: break-all;
110+
font-size: 16px;
111+
color: #69707a;
112+
}
113+
.file .timestamp {
114+
font-weight: bold;
115+
font-size: 14px;
116+
color: #B9C2C4;
117+
}

‎images/aside.png‎

448 KB
Loading

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,18 @@ <h4 class="subtitle is-5">A modern admin dashboard</h4>
6868
<figure class="image"><img src="images/admin.png"></figure>
6969
</a>
7070
</div>
71+
<div class="column is-one-third-desktop is-full-mobile">
72+
<a class="box" href="templates/aside.html">
73+
<h3 class="title is-4">
74+
Aside
75+
<span class="tag is-primary">
76+
v 0.1.0
77+
</span>
78+
</h3>
79+
<h4 class="subtitle is-5">A layout with a dark aside</h4>
80+
<figure class="image"><img src="images/aside.png"></figure>
81+
</a>
82+
</div>
7183
<div class="column is-one-third-desktop is-full-mobile">
7284
<a class="box" href="templates/blog.html">
7385
<h3 class="title is-4">

‎templates/aside.html‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Aside - Free Bulma template</title>
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.0/css/bulma.min.css">
10+
<link rel="stylesheet" type="text/css" href="../css/aside.css">
11+
</head>
12+
<body>
13+
<nav class="nav is-dark has-shadow" id="top">
14+
<div class="container">
15+
<div class="nav-left">
16+
<a class="nav-item" href="../index.html">
17+
<img src="../images/bulma-white.png" alt="Description">
18+
</a>
19+
</div>
20+
<span class="nav-toggle">
21+
<span></span>
22+
<span></span>
23+
<span></span>
24+
</span>
25+
<div class="nav-right nav-menu">
26+
<a class="nav-item is-tab is-active">
27+
Home
28+
</a>
29+
<a class="nav-item is-tab">
30+
Features
31+
</a>
32+
<a class="nav-item is-tab">
33+
Team
34+
</a>
35+
<a class="nav-item is-tab">
36+
Help
37+
</a>
38+
<span class="nav-item">
39+
<a class="button is-default">
40+
Log in
41+
</a>
42+
<a class="button is-info">
43+
Sign up
44+
</a>
45+
</span>
46+
</div>
47+
</div>
48+
</nav>
49+
<div class="columns">
50+
<aside class="column is-2 aside hero is-fullheight">
51+
<div>
52+
<div class="uploader has-text-centered">
53+
<a class="button">
54+
<i class="fa fa-upload"></i>
55+
</a>
56+
</div>
57+
<div class="main">
58+
<div class="title">Main</div>
59+
<a href="#" class="item active"><span class="icon"><i class="fa fa-home"></i></span><span class="name">Dashboard</span></a>
60+
<a href="#" class="item"><span class="icon"><i class="fa fa-map-marker"></i></span><span class="name">Activity</span></a>
61+
<a href="#" class="item"><span class="icon"><i class="fa fa-th-list"></i></span><span class="name">Timeline</span></a>
62+
<a href="#" class="item"><span class="icon"><i class="fa fa-folder-o"></i></span><span class="name">Folders</span></a>
63+
</div>
64+
</div>
65+
</aside>
66+
<div class="content column is-10">
67+
<div class="title is-2">Overview</div>
68+
<nav class="nav menu">
69+
<div class="container">
70+
<div class="nav-left">
71+
<a class="nav-item is-tab is-active"><span class="icon-btn"><i class="fa fa-plus"></i></span></a>
72+
<a class="nav-item is-tab">
73+
<span class="icon-btn">
74+
<i class="fa fa-print"></i>
75+
</span>
76+
</a>
77+
<a class="nav-item is-tab">
78+
<span class="icon-btn thin">
79+
<i class="fa fa-lock"></i>
80+
</span>
81+
</a>
82+
<a class="nav-item is-tab">
83+
<span class="icon-btn">
84+
<i class="fa fa-trash"></i>
85+
</span>
86+
</a>
87+
<div class="nav-item is-tab">
88+
<strong>2 items selected</strong>
89+
</div>
90+
</div>
91+
<div class="nav-right">
92+
<a class="nav-item is-tab">Name</a>
93+
<a class="nav-item is-tab">Size</a>
94+
<a class="nav-item is-tab">Views</a>
95+
<a class="nav-item"><span class=" button is-success">Uploaded</span></a>
96+
</div>
97+
</div>
98+
</nav>
99+
<div class="columns files">
100+
<div class="column is-2">
101+
<a class="file">
102+
<div class="image is-3by2">
103+
<img src="https://images.unsplash.com/photo-1467321638755-7246fd0dc1f3?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1125&q=80">
104+
</div>
105+
<div class="name">swimmin.jpeg</div>
106+
<div class="timestamp">2 hours ago</div>
107+
</a>
108+
<a class="file">
109+
<div class="image is-3by2">
110+
<img src="https://images.unsplash.com/photo-1467321638755-7246fd0dc1f3?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1125&q=80">
111+
</div>
112+
<div class="name">swimmin.jpeg</div>
113+
<div class="timestamp">2 hours ago</div>
114+
</a>
115+
<a class="file">
116+
<div class="image is-3by2">
117+
<img src="https://source.unsplash.com/category/nature/640x480">
118+
</div>
119+
<div class="name">daisydaisydaisyuntitled.jpeg</div>
120+
<div class="timestamp">2 hours ago</div>
121+
</a>
122+
</div>
123+
<div class="column is-2">
124+
<a class="file active">
125+
<div class="image is-3by2">
126+
<img src="https://source.unsplash.com/category/buildings/640x480">
127+
</div>
128+
<div class="name">untitled.jpeg</div>
129+
<div class="timestamp">2 minutes ago</div>
130+
</a>
131+
<a class="file">
132+
<div class="image is-3by2">
133+
<img src="https://source.unsplash.com/category/nature/640x480">
134+
</div>
135+
<div class="name">daisydaisydaisyuntitled.jpeg</div>
136+
<div class="timestamp">2 hours ago</div>
137+
</a>
138+
<a class="file">
139+
<div class="image is-3by2">
140+
<img src="https://images.unsplash.com/photo-1467321638755-7246fd0dc1f3?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1125&q=80">
141+
</div>
142+
<div class="name">swimmin.jpeg</div>
143+
<div class="timestamp">2 hours ago</div>
144+
</a>
145+
</div>
146+
<div class="column is-2">
147+
<a class="file active">
148+
<div class="image is-3by2">
149+
<img src="https://source.unsplash.com/category/food/640x480">
150+
</div>
151+
<div class="name">splashsplash.jpeg</div>
152+
<div class="timestamp">2 hours ago</div>
153+
</a>
154+
<a class="file">
155+
<div class="image is-3by2">
156+
<img src="https://source.unsplash.com/category/nature/640x480">
157+
</div>
158+
<div class="name">untitled.jpeg</div>
159+
<div class="timestamp">2 hours ago</div>
160+
</a>
161+
</div>
162+
<div class="column is-2">
163+
<a class="file">
164+
<div class="image is-3by2">
165+
<img src="https://source.unsplash.com/category/objects/640x480">
166+
</div>
167+
<div class="name">untitled.jpeg</div>
168+
<div class="timestamp">2 hours ago</div>
169+
</a>
170+
<a class="file">
171+
<div class="image is-3by2">
172+
<img src="https://images.unsplash.com/photo-1467321638755-7246fd0dc1f3?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1125&q=80">
173+
</div>
174+
<div class="name">swimmin.jpeg</div>
175+
<div class="timestamp">2 hours ago</div>
176+
</a>
177+
</div>
178+
<div class="column is-2">
179+
<a class="file">
180+
<div class="image is-3by2">
181+
<img src="https://source.unsplash.com/category/people/640x480">
182+
</div>
183+
<div class="name">untitled.jpeg</div>
184+
<div class="timestamp">2 hours ago</div>
185+
</a>
186+
<a class="file">
187+
<div class="image is-3by2">
188+
<img src="https://source.unsplash.com/category/objects/640x480">
189+
</div>
190+
<div class="name">swimmin.jpeg</div>
191+
<div class="timestamp">2 hours ago</div>
192+
</a>
193+
</div>
194+
<div class="column is-2">
195+
<a class="file">
196+
<div class="image is-3by2">
197+
<img src="https://source.unsplash.com/category/nature/640x480">
198+
</div>
199+
<div class="name">untitled.jpeg</div>
200+
<div class="timestamp">2 hours ago</div>
201+
</a>
202+
<a class="file">
203+
<div class="image is-3by2">
204+
<img src="https://source.unsplash.com/category/people/640x480">
205+
</div>
206+
<div class="name">untitled.jpeg</div>
207+
<div class="timestamp">2 hours ago</div>
208+
</a>
209+
</div>
210+
</div>
211+
</div>
212+
</div>
213+
</body>
214+
</html>

0 commit comments

Comments
 (0)