Skip to content

Commit dbd2946

Browse files
myogpatternsmyogpatterns
committed
frame bags page and index link
1 parent 16adabc commit dbd2946

File tree

11 files changed

+204
-1
lines changed

11 files changed

+204
-1
lines changed

‎framebags.html‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<!DOCTYPE HTML>
2+
3+
<html>
4+
<head>
5+
<!-- Google Tag Manager -->
6+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
7+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
8+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
9+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
10+
})(window,document,'script','dataLayer','GTM-NC2Q2HQ');</script>
11+
<!-- End Google Tag Manager -->
12+
13+
<title>Learn MYOG Frame Bags</title>
14+
<meta charset="utf-8" />
15+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
16+
<meta name="description" content="Learn to Make Your Own Gear (MYOG). Sewing patterns and tutorials for outdoor adventurers."></head>
17+
<link rel="stylesheet" href="assets/css/main.css" />
18+
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
19+
</head>
20+
<body class="is-preload">
21+
22+
<!-- Google Tag Manager (noscript) -->
23+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NC2Q2HQ"
24+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
25+
<!-- End Google Tag Manager (noscript) -->
26+
27+
<!-- Wrapper -->
28+
<div id="wrapper" class="divided">
29+
30+
<!-- Banner -->
31+
<section class="banner style4 image-position-right onload-content-fade-right">
32+
<div class="content">
33+
<a href="index.html" class="logo">Learn MYOG</a>
34+
</div>
35+
<div class="image">
36+
<img src="images/banner4.jpg" alt="vintage sewing machine" /> <!-- Photo by Jake Yoon on Unsplash -->
37+
</div>
38+
</section>
39+
40+
41+
<!-- Build Article -->
42+
<div id="main">
43+
<section class="wrapper style1 align-center">
44+
<div class="inner">
45+
<h2>Frame Bags</h2>
46+
<h3>Three DIY Bikepacking Bags</h3>
47+
<div class="video-container">
48+
<iframe width="853" height="480" src="https://www.youtube.com/embed/e3A6f-WRrbc?rel=0"
49+
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
50+
allowfullscreen></iframe>
51+
</div>
52+
</div>
53+
54+
<!-- Gallery -->
55+
56+
<div class="gallery style1 small">
57+
<article>
58+
<a href="images/framebags/framebags.jpg" class="image">
59+
<img src="images/framebags/thumbs/framebags.jpg" title="Three bags included. Half Frame Bag and two Top Tube Bags." />
60+
</a>
61+
</article>
62+
<article>
63+
<a href="images/framebags/bike.jpg" class="image">
64+
<img src="images/framebags/thumbs/bike.jpg" title="MYOG kit shaping up. Frame bags with matching pair of stem bags." />
65+
</a>
66+
</article>
67+
<article>
68+
<a href="images/framebags/hero.jpg" class="image">
69+
<img src="images/framebags/thumbs/hero.jpg" title="Front and rear top tube bags for snacks, tools, and smalls." />
70+
</a>
71+
</article>
72+
<article>
73+
<a href="images/framebags/adjustments.jpg" class="image">
74+
<img src="images/framebags/thumbs/adjustments.jpg" title="Visual instructions for customizing to fit different bike geometries." />
75+
</a>
76+
</article>
77+
<!-- <article>
78+
<a href="images/bpStemBag/cb_ombeen.jpg" class="image">
79+
<img src="images/bpStemBag/cb_ombeen.jpg" title="New sewist showing how to reuse and recycle. u/ombeen." />
80+
</a>
81+
<div class="overlay">Community Build, u/ombeen</div>
82+
</article> -->
83+
</div>
84+
85+
</section>
86+
87+
88+
89+
<!-- materials -->
90+
<section id="materials" class="wrapper style1 align-center">
91+
<div class="inner">
92+
<header>
93+
<h2></h2>
94+
<p>Gearing up for a bikepacking trip shouldn't cost an arm and a leg.
95+
This pattern set includes a Half Frame Bag and two distinct Top Tube bags.
96+
Make your own bikepacking frame bags with less than a yard of X-Pac!
97+
</p>
98+
</header>
99+
100+
<div class="index align-left">
101+
<section>
102+
<header><h3>Features</h3></header>
103+
<div class="content">
104+
<h4>Bag Features</h4>
105+
<ul>
106+
<li>Confident beginner-friendly patterns for three bikepacking bags with no special tools.</li>
107+
<li>Large front Top Tube bag fits an iPhone 12 Pro with ease along with tons of snacks.</li>
108+
<li>Rear Top Tube bag carries tools, pump, and an emergency spare.</li>
109+
<li>Half Frame Bag engulfs gear like a jacket, wallet, keys, lunch, stove, and smalls.</li>
110+
<li>Foam-sandwiched panels provide rigid bags that free-stand and protect your frame.</li>
111+
<li>Lined interiors with bright fabric for visibility and easy cleaning.</li>
112+
<li>All three bags are constructed in similar fashion for consistency and minimal fabric.</li>
113+
</ul>
114+
</div>
115+
</section>
116+
<section>
117+
<header><h3>Pattern</h3></header>
118+
<div class="content">
119+
<h4>Downloadable PDF sewing pattern includes</h4>
120+
<ul>
121+
<li>Print at home pattern suitable for both Letter and A4 sized paper</li>
122+
<li>Detailed step-by-step sewing instructions</li>
123+
<li>Visual instructions for modifying Half Frame Bag to custom bike geometries</li>
124+
<li>Perfectly sized foam and liner patterns for rigid, free-standing bags</li>
125+
<li>Complete list of materials for a budget build</li>
126+
<li>Video sewalong showing step-by-step construction</li>
127+
</ul>
128+
129+
<a href="https://payhip.com/b/DfIm" class="button primary icon solid fa-credit-card" style="font-size: 100%">$15</a>
130+
<p>Valid email address required for download link</p>
131+
132+
</div>
133+
</section>
134+
<section>
135+
<header>
136+
<h3>Materials</h3>
137+
</header>
138+
<div class="content">
139+
<p>Learn more about technical fabrics, recommendations, and trusted vendors in our new <a href="fabrics.html">Fabrics Guide</a></p>
140+
<ul>
141+
<li>Less than a yard of sturdy body fabric such as Cordura 500d or X-PAC</li>
142+
<li>Lightweight lining fabric. Bright and waterproof. Silnylon or PU Coated Ripstop</li>
143+
<li>1/8" (3mm) EVA foam. Grab the 13"x39" sheets available on <a href="https://www.amazon.com/dp/B07BL1R9R7?ref=nb_sb_ss_w_as-ypp-rep_ypp_rep_k2_1_11&crid=104FNZPFS7SXT&sprefix=3mm+eva+foa">Amazon</a>.</li>
144+
<li>YKK #5 coil zipper or Uretek for added water-resistance</li>
145+
<li>3/4" (20mm) sewable hook and loop (non-adhesive velcro)</li>
146+
<li>Optional: paracord for frame bag lacing instead of velcro</li>
147+
</ul>
148+
</div>
149+
</section>
150+
</div>
151+
152+
</div>
153+
</section>
154+
155+
</div>
156+
157+
<!-- Footer -->
158+
<footer class="wrapper style1 align-center">
159+
<div class="inner">
160+
<h3>Share Your Completed Project!</h3>
161+
<p>We'd love to add you project to our Community Build gallery above.</br>
162+
👏 Post to r/MYOG or tag #LearnMYOG on Instagram! 🔥</p>
163+
164+
<a href="index.html">Home</a> &emsp; <a href="fabrics.html">Fabrics</a> &emsp; <a href="about.html">About</a><br><br>
165+
<ul class="icons">
166+
<li><a href="https://www.reddit.com/u/g8trtim/" class="icon brands style1 fa-reddit fa-2x" target="_blank"><span class="label">Reddit</span></a></li>
167+
<li><a href="https://www.instagram.com/learnmyog/" class="icon brands style1 fa-instagram fa-2x" target="_blank"><span class="label">Instagram</span></a></li>
168+
<li><a href="https://www.youtube.com/c/LearnMYOG" class="icon brands style1 fa-youtube fa-2x" target="_blank"><span class="label">Instagram</span></a></li>
169+
<li><a href="https://github.com/myogpatterns/myogpatterns.github.io" class="icon brands style1 fa-github fa-2x" target="_blank"><span class="label">Github</span></a></li>
170+
</ul>
171+
<p>&copy; 2021 LearnMYOG.com</p>
172+
</div>
173+
174+
</footer>
175+
176+
</div>
177+
178+
<!-- HTML Template Scripts -->
179+
<script src="assets/js/jquery.min.js"></script>
180+
<script src="assets/js/jquery.scrollex.min.js"></script>
181+
<script src="assets/js/jquery.scrolly.min.js"></script>
182+
<script src="assets/js/jquery.poptrox.min.js"></script>
183+
<script src="assets/js/browser.min.js"></script>
184+
<script src="assets/js/breakpoints.min.js"></script>
185+
<script src="assets/js/util.js"></script>
186+
<script src="assets/js/main.js"></script>
187+
<!-- MYOG Pattern Scripts -->
188+
189+
190+
</body>
191+
192+
<!--
193+
Story by HTML5 UP
194+
html5up.net | @ajlkn
195+
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
196+
-->
197+
</html>

‎images/framebags/adjustments.jpg‎

127 KB
Loading

‎images/framebags/bike.jpg‎

110 KB
Loading

‎images/framebags/framebags.jpg‎

78.8 KB
Loading

‎images/framebags/hero.jpg‎

154 KB
Loading

‎images/framebags/thumbs/adjustments.jpg‎

63.5 KB
Loading

‎images/framebags/thumbs/bike.jpg‎

64.2 KB
Loading

‎images/framebags/thumbs/framebags.jpg‎

14.4 KB
Loading

‎images/framebags/thumbs/hero.jpg‎

71.2 KB
Loading

‎images/index/framebags.jpg‎

22.3 KB
Loading

0 commit comments

Comments
 (0)