| Server IP : 216.92.14.13 / Your IP : 216.73.217.126 Web Server : Apache System : Linux vps4089.pairvps.com 5.15.0-190-generic #200-Ubuntu SMP Fri Aug 7 15:06:04 UTC 2026 x86_64 User : rmlac2fmr ( 1040637) PHP Version : 8.2.32 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /usr/home/rmlac2fmr/public_html/wendymillman.com/themitzvahmaker/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Comparison — The Mitzvah Maker</title>
<link rel="icon" type="image/svg+xml" href="assets/the-mitzvah-maker-mark.svg">
<link rel="icon" type="image/png" sizes="32x32" href="assets/the-mitzvah-maker-mark-32.png">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Manrope:wght@300;400;500&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Manrope', sans-serif;
background: #FEFAFB;
color: #3E3A36;
font-weight: 300;
line-height: 1.7;
padding: 80px 24px;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 880px; margin: 0 auto; }
.pre-eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.28em;
color: #A87930;
margin-bottom: 24px;
text-align: center;
}
h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(36px, 5vw, 56px);
line-height: 1.15;
text-align: center;
margin-bottom: 24px;
letter-spacing: -0.005em;
}
h1 em { font-style: italic; color: #A87930; font-weight: 400; }
.lede {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 18px;
color: #6C6C6C;
text-align: center;
max-width: 620px;
margin: 0 auto 80px;
font-weight: 300;
}
.option {
background: white;
border: 1px solid rgba(62, 58, 54, 0.08);
margin-bottom: 40px;
box-shadow: 0 30px 80px -50px rgba(62, 58, 54, 0.18);
}
.option-header {
padding: 28px 36px;
border-bottom: 1px solid rgba(62, 58, 54, 0.08);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.option-title {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 400;
letter-spacing: -0.005em;
}
.option-title em { font-style: italic; color: #A87930; }
.option-subtitle {
font-size: 12px;
color: #6C6C6C;
font-weight: 300;
}
.preview {
padding: 72px 48px;
display: flex;
align-items: center;
justify-content: center;
min-height: 240px;
background: #FEFAFB;
}
.preview img { max-width: 100%; height: auto; display: block; }
.preview.full img { max-width: 540px; }
.preview.wordmark img { max-width: 460px; }
.preview.dark {
background: #3E3A36;
border-top: 1px solid rgba(62, 58, 54, 0.08);
}
.swatch-row {
padding: 24px 36px;
background: #F8F2EC;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
color: #6C6C6C;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pill {
padding: 8px 16px;
border: 1px solid rgba(62, 58, 54, 0.15);
background: white;
font-family: 'Manrope', sans-serif;
font-size: 11px;
color: #3E3A36;
text-transform: uppercase;
letter-spacing: 0.16em;
}
.instructions {
margin-top: 80px;
padding: 48px 40px;
background: linear-gradient(135deg, #F2E5DE 0%, #FEFAFB 100%);
border: 1px solid rgba(193, 146, 65, 0.3);
border-radius: 0;
}
.instructions h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 28px;
margin-bottom: 20px;
letter-spacing: -0.005em;
}
.instructions h2 em { font-style: italic; color: #A87930; }
.instructions p {
font-size: 15px;
line-height: 1.75;
color: #3E3A36;
margin-bottom: 16px;
max-width: 620px;
}
.instructions code {
font-family: 'SF Mono', Menlo, Monaco, monospace;
font-size: 13px;
background: rgba(62, 58, 54, 0.08);
padding: 2px 8px;
border-radius: 2px;
color: #A87930;
}
.links {
margin-top: 60px;
text-align: center;
}
.links a {
display: inline-block;
margin: 0 8px;
padding: 12px 22px;
border: 1px solid #3E3A36;
color: #3E3A36;
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
transition: all 0.3s ease;
}
.links a:hover {
background: #3E3A36;
color: #FEFAFB;
}
</style>
</head>
<body>
<div class="wrap">
<div class="pre-eyebrow">For Wendy's Review</div>
<h1>The best of <em>both</em>.</h1>
<p class="lede">The site now uses a mixed approach: the full logo (with tagline) anchors the top of every page, and the cleaner wordmark signs off the footer. Visitors get the full brand introduction first, then a quieter, more confident close.</p>
<!-- ========== WHAT'S USED WHERE ========== -->
<div class="option">
<div class="option-header">
<div>
<div class="option-title">Top of page — <em>Full Logo</em></div>
<div class="option-subtitle">Used in the navigation bar and at the top of every page (the hero)</div>
</div>
<span class="pill">Default</span>
</div>
<div class="preview full">
<img src="assets/the-mitzvah-maker-logo-2400w.png" alt="Full logo on ivory">
</div>
<div class="swatch-row">
<span>The tagline establishes what The Mitzvah Maker does</span>
<span>Best for first impressions and SEO</span>
</div>
</div>
<div class="option">
<div class="option-header">
<div>
<div class="option-title">Footer — <em>Wordmark Only</em></div>
<div class="option-subtitle">A quieter close at the bottom of every page</div>
</div>
<span class="pill">Default</span>
</div>
<div class="preview wordmark dark">
<img src="assets/the-mitzvah-maker-logo-wordmark-2400w.png" alt="Wordmark only on taupe footer">
</div>
<div class="swatch-row">
<span>The brand has already been introduced — no need to repeat the tagline</span>
<span>Cleaner sign-off, more breathing room</span>
</div>
</div>
<!-- ========== ALTERNATE: ALL WORDMARK ========== -->
<div class="option" style="margin-top: 80px;">
<div class="option-header">
<div>
<div class="option-title">Alternate option — <em>Wordmark Everywhere</em></div>
<div class="option-subtitle">If Wendy prefers the cleaner look at the top too</div>
</div>
<span class="pill">Toggle Available</span>
</div>
<div class="preview wordmark">
<img src="assets/the-mitzvah-maker-logo-wordmark-2400w.png" alt="Wordmark only on ivory">
</div>
<div class="swatch-row">
<span>Maximum boutique feel — wordmark in nav, hero, and footer</span>
<span>Tagline disappears entirely</span>
</div>
</div>
<!-- ========== HOW TO SWITCH ========== -->
<div class="instructions">
<h2>To switch the top to <em>wordmark too</em>:</h2>
<p>Open any HTML file (index.html, services.html, etc.) and find the <code><html lang="en"></code> tag near the top. Change it to:</p>
<p><code><html lang="en" data-logo="wordmark"></code></p>
<p>That's it — the nav and hero now also show the wordmark version. The footer stays wordmark either way. To revert, just remove the <code>data-logo="wordmark"</code> attribute. Apply the change to all 5 pages so the site stays consistent.</p>
</div>
<div class="links">
<a href="index.html">View Homepage</a>
<a href="services.html">View Services</a>
<a href="how-it-works.html">View How It Works</a>
<a href="giving-back.html">View Giving Back</a>
<a href="contact.html">View Contact</a>
</div>
</div>
</body>
</html>