User:আফতাবুজ্জামান/Article Writing Contest 2019 Banner
<style> /* Resets */ .cbnnr * {
margin: 0; padding: 0;
}
/* Box-sizing */ .cbnnr, .cbnnr *, .cbnnr *:before, .cbnnr *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Font sizes and line heights */
.cbnnr-message {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: bold; font-size: 14px; line-height: 1.4; color: #555A5F !important; text-align: left;
}
.cbnnr-special .cbnnr-message {
color: #d9e0f5 !important;
}
.cbnnr-cta {
font-size: 13px; font-weight: medium; color: #222;
}
.cbnnr-special .cbnnr-cta {
color: white;
}
@media all and (min-width: 720px) {
.cbnnr-message { font-size: 18px; line-height: 1.5; } .cbnnr-cta { font-size: 20px; }
}
/* Styles */
.cbnnr {
background-color: #fff; position: relative; margin-bottom: 12px;
}
/* Hide banner when Wikipedia site search is enabled */ .overlay-enabled .cbnnr {
display: none !important;
}
.cbnnr-main {
position: relative; clear: both; padding: 10px; background-color: white; border: 1px solid #a2a9b1; min-height: 88px;
}
.cbnnr-special .cbnnr-main {
background-color: #c8ccd1; border: none;
}
@media all and (min-width: 720px) {
.cbnnr-main { padding: 15px; min-height: 98px; }
}
.skin-minerva .cbnnr-main {
border: none; border-bottom: 1px solid #c8ccd1; }
@media all and (min-width: 1000px) {
.skin-minerva .cbnnr-main { border: 1px solid #c8ccd1; margin-top: 20px; }
}
.cbnnr-message {
display: block;
} .rtl .cbnnr-message {
text-align:right;
}
.cbnnr-icon {
width: 68px; height: 68px; border-radius: 2px; overflow: hidden; top: 50%; position: absolute; float: left; transform: translateY(-50%); left: 10px; overflow: hidden; background: #fff;
}
@media all and (min-width: 720px) {
.cbnnr-icon { left: 15px; } .rtl .cbnnr-icon { right: 15px; }
}
.cbnnr-icon-border {
border: 1px solid #c8ccd1;
}
.cbnnr-icon img {
max-width: 100%; max-height: 100%; position: absolute; top: 0; left: 0;
}
.cbnnr-icon-border img {
max-width: 80%; max-height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.cbnnr-message p {
padding-left: 78px; padding-right: 54px; padding-top: 5px; margin: auto;
} .rtl .cbnnr-message p {
padding-right: 78px; padding-left: 54px; padding-top: 5px; margin: auto;
}
@media all and (min-width: 720px) {
.cbnnr-message p { padding-left: 83px; padding-right: 64px; padding-top: 4px; } .rtl .cbnnr-message p { padding-right: 83px; padding-left: 64px; padding-top: 4px; }
}
@media all and (max-width: 500px) {
.cbnnr-message p { padding-left: 5px; } .rtl .cbnnr-message p { padding-right: 5px; padding-left: 0; }
.cbnnr-icon { display:none; }
}
@media all and (max-width: 501px) {
.skin-minerva .cbnnr-message p { padding-left: 83px; } .rtl .skin-minerva .cbnnr-message p { padding-left: 0; padding-right: 83px; }
.skin-minerva .cbnnr-icon { display:block; }
}
@media all and (max-width: 350px) {
.skin-minerva .cbnnr-message p { padding: 0 5px; }
.skin-minerva .cbnnr-icon { display:none; }
} .cbnnr-headline, .cbnnr-text {
display: block;
}
@media all and (min-width: 720px) {
.cbnnr-headline, .cbnnr-text { display: inline; }
}
.cbnnr-cta {
display: block; margin-top: 4px;
}
@media all and (min-width: 720px) {
.cbnnr-cta { margin-top: 2px; }
}
.cbnnr-cta:hover {
text-decoration: underline;
}
/* --- Close Options --- */
.cbnnr-close {
cursor: pointer; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 1; opacity: .8; background: #eaecf0; border-radius: 50%; padding: 12px; width: 44px; height: 44px; transition: all .3s ease-in-out;
}
.cbnnr-special .cbnnr-close {
background: rgba(255,255,255,.5); opacity: 1;
}
body.rtl .cbnnr-close {
left: 10px; right: unset;
}
@media all and (min-width: 720px) {
.cbnnr-close { right: 15px; } body.rtl .cbnnr-close { left: 15px; right: unset; }
}
.cbnnr-close:hover {
opacity: 1;
}
.cbnnr-special .cbnnr-close:hover {
background: rgba(255,255,255,.7);
}
.cbnnr-close-icon {
background: linear-gradient(transparent,transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d=%22M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z%22/%3E%3Cpath d=%22M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z%22/%3E%3C/svg%3E"); height: 100%; width: 20px; min-width: 20px; min-height: 20px; background-size: contain; background-position: center center; background-repeat: no-repeat; opacity: 0.8;
}
.cbnnr-special .cbnnr-close-icon {
background: linear-gradient(transparent,transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill=%22%23ffffff%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d=%22M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z%22/%3E%3Cpath d=%22M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z%22/%3E%3C/svg%3E");
}
.cbnnr-special .cbnnr-close-icon {
opacity: 1;
}
.cbnnr-special .cbnnr-close-icon {
/* need new svg */
}
.cbnnr-close-icon:hover {
opacity: 1;
}
</style>
<a href="https://bn.wikipedia.org/s/s8sx" class="cbnnr-message">
<figure class="cbnnr-icon"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/পালক_ও_অ_ক.svg/120px-পালক_ও_অ_ক.svg.png" alt="bubble speech"/> </figure>
চলছে অমর একুশে নিবন্ধ প্রতিযোগিতা ২০২৪। অংশ নিন, নিবন্ধ লিখুন ও পুরস্কার জিতুন।
</a>
<script> var cbnnr = cbnnr || {};
cbnnr.show = function() {
$('.cbnnr').css('display', 'block');
};
$(function() {
if ( !mw.centralNotice.bannerData.hideResult ) { cbnnr.show(); }
}); </script>