Apk Post format for all blogger websites

Apk Post format for all blogger websites 

 This CSS code is not merely a set of styles; it's a symphony of design elements meticulously orchestrated to create a visually appealing and functional APK post format.

Demo 

<!-- add this on post  -->
<div class="post-body">
 <div class="pc">

<img class="apmg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png" alt="apps"> 

<h2>Apk post format <span> in short code</span></h2>

<p class="inf">Size - 50MB , version - 2.5</p>
<br>

<a class="aplink" href="#">Download <svg xmlns="http://www.w3.org/2000/svg" height="16" fill="white"width="16" viewBox="0 0 512 512"><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg></a>
  </div>   
</div>




<!-- add this before close head tag -->
<style>
.pc{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content space-around; align-items: center; text-align: center; border: 1px solid #ccc; padding: 17px; margin: 5px; border-radius: 8px; } .post-body h2{ color: #ff00c7; word-wrap: break-word; } .post-body .inf{ color: #f2005a; margin: -7px 2px; font-weight: 700; } .apmg{ width: 20%; padding: 1px; border-radius: 50%; animation: disco 4s infinite; } .post-body h2 span{ color: green;} .aplink{ background: #dc0051; color: white; padding: 10px 15px; width: 80%; text-decoration: none; font-weight: bold; font-size: 18px; border-radius: 20px; filter: drop-shadow(0px 4px 9px #f3005aa5); } @keyframes disco { 0%, 100% { box-shadow: 10px 0px 15px #ff8b00, -10px 0px 15px #ff0000, 0px 10px 15px #00ff00, 0px -10px 15px #0000ff; } 25% { box-shadow: -10px 0px 15px #e8ff00, 10px 0px 15px #ff008b, 0px -10px 15px #00b9ff, 0px 10px 15px #00ffb9; } 50% { box-shadow: 10px 0px 15px #00b9ff, -10px 0px 15px #00ffb9, 0px 10px 15px #ff8b00, 0px -10px 15px #e8ff00; } 75% { box-shadow: -10px 0px 15px #00ff2e, 10px 0px 15px #5d00ff, 0px -10px 15px #002eff, 0px 10px 15px #5dff00; } } 



.pc::after {
  content: 'Pro';
  position: absolute;
  top: 10px; 
  
  right: 15px; 
  
  padding: 6px 10px; 
  
  background-image: linear-gradient(45deg, blue, cyan); 
 
  
  color: white;
  border-radius: 30px 10%;
  font-weight: bold;
}
 
</style>

  

The Visual Symphony: Elements in Harmony

Post Body Structure

The core structure of the APK post format is encapsulated within the post-body div, providing a canvas for content presentation. Within this, the pc class orchestrates a flexible, column-based layout that adapts seamlessly to various screen sizes. The border, padding, and margin attributes add a touch of elegance, framing the content with finesse.

Heading Elegance with h2

The heading, defined by the h2 tag, is a focal point of the design. The vibrant magenta color (#ff00c7) commands attention, while the word-wrap: break-word; property ensures readability even with lengthy titles. The addition of a green span within the heading adds a subtle yet impactful visual contrast, enhancing the overall aesthetic.

Informational Prowess with .inf

The information block, denoted by the inf class, stands out in a striking fuchsia (#f2005a), emphasizing crucial details. The negative margin ensures a snug fit, and the bold font-weight commands authority, making it impossible for users to overlook essential information such as size and version details.

Animated Allure of .apmg

The animated image (apmg) adds a dynamic flair to the post format. With a width of 20% and a circular border-radius, it not only maintains a sleek appearance but also engages users with a captivating disco animation. This attention to detail reflects a commitment to providing a visually pleasing user experience.

Call to Action - .aplink

The download link, styled with the aplink class, is a masterpiece in user interaction. The bold white text on a vibrant magenta background beckons users to take action. The use of an SVG icon within the link adds a touch of sophistication, while the drop shadow filter introduces a subtle layer of depth, making the call to action impossible to ignore.

Conclusion: Elevating User Experience

In conclusion, the APK post format presented here is not just a design; it's an experience. Every element, from the layout to the colors and animations, is meticulously crafted to create a harmonious and engaging user journey. Embrace this design, and elevate your content presentation to new height

Last word

In this post we will provided information about Apk Post format for all blogger websites, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.