Teamdream - Responsive Team Card Bootstrap Template

Codecanyon

Add Caregory:
HTML5
__________________
Title:
TeamDream – Responsive Group Card Bootstrap Template
__________________
Class:
Template
__________________
Excessive Decision:
Sure
__________________
Suitable Browsers:
Firefox, Safari, Opera, Chrome, Edge
__________________
Information Included:
HTML, CSS, SCSS, JS
__________________
Software program Model:
HTML5, Bootstrap 5.3
__________________
Demo URL:
https://teamdream.netlify.app/
__________________
Tags:
crew card, card, bootstrap, crew, inventive crew, skilled crew, responsive, crew members, crew html,
crew structure, crew checklist, darkish mode, glassmorphism, crew listing, crew filter, bootstrap 5, sass, scss

__________________
HTML Description:

TeamDream — Responsive Group Card Bootstrap Template

TeamDream is a premium HTML crew card template that includes 10 distinctive, totally distinct layouts — from basic grids and editorial darkish playing cards to glassmorphism, overlay hover, and interactive division filters. Each structure is pixel-perfect, W3C legitimate, and able to drop into any web site with compiled CSS included.

Constructed from the bottom up with Bootstrap 5.3, Sass supply recordsdata, CSS customized properties for easy darkish mode, and vanilla JS for filtering — no jQuery, simply clear and trendy code. The included package deal.json is optionally available and solely wanted if you wish to rebuild CSS from SCSS.

10 Distinctive Layouts Included:

Format 01 — Traditional Grid Mild: 4-column portrait card grid on a heat impartial background. Ghost social icon circles, lift-on-hover shadow.
Format 02 — Editorial Darkish Grid: 3-column panorama picture playing cards on a deep navy gradient. Left-aligned typography with an indigo accent rule.
Format 03 — Horizontal Playing cards: Full-width row playing cards with picture left, bio proper. Accent border slides in from the left on hover.
Format 04 — Full Overlay Hover: Portrait playing cards the place hovering reveals title, position, bio and social hyperlinks by way of a clean darkish overlay.
Format 05 — Minimal Circle: Extremely-minimal structure with round images — a floating card materialises on hover.
Format 06 — Glassmorphism: Frosted glass playing cards over a vivid purple gradient. Blur + saturation backdrop filter with sleek fallback.
Format 07 — Record View: Group listing in a filterable desk format with avatar, badge, socials, and profile hyperlink per row.
Format 08 — Expertise & Tags Darkish: Darkish mode playing cards with square-cropped images, talent capsule badges, and expertise indicators.
Format 09 — Featured + Grid: Uneven structure — massive featured chief card on the left, compact 3-column mini-grid on the suitable.
Format 10 — Filter by Division: Sq.-crop playing cards with colored division badges. Prompt filter tabs for Management, Engineering, Design, Advertising and marketing.

Why select TeamDream?

10 Genuinely Distinct Layouts:

Each structure has a novel structural idea — completely different picture proportions, grid techniques, interplay patterns, and visible therapies.
Darkish Mode Constructed In:

CSS customized property theming system. Toggle data-theme="darkish" on the html component — each color adapts immediately.
Prepared With out Construct Instruments:

Open any HTML file in a browser and it really works. Compiled CSS is included, whereas Sass supply recordsdata and optionally available package deal.json scripts are supplied for superior customization.
Interactive JS Filtering:

Vanilla JS division filter with on the spot present/disguise — no jQuery wanted.
Card Entrance Animations:

IntersectionObserver-based fade+slide animations that set off as playing cards enter the viewport.
SVG Social Icons:

Devoted SVG icons for Fb, LinkedIn, X (Twitter), GitHub, Dribbble, and Figma. Context-aware tinting by way of CSS filter.
W3C Legitimate HTML5:

All 11 HTML recordsdata validated clear — zero errors, zero warnings.
Absolutely Responsive:

Optimized for desktop, pill, and cell on all trendy browsers.

Tech Stack & Options:

Bootstrap v5.3.3 (CDN)
Materials Design Icons v7.4 for UI helper icons, bundled domestically
Google Fonts: Inter + Lora
Customized SVG social icons (Fb, LinkedIn, X, GitHub, Dribbble, Figma)
Sass supply recordsdata with !default variables and modular structure partials
CSS customized properties theming (mild + darkish)
IntersectionObserver card animations
Vanilla JS division filter
Glassmorphism with @helps fallback
100% Responsive
W3C legitimate HTML5 (all recordsdata)
Cross-browser: Chrome, Firefox, Safari, Opera, Edge
No jQuery; compiled CSS works with out working construct instruments
FREE lifetime updates
Help inside 24 hours
Full HTML documentation included

What’s included within the obtain?

touchdown.html — overview web page with hyperlinks to all 10 demos
index.html by means of index-10.html — 10 distinctive demo layouts
src/belongings/css/ — type.css, Bootstrap 5.3, Materials Design Icons CSS
src/belongings/scss/ — Sass supply recordsdata, variables, structure partials, and responsive kinds
src/belongings/js/important.js — animations + filter logic
src/belongings/img/icons/ — customized SVG social icons (so-* model colours + sw-* white variants)
src/belongings/fonts/ — MDI webfont recordsdata (woff2, woff, ttf, eot)
package deal.json — optionally available Sass construct scripts: construct:css, watch:css, construct:css:min
documentation/ — full HTML documentation

third Celebration Libraries:

Photographs License:

Preview pictures are for demonstration solely and are not included within the obtain package deal.

Help:

When you have any questions, please be at liberty to contact us.
You’ll obtain a response inside 12–24 hours.

Documentation:

Check the docs here

The documentation contains separate sections for CSS construction, Sass construction, rebuilding CSS, altering crew card colours and fonts, and altering social icons.

Essential Be aware:

All preview pictures are for demonstration solely and should not included within the remaining buy recordsdata.
Sass and package deal.json are optionally available. The included compiled CSS works instantly; run npm set up solely if you wish to rebuild CSS from SCSS.
The principle package deal builds with npm run construct:css.
CSS/code customization past the template’s present function set isn’t included in merchandise assist scope per Envato coverage.

Model Historical past:

v1.0.0 — 19.06.2026

- Full visible redesign: heat impartial palette, full darkish mode overhaul
- 10 distinctive layouts (up from 1 in v1.0)
- New layouts: Editorial Darkish Grid, Horizontal Playing cards, Overlay Hover,
  Minimal Circle, Glassmorphism, Record View, Expertise+Tags, Featured+Grid,
  Filter by Division
- SVG social icons changing MDI icon fonts
- Twitter renamed to X all through
- IntersectionObserver card entrance animations
- Interactive division filter (Vanilla JS, no jQuery)
- Inter + Lora Google Fonts pairing
- Sass supply recordsdata added with modular structure partials and construct scripts
- Documentation expanded with CSS/Sass construction, construct, colours, fonts, and icons
- W3C validated — zero errors throughout all 11 HTML recordsdata

v1.0.0 — 01.03.2024

- Preliminary Launch

For those who love our product, please don’t overlook to charge it 5 stars

and tell us your suggestions. Thanks

Observe:

Source

Teamdream – Responsive Team Card Bootstrap Template