-
Notifications
You must be signed in to change notification settings - Fork 0
/
browse.html
32 lines (31 loc) · 1.28 KB
/
browse.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
<!DOCTYPE html>
<html>
<head>
<title>Colour Stow</title>
<!-- A repository for designers colour palettes -->
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul class="sidenav">
<h1 id="logo">Colour<br />Stow</h1>
<li><a class="active" href="browse.html">Browse</a></li>
<li><a href="create.html">Create</a></li>
</ul>
<div class="content">
<h2>Responsive Sidenav Example</h2>
<p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
<h3>Resize the browser window to see the effect.</h3>
<div class="item-container">
<div class="item" id="item-1"></div>
<div class="item" id="item-2"></div>
<div class="item" id="item-3"></div>
<div class="item" id="item-4"></div>
<div class="item" id="item-5"></div>
</div>
</div>
</body>
</html>