Stylish hero footer section

Sayem Miaji

22 Sep, 2020

<br/><br/><br/><br/><br/><br/><footer class='footer'>  
      <ul class='circles'><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/></ul>  
      <div id='foot-design'>  
<div class='footer-foot-design footer-foot-design-bottom' data-negative='false'>  
<svg preserveAspectRatio='none'><use xlink:href='#svgmain-foot'/></svg></div>  
<center><div id='tb-foot-icon'>  
<div class='footer-shape footer-foot-logo' data-negative='false'>  
<svg height='24' width='24'><use xlink:href='#logo-foot'/></svg></div></div></center></div>  
<div id='tb-subscribe'>  
<div class='tb-subsfield'>  
<form action='//feedburner.google.com/fb/a/mailverify?uri=twistblogg' class='subs-form' method='post' onsubmit='window.open ('//feedburner.google.com/fb/a/mailverify?uri=twistblogg', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>  
<input name='uri' type='hidden' value='twistblogg'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subs-field' name='email' placeholder='Receive Newsletter by Email' required='required' type='text'/><button class='subs-button' title='Subscribe' type='submit'><svg class='icons icon-Send'><use xlink:href='#btn-foot'/></svg>  
</button></form>  
</div>  
</div><div class='social_btn'>  
<a aria-label='Twitter' href='https://twitter.com/twistblogg' itemprop='url' rel='noopener' target='_blank' title='Twitter'>  
<svg><use xlink:href='#twt-foot'/></svg></a>  
<a aria-label='Medium' href='https://www.medium.com/@twistblogg' itemprop='url' rel='noopener' target='_blank' title='Medium'>  
<svg><use xlink:href='#med-foot'/></svg></a>  
<a aria-label='Pinterest' href='https://www.pinterest.com/twistblogg' itemprop='url' rel='noopener' target='_blank' title='Pinterest'>  
<svg><use xlink:href='#pin-foot'/></svg></a>  
<a aria-label='Facebook' href='https://www.facebook.com/twistblogg' itemprop='url' rel='noopener' target='_blank' title='Facebook'>  
<svg><use xlink:href='#fb-foot'/></svg></a></div>    
          <div class='credit main-container'>  
            <p class='credit-content'>Copyright © 2019 - <span id='copyrightYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('copyrightYear').innerHTML = n; /*]]>*/</script></span>  <a expr:href='data:blog.homepageUrl'>TwistBlogg</a> - Protected By <a class='dmca-badge' href='//www.dmca.com/Protection/Status.aspx?id=REPLACE_ME' rel='nofollow noopener noreferrer external' target='_blank' title='DMCA.com Protection Status'> DMCA</a> <script type='text/javascript'>//<![CDATA[   
(function () {document.addEventListener("DOMContentLoaded", function () {var e = "dmca-badge";var t = "refurl";var n = document.querySelectorAll('a.'+e);if (n[0].getAttribute("href").indexOf("refurl") < 0) {for (var r = 0; r < n.length; r++) {var i = n[r];i.href = i.href + (i.href.indexOf("?") === -1 ? "?" : "&") + t + "=" + document.location}}}, false)})()  
//]]></script>   
            </p>  
          </div>  
        </footer>
<svg hidden='hidden' style='width:0; height:0;'>  
<defs>  
  
<linearGradient id='MyGradient' x1='0' x2='0' y1='1' y2='0'><stop offset='0.00' stop-color='#0d0557'></stop><stop offset='0.20' stop-color='#110ec4'></stop><stop offset='1.00' stop-color='#2cd4d9'></stop></linearGradient>  
  
<symbol id='svgmain-foot' preserveAspectRatio='none' viewBox='0 0 1000 100'><path class='foot-design1 footer-foot-design-fill' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z' opacity='0.33'></path>  
<path class='foot-design2 footer-foot-design-fill' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z' opacity='0.66'></path>  
<path class='foot-design3 footer-foot-design-fill' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'></path></symbol>  
  
<symbol id='logo-foot' viewBox='0 0 24 24'><g><ellipse cx='6.5' cy='14.5' rx='2.5' ry='5.5'></ellipse><ellipse cx='17.5' cy='14.5' rx='2.5' ry='5.5'></ellipse><path d='m12 22a6 6 0 0 1 -6-6v-6a6 6 0 0 1 6-6 6 6 0 0 1 6 6v6a6 6 0 0 1 -6 6z'></path><path d='m18 10-5-3 4.1464-4.1464a.5.5 0 0 1 .8536.3535z'></path><path d='m6 10 4.6598-3.2496-3.8029-3.8768a.5.5 0 0 0 -.8569.3501z'></path></g><circle cx='9.25' cy='9.25' fill='url(#MyGradient)' fill-opacity='0.8' r='2'></circle><circle cx='9.25' cy='9.25' r='.75'></circle><circle cx='14.75' cy='9.25' fill='url(#MyGradient)' fill-opacity='0.8' r='2'></circle><circle cx='14.75' cy='9.25' r='.75'></circle><path d='m12 14-1-2c0-.3595 2-.3595 2 0z' fill='url(#MyGradient)' fill-opacity='0.8'></path></symbol>  
  
<symbol id='btn-foot' viewBox='0 0 24 24'><path d='M13 17H17V14L22 18.5L17 23V20H13V17M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H11V18H4V8L12 13L20 8V14H22V6A2 2 0 0 0 20 4M12 11L4 6H20Z'></path></symbol>  
  
<symbol id='twt-foot' viewBox='0 0 32 32'><path d='M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z'></path></symbol>  
  
<symbol id='med-foot' viewBox='0 0 32 32'><path d='M29,26.5H19.37a1,1,0,0,1-.92-.62,1,1,0,0,1,.22-1.09l1.63-1.61V18L16.39,25a1,1,0,0,1-.87.52h0a1,1,0,0,1-.87-.52L8.81,14.25v7l3.56,3.51a1,1,0,0,1,.22,1.09,1,1,0,0,1-.92.62H3a1,1,0,0,1-.93-.62,1,1,0,0,1,.23-1.09l1.89-1.85a1,1,0,0,1,1.4,1.42l-.14.14H9.23L7.11,22.41a1,1,0,0,1-.3-.71v-11L3.26,7.21A1,1,0,0,1,3,6.12,1,1,0,0,1,4,5.5h6.71a1,1,0,0,1,.87.51l4.94,8.88L21.38,6a1,1,0,0,1,.88-.52H29a1,1,0,0,1,.93.62,1,1,0,0,1-.23,1.09L28.07,8.82V23.18l1.63,1.61a1,1,0,0,1,.23,1.09A1,1,0,0,1,29,26.5Zm-7.19-2h4.75l-.19-.19a1,1,0,0,1-.3-.71V8.4a1,1,0,0,1,.3-.71l.19-.19H22.85l-5.49,9.93a1,1,0,0,1-.88.52h0a1,1,0,0,1-.87-.51L10.08,7.5H6.4L8.5,9.57a1.12,1.12,0,0,1,.19.24h0v0l6.83,12.64,4.89-8.85a1,1,0,0,1,1.88.48v9.5a1,1,0,0,1-.3.71Z'></path></symbol>  
  
<symbol id='fb-foot' viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z'></path></symbol>  
  
<symbol id='pin-foot' viewBox='0 0 32 32'><path d='M16.5,3C7.42,3,5,9.69,5,13.64a6.3,6.3,0,0,0,2.62,5.42,1.37,1.37,0,0,0,1.77-.24c.44-.43,1.55-2.18.93-3.12a4.4,4.4,0,0,1-.51-2.06c0-2.78,1.14-6.1,6.55-6.1a4.53,4.53,0,0,1,3.28,1,5.3,5.3,0,0,1,1.18,3.89c0,2.55-1.4,6.25-3.52,6.25A1.12,1.12,0,0,1,16.22,18a11.37,11.37,0,0,1,.63-3c.56-1.89,1.08-3.66.54-4.8C16.72,8.84,14.5,8.77,13.53,9a3.05,3.05,0,0,0-2,1.62,7.52,7.52,0,0,0-.17,6,1,1,0,1,0,1.87-.7,5.56,5.56,0,0,1,0-4.34,1.15,1.15,0,0,1,.7-.63,2.8,2.8,0,0,1,1.66.19c.21.45-.35,2.36-.65,3.38a10.78,10.78,0,0,0-.69,3.79,3,3,0,0,0,3.06,2.44c3.56,0,5.49-4.78,5.52-8.23a7.15,7.15,0,0,0-1.76-5.31,6.41,6.41,0,0,0-4.7-1.65c-7.93,0-8.55,6.2-8.55,8.1a6.4,6.4,0,0,0,.67,2.85,3.69,3.69,0,0,1-.23.51A4.51,4.51,0,0,1,7,13.64C7,12.76,7.27,5,16.5,5c2.19,0,7.86,1.42,7.86,7.92,0,5.1-4.07,8.78-6.81,8.78A3.54,3.54,0,0,1,15,20.63a1,1,0,0,0-1.7.27L12.88,22C11.8,24.78,11.5,25.56,11,26.13a6.88,6.88,0,0,1-.07-1,29.6,29.6,0,0,1,1.33-5.19l.07-.23a1,1,0,1,0-1.9-.6l-.08.24a30.7,30.7,0,0,0-1.41,5.6,18.16,18.16,0,0,0,.36,3.27,1,1,0,0,0,.63.75.84.84,0,0,0,.35.07,1,1,0,0,0,.61-.21l.49-.37c1.69-1.28,1.8-1.53,3.36-5.53a5.45,5.45,0,0,0,2.86.81c4,0,8.81-4.81,8.81-10.78C26.36,5.64,20.46,3,16.5,3Z'></path></symbol>  
  
</defs></svg>

/* Footer */  
footer{position:relative;background-color:#1D6D98;background-image:linear-gradient(to top,#0D0557 0%,#1D6D98 50%,#2CD4D9 100%)!important;color:#989b9f;font-size:13px;font-family:'Nunito Sans', -apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;}  
footer .credit{pointer-events:auto;text-transform:uppercase;padding:20px 0;border-top:1px solid rgba(255,255,255,.1)}  
footer .credit p{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#EBEDF0}  
footer .credit a{color:#b2cdf3}  
footer .credit a:hover{text-decoration:underline}  
footer .credit .creator{display:inline-block;opacity:0}  
.social_btn{margin-top:15px;margin-bottom:25px;text-align:center}.social_btn svg{fill:#EBEDF0;height:50px;width:50px;position:relative;z-index:10;padding-right:10px}#foot-design{clear:both;max-width:100%;display:block;position:relative;margin:0% auto 0;justify-content:center;z-index:2;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#tb-foot-icon{position:absolute;margin:0 auto;width:100%;display:block;bottom:calc(100% - 25px)}.footer-foot-logo{background:#2cd4d9;display:inline-flex;flex-wrap:wrap;padding:15px;text-align:center;border-radius:50%;position:relative}.footer-foot-logo:before{content:"";border-radius:50%;position:absolute;margin:7px;top:0;bottom:0;left:0;right:0;background-color:#1D6D98;background-image:linear-gradient(50deg,#0D0557 0%,#1D6D98 20%,#2CD4D9 100%)!important;}.footer-foot-logo svg{fill:#EBEDF0;height:110px;width:110px;position:relative;z-index:10}.footer-foot-design{clear:both;overflow:hidden;position:absolute;left:0;bottom:100%;width:100%;margin-bottom:-2px;direction:ltr}.footer-foot-design[data-negative="false"].footer-foot-design-bottom,.footer-foot-design[data-negative="true"].footer-foot-design-top{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.footer-foot-design svg{z-index:-1;display:block;position:relative;left:50%!important;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}svg:not(:root){overflow:hidden}.footer-foot-design .footer-foot-design-fill{fill:#2cd4d9;width:calc(100% + 2.5px);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}.footer-foot-design-bottom svg{fill:#2cd4d9;width:calc(130% + 2.5px);height:125px}#tb-subscribe{position:relative;display:block;overflow:hidden;width:100%;text-align:center;padding:100px 0 50px;margin:0 auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:10}.tb-subsfield{max-width:680px;margin:0 auto;text-align:center;padding:0 15px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#subscribe-limit,.subs-field,.subs-form{border-radius:99em;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.subs-form{clear:both;display:block;margin:0 auto;padding:0;position:relative;float:left;width:100%}input.subs-field[type="text"]{color:#3a7bd5;border:0!important;outline:none!important;font-size:108%}.subs-field{background-color:#1D6D98;margin:0 auto;padding:0 15px;height:65px;line-height:65px;width:100%;outline:none;text-align:left}.subs-field[type="text"]:focus{border:0;color:#EBEDF0}input.subs-field::placeholder{color:#EBEDF0;font-weight:400}.subs-button{cursor:pointer;border-radius:99em;font-weight:400;padding:0;height:65px;line-height:65px;border:0!important;transition:all 0.25s;margin:0 auto;text-align:center;display:block;background-color:#1D6D98;background-image:linear-gradient(50deg,#0D0557 0%,#1D6D98 20%,#2CD4D9 100%)!important;color:#EBEDF0;position:absolute;right:0;top:0;padding:0;text-transform:uppercase;font-size:150%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:65px;outline:none}.subs-button .icons{fill:#EBEDF0;vertical-align:middle;height:35px;width:35px}.subs-button:hover{background-color:#1D6D98;background-image:linear-gradient(50deg,#2CD4D9 0%,#1D6D98 80%,#0D0557 100%)!important}.footer-foot-logo svg:hover{cursor:pointer;animation: shakeme 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);perspective: 1000px;}  
/* Circles */  
.circles{pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:rgba(255,255,255,0.07);animation:animate 30s linear infinite;bottom:-150px;z-index:0}.circles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}.circles li:nth-child(4){left:35%;width:130px;height:130px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s}.circles li:nth-child(7){left:55%;width:60px;height:60px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:80%;width:5px;height:5px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(10){left:85%;width:130px;height:130px;animation-delay:10s;animation-duration:11s}.circles li:nth-child(11){left:10%;width:100px;height:100px;animation-delay:22s;animation-duration:11s}.circles li:nth-child(12){left:3%;width:50px;height:50px;animation-delay:10s;animation-duration:30s}
/* Keyframes Animation */  
@-webkit-keyframes shakeme{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-2px,0,0)}40%,60%{transform:translate3d(2px,0,0)}}  
@keyframes shakeme{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-2px,0,0)}40%,60%{transform:translate3d(2px,0,0)}}  
@-webkit-keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}  
@keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}

blogger wdget hero footer

Sayem Miaji

I am a web designer and developer. Sharing knowledge is my passion and web designing is my interest but it is not bigger than my interest in Islam.

Stylish hero footer section

Sayem Miaji

Popular Posts

Categories

Hashtag

Blog Archive

Sayem Miaji

Popular Posts

Costume Check Boxes & Radio Buttons Pure CSS

Select Text and Share On Social Media

Animated Warning Bar Pure CSS

Password Strength Meter

Categories

Hashtag

Blog Archive