Joomla 5 Templates

.tagsstyle { padding: 1px 10px 1px 10px; background-color: #6b6c6d; color: #fff !important; font-family: Open Sans, Arial, Helvetica, sans-serif; border-radius: 10px 3px 3px 10px; box-shadow: 0px 0px 0px 1px #6d6a6a; margin: 0 3px 0 0; } .features-section { display: flex; flex-wrap: wrap; gap: 30px 20px; align-items: center; justify-content: space-between; } .features-item { position: relative; width: 47%; margin: 40px 0; } .features-text { margin: 0 0 0 115px; } .features-text p { color: #222; font-size: 16px; font-family: 'Roboto'; font-weight: 300; line-height: 27px; text-align: left; } .features-text h3 { font-family: 'Oswald'; font-size: 16px; font-weight: 400; text-transform: uppercase; text-align: left; } .features-img { width: 101px; height: 101px; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .text-links { color: #1C1C1C; padding: 5px; transition: 0.3s ease-in; font-weight: 600; text-decoration: underline !important; } .text-links:hover { background: #1C1C1C; color: #fff; } #template_sale_wrapper { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; gap: 50px; } #template_sale_wrapper .ts_wrapper { width: 300px; border: none; box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; } .sale_description { min-height: 200px; border-bottom: none; text-align: left; font-size: 18px; padding: 10px 0; background: none; text-shadow: none; color: #222222; min-height: 300px; } .pro_package_description a, .standart_membership_description a { color: #6BACF0; } .pro_package_button a, .standart_membership_button a { color: #fff; } .ts_wrapper { position: relative; } .sale_button { position: absolute; bottom: 0; } .sale_description ul { list-style-type: none; margin: 0 0 70px; } .sale_button { position: absolute; padding: 0; bottom: 0; margin: 0; width: 100%; } .sale_description_no_title { margin: 56px 0 0 0; } .sale_description ul li { background: none; position: relative; padding: 10px 0px; font-size: 18px; line-height: 1.5 !important; text-align: center; } .description_plus { background: none; position: relative; padding-bottom: 20px; text-align: center; font-weight: bold; } .description_plus::after { position: absolute; content: "+"; top: 14px; font-size: 35px; margin: 0 50%; transform: translateX(-50%); display: block; } #template_sale_wrapper .ts_wrapper { width: 300px; margin: 0; } .sale_button a { text-transform: uppercase; line-height: 1 !important; color: #fff; font-size: 18px; margin: 0 auto; display: inline-block; width: 100%; padding: 15px 0; } .pro_package_button, .pro_package_title { background: #4CB849 !important; color: #fff; padding: 10px 0; } .free_download_button, .free_download_title { background: #6BACF0 !important; color: #fff; } .standart_membership_button, .standart_membership_title { background: #FF3D3D; color: #fff !important; padding: 10px 0; } .sale_title { font-family: 'Oswald', sans-serif; font-size: 20px; padding: 20px 0; font-weight: 500; margin: 0; } .sale_price { padding: 15px 0; font-size: 56px; font-family: 'Dosis', sans-serif; font-weight: bold; } .standart_membership_title a { color: #fff; } .feature-icons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; justify-items: center; } .feature-icon-item a img { transition: transform 0.2s ease-in; } .feature-icon-item a img:hover { transform: translateY(-10px); } .feature-icon-item { width: 200px; } .row-item { margin: 40px 0; display: flex; align-items: center; flex-wrap: wrap; } .row-title { width: 100%; text-align: center; } .row-info { margin: 0 30px; width: 40%; text-align: justify; } .row-image { text-align: center; margin: 0 auto; } .bg-the_os_joomla_blank_template_responsive { width: 101px; height: 101px; background: url('https://ordasoft.com/images/Joomla_templates/cck/cck-realestate-booking/features-sprite.webp') -10px -10px; } .bg-fp_easy_setup { width: 101px; height: 101px; background: url('https://ordasoft.com/images/Joomla_templates/cck/cck-realestate-booking/features-sprite.webp') -131px -10px; } .bg-plenty_of_module_positions { width: 101px; height: 101px; background: url('https://ordasoft.com/images/Joomla_templates/cck/cck-realestate-booking/features-sprite.webp') -131px -131px; } .bg-the_os_joomla_blank_template_fast_lightweight { width: 101px; height: 101px; background: url('https://ordasoft.com/images/Joomla_templates/cck/cck-realestate-booking/features-sprite.webp') -10px -131px; } .bg-the_os_joomla_blank_font_awesome_icons { width: 101px; height: 101px; background: url('https://ordasoft.com/images/Joomla_templates/cck/cck-realestate-booking/features-sprite.webp') -131px -373px; } .bg-the_os_joomla_blank_template_ie_support { width: 101px; height: 101px; background: url('https://ordasoft.com/images/Joomla_templates/cck/cck-realestate-booking/features-sprite.webp') -131px -252px; } .bg-the_os_joomla_blank_template_twitter_bootsrap_support { width: 101px; height: 101px; background: url('https://ordasoft.com/images/Joomla_templates/cck/cck-realestate-booking/features-sprite.webp') -252px -131px; } .bg-the_os_joomla_blank_template_google_fonts_support { width: 101px; height: 101px; background: url('https://ordasoft.com/images/Joomla_templates/cck/cck-realestate-booking/features-sprite.webp') -252px -373px; } .bg-unlimited_forms_in_content_construction_kit_joomla_website_builder { width: 101px; height: 101px; background: url('https://ordasoft.com/images/Joomla_templates/cck/cck-realestate-booking/features-sprite.webp') -373px -252px; } @media (max-width: 991px) { .row-info, .row-image { width: 100% !important; } .reverse-mobile .row-info { order: 2; } } @media (max-width: 768px) { .row-text { margin: 50px 0 0; } .row-info { margin: 0 10px; } .feature-icons { grid-template-columns: repeat(3, 1fr); } #template_sale_wrapper { justify-content: space-evenly; } } @media (max-width: 425px) { .row-item { flex-wrap: wrap; margin: 50px 0; } .row-info { margin: 50px 0; } .features-section { display: block; } .features-text { margin: 0 0 0px 115px; } .features-item { width: 100%; margin: 40px 0; } .feature-icons { grid-template-columns: repeat(1, 1fr); } }