Gridcore

网站 · Features · 免费

在云境TS 中打开并复制 →

内容预览

Recreate ONE standalone HTML section that is a pixel-accurate clone of the “Code Quality — Features” landing grid. Output a single self-contained index.html with all CSS in a block and all JS inline. Do not add extra sections, nav, footer, hero, or a video. There is NO video on this page. GOAL A full-viewport beige editorial features grid: diagonal hatch bands top and bottom, a hairline-black framed strip, four company logos in a row, then a 2×2 feature card grid. Desktop composition is locked to a 4096×2300 design canvas and scales as one unit. Content (logos, illustrations, titles, copy, buttons) plays a one-shot entrance sequence; the frame, rules, and hatches never animate. ABSOLUTE RULES - Single file. No frameworks, no Tailwind, no CSS-in-JS. - Use the EXACT CloudFront PNG URLs below. Do not generate, replace, or invent images. Do not use , mp4, webm, or any CloudFront video URL. - Use Figtree as the display face (Google Sans Text / Google Sans are metric fallbacks only). - Reproduce the CSS custom properties, unit system (--u / --ux), breakpoints, keyframes, and JS entrance cleanup exactly. - Do not add hover effects except the specified button hover. No scroll-linked animation, no looping animation after load. FONTS Load Figtree as a variable font, weights 100–900, font-display: block. @font-face locally if available: assets/fonts/figtree-variable.woff2 Otherwise load from Google Fonts: https://fonts.googleapis.com/css2?family=Figtree:wght@100..900&display=block Stack

……(完整源码请在站内查看)