sticky-nav-with-cta.html
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Test: Sticky Nav with CTA</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 box-sizing: border-box; 12 } 13 body { 14 font-family: Arial, sans-serif; 15 } 16 17 nav { 18 position: fixed; 19 top: 0; 20 left: 0; 21 right: 0; 22 height: 80px; 23 background: #2c3e50; 24 color: white; 25 display: flex; 26 align-items: center; 27 justify-content: space-between; 28 padding: 0 20px; 29 z-index: 1000; 30 } 31 32 .logo { 33 font-size: 24px; 34 font-weight: bold; 35 } 36 37 .cta-button { 38 background: #e74c3c; 39 color: white; 40 padding: 12px 24px; 41 border: none; 42 border-radius: 4px; 43 font-size: 16px; 44 cursor: pointer; 45 } 46 47 main { 48 margin-top: 80px; 49 padding: 40px; 50 min-height: 800px; 51 } 52 53 h1 { 54 font-size: 36px; 55 margin-bottom: 20px; 56 } 57 p { 58 font-size: 18px; 59 line-height: 1.6; 60 } 61 </style> 62 </head> 63 <body> 64 <nav> 65 <div class="logo">Plumbing Pro</div> 66 <a href="tel:+15551234567"> 67 <button class="cta-button">Call Now: (555) 123-4567</button> 68 </a> 69 </nav> 70 71 <main> 72 <h1>Emergency Plumbing Services</h1> 73 <p>We provide 24/7 emergency plumbing services to residential and commercial clients.</p> 74 <p>Our team of licensed professionals is ready to help with any plumbing issue.</p> 75 </main> 76 </body> 77 </html>