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!
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