Враження

Палітра

Типографіка

Бібліотеки

Сторінки

• Home v1index.html
• Home Modernhome-modern.html
• Home Classichome-classic.html
• Home Dentisthome-dentist.html
• Home Pharmacyhome-pharmacy.html
• Aboutabout-us.html
• Servicesservices.html
• Service Detailsservices-single.html
• Departmentsdepartments.html
• Department Detailsdepartments-single.html
• Doctors Griddoctors-grid.html
• Doctors Moderndoctors-modern.html
• Doctors Standarddoctors-standard.html
• Doctors Timetabledoctors-timetable.html
• Single Doctor 1doctors-single-doctor1.html
• Single Doctor 2doctors-single-doctor2.html
• Appointmentappointment.html
• Pricingpricing.html
• FAQfaqs.html
• Gallerygallery.html
• Blogblog.html
• Blog Detailsblog-single-post.html
• Shopshop.html
• Product Detailsshop-single-product.html
• Cartshopping-cart.html
• Contactcontact-us.html

Ключові фішки

• Background-image hydration helper that converts <img> tags to CSS background covers

  Де знайти

  assets/js/main.js Set Background-img to section, index.html section.slider .slide-item .bg-img, index.html section.work-process .bg-img

  Чому цікаво

  Each section authors background imagery as a normal <img> inside a .bg-img wrapper for SEO/HTML clarity, then on DOM ready jQuery reads the src, applies it as background-image with cover/center on the parent, and removes the original <img>. Lets a CMS author change covers via standard image fields without editing inline styles.

  Коли використовувати

  Static/Bootstrap templates where every section has a hero photo and you want authors to upload images via plain <img> rather than touching inline styles or a JSON config.

  Техніка

  jQuery .each(), CSS background-image, DOM removal

• Asymmetric Slick slider-with-navs pairing quote text with a custom author thumb strip

  Де знайти

  index.html section.testimonials-layout2 .slider-with-navs, index.html section.testimonials-layout2 .slider-nav

  Чому цікаво

  Two Slick carousels are wired as main + nav, but instead of the usual same-card-pattern, the nav slider exposes only avatar + name + role tiles and the main slider holds large quote-only cards. Clicking a tile syncs both. Reads more like an editorial pull-quote with a credit chooser than a generic testimonial slider.

  Коли використовувати

  Testimonials, case-study quotes, expert-panel highlights — anywhere a single quote should dominate the layout while a compact author roster lets readers swap voices.

  Техніка

  Slick carousel asNavFor option, dual containers

• Service card with duplicated icon decoration that bleeds out of the bottom-right corner

  Де знайти

  index.html section.services-carousel .service-item .service__icon, assets/scss/module/_services.scss

  Чому цікаво

  Each service card renders its <i> icon twice — the first sits at normal size in the top-left, the second is set to 140px, opacity 0.1, and absolute-positioned offset off the bottom-right of the card. Gives the otherwise plain card a subtle ghost-icon backdrop without an extra image asset.

  Коли використовувати

  Service/feature cards that need a visual anchor without illustrations; works well for icon-font sets where the same glyph at large size feels like watermark art.

  Техніка

  Icon font (custom Medcity icomoon), absolute positioning, opacity

• Header dropdown plus side mini-popups for Emergency and Departments

  Де знайти

  index.html header.header-layout1 .miniPopup-emergency-trigger, index.html header.header-layout1 .miniPopup-departments-trigger, assets/js/main.js openMiniPopup()

  Чому цікаво

  Beyond the standard Bootstrap dropdown nav, two additional mini-popups (emergency phone card, departments grid) are toggled via .active class on both trigger and popup, with a shared closePopupFromOutside helper using mouseup outside-click detection. The departments trigger doubles as a hamburger-style toggle alongside the link itself.

  Коли використовувати

  Healthcare/services sites where the topbar must surface emergency or location info inline without redirecting; also useful for quick mega-dropdowns from non-nav elements.

  Техніка

  jQuery class toggling, document mouseup, Bootstrap 4 dropdown coexistence

• Slide-up underline reveal on team cards

  Де знайти

  index.html section.team-layout2 .member, assets/scss/module/_team.scss .member:before

  Чому цікаво

  Each .member has a 3px primary-color bar pseudo-element pinned to the bottom 40px from each edge, scaleX(0) by default. On card hover (or active slide) it scales to 1 with a 0.3s delay, creating a 'underline drawing in' moment that draws the eye to the active doctor without rebuilding the whole card.

  Коли використовувати

  Team/portfolio cards where a hover state needs more identity than a shadow change but you want to keep the card surface clean.

  Техніка

  CSS pseudo-element, transform scaleX, transition-delay

Компоненти