link to animated pattern

Afif13 · Jan 9, 2024 · 6d272ca · 6d272ca
1 parent 30a4e38
commit 6d272ca
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -20,14 +20,14 @@
     <meta property="og:image" content="https://css-pattern.com/css-pattern.png">
     <meta property="og:image:width" content="1600" />
     <meta property="og:image:height" content="800" />
-    <style>html{font-weight:400;font-size:18px;line-height:1.5;color:#415462;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";scroll-snap-type:y mandatory;}html:has(section:target){scroll-snap-type:none}body{margin:0;display:flex;flex-wrap:wrap}section{display:grid;place-content:center;min-height:50vh;scroll-snap-align:start;flex:35%;background:repeating-linear-gradient(-45deg,#fff 0 20px,#f4f4f4 0 40px);padding-inline:2rem;}@media (max-width:750px){section{flex:100%}}section:target{min-height:100vh;flex:100%}html:has(section:target) section:not(:target),html:has(section:target) header :is(h2,p:last-child){display:none}html:has(section:target) header{display:none}h1 span:nth-child(2):after,h1 span:nth-child(2):before{content:"";border-left:1.5px solid #fff;position:absolute}h1{font-style:normal;font-weight:700;font-size:50px;font-family:Montserrat,sans-serif;line-height:56px;height:61px;margin:5px;text-transform:none;letter-spacing:-2px;color:#505050;white-space:nowrap}h1 span{font-size:70px;vertical-align:middle}h1 span:first-child{letter-spacing:-14px}h1 span:nth-child(2){position:relative;letter-spacing:-15px;z-index:1}h1 span:nth-child(3){color:#c39f76;filter:blur(2px)}h1 span:nth-child(2):before{top:10px;height:28px;border-top:1.5px solid #fff;width:44px;left:2px;border-top-left-radius:41px 24px}h1 span:nth-child(2):after{bottom:0;left:4.5px;height:37px;z-index:5}header{text-align:center;flex:100%;scroll-snap-align:start;background:repeating-linear-gradient(-45deg,#fff 0 20px,#fafafa 0 40px)}header h1 + p{text-indent:120px;margin-top:-22px;font-size:15px}header p:last-child{max-width:540px;margin:auto;font-size:20px;margin-bottom:2em;}header h2{font-size:1.3rem;text-transform:capitalize;margin:1.2em auto 0.2em;color:#24333e;}section :is(button,a){border-radius:5px;box-shadow:0 .125rem 1rem rgb(27 40 50 / 4%),0 .125rem 2rem rgb(27 40 50 / 8%),0 0 0 .0625rem rgb(27 40 50 / 2%);opacity:.85;margin:1em;border:none;font-size:1rem;padding:.85rem 1.5rem;cursor:pointer}section a{background:#1095c1;color:#fff;text-decoration:none;display:inline-block;margin:0.2em}section iframe{display:block;margin:auto;overflow:hidden!important;border:none;clip-path:inset(2px);max-width:100%;}section :is(button,a):hover{opacity:1}section style{display:inline-block;font-size:0;line-height:1.4;cursor:text;white-space:pre}a.tweet{background-color:#1095c1;border-radius:50%;display:grid;place-content:center;position:fixed;bottom:124px;box-shadow:rgb(0 0 0 / 40%) 0 4px 8px}section div{text-align:center;text-wrap:balance;}section div p{font-size:1.6rem;font-weight:500}#bmc-wbtn,a.tweet{left:15px;width:52px;height:52px}#bmc-wbtn,.credit{position:fixed;background:#1095c1;}.credit{z-index:99;top:0;left:0;transform-origin:right top;transform:translate(-30%) rotate(-45deg);color:#fff;box-shadow:0 0 0 50px #1095c1;clip-path:inset(0 -100%);text-decoration:none}@media (max-width:500px){.credit{display:none;}}#bmc-wbtn{bottom:60px;display:grid;place-content:center;border-radius:50%;box-shadow:rgba(0,0,0,.4) 0 4px 8px}#bmc-wbtn img{height:40px;width:40px}</style>
+    <style>html{font-weight:400;font-size:18px;line-height:1.5;color:#415462;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";scroll-snap-type:y mandatory;}html:has(section:target){scroll-snap-type:none}body{margin:0;display:flex;flex-wrap:wrap}section{display:grid;place-content:center;min-height:50vh;scroll-snap-align:start;flex:35%;background:repeating-linear-gradient(-45deg,#fff 0 20px,#f4f4f4 0 40px);padding-inline:2rem;}@media (max-width:750px){section{flex:100%}}section:target{min-height:100vh;flex:100%}html:has(section:target) section:not(:target),html:has(section:target) header :is(h2,p:last-child){display:none}html:has(section:target) header{display:none}h1 span:nth-child(2):after,h1 span:nth-child(2):before{content:"";border-left:1.5px solid #fff;position:absolute}h1{font-style:normal;font-weight:700;font-size:50px;font-family:Montserrat,sans-serif;line-height:56px;height:61px;margin:5px;text-transform:none;letter-spacing:-2px;color:#505050;white-space:nowrap}h1 span{font-size:70px;vertical-align:middle}h1 span:first-child{letter-spacing:-14px}h1 span:nth-child(2){position:relative;letter-spacing:-15px;z-index:1}h1 span:nth-child(3){color:#c39f76;filter:blur(2px)}h1 span:nth-child(2):before{top:10px;height:28px;border-top:1.5px solid #fff;width:44px;left:2px;border-top-left-radius:41px 24px}h1 span:nth-child(2):after{bottom:0;left:4.5px;height:37px;z-index:5}header{text-align:center;flex:100%;scroll-snap-align:start;background:repeating-linear-gradient(-45deg,#fff 0 20px,#fafafa 0 40px)}header h1 + p{text-indent:120px;margin-top:-22px;font-size:15px}header p:last-child{max-width:540px;margin:auto;font-size:18px;margin-bottom:1em;}header h2{font-size:1.3rem;text-transform:capitalize;margin:1.2em auto 0.2em;color:#24333e;}section :is(button,a){border-radius:5px;box-shadow:0 .125rem 1rem rgb(27 40 50 / 4%),0 .125rem 2rem rgb(27 40 50 / 8%),0 0 0 .0625rem rgb(27 40 50 / 2%);opacity:.85;margin:1em;border:none;font-size:1rem;padding:.85rem 1.5rem;cursor:pointer}section a{background:#1095c1;color:#fff;text-decoration:none;display:inline-block;margin:0.2em}section iframe{display:block;margin:auto;overflow:hidden!important;border:none;clip-path:inset(2px);max-width:100%;}section :is(button,a):hover{opacity:1}section style{display:inline-block;font-size:0;line-height:1.4;cursor:text;white-space:pre}a.tweet{background-color:#1095c1;border-radius:50%;display:grid;place-content:center;position:fixed;bottom:124px;box-shadow:rgb(0 0 0 / 40%) 0 4px 8px}section div{text-align:center;text-wrap:balance;}section div p{font-size:1.6rem;font-weight:500}#bmc-wbtn,a.tweet{left:15px;width:52px;height:52px}#bmc-wbtn,.credit{position:fixed;background:#1095c1;}.credit{z-index:99;top:0;left:0;transform-origin:right top;transform:translate(-30%) rotate(-45deg);color:#fff;box-shadow:0 0 0 50px #1095c1;clip-path:inset(0 -100%);text-decoration:none}@media (max-width:500px){.credit{display:none;}}#bmc-wbtn{bottom:60px;display:grid;place-content:center;border-radius:50%;box-shadow:rgba(0,0,0,.4) 0 4px 8px}#bmc-wbtn img{height:40px;width:40px}</style>
   </head>
   <body>
   	<header>
   		<h1><span>C</span><span>S</span><span>S</span> Pattern</h1>
   		<p>powered by CSS gradients</p>
         <h2>the biggest collection of background Patterns</h2>
-        <p>Explore 138 CSS-only patterns made with CSS gradients and optimized with CSS variables.</p>
+        <p>Explore 138 CSS-only patterns made with CSS gradients and optimized with CSS variables.<br> I also have <a href="https://animated.css-pattern.com/" target="_blank">a collection of animated CSS Patterns</a></p>
   	</header>
     <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
     <div class="adaptive" data-ea-publisher="css-challengescom" id="css-pattern" data-ea-type="text" data-ea-style="fixedfooter"></div>