trust-badges-in-header.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: Trust Badges in Header</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: 100px; 23 background: white; 24 border-bottom: 2px solid #e0e0e0; 25 display: flex; 26 align-items: center; 27 justify-content: space-between; 28 padding: 0 40px; 29 z-index: 1000; 30 } 31 32 .logo { 33 font-size: 24px; 34 font-weight: bold; 35 color: #2c3e50; 36 } 37 38 .trust-badges { 39 display: flex; 40 gap: 20px; 41 align-items: center; 42 } 43 44 .badge { 45 width: 80px; 46 height: 80px; 47 background: #3498db; 48 color: white; 49 display: flex; 50 align-items: center; 51 justify-content: center; 52 border-radius: 50%; 53 font-size: 12px; 54 text-align: center; 55 font-weight: bold; 56 } 57 58 main { 59 margin-top: 100px; 60 padding: 40px; 61 min-height: 800px; 62 } 63 64 h1 { 65 font-size: 36px; 66 margin-bottom: 20px; 67 } 68 p { 69 font-size: 18px; 70 line-height: 1.6; 71 } 72 </style> 73 </head> 74 <body> 75 <nav> 76 <div class="logo">Certified Services</div> 77 <div class="trust-badges"> 78 <img 79 src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='35' fill='%2327ae60'/%3E%3Ctext x='40' y='45' font-size='12' fill='white' text-anchor='middle'%3EBBB A+%3C/text%3E%3C/svg%3E" 80 alt="BBB Accredited" 81 width="80" 82 height="80" 83 /> 84 <img 85 src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='35' fill='%23e74c3c'/%3E%3Ctext x='40' y='45' font-size='10' fill='white' text-anchor='middle'%3ELicensed%3C/text%3E%3C/svg%3E" 86 alt="Licensed and Insured" 87 width="80" 88 height="80" 89 /> 90 <img 91 src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='35' fill='%23f39c12'/%3E%3Ctext x='40' y='45' font-size='10' fill='white' text-anchor='middle'%3ECertified%3C/text%3E%3C/svg%3E" 92 alt="Certified Professional" 93 width="80" 94 height="80" 95 /> 96 </div> 97 </nav> 98 99 <main> 100 <h1>Professional Certified Services</h1> 101 <p>Our navigation contains important trust badges that should be preserved for scoring.</p> 102 <p>These certifications demonstrate our credibility and expertise.</p> 103 </main> 104 </body> 105 </html>