Skip to content

Instantly share code, notes, and snippets.

@techonomics69

techonomics69/index.html

Created November 14, 2020 14:06
Show Gist options
  • Save techonomics69/1877371a6c8a211845b75253f3a3d4fa to your computer and use it in GitHub Desktop.
Save techonomics69/1877371a6c8a211845b75253f3a3d4fa to your computer and use it in GitHub Desktop.
Download ZIP
techonomicsport
Raw
index.html
<a id="top"></a>
<a href="#top" class="arrow-up backToTop">
<span class="left-arm"></span>
<span class="right-arm"></span>
<span class="arrow-slide"></span>
</a>
<!-- OUTSIDE OF SCROLL -->
<div class="scroll-line"><span></span></div>
<div class="nav-toggle"><span></span></div>
<nav class="nav">
<div class="navList">
<a href="#top" class="scrollLink"><span>Top</span></a>
<a href="#alpha" class="scrollLink"><span>About</span></a>
<a href="#beta" class="scrollLink"><span>Gallery</span></a>
<a href="#gamma" class="scrollLink"><span>Skillset</span></a>
<a href="#delta" class="scrollLink"><span>Code</span></a>
</div>
</nav>
<div class="plusBox">
<svg class="plus" aria-hidden="true" width="16" height="16" role="img" version="1.1" viewBox="0 0 64 64">
<rect y="32" width="64" height="1" />
<rect x="32" width="1" height="64" /></svg>
<svg class="plus" aria-hidden="true" width="16" height="16" role="img" version="1.1" viewBox="0 0 64 64">
<rect y="32" width="64" height="1" />
<rect x="32" width="1" height="64" /></svg>
<svg class="plus" aria-hidden="true" width="16" height="16" role="img" version="1.1" viewBox="0 0 64 64">
<rect y="32" width="64" height="1" />
<rect x="32" width="1" height="64" /></svg>
<svg class="plus" aria-hidden="true" width="16" height="16" role="img" version="1.1" viewBox="0 0 64 64">
<rect y="32" width="64" height="1" />
<rect x="32" width="1" height="64" /></svg>
</div>
<div class="quillWrap">
<svg id="quill" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 802 800">
<path d="M682.24,73.82a53.76,53.76,0,0,1-6.31,8.36c-5.13,5.52-11.55,9.68-18.15,13.32L674.68,93c-6.62,1-11.2,18.59-13.41,23.56-5.13,11.54-8.58,19.3-21.09,24.24a440.57,440.57,0,0,1-47.85,15.81,114,114,0,0,0,48.08-5.39A106.3,106.3,0,0,1,580,188.1a85.75,85.75,0,0,0,26.8-1.89l-27.43,37.13c-7.41,10-15.84,20.75-28,23.52-11.29,2.57-23.25,3.5-34.77,4.45-13.91,1.15-27.82,6-41.36,7.07,23.75-1.84,49.64-.52,72.69,5.49-19.77,27.16-61.38,37.19-90.7,49.94a103.31,103.31,0,0,1,41.61-8.54c-12.48,12.84-23.15,28.9-36.56,40.35s-31.6,19.05-48.12,24.06a77,77,0,0,0,35-9.49L439.44,371a44.57,44.57,0,0,1-6.86,6.6c-3.47,2.49-7.57,3.93-11.61,5.33l-20.08,7a257.55,257.55,0,0,0,27.46-6.61c-22.7,21.71-44.16,49.34-80.12,43l34.06,6c-15.52,15.54-27.82,31.41-43.49,42.55-16,11.34-35.23,18-53.34,26.89l6.25,4.49c-15.23,16.41-33.15,26.38-59.25,28.74,65.21-150.14,159.47-275.12,280.28-381.25-2.85,1.81-6,3.26-8.49,5.47-57.67,51.35-116.41,101.39-162.85,164.19C256.78,437.83,194.81,562.69,161,701.24c-4.88,20-10.62,39.84-16,59.76h-4.88c0-6.48-.92-13.14.21-19.43,11.76-64.94,31.25-127.63,56.46-188.53,5.38-13,6.06-22.63-1-34-7.86-12.65-13.65-25.74-15.62-40.64l7.57,10.31A197.81,197.81,0,0,1,190,418.87a7.82,7.82,0,0,1,4.69,6.83c.42-1,5.66-22.35,6.4-22.05l15.06,6.21c-2.34-22.29,5.9-40.51,19-56.49l14.32,31.2c-16-58.83,20.63-98,48.08-140.32l3.74.1,13.65,55.34c1.06-9.07.15-17.86-.41-26.68-.89-14.07-4.58-28.81-1.74-42.12,4.12-19.29,15.17-35.58,28.55-49.71,6.54-6.91,13.53-13.36,20.47-19.84s13.3-14.21,20.78-20c1,9.44-1.27,19.88-2.11,29.3l-1.39,15.69c-.36,4,.52,12.18-1.39,15.69a101.39,101.39,0,0,0,9.44-24.47c1.84-7.54,4.77-14.51,6.86-22a242.79,242.79,0,0,1,8.74-24.39,12.78,12.78,0,0,1,5.53-7.1q11-8.35,22.13-16.44c1.7-1.24,20.43-13.14,20.29-13.83.58,2.76,1.87,4.72,2.87,7.28,1.31,3.35,1.31,7.07,1.74,10.6a13.52,13.52,0,0,1,6.18-11,47.46,47.46,0,0,1,3.81,14l6.45-30a11.55,11.55,0,0,1,1.3-3.82A11,11,0,0,1,477,77.54a104,104,0,0,1,11-5.59,176.35,176.35,0,0,1,2.2,20.71c8.35-11.26,6.18-26.34,20.69-32.59,13.36-5.76,29.79-9.7,43.86-14.25a81.75,81.75,0,0,1,8.25-1.69L544.6,89.86c11-14.57,17.93-31.52,29.24-44.71C586.46,30.42,606,31.29,627.08,30.88L604,48.92c9.58-2.29,17.67-6.69,26-10.62,23.53-11.15,51.81-9,77.17-13.25C695.15,38.86,691.78,58.44,682.24,73.82Z" /></svg>
<svg class="inkPot" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve">
<g>
<g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)">
<path d="M3502.7,4987.3c-652-62.2-1219.4-510.1-1463.2-1152.2c-77.1-199.1-77.1-211.5-87.1-731.6c-10-525.1-7.5-532.5,47.3-592.3c52.3-54.7,74.7-59.7,301.1-59.7h243.9v-365.8v-368.3l-204.1-69.7c-462.8-159.3-788.8-358.3-1102.4-674.4c-296.1-298.6-438-545-552.5-963.1C621.1-218.6,623.5-908,688.2-1219c194.1-945.6,851.1-2194.9,1732-3294.8l211.5-263.8l2349.1-7.5l2351.6-5l59.7,54.7c32.3,32.3,186.6,226.4,340.9,430.5c895.9,1192,1438.3,2289.4,1592.6,3217.6c59.7,348.4,42.3,905.8-34.9,1169.6c-211.5,726.7-751.5,1244.3-1620,1560.3l-211.5,74.7l-7.5,368.3l-7.5,365.8h243.9c360.8,2.5,380.7,27.4,380.7,502.7c-2.5,759-126.9,1117.3-535,1525.4c-318.5,318.5-622.1,462.9-1060.1,510.1C6202.7,5017.1,3796.4,5017.1,3502.7,4987.3z M6675.5,4556.8c368.3-121.9,661.9-360.8,828.7-679.4l94.6-181.7h-2588c-1881.3,0-2590.5,7.5-2590.5,27.4c0,72.2,176.7,345.9,313.6,480.3c209,211.5,497.7,353.4,793.8,395.7c42.3,7.5,736.6,10,1542.9,7.5C6414.2,4601.6,6551.1,4599.1,6675.5,4556.8z M7656,3404.6c7.5-52.3,14.9-199.1,14.9-323.5v-231.4H4995.8H2320.7v209c0,114.5,7.5,258.8,14.9,323.5l17.4,114.5h2642.8h2642.8L7656,3404.6z M7048.8,2018.5c0-440.5,19.9-569.9,97.1-609.7c22.4-12.4,159.2-62.2,306.1-109.5C8686.2,886.3,9169,57.6,8905.2-1194.1c-19.9-94.6-42.3-191.6-52.2-214c-17.4-47.3-415.6-176.7-783.9-251.4c-224-47.3-345.9-54.7-846.1-54.7c-656.9-2.5-669.4,0-1965.9,233.9c-923.2,166.7-1420.9,233.9-2040.6,276.2c-487.7,32.3-1296.5,14.9-1791.7-37.3c-171.7-19.9-313.6-29.9-318.5-27.4c-5,5-24.9,107-47.3,229c-24.9,151.8-34.8,321-27.4,554.9c12.4,380.7,74.7,612.2,233.9,876c251.3,413.1,726.6,744.1,1341.3,928.2c335.9,104.5,321,74.6,331,647l7.5,485.3h2053h2050.5V2018.5z M3739.1-1443c428-47.3,908.3-121.9,1647.4-258.8c1144.7-211.5,1779.3-266.3,2361.6-201.6c263.8,27.4,764,134.4,928.2,199.1c39.8,15,77.1,22.4,82.1,15c34.8-34.9-345.9-856.1-592.3-1274.1c-174.2-298.6-577.3-888.4-806.3-1184.5l-189.1-243.9H4998.3H2823.4l-159.3,206.5c-447.9,574.9-868.5,1236.8-1139.7,1796.7c-174.2,358.3-348.4,798.8-348.4,880.9c0,49.8,0,49.8,634.6,104.5C2161.4-1373.3,3336-1398.2,3739.1-1443z" />
</g>
</g>
</svg>
</div>
<form id="contactForm" method="post">
<h1 class="block conTitle">Contact</h1>
<div id="inputs">
<div class="block block1">
<input class="input-text" type="text" name="name" tabindex="1" />
<label for="form-email" class="form-label">Name</label>
</div>
<div class="block block2">
<input class="input-text" type="text" name="email" tabindex="2" />
<label for="form-email" class="form-label">Email</label>
</div>
<div class="block block3">
<textarea class="input-text" name="comment" tabindex="3"></textarea>
<label for="form-email" class="form-label">Message</label>
</div>
</div>
<input type="submit" class="block contact-button" id="submit" value="Send It" tabindex="4" />
</form>
<!-- /OUTSIDE OF SCROLL -->
<div class="container" id="container-scroll">
<div class="section heroSection">
<div class="topInfo topInfoLeft">
<span>CONTACT</span>
</div>
<div class="topInfo topInfoRight">
<span>MENU</span>
</div>
<div class="lines loadedDown">
<div class="line vert line3"></div>
<div class="line vert line2"></div>
<div class="line vert line1"></div>
</div>
<div class="curveWrap">
<svg width="100%" height="100%" viewBox="0 0 1200 100" xmlns="http://www.w3.org/2000/svg">
<g class="curve" fill="none">
<path d="M 0, 60 S 300, -60, 600, 60, 800, -120, 1200 60" />
<path d="M 0, 60 S 200, -60, 400, 60, 900, -120, 1200 60" />
<path d="M 0, 60 S 200, -70, 400, 70, 800, -120, 1200 60" />
<path d="M 0, 60 S 200, -60, 400, 80, 600, -120, 1200 60" />
<path d="M 0, 60 S 300, -60, 600, 60, 800, -120, 1200 60" />
<path d="M 0, 60 S 200, -70, 400, 60, 800, -120, 1200 60" />
<path d="M 0, 60 S 300, -60, 600, 60, 800, -120, 1200 60" />
<path d="M 0, 60 S 200, -60, 400, 60, 900, -120, 1200 60" />
<path d="M 0, 60 S 200, -70, 400, 70, 800, -120, 1200 60" />
<path d="M 0, 60 S 200, -60, 400, 80, 600, -120, 1200 60" />
<path d="M 0, 60 S 300, -60, 600, 60, 800, -120, 1200 60" />
<path d="M 0, 60 S 200, -70, 400, 60, 800, -120, 1200 60" />
</g>
</svg>
</div>
<div class="textHome" id="textHome">
<h1>
<svg class="siteTitle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" viewBox="0 0 300 125" xml:space="preserve">
<text transform="translate(0 95)">
<tspan class="textPath textPath1" x="0" y="0">Design</tspan>
</text>
</svg>
<div class="siteTitleBlock">
<svg class="siteTitle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" viewBox="0 0 49 125" xml:space="preserve">
<text transform="translate(1 95)">
<tspan class="textPath textPath2" x="0" y="0">&</tspan>
</text>
</svg>
<svg class="siteTitle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" viewBox="0 0 300 125" xml:space="preserve">
<text transform="translate(2 95)">
<tspan class="textPath textPath3" x="-9" y="0">Dev</tspan>
</text>
</svg>
</div>
</h1>
<h2 class="loaded2 topSubtitle">The Portfolio of Eric Porter</h2>
<p class="loaded3">I've been a Front-end Developer and UI Designer for a long time & I love this stuff. My focus is responsive, cross-browser friendly code and device-agnostic design.</p>
</div>
<div class="compassrose">
<svg id="rose" viewBox="-50 -50 500 500">
<polygon id="north" points="200,0 225,145 200,200 175,145" />
<polygon id="northeast" points="325,75 255,175 200,200 225,145" />
<polygon id="east" points="400,200 255,175 200,200 255,225" />
<polygon id="southeast" points="325,325 225,255 200,200 255,225" />
<polygon id="south" points="200,400 175,255 200,200 225,255" />
<polygon id="southwest" points="75,325 145,225 200,200 175,255" />
<polygon id="west" points="0,200 145,175 200,200 145,225" />
<polygon id="northwest" points="75,75 175,145 200,200 145,175" />
</svg>
<svg class="compass" id="compassrose" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
<defs>
<symbol>
<line x1="40" y1="250" x2="50" y2="250" id="roseline" />
<line x1="40" y1="250" x2="60" y2="250" id="majline" />
<path d="M10,250a240,240 0 1,0 480,0a240,240 0 1,0 -480,0" id="rosecircle" />
</symbol>
</defs>
</svg>
</div>
<svg class="dividerBottom loadedUp" style="position: absolute; bottom: 0; left: 0; filter: none;" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 120">
<path fill-rule="evenodd" fill="#222" d="M0,55.9621684 C300.495844,106.578393 620.495844,106.578393 960,55.9621684 C1299.50416,5.34594386 1619.50416,5.34594386 1920,55.9621684 L1920,120 L0,120 L0,55.9621684 Z"></path>
</svg>
</div>
<div class="section blobs" id="alpha">
<div class="info2col">
<div class="trigger">
<h3 class="gsHeadline">
<div class="outer">
<div class="inner">About <span>Me</span></div>
</div>
</h3>
<p class="gs_reveal gs_reveal_fromLeft">I'm an experienced UI developer and Designer on a personal mission to help the web suck less. I love staying up-to-date with the new technologies that come along and damn is this stuff fun.</p>
<p class="gs_reveal gs_reveal_fromLeft">I've had the opportunity to work for clients like Jameson, Epipen, Publicis, Toyota, and Allstate. Currently living in Kansas City.</p>
</div>
<div class="picWrap" id="element1">
<div class="pic gs_reveal gs_reveal_fromRight">
<div class="bg para">
<img src="https://assets.codepen.io/30256/5_1.jpg" />
<span class="para1">
<!-- <img src="https://assets.codepen.io/30256/drib27.jpg" /> -->
<!-- <img src="https://assets.codepen.io/30256/aura1.jpg" /> -->
<img src="https://assets.codepen.io/30256/wehatesheep1.png" />
</span>
<span class="para3">
<img src="https://assets.codepen.io/30256/drib27.jpg" />
<!-- <img src="https://assets.codepen.io/30256/aura1.jpg" /> -->
</span>
</div>
</div>
</div>
<div class="picWrap pic2" id="element2">
<div class="pic gs_reveal gs_reveal_fromLeft">
<div class="img1 para">
<img src="https://assets.codepen.io/30256/tablet.gif" />
<span class="para2"><img src="https://assets.codepen.io/30256/3phoneTrust2.png"></span>
</div>
</div>
</div>
<div class="trigger">
<h3 class="gsHeadline">
<div class="outer">
<div class="inner">What I <span>Bring</span></div>
</div>
</h3>
<ol>
<li class="gs_reveal gs_reveal_fromRight">HTML, CSS, JS/jQuery and Adobe CS, Figma, Sketch expertise.</li>
<li class="gs_reveal gs_reveal_fromRight">15+ years digital development - Web, Mobile, and Animation.</li>
<li class="gs_reveal gs_reveal_fromRight">In-depth understanding of cross-browser compatibility and responsive development.</li>
<li class="gs_reveal gs_reveal_fromRight">Ability to work independently but I love working in a team environment.</li>
</ol>
</div>
</div>
</div>
<div class="section block-5" id="beta" style="padding: 0; min-height: 0;">
<svg class="dividerTop" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 120" style="transform: scaleX(-1);">
<path fill-rule="evenodd" fill="#222" d="M0,37.9621684 C300.495844,88.578393 620.495844,88.578393 960,37.9621684 C1299.50416,-12.6540561 1619.50416,-12.6540561 1920,37.9621684 L1920,102 L0,102 L0,37.9621684 Z" transform="matrix(1 0 0 -1 0 102)"></path>
</svg>
<svg class="dividerBottom" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 120">
<path fill-rule="evenodd" fill="#222" d="M0,55.9621684 C300.495844,106.578393 620.495844,106.578393 960,55.9621684 C1299.50416,5.34594386 1619.50416,5.34594386 1920,55.9621684 L1920,120 L0,120 L0,55.9621684 Z"></path>
</svg>
<div id="gallery">
<div><img src="https://assets.codepen.io/30256/1.png" /><a href="#lightbox-2"></a></div>
<div><img src="https://assets.codepen.io/30256/6_1.jpg" /><a href="#lightbox-11"></a></div>
<div><img src="https://assets.codepen.io/30256/7.jpg" /><a href="#lightbox-12"></a></div>
<div><img src="https://assets.codepen.io/30256/8_1.jpg" /><a href="#lightbox-13"></a></div>
<div><img src="https://assets.codepen.io/30256/3demo_1.png" /><a href="#lightbox-14"></a></div>
<div><img src="https://assets.codepen.io/30256/4.jpg" /><a href="#lightbox-15"></a></div>
<div><img src="https://assets.codepen.io/30256/5.jpg" /><a href="#lightbox-16"></a></div>
<div><img src="https://assets.codepen.io/30256/apogee1.jpg" /><a href="#lightbox-22"></a></div>
<div><img src="https://assets.codepen.io/30256/3.jpg" /><a href="#lightbox-8"></a></div>
<div><img src="https://assets.codepen.io/30256/docs-friends.png" /><a href="#lightbox-25"></a></div>
<div><img src="https://assets.codepen.io/30256/drib27.jpg" /><a href="#lightbox-26"></a></div>
<div><img src="https://assets.codepen.io/30256/image_processing20190905-28905-1ia1yso.png" /><a href="#lightbox-27"></a></div>
<div><img src="https://assets.codepen.io/30256/meet_move_1x.png" /><a href="#lightbox-28"></a></div>
<div><img src="https://assets.codepen.io/30256/2.jpg" /><a href="#lightbox-3"></a></div>
<div><img src="https://assets.codepen.io/30256/5_1.jpg" /><a href="#lightbox-5"></a></div>
<div><img src="https://assets.codepen.io/30256/5.png" /><a href="#lightbox-6"></a></div>
<div><img src="https://assets.codepen.io/30256/1.jpg" /><a href="#lightbox-1"></a></div>
<div><img src="https://assets.codepen.io/30256/portfolio.jpg" /><a href="#lightbox-29"></a></div>
<div><img src="https://assets.codepen.io/30256/section.jpg" /><a href="#lightbox-30"></a></div>
<div><img src="https://assets.codepen.io/30256/untitled-2.jpg" /><a href="#lightbox-31"></a></div>
<div><img src="https://assets.codepen.io/30256/untitled-2+%281%29.jpg" /><a href="#lightbox-32"></a></div>
<div><img src="https://assets.codepen.io/30256/3.png" /><a href="#lightbox-9"></a></div>
<div><img src="https://assets.codepen.io/30256/4.png" /><a href="#lightbox-10"></a></div>
<div><img src="https://assets.codepen.io/30256/untitled-2+%282%29.jpg" /><a href="#lightbox-33"></a></div>
<div><img src="https://assets.codepen.io/30256/9.jpg" /><a href="#lightbox-21"></a></div>
<div><img src="https://assets.codepen.io/30256/10.jpg" /><a href="#lightbox-18"></a></div>
<div><img src="https://assets.codepen.io/30256/2.png" /><a href="#lightbox-7"></a></div>
<div><img src="https://assets.codepen.io/30256/wehatesheep1.png" /><a href="#lightbox-34"></a></div>
<div><img src="https://assets.codepen.io/30256/4jpg.jpg" /><a href="#lightbox-4"></a></div>
<div>
<!--empty div here on purpose -->
</div>
</div>
</div>
<div class="section" id="gamma">
<div class="info2col">
<div>
<div class="trigger">
<h3 class="gsHeadline">
<div class="outer">
<div class="inner">Skill<span>set</span></div>
</div>
</h3>
<div class="chartBarsWrap chartBarsHorizontal">
<div class="chartBars">
<ul class="bars gs_reveal">
<li>
<div data-percentage="98" class="bar greenBarFlat "></div><b>HTML5</b>
</li>
<li>
<div data-percentage="97" class="bar orangeBarFlat"></div><b>CSS3</b>
</li>
<li>
<div data-percentage="95" class="bar purpleBarFlat"></div><b>Photoshop</b>
</li>
<li>
<div data-percentage="78" class="bar maroonBarFlat"></div><b>Illustrator</b>
</li>
<li>
<div data-percentage="54" class="bar blueBarFlat"></div><b>JS</b>
</li>
</ul>
</div>
</div>
</div>
<div class="">
<ul class="">
<li class="gs_reveal gs_reveal_fromLeft">
Responsive/Progressive Enhancement/Cross-Browser Agnostic development.
</li>
<li class="gs_reveal gs_reveal_fromLeft">
Boostrap, Boilerplate, Foundation, Flexbox Grid
</li>
<li class="gs_reveal gs_reveal_fromLeft">
CSS3, HTML5, Greensock/GSAP, Micro-interactions, SVG and Canvas animation.
</li>
<li class="gs_reveal gs_reveal_fromLeft">
Working knowledge of JavaScript and jQuery, PHP &amp; ASP.NET
</li>
<li class="gs_reveal gs_reveal_fromLeft">
SEO, W3C standards, ARIA roles, Accessibility &amp; Section 508
</li>
<li class="gs_reveal gs_reveal_fromLeft">
Email Dev - custom table layouts
</li>
<li class="gs_reveal gs_reveal_fromLeft">
Wordpress and Magento theming.
</li>
<li class="gs_reveal gs_reveal_fromLeft">
Scrum - Agile/Sprint Development
</li>
</ul>
</div>
</div>
<div>
<div class="toolbox">
<div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 class="gsHeadline">
<div class="outer">
<div class="inner">Tool<span>box</span></div>
</div>
</h3>
</div>
<ul>
<li class="gs_reveal gs_reveal_fromRight">
Sublime Text, Visual Studio, Dreamweaver, Notepad++
</li>
<li class="gs_reveal gs_reveal_fromRight">
Photoshop, Illustrator, After Effects, Google Web Designer, InDesign, wireframing - Balsamiq, Fluid UI
</li>
<li class="gs_reveal gs_reveal_fromRight">
SASS/SCSS, Less, Post-CSS, Compass/Bourbon, BEM &amp; OOCSS
</li>
<li class="gs_reveal gs_reveal_fromRight">
Gulp, Grunt, SVN, SourceTree, Bitbucket, Github, Putty
</li>
<li class="gs_reveal gs_reveal_fromRight">
CyberDuck, CuteFTP, WS-FTP
</li>
<li class="gs_reveal gs_reveal_fromRight">
WAMP &amp; MAMP
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="section" style="min-height: 70vh;">
<div class="rotator">EricPorter*Design+Dev*</div>
<svg class="scene" width="100%" height="70vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">
<path d="M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1518,719.9 1487,644 1429,533 1388,437.7 1447,259.7 1400,187 1362,132 1270,90.53 1207,39.93 1161,2.932 1071,-74.45 1071,-74.45 1071,-74.45 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z" pathdata:id="M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1576,704.7 1517,625.7 1459,514.7 1418,419.4 1430,288.5 1382,187 1349,116.3 1296,54.47 1240,0.3429 1205,-33.51 1120,-83.59 1120,-83.59 1120,-83.59 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z"></path>
<path d="M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1417,429.4 1286,245.4 1227,163.2 1107,142.1 1043,64.54 1009,24.41 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z" pathdata:id="M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1349,460.4 1243,260.6 1199,176.6 1145,96.92 1083,24.95 1050,-12.63 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z"></path>
<path d="M -85.01,-74.02 C -92.39,-66.64 -85.37,-55.79 -87.81,-46.91 -86.65,265.1 -84.66,577.2 -83.18,889.2 317.2,888.3 717.5,885.8 1118,890.4 1152,890.6 1187,890.9 1221,890 1219,768.3 1224,643.6 1187,526 1153,417 1091,319.3 1029,224.1 998.8,178.5 968.8,132.6 936.6,88.23 891.7,27.39 772.2,-78.96 772.2,-78.96 772.2,-78.96 222.1,-81.07 -85.01,-74.02 Z" pathdata:id="M -85.01,-74.02 C -92.39,-66.64 -85.37,-55.79 -87.81,-46.91 -86.65,265.1 -84.66,577.2 -83.18,889.2 317.2,888.3 717.5,885.8 1118,890.4 1152,890.6 1187,890.9 1221,890 1219,768.3 1175,659.3 1150,544.3 1128,438.4 1143,312.6 1081,227.1 1004,121.1 925.8,114.8 851.3,54.73 762,-17.34 772.2,-78.96 772.2,-78.96 772.2,-78.96 222.1,-81.07 -85.01,-74.02 Z"></path>
<path d="M -92.42,-79.11 C -89.97,243.8 -87.52,566.7 -85.07,889.6 201.8,889.9 488.7,889.9 775.5,895.6 880.4,896.9 985.2,894 1090,892.5 1064,773.3 1037,651.6 976.1,544.8 946.7,495.8 914.6,448.3 882,401.3 820.9,314.4 742.3,252 666.4,177.4 583.2,98.01 496.5,12.18 386.7,-23.38 328.4,-45.64 232.6,-81.38 232.6,-81.38 232.6,-81.38 9.82,-84.94 -92.42,-79.11 Z" pathdata:id="M -92.42,-79.11 C -89.97,243.8 -87.52,566.7 -85.07,889.6 201.8,889.9 488.7,889.9 775.5,895.6 880.4,896.9 1063,889.5 1063,889.5 1063,889.5 1081,768.2 997.4,608.7 958.5,534.8 969.9,436.8 918.5,370.8 848.4,280.8 717,260.3 629.9,186.5 552.6,121.2 491.5,38.73 426.3,-38.61 412.9,-54.44 387.9,-87.47 387.9,-87.47 387.9,-87.47 9.82,-84.94 -92.42,-79.11 Z"></path>
<path d="M -88.6,95.54 C -90.38,166.1 -88.23,236.7 -88.68,307.4 L -86.19,890 C 229.7,890.2 939.8,892.4 939.8,892.4 855.2,767 831,639.4 721.4,519.4 634.7,424.5 526.4,360.9 428.8,281.8 332.7,204 251.6,102.3 140.1,48.9 70.75,15.73 -24.82,24.2 -85.28,0.03 Z" pathdata:id="M -88.6,95.54 C -90.38,166.1 -88.23,236.7 -88.68,307.4 L -86.19,890 C 229.7,890.2 939.8,892.4 939.8,892.4 906.9,734.7 779.3,676 721.4,519.4 676.8,398.8 566.5,307.1 458.9,236.6 355.2,168.7 220.3,165.7 107.8,113.5 40.05,82.12 -24.82,24.2 -85.28,0.03 Z"></path>
<path d="M -95.69,252.3 -87.65,890.4 698.1,892 C 698.1,892 599.1,687.7 518.9,610.6 348,446.2 131.4,466.5 -95.69,252.3 Z" pathdata:id="M -95.69,252.3 -87.65,890.4 698.1,892 C 698.1,892 569.8,587.1 448.9,482.7 299.7,353.9 131.4,466.5 -95.69,252.3 Z"></path>
<path d="M -85.59,444.4 -85.59,890.6 489,895.6 C 489,895.6 436.8,745.3 382.5,690.8 258.1,565.8 57.98,629.2 -85.59,444.4 Z" pathdata:id="M -85.59,444.4 -85.59,890.6 546.9,895.6 C 546.9,895.6 517.4,695.4 339.9,593.4 187.7,505.9 57.98,629.2 -85.59,444.4 Z"></path>
</svg>
<svg class="dividerTop2" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 120">
<path fill-rule="evenodd" fill="#171717" d="M0,37.9621684 C300.495844,88.578393 620.495844,88.578393 960,37.9621684 C1299.50416,-12.6540561 1619.50416,-12.6540561 1920,37.9621684 L1920,102 L0,102 L0,37.9621684 Z" transform="matrix(1 0 0 -1 0 102)"></path>
</svg>
<svg class="dividerBottom2" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 120">
<path fill-rule="evenodd" fill="#020202" d="M0,55.9621684 C300.495844,106.578393 620.495844,106.578393 960,55.9621684 C1299.50416,5.34594386 1619.50416,5.34594386 1920,55.9621684 L1920,120 L0,120 L0,55.9621684 Z"></path>
</svg>
</div>
<footer class="footer" id="delta">
<h3 class="gsHeadline">
<div class="outer">
<div class="inner">Code <span>Examples</span></div>
</div>
</h3>
<div class="pens">
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="result" data-user="EricPorter" data-slug-hash="rLJVNv" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 0 solid;" data-pen-title="Webpage Hero header - scroll effects">
<span>See the Pen <a href="https://codepen.io/EricPorter/pen/rLJVNv">
Webpage Hero header - scroll effects</a> by Eric Porter (<a href="https://codepen.io/EricPorter">@EricPorter</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="result" data-user="EricPorter" data-slug-hash="EoJprr" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Counting Cubes">
<span>See the Pen <a href="https://codepen.io/EricPorter/pen/EoJprr">
Counting Cubes</a> by Eric Porter (<a href="https://codepen.io/EricPorter">@EricPorter</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="result" data-user="EricPorter" data-slug-hash="grpqVB" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 0 solid;" data-pen-title="Graphs - animated on scroll, responsive, data-driven">
<span>See the Pen <a href="https://codepen.io/EricPorter/pen/grpqVB">
Graphs - animated on scroll, responsive, data-driven</a> by Eric Porter (<a href="https://codepen.io/EricPorter">@EricPorter</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</div>
<span class="comment">180 more live code examples can be found on:<br><a class="btn" href="https://codepen.io/EricPorter/pens/showcase" target="_blank">CodePen</a></span>
</footer>
<div class="section bottomContact">
<section class="water">
<div class="wave"></div>
</section>
<ul class="social">
<li><a href="https://www.linkedin.com/in/portere/" target="_blank"><span class="icon-linkedin"></span></a></li>
<li><a href="https://codepen.io/EricPorter/" target="_blank"><span class="icon-codepen"></span></a></li>
<li><a href="https://dribbble.com/EricPorter/" target="_blank"><span class="icon-dribbble"></span></a></li>
<li><a href="https://twitter.com/EricPorter/" target="_blank"><span class="icon-twitter"></span></a></li>
</ul>
<p>Wanna get in touch?<br><span class="emailMe btn">Contact Me</span></p>
</div>
</div>
<!-- Gallery - popup versions (placed outsode of content area) -->
<div class="lightbox" id="lightbox-1">
<div class="content"><img src="https://assets.codepen.io/30256/1.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-2">
<div class="content"><img src="https://assets.codepen.io/30256/1.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-3">
<div class="content"><img src="https://assets.codepen.io/30256/2.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-5">
<div class="content"><img src="https://assets.codepen.io/30256/5_1.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-6">
<div class="content"><img src="https://assets.codepen.io/30256/5.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-7">
<div class="content"><img src="https://assets.codepen.io/30256/2.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-8">
<div class="content"><img src="https://assets.codepen.io/30256/3.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-9">
<div class="content"><img src="https://assets.codepen.io/30256/3.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-10">
<div class="content"><img src="https://assets.codepen.io/30256/4.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-11">
<div class="content"><img src="https://assets.codepen.io/30256/6_1.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-12">
<div class="content"><img src="https://assets.codepen.io/30256/7.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-13">
<div class="content"><img src="https://assets.codepen.io/30256/8_1.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-14">
<div class="content"><img src="https://assets.codepen.io/30256/3demo_1.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-15">
<div class="content"><img src="https://assets.codepen.io/30256/4.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-16">
<div class="content"><img src="https://assets.codepen.io/30256/5.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-18">
<div class="content"><img src="https://assets.codepen.io/30256/10.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-21">
<div class="content"><img src="https://assets.codepen.io/30256/9.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-22">
<div class="content"><img src="https://assets.codepen.io/30256/apogee1.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-25">
<div class="content"><img src="https://assets.codepen.io/30256/docs-friends.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-26">
<div class="content"><img src="https://assets.codepen.io/30256/drib27.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-27">
<div class="content"><img src="https://assets.codepen.io/30256/image_processing20190905-28905-1ia1yso.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-28">
<div class="content"><img src="https://assets.codepen.io/30256/meet_move_1x.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-29">
<div class="content"><img src="https://assets.codepen.io/30256/portfolio.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-30">
<div class="content"><img src="https://assets.codepen.io/30256/section.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-31">
<div class="content"><img src="https://assets.codepen.io/30256/untitled-2.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-32">
<div class="content"><img src="https://assets.codepen.io/30256/untitled-2+%281%29.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-33">
<div class="content"><img src="https://assets.codepen.io/30256/untitled-2+%282%29.jpg" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-34">
<div class="content"><img src="https://assets.codepen.io/30256/wehatesheep1.png" /><a class="close" href="#gallery"></a></div>
</div>
<div class="lightbox" id="lightbox-4">
<div class="content"><img src="https://assets.codepen.io/30256/4jpg.jpg" /><a class="close" href="#gallery"></a></div>
</div>
Raw
script.js
////////////////
// Smooth Reveal
var ctrl = new ScrollMagic.Controller();
// Animated titles
$(".gsHeadline").each(function (i) {
var inner = $(this).find(".inner");
var inner2 = $(this).find(".inner span");
var outer = $(this).find(".outer");
var tl = new TimelineMax();
tl.from(outer, 0.5, { scaleX: 0 });
tl.from(inner, 0.6, {
yPercent: 100,
ease: Back.easeOut,
transformOrigin: "0% 0%"
});
tl.from(inner2, 0.7, {
scaleX: 0,
ease: Back.easeOut,
transformOrigin: "0% 0%"
});
new ScrollMagic.Scene({
triggerElement: this,
triggerHook: 0.8
})
.setTween(tl)
.addTo(ctrl);
});
function loop(elements, callback) {
for (let i = 0; i < elements.length; i++) {
callback(elements[i]);
}
}
const controller = new ScrollMagic.Controller();
loop(document.querySelectorAll(".gs_reveal"), (elem, direction) => {
const tl = new TimelineMax();
tl.fromTo(
elem,
0.7, // duration
{
autoAlpha: 0,
x: 0,
y: 100
},
{
autoAlpha: 1,
x: 0,
y: 0,
// transformOrigin:'50% 0%',
ease: "back.out(1,5)"
}
);
new ScrollMagic.Scene({
triggerElement: elem,
triggerHook: 0.9,
reverse: true
})
.setTween(tl)
.addTo(controller);
});
////////////////
// Compass Rose ////////////////
//Compassrose hide
$(document).ready(function () {
var controller = new ScrollMagic.Controller();
var flexContent = $(".section");
new ScrollMagic.Scene({
triggerElement: ".compassrose",
triggerHook: 0.8
})
.setClassToggle(".compassrose", "goodbye") // add class toggle
.addTo(controller);
});
var lineInc = 2,
majMarkDegree = 10,
degreeInc = 30,
compassrose = document.getElementById("compassrose"),
xmlns = "http://www.w3.org/2000/svg",
xlink = "http://www.w3.org/1999/xlink";
if (lineInc > 0) {
for (var i = 0; i < 360; i += lineInc) {
var newline = document.createElementNS(xmlns, "use");
if (i % majMarkDegree == 0) {
newline.setAttributeNS(xlink, "xlink:href", "#majline");
} else {
newline.setAttributeNS(xlink, "xlink:href", "#roseline");
}
newline.setAttributeNS(null, "transform", "rotate(" + i + " 250 250)");
compassrose.appendChild(newline);
}
}
var writeDegs = document.createElementNS(xmlns, "text"),
currentDeg = 0,
writeOffset = 0;
for (var i = 0; i < 99; i += (degreeInc / 360) * 100) {
var degree = document.createElementNS(xmlns, "textPath");
degree.setAttributeNS(xlink, "xlink:href", "#rosecircle");
var length = (Math.log(i) * Math.LOG10E + 1) | 0;
if (length > 1) {
writeOffset = 1;
}
degree.setAttributeNS(null, "startOffset", i - writeOffset + "%");
degree.textContent = currentDeg;
writeDegs.appendChild(degree);
currentDeg += degreeInc;
}
compassrose.appendChild(writeDegs);
/////////////////////////////////////////////
// Nav Toggle
$(function () {
var trigger = $(".nav-toggle");
trigger.on("click", function () {
$(this).toggleClass("open");
$(this).next().toggleClass("active");
});
var triggerLink = $(".navList a");
triggerLink.on("click", function () {
$(".nav-toggle").toggleClass("open");
$(".nav").toggleClass("active");
});
});
/////////////////////////////////////////////
// Contact Toggle
$(".quillWrap, .emailMe").click(function () {
$("#contactForm").toggleClass("active");
$($(".block").get().reverse()).each(function (i) {
var $item = $(this);
setTimeout(function () {
$item.toggleClass("active");
}, 300 * i);
});
});
/////////////////
// Contact Form Validation
$(document).ready(function () {
$("#contactForm").validate({
debug: true,
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
comment: {
required: true,
minlength: 2
}
}
});
});
/////////////////////////////////////////////
// Page load Trigger
TweenMax.staggerFrom(".loaded", 1.5, {
opacity: 0,
delay: 2,
x: -30,
y: 30,
rotation: 3
});
TweenMax.staggerFrom(".loaded2", 1, {
opacity: 0,
delay: 3.3,
x: 0,
y: 0,
rotation: 8
});
TweenMax.staggerFrom(".loaded3", 1, {
opacity: 0,
delay: 3.8,
x: 0,
y: 0,
rotation: -8
});
TweenMax.staggerFrom(".loaded4", 1.5, {
opacity: 0,
delay: 2.9,
x: 30,
y: 30,
rotation: 3
});
TweenMax.staggerFrom(
".loadedUp",
2,
{
scale: 1,
opacity: 1,
delay: 2,
y: 100
},
1
);
/////////////////
// loadedDown
var tl1 = new TimelineMax({ delay: 6 }),
elements1 = $(".loadedDown > .line");
$.each(elements1, function () {
tl1.from($(this), 0.2, { autoAlpha: 1, left: -500, ease: "back.out(1.7)" });
});
var compassrose = document.getElementById("compassrose");
TweenMax.to(compassrose, 111, {
rotation: "360",
ease: Linear.easeNone,
repeat: -1
});
var rose = document.getElementById("rose");
TweenMax.to(rose, 111, { rotation: "-360", ease: Linear.easeNone, repeat: -1 });
var loopBox = document.getElementById("loopBox");
TweenMax.to(loopBox, 80, {
rotation: "-360",
ease: Linear.easeNone,
repeat: -1
});
/////////////
// Rotator
var Emblem = {
init: function (el, str) {
var element = document.querySelector(el);
var text = str ? str : element.innerHTML;
element.innerHTML = "";
for (var i = 0; i < text.length; i++) {
var letter = text[i];
var span = document.createElement("span");
var node = document.createTextNode(letter);
var r = (360 / text.length) * i;
var x = (Math.PI / text.length).toFixed(0) * i;
var y = (Math.PI / text.length).toFixed(0) * i;
span.appendChild(node);
span.style.webkitTransform =
"rotateZ(" + r + "deg) translate3d(" + x + "px," + y + "px,0)";
span.style.transform =
"rotateZ(" + r + "deg) translate3d(" + x + "px," + y + "px,0)";
element.appendChild(span);
}
}
};
Emblem.init(".rotator");
////////////////////
// Wavy Columns
/**
* Wavy Columns
*
* demo3.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2017, Codrops
* http://www.codrops.com
*/
{
class MorphingBG {
constructor(el) {
this.DOM = {};
this.DOM.el = el;
this.DOM.paths = Array.from(this.DOM.el.querySelectorAll("path"));
this.animate();
}
animate() {
this.DOM.paths.forEach((path) => {
setTimeout(() => {
anime({
targets: path,
duration: anime.random(3000, 5000),
easing: [0.5, 0, 0.5, 1],
d: path.getAttribute("pathdata:id"),
loop: true,
direction: "alternate"
});
}, anime.random(0, 1000));
});
}
}
new MorphingBG(document.querySelector("svg.scene"));
}
/*------------------------------
SupahScroll
by Fabio Ottaviani
https://codepen.io/supah/pen/MMveGv?editors=1010
------------------------------*/
class SupahScroll {
constructor(options) {
this.opt = options || {};
this.el = this.opt.el ? this.opt.el : ".supah-scroll";
this.speed = this.opt.speed ? this.opt.speed : 0.1;
this.init();
}
init() {
this.scrollY = 0;
this.supahScroll = document.querySelectorAll(this.el)[0];
this.events();
this.resize();
this.animate();
}
resize() {
document.body.style.height = `${
this.supahScroll.getBoundingClientRect().height
}px`;
}
animate() {
this.scrollY += (window.scrollY - this.scrollY) * this.speed;
this.supahScroll.style.transform = `translate3d(0,${-Math.floor(
this.scrollY
)}px,0)`;
this.raf = requestAnimationFrame(this.animate.bind(this));
}
events() {
window.addEventListener("load", this.resize.bind(this));
window.addEventListener("resize", this.resize.bind(this));
}
}
const supahscroll = new SupahScroll({
el: ".container",
speed: 0.05
});
/*------------------------------
Main Nav - scroll to
------------------------------*/
$(document).ready(function () {
$("a.scrollLink").click(function (event) {
event.preventDefault();
$("html, body").animate(
{ scrollTop: $($(this).attr("href")).offset().top },
500
);
});
});
/*------------------------------
// Back To Top Button
// Distance from bottom to appear
------------------------------*/
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 5) {
$(".backToTop").addClass("show");
} else {
$(".backToTop").removeClass("show");
}
});
/*------------------------------
// Bar Graphs
------------------------------*/
var piesiteFired = 0;
$(document).ready(function () {
var $win = $(window),
$win_height = $(window).height(),
// - A multiple of viewport height - The higher this number the sooner triggered.
windowPercentage = $(window).height() * 1;
$win.on("scroll", scrollReveal);
function scrollReveal() {
var scrolled = $win.scrollTop();
/////////////////////////
// Horizontal Chart
$(".chartBarsHorizontal .bar").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + windowPercentage > offsetTop || $win_height > offsetTop) {
$(this).each(function (key, bar) {
var percentage = $(this).data("percentage");
$(this).css("width", percentage + "%");
///////////////////////////////////////
// Animated numbers
$(this)
.prop("Counter", 0)
.animate(
{
Counter: $(this).data("percentage")
},
{
duration: 2000,
easing: "swing",
step: function (now) {
$(this).text(Math.ceil(now));
}
}
);
});
} else {
///////////////////////
// To keep them triggered, lose this block.
$(this).each(function (key, bar) {
$(this).css("width", 0);
});
}
});
}
scrollReveal();
});
////////////////////////////
// Scroll Position Bar
$(document).scroll(function (e) {
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
var roundScroll = Math.round(scrollPercent);
$(".scroll-line").css("width", scrollPercent + "%");
$(".scroll-line span").text(roundScroll);
});
//////////////////////
// Mouse Parallax
$(document).mousemove(function (e) {
$("#element1 img").parallax(300, e);
$("#element1 span.para1").parallax(100, e);
$("#element1 span.para3").parallax(200, e);
$("#element2 img").parallax(350, e);
$("#element2 span.para2").parallax(30, e);
// $('.picWrap img p').parallax(70 , e);
});
// Parallax mouse
$.fn.parallax = function (resistance, mouse) {
$el = $(this);
TweenLite.to($el, 0.2, {
x: -((mouse.clientX - window.innerWidth / 2) / resistance),
y: -((mouse.clientY - window.innerHeight / 2) / resistance)
});
};
animations();
$(window).resize(function () {
animations();
});
var widthJs = 1024;
function animations() {
$("body").on("mousemove", function (e) {
if ($(window).width() > widthJs) {
var $this = $(".picWrap");
var x = event.clientX / $(window).width() - 0.5;
var y = event.clientY / $(window).height() - 0.5;
TweenLite.to($this, 1, {
rotationY: 5 * x,
rotationX: 2 * y,
ease: Power1.easeOut,
transformPerspective: 500,
transformOrigin: "center"
});
}
});
}
Raw
scripts
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
Raw
style.scss
@import url("https://fonts.googleapis.com/css?family=Prata|Raleway:wght@300,700|Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@800&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-size: 18px;
line-height: 1.5em;
color: #fff;
font-weight: 100;
font-family: Montserrat, Helvetica, Verdana, sans-serif;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
line-height: 1.5em;
margin-bottom: 20px;
color: #ddd;
font-family: Prata, Georgia, "Times New Roman", serif;
}
h2,
h3,
h4 {
letter-spacing: 0.04em;
}
h1 {
font-size: 75px;
}
h2 {
font-size: 30px;
color: goldenrod;
}
h3 {
font-size: 1.6em;
color: goldenrod;
margin-bottom: 40px;
text-transform: uppercase;
}
h4 {
font-family: Montserrat, Helvetica, Verdana, sans-serif;
}
p {
margin: 0 0 25px;
letter-spacing: 1.5px;
font-weight: 300;
color: #aaa;
}
ul {
padding-left: 20px;
}
ol {
list-style: none;
counter-reset: my-awesome-counter;
margin: 0;
padding: 0;
}
ol li {
counter-increment: my-awesome-counter;
display: -webkit-box;
display: flex;
line-height: 1.5em;
margin-bottom: 2rem;
}
ol li::before {
content: "0" counter(my-awesome-counter);
font-weight: bold;
font-size: 3rem;
margin-right: 1rem;
font-family: "Abril Fatface", serif;
line-height: 1;
opacity: 0.1;
}
ul li {
margin-bottom: 20px;
line-height: 1.4em;
}
.dividerTop {
position: absolute;
top: 0;
z-index: 1;
left: 0;
-webkit-filter: drop-shadow(0 5px 5px #050505);
filter: drop-shadow(0 5px 5px #050505);
}
.dividerTop path {
fill: #171717;
}
.dividerBottom {
position: absolute;
bottom: 0;
z-index: 1;
left: 0;
-webkit-filter: drop-shadow(0 -5px 5px #050505);
filter: drop-shadow(0 -5px 5px #050505);
}
.dividerBottom path {
fill: #171717;
}
.dividerTop2 {
position: absolute;
top: 0;
z-index: 1;
left: 0;
}
.dividerTop2 path {
fill: #171717;
}
.dividerBottom2 {
position: absolute;
bottom: 0;
z-index: 1;
left: 0;
}
.dividerBottom2 path {
fill: #020202;
}
.loaded2 {
-webkit-transform-origin: -10em top;
transform-origin: -10em top;
}
.loaded3 {
-webkit-transform-origin: right top;
transform-origin: right top;
}
.siteTitle .textPath {
font-family: Prata, Georgia, "Times New Roman", serif;
display: inline-block;
fill: none;
font-size: 1.2em;
font-weight: 100;
stroke-width: 0.01em;
}
.siteTitle .textPath.textPath1 {
-webkit-animation: DrawTextPath 4s 0s cubic-bezier(0.59, 0.03, 0.27, 0.89);
animation: DrawTextPath 4s 0s cubic-bezier(0.59, 0.03, 0.27, 0.89);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: alternate;
animation-direction: alternate;
font-weight: 800;
}
.siteTitle .textPath.textPath2 {
font-size: 0.8em;
font-weight: 800;
-webkit-animation: DrawTextPath2 2s 0s cubic-bezier(0.59, 0.03, 0.27, 0.12);
animation: DrawTextPath2 2s 0s cubic-bezier(0.59, 0.03, 0.27, 0.12);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.siteTitle .textPath.textPath3 {
font-size: 1.4em;
font-family: Raleway;
font-weight: 700;
-webkit-animation: DrawTextPath3 2s 0s cubic-bezier(0.59, 0.03, 0.27, 0.89);
animation: DrawTextPath3 2s 0s cubic-bezier(0.59, 0.03, 0.27, 0.89);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.siteTitleBlock {
display: inline-block;
width: 300px;
margin-top: -15px;
}
@-webkit-keyframes DrawTextPath {
0% {
stroke: white;
stroke-dasharray: 0 600;
fill: rgba(255, 255, 255, 0);
}
100% {
stroke: rgba(255, 255, 255, 0);
stroke-dasharray: 100% 100%;
fill: rgba(255, 255, 255, 0.8);
}
}
@keyframes DrawTextPath {
0% {
stroke: white;
stroke-dasharray: 0 600;
fill: rgba(255, 255, 255, 0);
}
100% {
stroke: rgba(255, 255, 255, 0);
stroke-dasharray: 100% 100%;
fill: rgba(255, 255, 255, 0.8);
}
}
@-webkit-keyframes DrawTextPath2 {
0% {
stroke: white;
stroke-dasharray: 0 600;
fill: rgba(255, 255, 255, 0);
stroke-width: 0.0001em;
}
100% {
stroke: rgba(255, 255, 255, 0);
stroke-dasharray: 150% 100%;
fill: rgba(255, 255, 255, 0.2);
}
}
@keyframes DrawTextPath2 {
0% {
stroke: white;
stroke-dasharray: 0 600;
fill: rgba(255, 255, 255, 0);
stroke-width: 0.0001em;
}
100% {
stroke: rgba(255, 255, 255, 0);
stroke-dasharray: 150% 100%;
fill: rgba(255, 255, 255, 0.2);
}
}
@-webkit-keyframes DrawTextPath3 {
0% {
stroke: white;
stroke-dasharray: 0 600;
fill: transparent;
stroke-width: 0.0005em;
-webkit-transform: translatex(-10px);
transform: translatex(-10px);
}
100% {
stroke: rgba(255, 255, 255, 0.6);
stroke-dasharray: 150% 100%;
fill: transparent;
-webkit-transform: translatex(-10px);
transform: translatex(-10px);
}
}
@keyframes DrawTextPath3 {
0% {
stroke: white;
stroke-dasharray: 0 600;
fill: transparent;
stroke-width: 0.0005em;
-webkit-transform: translatex(-10px);
transform: translatex(-10px);
}
100% {
stroke: rgba(255, 255, 255, 0.6);
stroke-dasharray: 150% 100%;
fill: transparent;
-webkit-transform: translatex(-10px);
transform: translatex(-10px);
}
}
.line {
-webkit-animation: glow 2s 8s ease forwards;
animation: glow 2s 8s ease forwards;
position: absolute;
top: 0;
border-top: 10px solid #fff;
border-right: 1px solid #333;
width: 15vw;
box-shadow: 5px 0 5px #00000050;
height: 300vh;
-webkit-transform: translateY(-50%) rotate(55deg);
transform: translateY(-50%) rotate(55deg);
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.line.horz {
height: 1px;
width: 100vw;
background: #fff;
opacity: 0.03;
border-top: 0;
}
.line.line1 {
left: -100px;
}
.line.line2 {
left: 100px;
}
.line.line3 {
left: 300px;
}
.line.line4 {
left: 500px;
}
.line.line5 {
left: 700px;
}
.line.line6 {
left: 900px;
}
@-webkit-keyframes glow {
100% {
border-right: 1px solid #42424240;
}
}
@keyframes glow {
100% {
border-right: 1px solid #42424240;
}
}
.arrow-up {
height: 40px;
width: 40px;
display: block;
border: 1px solid goldenrod;
position: fixed;
right: -3em;
bottom: 3em;
z-index: 10;
cursor: pointer;
overflow: hidden;
-webkit-transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
}
.arrow-up.show {
right: 2em;
}
.arrow-slide {
left: 0;
top: -100%;
width: 100%;
height: 100%;
background: #666;
position: absolute;
display: block;
z-index: 0;
}
.left-arm {
position: absolute;
z-index: 1;
background-color: transparent;
top: 18px;
left: 2px;
width: 20px;
display: block;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.left-arm:after {
content: "";
background-color: goldenrod;
width: 20px;
height: 1px;
display: block;
border-radius: 1px;
-webkit-transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
-webkit-transform-origin: right center;
transform-origin: right center;
z-index: -1;
}
.right-arm {
position: absolute;
z-index: 1;
background-color: transparent;
top: 18px;
left: 16px;
width: 20px;
display: block;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 2px;
}
.right-arm:after {
content: "";
background-color: goldenrod;
width: 20px;
height: 1px;
display: block;
border-radius: 1px;
-webkit-transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
-webkit-transform-origin: left center;
transform-origin: left center;
z-index: -1;
}
.arrow-up:hover {
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
.arrow-up:hover .left-arm:after {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.arrow-up:hover .right-arm:after {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.arrow-up:hover .arrow-slide {
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: translateY(200%);
transform: translateY(200%);
}
.scene {
background: #111;
position: fixed;
}
.scene path:nth-child(1) {
fill: #1a1a1a;
}
.scene path:nth-child(2) {
fill: #262626;
}
.scene path:nth-child(3) {
fill: #333333;
}
.scene path:nth-child(4) {
fill: #404040;
}
.scene path:nth-child(5) {
fill: #4d4d4d;
}
.scene path:nth-child(6) {
fill: #595959;
}
.scene path:nth-child(7) {
fill: #666666;
}
.offBlock {
width: 100vw;
-webkit-transform: translateX(50%);
transform: translateX(50%);
position: absolute;
top: 150px;
height: 850px;
background: #262626;
opacity: 0.5;
}
.gsHeadline {
text-transform: uppercase;
font-weight: 700;
}
.gsHeadline .inner {
position: relative;
}
.gsHeadline .inner span {
color: #fff;
display: inline-block;
}
.gsHeadline .outer {
border-bottom: 1px solid #ffffff30;
overflow: hidden;
}
.rotator {
position: absolute;
right: -30px;
top: -140px;
margin: 0 auto;
width: 400px;
height: 400px;
border-radius: 50%;
-webkit-animation: spinZ 30s linear infinite;
animation: spinZ 30s linear infinite;
text-align: center;
z-index: 4;
}
.rotator span {
opacity: 0.2;
color: #fff;
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-transform: uppercase;
font-size: 3.5rem;
font-family: Prata, Georgia, "Times New Roman", serif;
font-weight: 400;
}
@-webkit-keyframes spinZ {
100% {
-webkit-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
}
}
@keyframes spinZ {
100% {
-webkit-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
}
}
.loopBox {
opacity: 0.8;
position: absolute;
left: -70px;
top: -200px;
border: 1px solid #333;
border-radius: 50%;
overflow: hidden;
width: 400px;
height: 100%;
max-height: 400px;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
.loopBox .gridBox {
display: grid;
grid-template-columns: 0.8fr 1fr;
grid-column-gap: 1px;
grid-row-gap: 1px;
width: 100%;
max-width: 800px;
height: 100%;
}
.loopBox .gridBox > div {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
padding: 2em;
}
.loopBox .gridBox > div:nth-of-type(1) {
background: #333;
opacity: 0.2;
}
.loopBox .gridBox > div:nth-of-type(2) {
-webkit-box-pack: end;
justify-content: flex-end;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
}
.loopBox .gridBox > div:nth-of-type(4) {
border-left: 1px solid #333;
}
.compassrose {
position: absolute;
bottom: 50px;
right: 50px;
-webkit-transition: all 2s cubic-bezier(0.15, 0.1, 0.25, 1);
transition: all 2s cubic-bezier(0.15, 0.1, 0.25, 1);
}
.compassrose.goodbye {
right: -400px;
bottom: -100px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
#rose {
opacity: 0.7;
width: 600px;
margin: 3em;
position: absolute;
z-index: -10;
right: -250px;
bottom: -200px;
}
#rose polygon {
fill: none;
stroke: #333;
}
.compass {
opacity: 0.4;
position: absolute;
z-index: -10;
right: -190px;
bottom: -140px;
width: 600px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
.compass #roseline,
.compass #majline {
stroke: #eee;
stroke-width: 0.5;
}
.compass text {
font-family: Montserrat, sans-serif;
font-size: 10px;
fill: #fff;
}
@media only screen and (max-width: 900px) {
.compassrose {
bottom: -150px;
}
.container .curveWrap {
bottom: -20vh;
}
}
.spinOut {
-webkit-transition: 5s;
transition: 5s;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate(400px, 200px);
transform: translate(400px, 200px);
}
.curveWrap {
opacity: 1;
width: 135vw;
height: 100vh;
position: absolute;
bottom: -10vh;
-webkit-transform: translateX(-15vw) rotate(-25deg);
transform: translateX(-15vw) rotate(-25deg);
will-change: transform;
}
.curveWrap .curve {
stroke-linecap: round;
stroke-opacity: 0;
}
.curveWrap .curve path {
-webkit-transform-origin: center;
transform-origin: center;
will-change: transform;
transform-box: fill-box;
}
.curveWrap .curve path:nth-child(1) {
stroke-width: 45;
-webkit-animation: curve 40s linear 1.4s infinite;
animation: curve 40s linear 1.4s infinite;
}
.curveWrap .curve path:nth-child(5n + 1) {
stroke: goldenrod;
}
.curveWrap .curve path:nth-child(5n + 2) {
stroke: GreenYellow;
}
.curveWrap .curve path:nth-child(5n + 3) {
stroke: cornflowerBlue;
}
.curveWrap .curve path:nth-child(5n + 4) {
stroke: darkgreen;
}
.curveWrap .curve path:nth-child(5n + 5) {
stroke: olive;
}
.curveWrap .curve path:nth-child(2) {
stroke-width: 16;
-webkit-animation: curve 40s linear 2.8s infinite;
animation: curve 40s linear 2.8s infinite;
}
.curveWrap .curve path:nth-child(5n + 1) {
stroke: goldenrod;
}
.curveWrap .curve path:nth-child(5n + 2) {
stroke: GreenYellow;
}
.curveWrap .curve path:nth-child(5n + 3) {
stroke: cornflowerBlue;
}
.curveWrap .curve path:nth-child(5n + 4) {
stroke: darkgreen;
}
.curveWrap .curve path:nth-child(5n + 5) {
stroke: olive;
}
.curveWrap .curve path:nth-child(3) {
stroke-width: 78;
-webkit-animation: curve 40s linear 4.2s infinite;
animation: curve 40s linear 4.2s infinite;
}
.curveWrap .curve path:nth-child(5n + 1) {
stroke: goldenrod;
}
.curveWrap .curve path:nth-child(5n + 2) {
stroke: GreenYellow;
}
.curveWrap .curve path:nth-child(5n + 3) {
stroke: cornflowerBlue;
}
.curveWrap .curve path:nth-child(5n + 4) {
stroke: darkgreen;
}
.curveWrap .curve path:nth-child(5n + 5) {
stroke: olive;
}
.curveWrap .curve path:nth-child(4) {
stroke-width: 77;
-webkit-animation: curve 40s linear 5.6s infinite;
animation: curve 40s linear 5.6s infinite;
}
.curveWrap .curve path:nth-child(5n + 1) {
stroke: goldenrod;
}
.curveWrap .curve path:nth-child(5n + 2) {
stroke: GreenYellow;
}
.curveWrap .curve path:nth-child(5n + 3) {
stroke: cornflowerBlue;
}
.curveWrap .curve path:nth-child(5n + 4) {
stroke: darkgreen;
}
.curveWrap .curve path:nth-child(5n + 5) {
stroke: olive;
}
@-webkit-keyframes curve {
50% {
-webkit-transform: rotateX(360deg) skewY(8deg);
transform: rotateX(360deg) skewY(8deg);
stroke-opacity: 1;
}
}
@keyframes curve {
50% {
-webkit-transform: rotateX(360deg) skewY(8deg);
transform: rotateX(360deg) skewY(8deg);
stroke-opacity: 1;
}
}
.heroSection {
height: 100vh;
width: 100%;
overflow: hidden;
position: fixed;
will-change: transform;
z-index: 0;
}
.heroSection .textHome {
-webkit-transform: translate(20vw, 20vh);
transform: translate(20vw, 20vh);
padding-right: 35vw;
}
.heroSection .textHome h1 {
text-shadow: 9px 15px 15px #00000063;
line-height: 0.5em;
}
.heroSection .textHome h1 span {
opacity: 0.5;
font-size: 0.7em;
}
.heroSection .textHome h2 {
text-shadow: 3px 5px 5px #00000063;
margin-top: -6px;
}
.heroSection .textHome p {
max-width: 600px;
text-shadow: 6px 6px 2px #00000063;
}
.heroSection .textHome i {
font-size: 0.7em;
color: #aaa;
}
.chiffreHome {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 0.05;
position: absolute;
top: 50vh;
right: -370px;
line-height: 1em;
font-size: 100px;
font-weight: bold;
color: #999;
font-family: "Prata", serif;
}
.supah-scroll {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: auto;
will-change: transform;
background: -webkit-gradient(linear, left top, left bottom, from(#f7455f), color-stop(#f57a0c), to(#e6b30b));
background: linear-gradient(to bottom, #f7455f, #f57a0c, #e6b30b);
}
.topInfo {
color: goldenrod;
font-size: 0.6em;
display: -webkit-box;
display: flex;
position: absolute;
}
.topInfo.topInfoLeft {
left: 62px;
top: 105px;
}
.topInfo.topInfoRight {
right: 90px;
top: 95px;
}
.container {
width: 100vw;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
background: #020202;
}
.container .section {
min-height: 100vh;
background: #171717;
position: relative;
z-index: 0;
margin-bottom: -1px;
}
.container .section:nth-child(1) {
background: radial-gradient(at 20%, #111, #000);
background: radial-gradient(#2b2f35, #000);
background-repeat: no-repeat;
background-position: 0 30%;
}
.container .section:nth-child(2) {
z-index: 1;
}
.container .section:nth-child(3) {
background: #020202;
}
.container .section:nth-child(5) {
background: radial-gradient(at 20%, #111, #000);
}
.container .section:nth-child(7) {
background: #222;
}
.container .section:nth-child(9) {
background: radial-gradient(at 20%, #111, #000);
}
.container .section .text {
z-index: 2;
position: absolute;
top: 70vh;
left: 10vw;
max-width: 500px;
}
.container .section .chiffre {
position: absolute;
top: 65%;
right: 5vw;
}
.container .section .chiffre .inner {
font-size: 160px;
color: #999;
font-family: Prata, Georgia, "Times New Roman", serif;
}
#alpha,
#beta,
#gamma {
padding: 200px 0;
}
#alpha {
padding: 400px 0;
}
#particles-js {
opacity: 0.4;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.info2col {
position: relative;
display: grid;
max-width: 60vw;
margin: 0 auto;
grid-template-columns: repeat(2, minmax(270px, auto));
grid-column-gap: 10vw;
grid-row-gap: 5vw;
justify-items: center;
}
.info2col > * {
-webkit-box-align: start;
align-items: start;
z-index: 1;
}
@media only screen and (max-width: 1000px) {
.info2col {
grid-template-columns: repeat(auto-fit, minmax(270px, auto));
}
.info2col div:nth-of-type(3) {
-webkit-box-ordinal-group: 5;
order: 4;
}
.info2col div:nth-of-type(3) .img1 {
-webkit-transform: none;
transform: none;
}
.info2col div:nth-of-type(4) {
-webkit-box-ordinal-group: 4;
order: 3;
margin-top: 6em;
}
}
.marquee {
width: 100vw;
overflow: hidden;
position: relative;
height: 60px;
}
.marquee .marquee-wrap {
position: absolute;
display: -webkit-box;
display: flex;
-webkit-box-align: middle;
align-items: middle;
-webkit-box-pack: justify;
justify-content: space-between;
height: 60px;
-webkit-animation: marquee 300s linear infinite;
animation: marquee 300s linear infinite;
}
.marquee .marquee-wrap img {
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
-webkit-filter: brightness(1) grayscale(100%);
filter: brightness(1) grayscale(100%);
opacity: 0.15;
max-height: 60px;
max-width: 200px;
margin: 0 20px;
}
.marquee .marquee-wrap img:hover {
-webkit-filter: brightness(1) grayscale(20%);
filter: brightness(1) grayscale(20%);
opacity: 1;
}
@-webkit-keyframes marquee {
0% {
left: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
left: 100%;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
100% {
left: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes marquee {
0% {
left: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
left: 100%;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
100% {
left: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.scroll-line {
position: fixed;
z-index: 999;
bottom: 0;
height: 8px;
width: 0%;
background: goldenrod;
-webkit-transition: width 200ms ease-out;
transition: width 200ms ease-out;
text-align: right;
color: #fff;
border-radius: 0 1em 0 0;
}
.scroll-line span {
position: absolute;
top: -23px;
right: 18px;
font-size: 1em;
font-weight: 500;
display: block;
text-align: center;
}
.scroll-line span::after {
content: "%";
font-size: 0.7em;
position: absolute;
right: -12px;
bottom: -2px;
font-weight: 700;
opacity: 0.4;
}
.picWrap {
position: relative;
width: 100%;
max-width: 470px;
-webkit-perspective: 1500px;
perspective: 1500px;
-webkit-transform: translate(5vw, -2vw);
transform: translate(5vw, -2vw);
}
.picWrap.pic2 {
-webkit-transform: translate(-5vw, -6vw);
transform: translate(-5vw, -6vw);
-webkit-filter: drop-shadow(0.4em 0.7rem 0.25rem rgba(0, 0, 0, 0.5));
filter: drop-shadow(0.4em 0.7rem 0.25rem rgba(0, 0, 0, 0.5));
}
.picWrap .pic {
position: relative;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 600ms ease-out;
transition: -webkit-transform 600ms ease-out;
transition: transform 600ms ease-out;
transition: transform 600ms ease-out, -webkit-transform 600ms ease-out;
pointer-events: none;
}
.picWrap .pic .bg {
position: relative;
display: block;
width: 100%;
max-width: 470px;
height: 100%;
max-height: 550px;
pointer-events: none;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.picWrap .pic .bg img {
max-width: 100%;
box-shadow: 10px 10px 15px 0px #000;
border: 1px solid #fff;
}
.para {
position: relative;
}
.para span.para1 {
position: absolute;
top: 7em;
left: -6em;
font-size: 1em;
width: 80%;
z-index: -1;
}
.para span.para2 {
position: absolute;
bottom: -10em;
left: 8em;
font-size: 1em;
width: 80%;
}
.para span.para3 {
position: absolute;
bottom: -5em;
left: 8em;
font-size: 1em;
width: 80%;
}
@media only screen and (max-width: 1000px) {
.picWrap,
.picWrap.pic2 {
-webkit-transform: translate(0, 0) !important;
transform: translate(0, 0) !important;
}
}
.offBlock canvas {
width: 100%;
}
.img1 {
max-width: 450px;
-webkit-transform: translate(40px, 80px) rotate(-4deg);
transform: translate(40px, 80px) rotate(-4deg);
}
.img1 img {
width: 100%;
}
.footer {
background: #020202;
min-height: 20em;
position: relative;
margin-bottom: -2px;
padding-top: 8em;
}
.footer span.comment {
display: block;
text-align: center;
margin: 1em auto 3em;
}
.footer h3 {
margin: 0 auto 1em;
text-align: center;
padding: 0 3em;
}
.footer h3 .outer {
border-bottom: none;
}
.pens {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
padding: 0 3em 0 2em;
margin: 0 auto;
}
.pens > div {
position: relative;
-webkit-box-flex: 1;
flex: 1 0 500px;
max-width: 500px;
margin: 2vmin;
-webkit-transition: 0.2s;
transition: 0.2s;
-webkit-filter: brightness(0.7) grayscale(100%);
filter: brightness(0.7) grayscale(100%);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.pens > div:hover {
-webkit-filter: brightness(1) grayscale(0%);
filter: brightness(1) grayscale(0%);
-webkit-transform: scale(1.01);
transform: scale(1.01);
}
.section.bottomContact {
min-height: 20vh;
padding-bottom: 100px;
text-align: center;
transform: translatey(-1px);
}
.social {
list-style-type: none;
padding: 0px;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
margin: 0 auto 2em;
text-align: center;
-webkit-box-pack: center;
justify-content: center;
}
.social li {
margin: 0px 15px;
}
.social li a {
text-decoration: none;
color: white;
border-radius: 100%;
width: 3.4rem;
height: 3.4rem;
display: block;
font-size: 18px;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
-webkit-transition: 0.2s;
transition: 0.2s;
border: solid 1px #333;
}
.social li a span {
position: relative;
-webkit-filter: grayscale(1);
filter: grayscale(1);
display: inline-block;
border-radius: 50%;
text-decoration: none;
width: 3rem;
height: 3rem;
outline: 0 solid;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.social li a:hover {
color: #fff;
opacity: 1;
-webkit-transform: translatey(-2px) scale(1);
transform: translatey(-2px) scale(1);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1);
}
.social li a:hover span {
-webkit-filter: grayscale(0);
filter: grayscale(0);
opacity: 1;
}
.social .icon-codepen {
opacity: 0.4;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23eee' d='M24.6 8.5c-.3-.4-.8-.5-1.6 0L8.7 18c-.4 0-.7.4-.7 1.2v9.5c0 .7.3 1 .7 1.3L23 39.6c.7.3 1.3.3 1.6 0L39.3 30c.5-.3.7-.8.7-1.3v-9.5c0-1-.7-1.2-.7-1.2L24.6 8.5zm-2 27.6L12 29l4.7-3.2 6 4.2v6zm2.7 0v-6l6-4 4.7 3-10.5 7zM24 27l-4.8-3 4.8-3.2 4.8 3.2-4.8 3zm-13.3-5.3l3.7 2.3-3.7 2.2v-4.5zm26.6 4.5L33.6 24l3.7-2.3v4.5zm-12-14.4L36 19.2l-4.7 3.2-6-4v-6.6zm-2.6 0v6.4l-6 4.2-4.8-3.2L22.2 12v-.2z'/%3E%3C/svg%3E");
}
.social .icon-twitter {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%231DA1F2' d='M15.2 31.44c2.4 0 4.47-.74 6.1-2.08-2.22 0-4-1.5-4.6-3.43.3.15.6.15.9.15.44 0 .88 0 1.33-.15-2.23-.44-3.87-2.38-3.87-4.76.75.3 1.5.6 2.23.6-1.36-.9-2.25-2.38-2.25-4.02 0-.9.15-1.8.6-2.53 2.38 2.98 6.1 4.9 10.12 5.06-.15-.3-.15-.6-.15-1.04 0-2.68 2.23-4.9 4.9-4.9 1.35 0 2.7.58 3.58 1.47 1.2-.27 2.24-.57 3.14-1.17-.3 1.05-1.05 2.1-2.1 2.68 1.05-.14 1.95-.3 2.84-.73-.6 1.04-1.5 1.78-2.53 2.53v.58c0 6.55-4.9 14-14 14-2.67 0-5.2-.9-7.43-2.24h1.2z'/%3E%3C/svg%3E");
}
.social .icon-linkedin {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230e76a8' d='M18.37 19.97V36h-5V19.96h5zm7.96 2.2c.66-1.27 2.3-2.6 4.7-2.6 5.05 0 5.98 3.32 5.98 7.64V36h-4.96v-7.8c0-1.86-.03-4.25-2.58-4.25-2.6 0-3 2.03-3 4.12V36H21.5V19.96h4.76v2.2h.07zM15.88 12c1.6 0 2.88 1.3 2.88 2.9 0 1.6-1.3 2.88-2.88 2.88-1.6 0-2.9-1.3-2.9-2.88 0-1.6 1.3-2.9 2.9-2.9z'/%3E%3C/svg%3E");
}
.social .icon-dribbble {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ea4c89' viewBox='0 0 1024 1024' version='1.1'%3e%3cpath d='M762.56 460.352c-3.328-16.448-8.384-32.64-14.912-48.128-6.4-15.168-14.336-29.824-23.616-43.52-9.152-13.568-19.648-26.304-31.232-37.888-11.584-11.584-24.32-22.08-37.888-31.232C641.216 290.368 626.56 282.368 611.392 275.968 595.968 269.44 579.712 264.384 563.264 261.056 546.432 257.6 529.088 255.808 511.744 255.808c-17.344 0-34.688 1.792-51.584 5.248C443.776 264.384 427.52 269.44 412.096 275.968c-15.168 6.464-29.824 14.4-43.52 23.616C355.008 308.736 342.272 319.232 330.688 330.816 319.168 342.4 308.672 355.136 299.456 368.704c-9.216 13.696-17.216 28.288-23.616 43.52C269.312 427.712 264.32 443.904 260.928 460.352 257.472 477.184 255.744 494.528 255.744 511.872c0 17.344 1.728 34.752 5.184 51.584 3.392 16.448 8.384 32.64 14.912 48.128 6.4 15.168 14.336 29.824 23.616 43.52 9.152 13.568 19.648 26.304 31.232 37.888 11.584 11.584 24.32 22.08 37.888 31.232 13.696 9.216 28.352 17.216 43.52 23.616 15.488 6.528 31.68 11.584 48.128 14.912 16.896 3.52 34.24 5.248 51.584 5.248 17.344 0 34.688-1.728 51.52-5.248 16.448-3.328 32.64-8.32 48.128-14.912 15.168-6.4 29.824-14.4 43.456-23.616 13.568-9.152 26.304-19.648 37.888-31.232 11.584-11.584 22.08-24.32 31.232-37.888 9.216-13.696 17.216-28.352 23.616-43.52 6.528-15.488 11.584-31.68 14.912-48.128 3.456-16.832 5.184-34.24 5.184-51.584C767.744 494.528 766.016 477.184 762.56 460.352zM730.304 509.696c-3.136-0.704-77.184-16.64-152.256-7.168C576.512 498.816 574.912 495.04 573.312 491.264 568.768 480.576 563.84 469.952 558.784 459.584c86.336-35.264 121.408-85.952 121.792-86.592C711.232 410.24 729.792 457.792 730.304 509.696zM656.128 347.776c-0.576 0.832-31.68 48.256-114.24 79.168C504.576 358.272 463.488 303.744 460.224 299.392c16.512-3.968 33.792-6.144 51.52-6.144C567.104 293.248 617.6 313.856 656.128 347.776zM459.392 299.584C459.392 299.584 459.328 299.648 459.392 299.584 459.328 299.648 459.072 299.712 458.688 299.776 458.944 299.712 459.136 299.648 459.392 299.584zM418.432 314.112c2.88 3.904 43.328 58.688 81.216 126.016-104.96 27.904-196.096 26.816-201.856 26.688C312 399.104 357.504 342.912 418.432 314.112zM293.12 511.872c0-2.368 0.128-4.608 0.192-6.912 3.84 0.064 111.872 2.56 224.448-31.168C524.032 486.08 529.984 498.56 535.488 510.976 532.608 511.808 529.728 512.64 526.912 513.6 408.896 551.744 349.056 657.92 349.056 657.92s0.064 0.064 0.064 0.128C314.304 619.264 293.12 568.064 293.12 511.872zM511.744 730.56c-52.928 0-101.44-18.816-139.264-50.112 2.88 2.304 4.864 3.84 4.864 3.84s41.92-91.456 171.584-136.576C549.44 547.52 549.888 547.392 550.4 547.2c30.784 79.936 43.456 146.88 46.72 166.016C570.88 724.416 542.016 730.56 511.744 730.56zM633.92 693.248C631.68 680.064 620.032 615.872 591.36 537.024c70.592-11.264 131.712 8.064 136.256 9.6C717.888 607.552 683.008 660.096 633.92 693.248z'/%3e%3c/svg%3e");
}
.water {
--height: 240px;
border-bottom: 100px solid #020202;
width: 100%;
z-index: 9999;
height: var(--height);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
.water .wave {
position: absolute;
width: 100%;
/*height from the svg file*/
height: var(--height);
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='198' width='1600'%3E%3Cpath d='m1625 95c-311 0-445.9-34.3-847-34-400 0-514 34-803 34v77h1650s0-48 0-77z' fill='%23020202'/%3E%3C/svg%3E");
-webkit-animation: waves 10s linear infinite;
animation: waves 10s linear infinite;
opacity: 1;
}
.water .wave:before {
content: "";
width: 100%;
height: var(--height);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='198' width='1600'%3E%3Cpath d='m1625 95c-311 0-445.9-34.3-847-34-400 0-514 34-803 34v77h1650s0-48 0-77z' fill='%23020202'/%3E%3C/svg%3E");
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
-webkit-animation: waves-reverse 10s linear infinite;
animation: waves-reverse 10s linear infinite;
}
.water .wave:after {
content: "";
width: 100%;
height: var(--height);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='198' width='1600'%3E%3Cpath d='m1625 95c-311 0-445.9-34.3-847-34-400 0-514 34-803 34v77h1650s0-48 0-77z' fill='%23020202'/%3E%3C/svg%3E");
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
-webkit-animation: waves 5s linear infinite;
animation: waves 5s linear infinite;
}
@-webkit-keyframes waves {
0% {
background-position: 0;
}
100% {
/* from width of the svg file */
background-position: 1600px;
}
}
@keyframes waves {
0% {
background-position: 0;
}
100% {
/* from width of the svg file */
background-position: 1600px;
}
}
@-webkit-keyframes waves-reverse {
0% {
background-position: 1600px;
}
100% {
background-position: 0;
}
}
@keyframes waves-reverse {
0% {
background-position: 1600px;
}
100% {
background-position: 0;
}
}
.nav-toggle {
position: fixed;
z-index: 999;
cursor: pointer;
top: 35px;
right: 50px;
width: 70px;
height: 70px;
overflow: hidden;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nav-toggle:hover {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.nav-toggle:hover::after {
width: 30%;
-webkit-transform: translate(-104%, 20px) rotate(-120deg);
transform: translate(-104%, 20px) rotate(-120deg);
}
.nav-toggle:hover::before {
width: 30%;
-webkit-transform: translate(-33%, 22px) rotate(140deg);
transform: translate(-33%, 22px) rotate(140deg);
}
.nav-toggle:before, .nav-toggle:after, .nav-toggle span {
opacity: 0.8;
position: absolute;
top: 50%;
left: 50%;
width: 90%;
height: 2px;
border-radius: 50%;
background: #777;
-webkit-transform: translate(-50%, -50%) rotate(-80deg);
transform: translate(-50%, -50%) rotate(-80deg);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nav-toggle:hover::before, .nav-toggle:hover::after, .nav-toggle:hover span {
opacity: 1;
background: goldenrod;
}
.nav-toggle:before, .nav-toggle:after {
content: "";
}
.nav-toggle:before {
width: 30%;
-webkit-transform: translate(17%, -1px) rotate(100deg);
transform: translate(17%, -1px) rotate(100deg);
}
.nav-toggle:after {
width: 50%;
-webkit-transform: translate(-90%, 5px) rotate(-80deg);
transform: translate(-90%, 5px) rotate(-80deg);
}
.nav-toggle .point {
width: 50%;
-webkit-transform: translate(-10%, -1px) rotate(-45deg);
transform: translate(-10%, -1px) rotate(-45deg);
}
.nav-toggle.open:before, .nav-toggle.open:after, .nav-toggle.open span {
transition: -webkit-transform 0.5s, transform 0.5s, opacity 0.1s, width 0.5s;
}
.nav-toggle.open span {
opacity: 0;
-webkit-transform: translate(50%, -50px) rotate(-45deg);
transform: translate(50%, -50px) rotate(-45deg);
}
.nav-toggle.open:before {
width: 75%;
-webkit-transform: translate(-50%, -50%) rotate(125deg);
transform: translate(-50%, -50%) rotate(125deg);
}
.nav-toggle.open:after {
width: 60%;
-webkit-transform: translate(-50%, -50%) rotate(35deg);
transform: translate(-50%, -50%) rotate(35deg);
}
.nav {
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
-webkit-transition-property: visibility;
transition-property: visibility;
}
.nav .navList {
width: 100%;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-transition: all 1s;
transition: all 1s;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.nav .navList a {
margin: 0 13vw;
display: block;
text-decoration: none;
color: #ffffff88;
letter-spacing: 1px;
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
height: 100%;
box-shadow: 10px 10px 20px #000;
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.15, 0.1, 0.25, 1.1);
transition: -webkit-transform 0.5s cubic-bezier(0.15, 0.1, 0.25, 1.1);
transition: transform 0.5s cubic-bezier(0.15, 0.1, 0.25, 1.1);
transition: transform 0.5s cubic-bezier(0.15, 0.1, 0.25, 1.1), -webkit-transform 0.5s cubic-bezier(0.15, 0.1, 0.25, 1.1);
background-color: #222;
}
.nav .navList a span {
position: absolute;
-webkit-animation: textBG 10s infinite;
animation: textBG 10s infinite;
font-size: 2.4em;
font-size: clamp(20px, 4vw, 40px);
font-weight: 500;
font-variation-settings: "wdth" 500;
font-variation-settings: "wght" 300;
font-family: "Raleway", Montserrat, Helvetica, Verdana, sans-serif;
-webkit-transition: all 0.2s;
transition: all 0.2s;
padding: 20px;
margin: 0 auto;
display: inline-block;
background: #ccc;
background: linear-gradient(-45deg, cornflowerBlue 20%, goldenrod 40%, RoyalBlue 60%, olivedrab 80%);
background-size: 400%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-backface-visibility: hidden;
}
.nav .navList a:nth-child(1) span {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.nav .navList a:nth-child(2) span {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.nav .navList a:nth-child(3) span {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.nav .navList a:nth-child(4) span {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.nav .navList a:nth-child(5) span {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.nav .navList a:nth-child(6) span {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.nav .navList a:hover {
background-color: #252525;
}
.nav .navList a:hover span {
font-variation-settings: "wght" 900;
}
.nav .navList a:active {
background-color: #2f2f2f;
}
.nav .navList a:first-child {
margin-top: 20vh;
}
.nav .navList a:last-child {
margin-bottom: 20vh;
}
.nav .navList a:nth-child(1) {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.nav .navList a:nth-child(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.nav .navList a:nth-child(3) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.nav .navList a:nth-child(4) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.nav .navList a:nth-child(5) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.nav .navList a:nth-child(6) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.nav .navList a:nth-child(odd) {
-webkit-transform: translatex(-150vw);
transform: translatex(-150vw);
border-top-left-radius: 40em;
border-bottom-right-radius: 40em;
}
.nav .navList a:nth-child(even) {
-webkit-transform: translatex(150vw);
transform: translatex(150vw);
border-bottom-left-radius: 40em;
border-top-right-radius: 40em;
}
.nav.active {
visibility: visible;
}
.nav.active .navList a {
opacity: 1;
-webkit-transform: translatex(0vw);
transform: translatex(0vw);
}
@-webkit-keyframes morph {
50% {
font-variation-settings: "wght" 900;
}
}
@keyframes morph {
50% {
font-variation-settings: "wght" 900;
}
}
@-webkit-keyframes textBG {
50% {
background-position: 100% 50%;
}
}
@keyframes textBG {
50% {
background-position: 100% 50%;
}
}
.btn-split {
position: relative;
font-size: 2em;
color: #e2e1df;
}
.btn-split:before {
content: "";
display: block;
position: absolute;
background: goldenrod;
top: 50%;
left: 30px;
right: 30px;
height: 1px;
margin-top: 1px;
border-radius: 3px;
-webkit-transform: scale(0) rotate(-90deg);
transform: scale(0) rotate(-90deg);
-webkit-transition: 0.2s ease-in-out all;
transition: 0.2s ease-in-out all;
z-index: 10;
}
.btn-split > span {
-webkit-clip-path: polygon(0 50%, 0 115%, 100% 115%, 100% 50%);
clip-path: polygon(0 50%, 0 115%, 100% 115%, 100% 50%);
display: block;
-webkit-transition: 0.2s ease-in-out all;
transition: 0.2s ease-in-out all;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.btn-split:after {
content: attr(data-hover);
position: absolute;
display: block;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: 0.2s ease-in-out all;
transition: 0.2s ease-in-out all;
-webkit-clip-path: polygon(0 0, 0 64%, 100% 64%, 100% 0);
clip-path: polygon(0 0, 0 64%, 100% 64%, 100% 0);
}
.btn-split:hover, .btn-split:focus {
outline: none;
color: #e2e1df;
}
.btn-split:hover:before, .btn-split:focus:before {
-webkit-transform: scale(1) rotate(-90deg);
transform: scale(1) rotate(-90deg);
}
.btn-split:hover > span, .btn-split:focus > span {
-webkit-transform: translateY(2px) skewX(0deg) rotate(-90deg);
transform: translateY(2px) skewX(0deg) rotate(-90deg);
}
.btn-split:hover:after, .btn-split:focus:after {
-webkit-transform: translateY(-3px) skewX(0deg) rotate(-90deg);
transform: translateY(-3px) skewX(0deg) rotate(-90deg);
color: goldenrod;
}
.btn-strike {
text-align: center;
display: inline-block;
color: #fff;
}
.quillWrap {
cursor: pointer;
position: fixed;
left: 60px;
top: -10px;
width: 50px;
z-index: 12;
-webkit-transform: translate(0, 9px) scale(-1, 1);
transform: translate(0, 9px) scale(-1, 1);
-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.quillWrap #quill {
opacity: 1;
-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
-webkit-transform: translate(13px, 33px) rotate(0deg);
transform: translate(13px, 33px) rotate(0deg);
}
.quillWrap #quill path {
fill: #555;
-webkit-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.quillWrap .inkPot {
max-width: 45px;
padding: 10px;
border: 1px solid #ffffff55;
-webkit-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 50%;
}
.quillWrap .inkPot path {
fill: #ffffff55;
-webkit-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.quillWrap span {
color: #ffffff55;
font-size: 1em;
font-family: Prata, Georgia, "Times New Roman", serif;
display: inline-block;
-webkit-transform: scaleX(-1) translate(13px, -7px);
transform: scaleX(-1) translate(13px, -7px);
-webkit-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.quillWrap:hover #quill {
position: relative;
-webkit-transform: translate(5px, 15px) rotate(20deg);
transform: translate(5px, 15px) rotate(20deg);
opacity: 1;
}
.quillWrap:hover #quill path {
fill: goldenrod;
}
.quillWrap:hover .inkPot {
border: 1px solid #fff;
}
.quillWrap:hover .inkPot path {
fill: #fff;
}
.quillWrap:hover span {
color: #fff;
}
#contactForm {
display: -webkit-box;
display: flex;
overflow: hidden;
width: 20vw;
min-width: 250px;
box-shadow: 10px 10px 40px #000;
padding-bottom: 50px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
background: #000;
padding: 20px 20px 60px;
height: 100vh;
position: fixed;
left: 2vw;
top: 0;
z-index: 11;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-110vh);
transform: translateY(-110vh);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
#contactForm h1 {
font-size: 2em;
font-weight: 100;
opacity: 0.5;
margin: 0 auto 10px;
text-align: center;
-webkit-transform: rotatex(90deg);
transform: rotatex(90deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.5);
transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.5);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.5);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.5), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.5);
}
#contactForm.active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#contactForm.active h1 {
-webkit-animation: standup 1s 1.5s ease forwards;
animation: standup 1s 1.5s ease forwards;
}
#contactForm input,
#contactForm textarea {
width: 100%;
padding: 10px 20px;
color: #999999;
font-size: 1em;
line-height: 1.5;
letter-spacing: 0.8px;
background-color: black;
border: 0;
margin-bottom: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
margin-right: 1px;
}
#contactForm #inputs .block {
-webkit-transform: translateY(-100vh) rotate(90deg);
transform: translateY(-100vh) rotate(90deg);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.05);
transition: -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.05);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.05);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.05), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.05);
}
#contactForm #inputs .block:nth-of-type(even) {
-webkit-transform: translateY(-100vh) rotate(-90deg);
transform: translateY(-100vh) rotate(-90deg);
}
#contactForm #inputs .block.active {
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
opacity: 1;
-webkit-animation: 2s 0.2s explode_title forwards;
animation: 2s 0.2s explode_title forwards;
}
@-webkit-keyframes standup {
100% {
-webkit-transform: rotatex(0deg);
transform: rotatex(0deg);
}
}
@keyframes standup {
100% {
-webkit-transform: rotatex(0deg);
transform: rotatex(0deg);
}
}
@-webkit-keyframes explode_title {
10% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
20% {
-webkit-transform: scaleY(1.1);
transform: scaleY(1.1);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
30% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
40% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
}
@keyframes explode_title {
10% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
20% {
-webkit-transform: scaleY(1.1);
transform: scaleY(1.1);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
30% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
40% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0 bottom 0;
transform-origin: 0 bottom 0;
}
}
#contactForm textarea {
overflow: auto;
resize: none;
min-height: 8em;
}
#contactForm input[type="submit"] {
-webkit-transform: translateX(-400px) rotate(-20deg);
transform: translateX(-400px) rotate(-20deg);
-webkit-transition: 3s;
transition: 3s;
font-weight: 100;
color: #262626;
width: 50%;
margin: 0 auto;
padding: 0.5em;
position: relative;
cursor: pointer;
font-size: 1em;
-webkit-transition: none;
transition: none;
background: goldenrod;
color: #000;
}
#contactForm input[type="submit"].block.active {
-webkit-animation: 0.5s 2s stumble forwards;
animation: 0.5s 2s stumble forwards;
}
@-webkit-keyframes stumble {
0% {
-webkit-transform: scalex(1.2) translateX(-400px) rotate(0deg);
transform: scalex(1.2) translateX(-400px) rotate(0deg);
}
70% {
-webkit-transform: scalex(0.8) skewx(-20deg) translateX(30px) rotate(0deg);
transform: scalex(0.8) skewx(-20deg) translateX(30px) rotate(0deg);
}
100% {
-webkit-transform: scalex(1) translateX(0) rotate(0);
transform: scalex(1) translateX(0) rotate(0);
}
}
@keyframes stumble {
0% {
-webkit-transform: scalex(1.2) translateX(-400px) rotate(0deg);
transform: scalex(1.2) translateX(-400px) rotate(0deg);
}
70% {
-webkit-transform: scalex(0.8) skewx(-20deg) translateX(30px) rotate(0deg);
transform: scalex(0.8) skewx(-20deg) translateX(30px) rotate(0deg);
}
100% {
-webkit-transform: scalex(1) translateX(0) rotate(0);
transform: scalex(1) translateX(0) rotate(0);
}
}
#contactForm input ~ label,
#contactForm textarea ~ label {
font-weight: bold;
position: absolute;
width: 90%;
top: 12px;
left: 20px;
text-align: left;
display: inline-block;
font-size: 1em;
font-weight: 300;
color: #6b6b6b;
pointer-events: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
padding-right: 20px;
-webkit-transform-origin: top right;
transform-origin: top right;
}
#contactForm input:focus ~ label,
#contactForm textarea:focus ~ label {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: translate(-100%);
transform: translate(-100%);
opacity: 0;
}
#contactForm input:focus.error ~ label,
#contactForm textarea.error:focus ~ label {
opacity: 0;
}
#contactForm input.error ~ label,
#contactForm textarea.error ~ label {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity: 1;
text-align: right;
}
#contactForm input.valid,
#contactForm textarea.valid {
border-left: 4px solid green;
}
#contactForm input.error,
#contactForm textarea.error {
border-left: 4px solid red;
}
#contactForm label.error {
display: none !important;
}
#contactForm input.valid ~ label,
#contactForm textarea.valid ~ label {
display: none;
}
#contactForm #inputs input:-internal-autofill-selected {
-webkit-box-shadow: 0 0 0px 500px #000 inset;
-webkit-text-fill-color: #6b6b6b;
}
#submit-loader {
display: none;
position: relative;
left: 0;
top: 1.8rem;
width: 100%;
text-align: center;
margin-bottom: 4.2rem;
}
#submit-loader .text-loader {
display: none;
color: #FFFFFF;
letter-spacing: .2rem;
text-transform: uppercase;
}
.s-loader {
margin: 1.2rem auto 3rem;
width: 70px;
text-align: center;
-webkit-transform: translateX(0.45rem);
transform: translateX(0.45rem);
}
.s-loader > div {
width: .6rem;
height: .6rem;
background-color: #FFFFF9;
border-radius: 100%;
display: inline-block;
margin-right: .9rem;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.s-loader .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.s-loader .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.btn {
--color-normal: rgba(255, 255, 255, 1);
--color-normal2: rgba(255, 255, 255, 1);
--color-hover: rgba(255, 255, 255, 1);
--color-dim: goldenrod;
position: relative;
font-family: sans-serif;
padding: 2px 20px 0;
display: inline-block;
height: 100%;
font-size: 16px;
line-height: 34px;
font-family: "Raleway", Montserrat, Helvetica, Verdana, sans-serif;
font-variation-settings: "wght" 300;
letter-spacing: -0.025em;
word-spacing: -0.05em;
-webkit-transition: 0.2s;
transition: 0.2s;
text-align: center;
cursor: pointer;
margin: 20px auto;
background: transparent;
border: 0;
color: var(--color-dim);
text-decoration: none;
}
.btn:hover {
font-variation-settings: "wght" 700;
}
.btn:active {
color: var(--color-dim);
}
.btn:focus {
color: var(--color-dim);
}
.btn:before, .btn:after {
position: absolute;
content: "";
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-sizing: border-box;
-webkit-transform: scale(0.3);
transform: scale(0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn:before {
border-top: 3px solid #666;
border-left: 3px solid #666;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.btn:after {
border-bottom: 3px solid #666;
border-right: 3px solid #666;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.btn:hover:before, .btn:hover:after {
border-width: 1px;
-webkit-transform: scaleY(1);
transform: scaleY(1);
border-color: #fff;
}
.btn:hover > span span::before {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
.btn:hover > span span::after {
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
}
.btn.gold {
--color-hover: goldenrod;
}
.btn > span {
display: inline-block;
}
.btn > span:before {
-webkit-transform-origin: center;
transform-origin: center;
content: "";
display: block;
left: -10px;
top: 0px;
position: absolute;
width: 1px;
height: 200vh;
background: #fff;
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
-webkit-transition: all 0.6s;
transition: all 0.6s;
opacity: 0.1;
}
.btn > span:after {
content: "";
-webkit-transform-origin: center;
transform-origin: center;
display: block;
left: 0px;
top: -10px;
position: absolute;
width: 200vh;
height: 1px;
background: #fff;
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
-webkit-transition: all 0.6s;
transition: all 0.6s;
opacity: 0.1;
}
.btn > span span {
display: inline-block;
}
.btn > span span:before {
content: "";
-webkit-transform-origin: center;
transform-origin: center;
display: block;
right: -10px;
top: 100%;
position: absolute;
width: 1px;
height: 200vh;
background: #fff;
-webkit-transform: translateY(-50%) scaleY(0);
transform: translateY(-50%) scaleY(0);
-webkit-transition: all 1s;
transition: all 1s;
opacity: 0.1;
}
.btn > span span:after {
content: "";
-webkit-transform-origin: center;
transform-origin: center;
display: block;
left: 100%;
bottom: -10px;
position: absolute;
width: 200vh;
height: 1px;
background: #fff;
-webkit-transform: translateX(-50%) scaleX(0);
transform: translateX(-50%) scaleX(0);
-webkit-transition: all 1s;
transition: all 1s;
opacity: 0.1;
}
.radiusWrap {
position: absolute;
right: 10vw;
bottom: -4em;
opacity: 0.6;
}
.radiusWrap .radius {
fill: none;
stroke: #616161;
stroke-width: 1px;
stroke-dasharray: 3px;
stroke-dashoffset: 10%;
}
@media only screen and (max-width: 1000px) {
.radiusWrap {
display: none;
}
}
.plusBox {
pointer-events: none;
position: fixed;
z-index: 2;
width: 100%;
height: 100vh;
left: 0;
top: 0;
}
.plusBox .plus {
stroke: #666;
-webkit-transform: scale(1);
transform: scale(1);
display: block;
position: absolute;
}
.plusBox .plus:nth-of-type(1) {
left: 10px;
top: 10px;
}
.plusBox .plus:nth-of-type(2) {
right: 10px;
top: 10px;
}
.plusBox .plus:nth-of-type(3) {
left: 10px;
bottom: 10px;
}
.plusBox .plus:nth-of-type(4) {
right: 10px;
bottom: 10px;
}
.plusBar {
top: 0;
position: fixed;
z-index: 2;
width: 100%;
padding: 0 20px;
height: 100px;
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
pointer-events: none;
}
.plusBar.plusBar2 {
top: inherit;
bottom: 0;
}
.plusBar .plus {
-webkit-transform: scale(1);
transform: scale(1);
display: block;
stroke: #666;
}
.heroBG {
pointer-events: none;
height: 100vh;
width: 100%;
position: fixed;
z-index: 1;
overflow: hidden;
}
.heroBG .shape {
opacity: 0.4;
position: absolute;
height: auto;
}
.heroBG .shape path {
fill: none;
}
.heroBG .shape-1 {
width: 122px;
top: 15%;
left: 70%;
}
.heroBG .shape-2 {
width: 106px;
bottom: 15%;
left: 30%;
}
.heroBG .shape-3 {
width: 136px;
top: 20%;
left: 80%;
}
.heroBG .shape-4 {
width: 79px;
top: 50%;
left: 10%;
}
.heroBG .shape-5 {
width: 49px;
top: 30%;
right: 75%;
}
.heroBG .shape-6 {
width: 78px;
top: 5%;
left: 80%;
}
.heroBG .shape-7 {
width: 57px;
bottom: 15%;
right: 20%;
}
.heroBG .shape-8 {
width: 71px;
bottom: 15%;
right: 40%;
}
.heroBG .shape-9 {
width: 59px;
top: 25%;
left: 40%;
}
.chartBarsWrap {
margin: 0 0 2em 0;
}
.chartBars {
position: relative;
max-width: 600px;
height: 300px;
}
.chartBars .bars {
display: -webkit-box;
display: flex;
justify-content: space-around;
border-left: 1px solid #bbb;
border-bottom: 1px solid #bbb;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.chartBars .bars li {
display: inline-block;
height: 100%;
margin: 0 0 2px 0;
text-align: center;
position: relative;
font-size: 16px;
}
.chartBars .bars li .bar {
width: 100%;
background: #49e;
font-size: 1.5em;
color: #fff;
bottom: 0;
height: 1.5em;
overflow: hidden;
font-weight: bold;
-webkit-transition: 1.5s height cubic-bezier(0.6, 0.4, 0.4, 1.1);
transition: 1.5s height cubic-bezier(0.6, 0.4, 0.4, 1.1);
}
.chartBars .bars li .bar:after {
content: "%";
font-size: 22px !important;
vertical-align: top;
color: rgba(255, 255, 255, 0.8);
margin-right: -8px;
}
.chartBars .bars li b {
color: #eee;
width: 100%;
position: absolute;
bottom: -2em;
left: 0;
text-align: center;
}
.chartBars .numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
left: -50px;
}
.chartBars .numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 59px;
position: relative;
font-size: 13px;
bottom: 11px;
right: -9px;
color: #eee;
}
.chartBars .numbers li:after {
content: "\00af";
position: relative;
right: -5px;
font-size: 20px;
top: 7px;
color: rgba(255, 255, 255, 0.34);
}
.chartBars .numbers li:first-of-type {
height: 63px;
margin-top: -1px;
}
.chartBarsWrap.chartBarsHorizontal {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.chartBarsWrap.chartBarsHorizontal .bars b {
color: #9b9dad;
width: 100%;
position: absolute;
bottom: initial;
top: 0.3em;
left: -104%;
text-align: right;
font-size: 24px;
}
.chartBarsWrap.chartBarsHorizontal .chartBars {
height: 200px;
}
.chartBarsWrap.chartBarsHorizontal .chartBars .bars {
border: 0;
}
.chartBarsWrap.chartBarsHorizontal .chartBars .bars .bar {
width: 0;
text-align: right;
font-size: 1.5em;
border-radius: 0 0 0.7em 0;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: end;
justify-content: flex-end;
display: -webkit-box;
display: flex;
align-items: center;
-webkit-transition: 3s width ease;
transition: 3s width ease;
}
.chartBarsWrap.chartBarsHorizontal .chartBars .bars .bar:after {
font-size: 0.6em;
margin-right: 15px;
}
.bars li .bar.greenBarFlat {
background-color: #6b8e23;
}
.bars li .bar.blueBarFlat {
background-color: #49e;
}
.bars li .bar.orangeBarFlat {
background-color: orange;
}
.bars li .bar.purpleBarFlat {
background-color: #6e46af;
}
.bars li .bar.maroonBarFlat {
background-color: #7b6b38;
}
#epsilon {
position: relative;
}
#gallery {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
padding: 10vw 0;
}
#gallery > div {
-webkit-transition: all 0.3s;
transition: all 0.3s;
display: inline-block;
overflow: hidden;
position: relative;
height: 10vh;
-webkit-box-flex: 1;
flex-grow: 1;
}
#gallery > div:hover {
z-index: 2;
-webkit-transform: rotate(-2deg) scale(1.3);
transform: rotate(-2deg) scale(1.3);
}
#gallery > div:last-child {
-webkit-box-flex: 5;
flex-grow: 5;
}
#gallery > div::after {
content: "";
position: absolute;
opacity: 0;
-webkit-transform: scale(0.94);
transform: scale(0.94);
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-transition: 0.4s;
transition: 0.4s;
pointer-events: none;
background: transparent;
}
#gallery > div:hover::after {
opacity: 1;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: scale(1);
transform: scale(1);
}
#gallery > div:last-child:hover::after {
opacity: 0;
-webkit-transition: 0;
transition: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
#gallery > div > a {
opacity: 0;
position: absolute;
color: #000;
background-color: #000;
font: bold 4em "Helvetica";
mix-blend-mode: difference;
width: 100%;
height: 100%;
-webkit-transition: all ease 1s;
transition: all ease 1s;
}
#gallery > div > img {
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
-webkit-filter: brightness(70%) grayscale(1);
filter: brightness(70%) grayscale(1);
-webkit-transform-origin: center top;
transform-origin: center top;
max-height: 100%;
min-width: 100%;
}
#gallery > div:hover img {
-webkit-filter: brightness(100%) grayscale(0);
filter: brightness(100%) grayscale(0);
-webkit-transform: scale(1);
transform: scale(1);
-webkit-font-smoothing: antialiased;
}
#gallery div,
#gallery a {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
text-decoration: none;
}
[id^="lightbox-"] {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: -webkit-box;
display: flex;
opacity: 0;
-webkit-transition: opacity 450ms ease-in-out;
transition: opacity 450ms ease-in-out;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
pointer-events: none;
z-index: 111;
}
[id^="lightbox-"]:target {
opacity: 1;
pointer-events: inherit;
}
[id^="lightbox-"] .content {
max-width: 1000px;
color: #fff;
}
[id^="lightbox-"] .content > * {
-webkit-transition: all 450ms ease-in-out;
transition: all 450ms ease-in-out;
}
[id^="lightbox-"] img {
max-height: 90vh;
max-width: 100%;
margin: 0;
padding: 0;
}
[id^="lightbox-"] a.close {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100vw;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
}
#particle-canvas {
position: absolute;
width: 100vw;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.toolbox {
margin-top: 7vw;
}
.blobs {
min-height: 100vh;
width: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-align: stretch;
align-items: stretch;
-webkit-box-pack: space-evenly;
justify-content: space-evenly;
overflow: hidden;
position: absolute;
}
.blobs::before, .blobs::after {
content: "";
width: 70vmax;
height: 60vmax;
position: absolute;
z-index: -1;
background: rgba(255, 255, 255, 0.03);
left: 20vmin;
top: 20vmin;
-webkit-animation: squish 10s linear infinite alternate, spin 40s linear infinite;
animation: squish 10s linear infinite alternate, spin 40s linear infinite;
z-index: 0;
will-change: border-radius, transform;
-webkit-transform-origin: 55% 55%;
transform-origin: 55% 55%;
pointer-events: none;
}
.blobs::after {
width: 60vmin;
height: 50vmin;
left: auto;
right: 20vmin;
top: auto;
bottom: 20vmin;
animation: squish 10s linear infinite alternate, spin 40s linear infinite reverse;
-webkit-transform-origin: 20% 20%;
transform-origin: 20% 20%;
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes squish {
0% {
border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
}
100% {
border-radius: 40% 60%;
}
}
@keyframes squish {
0% {
border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
}
100% {
border-radius: 40% 60%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment