Created
October 30, 2020 00:39
-
-
Save tvvocold/5e0b576e0efccca2b6b1cf6b9fe0b8fe to your computer and use it in GitHub Desktop.
404 Page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="hamburger-menu"> | |
| <button class="burger" data-state="closed"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </button> | |
| </div> | |
| <nav data-state="closed"> | |
| <ul> | |
| <li> | |
| <a href="https://wwads.cn">主页</a> | |
| </li> | |
| <li> | |
| <a href="https://wwads.cn/knowledge-base">帮助文档</a> | |
| </li> | |
| <li> | |
| <a href="https://wwads.cn/user/tickets/create">提交工单</a> | |
| </li> | |
| <li> | |
| <a href="https://wwads.cn/contact">联系我们</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <main> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-6 align-self-center"> | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" | |
| viewBox="0 0 800 600"> | |
| <g> | |
| <defs> | |
| <clipPath id="GlassClip"> | |
| <path | |
| d="M380.857,346.164c-1.247,4.651-4.668,8.421-9.196,10.06c-9.332,3.377-26.2,7.817-42.301,3.5 | |
| s-28.485-16.599-34.877-24.192c-3.101-3.684-4.177-8.66-2.93-13.311l7.453-27.798c0.756-2.82,3.181-4.868,6.088-5.13 | |
| c6.755-0.61,20.546-0.608,41.785,5.087s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z" /> | |
| </clipPath> | |
| <clipPath id="cordClip"> | |
| <rect width="800" height="600" /> | |
| </clipPath> | |
| </defs> | |
| <g id="planet"> | |
| <circle fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" cx="572.859" cy="108.803" | |
| r="90.788" /> | |
| <circle id="craterBig" fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" cx="548.891" | |
| cy="62.319" r="13.074" /> | |
| <circle id="craterSmall" fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" cx="591.743" | |
| cy="158.918" r="7.989" /> | |
| <path id="ring" fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" | |
| stroke-miterlimit="10" d=" | |
| M476.562,101.461c-30.404,2.164-49.691,4.221-49.691,8.007c0,6.853,63.166,12.408,141.085,12.408s141.085-5.555,141.085-12.408 | |
| c0-3.378-15.347-4.988-40.243-7.225" /> | |
| <path id="ringShadow" opacity="0.5" fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" | |
| stroke-miterlimit="10" d=" | |
| M483.985,127.43c23.462,1.531,52.515,2.436,83.972,2.436c36.069,0,68.978-1.19,93.922-3.149" /> | |
| </g> | |
| <g id="stars"> | |
| <g id="starsBig"> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="518.07" y1="245.375" x2="518.07" y2="266.581" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="508.129" y1="255.978" x2="528.01" y2="255.978" /> | |
| </g> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="154.55" y1="231.391" x2="154.55" y2="252.598" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="144.609" y1="241.995" x2="164.49" y2="241.995" /> | |
| </g> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="320.135" y1="132.746" x2="320.135" y2="153.952" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="310.194" y1="143.349" x2="330.075" y2="143.349" /> | |
| </g> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="200.67" y1="483.11" x2="200.67" y2="504.316" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="210.611" y1="493.713" x2="190.73" y2="493.713" /> | |
| </g> | |
| </g> | |
| <g id="starsSmall"> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="432.173" y1="380.52" x2="432.173" y2="391.83" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="426.871" y1="386.175" x2="437.474" y2="386.175" /> | |
| </g> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="489.555" y1="299.765" x2="489.555" y2="308.124" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="485.636" y1="303.945" x2="493.473" y2="303.945" /> | |
| </g> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="231.468" y1="291.009" x2="231.468" y2="299.369" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="227.55" y1="295.189" x2="235.387" y2="295.189" /> | |
| </g> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="244.032" y1="547.539" x2="244.032" y2="555.898" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="247.95" y1="551.719" x2="240.113" y2="551.719" /> | |
| </g> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="186.359" y1="406.967" x2="186.359" y2="415.326" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="190.277" y1="411.146" x2="182.44" y2="411.146" /> | |
| </g> | |
| <g> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="480.296" y1="406.967" x2="480.296" y2="415.326" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| x1="484.215" y1="411.146" x2="476.378" y2="411.146" /> | |
| </g> | |
| </g> | |
| <g id="circlesBig"> | |
| <circle fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| cx="588.977" cy="255.978" r="7.952" /> | |
| <circle fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| cx="450.066" cy="320.259" r="7.952" /> | |
| <circle fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| cx="168.303" cy="353.753" r="7.952" /> | |
| <circle fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| cx="429.522" cy="201.185" r="7.952" /> | |
| <circle fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| cx="200.67" cy="176.313" r="7.952" /> | |
| <circle fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| cx="133.343" cy="477.014" r="7.952" /> | |
| <circle fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| cx="283.521" cy="568.033" r="7.952" /> | |
| <circle fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" | |
| cx="413.618" cy="482.387" r="7.952" /> | |
| </g> | |
| <g id="circlesSmall"> | |
| <circle fill="#0E0620" cx="549.879" cy="296.402" r="2.651" /> | |
| <circle fill="#0E0620" cx="253.29" cy="229.24" r="2.651" /> | |
| <circle fill="#0E0620" cx="434.824" cy="263.931" r="2.651" /> | |
| <circle fill="#0E0620" cx="183.708" cy="544.176" r="2.651" /> | |
| <circle fill="#0E0620" cx="382.515" cy="530.923" r="2.651" /> | |
| <circle fill="#0E0620" cx="130.693" cy="305.608" r="2.651" /> | |
| <circle fill="#0E0620" cx="480.296" cy="477.014" r="2.651" /> | |
| </g> | |
| </g> | |
| <g id="spaceman" clip-path="url(cordClip)"> | |
| <path id="cord" fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" | |
| stroke-linejoin="round" stroke-miterlimit="10" | |
| d=" | |
| M273.813,410.969c0,0-54.527,39.501-115.34,38.218c-2.28-0.048-4.926-0.241-7.841-0.548 | |
| c-68.038-7.178-134.288-43.963-167.33-103.87c-0.908-1.646-1.793-3.3-2.654-4.964c-18.395-35.511-37.259-83.385-32.075-118.817" /> | |
| <path id="backpack" fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" | |
| stroke-linejoin="round" stroke-miterlimit="10" d=" | |
| M338.164,454.689l-64.726-17.353c-11.086-2.972-17.664-14.369-14.692-25.455l15.694-58.537 | |
| c3.889-14.504,18.799-23.11,33.303-19.221l52.349,14.035c14.504,3.889,23.11,18.799,19.221,33.303l-15.694,58.537 | |
| C360.647,451.083,349.251,457.661,338.164,454.689z" /> | |
| <g id="antenna"> | |
| <line fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" x1="323.396" y1="236.625" x2="295.285" y2="353.753" /> | |
| <circle fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" cx="323.666" cy="235.617" r="6.375" /> | |
| </g> | |
| <g id="armR"> | |
| <path fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" d=" | |
| M360.633,363.039c1.352,1.061,4.91,5.056,5.824,6.634l27.874,47.634c3.855,6.649,1.59,15.164-5.059,19.02l0,0 | |
| c-6.649,3.855-15.164,1.59-19.02-5.059l-5.603-9.663" /> | |
| <path fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" d=" | |
| M388.762,434.677c5.234-3.039,7.731-8.966,6.678-14.594c2.344,1.343,4.383,3.289,5.837,5.793 | |
| c4.411,7.596,1.829,17.33-5.767,21.741c-7.596,4.411-17.33,1.829-21.741-5.767c-1.754-3.021-2.817-5.818-2.484-9.046 | |
| C375.625,437.355,383.087,437.973,388.762,434.677z" /> | |
| </g> | |
| <g id="armL"> | |
| <path fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" d=" | |
| M301.301,347.66c-1.702,0.242-5.91,1.627-7.492,2.536l-47.965,27.301c-6.664,3.829-8.963,12.335-5.134,18.999h0 | |
| c3.829,6.664,12.335,8.963,18.999,5.134l9.685-5.564" /> | |
| <path fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" d=" | |
| M241.978,395.324c-3.012-5.25-2.209-11.631,1.518-15.977c-2.701-0.009-5.44,0.656-7.952,2.096 | |
| c-7.619,4.371-10.253,14.09-5.883,21.71c4.371,7.619,14.09,10.253,21.709,5.883c3.03-1.738,5.35-3.628,6.676-6.59 | |
| C252.013,404.214,245.243,401.017,241.978,395.324z" /> | |
| </g> | |
| <g id="body"> | |
| <path fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" d=" | |
| M353.351,365.387c-7.948,1.263-16.249,0.929-24.48-1.278c-8.232-2.207-15.586-6.07-21.836-11.14 | |
| c-17.004,4.207-31.269,17.289-36.128,35.411l-1.374,5.123c-7.112,26.525,8.617,53.791,35.13,60.899l0,0 | |
| c26.513,7.108,53.771-8.632,60.883-35.158l1.374-5.123C371.778,395.999,365.971,377.536,353.351,365.387z" /> | |
| <path fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" d=" | |
| M269.678,394.912L269.678,394.912c26.3,20.643,59.654,29.585,93.106,25.724l2.419-0.114" /> | |
| </g> | |
| <g id="legs"> | |
| <g id="legR"> | |
| <path fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" d=" | |
| M312.957,456.734l-14.315,53.395c-1.896,7.07,2.299,14.338,9.37,16.234l0,0c7.07,1.896,14.338-2.299,16.234-9.37l17.838-66.534 | |
| C333.451,455.886,323.526,457.387,312.957,456.734z" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" x1="304.883" y1="486.849" x2="330.487" y2="493.713" /> | |
| </g> | |
| <g id="legL"> | |
| <path fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" d=" | |
| M296.315,452.273L282,505.667c-1.896,7.07-9.164,11.265-16.234,9.37l0,0c-7.07-1.896-11.265-9.164-9.37-16.234l17.838-66.534 | |
| C278.993,441.286,286.836,447.55,296.315,452.273z" /> | |
| <line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" x1="262.638" y1="475.522" x2="288.241" y2="482.387" /> | |
| </g> | |
| </g> | |
| <g id="head"> | |
| <ellipse transform="matrix(0.259 -0.9659 0.9659 0.259 -51.5445 563.2371)" fill="#FFFFFF" | |
| stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" cx="341.295" cy="315.211" rx="61.961" ry="60.305" /> | |
| <path id="headStripe" fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" | |
| stroke-linejoin="round" stroke-miterlimit="10" d=" | |
| M330.868,261.338c-7.929,1.72-15.381,5.246-21.799,10.246" /> | |
| <path fill="#FFFFFF" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" | |
| stroke-miterlimit="10" d=" | |
| M380.857,346.164c-1.247,4.651-4.668,8.421-9.196,10.06c-9.332,3.377-26.2,7.817-42.301,3.5s-28.485-16.599-34.877-24.192 | |
| c-3.101-3.684-4.177-8.66-2.93-13.311l7.453-27.798c0.756-2.82,3.181-4.868,6.088-5.13c6.755-0.61,20.546-0.608,41.785,5.087 | |
| s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z" /> | |
| <g clip-path="url(#GlassClip)"> | |
| <polygon id="glassShine" fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" points=" | |
| 278.436,375.599 383.003,264.076 364.393,251.618 264.807,364.928 " /> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| </div> | |
| <div class="col-md-6 align-self-center"> | |
| <h1>404</h1> | |
| <h2>UH OH! 看来你走丢了</h2> | |
| <p>你要寻找的这个地方不存在，不过你可以点击下方按钮回家；） | |
| </p> | |
| <a href="https://wwads.cn"><button class="btn green">带我回家</button></a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| gsap.set("svg", { visibility: "visible" }); | |
| gsap.to("#headStripe", { | |
| y: 0.5, | |
| rotation: 1, | |
| yoyo: true, | |
| repeat: -1, | |
| ease: "sine.inOut", | |
| duration: 1 | |
| }); | |
| gsap.to("#spaceman", { | |
| y: 0.5, | |
| rotation: 1, | |
| yoyo: true, | |
| repeat: -1, | |
| ease: "sine.inOut", | |
| duration: 1 | |
| }); | |
| gsap.to("#craterSmall", { | |
| x: -3, | |
| yoyo: true, | |
| repeat: -1, | |
| duration: 1, | |
| ease: "sine.inOut" | |
| }); | |
| gsap.to("#craterBig", { | |
| x: 3, | |
| yoyo: true, | |
| repeat: -1, | |
| duration: 1, | |
| ease: "sine.inOut" | |
| }); | |
| gsap.to("#planet", { | |
| rotation: -2, | |
| yoyo: true, | |
| repeat: -1, | |
| duration: 1, | |
| ease: "sine.inOut", | |
| transformOrigin: "50% 50%" | |
| }); | |
| gsap.to("#starsBig g", { | |
| rotation: "random(-30,30)", | |
| transformOrigin: "50% 50%", | |
| yoyo: true, | |
| repeat: -1, | |
| ease: "sine.inOut" | |
| }); | |
| gsap.fromTo( | |
| "#starsSmall g", | |
| { scale: 0, transformOrigin: "50% 50%" }, | |
| { scale: 1, transformOrigin: "50% 50%", yoyo: true, repeat: -1, stagger: 0.1 } | |
| ); | |
| gsap.to("#circlesSmall circle", { | |
| y: -4, | |
| yoyo: true, | |
| duration: 1, | |
| ease: "sine.inOut", | |
| repeat: -1 | |
| }); | |
| gsap.to("#circlesBig circle", { | |
| y: -2, | |
| yoyo: true, | |
| duration: 1, | |
| ease: "sine.inOut", | |
| repeat: -1 | |
| }); | |
| gsap.set("#glassShine", { x: -68 }); | |
| gsap.to("#glassShine", { | |
| x: 80, | |
| duration: 2, | |
| rotation: -30, | |
| ease: "expo.inOut", | |
| transformOrigin: "50% 50%", | |
| repeat: -1, | |
| repeatDelay: 8, | |
| delay: 2 | |
| }); | |
| const burger = document.querySelector('.burger'); | |
| const nav = document.querySelector('nav'); | |
| burger.addEventListener('click',(e) => { | |
| burger.dataset.state === 'closed' ? burger.dataset.state = "open" : burger.dataset.state = "closed" | |
| nav.dataset.state === "closed" ? nav.dataset.state = "open" : nav.dataset.state = "closed" | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Nunito+Sans'); | |
| :root { | |
| --blue: #0e0620; | |
| --white: #fff; | |
| --green: #2ccf6d; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family:"Nunito Sans"; | |
| color: var(--blue); | |
| font-size: 1em; | |
| } | |
| button { | |
| font-family:"Nunito Sans"; | |
| } | |
| ul { | |
| list-style-type: none; | |
| padding-inline-start: 35px; | |
| } | |
| svg { | |
| width: 100%; | |
| visibility: hidden; | |
| } | |
| h1 { | |
| font-size: 7.5em; | |
| margin: 15px 0px; | |
| font-weight:bold; | |
| } | |
| h2 { | |
| font-weight:bold; | |
| } | |
| .hamburger-menu { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| padding: 35px; | |
| z-index: 2; | |
| & button { | |
| position: relative; | |
| width: 30px; | |
| height: 22px; | |
| border: none; | |
| background: none; | |
| padding: 0; | |
| cursor: pointer; | |
| & span { | |
| position: absolute; | |
| height: 3px; | |
| background: #000; | |
| width: 100%; | |
| left: 0px; | |
| top: 0px; | |
| transition: 0.1s ease-in; | |
| &:nth-child(2) { | |
| top: 9px; | |
| } | |
| &:nth-child(3) { | |
| top: 18px; | |
| } | |
| } | |
| } | |
| & [data-state="open"] { | |
| & span { | |
| &:first-child { | |
| transform: rotate(45deg); | |
| top: 10px; | |
| } | |
| &:nth-child(2) { | |
| width: 0%; | |
| opacity:0; | |
| } | |
| &:nth-child(3) { | |
| transform: rotate(-45deg); | |
| top: 10px; | |
| } | |
| } | |
| } | |
| } | |
| nav { | |
| position: absolute; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| background: var(--green); | |
| color: var(--blue); | |
| width: 300px; | |
| z-index: 1; | |
| padding-top: 80px; | |
| transform: translateX(-100%); | |
| transition: 0.24s cubic-bezier(.52,.01,.8,1); | |
| & li { | |
| transform: translateX(-5px); | |
| transition: 0.16s cubic-bezier(0.44, 0.09, 0.46, 0.84); | |
| opacity: 0; | |
| } | |
| & a { | |
| display: block; | |
| font-size: 1.75em; | |
| font-weight: bold; | |
| text-decoration: none; | |
| color: inherit; | |
| transition: 0.24s ease-in-out; | |
| &:hover { | |
| text-decoration: none; | |
| color: var(--white); | |
| } | |
| } | |
| &[data-state="open"] { | |
| transform: translateX(0%); | |
| & ul { | |
| @for $i from 1 through 4 { | |
| li:nth-child(#{$i}) { | |
| transition-delay: 0.16s * $i; | |
| transform: translateX(0px); | |
| opacity: 1; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .btn { | |
| z-index: 1; | |
| overflow: hidden; | |
| background: transparent; | |
| position: relative; | |
| padding: 8px 50px; | |
| border-radius: 30px; | |
| cursor: pointer; | |
| font-size: 1em; | |
| letter-spacing: 2px; | |
| transition: 0.2s ease; | |
| font-weight: bold; | |
| margin: 5px 0px; | |
| a.button.green { | |
| border: 4px solid var(--green); | |
| color: var(--blue); | |
| &:before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 0%; | |
| height: 100%; | |
| background: var(--green); | |
| z-index: -1; | |
| transition: 0.2s ease; | |
| } | |
| &:hover { | |
| color: var(--white); | |
| background: var(--green); | |
| transition: 0.2s ease; | |
| &:before { | |
| width: 100%; | |
| } | |
| } | |
| } | |
| } | |
| @media screen and (max-width:768px) { | |
| body { | |
| display:block; | |
| } | |
| .container { | |
| margin-top:70px; | |
| margin-bottom:70px; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment