- Scan ID:
- 087a4cf5-c030-4531-bf39-6d42fa0f9c86Finished
- Submitted URL:
- https://bubbl.us/
- Report Finished:
Links · 4 found
The outgoing links identified from the page
| Link | Text |
|---|---|
| https://www.facebook.com/Bubblus-155915794433710 | |
| https://www.linkedin.com/company/bubbl-us/about | |
| https://twitter.com/bubbl_us | |
| https://www.youtube.com/channel/UCNr9bae-fGnm3LONrqulnUQ |
JavaScript Variables · 42 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| GoogleAnalyticsObject | string |
| ga | function |
| gtag | function |
| dataLayer | object |
| componentMode | boolean |
| goto | function |
| updateTagline | function |
Console log messages · 0 found
Messages logged to the web console
HTML
The raw HTML body of the page
<!DOCTYPE html><html><head>
<title>Bubbl.us - Create Mind Maps | Collaborate and Present Ideas</title>
<!-- OpenGraph -->
<meta property="og:type" content="website">
<meta property="og:image" content="https://bubbl.us/images/fb_thumb_v3.png">
<meta property="og:title" content="Bubbl.us - Create Mind Maps | Collaborate and Present Ideas">
<meta property="og:url" content="https://bubbl.us">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en">
<meta name="application-name" content="Bubbl.us">
<meta name="application-url" content="https://bubbl.us">
<meta name="keywords" content="mind mapping, mindmaps, productivity tools, online mind mapping, free mind mapping software, project planning, concept map, visual learning, organize ideas, online collaboration, outline, visual brain, bubblus, bubbles, bubble us, business process modeling, mindomo, mindmeister, lucidcharts, visio, brainstorm online">
<meta name="description" content="Mind map and brainstorm online with Bubbl.us! Create colorful mind maps to print or share with others. Millions of people are using Bubbl.us worldwide to generate ideas, map out processes and create presentations.">
<meta name="copyright" content="Copyright 2005-2024 LKCollab LLC. All rights reserved.">
<meta name="author" content="LKCollab LLC">
<meta name="distribution" content="global">
<meta name="robots" content="index,follow,all">
<meta name="language" content="en">
<meta name="revisit-after" content="5 days">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="format-detection" content="telephone=no">
<!-- Site icon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/images/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/images/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/images/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/images/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/images/favicon-128.png" sizes="128x128">
<link rel="alternate" hreflang="en" href="https://bubbl.us/en">
<link rel="alternate" hreflang="es" href="https://bubbl.us/es">
<link rel="alternate" hreflang="ru" href="https://bubbl.us/ru">
<!-- Fonts -->
<style>
/* latin */
@font-face { font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face { font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face { font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
</style>
<!-- Google Analytics -->
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-76870738-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-9TJV31RFKZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-9TJV31RFKZ');
</script>
<script>
var componentMode = false;
// init page
window.addEventListener( 'DOMContentLoaded', function() {
// find all with ids
$ = {};
var ids = [ 'btnNewUser',
'laptop', 'ipad', 'iphone', 'svg', 'img_vs', 'languages',
'btnPrevImage', 'btnNextImage', 'btnHelp', 'btnTerms', 'btnPrivacy', 'btnSecurity', 'pageContainer',
'btnAbout', 'btnStart','btnStart2', 'btnEdit', 'tagline', 'hiddenTagline', 'imageSpinner', 'imageLoader', 'mindmap', 'mindmapImage', 'imageTitle',
];
for ( var a in ids ){
var i = ids[ a ];
$[ i ] = document.getElementById( i );
if ( $[ i ] == null ) console.log( i + " not found" );
}
$.patterns = document.body.querySelectorAll( 'div.pattern' );
redirect = window.location.protocol + '//' + window.location.hostname + '/';
// immediately redirect if have recovered maps
if ( parseInt( localStorage.getItem( 'numSignedOutMaps' ) ) > 0 ) {
goto('continue-editing');
return;
}
// tagline rotation
taglines = [
"mind map your big idea.",
"create a book outline.",
"build a family tree.",
"develop a plan of action.",
"take structured notes.",
"brainstorm with friends.",
"map a team hierarchy.",
"design a process.",
"lay out a website.",
"manage a project.",
"visualize a complex dataset."
];
taglineRotationInterval = 4;
$.tagline.classList.remove( 'animated' );
$.tagline.style.width = $.hiddenTagline.offsetWidth + 'px';
// carousel
var dense = ( window.devicePixelRatio >= 1.5 );
imageURLs = [
{ image: 'example1' + ( dense ? '@2x.jpg' : '.jpg' ), editXML: 'example1', title: "Organization structure" },
{ image: 'example2' + ( dense ? '@2x.jpg' : '.jpg' ), editXML: 'example2', title: "Web site map" },
{ image: 'example3' + ( dense ? '@2x.jpg' : '.jpg' ), editXML: 'example3', title: "Story outline" },
{ image: 'example4' + ( dense ? '@2x.jpg' : '.jpg' ), editXML: 'example4', title: "Research notes" },
{ image: 'example5' + ( dense ? '@2x.jpg' : '.jpg' ), editXML: 'example5', title: "Project layout" },
{ image: 'example6' + ( dense ? '@2x.jpg' : '.jpg' ), editXML: 'example6', title: "Timeline" },
];
imageNumber = -1;
screenLoaded = youtubeEmbedded = removeTrans = 0;
// listeners
window.addEventListener( 'resize', windowResized, { passive: true } );
window.addEventListener( 'scroll', pageScrolled, { passive: true } );
$.imageLoader.addEventListener( 'load', imageLoaded );
// logos init
resizeLogo( 'bottom' );
resizeLogo( 'top' );
// delayed init
setTimeout( function() {
$.tagline.classList.add( 'animated' );
// background image slow load
for (var i = 0; i < $.patterns.length; i++) $.patterns[i].style.backgroundImage = 'url(/v3/docs/images/home/background.png)';
// start tagline animation
setTimeout( updateTagline, taglineRotationInterval * 1000 );
// animate
setTimeout( function() { document.body.classList.add( 'loaded' ); }, 1000 );
// load image if in view
pageScrolled();
windowResized();
// add prefetches
var prefetch = document.createElement('link');
prefetch.setAttribute('rel', 'prefetch');
prefetch.setAttribute('href', '/v3/include/polymer.min.html');
prefetch = document.createElement('link');
prefetch.setAttribute('rel', 'prefetch');
prefetch.setAttribute('href', '/v3/include/bubble.min.html');
document.body.appendChild(prefetch);
prefetch = document.createElement('link');
prefetch.setAttribute('rel', 'prefetch');
prefetch.setAttribute('href', '/v3/include/bubble.full.min.html');
document.body.appendChild(prefetch);
}, 100 );
});
window.addEventListener( 'message', function(e) {
//if ( document.body && document.body.classList )
});
function goto( url ) {
$.imageSpinner.parentNode.removeChild($.imageSpinner);
$.pageContainer.style.display = 'none';
$.imageSpinner.style.display = '';
document.body.style.width = document.body.style.height = '100%';
document.body.appendChild($.imageSpinner);
window.location = redirect + url;
}
function updateTagline () {
var currentText = $.hiddenTagline.textContent;
var index = taglines.indexOf( currentText );
var newText = taglines[ ( index + 1 ) % taglines.length ];
var oldWidth = $.hiddenTagline.offsetWidth;
// measure and set width
$.tagline.style.width = oldWidth + 'px';
// first fade current one
$.tagline.classList.add( 'fade' );
$.hiddenTagline.textContent = newText;
// switch to new one after delay
function showIt() {
// new text
$.tagline.textContent = newText;
$.tagline.classList.remove( 'fade' );
setTimeout( function () {
$.tagline.style.width = $.hiddenTagline.offsetWidth + 'px';
}, 50 );
// keep rotating
setTimeout( updateTagline, taglineRotationInterval * 1000 );
};
// wait for transition
setTimeout( showIt, 500 );
}
function pageScrolled ( event ) {
var offset = window.scrollY;
// offset background pattern
var patOff = ( 0.5 * offset ) + 'px';
for (var i = 0; i < $.patterns.length; i++)
$.patterns[i].style.webkitBackgroundPositionY = $.patterns[i].style.backgroundPositionY = patOff;
// init carousel
bounds = $.mindmap.getBoundingClientRect();
if ( !screenLoaded && bounds.top < window.innerHeight ) {
screenLoaded = true;
setImageNumber( 0 );
}
}
function setImageNumber( i ) {
imageNumber = i;
var url = redirect + 'v3/docs/images/home/' + imageURLs[ i ].image;
$.imageTitle.textContent = imageURLs[ i ].title;
$.imageLoader.src = url;
}
function prevClicked () {
$.imageSpinner.style.display = '';
setImageNumber( ( imageNumber > 0 ? imageNumber : imageURLs.length ) - 1 );
}
function nextClicked () {
$.imageSpinner.style.display = '';
setImageNumber( ( imageNumber + 1 ) % imageURLs.length );
}
function imageLoaded () {
// determine the new image ratio
var ratio = $.imageLoader.naturalWidth / $.imageLoader.naturalHeight;
// set new image
$.mindmapImage.src = $.imageLoader.src;
// transition height
if ( removeTrans != 0 ) stopTimeout( removeTrans );
$.mindmap.classList.add( 'trans' );
$.mindmap.style.height = Math.floor( $.mindmap.offsetWidth / ratio ) + 'px';
removeTrans = setTimeout( function () { $.mindmap.classList.remove( 'trans' ); removeTrans = 0; }, 260 );
// turn off spinner
$.imageSpinner.style.display = 'none';
}
function editClicked () {
// example mind map url
goto( 'example/' + this.imageURLs[ this.imageNumber ].editXML );
}
function languageClicked() {
$.languages.style.display = '';
setInterval( function(){ document.body.addEventListener('click', hideLanguages, true ); }, 100 );
}
function hideLanguages(){
$.languages.style.display = 'none';
document.body.removeEventListener('click', hideLanguages, true );
}
function aboutClicked(){ goto( 'about' ); }
function contactClicked(){ goto( 'contact' ); }
function signinClicked (){ goto( 'sign-in' ); }
function registerClicked (){ goto( 'register' ); }
function pricingClicked(){ goto( 'pricing' ); }
function startClicked (){
goto( 'start' );
}
function resizeLogo ( id ) {
var cont = document.getElementById( id );
var svg = cont.querySelector( 'svg' );
// remember logo dimensions
if ( typeof( cont.baseWidth ) === 'undefined' ) {
cont.baseWidth = svg.viewBox.baseVal.width;
cont.baseHeight = svg.viewBox.baseVal.height | 1;
}
// calculate dimension
var maxHeight = 120;
var availWidth = cont.offsetWidth;
var ratio = cont.baseHeight / cont.baseWidth;
var logoHeight = Math.min( maxHeight, availWidth * ratio );
var logoWidth = logoHeight / ratio;
if ( !logoHeight ) return;
// resize
cont.style.height = logoHeight + 'px';
svg.style.width = logoWidth + 'px';
svg.style.height = logoHeight + 'px';
svg.style.left = Math.floor( ( availWidth - logoWidth ) * 0.5 ) + 'px';
svg.style.top = Math.floor( ( cont.offsetHeight - logoHeight ) * 0.5 ) + 'px';
}
function windowResized () {
if ( typeof($) === 'undefined' ) return;
resizeLogo( 'top' );
// determine the new image ratio
var ratio = $.imageLoader.naturalWidth / $.imageLoader.naturalHeight;
// transition image height
$.mindmap.style.height = Math.floor( $.mindmap.offsetWidth / ratio ) + 'px';
// vs image
var src = $.img_vs.src;
var src_nrw = '/v3/docs/images/home/vs.svg', src_wd = '/v3/docs/images/home/vs_w.svg';
if ( window.innerWidth < 860 && src != src_wd ) {
$.img_vs.src = src_wd;
} else if ( window.innerWidth >= 860 && src != src_nrw ) {
$.img_vs.src = src_nrw;
}
}
// Clicked sign in with Facebook or google
function signInWith ( m ) {
var form = document.createElement( 'form' );
form.setAttribute( 'action', '/v3/sys/opauth/sso/' + m );
form.setAttribute( 'method', 'post' );
form.setAttribute( 'enctype' , 'application/x-www-form-urlencoded' );
var input = document.createElement( 'input' );
input.setAttribute( 'name', 'post_url' );
input.setAttribute( 'type', 'hidden' );
input.setAttribute( 'value', "/mindmaps" );
form.appendChild( input );
document.body.appendChild( form );
form.submit();
}
</script>
<style>
/* Page */
html {
font-size: 17px;
}
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, freesans;
font-weight: 300;
color: #4b505a;
background: #fafafa;
background: -moz-linear-gradient(left, #edf1f7 -20%, #fafafa 20%, #fafafa 80%, #edf1f7 120%);
background: -webkit-linear-gradient(left, #edf1f7 -20%, #fafafa 20%, #fafafa 80%, #edf1f7 120%);
background: linear-gradient(to right, #edf1f7 -20%, #fafafa 20%, #fafafa 80%, #edf1f7 120%);
-webkit-tap-highlight-color: rgba(13, 149, 252, 0.25);
font-feature-settings: 'liga' 0, 'onum' 1, 'kern' 1;
-webkit-font-feature-settings: 'liga' 0, 'onum' 1, 'kern' 1;
-moz-font-feature-settings: 'liga' 0, 'onum' 1, 'kern' 1;
-o-font-feature-settings: 'liga' 0, 'onum' 1, 'kern' 1;
margin: 0;
padding: 0;
}
.body {
padding: 4.12rem 0;
}
.page-container {
z-index: 0;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
font-size: 110%;
overflow: hidden;
}
.section {
max-width: 54.12rem;
min-width: 11.76rem;
padding: 1.41rem 0.94rem 1.41rem 0.94rem;
margin: 0 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.hero .trust {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
height:5.65rem;
}
.section.featured {
padding: 0 0rem;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.section.featured.liners {
border-left: 2px solid rgba(255,255,255,0.25);
border-right: 2px solid rgba(255,255,255,0.25);
padding: 0 16px;
margin-right:16px;
margin-left:16px;
}
.section.featured .logos {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
}
.section.featured .logo {
width: 4.71rem;
margin:0 0.47rem;
height: auto;
position: relative;
}
.section.featured .review {
width: 20vw;
margin:0 0.47rem 0 0;
height: auto;
max-width: 5.88rem;
position: relative;
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
.section.featured .users {
position: relative;
color: #ffffff;
font-size: 70%;
font-weight: 400;
text-align: center;
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
}
.section.featured .logos .review img {
width: 100%;
}
.section.featured h5 {
margin: 0 0 0.47rem 0;
white-space: nowrap;
color: #fafafa;
}
.section.featured .logos .logo.narrow {
width: 1.76rem;
}
.section.featured .logos .logo.wide {
width: 7.06rem;
}
.section.featured .logos .pair {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
}
.section.featured .logos .logo img {
width: 100%;
}
.alt-grey {
background-color: #edf1f7;
}
.alt-blue {
background-color: #2d83bd;
color: #fafafa;
}
.call-to-action {
background-color: white;
}
.section p {
margin: 0;
max-width: 41.18rem;
padding: 0 0.94rem;
text-align: justify;
}
.section p.question {
font-weight: 600;
padding-bottom: 0;
}
.section p.question + p {
margin-top: 0.47rem;
margin-bottom: 1.41rem;
padding-top: 0;
}
.section p.text-center {
text-align: center;
}
.section p ~ p {
margin-top: 0.94rem;
}
.text-center {
text-align: center;
}
.layout.horizontal {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.layout.vertical {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.layout.center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/* Logo */
.svg-logo {
display: block;
position: relative;
min-width: 1.41rem;
min-height: 1.41rem;
color: white;
overflow: visible;
}
.svg-logo[data-size="full"] {
width: 100%;
}
.svg-logo[data-size="tab"] {
width: 7.06rem;
min-height: 2.82rem;
}
.svg-logo[data-size="stamp"] {
width: 5.88rem;
}
.svg-logo svg {
position: absolute;
top: 0;
fill: currentColor;
}
/* icons */
div.iron-icon {
width: 1.41rem;
height: 1.41rem;
display: inline-block;
fill: currentColor;
stroke: none;
}
/* drop button */
.drop-button {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
margin: 0 0.29em;
background: #fafafa;
color: #2d83bd;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
font: inherit;
text-transform: none;
outline-width: 0;
border-radius: 0.18rem;
border: 1px solid #edf1f7;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, freesans;
font-size: 100%;
-webkit-font-smoothing: antialiased;
font-weight: 600;
outline: 0 !important;
text-decoration: none;
margin-left: 24px;
}
.drop-button:hover {
background: #ffffff;
color: #3d98d6;
}
.drop-down {
position: absolute;
bottom: 2.82rem;
right: 0;
background: #fafafa;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
-webkit-box-shadow: 0 0.12rem 0.12rem 0 rgba(0, 0, 0, 0.14), 0 0.06rem 0.29rem 0 rgba(0, 0, 0, 0.12), 0 0.18rem 0.06rem -0.12rem rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0.12rem 0.12rem 0 rgba(0, 0, 0, 0.14), 0 0.06rem 0.29rem 0 rgba(0, 0, 0, 0.12), 0 0.18rem 0.06rem -0.12rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0.12rem 0.12rem 0 rgba(0, 0, 0, 0.14), 0 0.06rem 0.29rem 0 rgba(0, 0, 0, 0.12), 0 0.18rem 0.06rem -0.12rem rgba(0, 0, 0, 0.2);
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.drop-down a {
display: block;
padding: 0.47rem 0.94rem;
text-decoration: none;
font-weight: 700;
color: #4b505a;
}
.drop-down a:hover {
background: #3d98d6;
color: #ffffff;
}
/* Button */
.paper-button {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
min-width: 5.14em;
margin: 0 0.29em;
background: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
font: inherit;
text-transform: uppercase;
outline-width: 0;
border-radius: 0.18rem;
border: 0 none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
padding: 0.7em 0.57em;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, freesans;
-webkit-font-smoothing: antialiased;
font-weight: 700;
height: 2.71rem;
outline: 0 !important;
text-decoration: none;
}
.paper-button.raised:not(:active) {
-webkit-box-shadow: 0 0.12rem 0.12rem 0 rgba(0, 0, 0, 0.14), 0 0.06rem 0.29rem 0 rgba(0, 0, 0, 0.12), 0 0.18rem 0.06rem -0.12rem rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0.12rem 0.12rem 0 rgba(0, 0, 0, 0.14), 0 0.06rem 0.29rem 0 rgba(0, 0, 0, 0.12), 0 0.18rem 0.06rem -0.12rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0.12rem 0.12rem 0 rgba(0, 0, 0, 0.14), 0 0.06rem 0.29rem 0 rgba(0, 0, 0, 0.12), 0 0.18rem 0.06rem -0.12rem rgba(0, 0, 0, 0.2);
}
.paper-button.primary-button {
color: #fafafa;
background: #2d83bd;
background: -moz-linear-gradient(top, #2d83bd 0%, #1e6ea3 150%);
background: -webkit-linear-gradient(top, #2d83bd 0%, #1e6ea3 150%);
background: linear-gradient(to bottom, #2d83bd 0%, #1e6ea3 150%);
}
.paper-button.secondary-button {
color: #fafafa;
background: #2d841a;
background: -moz-linear-gradient(top, #49ab33 0%, #2d841a 150%);
background: -webkit-linear-gradient(top, #49ab33 0%, #2d841a 150%);
background: linear-gradient(to bottom, #49ab33 0%, #2d841a 150%);
}
.paper-button .highlight {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background: white;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}
.paper-button:active .highlight {
opacity: 0.1;
}
/* Shadow decorations */
.shadow-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.35rem;
-webkit-box-shadow: inset 0 -0.18rem 0.18rem #4b505a;
-moz-box-shadow: inset 0 -0.18rem 0.18rem #4b505a;
box-shadow: inset 0 -0.18rem 0.18rem #4b505a;
border-bottom: 0.06rem solid #4b505a;
opacity: 0.25;
}
.shadow-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.47rem;
-webkit-box-shadow: inset 0 0.24rem 0.24rem #4b505a;
-moz-box-shadow: inset 0 0.24rem 0.24rem #4b505a;
box-shadow: inset 0 0.24rem 0.24rem #4b505a;
/* border-top: 0.06rem solid #a6a8af; */
opacity: 0.25;
}
/* Navbar */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2.82rem;
background: #2d83bd;
z-index:4;
box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.15);
}
.navbar .section {
padding-top: 0;
padding-bottom: 0;
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.navbar .float-right {
position: absolute;
right: 0;
}
body.hide-navbar .navbar {
display: none;
}
/* Hero area */
.hero {
margin-top: 0;
background: #4b505a;
background: -moz-linear-gradient(top, #2d83bd 0%, #1e6ea3 100%);
background: -webkit-linear-gradient(top, #2d83bd 0%, #1e6ea3 100%);
background: linear-gradient(to bottom, #2d83bd 0%, #1e6ea3 100%);
height: 90vh;
padding-top: 3.76rem;
margin-bottom: 0;
position: relative;
min-height: 35.88rem;
max-height: 48.24rem;
}
body.hide-navbar .hero { margin-top: 0; }
.hero .section {
height: 100%;
box-sizing: border-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.pattern {
background-position: 0 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
opacity: 0.05;
}
.hero > .section > * {
position: relative;
-webkit-transition: top 0.5s ease-in-out, opacity 0.5s, -webkit-transform 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out, opacity 0.5s, -moz-transform 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out, opacity 0.5s, -ms-transform 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out, opacity 0.5s, -o-transform 0.5s ease-in-out;
transition: top 0.5s ease-in-out, opacity 0.5s, transform 0.5s ease-in-out;
}
body.loaded .hero > .section > * {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.hero .svg-logo {
-webkit-transform: translateY( 1.41rem) scale(1.2,1.2);
-moz-transform: translateY( 1.41rem) scale(1.2,1.2);
-ms-transform: translateY( 1.41rem) scale(1.2,1.2);
-o-transform: translateY( 1.41rem) scale(1.2,1.2);
transform: translateY( 1.41rem) scale(1.2,1.2);
width: 23.53rem;
color: #ffffff;
-webkit-filter: drop-shadow(0 0.18rem 0.35rem #1e6ea3);
filter: drop-shadow(0 0.18rem 0.35rem #1e6ea3);
text-shadow: 0 0.18rem 0.35rem #1e6ea3;
}
h2 {
font-size: 2.24rem;
font-weight: 700;
margin: 0 0 1.41rem 0;
color: #4b505a;
text-align: center;
}
h2 em, h4 em {
color: #2d83bd;
font-style: normal;
}
.section p em,
div > em {
font-weight: 600;
color: #080818;
}
span.key {
padding: 0.24rem;
background-color: #edf1f7;
border-radius: 0.29rem;
border-top: 0.06rem solid white;
border-bottom: 0.06rem solid #c4ced8;
font-size: 60%;
font-weight: bold;
position: relative; top: -0.12rem;
}
video { margin: 0 0.94rem; }
.hero h2 {
font-size: 1.41rem;
font-weight: 200;
-webkit-transform: translateY(-1.41rem);
-moz-transform: translateY(-1.41rem);
-ms-transform: translateY(-1.41rem);
-o-transform: translateY(-1.41rem);
transform: translateY(-1.41rem);
opacity: 0;
color: #fafafa;
text-shadow: 0 0.18rem 0.35rem #1e6ea3;
margin: 1.18rem 0 1.41rem 0;
text-align: center;
white-space: nowrap;
}
#screenshot {
position: relative;
width: 82%;
z-index: 2;
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#screenshot #svg {
width: 100%;
position: relative;
overflow: hidden;
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
}
#screenshot #svg #laptop {
position: absolute;
bottom: 0;
max-height: 100%;
left: 3%; right: 0;
margin: 0 auto;
}
#screenshot #svg #ipad {
position: absolute;
height: 70%;
left: 0%;
top: 24%;
}
#screenshot #svg #iphone {
position: absolute;
height: 60%;
right: 7%;
top: 34%;
}
#hiddenTagline {
position: absolute;
color: #333;
opacity: 0.01;
top: -352.94rem;
left: -58.82rem;
}
.tagline {
color: #ffffff;
}
.tagline .iron-icon {
width: 1.88rem; height: 1.88rem;
position: relative;
top: 0.18rem;
}
#tagline {
display: inline-block;
opacity: 1;
-webkit-transform: scaleY(1.0);
-moz-transform: scaleY(1.0);
-ms-transform: scaleY(1.0);
-o-transform: scaleY(1.0);
transform: scaleY(1.0);
}
.hero h3 {
font-size: 1.76rem;
font-weight: 400;
text-align: center;
margin: 0;
width: 100%;
position: relative;
}
.hero h3 > * { white-space: nowrap; }
#tagline.animated {
-webkit-transition: -webkit-transform 0.35s ease-in-out, opacity 0.5s, width 0.25s ease-in-out;
-moz-transition: -moz-transform 0.35s ease-in-out, opacity 0.5s, width 0.25s ease-in-out;
-ms-transition: -ms-transform 0.35s ease-in-out, opacity 0.5s, width 0.25s ease-in-out;
-o-transition: -o-transform 0.35s ease-in-out, opacity 0.5s, width 0.25s ease-in-out;
transition: transform 0.35s ease-in-out, opacity 0.5s, width 0.25s ease-in-out;
}
#tagline.fade {
opacity: 0;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
}
/* MAIN ACTION */
.main-action {
margin: 1.88rem 1.41rem 1.18rem 1.41rem;
overflow: hidden;
padding: 0.94rem;
font-size: 0.82rem;
width: 40rem;
background: #edf1f7;
border-radius: 0.24rem;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.main-action.alt {
background: inherit;
}
.main-action .register-options {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
position: relative;
}
.main-action .register-options #btnSignIn {
display: none;
position: absolute;
right: -44%;
top: 0;
height: 94%;
width: 30%;
}
.main-action .or {
overflow: visible;
width: 1px;
margin: 0 24px;
border-left: 0.06rem dotted #c4ced8;
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
position: relative;
}
.main-action .or span {
padding: 4px;
background-color: #edf1f7;
position: relative;
top: 40%;
left: -15px;
font-weight: 600;
z-index: 10;
}
.main-action.alt .or span {
background-color: #ffffff;
}
.main-action .paper-button.plain {
text-transform: none;
font-size: 0.94rem;
font-weight: 400;
padding: 0.24rem 0.47rem;
height: 1.88rem;
color: #4b505a;
}
.main-action.alt .paper-button {
background-color: #edf1f7;
}
.main-action .paper-button.plain img { border-radius: 0.12rem; margin-right: 0.47rem;}
.main-action .paper-button.plain:hover {
color: #2d83bd;
}
.main-action .start-now {
font-size: 0.82rem;
font-weight: 400;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.main-action .start-now .text { line-height: 100%; }
.main-action .paper-button {
height: 3.53rem;
padding: 0.47rem 2.06rem;
font-size: 1.29rem;
margin-bottom: 0.24rem;
}
.main-action .paper-button.huge {
height: 3.76rem;
font-size: 1.53rem;
padding-left: 1.41rem;
padding-right: 1.41rem;
}
@media (max-width: 52.94rem) {
.main-action {
width: unset;
}
.main-action .register-options {
border: 0 none;
padding: 0;
}
.hero {
min-height: unset;
max-height: unset;
height: unset;
}
.hero #screenshot #svg {
min-height: 21.18rem;
}
.hero .trust {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
height: unset;
width: 100%;
max-width: 35.29rem;
}
.hero .trust .section {
color: red;
margin: 0.71rem 0 0 0;
padding: 0;
width: 100%;
border: 0px none;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.section.featured h5 {
margin-right: 0.94rem;
}
}
@media (max-width: 36.47rem) {
.main-action {
margin: 0.47rem auto;
max-width: 23.53rem;
width: 90%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.main-action .start-now {
margin-top: 0.47rem;
margin-left: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.main-action .paper-button {
padding: 0.47rem 2.59rem;
}
.main-action .start-now .text { line-height: 100%; margin: 0 0.47rem; }
.main-action .or {
border: 0px none;
width: unset;
text-align: center;
margin: 8px 0 0 0;
}
.main-action .or span { left:0; top: 0; }
.main-action .register-options {
width: 70%;
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
.main-action .register-options #btnSignIn {
display: block;
}
.main-action .register-options div.horizontal.layout .paper-button {
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
}
.main-action #btnStart, .main-action #btnStart2 {
min-width: 8.53rem;
}
.main-action #btnSignIn {
padding: 0.24rem 0.47rem;
height: 2.35rem;
width: 100%;
margin-bottom: 0.47rem;
}
.main-action .paper-button.huge {
height: 3.41rem;
padding: 0.47rem 0.94rem;
font-size: 1.06rem;
}
.main-action .text { text-align: left; }
}
/* Images */
div.imageholder {
margin-top: 1.41rem;
width: 100%;
height: auto;
}
div.feature .side-illustration.vs { width: 11.76rem; }
div.feature .side-illustration.vs .imageholder {
width: 10rem;
margin-left: 1.88rem;
}
@media (max-width: 50.59rem) {
div.feature .side-illustration.vs { width: auto; text-align: center; }
div.feature .side-illustration.vs .imageholder { margin-left: 0; display: inline-block; width: 100%; max-width: 23.53rem; }
}
/* Features section */
div.feature {
max-width: 41.18rem;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
div.feature.alt {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
div.feature .side-text {
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
padding-right: 1.41rem;
}
div.feature.alt .side-text { padding-left: 1.41rem; padding-right: 0; }
div.feature .side-text p { padding: 0; }
div.feature .side-illustration {
width: 17.65rem;
overflow: visible;
}
div.feature.alt .side-illustration {
position: relative;
left: -4.12rem;
}
div.feature .side-illustration .imageholder {
margin-top: 0;
width: 20.59rem;
height: auto;
}
@media (max-width: 50.59rem) {
div.feature, div.feature.alt {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
div.feature .side-text p { padding: 0.94rem 0; }
div.feature h4 { text-align: center; }
div.feature .side-text,
div.feature .side-illustration,
div.feature.alt .side-illustration {
-ms-flex: none;
-webkit-flex: none;
flex: none;
left: 0;
width: auto;
padding: 0 0 0.94rem 0;
}
}
/* Why section */
#whySection {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
#whySection .row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
#whySection .row li {
list-style: none;
padding: 0.94rem;
background: #1e6ea3;
margin: 0.47rem;
border-radius: 0.24rem;
text-align: center;
font-weight: 600;
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
#whySection .row li .text {
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
}
#whySection .row li .iron-icon {
width: 2.82rem;
height: 2.82rem;
min-width: 2.82rem;
margin-bottom: 0.47rem;
}
#whySection .row li .more {
font-weight: 300;
font-size: 75%;
margin-top: 0.94rem;
margin-left: 0;
padding: 0.94rem 0 0 0;
border-top: 0.06rem dotted #3d98d6;
}
#whySection .row li .more a {
font-weight: 600;
color: #edf1f7;
}
@media (max-width: 44.71rem) {
#whySection .row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
#whySection .row li {
margin: 0.24rem;
border-radius: 0.24rem;
text-align: left;
padding-left: 1.41rem;
-ms-flex: none;
-webkit-flex: none;
flex: none;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
#whySection .row li .text {
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
margin-left: 1.41rem;
}
#whySection .row li .head {
}
#whySection .row li .more {
padding: 0.47rem 0 0 0;
margin: 0.47rem 0 0 0;
}
}
/* About mind mapping */
#aboutMindMapping .feature {
margin-top: 1.41rem;
}
#aboutMindMapping li {
list-style: square outside;
color: #1e6ea3;
margin-bottom: 0.94rem;
}
#aboutMindMapping li .head {
color: #4b505a;
}
#aboutMindMapping li .more {
font-size: 80%;
margin-top: 0.47rem;
color: #080818;
}
/* mmm top uses */
#topUses .row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
#topUses .row > li {
list-style: none;
padding: 0.94rem;
margin: 0;
border-radius: 0.24rem;
text-align: center;
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#topUses .row li .more li {
list-style: square outside;
}
#topUses .row li .text {
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
color: #2d83bd;
}
#topUses .row li .head {
font-weight: 600;
font-size: 1.41rem;
}
#topUses .row li .more {
text-align: left;
font-weight: 300;
margin: 0.94rem 0 0 0;
padding: 0.94rem 0.47rem 0 1.41rem;
border-top: 0.06rem dotted #1e6ea3;
color: #4b505a;
font-weight: 300;
}
@media (max-width: 44.71rem) {
#topUses .row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
#topUses .row > li {
margin: 0.24rem;
border-radius: 0.24rem;
text-align: left;
padding-left: 1.41rem;
-ms-flex: none;
-webkit-flex: none;
flex: none;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
#topUses .row li .text {
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
margin: 0 1.41rem;
width: 100%;
}
#topUses .row li .more {
padding: 0.47rem 0 0 0;
margin: 0.47rem 0 0 0;
}
}
/* Body */
.page-container h4 {
font-size: 1.88rem;
font-weight: 700;
margin: 0 0 1.41rem 0;
color: #080818;
}
.page-container .body.alt-blue h4 {
color: #fafafa }
/* Illustration */
.illustration {
margin: 0.24rem;
min-height: 7.06rem;
}
.illustration img {
width: 100%;
height: auto;
border-radius: 8px;
}
img {
overflow: hidden;
border-radius: 0.24rem;
}
.illustration svg {
}
.illustration.wide {
width: 100%;
}
.illustration.placeholder {
width: 14.12rem;
background-color: rgba(0,0,0,0.15);
border: 0.06rem dotted #1c325a;
}
.page-container h5 {
font-size: 110%;
font-weight: 700;
margin: 0 0 0.94rem 0;
color: #4b505a;
}
.row div ~ div {
margin-left: 0.47rem;
}
/* Product */
#imageTitle {
color: #3d98d6;
font-weight: 600;
font-size: 100%;
margin: 1.88rem 0 0 0;
}
#mindmap {
position: relative;
overflow: visible;
background-color: transparent;
margin: 1.41rem 0 0 0;
max-width: 700px;
}
#mindmap.trans {
-webkit-transition: height 0.25s ease-out;
-moz-transition: height 0.25s ease-out;
-ms-transition: height 0.25s ease-out;
-o-transition: height 0.25s ease-out;
transition: height 0.25s ease-out;
}
#btnPrevImage,
#btnNextImage {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width: 9.06rem;
text-transform: none;
color: #4b505a;
background: #fafafa;
}
#btnPrevImage div.iron-icon,
#btnNextImage div.iron-icon{
margin: 0 0.47rem;
}
#imageSpinner {
position: absolute;
left: 50%;
top: 50%;
width: 1.41rem;
height: 1.41rem;
margin-left: -0.71rem;
margin-top: -0.71rem;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
color: #2d83bd;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-moz-animation-name: spin;
-webkit-animation-name: spin;
animation-name: spin;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
body > #imageSpinner { width: 2.47rem; height: 2.47rem; margin: 0 -1.41rem; }
#mindmap:hover .paper-button {
opacity: 1;
}
#mindmap #imageLoader {
width: 0.06rem;
height: 0.06rem;
position: absolute;
left: -0.06rem;
top: -0.06rem;
}
#mindmap #mindmapImage {
cursor: pointer;
border: 1px solid transparent;
}
#mindmap #mindmapImage:hover {
border: 1px solid #2d83bd;
}
#mindmap ~ .row {
margin-top: 0.47rem;
}
.note {
min-height: 2.82rem;
text-align: center;
margin: 0 0;
}
.note strong {
white-space: nowrap;
}
/* Tweetler */
.twitter {
width: 100%;
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
margin-bottom: 0.94rem;
}
p.small {
font-size: 70%;
}
.tweet {
padding: 1em 1em 1em 3.76rem;
border-radius: 0.12rem;
font-size: 80%;
background: #edf1f7;
position: relative;
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
}
.tweet + .tweet {
margin-left: 0.94rem;
}
.tweet .image-wrap {
overflow: hidden;
width: 1.88rem; height: 1.88rem;
padding: 0;
border-radius: 50%;
border: 0.12rem solid #ffffff;
position: absolute;
left: 1em;
top: 1em;
}
.body.alt-grey .tweet {
background: #fafafa;
}
.tweet .quote {
font-weight: 400;
margin: 0.94rem 0;
}
.tweet .cred {
text-align: right;
padding-right: 0.94rem;
font-size: 80%;
}
/* CTA */
#btnSignUp {
background: #49ab33;
color: #ffffff;
}
/* Footer */
.body.footer {
padding-top: 1.41rem;
position: relative;
overflow: visible;
}
.footer {
color: #fafafa;
background-color: #2d83bd;
padding-bottom: 0;
}
.footer .paper-button {
text-transform: none;
height: 2.82rem;
font-weight: normal;
color: #ffffff;
white-space: nowrap;
min-width: initial;
}
.footer .social {
height: 1.88rem;
}
.footer .social > * {
height: 1.88rem;
min-width: 2.94rem;
}
.footer .copyright {
width: 100%;
line-height: 2.82rem;
}
.footer .copyright .svg-logo {
color: #fafafa;
margin-right: 0.94rem;
}
.footer .summary {
background: #185a86;
padding: 0.94rem;
border-top: 0.06rem solid #3899cd;
font-size: 70%;
color: #cddae5;
position: relative;
}
.footer .summary .shadow-top {
-webkit-box-shadow: inset 0 0.12rem 0.47rem #080818;
-moz-box-shadow: inset 0 0.12rem 0.47rem #080818;
box-shadow: inset 0 0.12rem 0.47rem #080818;
height: 100%;
opacity: 0.3;
}
/* Buttons */
.paper-button.big {
height: 3.24rem;
font-size: 1.29rem;
}
.paper-button.huge {
height: 3.76rem;
font-size: 1.53rem;
padding-left: 1.41rem;
padding-right: 1.41rem;
}
.page-container .paper-button div {
white-space: nowrap;
}
.page-container .paper-button div.iron-icon {
min-width: 1.41rem;
min-height: 1.41rem;
}
.paper-button div ~ div.iron-icon,
.paper-button div.iron-icon ~ div {
margin-left: 0.47rem;
}
/* Row has horizontal layout, but becomes vertical on narrow screen */
.row {
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.row.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.row.center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.row .flex-when-horizontal {
-ms-flex: 1 1 0.000000001;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001;
flex-basis: 0.000000001;
}
.narrow-only { display: none; }
.row.early.broken {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
body.desktop .row.early.reverse-on-break.broken {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Media Queries */
/* Laptop */
@media (max-height: 52.94rem) {
.hero {
/*padding-top: 0;*/
}
.hero .svg-logo {
width: 50%;
}
.hero h2 {
font-size: 1.88rem;
margin: 0.47rem 0 0.94rem 0;
}
.hero .bottom {
padding: 0.94rem 0;
}
}
/* Inner page width */
@media (max-width: 37.65rem) {
h2 {
font-size: 1.76rem;
margin: 0 0 0.94rem 0;
}
#btnPrevImage,
#btnNextImage {
width: auto;
min-width: initial;
}
#btnPrevImage span,
#btnNextImage span {
display: none;
}
}
/* Narrow browser */
@media (max-width: 49.41rem) {
#mindmap {
margin: 1.41rem 1.41rem 0 1.41rem;
}
#mindmap .paper-button {
top: 25vw;
}
.section {
max-width: 100vw;
}
.section p {
/* width: auto; */
text-align: left;
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
p {
width: auto;
min-width: 60vw;
max-width: 90vw;
}
.row.early {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
body.desktop .row.early.reverse-on-break {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.row.early p ~ .illustration {
margin: 0.94rem 0 0 0;
}
.body .row .tweet {
width: 100%;
}
.row.early div ~ div.illustration {
margin-top: 0.94rem;
}
.footer .paper-button {
font-size: 85%;
}
#screenshot {
width: 100%;
}
}
@media (max-width: 40rem) {
.footer .paper-button {
font-size: 65%;
}
.twitter {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
margin-bottom: 0.12rem;
}
.tweet {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
.tweet + .tweet {
margin-left: 0;
margin-top: 0.12rem;
}
}
/* Phone browser */
@media (max-width: 33.41rem) {
.page-container {
font-size: 100%;
}
#pattern { background-size: 50vw; }
.narrow-only { display: inline-block; }
.wide-only { display: none !important; }
.section p.center-when-narrow {
text-align: center;
}
.navbar { visibility: hidden; }
.hero {
margin-top: 0;
padding-top: 0.94rem;
padding-bottom: 0;
}
#screenshot {
margin-bottom: 0.47rem;
-webkit-transform: translate3d(0rem,0rem,0rem);
-moz-transform: translate3d(0rem,0rem,0rem);
-ms-transform: translate3d(0rem,0rem,0rem);
-o-transform: translate3d(0rem,0rem,0rem);
transform: translate3d(0rem,0rem,0rem);
}
.hero .trust .section.featured:first-child {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
#screenshot #svg {
min-height: 14.71rem;
margin-bottom: 0.59rem;
}
#screenshot #svg #laptop {
display: none;
}
#screenshot #svg #ipad {
height: 93%;
top: 0;
left: initial;
right: 8%;
}
#screenshot #svg #iphone {
height: 80%;
top: initial;
right: initial;
bottom: 0;
left: 6.5%;
}
.hero .svg-logo {
-webkit-filter: none;
filter: none;
}
#tagline {
display: block;
width: 100% !important;
}
.section {
padding-top: 0;
}
.page-container h4 {
font-size: 1.59rem;
margin: 0.47rem 0 0.94rem;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
#mindmap .paper-button { opacity: 1; }
.row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.row .flex-when-horizontal {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
.footer .paper-button {
font-size: 100%;
}
}
@media (max-width: 28.24rem) {
#screenshot #svg {
min-height: 11.76rem;
width: 77%;
}
}
/* Windows without scaling */
@media (-webkit-max-device-pixel-ratio: 1.2) and (min-device-width: 117.65rem){
}
.lang-ru .footer .paper-button {
font-size: 85%;
white-space: nowrap;
}
</style>
</head>
<body class="desktop lang-en loaded">
<!-- Main column layout -->
<div class="page-container" id="pageContainer">
<div class="navbar footer">
<div class="section">
<a class="paper-button" title="Examples" href="#examples">
Examples <div class="highlight"></div>
</a>
<button type="button" onclick="pricingClicked()" class="paper-button" title="See pricing">
Pricing <div class="highlight"></div>
</button>
<button type="button" onclick="aboutClicked()" class="paper-button" title="About Bubbl.us">
About <div class="highlight"></div>
</button>
<button type="button" onclick="contactClicked()" class="paper-button" title="Contact Bubbl.us">
Contact <div class="highlight"></div>
</button>
<div class="float-right">
<button type="button" onclick="signinClicked()" class="paper-button" title="Sign in to your account">
Sign In <div class="highlight"></div>
</button>
<button type="button" onclick="registerClicked()" class="paper-button secondary-button" title="Create a Bubbl.us account">
Register <div class="highlight"></div>
</button>
</div>
</div>
</div>
<!-- Hero area -->
<div class="hero">
<div id="pattern" class="pattern" style="background-image: url("/v3/docs/images/home/background.png"); background-position-y: 0px;"></div>
<div class="section">
<div class="powered">
</div>
<!-- Logo -->
<div class="svg-logo" id="top" data-size="full" style="height: 38.3027px;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 385.9 39.45" enable-background="new 0 0 385.9 39.45" xml:space="preserve" style="width: 379px; height: 38.3027px; left: 0px; top: -1px;">
<path id="us" d="M296,15.3c0.5,1.1,0.7,2.2,0.7,3.6v5.5c0,2.5,0.7,4.5,2.2,5.9c1.5,1.5,3.5,2.2,6,2.2c1.9,0,3.6-0.5,5-1.5
c1.4-1,2.1-2.4,2.1-4.1v-11c0.3-4.3,2.3-6.5,6-6.4c1.7,0.1,3.1,0.7,4.3,1.9c1.2,1.2,1.8,2.6,1.8,4.4v8.5c-0.3,3-1.1,5.4-2.6,7.4
c-3.4,5-9.4,7.6-17.8,7.6h-7.5c-5.4,0-10.4-1.4-14.8-4.2c-3.7-2.6-5.6-6.2-5.6-10.8v-5.4c0-2.6,0.9-4.8,2.8-6.6
c1.9-1.9,4.1-2.8,6.8-2.8h1.9c2.7,0,4.9,0.9,6.7,2.8C294.9,13.1,295.6,14.2,296,15.3z M330.8,14.4c1.3-1.5,3.2-2.6,5.5-3.4
c2.3-0.8,5.1-1.3,8.5-1.4l7.8-0.2c5.2,0,12.2,0.6,21,1.6c1.1,0.2,2,0.7,2.5,1.4c0.6,0.7,0.9,1.5,0.9,2.6c-1.2,1.5-2.2,2.2-3,2.2
l-1-0.1c-4.3-1-9.5-1.4-15.6-1.3c-4.1,0.1-6.3,1-6.6,2.7c0.3,1.9,2.5,2.9,6.6,2.9h4.5c5,0,8.8,0.7,11.4,2.2s4.2,3.6,4.6,6.6
c-0.2,1.7-0.9,3.1-2,4.3c-1.3,1.5-3.2,2.7-5.5,3.5c-2.3,0.8-5.2,1.3-8.5,1.4l-6.2,0.2c-9.2,0-16.9-0.6-23.1-1.9
c-1.1-0.3-2-0.7-2.6-1.4c-0.6-0.7-0.9-1.6-0.9-2.7c1.4-1.7,2.7-2.5,4.1-2.4c8.7,1.5,17,2.2,24.9,2.1c2.1-0.1,3.6-0.4,4.8-0.9
c1.1-0.4,1.7-1.1,1.9-2c-0.2-0.9-0.8-1.6-1.9-2.1c-1.1-0.5-2.7-0.8-4.8-0.8h-13.3c-9.9,0-15.2-2.9-16-8.8
C329,17,329.7,15.6,330.8,14.4z M264,25.5c-2.1,0-3.7,0.6-4.9,1.7c-1.1,1.1-1.8,2.7-1.9,4.9c0.2,2.2,0.8,3.9,1.9,5
c1.1,1.1,2.7,1.7,4.9,1.7h0.6c2.1,0,3.7-0.6,4.8-1.7c1.2-1.1,1.8-2.8,2-5c-0.2-2.2-0.8-3.8-2-4.9c-1.1-1.1-2.7-1.7-4.8-1.7
C264.6,25.5,264,25.5,264,25.5z"></path>
<path id="bubbl" d="M248.8,39.3h-9.8c-3.1,0-5.7-0.6-7.9-1.9c-2.2-1.3-3.9-3.2-5.1-5.7c-1.1-2.1-1.7-4.6-1.9-7.6V9.5
c0-2.6,0.9-4.8,2.8-6.7c1.9-1.9,4.1-2.8,6.8-2.8h1.9c2.6,0,4.8,0.9,6.6,2.8c1.9,1.9,2.9,4.1,2.9,6.7V29c0,2.8,1.2,4.2,3.7,4.2
c0.9,0,1.7,0.3,2.4,0.9c0.7,0.6,1,1.3,1,2.1c0,0.8-0.3,1.6-1,2.2C250.5,39,249.7,39.3,248.8,39.3z M121.3,0c6.3,0.4,9.4,3.5,9.5,9.2
c0.1,0.6,0.3,1,0.6,1.2c0.4,0.3,0.8,0.3,1.2,0.2c2.8-0.8,6-1.2,9.5-1.2c4.2,0,7.8,0.6,10.8,1.9c3,1.3,5.3,3.2,6.9,5.7
c1.4,2.1,2.3,4.6,2.5,7.5c-0.2,2.9-1.1,5.3-2.5,7.4c-3.4,4.9-9.3,7.4-17.8,7.4h-11.9c-8.5,0-14.4-2.4-17.8-7.4
c-1.4-2-2.2-4.5-2.5-7.4v-15c0-2.6,0.9-4.8,2.8-6.7c1.9-1.9,4.2-2.8,6.8-2.8C119.5,0,121.3,0,121.3,0z M103.6,11.4
c1.2,1.2,1.8,2.6,1.8,4.4v8.5c-0.3,3-1.2,5.4-2.6,7.4c-3.4,5-9.4,7.6-17.8,7.6h-7.5c-5.4,0-10.4-1.4-14.8-4.2
c-3.7-2.6-5.6-6.2-5.6-10.8v-5.4c0-2.6,0.9-4.8,2.8-6.6c1.9-1.9,4.1-2.8,6.8-2.8h1.8c2.7,0,4.9,0.9,6.7,2.8c0.9,0.9,1.6,2,2.1,3.1
c0.5,1.1,0.7,2.2,0.7,3.5v5.5c0,2.5,0.7,4.5,2.2,5.9c1.5,1.5,3.5,2.2,5.9,2.2c1.9,0,3.6-0.5,5-1.5c1.4-1,2.1-2.4,2.1-4.1v-11
c0.3-4.3,2.3-6.5,6.1-6.4C100.9,9.5,102.3,10.1,103.6,11.4z M140.2,15.6c-2.8,0-4.9,0.7-6.4,2.2c-1.5,1.4-2.4,3.6-2.6,6.5
c0.2,3,1.1,5.2,2.6,6.6c1.5,1.5,3.6,2.3,6.4,2.3h0.8c2.8,0,4.9-0.8,6.4-2.2c1.5-1.5,2.4-3.7,2.6-6.6c-0.2-2.9-1.1-5.1-2.6-6.5
c-1.5-1.5-3.6-2.2-6.4-2.2C141.1,15.6,140.2,15.6,140.2,15.6z M197.4,15.6c-2.8,0-4.9,0.7-6.4,2.2c-1.5,1.4-2.4,3.6-2.6,6.5
c0.2,3,1.1,5.2,2.6,6.6c1.5,1.5,3.6,2.3,6.4,2.3h0.8c2.8,0,4.9-0.8,6.4-2.2c1.5-1.5,2.4-3.7,2.6-6.6c-0.2-2.9-1.1-5.1-2.6-6.5
c-1.5-1.5-3.6-2.2-6.4-2.2C198.2,15.6,197.4,15.6,197.4,15.6z M188,9.2c0.1,0.6,0.3,1,0.6,1.2c0.4,0.3,0.8,0.3,1.2,0.2
c2.8-0.8,6-1.2,9.5-1.2c4.2,0,7.8,0.6,10.8,1.9c3,1.3,5.3,3.2,7,5.7c1.4,2.1,2.3,4.6,2.5,7.5c-0.2,2.9-1.1,5.3-2.5,7.4
c-3.4,4.9-9.3,7.4-17.8,7.4h-11.9c-8.5,0-14.4-2.4-17.8-7.4c-1.4-2-2.2-4.5-2.5-7.4v-15c0-2.6,0.9-4.8,2.8-6.7
c1.9-1.9,4.1-2.8,6.8-2.8h1.9C184.8,0.4,187.9,3.5,188,9.2z M20.9,9.2c0.1,0.6,0.3,1,0.6,1.2c0.4,0.3,0.8,0.3,1.2,0.2
c2.8-0.8,6-1.2,9.5-1.2c4.2,0,7.8,0.6,10.8,1.9c3,1.3,5.3,3.2,7,5.7c1.4,2.1,2.3,4.6,2.5,7.5c-0.2,2.9-1.1,5.3-2.5,7.4
c-3.4,4.9-9.3,7.4-17.8,7.4H20.3c-8.5,0-14.4-2.4-17.8-7.4c-1.4-2-2.2-4.5-2.5-7.4v-15c0-2.6,0.9-4.8,2.8-6.7C4.7,0.9,6.9,0,9.5,0
h1.9C17.6,0.4,20.8,3.5,20.9,9.2z M35.4,20c0-3.8-3.3-6.9-7.3-6.9s-7.3,3.1-7.3,6.9s3.3,6.9,7.3,6.9S35.4,23.8,35.4,20z M21.3,29.6
c0-2.4-2.1-4.3-4.6-4.3s-4.6,1.9-4.6,4.3s2.1,4.3,4.6,4.3S21.3,32,21.3,29.6z M31,34.6c0-1.5-1.3-2.7-2.9-2.7s-2.9,1.2-2.9,2.7
c0,1.5,1.3,2.7,2.9,2.7S31,36.1,31,34.6z"></path>
</svg>
</div>
<!-- Slogan -->
<h2 class="tagline">
<span>With Bubbl.us you can </span>
<span id="tagline" class="animated" style="width: 302px;">create a book outline.</span>
<span id="hiddenTagline">create a book outline.</span>
</h2>
<!-- Hero -->
<div id="screenshot">
<div id="svg">
<svg id="laptop" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 296 202" enable-background="new 0 0 296 202" xml:space="preserve">
<g>
<path id="Lid" fill="#232424" d="M268,171H28V8.63C28,4.97,30.97,2,34.63,2h226.74c3.66,0,6.63,2.97,6.63,6.63V171z"></path>
<rect id="Screen" x="36" y="9" fill="#333333" width="225" height="151"></rect>
<linearGradient id="Base_1_" gradientUnits="userSpaceOnUse" x1="148" y1="171" x2="148" y2="200">
<stop offset="0.7963" style="stop-color:#E4E7E6"></stop>
<stop offset="0.9299" style="stop-color:#BDCED9"></stop>
</linearGradient>
<path id="Base" fill="url(#Base_1_)" d="M268,171H148.17h-0.34H28L2,192c0,1.33,0,2.67,0,4c0.87,0.66,1.87,1.34,3,2
c1.43,0.84,2.78,1.49,4,2h138.83h0.34H287c1.22-0.51,2.57-1.16,4-2c1.13-0.66,2.13-1.34,3-2c0-1.33,0-2.67,0-4L268,171z"></path>
<linearGradient id="Bezel_2_" gradientUnits="userSpaceOnUse" x1="2" y1="194.5" x2="294" y2="194.5">
<stop offset="0" style="stop-color:#BDCED9"></stop>
<stop offset="0.05" style="stop-color:#FFFFFF"></stop>
<stop offset="0.95" style="stop-color:#FFFFFF"></stop>
<stop offset="0.9989" style="stop-color:#BDCED9"></stop>
</linearGradient>
<path id="Bezel_1_" opacity="0.5" fill="url(#Bezel_2_)" d="M291,194H148H5c0,0-3,0-3-2v4l3,1h143h143l3-1v-4
C294,194,291,194,291,194z"></path>
<path id="Keys" fill="#C5CFCF" d="M268.02,180.24L257.6,171H148H38.4l-10.42,9.24c-0.69,0.61-0.26,1.76,0.67,1.76H97l-1.66,7.47
c-0.17,0.79,0.42,1.53,1.23,1.53H148h51.43c0.8,0,1.4-0.75,1.23-1.53L199,182h68.35C268.27,182,268.71,180.86,268.02,180.24z"></path>
<image x="36" y="9" width="225" height="151" xlink:href="/images/home-laptop-1.jpg"></image>
</g>
</svg>
<svg id="ipad" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 108 140" enable-background="new 0 0 108 140" xml:space="preserve">
<g>
<path id="Outside" fill="#333333" stroke="#818282" stroke-width="0.75" stroke-miterlimit="10" d="M1.25,130.31V8.94
C1.25,4.55,4.8,1,9.19,1H98.6c4.38,0,7.94,3.55,7.94,7.94v121.38c0,4.38-3.55,7.94-7.94,7.94H9.19
C4.8,138.25,1.25,134.7,1.25,130.31z"></path>
<clipPath id="iPadScreen">
<path fill="#FFFFFF" d="M4.63,131.59V7.66c0-1.4,1.13-2.53,2.53-2.53h92.71c1.4,0,2.53,1.13,2.53,2.53v123.92
c0,1.4-1.13,2.53-2.53,2.53H7.16C5.77,134.11,4.63,132.98,4.63,131.59z"></path>
</clipPath>
<image x="4" y="5" width="98" height="129.5" clip-path="url(#iPadScreen)" xlink:href="/images/home-ipad-1.jpg"></image>
</g>
</svg>
<svg id="iphone" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 58 116" enable-background="new 0 0 58 116" xml:space="preserve">
<g id="phone">
<path id="Outer" fill="#818282" d="M47.25,114.39H10.89c-5.39,0-9.75-4.37-9.75-9.75V10.71
c0-5.39,4.37-9.75,9.75-9.75h36.36c5.39,0,9.75,4.37,9.75,9.75v93.94C57,110.03,52.63,114.39,47.25,114.39z"></path>
<path id="Inner" fill="#333333" d="M47.6,111.82H10.54c-3.77,0-6.82-3.05-6.82-6.82V10.35c0-3.77,3.05-6.82,6.82-6.82H47.6
c3.77,0,6.82,3.05,6.82,6.82v94.64C54.42,108.76,51.37,111.82,47.6,111.82z"></path>
<clipPath id="Phone-Screen">
<path id="Screen" fill="#FFFFFF" d="M47.43,4.39h-4.18c0,2.37-1.92,4.3-4.3,4.3H19.19c-2.37,0-4.3-1.92-4.3-4.3h-4.18
c-3.39,0-6.13,2.74-6.13,6.13v94.31c0,3.39,2.74,6.13,6.13,6.13h36.73c3.39,0,6.13-2.74,6.13-6.13V10.52
C53.56,7.14,50.82,4.39,47.43,4.39z"></path>
</clipPath>
<image x="5" y="4.5" width="48.5" height="106" clip-path="url(#Phone-Screen)" xlink:href="/images/home-iphone-1.jpg"></image>
</g>
</svg>
</div>
<div class="main-action">
<div class="register-options">
<button id="btnNewUser" type="button" onclick="registerClicked()" class="paper-button raised plain" title="Register with email">
<div class="iron-icon" icon="social:person-add">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" class="style-scope"></path></g></svg>
</div>
<div class="text-center">Register with email</div>
<div class="highlight"></div>
</button>
<div class="horizontal layout center-center">
<button type="button" style="display: none" onclick="signInWith('facebook')" class="paper-button raised plain" title="Sign in with Facebook">
<div class="iron-icon">
<img src="/images/fb-icon.svg" width="24" height="24" alt="Facebook">
</div>
<div class="text-center">Facebook</div>
<div class="highlight"></div>
</button>
<button type="button" onclick="signInWith('google')" class="paper-button raised plain flex" title="Sign in with Google">
<div class="iron-icon">
<img src="/images/google-icon.svg" width="24" height="24" alt="Google">
</div>
<div class="text-center">Register with Google</div>
<div class="highlight"></div>
</button>
</div>
<button id="btnSignIn" type="button" onclick="signinClicked()" class="paper-button raised plain" title="Sign in">
<div class="iron-icon" icon="lock">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" class="style-scope"></path></g></svg>
</div>
<div><strong>Sign In</strong></div>
<div class="highlight"></div>
</button>
</div>
<div class="or">
<span>OR</span>
</div>
<div class="start-now">
<button id="btnStart" type="button" onclick="startClicked()" class="paper-button raised secondary-button" title="Mind map now without signing in">
<div class="text-center">Mind Map Now</div>
<div class="iron-icon" icon="arrow-forward">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" class="style-scope iron-icon"></path></g></svg>
</div>
</button>
<div class="text">start without signing in</div>
</div>
</div>
</div>
<div class="trust">
<!-- Featured -->
<div class="section featured">
<h5>Featured In</h5>
<div class="logos">
<div class="logo wide" title="The New York Times">
<img src="/v3/docs/images/home/logo-nyt-w.png" alt="The New York Times">
</div>
<div class="logo narrow" title="PC Magazine">
<img src="/v3/docs/images/home/logo-pcmag-w.png" alt="PC Magazine">
</div>
<div class="logo" title="Lifehacker">
<img src="/v3/docs/images/home/logo-lifeHacker-w.png" alt="Lifehacker">
</div>
<div class="logo" title="Mashable">
<img src="/v3/docs/images/home/logo-mashable-w.png" alt="Mashable">
</div>
</div>
</div>
<div class="section featured liners">
<h5>Reviews</h5>
<div class="logos">
<div class="review" title="Capterra reviews">
<img src="/v3/docs/images/home/capterra.png">
</div>
<div class="review" title="G2Crowd reviews">
<img src="/v3/docs/images/home/g2.png">
</div>
</div>
</div>
<div class="section featured">
<h5>Trusted since 2005</h5>
<div class="logos">
<div class="review" title="Over 7 million users">
<img src="/v3/docs/images/home/7m-users.png">
</div>
</div>
</div>
</div>
</div>
<div class="shadow-bottom"></div>
</div>
<a name="examples"></a>
<div class="body alt-grey">
<!-- Product example -->
<div class="section">
<h4>Mind map examples</h4>
<div class="note">
To see how easy and fun it is to edit a mind map try one of our examples. </div>
<div class="vertical layout center-center">
<div class="horizontal layout center">
<!-- Prev example -->
<button id="btnPrevImage" type="button" onclick="prevClicked()" class="paper-button raised" title="Previous example">
<div class="iron-icon" icon="arrow-back">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" class="style-scope iron-icon"></path></g></svg>
</div>
<span>Previous</span>
<div class="highlight"></div>
</button>
<button id="btnEdit" type="button" onclick="editClicked()" class="paper-button secondary-button raised">
<div class="text-center">Edit This Example</div>
<div class="iron-icon" icon="launch">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" class="style-scope iron-icon"></path></g></svg>
</div>
<div class="highlight"></div>
</button>
<!-- Next example -->
<button id="btnNextImage" type="button" onclick="nextClicked()" class="paper-button raised" title="Next example">
<span>Next</span>
<div class="iron-icon" icon="arrow-forward">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" class="style-scope iron-icon"></path></g></svg>
</div>
<div class="highlight"></div>
</button>
</div>
<h4 id="imageTitle">--</h4>
</div>
<div id="mindmap" class="illustration wide">
<div id="imageSpinner" class="iron-icon">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><g>
<circle cx="20" cy="12" r="4"></circle>
<path fill-opacity="0.7" d="M20,8c1.11,0,2.11,0.45,2.83,1.18c0.26-0.96,0.17-2-0.34-2.94c-1.05-1.94-3.48-2.66-5.42-1.61
c-1.94,1.05-2.66,3.48-1.61,5.42c0.19,0.35,0.43,0.64,0.69,0.9C16.62,9.25,18.16,8,20,8z"></path>
<path fill-opacity="0.4" d="M17.07,4.62c0.97-0.53,2.07-0.61,3.05-0.31c-0.23-0.97-0.81-1.85-1.71-2.44
c-1.86-1.2-4.33-0.67-5.53,1.19c-1.2,1.86-0.67,4.33,1.19,5.53c0.33,0.21,0.68,0.35,1.03,0.46C14.7,7.33,15.45,5.5,17.07,4.62z"></path>
<path fill-opacity="0.1" d="M12.88,3.06c0.61-0.94,1.54-1.53,2.55-1.74c-0.66-0.74-1.58-1.24-2.64-1.32
c-2.2-0.18-4.13,1.46-4.31,3.66s1.46,4.13,3.66,4.31C12.52,8,12.9,7.95,13.27,7.88C12.1,6.57,11.88,4.6,12.88,3.06z"></path>
</g></svg>
</div>
<img id="imageLoader" alt="Loader">
<img id="mindmapImage" src="" title="Edit this mind map" alt="Mind map" onclick="editClicked()">
</div>
</div>
</div>
<div class="body">
<div class="section">
<h4 class="wide-only">What our users say about us</h4>
<h4 class="narrow-only">From our users</h4>
<div class="twitter">
<div class="tweet">
<div class="image-wrap">
<img src="/images/twitter_james.jpg" width="32" alt="James writes...">
</div>
<div class="quote">
Bubbl.us is a sleek, quick, beautiful tool for mind mapping. Used many times and always come away satisfied. </div>
<div class="cred">James Wisdom</div>
<div class="cred">Marketing Executive</div>
</div>
<div class="tweet">
<div class="image-wrap">
<img src="/images/twitter_shaelynn.jpg" width="32">
</div>
<div class="quote">
Bubbl.us is a great resource for organizing your thoughts. Share and collaborate with others. </div>
<div class="cred">Shaelynn Farnworth</div>
<div class="cred">Community Manager</div>
</div>
<div class="tweet">
<div class="image-wrap">
<img src="/images/twitter_holly.jpg" width="32">
</div>
<div class="quote">
It's so user-friendly and creates great visuals of connected learning! </div>
<div class="cred">Holly Mueller</div>
<div class="cred">Education Consultant</div>
</div>
</div>
<div class="twitter">
<div class="tweet">
<div class="image-wrap">
<img src="/images/twitter_amik.jpg" width="32">
</div>
<div class="quote">
Bubbl.us helps to quickly map out ideas and find points of friction early on in the product design/ideation phase. </div>
<div class="cred">Amik A.</div>
<div class="cred">UX Design Engineering Lead at Amazon</div>
</div>
<div class="tweet">
<div class="image-wrap">
<img src="/images/twitter_peter.jpg" width="32">
</div>
<div class="quote">
This mind-mapping activity actually smooths the process of content development and allows several folks to view the "larger picture". </div>
<div class="cred">Peter Young</div>
<div class="cred">Senior Adviser</div>
</div>
<div class="tweet">
<div class="image-wrap">
<img src="/images/twitter_jiwon.jpg" width="32">
</div>
<div class="quote">
Bubbl.us helped us cleanly map out our email campaign strategies for the benefit of stakeholders outside our department </div>
<div class="cred">Jiwon Seo</div>
<div class="cred">Email Marketing Manager</div>
</div>
</div>
</div>
</div>
<div class="body alt-grey">
<div class="section">
<h4 class="wide-only">Use Artificial Intelligence to generate ideas</h4>
<h4 class="narrow-only">Use AI to generate ideas</h4>
<p>Our AI is your creative companion, ready to jumpstart your ideas when you need it most. With a simple click, access a wellspring of ideas tailored to your project.</p>
<p></p>
<div class="illustration">
<img src="/v3/docs/images/home/ai.jpg" alt="Use AI to generate ideas">
</div>
</div>
</div>
<div class="body">
<div class="section">
<h4>Get Started Instantly with Templates</h4>
<p>Begin your journey with one of our ready-to-use templates, or unleash your creativity by crafting your own. Plus, share your personalized templates seamlessly with others!</p>
<p></p>
<div class="illustration">
<img src="/v3/docs/images/home/templates.jpg" alt="Get Started Instantly with Templates">
</div>
</div>
</div>
<div class="body alt-grey">
<div class="section">
<h4>Collaborate with your team in real time</h4>
<p>Work on a mind map together, ensuring immediate visibility of all changes, and effortlessly determine who is actively contributing to or viewing your mind map.</p>
<p></p>
<div class="illustration">
<img src="/v3/docs/images/home/rtc.jpg" alt="Collaborate with your team in real time">
</div>
</div>
</div>
<div class="body">
<div class="section brag">
<h2>The <em>EASIEST</em> way to mind map</h2>
<p>
Bubbl.us makes it easy to <em>organize your ideas</em> visually in a way that makes sense to you and others. Our editor is designed to help you <em>stay on task</em> and capture your thoughts quickly. </p>
<p>Thousands of people use Bubbl.us daily to <em>take notes</em>, <em>brainstorm new ideas</em>, <em>collaborate</em>, and <em>present more effectively</em>.</p>
<div class="imageholder">
<img src="/v3/docs/images/home/easiest.svg" alt="The easiest way">
</div>
</div>
</div>
<div class="body alt-grey">
<div class="section feature">
<div class="side-text">
<h4>Focus on task</h4>
<p>One of the most important things while brainstorming is avoiding distractions. Our user interface is designed to help you stay focused on task by keeping the number of visible buttons to a minimum as you work.</p>
</div>
<div class="side-illustration">
<div class="imageholder">
<img src="/v3/docs/images/home/focus.svg" alt="Focus on task">
</div>
</div>
</div>
</div>
<div class="body">
<div class="section feature alt">
<div class="side-text">
<h4>Collaborate and share</h4>
<p>Bubbl.us lets you share your mind maps easily with people or on social media. Collaborate with friends or colleagues in real time in a classroom or a business meeting and see changes to the mind map immediately.</p>
</div>
<div class="side-illustration">
<div class="imageholder">
<img src="/v3/docs/images/home/collaborate.svg" alt="Share">
</div>
</div>
</div>
</div>
<div class="body alt-blue">
<div class="section">
<h4>Why Bubbl.us?</h4>
<div id="whySection">
<div class="row">
<li class="bullet"><div class="iron-icon" icon="language"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" class="style-scope iron-icon"></path></g></svg></div>
<div class="text">
<div class="head">Browser-based</div>
<div class="more">No apps to download - works the same on mobile and desktop.</div>
</div>
</li>
<li class="bullet"><div class="iron-icon" icon="base:image-jpg"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M10,5h2h1.18
C13.63,5,14,5.37,14,5.82v2.37C14,8.63,13.63,9,13.18,9H11v2h-1V5z M5,19l3.5-4.5l2.5,3.01L14.5,13l4.5,6H5z M19,7h-1V6h-2v1v1v1v1
h2V9h-1V8h2v2c0,0.55-0.45,1-1,1h-2c-0.55,0-1-0.45-1-1V6c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1V7z M9,5v5c0,0.55-0.45,1-1,1H6
c-0.55,0-1-0.45-1-1V9h1v1h2V5H9z M13,6h-2v2h2V6z" class="style-scope iron-icon"></path>
</g></svg></div>
<div class="text">
<div class="head">Save as image and print</div>
<div class="more">Export your work as JPG, PNG, text, and print it on one or more pages.</div>
</div>
</li>
<li class="bullet"><div class="iron-icon" icon="social:share"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" class="style-scope iron-icon"></path></g></svg></div>
<div class="text">
<div class="head">Easy sharing</div>
<div class="more">Share your work with a link, and work together at the same time.</div>
</div>
</li>
</div>
<div class="row">
<li class="bullet"><div class="iron-icon" icon="hardware:desktop-windows"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z" class="style-scope iron-icon"></path></g></svg></div>
<div class="text">
<div class="head">One-click presentation</div>
<div class="more">Enter full-screen presentation mode with a click of a button.</div>
</div>
</li>
<li class="bullet"><div class="iron-icon" icon="lightbulb-outline">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path></g></svg>
</div>
<div class="text">
<div class="head">Distraction-free editing</div>
<div class="more">User interface is designed to reduce distractions and increase focus.</div>
</div>
</li>
<li class="bullet"><div class="iron-icon" icon="thumb-up"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path></g></svg></div>
<div class="text">
<div class="head">Team work</div>
<div class="more">Create and manage teams with multiple users. <a target="_blank" href="https://help.bubbl.us/article/18-teams-overview" title="Team accounts overview">more info</a></div>
</div>
</li>
</div>
</div>
</div>
</div>
<div class="body">
<div class="section" id="aboutMindMapping">
<h4>About mind mapping</h4>
<p>
Mind mapping is a tool for visualizing <em>connections between ideas</em> or pieces of information. Ideas are <em>linked by lines</em>, creating a web of relationships that's easy to <em>understand at a glance</em>. </p>
<div class="imageholder">
<img src="/v3/docs/images/home/complexity.svg" alt="Complexity">
</div>
<div class="feature">
<div class="side-text">
<p>Benefits of Bubbl.us mind maps over text:</p>
<ul>
<li><div class="head"><strong>Superior clarity</strong> of structured information</div>
<div class="more">Whether it's a family tree, a decision flow map, or an algorithm, mind maps have a huge advantage in presenting complexity clearly and concisely.</div>
</li>
<li><div class="head"><strong>Better retention</strong> of complex ideas.</div>
<div class="more">Visualizing complex ideas in shapes, lines, and pictures leads to much better recollection later than simple text.</div>
</li>
<li><div class="head"><strong>Creative collaboration</strong> with others.</div>
<div class="more">Visual brainstorming with a team can dramatically improve the quality of the final product because of diversity of perspectives and experiences.</div>
</li>
</ul>
</div>
<div class="side-illustration vs">
<div class="imageholder">
<img id="img_vs" alt="Image vs text" src="/v3/docs/images/home/vs_w.svg">
</div>
</div>
</div>
</div>
</div>
<div class="body alt-grey">
<div class="section">
<h2>Mind mapping helps <em>EVERYONE</em></h2>
<p>Just about everyone can benefit from mind mapping. The world constantly barrages us with information, and we are often tasked with organizing and presenting it to others. Bubbl.us makes it easy.</p>
<div id="topUses">
<div class="row">
<li class="bullet">
<div class="text">
<div class="head">Students</div>
<ul class="more">
<li>Improve note taking with pictures, links, and formatting.</li>
<li>Plan essays and project assignments.</li>
<li>Use mind maps as a tool for memorizing.</li>
</ul>
</div>
</li>
<li class="bullet">
<div class="text">
<div class="head">Teachers</div>
<ul class="more">
<li>Present material in a more memorable format.</li>
<li>Facilitate critical thinking.</li>
<li>Apply collaborative learning in class.</li>
<li>Make homework assignments more engaging.</li>
</ul>
</div>
</li>
</div>
<div class="row">
<li class="bullet">
<div class="text">
<div class="head">Researchers</div>
<ul class="more">
<li>Keep track of found information, links, and connections.</li>
<li>Collaborate with colleagues.</li>
<li>Prepare findings for publication.</li>
</ul>
</div>
</li>
<li class="bullet">
<div class="text">
<div class="head">Creatives</div>
<ul class="more">
<li>Brainstorm for original ideas.</li>
<li>Collaborate with other creatives for a better product.</li>
</ul>
</div>
</li>
</div>
<div class="row">
<li class="bullet">
<div class="text">
<div class="head">Managers</div>
<ul class="more">
<li>Plan complex projects quicker.</li>
<li>Outline and facilitate team meetings.</li>
<li>Keep track of tasks assigned to team members.</li>
<li>Prepare reports and present objectives more effectively.</li>
</ul>
</div>
</li>
<li class="bullet">
<div class="text">
<div class="head">Business Owners</div>
<ul class="more">
<li>Develop and explore business strategies.</li>
<li>Lay out pros and cons for complex decisions.</li>
<li>Organize business priorities.</li>
</ul>
</div>
</li>
</div>
</div>
</div>
</div>
<div class="body call-to-action">
<div class="section">
<h4>Start using Bubbl.us today!</h4>
<div class="main-action alt">
<div class="register-options">
<button id="btnNewUser" type="button" onclick="registerClicked()" class="paper-button raised plain" title="Register with email">
<div class="iron-icon" icon="social:person-add">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" class="style-scope"></path></g></svg>
</div>
<div class="text-center">Register with email</div>
<div class="highlight"></div>
</button>
<div class="horizontal layout center-center">
<button type="button" style="display: none" onclick="signInWith('facebook')" class="paper-button raised plain" title="Sign in with Facebook">
<div class="iron-icon">
<img src="/images/fb-icon.svg" width="24" height="24" alt="Facebook">
</div>
<div class="text-center">Facebook</div>
<div class="highlight"></div>
</button>
<button type="button" onclick="signInWith('google')" class="paper-button raised plain flex" title="Sign in with Google">
<div class="iron-icon">
<img src="/images/google-icon.svg" width="24" height="24" alt="Google">
</div>
<div class="text-center">Sign in with Google</div>
<div class="highlight"></div>
</button>
</div>
<button id="btnSignIn" type="button" onclick="signinClicked()" class="paper-button raised plain" title="Sign in">
<div class="iron-icon" icon="lock">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" class="style-scope"></path></g></svg>
</div>
<div><strong>Sign In</strong></div>
<div class="highlight"></div>
</button>
</div>
<div class="or">
<span>OR</span>
</div>
<div class="start-now">
<button id="btnStart2" type="button" onclick="startClicked()" class="paper-button raised secondary-button" title="Mind map now without signing in">
<div class="text-center">Mind Map Now</div>
<div class="iron-icon" icon="arrow-forward">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" class="style-scope iron-icon"></path></g></svg>
</div>
</button>
<div class="text">start without signing in</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="body alt-blue footer">
<div class="shadow-top"></div>
<div class="section">
<div id="pattern2" class="pattern" style="background-image: url("/v3/docs/images/home/background.png"); background-position-y: 0px;"></div>
<div class="row center-center">
<div class="row">
<div class="horizontal layout center-center">
<button id="btnPricing" type="button" onclick="pricingClicked()" class="paper-button" title="See pricing">
Pricing <div class="highlight"></div>
</button>
<button id="btnContact" type="button" onclick="contactClicked()" class="paper-button" title="Contact Bubbl.us">
Contact <div class="highlight"></div>
</button>
<a id="btnHelp" class="paper-button" title="Website help" href="https://help.bubbl.us" target="_blank">
Help <div class="highlight"></div>
</a>
<a id="btnTerms" class="paper-button" title="Terms of service" href="https://help.bubbl.us/article/44-terms-of-service" target="_blank">
Terms <div class="highlight"></div>
</a>
</div>
<div class="horizontal layout center-center">
<a id="btnPrivacy" class="paper-button" title="Privacy policy" href="https://help.bubbl.us/article/45-privacy-policy" target="_blank">
Privacy <div class="highlight"></div>
</a>
<a id="btnSecurity" class="paper-button" title="Security statement" href="https://help.bubbl.us/article/45-privacy-policy" target="_blank">
Security <div class="highlight"></div>
</a>
<button id="btnAbout" type="button" onclick="aboutClicked()" class="paper-button" title="About Bubbl.us">
About <div class="highlight"></div>
</button>
</div>
</div>
<div class="horizontal layout center-center social">
<a href="https://www.facebook.com/Bubblus-155915794433710" target="_blank">
<img src="/images/Facebook.png" width="32" alt="Fb">
</a>
<a href="https://www.linkedin.com/company/bubbl-us/about" target="_blank">
<img src="/images/Linkedin.png" width="32" alt="LI">
</a>
<a href="https://twitter.com/bubbl_us" target="_blank">
<img src="/images/Twitter.png" width="32" alt="Tw">
</a>
<a href="https://www.youtube.com/channel/UCNr9bae-fGnm3LONrqulnUQ" target="_blank">
<img src="/images/YouTube.png" width="32" alt="YT">
</a>
</div>
</div>
<div class="horizontal layout center-center copyright">
<div class="svg-logo" id="bottom" data-size="tab" style="height: 12.1275px;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 385.9 39.45" enable-background="new 0 0 385.9 39.45" xml:space="preserve" style="width: 120px; height: 12.1275px; left: 0px; top: 17px;">
<path id="us" d="M296,15.3c0.5,1.1,0.7,2.2,0.7,3.6v5.5c0,2.5,0.7,4.5,2.2,5.9c1.5,1.5,3.5,2.2,6,2.2c1.9,0,3.6-0.5,5-1.5
c1.4-1,2.1-2.4,2.1-4.1v-11c0.3-4.3,2.3-6.5,6-6.4c1.7,0.1,3.1,0.7,4.3,1.9c1.2,1.2,1.8,2.6,1.8,4.4v8.5c-0.3,3-1.1,5.4-2.6,7.4
c-3.4,5-9.4,7.6-17.8,7.6h-7.5c-5.4,0-10.4-1.4-14.8-4.2c-3.7-2.6-5.6-6.2-5.6-10.8v-5.4c0-2.6,0.9-4.8,2.8-6.6
c1.9-1.9,4.1-2.8,6.8-2.8h1.9c2.7,0,4.9,0.9,6.7,2.8C294.9,13.1,295.6,14.2,296,15.3z M330.8,14.4c1.3-1.5,3.2-2.6,5.5-3.4
c2.3-0.8,5.1-1.3,8.5-1.4l7.8-0.2c5.2,0,12.2,0.6,21,1.6c1.1,0.2,2,0.7,2.5,1.4c0.6,0.7,0.9,1.5,0.9,2.6c-1.2,1.5-2.2,2.2-3,2.2
l-1-0.1c-4.3-1-9.5-1.4-15.6-1.3c-4.1,0.1-6.3,1-6.6,2.7c0.3,1.9,2.5,2.9,6.6,2.9h4.5c5,0,8.8,0.7,11.4,2.2s4.2,3.6,4.6,6.6
c-0.2,1.7-0.9,3.1-2,4.3c-1.3,1.5-3.2,2.7-5.5,3.5c-2.3,0.8-5.2,1.3-8.5,1.4l-6.2,0.2c-9.2,0-16.9-0.6-23.1-1.9
c-1.1-0.3-2-0.7-2.6-1.4c-0.6-0.7-0.9-1.6-0.9-2.7c1.4-1.7,2.7-2.5,4.1-2.4c8.7,1.5,17,2.2,24.9,2.1c2.1-0.1,3.6-0.4,4.8-0.9
c1.1-0.4,1.7-1.1,1.9-2c-0.2-0.9-0.8-1.6-1.9-2.1c-1.1-0.5-2.7-0.8-4.8-0.8h-13.3c-9.9,0-15.2-2.9-16-8.8
C329,17,329.7,15.6,330.8,14.4z M264,25.5c-2.1,0-3.7,0.6-4.9,1.7c-1.1,1.1-1.8,2.7-1.9,4.9c0.2,2.2,0.8,3.9,1.9,5
c1.1,1.1,2.7,1.7,4.9,1.7h0.6c2.1,0,3.7-0.6,4.8-1.7c1.2-1.1,1.8-2.8,2-5c-0.2-2.2-0.8-3.8-2-4.9c-1.1-1.1-2.7-1.7-4.8-1.7
C264.6,25.5,264,25.5,264,25.5z"></path>
<path id="bubbl" d="M248.8,39.3h-9.8c-3.1,0-5.7-0.6-7.9-1.9c-2.2-1.3-3.9-3.2-5.1-5.7c-1.1-2.1-1.7-4.6-1.9-7.6V9.5
c0-2.6,0.9-4.8,2.8-6.7c1.9-1.9,4.1-2.8,6.8-2.8h1.9c2.6,0,4.8,0.9,6.6,2.8c1.9,1.9,2.9,4.1,2.9,6.7V29c0,2.8,1.2,4.2,3.7,4.2
c0.9,0,1.7,0.3,2.4,0.9c0.7,0.6,1,1.3,1,2.1c0,0.8-0.3,1.6-1,2.2C250.5,39,249.7,39.3,248.8,39.3z M121.3,0c6.3,0.4,9.4,3.5,9.5,9.2
c0.1,0.6,0.3,1,0.6,1.2c0.4,0.3,0.8,0.3,1.2,0.2c2.8-0.8,6-1.2,9.5-1.2c4.2,0,7.8,0.6,10.8,1.9c3,1.3,5.3,3.2,6.9,5.7
c1.4,2.1,2.3,4.6,2.5,7.5c-0.2,2.9-1.1,5.3-2.5,7.4c-3.4,4.9-9.3,7.4-17.8,7.4h-11.9c-8.5,0-14.4-2.4-17.8-7.4
c-1.4-2-2.2-4.5-2.5-7.4v-15c0-2.6,0.9-4.8,2.8-6.7c1.9-1.9,4.2-2.8,6.8-2.8C119.5,0,121.3,0,121.3,0z M103.6,11.4
c1.2,1.2,1.8,2.6,1.8,4.4v8.5c-0.3,3-1.2,5.4-2.6,7.4c-3.4,5-9.4,7.6-17.8,7.6h-7.5c-5.4,0-10.4-1.4-14.8-4.2
c-3.7-2.6-5.6-6.2-5.6-10.8v-5.4c0-2.6,0.9-4.8,2.8-6.6c1.9-1.9,4.1-2.8,6.8-2.8h1.8c2.7,0,4.9,0.9,6.7,2.8c0.9,0.9,1.6,2,2.1,3.1
c0.5,1.1,0.7,2.2,0.7,3.5v5.5c0,2.5,0.7,4.5,2.2,5.9c1.5,1.5,3.5,2.2,5.9,2.2c1.9,0,3.6-0.5,5-1.5c1.4-1,2.1-2.4,2.1-4.1v-11
c0.3-4.3,2.3-6.5,6.1-6.4C100.9,9.5,102.3,10.1,103.6,11.4z M140.2,15.6c-2.8,0-4.9,0.7-6.4,2.2c-1.5,1.4-2.4,3.6-2.6,6.5
c0.2,3,1.1,5.2,2.6,6.6c1.5,1.5,3.6,2.3,6.4,2.3h0.8c2.8,0,4.9-0.8,6.4-2.2c1.5-1.5,2.4-3.7,2.6-6.6c-0.2-2.9-1.1-5.1-2.6-6.5
c-1.5-1.5-3.6-2.2-6.4-2.2C141.1,15.6,140.2,15.6,140.2,15.6z M197.4,15.6c-2.8,0-4.9,0.7-6.4,2.2c-1.5,1.4-2.4,3.6-2.6,6.5
c0.2,3,1.1,5.2,2.6,6.6c1.5,1.5,3.6,2.3,6.4,2.3h0.8c2.8,0,4.9-0.8,6.4-2.2c1.5-1.5,2.4-3.7,2.6-6.6c-0.2-2.9-1.1-5.1-2.6-6.5
c-1.5-1.5-3.6-2.2-6.4-2.2C198.2,15.6,197.4,15.6,197.4,15.6z M188,9.2c0.1,0.6,0.3,1,0.6,1.2c0.4,0.3,0.8,0.3,1.2,0.2
c2.8-0.8,6-1.2,9.5-1.2c4.2,0,7.8,0.6,10.8,1.9c3,1.3,5.3,3.2,7,5.7c1.4,2.1,2.3,4.6,2.5,7.5c-0.2,2.9-1.1,5.3-2.5,7.4
c-3.4,4.9-9.3,7.4-17.8,7.4h-11.9c-8.5,0-14.4-2.4-17.8-7.4c-1.4-2-2.2-4.5-2.5-7.4v-15c0-2.6,0.9-4.8,2.8-6.7
c1.9-1.9,4.1-2.8,6.8-2.8h1.9C184.8,0.4,187.9,3.5,188,9.2z M20.9,9.2c0.1,0.6,0.3,1,0.6,1.2c0.4,0.3,0.8,0.3,1.2,0.2
c2.8-0.8,6-1.2,9.5-1.2c4.2,0,7.8,0.6,10.8,1.9c3,1.3,5.3,3.2,7,5.7c1.4,2.1,2.3,4.6,2.5,7.5c-0.2,2.9-1.1,5.3-2.5,7.4
c-3.4,4.9-9.3,7.4-17.8,7.4H20.3c-8.5,0-14.4-2.4-17.8-7.4c-1.4-2-2.2-4.5-2.5-7.4v-15c0-2.6,0.9-4.8,2.8-6.7C4.7,0.9,6.9,0,9.5,0
h1.9C17.6,0.4,20.8,3.5,20.9,9.2z M35.4,20c0-3.8-3.3-6.9-7.3-6.9s-7.3,3.1-7.3,6.9s3.3,6.9,7.3,6.9S35.4,23.8,35.4,20z M21.3,29.6
c0-2.4-2.1-4.3-4.6-4.3s-4.6,1.9-4.6,4.3s2.1,4.3,4.6,4.3S21.3,32,21.3,29.6z M31,34.6c0-1.5-1.3-2.7-2.9-2.7s-2.9,1.2-2.9,2.7
c0,1.5,1.3,2.7,2.9,2.7S31,36.1,31,34.6z"></path>
</svg>
</div> <div>©<span>2024</span> LKCollab, LLC.</div>
<span style="position: relative">
<button type="button" onclick="languageClicked()" class="drop-button" title="Change language">
English ▾
<div class="highlight"></div>
</button>
<div id="languages" class="drop-down" style="display:none;">
<a href="/en" target="_top">English</a>
<a href="/es" target="_top">Español</a>
<a href="/ru" target="_top">Русский</a>
</div>
</span>
</div>
</div>
<div class="summary">
<div class="shadow-top"></div>
<div class="section">
Bubbl.us is praised by teachers, students and professionals as being one of the best web-based mind mapping software applications on the market. Thousands of people use Bubbl.us daily to take notes, brainstorm new ideas, collaborate, and present more effectively. Bubbl.us makes it easy to organize your ideas visually in a way that makes sense to you and others. Our editor has a clean and simple design, which allows for a clutter-free space to help users stay on task, and map out their thoughts and ideas. With Bubbl.us you can collaborate in real time with friends or colleagues, and share you maps easily with people or on social media. Bubbl.us offers free accounts with up to three mind maps, as well as Premium accounts with discounts for teachers, students, and non-profit organizations. </div>
</div>
</div>
</div>
<link rel="prefetch" href="/v3/include/bubble.min.html"><link rel="prefetch" href="/v3/include/bubble.full.min.html"></body></html>