-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (122 loc) · 5.88 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
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
<!DOCTYPE html>
<html>
<head>
<title>Record Store Review | Daily Bruin</title>
<!-- Bootstrap CSS CDN -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta property="og:url" content="http://graphics.dailybruin.com/record-store-review/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Record Store Review | Daily Bruin" />
<meta property="og:description" content="Daily Bruin reviews seven record stores around Los Angeles." />
<meta property="og:image" content="img/bluebannertitle.png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="855" />
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image:type" content="image/jpg" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Scope+One" rel="stylesheet">
<link rel="stylesheet" href="css/style.css?v=2.0">
</head>
<body>
<div class="container landing-page">
<div class="row description">
<div class="col-xs-10 col-xs-offset-1">
<img id="banner" src="img/bluebannertitle.png"/>
<p><b>By Faizan Malik</b></p>
<p>Vinyl has spun back into relevance.</p>
<p>Sales of vinyls in the United States declined after 1979, but in the past 11 years they've grown in popularity again, according to Nielsen Music.</p>
<p>I've been collecting vinyl from independent record stores in Los Angeles for about nine months; the record format creates a physical relationship between listeners and the music. Vinyl owners flip the record and listen to complete albums rather than a collection of singles, creating an intimate experience.</p>
<p>Some bitter vinyl veterans act like records are an exclusive club reserved for classic rock fans and people over 30. But now newfound vinyl enthusiasts can find a number of records for sale at mainstream stores such as Urban Outfitters; however, independent record stores make for the most authentic shopping experience.</p>
<p>The Daily Bruin gives a run-down on some of the top record stores in Los Angeles.</p>
<p class="scroll-button">
<a href="#scroll-to-records">
<img id="down-arrow" src="img/whitedownarrow.png"/>
</a>
</p>
</div>
</div>
</div>
<div id="scroll-to-records">
<div class="container">
<div class="stores">
<div class="store-display">
<div class="row">
<div class="col-xs-3">
<a class="store-link" href="high-fidelity.html">
<img class="record-image center" id="record-player-without-record-0" src="img/recordplayerresized.png"/>
<p id="store-name">High-Fidelity</p>
</a>
</div>
<div class="col-xs-3">
<a class="store-link" href="headline-records.html">
<img class="record-image center" id="record-player-without-record-1" src="img/recordplayerresized.png"/>
<p id="store-name">Headline Records</p>
</a>
</div>
<div class="col-xs-3">
<a class="store-link" href="record-parlour.html">
<img class="record-image center" id="record-player-without-record-2" src="img/recordplayerresized.png"/>
<p id="store-name">The Record Parlour</p>
</a>
</div>
<div class="col-xs-3">
<a class="store-link" href="record-collector.html">
<img class="record-image center" id="record-player-without-record-3" src="img/recordplayerresized.png"/>
<p id="store-name">The Record Collector</p>
</a>
</div>
</div>
<div class="row second-row">
<div class="col-xs-4">
<a class="store-link" href="revolution-records.html">
<img class="record-image center" id="record-player-without-record-4" src="img/recordplayerresized.png"/>
<p id="store-name">Revolution Records L.A.</p>
</a>
</div>
<div class="col-xs-4">
<a class="store-link" href="record-surplus.html">
<img class="record-image center" id="record-player-without-record-5" src="img/recordplayerresized.png"/>
<p id="store-name">Record Surplus</p>
</a>
</div>
<div class="col-xs-4">
<a class="store-link" href="amoeba-music.html">
<img class="record-image center" id="record-player-without-record-6" src="img/recordplayerresized.png"/>
<p id="store-name">Amoeba Music</p>
</a>
</div>
</div>
<a href="#scroll-to-map">
<img id="down-arrow" src="img/whitedownarrow.png"/>
</a>
</div><!-- store-display -->
</div> <!-- stores -->
</div>
</div>
</div>
<div id="scroll-to-map">
<div class="container">
<div class="row">
<div class="map">
<div class="map-display">
<img id="map-graphic" src="img/map.png"/>
</br>
<p class="credit">
Website created and designed by <a href="https://github.com/paulinalei" target="_blank">Paulina Lei</a>. Illustrations by Shelby Chan.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Handlebars JS CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<!-- Own JS files -->
<script src="js/main.js"></script>
<script src="js/template.js"></script>
</body>
</html>