Today We Will Going To How To Create Hero Header In Blogger Website. We Will Create With Html and Css.
Varsion: 1.0 - Hero Header
First You See a Hero Header After We Start:
What is Hero Header?
Hero Header: Hero Header You Can Use On Blogger Website. This Script For Your Website Starting Page.
Requirement:
Requirements:
1. Blogger Account
2. Blogger Plus Ui Template Website
How to create Hero Header
Step 1: Go To Blogger.com
Step 2: Login To Your Account
Step 3: Click To Layout And Find a Main Widget.
Step 4: Add a Html/JavaScript
Step 5: Past This Code:
<div class="welcomeSec">
<div class="WelcomeSec" id="WelcomeSec">
<h2 class="headC">Welcome to Our Site!</h2>
<p class="desC">Type Your Website Description!</p>
<center>
<a class="button" style="border-radius:25px 2px 25px 2px!important" href="#" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" class="line" viewbox="0 0 24 24"><g transform="translate(3.500000, 3.500000)" stroke="#fff"><line x1="9.8352" y1="16.0078" x2="16.2122" y2="16.0078"></line><path d="M12.5578,1.3589 L12.5578,1.3589 C11.2138,0.3509 9.3078,0.6229 8.2998,1.9659 C8.2998,1.9659 3.2868,8.6439 1.5478,10.9609 C-0.1912,13.2789 1.4538,16.1509 1.4538,16.1509 C1.4538,16.1509 4.6978,16.8969 6.4118,14.6119 C8.1268,12.3279 13.1638,5.6169 13.1638,5.6169 C14.1718,4.2739 13.9008,2.3669 12.5578,1.3589 Z"></path><line x1="7.0041" y1="3.7114" x2="11.8681" y2="7.3624"></line></g></svg>
Start Now!
</a></center></div></div>
<style>.headC{font-family:var(--font-bodyAlt);text-align:center;font-weight:900}
.desC{font-family:var(--font-bodyAlt);text-align:center;font-size:13px;padding-bottom:0px;line-height:1.6em;} .desC:after{content:'';width:0px;display:block;position:relative;bottom:-6px;border-bottom:1.5px solid #989b9f;margin:3px auto;animation:animatebord 3s infinite;-webkit-animation:animatebord 3s infinite}
@-webkit-keyframes animatebord{0%{width:20px}50%{width:100px}100%{width:20px}}@keyframes animatebord{0%{width:20px}50%{width:100px}100%{width:20px}}</style>
Step 6: Save The Code
Conclusion
This is all about making a Hero Header I hope you enjoy this article. Please do share this article. And if you have any questions then ask us in comment box.© Copyright
www.developerdhaval.blogspot.com/