文件操作 - index.html

文件: E:\HostingSpaces\kimblycr\kimblygraphics.in\wwwroot\index.html

编辑文件内容

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kimbly Graphics — visual design, print design, video editing and brand experiences in Gurgaon." />
    <title>Kimbly Graphics — Make Every Impression Count</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap" rel="stylesheet" />
    <style>
      :root { --ink:#07194c; --blue:#1249d4; --green:#26841c; --lime:#c4ff33; --paper:#f7f7f2; --muted:#63708a; --line:rgba(7,25,76,.16); }
      *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif} a{text-decoration:none;color:inherit}
      .wrap{width:min(1180px,calc(100% - 48px));margin:auto}.eyebrow{font:500 11px/1.2 "DM Mono",monospace;letter-spacing:.11em;text-transform:uppercase}.button{display:inline-flex;align-items:center;gap:18px;padding:15px 18px;border-radius:3px;background:var(--blue);color:#fff;font-weight:800;font-size:14px;transition:.2s}.button:hover{background:#0b37aa;transform:translateY(-2px)}.arrow{font-size:20px;line-height:0}
      header{height:88px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.brand img{display:block;width:216px;height:auto}.nav{display:flex;gap:30px;align-items:center;font-size:13px;font-weight:700}.nav a:not(.button){color:#26365e}.nav a:not(.button):hover{color:var(--blue)}.menu{display:none;border:0;background:transparent;font-size:25px;color:var(--ink)}
      .hero{padding:63px 0 82px;position:relative;overflow:hidden}.hero:before{content:"";width:510px;height:510px;background:var(--lime);border-radius:50%;position:absolute;right:-164px;top:50px;z-index:-1}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:60px}.hero h1{font-size:clamp(52px,7vw,94px);line-height:.97;letter-spacing:-.072em;margin:20px 0 27px;max-width:720px}.hero h1 em{font-family:"Playfair Display",serif;font-weight:600;color:var(--green);letter-spacing:-.055em}.hero p{max-width:530px;color:#465471;line-height:1.75;font-size:16px;margin:0 0 32px}.hero-visual{height:448px;position:relative}.poster{height:387px;width:min(100%,395px);margin-left:auto;padding:29px;background:var(--ink);color:#fff;position:relative;overflow:hidden;box-shadow:17px 17px 0 var(--green)}.poster:after{content:"";position:absolute;width:380px;height:380px;right:-145px;bottom:-184px;border-radius:50%;background:var(--blue)}.poster .eyebrow{color:var(--lime);position:relative;z-index:1}.poster h2{position:relative;z-index:1;font-size:51px;line-height:.96;letter-spacing:-.07em;margin:58px 0 0}.poster h2 span{color:var(--lime)}.orbit{position:absolute;z-index:2;right:-13px;top:77px;width:155px;height:155px;border:1px solid var(--lime);border-radius:50%;display:grid;place-items:center;color:var(--lime);font:500 10px "DM Mono",monospace;letter-spacing:.13em;transform:rotate(-16deg)}.orbit:before{content:"✦";font-size:48px;position:absolute;transform:rotate(16deg)}.orbit span{position:absolute;bottom:23px}.tag{position:absolute;left:0;bottom:0;background:var(--lime);padding:18px 22px;font:500 11px "DM Mono",monospace;letter-spacing:.08em;color:var(--ink)}
      .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:18px 0;background:#fff}.ticker-inner{font:700 17px "DM Mono",monospace;color:var(--blue);letter-spacing:-.04em}.ticker b{color:var(--green);padding:0 21px;font-size:24px;vertical-align:-2px}
      section{padding:104px 0}.intro{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;border-bottom:1px solid var(--line)}.section-title{font-size:clamp(36px,4.5vw,57px);line-height:1.04;letter-spacing:-.062em;margin:15px 0 0}.intro-copy{font-size:20px;line-height:1.58;letter-spacing:-.025em;max-width:640px}.intro-copy p{margin:0 0 28px}.text-link{font-weight:800;color:var(--green);border-bottom:2px solid var(--green);padding-bottom:4px}
      .services{background:var(--ink);color:#fff}.services .eyebrow{color:var(--lime)}.services .section-title{max-width:650px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:58px;border-top:1px solid rgba(255,255,255,.27);border-left:1px solid rgba(255,255,255,.27)}.service{min-height:212px;padding:26px;border-right:1px solid rgba(255,255,255,.27);border-bottom:1px solid rgba(255,255,255,.27);position:relative;transition:.22s}.service:hover{background:var(--blue)}.service-num{font:500 11px "DM Mono",monospace;color:var(--lime)}.service h3{font-size:21px;line-height:1.18;letter-spacing:-.04em;margin:47px 0 0;max-width:220px}.service .arrow{position:absolute;right:22px;bottom:19px;color:var(--lime)}
      .work-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.work-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;grid-auto-rows:260px;gap:16px;margin-top:48px}.work{padding:24px;position:relative;overflow:hidden;display:flex;align-items:flex-end}.work:first-child{grid-row:span 2;background:#d1ebed}.work:nth-child(2){background:#f5bf2e}.work:nth-child(3){background:#f3dce4}.work:nth-child(4){background:#b5d931}.work:nth-child(5){background:#1b54cf;color:white;grid-column:span 2}.work:before{content:"";position:absolute;border:2px solid currentColor;border-radius:50%;opacity:.87}.work:nth-child(1):before{width:310px;height:310px;top:-89px;right:-82px}.work:nth-child(2):before{width:170px;height:170px;top:25px;left:calc(50% - 85px);box-shadow:22px 0 0 -7px #f5bf2e,22px 0 0 -4px currentColor}.work:nth-child(3):before{width:310px;height:80px;border-radius:50%;top:42px;left:-34px;transform:rotate(-36deg)}.work:nth-child(4):before{width:260px;height:260px;top:-104px;left:20px;border-radius:2px;transform:rotate(45deg)}.work:nth-child(5):before{width:420px;height:420px;right:-75px;bottom:-263px;border-color:var(--lime)}.work-title{position:relative;z-index:1;font-size:20px;font-weight:800;letter-spacing:-.04em}.work-type{position:absolute;top:22px;left:24px;font:500 10px "DM Mono",monospace;letter-spacing:.09em;text-transform:uppercase}
      .process{background:#e6edff}.process-grid{margin-top:55px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}.step{padding:0 27px;border-left:1px solid var(--line);min-height:214px}.step:first-child{padding-left:0;border-left:0}.step span{font:500 12px "DM Mono",monospace;color:var(--blue)}.step h3{font-size:21px;letter-spacing:-.04em;margin:35px 0 12px}.step p{font-size:13px;line-height:1.65;color:#4d5b78;margin:0;max-width:210px}
      .cta{padding:82px 0;background:var(--green);color:#fff;overflow:hidden;position:relative}.cta:after{content:"K";font:bold 410px/1 Manrope,sans-serif;position:absolute;right:-35px;top:-71px;color:rgba(255,255,255,.09)}.cta .wrap{position:relative;z-index:1}.cta h2{font-size:clamp(43px,6vw,78px);line-height:.99;letter-spacing:-.07em;max-width:770px;margin:16px 0 30px}.cta p{font-size:16px;max-width:500px;line-height:1.65}.cta .button{background:var(--lime);color:var(--ink);margin-top:13px}.cta .button:hover{background:#ddff79}
      footer{padding:42px 0 30px;background:var(--ink);color:#fff}.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}.foot-brand{font-size:26px;font-weight:800;letter-spacing:-.05em;margin:12px 0}.foot-title{font:500 10px "DM Mono",monospace;letter-spacing:.11em;color:var(--lime);text-transform:uppercase;margin-bottom:13px}.foot-text{font-size:14px;line-height:1.7;color:#d7dded;max-width:245px}.socials{display:flex;gap:9px;margin-top:19px}.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.42);border-radius:50%;display:grid;place-items:center;transition:.2s}.socials a:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}.socials svg{width:15px;height:15px;fill:currentColor}.foot-bottom{border-top:1px solid rgba(255,255,255,.24);margin-top:37px;padding-top:17px;display:flex;justify-content:space-between;color:#aeb8d3;font:400 10px "DM Mono",monospace;letter-spacing:.04em}
      @media(max-width:780px){.wrap{width:min(100% - 32px,620px)}header{height:74px}.brand img{width:175px}.nav{display:none}.menu{display:block}.hero{padding:42px 0 62px}.hero-grid,.intro{grid-template-columns:1fr;gap:34px}.hero h1{font-size:clamp(48px,14vw,70px)}.hero-visual{height:336px}.poster{height:313px;width:calc(100% - 17px);padding:23px}.poster h2{font-size:42px;margin-top:43px}.orbit{transform:scale(.76) rotate(-16deg);transform-origin:top right}.intro{gap:30px}section{padding:74px 0}.intro-copy{font-size:18px}.service-grid{grid-template-columns:repeat(2,1fr)}.service{min-height:177px;padding:20px}.service h3{font-size:18px;margin-top:37px}.work-head{align-items:start;flex-direction:column}.work-grid{grid-template-columns:1fr 1fr;grid-auto-rows:210px}.work:first-child{grid-row:span 2}.work:nth-child(5){grid-column:span 2}.process-grid{grid-template-columns:1fr 1fr;gap:37px 0}.step{min-height:auto;padding:0 18px}.step:nth-child(3){padding-left:0;border-left:0}.foot-grid{grid-template-columns:1fr 1fr;gap:35px}.foot-grid>div:first-child{grid-column:span 2}.cta{padding:68px 0}.cta:after{font-size:270px;right:-30px;top:25px}.foot-bottom{font-size:9px;gap:10px}}
      @media(max-width:430px){.service-grid{grid-template-columns:1fr}.work-grid{grid-template-columns:1fr 1fr;gap:10px}.work{padding:16px}.work-type{top:14px;left:16px;font-size:8px}.work-title{font-size:16px}.process-grid{display:block}.step{border-left:0;border-top:1px solid var(--line);padding:21px 0}.step:first-child{border-top:0;padding-top:0}.foot-grid{grid-template-columns:1fr}.foot-grid>div:first-child{grid-column:auto}.foot-bottom{display:block;line-height:2}.hero p{font-size:15px}}
    </style>
  </head>
  <body>
    <div class="wrap"><header><a class="brand" href="#top"><img src="images/logo.png" alt="Kimbly Graphics" /></a><nav class="nav"><a href="#services">Services</a><a href="portfolio.html">Portfolio</a><a href="#contact" class="button">Start a project <span class="arrow">↗</span></a></nav><button class="menu" aria-label="Open menu">☰</button></header></div>
    <main id="top">
      <section class="hero"><div class="wrap hero-grid"><div><div class="eyebrow">Creative studio · Gurgaon, India</div><h1>Ideas that<br />make an <em>impact.</em></h1><p>We turn ambitious ideas into visuals people remember — from magnetic brands and print to motion that keeps eyes on the screen.</p><a href="#contact" class="button">Let’s create something <span class="arrow">↗</span></a></div><div class="hero-visual"><div class="poster"><div class="eyebrow">Make it matter</div><h2>DESIGN<br />WITH <span>EDGE.</span></h2><div class="orbit"><span>SHAPE · STORY · SPARK</span></div></div><div class="tag">KIMBLY GRAPHICS / 01</div></div></div></section>
      <div class="ticker"><div class="ticker-inner">VIDEO EDITING <b>✦</b> BRAND IDENTITY <b>✦</b> PRINT DESIGN <b>✦</b> AI VIDEO CREATION <b>✦</b> VISUAL STORYTELLING <b>✦</b> VIDEO EDITING <b>✦</b> BRAND IDENTITY <b>✦</b></div></div>
      <section class="wrap intro"><div><div class="eyebrow">What we do</div><h2 class="section-title">Visual work,<br />built to move.</h2></div><div class="intro-copy"><p>From a first spark to the finished piece, Kimbly Graphics brings clarity, character and craft to every touchpoint of your brand.</p><p>Whether it lives on a screen, a shelf, a wall or a tradeshow floor, we design it to leave a mark.</p><a href="#services" class="text-link">Explore our services →</a></div></section>
      <section class="services" id="services"><div class="wrap"><div class="eyebrow">Our expertise</div><h2 class="section-title">Big ideas.<br />Every format.</h2><div class="service-grid"><div class="service"><div class="service-num">01</div><h3>Video Editing & Motion</h3><div class="arrow">↗</div></div><div class="service"><div class="service-num">02</div><h3>AI Video Creation</h3><div class="arrow">↗</div></div><div class="service"><div class="service-num">03</div><h3>Art & Illustration</h3><div class="arrow">↗</div></div><div class="service"><div class="service-num">04</div><h3>Logo & Brand Identity</h3><div class="arrow">↗</div></div><div class="service"><div class="service-num">05</div><h3>Social Media Graphics</h3><div class="arrow">↗</div></div><div class="service"><div class="service-num">06</div><h3>Brochures, Flyers & Posters</h3><div class="arrow">↗</div></div><div class="service"><div class="service-num">07</div><h3>Banners & Tradeshow Displays</h3><div class="arrow">↗</div></div><div class="service"><div class="service-num">08</div><h3>Packaging & Cover Design</h3><div class="arrow">↗</div></div><div class="service"><div class="service-num">09</div><h3>Visual & Print Design</h3><div class="arrow">↗</div></div></div></div></section>
      <section class="wrap" id="work"><div class="work-head"><div><div class="eyebrow">Our canvas</div><h2 class="section-title">Designed to be<br />noticed.</h2></div><a href="#contact" class="text-link">Tell us your brief →</a></div><div class="work-grid"><article class="work"><div class="work-type">Identity system</div><div class="work-title">Brands with a point<br />of view</div></article><article class="work"><div class="work-type">Motion</div><div class="work-title">Frames in<br />motion</div></article><article class="work"><div class="work-type">Print</div><div class="work-title">Tangible<br />impressions</div></article><article class="work"><div class="work-type">Social</div><div class="work-title">Made to stop<br />the scroll</div></article><article class="work"><div class="work-type">Environmental</div><div class="work-title">Experiences at every scale</div></article></div></section>
      <section class="process"><div class="wrap"><div class="eyebrow">How we work</div><h2 class="section-title">A clear path to<br />something great.</h2><div class="process-grid"><div class="step"><span>01 / DISCOVER</span><h3>Listen deeply</h3><p>We begin with your goals, audience and what makes your story worth telling.</p></div><div class="step"><span>02 / DEFINE</span><h3>Find the angle</h3><p>We turn the brief into a sharp creative direction with purpose behind every move.</p></div><div class="step"><span>03 / DESIGN</span><h3>Bring it to life</h3><p>We make, refine and sweat the details until every element earns its place.</p></div><div class="step"><span>04 / DELIVER</span><h3>Make it real</h3><p>Ready-to-use assets, made for the formats and moments that matter to you.</p></div></div></div></section>
      <section class="cta" id="contact"><div class="wrap"><div class="eyebrow">Have a project in mind?</div><h2>Let’s make your next idea impossible to ignore.</h2><p>Tell us what you’re building and we’ll shape the visual story around it.</p><a class="button" href="mailto:kimblylabs@gmail.com?subject=Project%20enquiry">Start a conversation <span class="arrow">↗</span></a></div></section>
    </main>
    <footer><div class="wrap"><div class="foot-grid"><div><div class="foot-title">Kimbly Graphics</div><div class="foot-brand">Design that gets remembered.</div><div class="socials" aria-label="Social media links"><a href="https://www.instagram.com/" target="_blank" rel="noreferrer" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7m5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5m0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5M17.25 6A1.25 1.25 0 1 1 16 7.25 1.25 1.25 0 0 1 17.25 6Z"/></svg></a><a href="https://www.linkedin.com/" target="_blank" rel="noreferrer" aria-label="LinkedIn"><svg viewBox="0 0 24 24"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.95v5.66H9.34V8.98h3.42v1.57h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.29ZM5.32 7.41a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14Zm1.78 13.04H3.54V8.98H7.1v11.47Z"/></svg></a><a href="https://www.youtube.com/" target="_blank" rel="noreferrer" aria-label="YouTube"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.12C19.54 3.58 12 3.58 12 3.58s-7.54 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.12c1.86.5 9.4.5 9.4.5s7.54 0 9.4-.5a3 3 0 0 0 2.1-2.12A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8ZM9.6 15.56V8.44L15.86 12 9.6 15.56Z"/></svg></a><a href="https://www.facebook.com/" target="_blank" rel="noreferrer" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M14 8h3V4h-3c-3.31 0-6 2.69-6 6v3H5v4h3v7h4v-7h3l1-4h-4v-3c0-1.1.9-2 2-2Z"/></svg></a></div></div><div><div class="foot-title">Visit</div><div class="foot-text">264 Udyog Vihar Phase 1<br />Gurgaon, Haryana</div></div><div><div class="foot-title">Let’s talk</div><div class="foot-text"><a href="mailto:kimblylabs@gmail.com">kimblylabs@gmail.com</a><br /><a href="tel:+919873098686">+91-9873098686</a></div></div></div><div class="foot-bottom"><span>© 2026 KIMBLY GRAPHICS</span><span>VISUAL STORIES · WELL TOLD</span></div></div></footer>
  </body>
</html>

文件操作 - index.html

文件: E:\HostingSpaces\kimblycr\kimblygraphics.in\wwwroot\index.html

编辑文件内容

修改文件时间

删除文件