Hipster As F*** Cards
Icon html
Icon bootstrap

Interested in all of our Premium Products? Get the 'Big Bundle' with 95% discount!

Hipster As F*** Cards

Cards Snippet
· 4.90/5 (59 Reviews)

MIT License

6,709 Downloads
23 Comments
Regular Support
Lifetime Updates
Release: 2 years ago
Update: 2 years ago
Icon html
Icon bootstrap
Product certified by: Creative Tim

We are here to help you!

23 Web Developers commented on this product

axelut
  • owner
2 years ago

Give it a try!

thiago.bernardo
  • downloaded
2 years ago

Chrome detected as malicious ¬¬

axelut
  • owner

@thiago.bernardo thank you for the information, can you give us more details?
2 years ago

thiago.bernardo
  • downloaded

I do not know what happend, but chrome says: https://support.google.com/chrome/answer/6261569?p=ib_download_blocked&hl I had no problem using firefox and no virus was detected after scanned.
2 years ago

felixinx
  • downloaded
2 years ago

Hi, how can I implent cards on my website?

axelut
  • owner

@felixinx you need to import the css and javascript files from the downloaded archive and then you just copy the piece of code from the cards that you like into your website code.
2 years ago

melannie
  • downloaded
2 years ago

I have been trying to download this on my mac...it is taking forever and the button just keeps saying loading, but nothing happens.

axelut
  • owner

@melannie hi, that's really wierd, did you get your archive?
2 years ago

Daanzzzzz
  • downloaded
2 years ago

Looking good! Unfortunately the stylesheet from Hipster as F*** Cards appears to mess up your Light Bootstrap Dashboard theme when used together (name collision on .card).

axelut
  • owner

Thank you for the information. Technically they were not supposed to work together, because the Dashboard was build for something, the Hipster Cards are build for something else. As a quick fix to solve this problem is to take the "hipster_cards.css" and "hipster-cards.js" and using any text editor to "Find and Replace All" the instances of class ".card" with ".hipster-card" and then everywhere in HTML where you need to use the "hipster cards" replace class="card" with "hipster-card". That should work smooth :-)
2 years ago

tomylj
  • downloaded
2 years ago

Using the card layout with an image with fixed dimensions above a block of text (eg the card with 'Try the new hairstyle from this Barber Shop'), I would like the image height - and its container - to change according to the image proportions - eg so the image is not cropped, and the image proportions are maintained (the width is fine). Changing these CSS rules in the javascript file (hipster-cards.js): "background-position": "center top", "background-size": "contain", "background-repeat": "no-repeat", .. prevents the image being cropped, but the containing div remains the same, fixed height. I tried adding another CSS rule: "height": this.height This sizes the images as I want, but the containing div is then much too tall. I think 'this.height' is returning the actual height of the images, not the size as they appear on the page. I hope this makes sense. I would be grateful for any suggestions.

axelut
  • owner

@tomylj sorry for the late response, but we are very busy with the release of 2 new products. In order to achieve your effect you need to remove the “full background” feature of the images on cards. So 1.) please go to hipster-cards.js and remove/comment line no. 5, which is activating the full background. 2.) go to hipster_cards.css to line 882 and replace all those 3 properties with “width: 100%”. 3.) on hipster_cards.css go to lines: 1337, 1340 and 1347 and replace with “height:auto” all those fixed numbers. Hope this helps you. If there are more questions don’t hesitate to send us an email with your website so we can check on a live example.
2 years ago

tomylj
  • downloaded

Thanks - that worked perfectly! I've asked twice for help since using your products - and the support has been excellent and exactly what I needed. Looking forward to seeing the new products.
2 years ago

Nate
  • downloaded
2 years ago

Hey guys I want to contribute by posting some works here.

axelut
  • owner

Hi, we are glad that you want to contribute, please send us an email at [email protected] with more details and we can talk more there. All the best, Alex!
2 years ago

wonwooddo
  • downloaded
2 years ago

I'm a CS major student of Sogang University in Korea. Thank you for letting me to use this good Template. I know almost nothing about web programming(javacript,css) but I want to fix something so have one question. I want to put several more cards in a row by minimizing margins between cards. (In downloaded archive, it has 3 cards in a row but I want 5~7) so I fixed bootstrap.min file to width: 100%(line:1845) to show full width but dont know where to fix to minimize the margins of cards. Sorry for bad Explanation.

axelut
  • owner

@wonwooddo thank you for using our cards. If you want to add more cards please follow the guidelines from bootstrap: http://getbootstrap.com/css/#grid-example-basic. You don't have to rewrite anything you just use the col-md-{number} system. If you want to use bigger cards please remove the "max-width" property for the ".card" class on hipster_cards.css line 828.
2 years ago

wonwooddo
  • downloaded

Thank you verymuch. I really appreciate. <div class="card-box col-md-2 col-sm-4"> your answer really helped me.
2 years ago

greggq9
  • downloaded
1 year ago

thank you for this! I'm implementing them into my mobile app - looks great on those devices, but the left and right margins are too large. I can't seem to locate the wrapper or container class in the CSS... and my left and right adjustments to the .card class do not change. Any tips?

jamesmcbennett
  • downloaded
1 year ago

Can i install this with wordpress? ( I only know a little html/css)

axelut
  • owner

@jamesmcbennett thank you for your interest in our product. This is not a wordpress plugin so we don't know exactly how they will work in wordpress. We don't have any expert in wordpress in our team... If you find a way to integrate them in wordpress please let us know, we would be glad to post that plugin for other users too. Best, Alex!
1 year ago

You have to be logged in to post a comment. Login here.

Why our customers appreciate us

Design Quality

Design Quality

Design Quality

beautiful