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

Front!

Back!

Typewritter

Built with CSS

Descriptive Paragraph

Hello! I'm a 

Accordion

Built with CSS & Javascript

Descriptive Paragraph

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.

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.

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.

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.

Timeline

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

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

This is some content

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