POLA ♡

HTML 101

How to add a ribbon header

Add CSS:

.ribbon { width: 90%; position: absolute; text-align: center; font-size: 14px!important; background: #a5d1cc; background: -webkit-gradient(linear, left top, left bottom, from(#a5d1cc),to(#a5d1cc)); background: -webkit-linear-gradient(top, #a5d1cc, #a5d1cc); background: -moz-linear-gradient(top, #a5d1cc, #a5d1cc); background: -ms-linear-gradient(top, #a5d1cc, #a5d1cc); background: -o-linear-gradient(top, #a5d1cc, #a5d1cc); background-image: -ms-linear-gradient(top, #a5d1cc 0%, #a5d1cc 100%); -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px; -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px; box-shadow: rgba(000,000,000,0.3) 0 1px 1px; font-family: 'Helvetica Neue',Helvetica, sans-serif; padding: 20px 0; margin:2px; } .ribbon h1 { font-size: 22px;/*—— adjust txt size withn the ribbon ——*/ color: #FFFFFF; text-shadow: #a5d1cc 0 1px 0; margin:2px; padding: 10px; } .ribbon:before, .ribbon:after { content: ''; position: absolute; display: block; bottom: -1em; border: 1.5em solid #a5d1cc; z-index: -1; } .ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; } .ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; } .ribbon .ribbon-content:before, .ribbon .ribbon-content:after { border-color: #000000 transparent transparent transparent; position: absolute; display: block; border-style: solid; bottom: -1em; content: ''; } .ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } .ribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; } .ribbon-stitches-top { margin-top:2px; border-top: 1px dashed rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5); } .ribbon-stitches-bottom { margin-bottom:px; border-top: 1px dashed rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3); } .ribbon { width: 115%; left: -9.5%; margin-left: 2%; }

Add HTML:

<h1 class="ribbon"><strong class="ribbon-content"></strong> </h1>

How to remove Home link in Blogger

Add CSS:

#blog-pager { display:none; }

How to add double border with text

Add HTML:

<div align="center"><div style=" border: double 5px #FFC0CB; font-size: 12px; margin: 30px; padding: 20px; width: 50%; height: 110px;"> TEXT HERE </div></center>

How to card flip with txt at the back

Add CSS:

.card-container { cursor: pointer; height: 150px; perspective: 600; position: relative; width: 150px; } .card { height: 100%; position: absolute; transform-style: preserve-3d; transition: all 1s ease-in-out; width: 100%; } .card:hover { transform: rotateY(180deg); } .card .side { backface-visibility: hidden; border-radius: 6px; height: 100%; position: absolute; overflow: hidden; width: 100%; } .card .back { background: #eaeaed; color: #0087cc; line-height: 150px; text-align: center; transform: rotateY(180deg); }

Add HTML:

<div class="card-container"> <div class="card"> <div class="side"><img src="URL" alt="NAME"></div> <div class="side back">TEXT HERE</div> </div> </div>

How to have a round image for all posts

Add CSS:

.post img {border: 0px solid #ffffff;margin: 0;padding: 0;border-radius: 50%;-moz-border-radius: 50%; }