-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
186 lines (155 loc) · 8.23 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8N6PMSC654"></script>
<script async>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-8N6PMSC654');
</script>
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-MN5ZKZQ5');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="Generate SVG and PNG images of visual models depicting fraction operations." />
<meta name="keywords"
content="fraction visual generator, mixed number visuals, fraction clip art, fraction image, commercial use fraction clip art, fraction models, visualize mixed numbers, fraction picture, modeling fraction multiplication, modeling fraction division, math svg generator">
<style>
/* This empty style tag is here to solve cross-origin problem(?) */
</style>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/nav.css" />
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/modal.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<title>Fraction Visual Library</title>
<link rel="icon" type="image/x-icon" href="./assets/icons-logos/Favicon.svg">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MN5ZKZQ5" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav id="homepage-nav">
<img class="corner-logo" id="homepage-corner-logo" src="./assets/icons-logos/Favicon.svg"
alt="Visual Fraction Library Logo" />
<a class="nav-link" href="./pages/basic-frac.html">Simple Fractions</a>
<a class="nav-link" href="./pages/frac-mult.html">Fraction Multiplication</a>
<a class="nav-link" href="./pages/frac-div.html">
Fraction Division</a>
<a class="nav-link" href="./pages/faqs.html">
FAQ's</a>
<a class="nav-link" href="./pages/svg-vs-png.html">
SVG vs PNG</a>
</nav>
<nav class="side-nav" data-state="closed">
<img class="corner-logo" src="./assets/icons-logos/Favicon.svg" alt="Visual Fraction Library Logo" />
<button id="expand-collapse-nav" aria-label="Open or Close Nav Bar"> </button>
<a class="nav-link" href="./pages/basic-frac.html">Simple Fractions</a>
<a class="nav-link" href="./pages/frac-mult.html">Fraction Multiplication</a>
<a class="nav-link" href="./pages/frac-div.html"> Fraction Division</a>
<a class="nav-link" href="./pages/faqs.html"> FAQ's</a>
<a class="nav-link" href="./pages/svg-vs-png.html"> SVG vs PNG</a>
</nav>
</div>
<main>
<div id="cards-and-copy">
<h1 class="main-title">Visual Fraction Library</h1>
<h2> Use Visual Fraction Library to Generate Customizable Visual Models of...</h2>
<div class="card-container">
<div class="card">
<ul>
<li>Proper Fractions <img alt="3 sevenths circle model" src="./assets/example-svgs/3:7.svg"
width="70px"></img>
</li>
<li> Improper Fractions </li>
<img width="190px" alt="11 fourths circle model" src="./assets/example-svgs/11:4.svg"></img>
<li>or Mixed Numbers </li>
<img alt="4 and 2 fifths bar model" src="./assets/example-svgs/4and2:5.svg"></img>
</ul>
with Circles or Bars
</div>
<div id="mult-cards" class="card">
<ul>
<li> Group Models </li>
<img alt="model showing 2 groups of 5 and 3 fourths" src="./assets/example-svgs/groups.svg"></img>
<li> Area Models </li>
<img alt="area model showing 2 fifths by 4 sixths" src="./assets/example-svgs/area-model.svg"></img>
</ul>
</div>
<div class="card">
Fraction Division
<br>
<ul>
<li> when the dividend is larger </li>
<img
alt="circle model showing 2 and 3 fifths divided into groups of 2/5 where each group is shown in a different color"
src="./assets/example-svgs/dividend-larger.svg"></img>
<li>or when the divisor is larger </li>
<img
alt="bar model with 2 thirds shaded where each third is divided into 4 pieces and one is shaded a different color to show 2 thirds divided by 4."
src="./assets/example-svgs/divisor-larger.svg"></img>
</ul>
</div>
</div>
<h2> ...to make Slideshows, Worksheets, and More for Commercial or Classroom Use</h2>
</div>
</main>
<div id="extra-copy">
<h2><span>Generate Fraction Visuals</span><span> for All Your Classroom and Commercial Needs</span></h2>
<p><span>At </span><span>Visual Fraction Library</span><span>, we specialize in providing images of
</span><b><strong> visual models</strong></b><span> of fractions, mixed numbers, and division and multiplication
with fractions and mixed numbers. Whether you need to </span><b><strong>generate
fraction
images</strong></b><span> to use in your classroom or to make clip art for curriculum materials to sell
commercially, our extensive library has
you covered. Use our tools to create and customize </span><b><strong>visual models </strong></b><span> for any
problem that can be downloaded or copied as PNGs or SVGs.
<h2><span>Customizable Fraction Clip Art</span></h2>
<p><span>Our collection includes a variety of </span><b><strong>customizable fraction clip
art</strong></b><span>
that
can be tailored to meet your specific needs. You can customize the colors, opacity, and the size of the
image. If there are other customizations, you would like me to add, I'm happy to do so if there's interest.
Email me at<a class="bold-link"
href="mailto:visualfractionlibrary@gmail.com">visualfractionlibrary@gmail.com</a>to request new
features or models. Images can be
generated for almost any problem (Some numbers are difficult to represent nicely so I put a limit around
300).
<h2><span>Commercial Use Math Clip Art</span></h2>
<p><span>The </span><b><strong>Visual Fraction Library</strong></b><span> enables users to
</span><b><strong>generate
fraction visuals</strong></b><span> suitable for both personal and commercial use. Our
</span><b><strong>commercial use math clip art</strong></b><span> is ideal for educators, teachers pay
teachers sellers, curriculum developers, and even websites in need of customizable visual
representations of fractions and their operatations.</span></p>
</div>
<a class="email-link"
href="https://magic.beehiiv.com/v1/c785f6d7-0a69-4016-8ec0-f7d62097b17f?email={{email}}&utm_source=Homepage&utm_medium=Website">Get
Updates in Your Email</a>
<!--
<iframe id="subscribe-form" src="https://embeds.beehiiv.com/00190cb8-c18d-4c5d-bea5-8fc5bf7c958c"
data-test-id="beehiiv-embed" width="95%" height="250" frameborder="0" scrolling="no"></iframe> -->
<script src="./scripts/script.js"></script>
<script>
buttonFunctions();
</script>
<script src="./utilities.js"></script>
<!-- Logo Font is called Lovelo -->
</body>
</html>