<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Bots | Duolingo language learning through conversation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@duolingo">
<meta name="twitter:title" content="Duolingo Bots - Learn a language through chat">
<meta name="twitter:description" content="Duolingo Bots is the newest way to practice your language learning through chat.">
<meta name="twitter:image" content="http://pillow.duolingo.com/images/pillow-meta.png">
<meta property="og:title" content="Duolingo Bots - Learn a language through chat" />
<meta property="og:image:width" content="600"/>
<meta property="og:image:height" content="315"/>
<meta property="og:image" content="http://pillow.duolingo.com/images/pillow-meta.png" />
<meta property="og:description" content="The Duolingo Pillow" />
<meta property="og:url" content="http://duolingo.com">
<link rel="shortcut icon" href="http://uplift.duolingo.com/static/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function isElementInViewport($elem) {
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + window.innerHeight;
// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.bot');
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
$elem.addClass('start');
}
}
function checkAnimation2() {
var $elem = $('.bubble-tree');
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
$elem.addClass('start');
}
}
// Capture scroll events
$(window).scroll(function(){
checkAnimation();
checkAnimation2();
});
</script>
</head>
<body>
<div class="topbar">
<div class="container">
<div class="header-logo">
<span class="duolingo logo">Duolingo</span>
<span class="lockup">bots</span>
</div>
<a class="outline-btn" href="http://apple.co/duolingo">Duolingo for iOS</a>
</div>
</div>
<div class="section hero">
<div class="container">
<h1>Say hello to the Bots.</h1>
<div class="subheader">Because learning to speak a new language shouldn't be scary.</div>
<span class="chatbot-illustration"></span>
</div>
</div>
<div class="section progress">
<div class="container">
<div class="text">
<h2>Progress without pressure.</h2>
<p>Whether it’s catching a flight at the airport, grabbing a slice or hailing a taxi, Bots help you learn how to navigate the real world in a new language - all at your own pace.</p>
<p>The hardest part of learning a new language just became easy.</p>
</div>
<span class="phone-img"></span>
<div class="chat-bubble">
<div class="loading">
<div class="dot one"></div>
<div class="dot two"></div>
<div class="dot three"></div>
</div>
</div>
</div>
</div>
<div class="section bots">
<div class="container center">
<h2 class="center">Meet your virtual language tutors.</h2>
<span class="center new-bots">New bots added regularly</span>
<div class="bot-wrapper">
<div class="col-3">
<span class="bot bot-1"></span>
<h3>Chef Roberto</h3>
<p>The world’s most renowned (Pizza) Chef. Try not to insult his cooking.</p>
</div>
<div class="col-3">
<span class="bot bot-2"></span>
<h3>Renée the Driver</h3>
<p>For what to say and where to go, Renée’s the one to know.</p>
</div>
<div class="col-3">
<span class="bot bot-3"></span>
<h3>Officer Ada</h3>
<p>From protecting and serving to teaching langages, Ada does it all.</p>
</div>
</div>
</div>
</div>
<div class="section tree">
<div class="container">
<div class="image-container">
<span class="bubble-tree"></span>
</div>
<div class="text">
<h2>Free. Speech.</h2>
<p>When you talk to a Bot, you don’t choose from canned responses. Instead, practice what you've learned by speaking freely and Bots will guide you - thanks to the AI behind the scenes, they understand thousands of distinct answers and only get smarter over time.</p>
</div>
</div>
</div>
<div class="section footer">
<div class="container">
<h2 class="center">Say hello to bots.</h2>
<a class="footer-download" href="http://apple.co/duolingo">Avalabile in the Duolingo App</a>
<ul>
<li><a href="https://duolingo.com">Duolingo</a></li>
<li><a href="http://www.duolingo.com/design/assets.zip">Press Kit</a></li>
<li><a href="http://www.duolingo.com/contact">Contact</a></li>
<li><a href="https://facebook.com/duolingo">Facebook</a></li>
<li><a href="https://twitter.com/duolingo">Twitter</a></li>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'museo-sans-rounded';
src: url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-100-webfont.eot');
src: url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-100-webfont.eot?#iefix') format('embedded-opentype'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-100-webfont.woff2') format('woff2'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-100-webfont.woff') format('woff'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-100-webfont.svg#museo_sans_rounded100') format('svg');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'museo-sans-rounded';
src: url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.eot');
src: url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.eot?#iefix') format('embedded-opentype'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.woff2') format('woff2'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.woff') format('woff'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.svg#museo_sans_rounded300') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'museo-sans-rounded';
src: url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.eot');
src: url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.eot?#iefix') format('embedded-opentype'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.woff2') format('woff2'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.woff') format('woff'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.svg#museo_sans_rounded500') format('svg');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'museo-sans-rounded';
src: url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.eot');
src: url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.eot?#iefix') format('embedded-opentype'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.woff2') format('woff2'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.woff') format('woff'),
url('https://d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.svg#museo_sans_rounded700') format('svg');
font-weight: 700;
font-style: normal;
}
body {
-webkit-font-smoothing: antialiased;
font: 500 15px "museo-sans-rounded", "Open Sans", sans-serif;
font-color: #999999;
margin: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 52px;
font-weight: 500;
margin: 0 0 30px 0;
text-align: center;
color: #ffffff;
}
h2 {
font-size: 32px;
font-weight: 300;
color: #6f6f6f;
margin-bottom: 30px;
margin-top: 0;
}
h3 {
font-weight: 700;
font-size: 20px;
text-align: center;
color: #6f6f6f;
}
.center {
text-align: center;
}
.section {
padding: 80px 0;
}
.container {
height: 100%;
padding: 0 40px;
position: relative;
max-width: 1100px;
margin: 0 auto;
overflow: hidden;
}
.hero.section {
background: #1caff6;
background-image: url(https://dzvpwvcpo1876.cloudfront.net/clouds.svg);
background-image: url(https://dzvpwvcpo1876.cloudfront.net/clouds.svg), -webkit-gradient(linear, left top, left bottom, from(#1caff6), to(#5CCDEC));
background-image: url(https://dzvpwvcpo1876.cloudfront.net/clouds.svg), -webkit-linear-gradient(top, #1caff6, #5CCDEC);
background-image: url(https://dzvpwvcpo1876.cloudfront.net/clouds.svg), -moz-linear-gradient(top, #1caff6, #5CCDEC);
background-image: url(https://dzvpwvcpo1876.cloudfront.net/clouds.svg), -ms-linear-gradient(top, #1caff6, #5CCDEC);
background-image: url(ihttps://dzvpwvcpo1876.cloudfront.net/clouds.svg), -o-linear-gradient(top, #1caff6, #5CCDEC);
background-image: url(https://dzvpwvcpo1876.cloudfront.net/clouds.svg), linear-gradient(to bottom, #1caff6, #5CCDEC);
background-repeat: no-repeat;
height: 540px;
padding: 60px 0 0 0;
}
.progress.section, .tree.section {
height: 580px;
padding: 0;
}
.progress.section .container {
display: flex;
justify-content: center;
flex-direction: column;
}
.text {
display: inline-block;
width: 50%;
padding: 0 80px;
box-sizing: border-box;
}
.text p {
opacity: 0.6;
font-weight: 300;
font-size: 17px;
line-height: 1.6;
color: #6f6f6f;
}
.bots.section, .footer.section {
background: #f6f6f6;
border-bottom: solid 1px #dfdfdf;
border-top: solid 1px #dfdfdf;
height: 450px;
}
.footer.section {
height: 300px;
padding: 80px 0 20px 0;
}
.footer.section ul {
list-style: none;
display: block;
font-size: 17px;
text-align: center;
margin-top: 100px;
padding: 0;
}
.footer.section li {
display: inline-block;
margin: 0 20px;
}
.footer.section a {
color: #999999;
}
.new-bots {
border-radius: 8px;
border: solid 2px #faa918;
display: block;
color: #faa918;
font-size: 17px;
font-weight: 500;
padding: 8px 15px;
width: 210px;
margin: 0 auto 60px auto;
}
.col-3 {
box-sizing: border-box;
display: inline-block;
padding: 0 30px;
text-align: center;
width: 33%;
}
.col-3 p {
opacity: 0.6;
font-weight: 300;
font-size: 17px;
line-height: 1.5;
text-align: center;
color: #6f6f6f;
}
.image-container {
display: inline-block;
width: 49%
}
.subheader {
color: #ffffff;
font-size: 32px;
font-weight: 300;
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.topbar {
background: #1caff6;
color: #ffffff;
height: 70px;
}
.outline-btn {
border: 2px solid #ffffff;
color: #ffffff;
display: inline-block;
font-weight: 700;
font-size: 15px;
line-height: 20px;
padding: 8px 20px;
text-align: center;
vertical-align: middle;
float: right;
border-radius: 40px;
margin-top: 13px;
}
.outline-btn:hover {
text-decoration: none;
background: rgba(255, 255, 255, .25);
}
/* Images */
.chatbot-illustration {
background-image: url(https://dzvpwvcpo1876.cloudfront.net/hero-illustration.svg);
background-size: 480px 300px;
width: 480px;
height: 300px;
display: block;
position: absolute;
margin: 0 auto;
bottom: -2px;
left: 0;
right: 0;
}
.phone-img {
background-image: url(https://dzvpwvcpo1876.cloudfront.net/phone.svg);
background-size: 393px 523px;
width: 393px;
height: 523px;
display: block;
position: absolute;
bottom: 0;
right: 10%;
}
.bubble-tree {
background-image: url(https://dzvpwvcpo1876.cloudfront.net/bubble-tree.svg);
background-size: 455px 361px;
width: 455px;
height: 361px;
display: inline-block;
position: relative;
top: 100px;
left: 0;
opacity: 1;
}
.bot-1 {
background-image: url(https://dzvpwvcpo1876.cloudfront.net/illustration-chef-2.svg);
background-repeat: no-repeat;
width: 135px;
height: 170px;
display: inline-block;
margin: 0 auto;
opacity:0;
}
.bot-2 {
background-image: url(https://dzvpwvcpo1876.cloudfront.net/illustration-driver-2.svg);
background-repeat: no-repeat;
width: 135px;
height: 170px;
display: inline-block;
margin: 0 auto;
opacity:0;
}
.bot-3 {
background-image: url(https://dzvpwvcpo1876.cloudfront.net/illustration-officer.svg);
background-repeat: no-repeat;
width: 135px;
height: 170px;
display: inline-block;
margin: 0 auto;
opacity:0;
}
.footer-download {
background-image: url(https://dzvpwvcpo1876.cloudfront.net/button-download-footer.svg);
width: 227px;
height: 82px;
display: block;
margin: 50px auto 0 auto;
text-indent: -1000px;
}
.footer-download:hover {
opacity: .75;
}
.logo {
background-image: url(https://s3.amazonaws.com/nweb.duolingo.com/images/icon-sprite.svg);
display: inline-block;
vertical-align: middle;
}
.duolingo.logo {
background-position: -144px 0;
height: 36px;
width: 142px;
background-size: 900px;
display: block;
float: left;
margin-top: 20px;
text-indent: -1000px;
}
.lockup {
float: left;
color: #ffffff;
display: block;
font-size: 24px;
font-weight: 300;
margin: 9px 0 0 20px;
padding: 12px 0 12px 20px;
border-left: 1px solid #ffffff;
vertical-align: middle;
}
/* Animations */
.chat-bubble {
position: absolute;
right: calc(10% + 267px);
bottom: 262px;
}
.chat-bubble .loading {
position: absolute;
z-index: 10;
width: 67px;
left: 0px;
top: 0px;
}
.chat-bubble .loading .dot {
height: 11px;
width: 11px;
border: 2px solid #f2f2f2;;
border-radius: 50%;
display: block;
float: left;
margin: 0 0 0 1px;
}
.chat-bubble .loading .dot:first-child {
margin: 0;
}
.chat-bubble .loading .dot.one {
-webkit-animation: cycleOne 1s ease-in-out infinite;
-webkit-animation-direction: normal;
}
.chat-bubble .loading .dot.two {
-webkit-animation: cycleTwo 1s ease-in-out infinite;
-webkit-animation-direction: normal;
}
.chat-bubble .loading .dot.three {
-webkit-animation: cycleThree 1s ease-in-out infinite;
-webkit-animation-direction: normal;
}
@-webkit-keyframes cycleOne {
0% {
background: #cccccc;
}
33.333% {
background: #969696;
}
66.6667% {
background: #cccccc;
}
100% {
background: r#cccccc;
}
}
@-webkit-keyframes cycleTwo {
0% {
background: #cccccc;
}
33.333% {
background: #cccccc;
}
66.6667% {
background: #969696;
}
100% {
background: #cccccc;
}
}
@-webkit-keyframes cycleThree {
0% {
background: #cccccc;
}
33.333% {
background: #cccccc;
}
66.6667% {
background: #cccccc;
}
100% {
background: #969696;
}
}
/* Media queries*/
@media screen and (max-width: 1000px) {
h2 {
font-size: 28px;
}
.progress.section, .tree.section, .bots.section, .footer.section {
padding: 0;
height: auto;
}
.container {
height: auto;
padding: 40px;
}
.topbar .container {
height: 100%;
padding: 0 40px;
overflow: initial;
}
.section.hero .container {
height: 100%;
padding: 0 40px;
}
.text {
padding: 0 20px;
}
.phone-img {
height: 350px;
background-size: 250px;
width: 250px;
}
.chat-bubble {
bottom: 172px;
right: calc(10% + 175px);
}
.chat-bubble .loading .dot {
height: 8px;
width: 8px;
margin: 0;
}
.new-bots {
margin: 0 auto 30px auto;
}
.col-3 {
padding: 15px;
vertical-align: top;
width: 49%;
}
.col-3:last-child {
width: 70%;
}
.bubble-tree {
width: 300px;
background-size: 300px;
height: 238px;
top: 0;
}
}
@media screen and (max-width: 700px) {
.container {
padding: 40px 20px;
}
.topbar .container {
padding: 0 20px;
}
.section.hero {
height: 450px;
padding: 0;
background-position: bottom;
}
.section.hero .container {
padding: 0 20px;
}
.text {
padding: 0;
}
.header-logo {
text-align: center;
}
.duolingo.logo {
background-position: -112px 0;
background-size: 700px;
height: 28px;
width: 110px;
float: none;
display: inline-block;
}
.lockup {
margin: 10px 0 0 10px;
padding: 8px 0 8px 10px;
font-size: 22px;
float: none;
display: inline-block;
}
.outline-btn {
position: absolute;
top: 280px;
left: 0;
right: 0;
display: block;
margin: 0 auto;
max-width: 280px;
background: #ffffff;
color: #1caff6;
z-index: 2;
}
.outline-btn:hover {
background: #ffffff;
opacity: .75;
}
h1 {
font-size: 30px;
margin-bottom: 15px;
margin-top: 30px;
text-shadow: -2px -2px 10px #1caff6;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 17px;
}
.subheader {
font-size: 20px;
}
.chatbot-illustration {
width: 250px;
background-size: 250px;
height: 160px;
}
.progress.section .text {
display: block;
margin-bottom: 200px;
width: 100%;
}
.tree.section .text {
display: block;
width: 100%;
margin-top: 30px;
}
.phone-img {
height: 230px;
background-size: 170px;
width: 170px;
left: 0;
right: 0;
margin: 0 auto;
}
.chat-bubble {
bottom: 109px;
right: calc(50% + 36px);
}
.chat-bubble .loading .dot {
height: 5px;
width: 5px;
margin: 0;
}
.footer.section li {
margin: 10px 15px;
}
.bot-wrapper {
margin: 0 -10px;
}
.col-3 {
padding: 7px;
}
.col-3 p {
font-size: 15px;
}
.bot {
width: 100px;
background-size: 100px;
height: 120px;
opacity: 1;
}
.image-container {
width: 100%;
}
.bubble-tree {
margin: 0 auto;
display: block;
}
}
@media (min-width: 700px) {
.progress.section .container {
min-height: 300;
}
.bot, .bubble-tree {
opacity: 0;
}
.bot.start{
animation: bot-animate-1 ease .5s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: bot-animate-1 ease .5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: bot-animate-1 ease .5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: bot-animate-1 ease .5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: bot-animate-1 ease .5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
-webkit-animation-delay: 400ms; /* Chrome, Safari, Opera */
animation-delay: 400ms;
}
.bot-2.start {
-webkit-animation-delay: 800ms; /* Chrome, Safari, Opera */
animation-delay: 800ms;
}
.bot-3.start {
-webkit-animation-delay: 1200ms; /* Chrome, Safari, Opera */
animation-delay: 1200ms;
}
@keyframes bot-animate-1{
0% {
opacity:0;
transform: translate(0px,100px) rotate(-60deg) ;
}
100% {
opacity:1;
transform: translate(0px,0px) rotate(0deg) ;
}
}
@-moz-keyframes bot-animate-1{
0% {
opacity:0;
-moz-transform: translate(0px,100px) rotate(-60deg) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
}
@-webkit-keyframes bot-animate-1 {
0% {
opacity:0;
-webkit-transform: translate(0px,100px) rotate(-60deg) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
}
@-o-keyframes bot-animate-1 {
0% {
opacity:0;
-o-transform: translate(0px,100px) rotate(-60deg) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) rotate(0deg) ;
}
}
@-ms-keyframes bot-animate-1 {
0% {
opacity:0;
-ms-transform: translate(0px,100px) rotate(-60deg) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
}
.bubble-tree.start{
animation: tree-animate ease-out .5s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: tree-animate ease-out .5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: tree-animate ease-out .5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: tree-animate ease-out .5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: tree-animate ease-out .5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
-webkit-animation-delay: 700ms; /* Chrome, Safari, Opera */
animation-delay: 1000ms;
}
@keyframes tree-animate{
0% {
opacity:0;
transform: translate(0px,20px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
@-moz-keyframes tree-animate{
0% {
opacity:0;
-moz-transform: translate(0px,20px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
@-webkit-keyframes tree-animate {
0% {
opacity:0;
-webkit-transform: translate(0px,20px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
@-o-keyframes tree-animate {
0% {
opacity:0;
-o-transform: translate(0px,20px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
@-ms-keyframes tree-animate {
0% {
opacity:0;
-ms-transform: translate(0px,20px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
}
