Community CTA
Build a single-file HTML community CTA card section with the following exact specifications. Fonts & Setup
Import DM Sans from Google Fonts with weights 400, 500, 600, 700, 800 (opsz 9..40) Use a universal *, *::before, *::after reset: box-sizing: border-box, zero margin/padding Body: DM Sans font family, background #f0f2f7, text color #1e2240, flex column centered, min-height: 100vh, padding 24px 16px
Layout Structure
<section class="cta-section"> <div class="cta-wrapper"> <video class="cta-bg" autoplay muted loop playsinline> <source src="[VIDEO_URL]" type="video/mp4" /> </video> <div class="cta-content"> <h2>Subscribe to Our Community</h2> <p>Get exclusive access to cutting-edge tech insights, industry trends, and expert advice delivered straight to your inbox. Join our growing community today!</p> <div class="cta-form"> <input type="email" placeholder="Enter your email here" /> <button type="button">Join Now</button> </div> <div class="cta-members"> <div class="cta-avatars"> <span class="av1"></span> <span class="av2"></span> <span class="av3"></span> <span class="av4"></span> </div> <p>5,000+ happy members</p> </div> </div> </div> </section> Asset URLs Background video (set on <video class="cta-bg"> source, MP4 type): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260503_101827_abebfeec-f243-466b-b494-7f6814c0fbbf.mp4 Avatar images (CleanShot CDN, JPEG, used as background-image on .av1–.av4 respectively): av1: https://media.cleanshot.cloud/media/21620/CG4uIqBDEVKcxvtOnH2si7r1u5ne9QKdmAAj5Ym5.jpeg?Expires=1777825539&Signature=OF0EIwcA6IsXNVbGzc9-3KdoOBpMbtOrzarsjwKbOCM7bpPmnKhA18dnDGmy2sF0g7y2mcwmptgBLWmHJHESlMuQxzUqjuc2kqF75vztQIMdR1DYroQ53P~DB8tGIjNyp4-Wgc5bigDyODIrQMeJfzTlhaPjHIkoZNWZsKtJahOHMh6znpuNRcx-oOUvi1JsHe7ObRI27rz-~qDod8w3XsyzLvsSxdf6dlNdJ9Xo650r1tHtwMyh8QXBu037lYRKYD1qSB9-sA6J0a~Xq7ZxhVKady-BbhWk6sEY0XZO4UqAp1IWuPQESPWyAXJ3PmD5gep0mc7igPVcw5EqqvSBaA__&Key-Pair-Id=K269JMAT9ZF4GZ
av4: https://media.cleanshot.cloud/media/21620/xuWsFI56rqEUeYTmLVTHCoq224TH90PxcBKrsp4N.jpeg?Expires=1777825521&Signature=lLNMvpDUre8-UAsh1mRdGGLOnBaEGY4hcmQjpbCMkwTHK48cfU5OW5RVkmlcJffulFiUhEfB7qkPSFmIJ7vUcg9nU5qa8iHb6~RGpCHSqTbqK6c2LWy3unWA4e~UY3E9Q4tEQ7eewEbIlZscERJK7XtsoPgb9mde5TlLzjp90bTXbJwwSU5dXo6dhrvml5PMmJa8BDUcVIV2a8BCzkw8OzDBQUwWMhammdmGLBMNpRTJbnaNYM4pXgrcABcJ0DMBLkUjCUTtftKNmYM4O32SlRWbZvXY73H2qRUfL0wBwxM0c35gf372hh1tdkoEoixnneCW5TBs79wyS7xV3dF61Q__&Key-Pair-Id=K269JMAT9ZF4GZ CSS Specifications .cta-section: width 100%, padding 0 32px 48px .cta-wrapper: position relative, border-radius 28px, overflow hidden, border 1px solid rgba(13, 36, 72, 0.15), NO box-shadow, background #d8e5f2, min-height 220px, max-width 1150px, margin 0 auto .cta-bg (the video element): position absolute, inset: 0, width/height 100%, object-fit: cover, z-index 0, opacity 1 (no overlay) .cta-content: position relative, z-index 1, padding 40px, max-width 560px .cta-content h2: DM Sans, font-size 26px, weight 700, color #08063C, margin-bottom 12px, line-height 1.2, letter-spacing -0.015em. Text: "Subscribe to Our Community" .cta-content p: font-size 13.5px, weight 400, color #08063C, line-height 1.65, margin-bottom 28px, max-width 400px .cta-form: flex with gap 10px, align-items center, flex-wrap wrap, max-width 80% .cta-form input: flex 1, min-width 200px, padding 13px 22px, border-radius 50px, border 1px solid rgba(195, 210, 235, 0.75), background rgba(255, 255, 255, 0.96), DM Sans 13px, color #08063C, outline none, box-shadow 0 1px 5px rgba(100, 110, 180, 0.07), transitions on box-shadow and border-color (0.2s)
Placeholder: color #b2bbd4, weight 400 Focus: border-color rgba(130, 155, 220, 0.65), box-shadow 0 1px 10px rgba(100, 120, 210, 0.16)
.cta-form button: padding 13px 24px, border-radius 50px, no border, background #f8f9fc, color #08063C, DM Sans 13px weight 600, cursor pointer, white-space nowrap, letter-spacing 0.01em, box-shadow 0 2px 10px rgba(100, 110, 180, 0.15), transitions on background, transform (0.15s), and box-shadow (0.2s)
Hover: background #eef0f5, transform: translateY(-1px), box-shadow 0 4px 16px rgba(100, 110, 180, 0.25) Active: transform: translateY(0) Text: "Join Now"
.cta-members: flex, align-items center, gap 10px, margin-top 20px .cta-avatars: flex container .cta-avatars span: inline-block, 32×32px, border-radius 50%, no border, margin-left -9px (overlap), overflow hidden, background-size cover, background-position center top, box-shadow 0 1px 4px rgba(0, 0, 0, 0.12), flex-shrink 0
First child: margin-left 0 Apply each avatar URL as background-image to .av1, .av2, .av3, .av4
.cta-members p: font-size 12.5px, weight 600, color #08063C, no margin. Text: "5,000+ happy members" Mobile breakpoint (max-width: 600px)
.cta-content: padding 24px, max-width 100% h2: font-size 19px p: font-size 11.5px, max-width 100%, margin-bottom 16px .cta-form: flex-direction column, gap 8px, max-width 100% Form input and button: width 100%, text-align center .cta-members: flex-wrap wrap, gap 8px Avatars: 28×28px, margin-left -7px
Animations / Transitions
Input: smooth 0.2s transition on border-color and box-shadow when focused Button: 0.2s background, 0.15s transform, 0.2s box-shadow — lifts 1px on hover, returns on active Background video: autoplay, muted, loop, playsinline (no JS animations)
No additional overlays, gradients, or drop shadows on the card itself. The video plays at full opacity directly behind the content.