134 lines
3.9 KiB
HTML
134 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css" />
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style type="text/css">
|
|
.item-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
flex-grow: 1;
|
|
justify-content: flex-start;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.item-list .item {
|
|
flex: 1;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-list .item .container {
|
|
margin: 0 auto;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.item-list .item .container .floaty {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.item-list .item .container img {
|
|
border-radius: 12px;
|
|
max-height: 150px;
|
|
max-width: 225px;
|
|
}
|
|
|
|
.item-list .item img {
|
|
box-shadow: 0px 0px 6px black;
|
|
}
|
|
|
|
.show-on-anchor {
|
|
display: none;
|
|
}
|
|
|
|
.show-on-anchor:target {
|
|
display: block
|
|
}
|
|
|
|
.preview {
|
|
max-height: 100%;
|
|
}
|
|
</style>
|
|
<title>Memories</title>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar is-link" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item has-text-weight-bold" href="/">
|
|
Memories
|
|
</a>
|
|
|
|
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
|
|
data-target="navbarBasicExample">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div id="navbarBasicExample" class="navbar-menu">
|
|
<div class="navbar-start">
|
|
<a href="{% url "list" %}" class="navbar-item is-active"><i class="material-icons">photo_library</i> Gallery</a>
|
|
<a href="{% url "list" %}" class="navbar-item"><i class="material-icons">folder</i> Albums</a>
|
|
|
|
|
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
<a class="navbar-link">
|
|
Dropdown
|
|
</a>
|
|
|
|
<div class="navbar-dropdown">
|
|
<a class="navbar-item">
|
|
About
|
|
</a>
|
|
<a class="navbar-item">
|
|
Jobs
|
|
</a>
|
|
<a class="navbar-item">
|
|
Contact
|
|
</a>
|
|
<hr class="navbar-divider">
|
|
<a class="navbar-item">
|
|
Report an issue
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<div class="navbar-item">
|
|
<form action="">
|
|
<input type="text" class="input" placeholder="Search...">
|
|
</form>
|
|
</div>
|
|
|
|
<div class="navbar-item">
|
|
<div class="buttons">
|
|
<a class="button is-primary">
|
|
<strong>Sign up</strong>
|
|
</a>
|
|
<a class="button is-light">
|
|
Log in
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{% block content %}{% endblock %}
|
|
</body>
|
|
|
|
</html>
|