818 lines
58 KiB
Plaintext
818 lines
58 KiB
Plaintext
- 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
|