Want more tutorials? Request!

Stylish Partner Page ( Part - 2 )

In this short post we will guide you "How to make Stylish Partner Page (Part -2)" Hopefully you will enjoy it.
LonPai
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
  5.  
       <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

1 comment

  1. Nice tutorial Bro keep it up !
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.