-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (68 loc) · 5.66 KB
/
index.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
<html>
<head>
<title>Responsive Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,400,600,700,800' rel='stylesheet' type='text/css'>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="application.js"></script>
<meta name="viewport" content="width=600, initial-scale=1">
<!-- Mobile: When viewport size is > 360, set initial scale / magnification to 5x -->
<!-- Phone's self reported resolution is usually lower than actual hardware resolution -->
</head>
<body>
<div class="nav hidden">
<div class="nav-links color-1">
<span><i class="fa fa-home"></i> Home</span>
</div>
<div class="nav-links color-2">
<span><i class="fa fa-cloud"></i> Cloud</span>
</div>
<div class="nav-links color-3">
<span><i class="fa fa-send"></i> Plane</span>
</div>
<div class="nav-links color-4">
<span><i class="fa fa-flask"></i> Flask</span>
</div>
</div>
<div class="body">
<div class="side">
<div class="side-content">
<div class="name-and-button">
<span class="business-name"><i class="fa fa-bolt"></i> LIGHTNINGBOLT 2018</span>
<button type="button" name="show-menu" class="menu-button" id="menu-button"><i class="fa fa-bars"></i></button>
</div>
<div class ="info-and-title">
<p class="blog-info">FEBRUARY 25, 2014 • BY DANIEL W. LU</p>
<h1>Responsive Design with JQuery and CSS Animations</h1>
</div>
</div>
</div>
<div class="main">
<div class="main-content">
<h3>See CSS Media Queries in Action</h3>
<p>Clicking on the hamburger icon will slide the main content to the right, revealing a colorful navbar. Clicking on the hamburger icon again will slide the main content to the left, concealing the navbar. If a link on the navbar is clicked instead, the link will start to fast-blink, then after a small delay, main content will slide to the left, covering up the navbar.</p>
<p>The navbar blinking behavior is very much like the user-interface element present in Classic Mac OS (Pre-OS X), whereby clicking on a item inside a drop-down menu will cause it to blink rapidly before the command is executed. The blinking indicates and confirms to the user what option is selected. Small humanistic touches like this contribute to a superior user experience (UX). This demo works on Chrome, and hopefully more, when we front-end devs no longer have to append vendor prefixes to our CSS.</p>
<p><a href="https://github.com/dandydanny/responsive_design">Source on GitHub</a>.</p>
</div>
<hr>
<div class="main-content">
<h3>Echo Park Ullamco</h3>
<p>Aute stumptown gastropub cardigan. Gluten-free fugiat sint dolore twee VHS Brooklyn. Church-key slow-carb eu, master cleanse ullamco kitsch whatever forage locavore mlkshk tattooed. Photo booth proident slow-carb, seitan keytar banh mi minim kogi VHS literally Vice irony Brooklyn hoodie PBR. YOLO tousled aliqua lo-fi et, try-hard mumblecore photo booth. Bicycle rights twee authentic yr blog. Exercitation Tonx iPhone organic Pitchfork nesciunt.</p>
</div>
<hr>
<div class="main-content">
<h3>Echo Park Ullamco Austin</h3>
<p>Echo Park ullamco Austin lo-fi selfies squid, literally placeat polaroid biodiesel distillery. Esse cupidatat raw denim farm-to-table sint, try-hard you probably haven't heard of them pariatur organic freegan 3 wolf moon ethical fingerstache culpa. Aesthetic pariatur locavore meh mumblecore typewriter, et nihil artisan. Pug 3 wolf moon sriracha, organic cliche squid pork belly fanny pack gluten-free tousled roof party. Mixtape Cosby sweater squid tote bag, aesthetic beard elit direct trade church-key dolor vero occaecat. Semiotics sustainable artisan swag. Pinterest kitsch fugiat stumptown meggings Banksy.</p>
<p>Aute stumptown gastropub cardigan. Gluten-free fugiat sint dolore twee VHS Brooklyn. Church-key slow-carb eu, master cleanse ullamco kitsch whatever forage locavore mlkshk tattooed. Photo booth proident slow-carb, seitan keytar banh mi minim kogi VHS literally Vice irony Brooklyn hoodie PBR. YOLO tousled aliqua lo-fi et, try-hard mumblecore photo booth. Bicycle rights twee authentic yr blog. Exercitation Tonx iPhone organic Pitchfork nesciunt.</p>
</div>
<hr>
<div class="main-content">
<h3>Echo Park Ullamco Austin</h3>
<p>Echo Park ullamco Austin lo-fi selfies squid, literally placeat polaroid biodiesel distillery. Esse cupidatat raw denim farm-to-table sint, try-hard you probably haven't heard of them pariatur organic freegan 3 wolf moon ethical fingerstache culpa. Aesthetic pariatur locavore meh mumblecore typewriter, et nihil artisan. Pug 3 wolf moon sriracha, organic cliche squid pork belly fanny pack gluten-free tousled roof party. Mixtape Cosby sweater squid tote bag, aesthetic beard elit direct trade church-key dolor vero occaecat. Semiotics sustainable artisan swag. Pinterest kitsch fugiat stumptown meggings Banksy.</p>
<p>Aute stumptown gastropub cardigan. Gluten-free fugiat sint dolore twee VHS Brooklyn. Church-key slow-carb eu, master cleanse ullamco kitsch whatever forage locavore mlkshk tattooed. Photo booth proident slow-carb, seitan keytar banh mi minim kogi VHS literally Vice irony Brooklyn hoodie PBR. YOLO tousled aliqua lo-fi et, try-hard mumblecore photo booth. Bicycle rights twee authentic yr blog. Exercitation Tonx iPhone organic Pitchfork nesciunt.</p>
</div>
</div> <!-- end of main div -->
</div> <!-- end of body div -->
</body>
</html>