(Autogenerated) |
(Autogenerated) |
||
Line 5: | Line 5: | ||
.banner-image { flex-grow:0; flex-basis:auto;} | .banner-image { flex-grow:0; flex-basis:auto;} | ||
.banner-content {flex-grow:1; flex-shrink:1; flex-basis:60%} | .banner-content {flex-grow:1; flex-shrink:1; flex-basis:60%} | ||
.bannerbox .banner-title .bannerhd {font-size:1. | .bannerbox .banner-title .bannerhd {font-size:1.6rem; font-weight:bold} | ||
.bannerbox .banner-text {font-size:1. | .bannerbox h1.bannerhd {font-size:1.6rem; font-weight:bold; margin:0; padding:0} | ||
.bannerbox .banner-text {font-size:1.3rem;} | |||
.banner-content {padding:10px;} | .banner-content {padding:10px;} | ||
.bannerbox.bgicon1, .bannerbox.bgicon2, .bannerbox.bgicon3, .bannerbox.swoosh {position:relative;overflow:hidden} | .bannerbox.bgicon1, .bannerbox.bgicon2, .bannerbox.bgicon3, .bannerbox.swoosh {position:relative;overflow:hidden} |
Latest revision as of 15:46, 31 July 2024
/* styles for banner template */
.bannerbox {display:flex; background:#f1f3f9;}
.bannerbox .floatleft {margin:0;}
.banner-image { flex-grow:0; flex-basis:auto;}
.banner-content {flex-grow:1; flex-shrink:1; flex-basis:60%}
.bannerbox .banner-title .bannerhd {font-size:1.6rem; font-weight:bold}
.bannerbox h1.bannerhd {font-size:1.6rem; font-weight:bold; margin:0; padding:0}
.bannerbox .banner-text {font-size:1.3rem;}
.banner-content {padding:10px;}
.bannerbox.bgicon1, .bannerbox.bgicon2, .bannerbox.bgicon3, .bannerbox.swoosh {position:relative;overflow:hidden}
.bannerbox.bgicon1::before {color:white; opacity: 0.5; font-size:15em;font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0ac";
position: absolute; top: -95px;right: 10px;}
.bannerbox.bgicon2::before {color:white; opacity: 0.5; font-size:9.5em; font-family: "bootstrap-icons"; font-weight: 400; content: "\f1dd"; position: absolute; top: -40px; right: 10px;}
.bannerbox.bgicon3::before {color:white; opacity: 0.5; font-size:9.5em; font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\e592"; position: absolute; top: -38px; right: 5px;}
.bannerbox.swoosh {border-bottom: 1px solid #a6a6a7;border-radius: 0 0 80% 0%; overflow: hidden;position:relative;}
@media only screen
and (max-width: 600px) {
.bannerbox {flex-wrap:wrap;}
.banner-image {flex-basis:100%;}
.banner-image img{ width: 100%;}
.banner-content {flex-basis:100%}
}