-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
154 lines (136 loc) · 12.3 KB
/
index.html
File metadata and controls
154 lines (136 loc) · 12.3 KB
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- COMMON TAGS -->
<title>Johnny Bongos | Northeast's Premier Bongoseros | Songs Requested, The Invisible Menace Album 1"</title>
<!-- Search Engine -->
<meta name="description" content="John Ramspacher, aka Johnny Bongos, started playing the smaller macho drums in high school. Since then, with the addition of large hembra drums and other instruments, he has become one of the northeast's premier bongoseros.">
<meta name="image" content="https://johnnybongos.netlify.app/images/cubistJohnnyBongos.jpg">
<!-- Schema.org for Google -->
<meta itemprop="name" content="Johnny Bongos | Northeast's Premier Bongoseros | Songs Requested, The Invisible Menace Album 1"">
<meta itemprop=" description" content="John Ramspacher, aka Johnny Bongos, started playing the smaller macho drums in high school. Since then, with the addition of large hembra drums and other instruments, he has become one of the northeast's premier bongoseros.">
<meta itemprop="image" content="https://johnnybongos.netlify.app/images/cubistJohnnyBongos.jpg">
<!-- Meta Viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets-->
<link href="johnnyBongos.css" rel="stylesheet">
<!--Favicons-->
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Johnny Bongos | Northeast's Premier Bongoseros | Songs Requested, The Invisible Menace Album 1"">
<meta name=" twitter:description" content="John Ramspacher, aka Johnny Bongos, started playing the smaller macho drums in high school. Since then, with the addition of large hembra drums and other instruments, he has become one of the northeast's premier bongoseros.">
<meta name="twitter:site" content="@dmerms">
<meta name="twitter:creator" content="@dmerms">
<meta name="twitter:image:src" content="https://johnnybongos.netlify.app/images/cubistJohnnyBongos.jpg">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="Johnny Bongos | Northeast's Premier Bongoseros | Songs Requested, The Invisible Menace Album 1"">
<meta name=" og:description" content="John Ramspacher, aka Johnny Bongos, started playing the smaller macho drums in high school. Since then, with the addition of large hembra drums and other instruments, he has become one of the northeast's premier bongoseros.">
<meta name="og:image" content="https://johnnybongos.netlify.app/images/cubistJohnnyBongos.jpg">
<meta name="og:url" content="https://johnnybongos.netlify.app">
<meta name="og:site_name" content="Johnny Bongos | Northeast's Premier Bongoseros">
<meta name="og:type" content="website">
</head>
<body>
<header>
<h1>Johnny <span><svg width="100%" height="100%" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;">
<rect id="illustrations" x="-127.5" y="-24.75" width="569.43" height="735.363" style="fill:none;" />
<g id="v1Illustration">
<g>
<path id="head" d="M11.334,50.665l-2.043,-16.101l33.384,-28.905l41.845,1.68l41.622,52.633l-26.462,22.589l-2.108,28.606l-64.986,13.294l-9.403,-13.866l-12.459,-10.738l-8.414,-23.531l9.024,-25.661Zm70.946,23.082l-1.658,22.515l-39.878,8.158l-4.003,-5.903l-10.667,-9.194l-4.666,-13.047l8.319,-23.655l-1.366,-10.759l20.71,-17.932l26.461,1.063l25.737,32.545l-18.989,16.209Z" />
<path d="M82.28,73.747l-1.658,22.515l-39.878,8.158l-4.003,-5.903l-10.667,-9.194l-4.666,-13.047l8.319,-23.655l-1.366,-10.759l20.71,-17.932l26.461,1.063l25.737,32.545l-18.989,16.209Z" style="fill:#ff8047;" />
<g id="hair">
<path id="beard" d="M21.243,76.001l6.866,-11.623l9.935,8.301l16.033,-5.02l-1.444,15.185l-6.512,9.346l-9.631,6.388l-10.229,-8.843l-5.018,-13.734Z" style="fill:#ffd700;" />
<path id="mustache" d="M54.226,67.72l-12.911,-7.424l-13.28,4.151l13.067,-0.896l13.124,4.169Z" style="fill:#ffd700;" />
<path id="beard1" serif:id="beard" d="M39.491,32.269l9.099,-8.432l26.918,0.664l14.784,19.111l-13.161,23.907l-9.101,-0.082l2.577,-36.757l-31.116,1.589Z" style="fill:#ffd700;" />
</g>
<g id="mouth">
<path id="insideMouth" d="M49.937,71.853l-9.677,-5.728l-11.113,3.702l10.653,2.88l10.137,-0.854Z" />
<path id="bottomLip" d="M49.982,71.859l-6.044,3.312l-4.465,-0.911l-5.019,0.679l-5.389,-5.104l10.442,2.207l10.475,-0.183Z" style="fill:#ff97b3;" />
<g id="topTeeth">
<path id="tooth1" d="M36.67,67.508l-0.214,2.16l2.264,0.204l0.214,-2.159" style="fill:url(#_Linear1);" />
<path id="tooth11" serif:id="tooth1" d="M39.164,67.763l-0.214,2.159l2.264,0.204l0.214,-2.159" style="fill:url(#_Linear2);" />
<path id="tooth12" serif:id="tooth1" d="M32.452,67.241l-0.659,1.934l2.055,0.186l0.659,-1.935" style="fill:url(#_Linear3);" />
<path id="tooth13" serif:id="tooth1" d="M34.245,67.247c-0.071,0.72 -0.214,2.159 -0.214,2.159l2.264,0.205c0,0 0.143,-1.44 0.214,-2.16" style="fill:url(#_Linear4);" />
<path id="tooth14" serif:id="tooth1" d="M41.587,67.978l-0.214,2.16l2.264,0.204l0.214,-2.16" style="fill:url(#_Linear5);" />
<path id="tooth15" serif:id="tooth1" d="M44.081,68.232l-0.214,2.16l2.264,0.204l0.215,-2.16" style="fill:url(#_Linear6);" />
</g>
<path id="topLip" d="M50.014,71.884l-4.548,-5.369l-5.1,-1.552l-5.972,0.564l-5.311,4.306l10.929,-1.478l10.002,3.529Z" style="fill:#ff97b3;" />
</g>
<g id="eyes">
<path id="rightSquint" d="M48.863,46.088c2.112,-0.824 6.061,-0.668 6.061,-0.668c0,0 4.696,1.657 6.894,3.477" />
<path id="leftSquint" d="M33.387,47.925l2.232,-2.74l3.493,-0.027" />
<path id="rightBrow" d="M48.863,42.343c4.26,-4.156 11.149,-3.943 14.264,1.56" style="fill:none;stroke:#000;stroke-width:1px;" />
<path id="leftBrow" d="M39.566,42.782c-1.724,-2.224 -6.018,-2.225 -6.41,-0.127" style="fill:none;stroke:#000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:bevel;" />
</g>
<g id="ear">
<path id="outerEar" d="M89.37,49.237l5.678,11.928l-13.942,3.631l8.264,-15.559Z" style="fill:#ff8047;fill-opacity:0.5;" />
<path id="innerEar" d="M89.529,52.434l1.883,8.011l-6.999,2.227l5.116,-10.238Z" />
</g>
<g id="nose">
<path id="nose1" serif:id="nose" d="M44.389,41.41l1.769,16.719l-7.075,0l5.306,-16.719Z" />
</g>
<g id="creases">
<path id="leftCrease" d="M41.569,50.03l-6.482,3.773l-4.51,7.606" style="fill:#ff8047;fill-opacity:0.5;" />
<path id="rightCrease" d="M45.579,49.915l6.842,5.835l6.098,10.609" style="fill:#ff8047;fill-opacity:0.5;" />
<path id="rightCheekCrease" d="M55.775,94.83l6.647,-15.086l-0.05,-14.405" style="fill:#ff8047;fill-opacity:0.5;" />
<path id="leftBrowCrease" d="M41.334,39.66c0,0 -0.578,-2.507 -1.25,-3.266c-0.671,-0.76 -2.777,-1.292 -2.777,-1.292" style="fill:#ff8047;fill-opacity:0.5;" />
<path id="rightBrowCrease" d="M47.816,39.168l1.81,-3.156l3.303,-0.27" style="fill:#ff8047;fill-opacity:0.5;" />
</g>
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0.00970838" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.66267,0.240229,-0.240924,2.42949,36.35,68.7052)">
<stop offset="0" style="stop-color:#fff;stop-opacity:1" />
<stop offset="1" style="stop-color:#fff;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0.00970838" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.66267,0.240229,-0.240924,2.42949,38.8447,68.9593)">
<stop offset="0" style="stop-color:#fff;stop-opacity:1" />
<stop offset="1" style="stop-color:#fff;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0.0090603" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.41665,0.218033,-0.234305,2.36274,31.7031,68.2403)">
<stop offset="0" style="stop-color:#fff;stop-opacity:1" />
<stop offset="1" style="stop-color:#fff;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0.00970838" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.66267,0.240229,-0.240924,2.42949,33.9256,68.4436)">
<stop offset="0" style="stop-color:#fff;stop-opacity:1" />
<stop offset="1" style="stop-color:#fff;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0.00970838" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.66267,0.240229,-0.240924,2.42949,41.2671,69.1748)">
<stop offset="0" style="stop-color:#fff;stop-opacity:1" />
<stop offset="1" style="stop-color:#fff;stop-opacity:1" />
</linearGradient>
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0.00970838" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.66267,0.240229,-0.240924,2.42949,43.7617,69.4288)">
<stop offset="0" style="stop-color:#fff;stop-opacity:1" />
<stop offset="1" style="stop-color:#fff;stop-opacity:1" />
</linearGradient>
</defs>
</svg></span>Bongos</h1>
<h2>Songs Requested, The Invisible Menace Album 1</h2>
<nav>
<ul>
<li><a class="wavyButton" href="index.html" aria-label="Bio">Bio</a></li>
<li><a class="wavyButton" href="johnnyBongosVideoAlbum1.html" aria-label="Video Albums">Video Albums</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="bongoContainer"></div>
<p class="story">John Ramspacher, aka Johnny Bongos, started playing the smaller macho drums in high school. Since then, with the addition of large hembra drums and other instruments, he has become one of the northeast's premier bongoseros. In addition to these solos, you can catch him playing with several musicians, including his good friend, singer, songwriter <a href="https://www.marcdouglas.com/" target="new">mark douglas berardo</a>. Songs are requests played during the COVID-19 Pandemic.</p>
<p class="bongoBottom">
<a class="wavyButton" href="johnnyBongosVideoAlbum1.html">watch him play</a>
</p>
<footer class="flow">
</footer>
</div>
</main>
</body>
</html>