"layout"
Bootstrap 4.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: