carrd.co add-ons & extensions

Developed & coded by Matthew

Rotating Text

Built with CSS & Javascript

A fun widget use to communicate a variety of hats that you or your products may wear.

Here, you are  valued.important.family.

var words = document.getElementsByClassName('rotatingWord'); var wordArray = []; var currentWord = 0; words[currentWord].style.opacity = 1; for (var i = 0; i < words.length; i++) { splitLetters(words[i]); } function changeWord() { var cw = wordArray[currentWord]; var nw = currentWord == words.length - 1 ? wordArray[0] : wordArray[currentWord + 1]; for (var i = 0; i < cw.length; i++) { animateLetterOut(cw, i); } for (var i = 0; i < nw.length; i++) { nw[i].className = 'letter behind'; nw[0].parentElement.style.opacity = 1; animateLetterIn(nw, i); } currentWord = (currentWord == wordArray.length - 1) ? 0 : currentWord + 1; } function animateLetterOut(cw, i) { setTimeout(function() { cw[i].className = 'letter out'; }, i * 0); } function animateLetterIn(nw, i) { setTimeout(function() { nw[i].className = 'letter in'; }, 340 + (i * 0)); } function splitLetters(word) { var content = word.innerHTML; word.innerHTML = ''; var letters = []; for (var i = 0; i < content.length; i++) { var letter = document.createElement('span'); letter.className = 'letter'; letter.innerHTML = content.charAt(i); word.appendChild(letter); letters.push(letter); } wordArray.push(letters); } changeWord(); setInterval(changeWord, 2500);

Flip Card

Built with CSS

Descriptive Paragraph

Please note, this add-on currently doesn't work with mobile views.

Front!

Back!

Typewritter

Built with CSS

Descriptive Paragraph

Hello! I'm a

var TxtType = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtType.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '' + this.txt + ''; var that = this; var delta = 200 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; var elements = document.getElementsByClassName('typewrite'); for (var i = 0; i < elements.length; i++) { var toRotate = elements[i].getAttribute('data-type'); if (toRotate) { new TxtType(elements[i], JSON.parse(toRotate)); } }

Accordion

Built with CSS & Javascript

Descriptive Paragraph

Modern science believes dryers open temporary portals to another dimension.

Probably not. Telling your past self could change tiny decisions that lead to huge, unintended consequences—like missing a job opportunity or inventing pineapple pizza. Sometimes the safest timeline is the one where you mind your own business and let things play out naturally.

It feels like the universe has a sense of humor. When you’re calm, the lights cooperate. The moment you’re late, every signal turns red in perfect sequence. Scientists call this “confirmation bias,” but deep down we all know it’s personal.

var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("activeTab"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); }

Logo Carousel

Built with CSS

Descriptive Paragraph

Timeline

Built with CSS

Descriptive Paragraph

We launched!

Here's the low-down on our launch in Product Hunt...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Our first customer

A significant milestone - our very first MRR dollar.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Stable version 1.0 release!

Our stable release is finally here.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Hit $100k MRR

Here's what we did to grow so fast!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Acquired by Acme

We're acquired for $100M!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Scrolling Text

Built with CSS

Descriptive Paragraph

This is a marquee of scrolling text that goes from right to left, like a news ticker tape. It'll keep scrolling and repeating itself forever and evermore...

Animated Gradient Borders

Built with CSS

Descriptive Paragraph

Animation Looping

Gradient border with transparent background and inside glowing effect.
Oh, and gradient animation, of course.

Animation on Hover

This is some content

Here is some more stuff to make this a paragraph like area

My Fancy Button!

Built with CSS

With a minimalistic design, it helps add a subtle piece of flair to a web page!

Click Here For Any Link You Want!

Contact Form

Thanks for visiting my page! I really appreciate it!Please use the provided form to get a hold of me about whatever is crossing your mind! All I ask is that you give me a day or two to get back to you.Thanks!
Matthew