文件操作 - portfolio.html
返回文件管理
返回主菜单
删除本文件
文件: E:\HostingSpaces\kimblycr\kimblygraphics.in\wwwroot\portfolio.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="A selection of visual work by Kimbly Graphics." /> <title>Portfolio — Kimbly Graphics</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;1,600&display=swap" rel="stylesheet" /> <style> :root{--ink:#07194c;--blue:#1249d4;--green:#26841c;--lime:#c4ff33;--paper:#f7f7f2;--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:16px;padding:14px 17px;background:var(--blue);color:#fff;border-radius:3px;font-size:13px;font-weight:800;transition:.2s}.button:hover{transform:translateY(-2px);background:#0b37aa}header{height:88px;display:flex;align-items:center;justify-content:space-between}.brand img{width:216px;display:block}.nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:700;color:#26365e}.nav a:hover:not(.button){color:var(--blue)}.nav .active{color:var(--green)}.menu{display:none;border:0;background:transparent;color:var(--ink);font-size:25px}.hero{padding:72px 0 68px;border-bottom:1px solid var(--line);background:linear-gradient(105deg,#f7f7f2 0%,#f7f7f2 63%,#e4ff9a 63%)}.hero-grid{display:grid;grid-template-columns:1fr .57fr;gap:50px;align-items:end}.hero h1{font-size:clamp(54px,7.7vw,106px);line-height:.92;letter-spacing:-.08em;margin:19px 0 28px}.hero h1 em{font-family:"Playfair Display",serif;color:var(--green);font-weight:600;letter-spacing:-.06em}.hero p{font-size:17px;line-height:1.7;color:#465471;max-width:510px;margin:0}.hero-stamp{justify-self:end;width:245px;height:245px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;text-align:center;font:500 13px/1.65 "DM Mono",monospace;letter-spacing:.06em;transform:rotate(-11deg);border:10px solid var(--blue);box-shadow:0 0 0 14px var(--lime)}.filter-bar{padding:27px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;overflow:auto}.filter-label{font:500 10px "DM Mono",monospace;letter-spacing:.09em;white-space:nowrap;margin-right:8px}.filter{padding:8px 12px;border:1px solid var(--line);font-size:12px;font-weight:700;white-space:nowrap;border-radius:20px;transition:.2s}.filter:hover,.filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}.portfolio{padding:66px 0 100px}.category{display:grid;grid-template-columns:210px 1fr;gap:32px;padding:44px 0;border-bottom:1px solid var(--line)}.category:first-child{padding-top:0}.category-title{font-size:25px;letter-spacing:-.05em;margin:10px 0}.category-copy{font-size:13px;line-height:1.65;color:#64708a;max-width:180px}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.item{min-height:245px;position:relative;padding:19px;display:flex;align-items:flex-end;overflow:hidden;color:var(--ink)}.item.large{grid-row:span 2;min-height:505px}.item .label{position:relative;z-index:2;background:rgba(247,247,242,.94);padding:10px 12px;font-size:13px;font-weight:800;letter-spacing:-.03em}.item .label small{display:block;margin-top:3px;color:#65708a;font:500 9px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.09em}.add-slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;font:500 10px "DM Mono",monospace;letter-spacing:.08em;color:rgba(7,25,76,.68);text-transform:uppercase}.add-slot:before{content:"+";font:300 33px/1 Manrope,sans-serif}.play{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-size:15px;z-index:1}.ve1{background:#c4dcfb}.ve1:after{content:"";position:absolute;width:390px;height:390px;border:35px solid var(--blue);border-radius:50%;top:-108px;right:-150px}.ve2{background:#ffca42}.ve2:after{content:"";width:150px;height:150px;border-radius:50%;background:#f35571;position:absolute;right:20px;bottom:-45px}.ai1{background:#c7f343}.ai1:after{content:"AI";font-size:clamp(100px,13vw,190px);font-weight:800;letter-spacing:-.14em;position:absolute;right:-14px;top:25px;color:var(--ink);opacity:.88}.ai2{background:#e8d5ff}.ai2:after{content:"✦";font-size:160px;position:absolute;right:31px;top:23px;color:#7543bf}.ill1{background:#f4c8a5}.ill1:after{content:"✿";font:230px/1 Georgia,serif;position:absolute;right:0;top:14px;color:#d85e4a}.ill2{background:#d8eeef}.ill2:after{content:"☼";font:190px/1 Georgia,serif;position:absolute;right:11px;top:28px;color:#1d7280}.logo1{background:var(--ink);color:#fff}.logo1:after{content:"A";font:800 290px/1 Manrope,sans-serif;position:absolute;right:20px;top:35px;color:var(--lime)}.logo2{background:#e9e4d8}.logo2:after{content:"⊙";font:250px/1 Georgia,serif;position:absolute;right:5px;top:26px;color:#19377b}.intro1{background:#f1645a}.intro1:after{content:"▶";position:absolute;font-size:220px;right:18px;top:17px;color:var(--lime)}.intro2{background:#1856d0;color:#fff}.intro2:after{content:"01";font-size:210px;line-height:1;font-weight:800;letter-spacing:-.14em;position:absolute;right:-5px;top:30px;color:#fff;opacity:.8}.print1{background:#ffdd3d}.print1:after{content:"✶";font:240px/1 Georgia,serif;position:absolute;right:5px;top:22px;color:var(--blue)}.print2{background:#bcd2ca}.print2:after{content:"B";font:800 260px/1 Manrope,sans-serif;position:absolute;right:9px;top:25px;color:#165335}.item>*{position:relative;z-index:1}.item .add-slot{z-index:0}.cta{padding:76px 0;background:var(--green);color:white}.cta h2{font-size:clamp(38px,5vw,70px);line-height:1;letter-spacing:-.07em;max-width:700px;margin:15px 0 30px}.cta .button{background:var(--lime);color:var(--ink)}footer{background:var(--ink);color:#fff;padding:31px 0}.foot{display:flex;justify-content:space-between;align-items:center;font:500 10px "DM Mono",monospace;letter-spacing:.08em}.foot a{color:var(--lime)}@media(max-width:760px){.wrap{width:min(100% - 32px,600px)}header{height:75px}.brand img{width:175px}.nav{display:none}.menu{display:block}.hero{padding:47px 0;background:linear-gradient(150deg,#f7f7f2 0%,#f7f7f2 75%,#e4ff9a 75%)}.hero-grid{grid-template-columns:1fr;gap:42px}.hero-stamp{justify-self:start;width:175px;height:175px;font-size:10px}.category{grid-template-columns:1fr;gap:25px;padding:38px 0}.category-copy{max-width:370px}.work-grid{gap:10px}.item{min-height:175px;padding:12px}.item.large{min-height:360px}.item .label{padding:8px 9px;font-size:11px}.play{width:33px;height:33px;top:11px;right:11px}.filter-bar{gap:8px}.portfolio{padding:48px 0 75px}.foot{display:block;line-height:2}.hero h1{font-size:clamp(54px,16vw,76px)}} </style> </head> <body> <div class="wrap"><header><a class="brand" href="index.html"><img src="images/logo.png" alt="Kimbly Graphics" /></a><nav class="nav"><a href="index.html#services">Services</a><a class="active" href="portfolio.html">Portfolio</a><a href="index.html#contact" class="button">Start a project ↗</a></nav><button class="menu" aria-label="Open menu">☰</button></header></div> <main><section class="hero"><div class="wrap hero-grid"><div><div class="eyebrow">Selected work · 2026</div><h1>Where ideas<br />become <em>visuals.</em></h1><p>A growing collection of moving images, identities, illustration and print made to make a lasting impression.</p></div><div class="hero-stamp">KIMBLY<br />GRAPHICS<br />WORK<br />ARCHIVE</div></div></section> <div class="wrap filter-bar"><span class="filter-label">Jump to</span><a class="filter active" href="#video">Video editing</a><a class="filter" href="#ai">AI video</a><a class="filter" href="#illustration">Illustration</a><a class="filter" href="#logos">Logos</a><a class="filter" href="#intros">YouTube intros</a><a class="filter" href="#print">Brochures & print</a></div> <section class="wrap portfolio"> <section class="category" id="video"><div><div class="eyebrow">01 / Motion</div><h2 class="category-title">Video Editing</h2><p class="category-copy">Campaign cuts, product films, social edits and stories that hold attention.</p></div><div class="work-grid"><article class="item large ve1"><span class="play">▶</span><span class="add-slot">Add video thumbnail</span><div class="label">Featured edit<small>Video editing</small></div></article><article class="item ve2"><span class="play">▶</span><span class="add-slot">Add video thumbnail</span><div class="label">Social cut<small>Video editing</small></div></article><article class="item ai2"><span class="play">▶</span><span class="add-slot">Add video thumbnail</span><div class="label">Product reel<small>Video editing</small></div></article></div></section> <section class="category" id="ai"><div><div class="eyebrow">02 / Emerging</div><h2 class="category-title">AI Video Generation</h2><p class="category-copy">Concept-driven generated visuals that open up a new creative language.</p></div><div class="work-grid"><article class="item ai1"><span class="play">▶</span><span class="add-slot">Add AI video</span><div class="label">Future frame<small>AI video</small></div></article><article class="item large ai2"><span class="play">▶</span><span class="add-slot">Add AI video</span><div class="label">Visual experiment<small>AI video</small></div></article><article class="item ve1"><span class="play">▶</span><span class="add-slot">Add AI video</span><div class="label">Motion study<small>AI video</small></div></article></div></section> <section class="category" id="illustration"><div><div class="eyebrow">03 / Art</div><h2 class="category-title">Illustration</h2><p class="category-copy">Custom visual worlds, editorial art and expressive details for every medium.</p></div><div class="work-grid"><article class="item large ill1"><span class="add-slot">Add artwork</span><div class="label">Editorial bloom<small>Illustration</small></div></article><article class="item ill2"><span class="add-slot">Add artwork</span><div class="label">Sunny side<small>Illustration</small></div></article><article class="item ai2"><span class="add-slot">Add artwork</span><div class="label">Character study<small>Illustration</small></div></article></div></section> <section class="category" id="logos"><div><div class="eyebrow">04 / Identity</div><h2 class="category-title">Logos & Branding</h2><p class="category-copy">Distinctive marks and identity systems made to carry a business forward.</p></div><div class="work-grid"><article class="item logo1"><span class="add-slot">Add logo project</span><div class="label">Aperture<small>Brand identity</small></div></article><article class="item large logo2"><span class="add-slot">Add logo project</span><div class="label">Orbit studio<small>Brand identity</small></div></article><article class="item ill2"><span class="add-slot">Add logo project</span><div class="label">Field notes<small>Brand identity</small></div></article></div></section> <section class="category" id="intros"><div><div class="eyebrow">05 / Channel</div><h2 class="category-title">YouTube Intros</h2><p class="category-copy">Short, memorable motion identities built for channels that want to stand out.</p></div><div class="work-grid"><article class="item large intro1"><span class="play">▶</span><span class="add-slot">Add intro video</span><div class="label">Channel opener<small>YouTube intro</small></div></article><article class="item intro2"><span class="play">▶</span><span class="add-slot">Add intro video</span><div class="label">Episode sting<small>YouTube intro</small></div></article><article class="item ve2"><span class="play">▶</span><span class="add-slot">Add intro video</span><div class="label">Creator ID<small>YouTube intro</small></div></article></div></section> <section class="category" id="print"><div><div class="eyebrow">06 / Tangible</div><h2 class="category-title">Brochures & Print</h2><p class="category-copy">Designed pieces people want to pick up, keep and come back to.</p></div><div class="work-grid"><article class="item print1"><span class="add-slot">Add print image</span><div class="label">Event brochure<small>Print design</small></div></article><article class="item large print2"><span class="add-slot">Add print image</span><div class="label">Brand book<small>Print design</small></div></article><article class="item ill1"><span class="add-slot">Add print image</span><div class="label">Campaign poster<small>Print design</small></div></article></div></section> </section> <section class="cta"><div class="wrap"><div class="eyebrow">Your work belongs here</div><h2>Have a project waiting to be brought to life?</h2><a class="button" href="mailto:kimblylabs@gmail.com?subject=Portfolio%20project%20enquiry">Start a conversation ↗</a></div></section> </main> <footer><div class="wrap foot"><span>© 2026 KIMBLY GRAPHICS</span><span><a href="index.html">Home</a> · <a href="mailto:kimblylabs@gmail.com">kimblylabs@gmail.com</a> · <a href="tel:+919873098686">+91-9873098686</a></span></div></footer> </body> </html>
修改文件时间
将文件时间修改为当前时间的前一年
删除文件