Sage_Software/LoperBoys
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add business card and flyer designs matching website branding

Browse Source
This commit is contained in:
John Loper II
2026-05-28 07:20:03 -04:00
parent 728e044e43
commit 9923078dcf
6 changed files with 233 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
business-card-back.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 459 KiB

business-card-back.svg
+45
View File
@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 500" width="3.5in" height="2in">
<defs>
<linearGradient id="accentBar" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#F5A623;stop-opacity:1" />
<stop offset="100%" style="stop-color:#E8951E;stop-opacity:1" />
</linearGradient>
</defs>
<!-- White background -->
<rect width="850" height="500" fill="#FFFFFF" rx="20" ry="20"/>
<!-- Top accent bar -->
<path d="M0,0 L850,0 L850,6 Q850,0 830,0 L20,0 Q0,0 0,6 Z" fill="url(#accentBar)"/>
<rect x="0" y="0" width="850" height="12" fill="url(#accentBar)"/>
<!-- Brand name (smaller) -->
<text x="425" y="65" font-family="'Oswald', sans-serif" font-size="36" font-weight="700" fill="#1E3F8A" text-anchor="middle" letter-spacing="2">LOPERBOYS</text>
<!-- Divider -->
<line x1="250" y1="80" x2="600" y2="80" stroke="#2E5BBA" stroke-width="1.5"/>
<!-- Contact Info - centered -->
<!-- Phone -->
<text x="425" y="145" font-family="'Roboto', sans-serif" font-size="38" font-weight="700" fill="#2E5BBA" text-anchor="middle">220-200-4022</text>
<!-- Email -->
<text x="425" y="200" font-family="'Roboto', sans-serif" font-size="24" font-weight="400" fill="#4a4a4a" text-anchor="middle">contact@loperboys.com</text>
<!-- Website -->
<text x="425" y="250" font-family="'Roboto', sans-serif" font-size="28" font-weight="500" fill="#1A4D2E" text-anchor="middle">loperboys.com</text>
<!-- Service area -->
<text x="425" y="310" font-family="'Roboto', sans-serif" font-size="20" font-weight="400" fill="#666666" text-anchor="middle">Serving Warsaw, Coshocton &amp; Surrounding Areas</text>
<!-- Services summary -->
<rect x="125" y="340" width="600" height="1" fill="#e0e0e0"/>
<text x="425" y="375" font-family="'Roboto', sans-serif" font-size="16" font-weight="400" fill="#666666" text-anchor="middle">Lawn Care • Gutters • Windows • Snow Removal • More!</text>
<!-- Payment methods -->
<text x="425" y="420" font-family="'Roboto', sans-serif" font-size="16" font-weight="500" fill="#4a4a4a" text-anchor="middle">Cash • Venmo • Cash App</text>
<!-- Bottom accent -->
<rect x="0" y="480" width="850" height="20" fill="#2E5BBA"/>
<path d="M0,480 Q0,500 20,500 L830,500 Q850,500 850,480 Z" fill="#2E5BBA"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

business-card-front.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

business-card-front.svg
+47
View File
@@ -0,0 +1,47 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 500" width="3.5in" height="2in">
<defs>
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2E5BBA;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1E3F8A;stop-opacity:1" />
</linearGradient>
<linearGradient id="accentBar" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#F5A623;stop-opacity:1" />
<stop offset="100%" style="stop-color:#E8951E;stop-opacity:1" />
</linearGradient>
<style>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&amp;family=Roboto:wght@400;500&amp;display=swap');
</style>
</defs>
<!-- Background -->
<rect width="850" height="500" fill="url(#bgGrad)" rx="20" ry="20"/>
<!-- Decorative corner accent -->
<path d="M0,0 L200,0 L200,8 L8,8 L8,200 L0,200 Z" fill="#F5A623" opacity="0.3"/>
<!-- Subtle pattern - gear/leaf motif background -->
<circle cx="750" cy="420" r="120" fill="white" opacity="0.03"/>
<circle cx="780" cy="390" r="80" fill="white" opacity="0.03"/>
<!-- Logo icon - simple leaf/house combo -->
<g transform="translate(425, 155) scale(1.2)">
<!-- Leaf shape -->
<path d="M0,-50 C30,-50 55,-20 55,10 C55,40 25,60 0,75 C-25,60 -55,40 -55,10 C-55,-20 -30,-50 0,-50 Z" fill="#F5A623" opacity="0.9"/>
<!-- Leaf vein -->
<line x1="0" y1="-50" x2="0" y2="75" stroke="#1E3F8A" stroke-width="2" opacity="0.5"/>
<line x1="0" y1="-10" x2="25" y2="15" stroke="#1E3F8A" stroke-width="1.5" opacity="0.4"/>
<line x1="0" y1="15" x2="-25" y2="35" stroke="#1E3F8A" stroke-width="1.5" opacity="0.4"/>
</g>
<!-- Brand name -->
<text x="425" y="310" font-family="'Oswald', sans-serif" font-size="72" font-weight="700" fill="white" text-anchor="middle" letter-spacing="3">LOPERBOYS</text>
<!-- Tagline -->
<text x="425" y="355" font-family="'Roboto', sans-serif" font-size="22" font-weight="400" fill="rgba(255,255,255,0.85)" text-anchor="middle">Hard Work. Honest Prices. Local Service.</text>
<!-- Accent bar at bottom -->
<rect x="0" y="480" width="850" height="20" fill="url(#accentBar)" rx="0" ry="0"/>
<rect x="0" y="480" width="850" height="6" fill="url(#accentBar)" rx="0" ry="0"/>
<!-- Bottom corners rounded by parent rect -->
<path d="M0,480 Q0,500 20,500 L830,500 Q850,500 850,480 Z" fill="url(#accentBar)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

flyer.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 587 KiB

flyer.svg
+141
View File
@@ -0,0 +1,141 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 1100" width="8.5in" height="11in">
<defs>
<linearGradient id="headerGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#2E5BBA;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1E3F8A;stop-opacity:1" />
</linearGradient>
<linearGradient id="accentGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#F5A623;stop-opacity:1" />
<stop offset="100%" style="stop-color:#E8951E;stop-opacity:1" />
</linearGradient>
</defs>
<!-- ==================== BACKGROUND ==================== -->
<rect width="850" height="1100" fill="#FFFFFF"/>
<!-- ==================== HEADER ==================== -->
<rect x="0" y="0" width="850" height="200" fill="url(#headerGrad)"/>
<path d="M0,170 Q212.5,210 425,185 Q637.5,160 850,190 L850,200 L0,200 Z" fill="url(#headerGrad)"/>
<!-- Brand name -->
<text x="425" y="80" font-family="'Oswald', sans-serif" font-size="64" font-weight="700" fill="#FFFFFF" text-anchor="middle" letter-spacing="4">LOPERBOYS</text>
<!-- Tagline -->
<text x="425" y="125" font-family="'Roboto', sans-serif" font-size="24" fill="rgba(255,255,255,0.9)" text-anchor="middle">Hard Work. Honest Prices. Local Service.</text>
<!-- Phone badge -->
<rect x="275" y="145" width="300" height="45" rx="22.5" fill="#F5A623"/>
<text x="425" y="175" font-family="'Roboto', sans-serif" font-size="26" font-weight="700" fill="#FFFFFF" text-anchor="middle">📞 220-200-4022</text>
<!-- ==================== INTRO ==================== -->
<text x="425" y="240" font-family="'Roboto', sans-serif" font-size="18" fill="#4a4a4a" text-anchor="middle">Your friendly neighborhood service crew — serving Warsaw, Coshocton &amp; surrounding areas.</text>
<line x1="200" y1="260" x2="650" y2="260" stroke="#e0e0e0" stroke-width="1"/>
<!-- ==================== SERVICES ==================== -->
<text x="425" y="300" font-family="'Oswald', sans-serif" font-size="36" font-weight="700" fill="#1E3F8A" text-anchor="middle">OUR SERVICES</text>
<!-- Row 1: Lawn Mowing, Gutter Cleanout -->
<g transform="translate(50, 330)">
<rect width="365" height="130" rx="10" fill="#f8f9fa" stroke="#e0e0e0" stroke-width="1"/>
<text x="20" y="35" font-family="'Roboto', sans-serif" font-size="22" font-weight="700" fill="#1E3F8A">🌱 Lawn Mowing</text>
<text x="20" y="60" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Weekly / bi-weekly service</text>
<text x="20" y="78" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Edging &amp; trimming included</text>
<text x="20" y="96" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Leaf cleanup in fall</text>
<text x="20" y="120" font-family="'Roboto', sans-serif" font-size="20" font-weight="700" fill="#2E5BBA">Starting at $25/visit</text>
</g>
<g transform="translate(435, 330)">
<rect width="365" height="130" rx="10" fill="#f8f9fa" stroke="#e0e0e0" stroke-width="1"/>
<text x="20" y="35" font-family="'Roboto', sans-serif" font-size="22" font-weight="700" fill="#1E3F8A">🪜 Gutter Cleanout</text>
<text x="20" y="60" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">All debris removed</text>
<text x="20" y="78" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Downspout flushing</text>
<text x="20" y="96" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Spring &amp; fall service</text>
<text x="20" y="120" font-family="'Roboto', sans-serif" font-size="20" font-weight="700" fill="#2E5BBA">Starting at $75</text>
</g>
<!-- Row 2: Window Cleaning, Leaf Raking -->
<g transform="translate(50, 475)">
<rect width="365" height="130" rx="10" fill="#f8f9fa" stroke="#e0e0e0" stroke-width="1"/>
<text x="20" y="35" font-family="'Roboto', sans-serif" font-size="22" font-weight="700" fill="#1E3F8A">🪟 Window Cleaning</text>
<text x="20" y="60" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Interior &amp; exterior</text>
<text x="20" y="78" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Screens cleaned</text>
<text x="20" y="96" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Streak-free guaranteed</text>
<text x="20" y="120" font-family="'Roboto', sans-serif" font-size="20" font-weight="700" fill="#2E5BBA">Starting at $50</text>
</g>
<g transform="translate(435, 475)">
<rect width="365" height="130" rx="10" fill="#f8f9fa" stroke="#e0e0e0" stroke-width="1"/>
<text x="20" y="35" font-family="'Roboto', sans-serif" font-size="22" font-weight="700" fill="#1E3F8A">🍂 Leaf Raking</text>
<text x="20" y="60" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Thorough raking &amp; bagging</text>
<text x="20" y="78" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Debris removal</text>
<text x="20" y="96" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Multiple visits available</text>
<text x="20" y="120" font-family="'Roboto', sans-serif" font-size="20" font-weight="700" fill="#2E5BBA">Starting at $80</text>
</g>
<!-- Row 3: Snow Shoveling, Car Washing -->
<g transform="translate(50, 620)">
<rect width="365" height="130" rx="10" fill="#f8f9fa" stroke="#e0e0e0" stroke-width="1"/>
<text x="20" y="35" font-family="'Roboto', sans-serif" font-size="22" font-weight="700" fill="#1E3F8A">❄️ Snow Shoveling</text>
<text x="20" y="60" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">After every snowfall</text>
<text x="20" y="78" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Driveway &amp; walkway clearing</text>
<text x="20" y="96" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Seasonal contracts available</text>
<text x="20" y="120" font-family="'Roboto', sans-serif" font-size="20" font-weight="700" fill="#2E5BBA">Starting at $30/snowfall</text>
</g>
<g transform="translate(435, 620)">
<rect width="365" height="130" rx="10" fill="#f8f9fa" stroke="#e0e0e0" stroke-width="1"/>
<text x="20" y="35" font-family="'Roboto', sans-serif" font-size="22" font-weight="700" fill="#1E3F8A">🚗 Car Washing</text>
<text x="20" y="60" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Exterior hand wash</text>
<text x="20" y="78" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">Interior vacuum</text>
<text x="20" y="96" font-family="'Roboto', sans-serif" font-size="13" fill="#4a4a4a">We come to you!</text>
<text x="20" y="120" font-family="'Roboto', sans-serif" font-size="20" font-weight="700" fill="#2E5BBA">Starting at $35</text>
</g>
<!-- Row 4: Wood Stacking, Lawn Pickup, Porch Sweeping -->
<g transform="translate(50, 765)">
<rect width="235" height="110" rx="10" fill="#f8f9fa" stroke="#e0e0e0" stroke-width="1"/>
<text x="15" y="30" font-family="'Roboto', sans-serif" font-size="18" font-weight="700" fill="#1E3F8A">🪵 Wood Stacking</text>
<text x="15" y="55" font-family="'Roboto', sans-serif" font-size="12" fill="#4a4a4a">Neat, organized stacking</text>
<text x="15" y="73" font-family="'Roboto', sans-serif" font-size="12" fill="#4a4a4a">Proper airflow for drying</text>
<text x="15" y="95" font-family="'Roboto', sans-serif" font-size="16" font-weight="700" fill="#2E5BBA">From $60</text>
</g>
<g transform="translate(303, 765)">
<rect width="235" height="110" rx="10" fill="#f8f9fa" stroke="#e0e0e0" stroke-width="1"/>
<text x="15" y="30" font-family="'Roboto', sans-serif" font-size="18" font-weight="700" fill="#1E3F8A">🗑️ Lawn Pick-up</text>
<text x="15" y="55" font-family="'Roboto', sans-serif" font-size="12" fill="#4a4a4a">Branch &amp; debris removal</text>
<text x="15" y="73" font-family="'Roboto', sans-serif" font-size="12" fill="#4a4a4a">Weed and brush clearing</text>
<text x="15" y="95" font-family="'Roboto', sans-serif" font-size="16" font-weight="700" fill="#2E5BBA">From $50</text>
</g>
<g transform="translate(555, 765)">
<rect width="235" height="110" rx="10" fill="#f8f9fa" stroke="#e0e0e0" stroke-width="1"/>
<text x="15" y="30" font-family="'Roboto', sans-serif" font-size="18" font-weight="700" fill="#1E3F8A">🧹 Porch Sweeping</text>
<text x="15" y="55" font-family="'Roboto', sans-serif" font-size="12" fill="#4a4a4a">Thorough sweeping</text>
<text x="15" y="73" font-family="'Roboto', sans-serif" font-size="12" fill="#4a4a4a">Debris removal</text>
<text x="15" y="95" font-family="'Roboto', sans-serif" font-size="16" font-weight="700" fill="#2E5BBA">From $15</text>
</g>
<!-- ==================== WHY US ==================== -->
<text x="425" y="920" font-family="'Oswald', sans-serif" font-size="28" font-weight="700" fill="#1E3F8A" text-anchor="middle">WHY CHOOSE LOPERBOYS?</text>
<g transform="translate(100, 945)">
<text x="0" y="0" font-family="'Roboto', sans-serif" font-size="16" fill="#4a4a4a">✅ Local &amp; Reliable</text>
</g>
<g transform="translate(260, 945)">
<text x="0" y="0" font-family="'Roboto', sans-serif" font-size="16" fill="#4a4a4a">💰 Affordable Pricing</text>
</g>
<g transform="translate(470, 945)">
<text x="0" y="0" font-family="'Roboto', sans-serif" font-size="16" fill="#4a4a4a">🤝 Flexible Scheduling</text>
</g>
<!-- ==================== FOOTER ==================== -->
<rect x="0" y="980" width="850" height="120" fill="#1E3F8A"/>
<text x="425" y="1020" font-family="'Roboto', sans-serif" font-size="24" font-weight="700" fill="#FFFFFF" text-anchor="middle">Get a Free Quote Today!</text>
<text x="425" y="1055" font-family="'Roboto', sans-serif" font-size="20" fill="rgba(255,255,255,0.85)" text-anchor="middle">loperboys.com • contact@loperboys.com • Cash / Venmo / Cash App</text>
<!-- Accent strip at bottom -->
<rect x="0" y="1090" width="850" height="10" fill="#F5A623"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB