- var theme_customizer = true; - var tooltip = true; - var sidebar = true; - var slick = true; - var header_slider = true; - var animate = true; - var popper = true; - var scrollbar = true; - var validation_modal = true; - var height_equal = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader include ../../components/taptop // page-wrapper Start #pageWrapper.page-wrapper.compact-wrapper include ../../components/header // Page Body Start .page-body-wrapper include ../../components/sidebar .page-body .container-fluid .page-title .row .col-6 h4 | Modal .col-6 ol.breadcrumb li.breadcrumb-item a(href='index.html') svg.stroke-icon use(href='../assets/svg/icon-sprite.svg#stroke-home') li.breadcrumb-item Ui KIts li.breadcrumb-item.active Modal // Container-fluid starts .container-fluid .row .col-lg-6 .card .card-header h4 Basic Modal p.mt-1.f-m-light | Different types of basic modals using like code simple/scrolling/tooltips/grid/varying modal | . .card-body.badge-spacing // Simple demo button.btn.btn-secondary(type='button', data-bs-toggle='modal', data-original-title='test', data-bs-target='#exampleModal') Simple #exampleModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true') .modal-dialog(role='document') .modal-content .modal-body .modal-toggle-wrapper h4 | Up to strong.txt-danger 85% OFF | , Hurry Up Online Shopping .modal-img img(src="../assets/gif/online-shopping.gif", alt="online-shopping") p.text-sm-center Our difficulty in finding regular clothes that was of great quality, comfortable, and didn't impact the environment given way to Creatures of Habit. button.btn.bg-primary.d-flex.align-items-center.gap-2.text-light.ms-auto(type='button', data-bs-dismiss='modal') Explore More i(data-feather='arrow-right') // Scrolling long content button.btn.btn-success(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalLong') | Scrolling content #exampleModalLong.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLongTitle', aria-hidden='true') .modal-dialog(role='document') .modal-content .modal-header h5#exampleModalLongTitle.modal-title Scrolling Modal button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close') .modal-body h6 Wed Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience. .d-flex.mt-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | As a web designer, you either prefer to work freelance for several different businesses at once or you may choose to work for just one. In either case, you'll need good time management skills to keep several projects moving forward. .d-flex.mt-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Although a designer doesn't write the code that makes a site work, it doesn't hurt to have a basic understanding of HTML or CSS to make minor adjustments to a site. You'll find it simpler to edit templates, improve typefaces, or change item placements if you have a basic understanding of how things work. .d-flex.my-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p.pb-4 | Most businesses employ a certain font or typography so that clients can quickly distinguish them from their rivals. Since designers now have access to a wider variety of fonts, firms may more easily and precisely communicate their brands through typography. h6 UX Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | User research, persona creation, building wireframes and interactive prototypes, and testing ideas are among the common tasks of a UX designer. These duties can differ greatly between organizations. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Create solutions that will be helpful for the issues and situations that exist right now, not for those that will. With the right materials, assist people in organizing their time, completing things more quickly, and optimizing it. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Based on the data received from users, improve them. Adapt existing solutions to the requirements, hopes, difficulties, and expectations of users. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Keep in mind that you are creating solutions to particular challenges for a particular population living in a particular habitat. Always remember to correctly contextualise your thoughts and determine whether they are actually appropriate for the situation. It's sometimes necessary to concede that a digital solution is not the most appropriate choice in a certain circumstance. .modal-footer button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close button.btn.btn-primary(type='button') Save changes // Tooltips and popovers modal button.btn.btn-info(type='button', data-bs-toggle='modal', data-bs-target='#tooltipmodal') | Tooltips and popovers #tooltipmodal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='tooltipmodal', aria-hidden='true') .modal-dialog.modal-dialog-centered(role='document') .modal-content .modal-header h5.modal-title Tooltip and Popover Modal button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close') .modal-body h5 Popover in a modal p.mt-2 | This a.btn.btn-success.popover-test(href='#', role='button', title='this is amazing content', data-bs-toggle="popover") button | triggers a popover on click. hr h5 Tooltips in a modal p.mt-2 a.tooltip-test.text-info(href='#', title='Tooltip', data-bs-toggle="tooltip") This link | and a.tooltip-test.text-info(href='#', title='Tooltip', data-bs-toggle="tooltip") that link | have tooltips on hover. .modal-footer button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close button.btn.btn-primary(type='button') Save changes //varying modal content button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalgetbootstrap', data-whatever='@getbootstrap') Open modal for cuba #exampleModalgetbootstrap.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true') .modal-dialog(role='document') .modal-content .modal-toggle-wrapper.social-profile.text-start.dark-sign-up h3.modal-title.text-center CUBA SIGN-UP .modal-body form.row.g-3.needs-validation(novalidate='') .col-md-6 label.form-label(for='validationCustom01') First name input#validationCustom01.form-control(type='text' placeholder='Enter your first-name' required='') .valid-feedback | Looks good! .col-md-6 label.form-label(for='validationCustom02') Last name input#validationCustom02.form-control(type='text' placeholder='Enter your last-name' required='') .valid-feedback | Looks good! .col-md-12 .mb-3 label.form-label(for='exampleFormControlInput1') Email address input#exampleFormControlInput1.form-control(type='email' placeholder='cubatheme@gmail.com') .col-md-12 .form-check.mb-3 input#flexCheckDefault.form-check-input(type='checkbox' value='') label.form-check-label(for='flexCheckDefault') | You accept our Terms and Privacy Policy by clicking Submit below. button.btn.btn-primary(type='submit') Sign Up .col-lg-6 .card .card-header h4 Sizes Modal p.mt-1.f-m-light | Modals have three optional sizes, available via modifier classes to be placed on a code .modal-dialog .card-body.badge-spacing //full screen modal .btn.btn-secondary(type='button', data-bs-toggle='modal', data-bs-target='.bd-example-modal-fullscreen') Full Screen Modal .modal.fade.bd-example-modal-fullscreen(tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true') .modal-dialog.modal-fullscreen .modal-content .modal-header h4#myLargeModalLabel.modal-title Extra Large modal button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Web Design p.modal-padding-space We build specialised websites for companies, list them on digital directories, and set up a sales funnel to boost ROI. .large-modal-header i(data-feather='chevrons-right') h6 Content Marketing p.modal-padding-space Through better opportunities and knowledgeable marketing strategies, we aid business funnel. We won't only hit the target; instead, we'll aim higher and surpass the objectives. .large-modal-header i(data-feather='chevrons-right') h6 PPC p.modal-padding-space Customized advertising to increase visitors and improve conversion. To increase retention, identify the correct audience and remarket to them. .large-modal-header i(data-feather='chevrons-right') h6 UX Designer p.modal-padding-space The capacity to comprehend and experience other people's feelings is known as empathy. A positive consumer experience is prioritised by UX. The finest UX designers spend time studying individuals and their tendencies because of this. Designers may produce goods that genuinely engage and excite customers by having a thorough understanding of the end consumers. //Extra large modal .btn.btn-info(type='button', data-bs-toggle='modal', data-bs-target='.bd-example-modal-xl') Extra large Modal .modal.fade.bd-example-modal-xl(tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true') .modal-dialog.modal-xl .modal-content .modal-header h4#myLargeModalLabel.modal-title Extra Large modal button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Web Design p.modal-padding-space We build specialised websites for companies, list them on digital directories, and set up a sales funnel to boost ROI. .large-modal-header i(data-feather='chevrons-right') h6 Content Marketing p.modal-padding-space Through better opportunities and knowledgeable marketing strategies, we aid business funnel. We won't only hit the target; instead, we'll aim higher and surpass the objectives. .large-modal-header i(data-feather='chevrons-right') h6 PPC p.modal-padding-space Customized advertising to increase visitors and improve conversion. To increase retention, identify the correct audience and remarket to them. .large-modal-header i(data-feather='chevrons-right') h6 UX Designer p.modal-padding-space The capacity to comprehend and experience other people's feelings is known as empathy. A positive consumer experience is prioritised by UX. The finest UX designers spend time studying individuals and their tendencies because of this. Designers may produce goods that genuinely engage and excite customers by having a thorough understanding of the end consumers. // Large modal button.btn.btn-success(type='button', data-bs-toggle='modal', data-bs-target='.bd-example-modal-lg') Large Modal .modal.fade.bd-example-modal-lg(tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true') .modal-dialog.modal-lg .modal-content .modal-header h4#myLargeModalLabel.modal-title Large modal button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Start with your goals p.modal-padding-space.mb-0 No matter how talented you are as a content writer or creator, you will always fail if you don't have a clear set of goals. p.modal-padding-space.mb-0 First of all, without goals, there is no way to determine your success. Additionally, you lack direction. p.modal-padding-space.mb-0 Together with your team, respond to the following questions to make sure they are: .large-modal-body i(data-feather='corner-up-right') p.ps-1 What must you achieve, and by when? .large-modal-body i(data-feather='corner-up-right') p.ps-1 How will you evaluate your level of success? .large-modal-body i(data-feather='corner-up-right') p.ps-1 Can you accomplish it with the available resources? .large-modal-body i(data-feather='corner-up-right') p.ps-1 Does it advance your core business aims? // Small modal button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='.bd-example-modal-sm') Small Modal .modal.fade.bd-example-modal-sm(tabindex='-1', role='dialog', aria-labelledby='mySmallModalLabel', aria-hidden='true') .modal-dialog.modal-sm .modal-content .modal-header h4#mySmallModalLabel.modal-title Small modal button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Web Design p.modal-padding-space We build specialised websites for companies, list them on digital directories, and set up a sales funnel to boost ROI. .large-modal-header i(data-feather='chevrons-right') h6 Content Marketing p.modal-padding-space Through better opportunities and knowledgeable marketing strategies, we aid business funnel. We won't only hit the target; instead, we'll aim higher and surpass the objectives. .large-modal-header i(data-feather='chevrons-right') h6 PPC p.modal-padding-space Customized advertising to increase visitors and improve conversion. To increase retention, identify the correct audience and remarket to them. .col-xl-12 .card .card-header h4 Fullscreen Modal p.f-m-light.mt-1 | Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a code .modal-dialog | . .card-body.badge-spacing button.btn.btn-outline-secondary-2x(type='button' data-bs-toggle='modal' data-bs-target='#exampleModalfullscreen') | Fullscreen modal // Full Screen Modal #exampleModalfullscreen.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true') .modal-dialog.modal-fullscreen .modal-content .modal-header h1#exampleModalLabel.modal-title.fs-5 Full Screen Modal button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Web Design p.modal-padding-space We build specialised websites for companies, list them on digital directories, and set up a sales funnel to boost ROI. h6 Wed Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience. .d-flex.mt-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | As a web designer, you either prefer to work freelance for several different businesses at once or you may choose to work for just one. In either case, you'll need good time management skills to keep several projects moving forward. .d-flex.mt-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Although a designer doesn't write the code that makes a site work, it doesn't hurt to have a basic understanding of HTML or CSS to make minor adjustments to a site. You'll find it simpler to edit templates, improve typefaces, or change item placements if you have a basic understanding of how things work. .d-flex.my-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p.pb-4 | Most businesses employ a certain font or typography so that clients can quickly distinguish them from their rivals. Since designers now have access to a wider variety of fonts, firms may more easily and precisely communicate their brands through typography. h6 UX Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | User research, persona creation, building wireframes and interactive prototypes, and testing ideas are among the common tasks of a UX designer. These duties can differ greatly between organizations. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Create solutions that will be helpful for the issues and situations that exist right now, not for those that will. With the right materials, assist people in organizing their time, completing things more quickly, and optimizing it. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Based on the data received from users, improve them. Adapt existing solutions to the requirements, hopes, difficulties, and expectations of users. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Keep in mind that you are creating solutions to particular challenges for a particular population living in a particular habitat. Always remember to correctly contextualise your thoughts and determine whether they are actually appropriate for the situation. It's sometimes necessary to concede that a digital solution is not the most appropriate choice in a certain circumstance. .modal-footer button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close button.btn.btn-primary(type='button') Save button.btn.btn-outline-info-2x(type='button' data-bs-toggle='modal' data-bs-target='#exampleModalfullscreensm') | Fullscreen below sm // Full screen below sm #exampleModalfullscreensm.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true') .modal-dialog.modal-fullscreen-sm-down .modal-content .modal-header h1#exampleModalLabel.modal-title.fs-5 Full Screen Below sm button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Web Design p.modal-padding-space We build specialised websites for companies, list them on digital directories, and set up a sales funnel to boost ROI. h6 Wed Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience. .d-flex.my-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p.pb-4 | Most businesses employ a certain font or typography so that clients can quickly distinguish them from their rivals. Since designers now have access to a wider variety of fonts, firms may more easily and precisely communicate their brands through typography. h6 UX Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | User research, persona creation, building wireframes and interactive prototypes, and testing ideas are among the common tasks of a UX designer. These duties can differ greatly between organizations. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Keep in mind that you are creating solutions to particular challenges for a particular population living in a particular habitat. Always remember to correctly contextualise your thoughts and determine whether they are actually appropriate for the situation. It's sometimes necessary to concede that a digital solution is not the most appropriate choice in a certain circumstance. .modal-footer button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close button.btn.btn-primary(type='button') Save changes button.btn.btn-outline-success-2x(type='button' data-bs-toggle='modal' data-bs-target='#exampleModalfullscreen-md') | Fullscreen below md // Full screen below md #exampleModalfullscreen-md.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true') .modal-dialog.modal-fullscreen-md-down .modal-content .modal-header h1#exampleModalLabel.modal-title.fs-5 Full Screen Below md button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Web Design p.modal-padding-space We build specialised websites for companies, list them on digital directories, and set up a sales funnel to boost ROI. h6 Wed Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience. .d-flex.my-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p.pb-4 | Most businesses employ a certain font or typography so that clients can quickly distinguish them from their rivals. Since designers now have access to a wider variety of fonts, firms may more easily and precisely communicate their brands through typography. h6 UX Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | User research, persona creation, building wireframes and interactive prototypes, and testing ideas are among the common tasks of a UX designer. These duties can differ greatly between organizations. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Keep in mind that you are creating solutions to particular challenges for a particular population living in a particular habitat. Always remember to correctly contextualise your thoughts and determine whether they are actually appropriate for the situation. It's sometimes necessary to concede that a digital solution is not the most appropriate choice in a certain circumstance. .modal-footer button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close button.btn.btn-primary(type='button') Save changes button.btn.btn-outline-warning-2x(type='button' data-bs-toggle='modal' data-bs-target='#exampleModalfullscreen-lg') |Fullscreen below lg // Full screen below lg #exampleModalfullscreen-lg.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true') .modal-dialog.modal-fullscreen-lg-down .modal-content .modal-header h1#exampleModalLabel.modal-title.fs-5 Full Screen Below lg button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Web Design p.modal-padding-space We build specialised websites for companies, list them on digital directories, and set up a sales funnel to boost ROI. h6 Wed Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience. .d-flex.my-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p.pb-4 | Most businesses employ a certain font or typography so that clients can quickly distinguish them from their rivals. Since designers now have access to a wider variety of fonts, firms may more easily and precisely communicate their brands through typography. h6 UX Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | User research, persona creation, building wireframes and interactive prototypes, and testing ideas are among the common tasks of a UX designer. These duties can differ greatly between organizations. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Keep in mind that you are creating solutions to particular challenges for a particular population living in a particular habitat. Always remember to correctly contextualise your thoughts and determine whether they are actually appropriate for the situation. It's sometimes necessary to concede that a digital solution is not the most appropriate choice in a certain circumstance. .modal-footer button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close button.btn.btn-primary(type='button') Save changes button.btn.btn-outline-primary-2x(type='button' data-bs-toggle='modal' data-bs-target='#exampleModalfullscreen-xl') | Fullscreen below xl // Full screen below xl #exampleModalfullscreen-xl.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true') .modal-dialog.modal-fullscreen-xl-down .modal-content .modal-header h1#exampleModalLabel.modal-title.fs-5 Full Screen Below xl button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Web Design p.modal-padding-space We build specialised websites for companies, list them on digital directories, and set up a sales funnel to boost ROI. h6 Wed Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience. .d-flex.my-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p.pb-4 | Most businesses employ a certain font or typography so that clients can quickly distinguish them from their rivals. Since designers now have access to a wider variety of fonts, firms may more easily and precisely communicate their brands through typography. h6 UX Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | User research, persona creation, building wireframes and interactive prototypes, and testing ideas are among the common tasks of a UX designer. These duties can differ greatly between organizations. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Keep in mind that you are creating solutions to particular challenges for a particular population living in a particular habitat. Always remember to correctly contextualise your thoughts and determine whether they are actually appropriate for the situation. It's sometimes necessary to concede that a digital solution is not the most appropriate choice in a certain circumstance. .modal-footer button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close button.btn.btn-primary(type='button') Save changes button.btn.btn-outline-danger-2x(type='button' data-bs-toggle='modal' data-bs-target='#exampleModalfullscreen-xxl') | Fullscreen below xxl // Full screen below xxl #exampleModalfullscreen-xxl.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true') .modal-dialog.modal-fullscreen-xxl-down .modal-content .modal-header h1#exampleModalLabel.modal-title.fs-5 Full Screen Below xxl button.btn-close(type='button' data-bs-dismiss='modal' aria-label='Close') .modal-body.dark-modal .large-modal-header i(data-feather='chevrons-right') h6 Web Design p.modal-padding-space We build specialised websites for companies, list them on digital directories, and set up a sales funnel to boost ROI. h6 Wed Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | For a site to be successful, a designer must be able to communicate their ideas, chat with a firm about what they want, and inquire about the target audience. .d-flex.my-2 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p.pb-4 | Most businesses employ a certain font or typography so that clients can quickly distinguish them from their rivals. Since designers now have access to a wider variety of fonts, firms may more easily and precisely communicate their brands through typography. h6 UX Designer .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | User research, persona creation, building wireframes and interactive prototypes, and testing ideas are among the common tasks of a UX designer. These duties can differ greatly between organizations. .d-flex.mt-3 .flex-shrink-0 i.svg-modal(data-feather='arrow-right-circle') .flex-grow-1.ms-2 p | Keep in mind that you are creating solutions to particular challenges for a particular population living in a particular habitat. Always remember to correctly contextualise your thoughts and determine whether they are actually appropriate for the situation. It's sometimes necessary to concede that a digital solution is not the most appropriate choice in a certain circumstance. .modal-footer button.btn.btn-secondary(type='button' data-bs-dismiss='modal') Close button.btn.btn-primary(type='button') Save changes .col-xl-4 .card .card-header h4 Centered Modal p.f-m-light.mt-1 | Use the code .modal-dialog-centered | through centered modal. and set code data-bs-target |. .card-body //Centered modal button.btn.btn-success(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalCenter1') | Vertically centered #exampleModalCenter1.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalCenter1', aria-hidden='true') .modal-dialog.modal-dialog-centered(role='document') .modal-content .modal-body .modal-toggle-wrapper ul.modal-img li img(src="../assets/gif/danger.gif", alt="error") h4.text-center.pb-2 Ohh! Something went wrong! p.text-center | Attackers on malicious activity may trick you into doing something dangrous like installing software or revealing your personal informations. button.btn.btn-secondary.d-flex.m-auto(type='button', data-bs-dismiss='modal') Close .col-xl-4 .card .card-header h4 Toggle Between Modals p.f-m-light.mt-1 | Toggle between multiple modals with some clever placement of the code data-bs-target | and code data-bs-toggle | attributes. .card-body #exampleModalToggle.modal.fade(aria-hidden='true' aria-labelledby='exampleModalToggleLabel' tabindex='-1') .modal-dialog.modal-dialog-centered .modal-content .modal-body .modal-toggle-wrapper ul.modal-img li img(src="../assets/gif/whatapp.gif", alt="whatsapp") li img(src="../assets/gif/instagram.gif", alt="instagram") li img(src="../assets/gif/facebook.gif", alt="facebook") h6 Remove your complete account from your phone or tablet to sign out of the Gmail app. button.btn.btn-dark.rounded-pill.w-100.mt-4(data-bs-target='#exampleModalToggle2' data-bs-toggle='modal') Connect new account button.btn.rounded-pill.w-100.dark-toggle-btn(type='button', data-bs-dismiss='modal') Cancel #exampleModalToggle2.modal.fade(aria-hidden='true' aria-labelledby='exampleModalToggleLabel2' tabindex='-1') .modal-dialog.modal-dialog-centered .modal-content .modal-body .modal-toggle-wrapper ul.modal-img li img(src="../assets/gif/logout.gif", alt="logout") h4.pt-3.text-center Already leaving?? p.text-center Are you sure want to logout this dashboard? span.d-block.text-center.mb-4 Not a member? a.ms-1(href="dashboard-02.html") Register button.btn.btn-dark.d-flex.m-auto(type='button', data-bs-dismiss='modal') Yes, Log out a.btn.btn-dark(data-bs-toggle='modal' href='#exampleModalToggle' role='button') Open first modal .col-xl-4 .card .card-header h4 Static Backdrop Modal p.f-m-light.mt-1 | When backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it. .card-body button.btn.btn-primary(type='button' data-bs-toggle='modal' data-bs-target='#staticBackdrop') | Static backdrop modal // Modal #staticBackdrop.modal.fade(data-bs-backdrop='static' data-bs-keyboard='false' tabindex='-1' aria-labelledby='staticBackdropLabel' aria-hidden='true') .modal-dialog .modal-content.dark-sign-up .modal-body.social-profile.text-start .modal-toggle-wrapper h3 Cuba Login p | Fill in your information below to continue. form.row.g-3 .col-md-12 label.form-label(for='inputEmail4') Email input#inputEmail4.form-control(type='email' placeholder='Enter Your Email') .col-md-12 label.form-label(for='inputPassword4') Password input#inputPassword4.form-control(type='password' placeholder='Enter Your Password') .col-12 .form-check input#gridCheck.form-check-input(type='checkbox') label.form-check-label(for='gridCheck') | Check me out .col-12 button.btn.btn-primary(type='submit' data-bs-dismiss='modal') Sign in .col-12 .card .card-header h4 Cuba Custom Modals p.f-m-light.mt-1 | Custom Modal make by cuba. .card-body .row.g-3 .col-xl-4.col-md-6.custom-alert.text-center .card-wrapper.border.rounded-3.h-100 .cuba-demo-img ul.dot-group.pb-3.pt-0 li li li .title-wrapper.pb-3.modal-heading h5.theme-name.mb-0 span Modal 1 - | Profile Modal p Example of cuba dashboard profile card. .overflow-hidden img.img-fluid(src='../assets/images/alert/social.png' alt='social') button.btn.btn-primary.mx-auto.mt-3(type='button', data-bs-toggle='modal', data-bs-target='#exampleModallaptop1') | Click Out #exampleModallaptop1.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModallaptop1', aria-hidden='true') .modal-dialog.modal-dialog-centered(role='document') .modal-content .col-xl-12 .card.social-profile.mb-0 .card-body .social-img-wrap .social-img img(src="../assets/images/dashboard-5/profile.png", alt="profile") .edit-icon svg use(href='../assets/svg/icon-sprite.svg#profile-check') .social-details h5.mb-1 a(href="social-app.html") Brooklyn Simmons span.f-light @brookly.simmons ul.social-follow li h5.mb-0 1,908 span.f-light Posts li h5.mb-0 34.0k span.f-light Followers li h5.mb-0 897 span.f-light Following .col-xl-4.col-md-6.custom-alert.text-center .card-wrapper.border.rounded-3.h-100 .cuba-demo-img ul.dot-group.pb-3.pt-0 li li li .title-wrapper.pb-3.modal-heading h5.theme-name.mb-0 span Modal 2 - | Result Modal p Example of cuba login form. .overflow-hidden img.img-fluid(src='../assets/images/alert/learning.png' alt='learning') button.btn.btn-primary.mx-auto.mt-3(type='button', data-bs-toggle='modal', data-bs-target='#exampleModallogin') | Click Out #exampleModallogin.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModallogin', aria-hidden='true') .modal-dialog.modal-dialog-centered(role='document') .modal-content.dark-sign-up .modal-body.social-profile.text-start .modal-toggle-wrapper h3 Cuba Login p | Fill in your information below to continue. form.row.g-3 .col-md-12 label.form-label(for='inputEmail4') Email input#inputEmail4.form-control(type='email' placeholder='Enter Your Email') .col-md-12 label.form-label(for='inputPassword4') Password input#inputPassword4.form-control(type='password' placeholder='Enter Your Password') .col-12 .form-check input#gridCheck.form-check-input(type='checkbox') label.form-check-label(for='gridCheck') | Check me out .col-12 button.btn.btn-primary(type='submit' data-bs-dismiss='modal') Sign in .col-xl-4.col-md-12.custom-alert.text-center .card-wrapper.border.rounded-3.h-100 .cuba-demo-img ul.dot-group.pb-3.pt-0 li li li .title-wrapper.pb-3.modal-heading h5.theme-name.mb-0 span Modal 3 - | Balance Modal p Example of cuba dashboard balance card. .overflow-hidden.balance-modal img.img-fluid(src='../assets/images/alert/balance.png' alt='balance') button.btn.btn-primary.mx-auto.mt-3(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalbalancebox') | Click Out #exampleModalbalancebox.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalbalancebox', aria-hidden='true') .modal-dialog.modal-dialog-centered(role='document') .modal-content .col-xl-12 .card.balance-box.mb-0 .card-body .balance-profile .balance-img img(src="../assets/images/dashboard-4/user.png", alt="user vector") a(href="user-profile.html").edit-icon svg use(href='../assets/svg/icon-sprite.svg#pencil') span.f-light.d-block Your Balance h5.mt-1 $768,987.90 ul li .balance-item.danger .balance-icon-wrap .balance-icon i(data-feather="arrow-down-right") div span.f-12.f-light Investment h5 78.8K span.badge.badge-light-danger.rounded-pill -11.67% li .balance-item.success .balance-icon-wrap .balance-icon i(data-feather="arrow-up-right") div span.f-12.f-light Cash Back h5 19.7K span.badge.badge-light-success.rounded-pill +10.67% // Container-fluid Ends include ../../components/footer include ../../components/footer-files