Adolfo Reyna
27 lines
10 KiB
HTML
27 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>EMI Latin America — Visual Direction Samples</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');
|
||
:root{--ink:#172a25;--green:#285843;--gold:#cfaa68;--paper:#f6f1e6;--muted:#68766d;--coral:#c96f51;--blue:#a6c7c0}
|
||
*{box-sizing:border-box}body{margin:0;background:#d7d8d2;color:var(--ink);font-family:'DM Sans',sans-serif}.deck{scroll-snap-type:y mandatory;height:100vh;overflow-y:auto}.slide{width:min(100vw,160vh);height:min(56.25vw,90vh);min-height:540px;margin:3vh auto;position:relative;overflow:hidden;scroll-snap-align:center;box-shadow:0 24px 60px #172a2530;padding:7.5%}.tag{font-size:12px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--green)}h1{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(42px,5.2vw,82px);line-height:1.03;letter-spacing:-.035em;margin:22px 0}p{font-size:clamp(16px,1.55vw,24px);line-height:1.48;max-width:720px;color:var(--muted)}.foot{position:absolute;bottom:5%;left:7.5%;right:7.5%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.badge{display:inline-flex;padding:9px 14px;border-radius:30px;background:#e4e8df;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.nav{position:fixed;right:18px;top:18px;z-index:9;display:flex;gap:8px}.nav a{background:#fff;color:#254533;text-decoration:none;padding:9px 12px;border-radius:20px;font-size:12px;box-shadow:0 4px 14px #0002}.art{position:absolute;right:8%;top:21%;width:39%;height:56%}.rule{width:74px;height:4px;background:var(--gold);margin:26px 0}.small{font-size:13px!important;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--green)}
|
||
/* A. structured infographic / handmade editorial */
|
||
.infographic{background:#f6f0e4;background-image:radial-gradient(#c1ad8540 .8px,transparent .8px);background-size:12px 12px}.infographic h1{font-size:clamp(36px,4.5vw,67px);max-width:550px}.infographic .lead{font-family:'DM Serif Display',Georgia,serif;color:#4e6655;font-size:clamp(19px,2vw,30px)}.orbit{position:absolute;right:9%;top:20%;width:42%;height:60%;display:flex;align-items:center;justify-content:center}.sun{width:190px;height:190px;border-radius:50%;background:#285843;color:white;display:grid;place-content:center;text-align:center;font:700 20px/1.3 Manrope;box-shadow:0 0 0 16px #d9e2d1,0 0 0 20px #cfaa68}.node{position:absolute;padding:13px 17px;border:2px solid #285843;border-radius:45% 55% 47% 53%;background:#fffaf0;font-weight:700;font-size:14px;box-shadow:4px 5px 0 #cfaa6880}.n1{top:2%;left:30%}.n2{top:35%;right:-2%}.n3{bottom:2%;left:24%}.n4{top:34%;left:-4%}.infographic .foot{color:#597060}
|
||
/* B. creative artifact studio: cinematic interactive-story direction */
|
||
.story{background:radial-gradient(ellipse at 79% 48%,#32755d 0,#203f35 29%,#142c27 71%);color:white}.story .tag,.story .small{color:#e5c886}.story h1{font:600 clamp(40px,5.4vw,82px)/1.02 'Playfair Display',Georgia,serif;max-width:600px;color:#fff}.story p{color:#d2dfd7;max-width:590px}.story .art{right:3%;top:10%;height:77%;width:43%}.story .foot{color:#c5d4cb}.story .glow{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8c982,#9b6548 45%,#213a2e 70%);filter:drop-shadow(0 0 45px #b18a4c55)}
|
||
/* C. real web-design system sample: premium Apple-like editorial */
|
||
.apple{background:#fbfbfa;color:#191919;padding-top:8%}.apple .tag{color:#777}.apple h1{font:600 clamp(42px,5vw,76px)/1.02 'Manrope',sans-serif;letter-spacing:-.065em;max-width:610px}.apple p{color:#646464;max-width:590px}.apple .badge{background:#f1eee8;color:#333}.apple .art{right:5%;width:41%;height:62%;top:18%;border-radius:30px;background:linear-gradient(145deg,#e2e9dd,#b5c7b4 48%,#d4b575);display:flex;align-items:center;justify-content:center}.apple .art .disc{width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 39% 38%,#f1ddaa,#c5a158 48%,#45614d 49%,#27483a 74%);box-shadow:0 35px 65px #344f3e40}.apple .foot{color:#7b7b7b}
|
||
/* D. office slide: conventional editable PPT visual language */
|
||
.powerpoint{background:#173c31;color:#fff;padding:0}.powerpoint:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2.2%;background:#d4ad64}.powerpoint .left{position:absolute;left:9%;top:15%;width:49%}.powerpoint .tag{color:#edcf91}.powerpoint h1{font:700 clamp(36px,4.4vw,66px)/1.06 'Manrope',sans-serif;letter-spacing:-.04em}.powerpoint p{color:#d5e1d9}.powerpoint .blocks{position:absolute;right:7%;top:20%;width:32%;display:grid;gap:14px}.powerpoint .block{background:#ffffff12;border:1px solid #ffffff35;border-left:5px solid #d4ad64;padding:18px 20px;border-radius:4px}.powerpoint .block b{display:block;color:#edcf91;font-size:13px;letter-spacing:.1em;margin-bottom:6px}.powerpoint .block span{font-size:15px;color:#e5ece7}.powerpoint .foot{color:#cedbd3}
|
||
/* E. open-slide style: spacious chaptered narrative */
|
||
.openslide{background:#eee8da}.openslide .coverstripe{position:absolute;right:0;top:0;bottom:0;width:33%;background:#dce5d6}.openslide .tag{color:#927448}.openslide h1{max-width:580px;font-size:clamp(42px,5.2vw,78px)}.openslide .lead{font:500 clamp(19px,2vw,28px)/1.45 'DM Serif Display',Georgia,serif;color:#475f4e;max-width:590px}.openslide .art{right:5%;top:21%;width:29%;height:54%;display:flex;align-items:center;justify-content:center}.openslide .family{position:relative;width:250px;height:250px}.openslide .family i{position:absolute;width:94px;height:94px;border-radius:50%;background:#285843;border:8px solid #eee8da;box-shadow:0 0 0 1px #285843}.openslide .family i:nth-child(1){left:78px;top:0;background:#d2ad67}.openslide .family i:nth-child(2){left:0;top:110px;background:#bb7154}.openslide .family i:nth-child(3){right:0;top:110px;background:#6f9478}.openslide .family i:nth-child(4){left:78px;top:90px;background:#285843;width:100px;height:100px;z-index:2}
|
||
/* navigation / print */
|
||
@page{size:13.333in 7.5in;margin:0}@media print{body{background:white}.deck{height:auto;overflow:visible}.nav{display:none}.slide{width:13.333in;height:7.5in;min-height:0;margin:0;box-shadow:none;page-break-after:always;break-after:page;page-break-inside:avoid;scroll-snap-align:none}.slide:last-child{page-break-after:auto}.foot{font-size:9pt}}
|
||
</style></head><body>
|
||
<nav class="nav"><a href="#infographic">01 Infographic</a><a href="#studio">02 Studio</a><a href="#design">03 Web design</a><a href="#ppt">04 PowerPoint</a><a href="#open">05 Open-slide</a></nav>
|
||
<main class="deck">
|
||
<section class="slide infographic" id="infographic"><span class="badge">01 · BAOYU INFOGRAPHIC</span><h1>One vision.<br>Many nations.<br>One family.</h1><p class="lead">“Go and make disciples of all nations.”</p><p>God’s Kingdom and family established among every people group in Latin America.</p><div class="orbit"><div class="sun">KINGDOM<br>& FAMILY</div><span class="node n1">DISCIPLE</span><span class="node n2">ESTABLISH</span><span class="node n3">SEND</span><span class="node n4">GATHER</span></div><div class="foot"><span>Matthew 28:18–20 · The regional vision</span><span>01 / Visual direction</span></div></section>
|
||
<section class="slide story" id="studio"><span class="tag">02 · CREATIVE ARTIFACT STUDIO / CINEMATIC STORY</span><h1>A family<br>that carries<br>the vision<br>together.</h1><div class="rule"></div><p>Not a short visit. A shared calling to disciple, serve, raise leaders, and establish lasting works across Latin America.</p><div class="art"><div class="glow" style="width:60%;height:60%;left:16%;top:10%"></div><div class="glow" style="width:45%;height:45%;right:0;bottom:5%;background:radial-gradient(circle at 35% 30%,#e7d29a,#b96e50 48%,#234435 70%)"></div><div class="glow" style="width:32%;height:32%;left:2%;bottom:2%;background:radial-gradient(circle at 35% 30%,#cad8b1,#769372 48%,#203f35 72%)"></div></div><div class="foot"><span>EMI · Latin America</span><span>02 / Visual direction</span></div></section>
|
||
<section class="slide apple" id="design"><span class="tag">03 · DESIGN-SYSTEM HTML / APPLE-INSPIRED EDITORIAL</span><h1>The work is bigger than any one ministry.</h1><div class="rule"></div><p>One regional family, sharing responsibility for the vision—through discipleship, relationships, prayer, and practical service.</p><span class="badge">Vision · Mission · Family</span><div class="art"><div class="disc"></div></div><div class="foot"><span>EMI · A shared regional call</span><span>03 / Visual direction</span></div></section>
|
||
<section class="slide powerpoint" id="ppt"><div class="left"><span class="tag">04 · OFFICECLI / POWERPOINT-STYLE SAMPLE</span><h1>Our mission:<br>establish what<br>will last.</h1><p>Work together as a regional spiritual family to see God’s Kingdom take root among every people group.</p></div><div class="blocks"><div class="block"><b>ALIGN</b><span>One shared understanding of the vision</span></div><div class="block"><b>STRENGTHEN</b><span>Relationships across leaders and generations</span></div><div class="block"><b>ESTABLISH</b><span>Disciples, spiritual families, and lasting works</span></div></div><div class="foot"><span>EMI · Latin America</span><span>04 / Visual direction</span></div></section>
|
||
<section class="slide openslide" id="open"><div class="coverstripe"></div><span class="tag">05 · OPEN-SLIDE / NARRATIVE CHAPTER</span><h1>The vision is shared.<br>The assignment is ours.</h1><div class="rule"></div><p class="lead">Mature and emerging leaders, moving as one family to establish the Kingdom and pass the work forward.</p><div class="art"><div class="family"><i></i><i></i><i></i><i></i></div></div><div class="foot"><span>EMI · Latin America</span><span>05 / Visual direction</span></div></section>
|
||
</main><script>document.addEventListener('keydown',e=>{if(e.key==='ArrowDown'||e.key==='ArrowRight'){e.preventDefault();scrollBy({top:innerHeight,behavior:'smooth'})}if(e.key==='ArrowUp'||e.key==='ArrowLeft'){e.preventDefault();scrollBy({top:-innerHeight,behavior:'smooth'})}})</script></body></html> |