/* * These styles apply ONLY to the header and footer assets. */ *, ::after, ::before { box-sizing: inherit; } ul, li { margin: 0; padding: 0; } .css-3xwfsg-typographyStyles-pageTitle-typographyStyles-largeTitle-Banner-styles-title { font-size: 46px !important; } ul { font-size: 16px; font-weight: 500; letter-spacing: .32px; line-height: 32px; margin-bottom: 20px; } .css-28ptsh-container-container-container-fullGutter-container-fullGutter-container-fullGutter { background-color: red; } .footer-duda a { text-decoration: none; } .footer-duda .container, .footer-duda .row { margin: auto; max-width: 1200px; } .footer-duda .row::after { clear: both; } .footer-duda .row::after, .footer-duda .row::before { display: table; content: ' '; -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-order: 1; order: 1; } .small-12 { width: 100%; } .column, .column:last-child:not(:first-child), .columns, .columns:last-child:not(:first-child) { float: left; clear: none; } .column, .columns { padding-right: .625rem; padding-left: .625rem; } @media print, screen and (min-width: 64em) { .large-6 { width: 50%; } .large-12 { width: 100%; } } @media print, screen and (min-width: 40em) { .column, .columns { padding-right: .9375rem; padding-left: .9375rem; } .medium-12 { width: 100%; } } @media screen and (max-width: 0em), screen and (min-width: 40em) { .show-for-small-only { display: none; } } .footer-duda { float: right; width: 100%; background-color: #171C34; color: #fff; padding: 0 0 40px; position: relative; z-index: 2; overflow: hidden; } /** for testing footer active. .footer-duda ul.lists li ul.active { border: dotted 1px #c7c7c7; } **/ @media (max-width: 768px) { .footer-duda { padding-bottom: 100px; } } ul.no-bullet { list-style: none; margin-left: 0; } @media (max-width: 64em) { .footer-duda { margin-top: 0; } } .footer-duda .d { text-align: center; margin: 128px 0; float: right; width: 100%; } @media (max-width: 64em) { .footer-duda .d { margin: 100px 0 32px; } } .footer-duda .d .title { color: #fff; font-size: 44px; font-family: 'Duda Sans' sans-serif; font-weight: bold; letter-spacing: 0; margin: 0 0 20px; } .footer-duda .lists { display: block; margin: 0 -25px; } .footer-duda .lists > li { float: left; list-style: none; padding: 0 25px; min-height: 300px; } @media (min-width: 64em) { .footer-duda .lists > li { min-height: 0; width: 25%; } } @media (max-width: 735px) { .footer-duda .lists > li { min-height: 350px; } } @media (max-width: 64em) { .footer-duda .d .title { font-size: 24px; } .footer-duda .lists > li { display: block; width: 100%; min-height: auto; } } .footer-duda .lists > li ul { color: #FFFFFF; margin-bottom: 40px; min-height: 186px; } .footer-duda .lists > li ul.active { padding-bottom: 20px; } @media (max-width: 64em) { .footer-duda .lists > li ul { border-bottom: 1px solid rgba(255, 255, 255, 0.5); margin: 0; min-height: auto; } .footer-duda .lists > li ul.active > li:not(.top) { display: block; } .footer-duda .lists > li ul.active > li.top svg { transform: rotateX(180deg); } .footer-duda .lists > li ul > li a { font-size: 14px !important; } .footer-duda .lists > li ul > li.top { cursor: pointer; } } .footer-duda .lists > li ul > li.top svg { display: none; float: right; transition: transform ease 0.3s; width: 14px; height: 46px; } @media (max-width: 40em) { .footer-duda .lists > li ul > li.top svg { width: 16px; } } .footer-duda .lists > li ul > li strong { letter-spacing: 1.5px; line-height: 46px; font-weight: 600; } .footer-duda .lists > li ul > li a { color: #FFFFFF; font-size: 16px; font-weight: 300; line-height: 35px; text-decoration: none; } .footer-duda .lists > li ul > li a .hiring { background: #f66135; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; margin-left: 2px; } .footer-duda .lists > li ul > li a:hover { color: #c7c7c7; } .footer-duda hr { border: 1px solid #fff !important; display: inline-block; margin: 35px 0 22px !important; width: 100%; } .footer-duda .copyrights { float: left; font-size: 16px; font-weight: 400; letter-spacing: 0; } @media (max-width: 64em) { .footer-duda .lists > li ul > li.top svg { display: block; } .footer-duda .lists > li ul > li:not(.top) { display:none; } .footer-duda .copyrights { width: 100%; text-align: center; padding: 30px 0; } } .footer-duda .copyrights a { color: #fff; margin: 0 10px; } .footer-duda .copyrights .up-year { display: inline-block; margin-right: 28px; } @media (max-width: 64em) { .footer-duda .copyrights .up-year { margin-right: 15px; } } @media (max-width: 40em) { .footer-duda .copyrights { font-size: 12px; } .footer-duda .copyrights .up-year { margin-right: 10px; } } @media (max-width: 350px) { .footer-duda .copyrights .up-year { width: 100%; margin-right: 0; } } .footer-duda .social-icons { display: -ms-flexbox; display: flex; float: right; width: auto; -ms-flex-pack: center; justify-content: center; } @media (max-width: 64em) { .footer-duda .social-icons { width: 100%; } } .footer-duda .social-icons .icon { float: right; width: 38px; height: 38px; line-height: 38px; border-radius: 100%; text-align: center; font-size: 15px; color: #fff; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; margin: 0 0 0 15px; transition: all 0.3s ease; } @media (max-width: 40em) { .footer-duda .social-icons .icon { margin: 40px 6px 0; } } .footer-duda .social-icons .icon:hover { opacity: 0.8; } .footer-duda .show-for-sr, .footer-duda .show-on-focus { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; } @media screen and (max-width: 0em), screen and (min-width: 40em) { .footer-duda .show-for-small-only { display: none!important; } } .footer-duda .column, .footer-duda .column:last-child:not(:first-child), .footer-duda .columns, .footer-duda .columns:last-child:not(:first-child) { clear: none; float: left; } @media (max-width: 768px) { .footer-duda .column, .footer-duda .column:last-child:not(:first-child), .footer-duda .columns, .footer-duda .columns:last-child:not(:first-child) { clear: both; float: initial; } } @media print, screen and (min-width: 40em) { .footer-duda .column, .footer-duda .columns { padding-right: .9375rem; padding-left: .9375rem; } } /* .footer-duda .show-for-large, .footer-duda .show-for-large-up, .footer-duda .show-for-medium, .footer-duda .show-for-medium-up, .footer-duda .show-for-xlarge { display: initial !important; } */ @media print, screen and (min-width: 64em) { .footer-duda .hide-for-large { display: none !important; } } @media screen and (max-width: 63.99875em) { .footer-duda .show-for-large { display: none!important; } } @media screen and (max-width: 39.99875em) { .footer-duda .show-for-medium { display: none!important; } } .footer-duda .column:last-child:not(:first-child), .footer-duda .columns:last-child:not(:first-child) { float: right; } @media screen and (max-width: 768px) { .footer-duda .column:last-child:not(:first-child), .footer-duda .columns:last-child:not(:first-child) { width: 100%; } } .button, .hs-button, button { font-size: 16px; background-color: #F66135; border-radius: 60px; min-width: 200px; padding: 0 40px; height: 48px; line-height: 49px; margin-bottom: 0; border: 0; color: #fff; font-weight: 500; display:inline-block; } /*# sourceMappingURL=styles.css.map */ .css-iaal00-dateTime-compactRoot {color: #FAF5EB !important;}

accordion dropdown with image

Tom_Grissom

Tom_Grissom Member Posts: 7

August 9 in Ask a Question

Has anyone made an accordion dropdown with image widget? I'd like to save some time by not editing the html/css each time I need one.

0

Categories

/* * These styles apply ONLY to the header and footer assets. */ *, ::after, ::before { box-sizing: inherit; } ul, li { margin: 0; padding: 0; } .css-3xwfsg-typographyStyles-pageTitle-typographyStyles-largeTitle-Banner-styles-title { font-size: 46px !important; } ul { font-size: 16px; font-weight: 500; letter-spacing: .32px; line-height: 32px; margin-bottom: 20px; } .css-28ptsh-container-container-container-fullGutter-container-fullGutter-container-fullGutter { background-color: red; } .footer-duda a { text-decoration: none; } .footer-duda .container, .footer-duda .row { margin: auto; max-width: 1200px; } .footer-duda .row::after { clear: both; } .footer-duda .row::after, .footer-duda .row::before { display: table; content: ' '; -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-order: 1; order: 1; } .small-12 { width: 100%; } .column, .column:last-child:not(:first-child), .columns, .columns:last-child:not(:first-child) { float: left; clear: none; } .column, .columns { padding-right: .625rem; padding-left: .625rem; } @media print, screen and (min-width: 64em) { .large-6 { width: 50%; } .large-12 { width: 100%; } } @media print, screen and (min-width: 40em) { .column, .columns { padding-right: .9375rem; padding-left: .9375rem; } .medium-12 { width: 100%; } } @media screen and (max-width: 0em), screen and (min-width: 40em) { .show-for-small-only { display: none; } } .footer-duda { float: right; width: 100%; background-color: #171C34; color: #fff; padding: 0 0 40px; position: relative; z-index: 2; overflow: hidden; } /** for testing footer active. .footer-duda ul.lists li ul.active { border: dotted 1px #c7c7c7; } **/ @media (max-width: 768px) { .footer-duda { padding-bottom: 100px; } } ul.no-bullet { list-style: none; margin-left: 0; } @media (max-width: 64em) { .footer-duda { margin-top: 0; } } .footer-duda .d { text-align: center; margin: 128px 0; float: right; width: 100%; } @media (max-width: 64em) { .footer-duda .d { margin: 100px 0 32px; } } .footer-duda .d .title { color: #fff; font-size: 44px; font-family: 'Duda Sans' sans-serif; font-weight: bold; letter-spacing: 0; margin: 0 0 20px; } .footer-duda .lists { display: block; margin: 0 -25px; } .footer-duda .lists > li { float: left; list-style: none; padding: 0 25px; min-height: 300px; } @media (min-width: 64em) { .footer-duda .lists > li { min-height: 0; width: 25%; } } @media (max-width: 735px) { .footer-duda .lists > li { min-height: 350px; } } @media (max-width: 64em) { .footer-duda .d .title { font-size: 24px; } .footer-duda .lists > li { display: block; width: 100%; min-height: auto; } } .footer-duda .lists > li ul { color: #FFFFFF; margin-bottom: 40px; min-height: 186px; } .footer-duda .lists > li ul.active { padding-bottom: 20px; } @media (max-width: 64em) { .footer-duda .lists > li ul { border-bottom: 1px solid rgba(255, 255, 255, 0.5); margin: 0; min-height: auto; } .footer-duda .lists > li ul.active > li:not(.top) { display: block; } .footer-duda .lists > li ul.active > li.top svg { transform: rotateX(180deg); } .footer-duda .lists > li ul > li a { font-size: 14px !important; } .footer-duda .lists > li ul > li.top { cursor: pointer; } } .footer-duda .lists > li ul > li.top svg { display: none; float: right; transition: transform ease 0.3s; width: 14px; height: 46px; } @media (max-width: 40em) { .footer-duda .lists > li ul > li.top svg { width: 16px; } } .footer-duda .lists > li ul > li strong { letter-spacing: 1.5px; line-height: 46px; font-weight: 600; } .footer-duda .lists > li ul > li a { color: #FFFFFF; font-size: 16px; font-weight: 300; line-height: 35px; text-decoration: none; } .footer-duda .lists > li ul > li a .hiring { background: #f66135; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; margin-left: 2px; } .footer-duda .lists > li ul > li a:hover { color: #c7c7c7; } .footer-duda hr { border: 1px solid #fff !important; display: inline-block; margin: 35px 0 22px !important; width: 100%; } .footer-duda .copyrights { float: left; font-size: 16px; font-weight: 400; letter-spacing: 0; } @media (max-width: 64em) { .footer-duda .lists > li ul > li.top svg { display: block; } .footer-duda .lists > li ul > li:not(.top) { display:none; } .footer-duda .copyrights { width: 100%; text-align: center; padding: 30px 0; } } .footer-duda .copyrights a { color: #fff; margin: 0 10px; } .footer-duda .copyrights .up-year { display: inline-block; margin-right: 28px; } @media (max-width: 64em) { .footer-duda .copyrights .up-year { margin-right: 15px; } } @media (max-width: 40em) { .footer-duda .copyrights { font-size: 12px; } .footer-duda .copyrights .up-year { margin-right: 10px; } } @media (max-width: 350px) { .footer-duda .copyrights .up-year { width: 100%; margin-right: 0; } } .footer-duda .social-icons { display: -ms-flexbox; display: flex; float: right; width: auto; -ms-flex-pack: center; justify-content: center; } @media (max-width: 64em) { .footer-duda .social-icons { width: 100%; } } .footer-duda .social-icons .icon { float: right; width: 38px; height: 38px; line-height: 38px; border-radius: 100%; text-align: center; font-size: 15px; color: #fff; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; margin: 0 0 0 15px; transition: all 0.3s ease; } @media (max-width: 40em) { .footer-duda .social-icons .icon { margin: 40px 6px 0; } } .footer-duda .social-icons .icon:hover { opacity: 0.8; } .footer-duda .show-for-sr, .footer-duda .show-on-focus { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; } @media screen and (max-width: 0em), screen and (min-width: 40em) { .footer-duda .show-for-small-only { display: none!important; } } .footer-duda .column, .footer-duda .column:last-child:not(:first-child), .footer-duda .columns, .footer-duda .columns:last-child:not(:first-child) { clear: none; float: left; } @media (max-width: 768px) { .footer-duda .column, .footer-duda .column:last-child:not(:first-child), .footer-duda .columns, .footer-duda .columns:last-child:not(:first-child) { clear: both; float: initial; } } @media print, screen and (min-width: 40em) { .footer-duda .column, .footer-duda .columns { padding-right: .9375rem; padding-left: .9375rem; } } /* .footer-duda .show-for-large, .footer-duda .show-for-large-up, .footer-duda .show-for-medium, .footer-duda .show-for-medium-up, .footer-duda .show-for-xlarge { display: initial !important; } */ @media print, screen and (min-width: 64em) { .footer-duda .hide-for-large { display: none !important; } } @media screen and (max-width: 63.99875em) { .footer-duda .show-for-large { display: none!important; } } @media screen and (max-width: 39.99875em) { .footer-duda .show-for-medium { display: none!important; } } .footer-duda .column:last-child:not(:first-child), .footer-duda .columns:last-child:not(:first-child) { float: right; } @media screen and (max-width: 768px) { .footer-duda .column:last-child:not(:first-child), .footer-duda .columns:last-child:not(:first-child) { width: 100%; } } .button, .hs-button, button { font-size: 16px; background-color: #F66135; border-radius: 60px; min-width: 200px; padding: 0 40px; height: 48px; line-height: 49px; margin-bottom: 0; border: 0; color: #fff; font-weight: 500; display:inline-block; } /*# sourceMappingURL=styles.css.map */ .css-iaal00-dateTime-compactRoot {color: #FAF5EB !important;}

Let’s Duda This.

Start a Free Trial

Duda © 2022

Privacy Privacy Settings Terms GDPR