Introduction
Welcome to my blog SR7Themes!
Today the topic is Stylish Partner Page ( Part - 2 )
Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!
Well, I have already talked about making a stylish partner page but that was only one style.
There are a lots of other styles available and one of them amazed me a lot.
The credit again goes to Ziver-Shop and Freeplay for making this fantastic design...
This partner page has already been used before. so lets start diving into it.
- First of all login to your Blogger dashboard.
- Secondly, go to PAGES section and click on +NEW PAGE.
- Then click on the pen icon and turn compose mode to html mode
- Copy the codes given below
<style> .kotak-panduan{font-size:14px;line-height:1.5em;padding: 20px 20px;border-radius:10px;background-color:rgba(255,255,255,.7);box-shadow:0 4px 18px 0 rgba(9,32,76,.035)} .kotak-panduan:not(:last-child){margin-bottom:12px} </style> <style> .containercardpartner{ width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .containercardpartner .card { position: relative; width: 90%; padding: 40px; overflow: hidden; margin-bottom: 20px; border-radius: 10px; background: #fff; } .containercardpartner .card:before { content: ''; position: absolute; left: 0; bottom: calc(-100% + 4px); width: 100%; height: 100%; background: #000; z-index: 1; transition: 0.5s ease-in-out; } .containercardpartner .card:hover:before { bottom: 0; } .containercardpartner .card:nth-child(1):before { background: #f67280; } .containercardpartner .card:nth-child(2):before { background: #f67280; } .containercardpartner .card:nth-child(3):before { background: #1ABC9C; } .containercardpartner .card:nth-child(4):before { background: #445374; } .containercardpartner .card:nth-child(5):before { background: #FF5976; } .containercardpartner .card:nth-child(6):before { background: #FFC344; } .containercardpartner .card:nth-child(7):before { background: #0a2a91; } .containercardpartner .card:nth-child(8):before { background: #e8dd09; } .containercardpartner .card:nth-child(9):before { background: #e82309; } .containercardpartner .card:nth-child(10):before { background: #11178a; } .containercardpartner .card div { position: relative; z-index: 2; display:flex; align-items: center; flex-direction: column; } .containercardpartner .card div img{ width: 80px; display: flex; align-items: center; flex-shrink: 0; border-radius: 100%; background-size: cover; background-position: center; position: absolute; padding: 4px; border-top-color: transparent; border-bottom-color: transparent; } .containercardpartner .card div h2{ margin-bottom: 10px; font-size: 24px; transition: 0.5s; text-align: center; margin-top: 100px; } .containercardpartner .card:hover div h2{ color: #fff; } .containercardpartner .card div p{ margin-bottom: 10px; font-size: 16px; transition: 0.5s; color: #2b2b2b; text-align: justify; line-height: 1.5; } .containercardpartner .card div a{ margin-top: 20px; font-size: 14px ; display: inline-block; text-decoration: none; transition: 0.5s; color: #fff; background: #4d4d4d; border-radius: 10px; padding: 6px 10px; font-weight: 600; box-shadow: 0 2px 20px rgba(0,0,0,.05); } .containercardpartner .card:hover div a{ color: #2b2b2b; background: #fff; } .containercardpartner .card:hover div p{ color: #fff; } .dark-mode .containercardpartner .card div p{color:#fff} .dark-mode .containercardpartner .card{background: var(--bg-dark-color-sec)} </style> <div class="post-tabs"> <div class="post-tabsContent"> <div class="tabsContent-1"> <div class="kotak-panduan biru"> <div class="ringkasan"> All credits goes to Ziver Shop and Freeplay. You can contact us for being a partner. </a> </div> </div> <!--[Partners]--> <div class="containercardpartner"> <div class="card"> <div> <img src="https://1.bp.blogspot.com/-CLyErjM10GU/YUsDRsY652I/AAAAAAAAAE8/iTVE2BTwSTMttuOXu1u2qmE4MxnuwYSmgCLcBGAsYHQ/s316/IMG_20210910_122003-removebg-preview.png" /> <h2>Ziver Shop</h2> <p> <b>Blogger, SEO, Widgets, Adsense Guides</b> are posted on this website. </p> <a href="https://www.ziver-shop.eu.org/" rel="dofollow" target="blank">Visit our Website</a> </div> </div> </div> <div class="containercardpartner"> <div class="card"> <div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFy26yKIx5FJlFc8M7gfUZjW7Jcy7NTj7OWQMoxx7dwhs9VZ0YtRIAJpMa36EiHKaJ86y0mb9lDqlYfXZXSj585F8EkA-nCrRHCHyzJ2DNfnC9L_977U3hj3QkuDb7wpNIuqopt4zgvsP-LMb4GxaO3e1tEWQKXvlt89U7DONauxQTqTiXnxTv8bcJ/s1600-rw/Untitled%20%28512%20%C3%97%20512%20px%29.webp " /> <h2>Freeplay</h2> <p>If you're troubled by blogger tutorials, you are at right place.</p> <a href="https://freeplayme.blogspot.com/" rel="dofollow" target="blank">Visit our Website</a> </div> </div> </div> <div class="containercardpartner"> <div class="card"> <div> <img src="http://3.bp.blogspot.com/-SXD7nkB6MpU/YsV2RZ7GSnI/AAAAAAAACOM/FSF1C9ALnLkre9B6TFTJW6WpdqGnLSAZACK4BGAYYCw/s220/20220706_171550.jpg " /> <h2>SR7Themes</h2> <p>Lets make ordinary to extraordinary.</p> <a href="/" rel="dofollow" target="blank">Visit our Website</a> </div> </div> </div> <!--End Batas--> </div> <div class="tabsContent-2"> <p><br /></p></div> </div>
Demo
Wish to see it live?
Click the VIEW DEMO button below.
You can also try judging it after you are finished doing.
Conclusion
I expressed my views on the topic 'Stylish Partner Page ( Part - 2 )'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.Source:
https://www.sr7themes.eu.org/2022/07/stylish-partner-page-part-2.html