<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/seanchin/pen/RGgEAB?limit=all&page=42&q=coming+soon" />
<style class="cp-pen-styles">@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;
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;
}
.italics {
font-style: oblique;
}
.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: 530px;
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.8;
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: 380px;
padding: 60px 0 20px 0;
}
.footer.section h2 {
font-weight: 500;
}
.footer.section p {
color: #999999;
font-size: 17px;
font-weight: 300;
line-height: 1.6;
}
.footer.section ul {
list-style: none;
display: block;
font-size: 17px;
text-align: center;
margin-top: 80px;
padding: 0;
}
.footer.section li {
display: inline-block;
margin: 0 20px;
}
.footer.section a {
color: #999999;
}
.footer-text {
max-width: 600px;
margin: 50px auto 0 auto;
}
.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.8;
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;
border-radius: 40px;
}
.topbar-btn {
float: right;
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/phone1.svg);
background-size: 320px;
width: 320px;
height: 460px;
display: block;
position: absolute;
bottom: 0;
right: 15%;
}
.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;
}
.blue-app,
.white-app {
width: 170px;
height: 57px;
display: block;
text-indent: -10000px;
background-size: 170px;
}
.white-app {
background-image: url(https://dzvpwvcpo1876.cloudfront.net/white-app-store.svg);
}
.blue-app {
background-image: url(https://dzvpwvcpo1876.cloudfront.net/blue-app-store.svg);
margin: 40px auto 0 auto;
}
.blue-app:hover,
.white-app:hover {
cursor: pointer;
opacity: .8;
}
.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(15% + 224px);
bottom: 232px;
}
.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(150% + 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;
}
.white-app {
position: absolute;
top: 250px;
left: 0;
right: 0;
display: block;
margin: 0 auto;
max-width: 280px;
color: #1caff6;
z-index: 2;
}
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: 300px;
}
.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: 700ms;
}
@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);
}
}
}</style></head><body>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Duolingo Bots | Learn a Language with Conversational Bots</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 with Conversational Bots">
<meta name="twitter:description" content="Duolingo Bots - Practice without pressure. From grabbing a slice of pizza to hailing a taxi, Bots prepare you for real-life conversations — minus the awkwardness and anxiety. The hardest part of learning a new language just became easy.">
<meta name="twitter:image" content="http://pillow.duolingo.com/images/pillow-meta.png">
<meta property="og:title" content="Duolingo Bots | Learn a Language with Conversational Bots" />
<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="Duolingo Bots - Practice without pressure. From grabbing a slice of pizza to hailing a taxi, Bots prepare you for real-life conversations — minus the awkwardness and anxiety. The hardest part of learning a new language just became easy."
/>
<meta property="og:url" content="http://bots.duolingo.com">
<link rel="shortcut icon" href="https://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="white-app topbar-btn" href="http://apple.co/duolingo">Download on the App Store</a>
</div>
</div>
<div class="section hero">
<div class="container">
<h1>Say hello to the Bots.</h1>
<div class="subheader">The most advanced way to learn a language.</div>
<span class="chatbot-illustration"></span>
</div>
</div>
<div class="section progress">
<div class="container">
<div class="text">
<h2>Practice without pressure</h2>
<p>From grabbing a slice of pizza to hailing a taxi, Bots prepare you for real-life conversations — minus the awkwardness and anxiety.</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>A legendary pizza maker. Be careful not to insult his creations!</p>
</div>
<div class="col-3">
<span class="bot bot-2"></span>
<h3>Renée the Driver</h3>
<p>For what to see 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>Powered by A.I.</h2>
<p>Duolingo Bots are powered by artificial intelligence and react differently to thousands of different answers. Feeling stuck? Hit “help me reply” and they’ll come up with suggestions.</p>
<p>Best of all — the more you practice, the smarter they get.</p>
</div>
</div>
</div>
<div class="section footer">
<div class="container">
<h2 class="center">Try it out!</h2>
<a class="blue-app" href="http://apple.co/duolingo">Avalabile in the Duolingo App</a>
<p class="center footer-text">Currently available for Duolingo’s Spanish, French and German courses. Other languages coming soon!</p>
<ul>
<li><a href="https://duolingo.com">Duolingo</a></li>
<li><a href="https://www.duolingo.com/design/assets.zip">Press Kit</a></li>
<li><a href="https://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>
</body></html>
