Skip to main content

Post Card Title HTML and CSS for Blogger

 Demo:Click here





Code:Post Card Title HTML and CSS for Blogger (Copy and Paste to post ot page)





<style>

.image-gallery{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-wrap:wrap}.image-td{margin-bottom:3px;background:#C3BFF5;border-radius:3px;display:inline-block;animation:scaler 1s ease-out 1 alternate}.image-tdInner{padding:0;text-align:center;background:transparent}.image-tdInner img{width:100%}@keyframes scaler{0%{transform:scale(0)}100%{transform:scale(1)}}@media only screen and (max-width : 600px){.image-td{margin:2px 0;width:100%}}@media only screen and (min-width : 601px)and (max-width : 900px){.image-td{margin:5px;width:calc(50% - 10px)}}@media only screen and (min-width: 900px){.image-td{margin:5px;width:calc(25% - 10px)}}.image-td .image-tdInner:hover{transform:scale(1.05);animation:hoverAnimOP 0.5s linear 1 alternate}@keyframes hoverAnimOP{0%{transform:scale(1)}100%{transform:scale(1.05)}}

</style>




<div class="image-gallery">

  

  

  

  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.1I">

<img src="https://chem.libretexts.org/@api/deki/files/78704/mindtouch.page%2523thumbnail?revision=2" />

          </a>

          <a href="/search/label/GC.1I">1. Introduction: Matter, Energy, and Measurement

          </a>

      </div>

</div>

  

  

  

  


  

  

  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.2I">

<img src="https://chem.libretexts.org/@api/deki/files/78705/mindtouch.page%2523thumbnail?revision=3" />

          </a>

          <a href="/search/label/GC.2I">2. Atoms, Molecules, and Ions  

          </a>

      </div>

</div>

  

  


  

  

  

  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.3I">

<img src="https://chem.libretexts.org/@api/deki/files/78706/mindtouch.page%2523thumbnail?revision=2" />

          </a>

          <a href="/search/label/GC.3I">3. Chemical Reactions and Reaction Stoichiometry  

          </a>

      </div>

</div>

  

  


  

  

  

  

  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.4I">

<img src="https://chem.libretexts.org/@api/deki/files/78707/mindtouch.page%2523thumbnail?revision=3" />

          </a>

          <a href="/search/label/GC.4I">  4. Reactions in Aqueous Solution  

          </a>

      </div>

</div>

  

  


  

  

  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.5I">

<img src="https://chem.libretexts.org/@api/deki/files/78708/mindtouch.page%2523thumbnail?revision=2" />

          </a>

          <a href="/search/label/GC.I">  5. Thermo - chemistry  

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

<div class="image-td">

<div class="image-tdInner">

<a href="/search/label/GC.I">

<img src="" />

          </a>

          <a href="/search/label/GC.I"> 

          </a>

      </div>

</div>

  

  


  

  

  

  

 

</div>

----
Labels:

Comments

Post a Comment

Popular posts from this blog

Why doesn't air from the troposphere and the stratosphere mix freely?

• • 1.Air Temperature 2.Air Density 3.Air Pressure 4.UV High energy light 1.Cooler, Denser air & Hotter, less dense air. -Troposphere is less hot than stratosphere. Colder air stays below. Hotter air stays above. 2.Cooler, Denser air & Hotter, less dense air. -Cooler air is denser. Dense things are heavy. Heavy things stay below. Visa-versa. 3.Air pressure and the density of the air also decrease with altitude. -Temperature is directly proportional to pressure If air pressure increases, the temperature must increase.  If air pressure decreases, the temperature decreases. Up above @stratosphere pressure is less. Less pressure; less temperature. Less temperature; colder air. Because of no air turning over, Stratosphere is still hotter than Troposphere e...
Post a Comment
Read more