🔴 Eye-Catching Hero Section in Blogger

 
 
<div id='mainbx'> <div class='rown'> <div class='cntne'> <div class='dhanjeerdr'> <h2 class='htitle'>Best premium Blogger themes and beautiful codes + tips </h2> <p class='hero-text'>Find your queries what you want today🙂
but first join my <a href="https://telegram.me/bloging_help"> telegram group</a> </p> </div> <div class='hero-search'> <form action='/search' class='search-form' method='get'> <input aria-label='Search' autocomplete='off' autocorrect='off' class='search-input' name='q' placeholder='e.g  THEME, TIPS,Code' spellcheck='false' type='text'/> <button class='search-button' title='Search' type='submit' value=''>
  <i class="fa-solid fa-magnifying-glass fa-beat" style="color: #00db0b;"></i>  
</button> </form> </div> <div class='hero-tags'> <span class='tags-label'><b>Topics:</b></span> <a class='popular-tag' href='https://www.bwal.tech/search/label/Blogger%20Themes?max-results=10'>Templates</a>, <a class='popular-tag' href='https://www.bwal.tech/search/label/Codes%20for%20blogger?max-results=10'>Widget</a>, <a class='popular-tag' href='https://www.bwal.tech/search/label/Editing?max-results=10'>Materials🥸</a> 
</div> </div> </div> </div> 

<style> #mainbx{background: transparent;} .dhanjeerdr{color:var(--hero-color);text-align:center;margin:0 0 30px} .dhanjeerdr h1{display:block;font-size:35px;font-weight:700;margin:0 0 13px} .dhanjeerdr p{display:block;font-size:16px;color:var(--hero-text-color);margin:0} .hero-search{text-align:center;margin:0 0 13px} .hero-search .search-form{display:inline-block;position:relative;width:480px;max-width:100%;height:50px;border:0} .hero-search .search-input{float:left;width:100%;height:50px;background-color: var(--transparent-bg);

overflow:hidden;font-size:14px;color:#95a5a6;font-family:inherit;font-weight:400;line-height:51px;padding:0 20px;border:1px solid black;border-radius:4px} .hero-search .search-input::placeholder{color:var(--title-color);opacity:.55} .hero-search .search-input:focus{box-shadow:0 2px 8px rgba(0,0,0,0.1)} .hero-search .search-button{position:absolute;top:0;right:0;height:50px;background-color:transparent;overflow:hidden;font-size:14px;color:#95a5a6;text-align:center;line-height:51px;cursor:pointer;opacity:.85;padding:0 20px;border:0;border-radius:0 6px 6px 0} .hero-search .search-button:hover{background-color:rgba(155,155,155,0.1)} .hero-tags{float:left;width:100%;font-size:14px;color:var(--hero-color);text-align:center;margin:0 0 10px} .hero-tags span,.hero-tags a{display:inline-block text-decoration:none;} .hero-tags a{color:var(--hero-text-color);margin:0 0 0 10px} .hero-tags a:hover{color:var(--hero-color)} .hero-promo{float:left;width:100%;font-size:21px;color:var(--hero-text-color);text-align:center;padding:40px 0 0;margin:20px 0 0;border-top:1px solid rgba(255,255,255,0.15)} .hero-promo a{color:var(--hero-color);font-weight:700;margin:0} .hero-promo a:hover{color:var(--hero-text-color)} @media screen and (max-width: 1030px) { .rown{width:100%;max-width:100%;margin:0} .cntne{padding:0 15px}} @media screen and (max-width: 640px){ .dhanjeerdr h1 { font-size: 31px;}} 

.htitle{
    background: #004DFF;
background: linear-gradient(to left, #006cff 0%, #ff00c7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}</style>