" <div class="info-icon alt">"
Bootstrap 4.1.1 Snippet by greensolar

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GreenSolar Contact Card</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <style> :root{ --sand:#F6F1E7; --ink:#1C2321; --sun:#E8A33D; --sun-soft:#F4C878; --teal:#16404D; } *{box-sizing:border-box; margin:0; padding:0;} body{ font-family:'Inter', sans-serif; background:#e7e1d2; display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; } .card{ position:relative; width:520px; max-width:100%; background:var(--ink); color:var(--sand); padding:52px 44px 40px; overflow:hidden; border-radius:4px; } .sun-disc{ position:absolute; top:-120px; right:-100px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--sun-soft), var(--sun) 60%, transparent 72%); opacity:0.5; } .rel{position:relative; z-index:1;} .logo{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.3rem; display:flex; align-items:center; gap:8px; margin-bottom:34px; } .logo-dot{ width:10px; height:10px; border-radius:50%; background:var(--sun); display:inline-block; } .desc{ font-size:1.02rem; line-height:1.65; color:#e4e6e4; max-width:420px; margin-bottom:36px; } .divider{ width:100%; height:1px; background:rgba(246,241,231,0.15); margin-bottom:28px; } .info-row{ display:flex; gap:36px; flex-wrap:wrap; } .info-item{ display:flex; align-items:flex-start; gap:12px; } .info-icon{ width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--sun); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:0.95rem; } .info-icon.alt{ background:transparent; border:1.5px solid var(--sun); color:var(--sun); } .info-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:#9aa39d; margin-bottom:2px; } .info-value{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.02rem; color:var(--sand); } </style> </head> <body> <div class="card"> <div class="sun-disc" aria-hidden="true"></div> <div class="rel"> <div class="logo"><span class="logo-dot"></span>GreenSolar</div> <p class="desc">GreenSolar offers residential solar installation Karachi with panels, inverter and battery backup to reduce electricity bills and ensure reliable power. Our certified team handles survey, design, installation and after sales support for homes across Karachi.</p> <div class="divider"></div> <div class="info-row"> <div class="info-item"> <div class="info-icon">☎</div> <div> <div class="info-label">Phone</div> <div class="info-value">0092 318 2881147</div> </div> </div> <div> <div class="info-label">Website</div> <div class="info-value">greensolarpakistan.com</div> </div> </div> </div> </div> </div> </body> </html>

Questions / Comments: