Stylish Partner Page ( Part - 2 )

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.

1. First of all login to your Blogger dashboard.
2. Secondly, go to PAGES section and click on +NEW PAGE.
3. Then click on the pen icon and turn compose mode to html mode
4. 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> 
  
  

Partners page is completed designing.

Demo

Wish to see it live? 
Click the VIEW DEMO button below.
You can also try judging it after you are finished doing.

View Demo