1. Choose Words You Want to Learn
+Select words you want to learn based on your life and interests
+diff --git a/css/index.css b/css/index.css index 805a30a..fb2e931 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1 @@ -.header{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:15px;}@media (min-width:600px){.header{gap:15px}}@media (min-width:1200px){.header{gap:5px}}.header .wordmark{color:#f4e3b7;font-size:38px;font-family:'Titan One';font-weight:normal;margin:0;text-shadow:0 2px 2px rgba(20,0,20,0.15);text-transform:uppercase;}@media (min-width:600px){.header .wordmark{font-size:42px;line-height:56px}}@media (min-width:1200px){.header .wordmark{font-size:60px;margin-right:30px}}.header .logo{object-fit:contain;max-width:48px;}@media (min-width:600px){.header .logo{max-width:60px}}@media (min-width:1200px){.header .logo{max-width:100px;width:100px}}section.hero{background:radial-gradient(50% 50% at 50% 50%,#d4c3e6 0%,#e2cff7 100%);padding-top:0;z-index:20;}section.hero .wave path{fill:#e2cff7}section.hero .sectionInner{padding-bottom:20px;}@media (min-width:1200px){section.hero .sectionInner{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-left:30px;padding-right:30px;padding-bottom:100px;padding-top:100px;width:calc(100% - 60px)}}section.hero .heroContent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:100%;gap:15px;}@media (min-width:600px){section.hero .heroContent{gap:20px}}@media (min-width:1200px){section.hero .heroContent{bottom:20px;margin:0 100px 0 20px;position:relative;gap:30px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:600px;max-width:100%;margin-right:-50px;margin-bottom:-40px;position:relative;right:60px;}@media (min-width:1200px){section.hero img.hero.heroImgDesktop{display:inline-block}}@media (min-width:1600px){section.hero img.hero.heroImgDesktop{right:0}}section.hero img.hero.heroImgMobile{display:inline-block;object-fit:contain;max-height:400px;max-width:100%;}@media (min-width:600px){section.hero img.hero.heroImgMobile{max-height:500px}}@media (min-width:1200px){section.hero img.hero.heroImgMobile{display:none}}section.hero .title{color:#fafafa;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);}@media (min-width:600px){section.hero .title{font-size:36px}}@media (min-width:1200px){section.hero .title{font-size:42px}}section.hero .subtitle{font-size:16px;max-width:100%;text-align:center;opacity:.75 !important;}@media (min-width:600px){section.hero .subtitle{font-size:22px}}@media (min-width:1200px){section.hero .subtitle{margin-bottom:10px;margin-top:-20px}}section.hero .appStoreButtons{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:20px;}section.hero .appStoreButtons a{display:inline-block;position:relative;}section.hero .appStoreButtons a img{height:auto;width:150px;object-fit:contain;}@media (min-width:600px){section.hero .appStoreButtons a img{width:180px}}@media (min-width:1200px){section.hero .appStoreButtons a img{width:200px}}section.hero .additionalLinks{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;padding-top:30px;}section.hero .additionalLinks .button{font-family:'Raleway'}@media (min-width:1200px){section.hero .additionalLinks{-ms-flex-direction:row;flex-direction:row;padding-top:10px;opacity:.9}}section.hero .additionalLinks a{width:80%;}@media (min-width:1200px){section.hero .additionalLinks a{width:auto}}section.intro{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:6;}section.intro .wave path{fill:#ffedbd}section.intro a{text-decoration:underline}section.partner{background:radial-gradient(50% 50% at 50% 50%,#f7b8b5 0%,#f8bfbc 100%);z-index:5;}section.partner .wave path{fill:#f8bfbc}section.partner a{text-decoration:underline}section.flashcard{background:radial-gradient(50% 50% at 50% 50%,#9adefe 0%,#a8e3ff 100%);z-index:4;}section.flashcard .wave path{fill:#a8e3ff}section.flashcard a{text-decoration:underline}section.path{background:radial-gradient(50% 50% at 50% 50%,#bdedb6 0%,#c4efbd 100%);z-index:3;}section.path .wave path{fill:#c4efbd}section.path a{text-decoration:underline}section.blogSection{background:radial-gradient(50% 50% at 50% 50%,#558 0%,#60609a 100%);z-index:1;}section.blogSection .wave path{fill:#60609a}section.blogSection h3{color:#fafafa}section.blogSection .blog{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;margin-top:0;max-width:1024px;width:100%;}@media (min-width:600px){section.blogSection .blog{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}section.blogSection .blog li{-ms-flex-align:center;align-items:center;box-shadow:0 1px 1px rgba(0,0,0,0.1);border-radius:5px 2px 5px 2px;display:-ms-flexbox;display:flex;height:320px;margin:0;overflow:hidden;position:relative;width:480px;max-width:100%;}section.blogSection .blog li:hover .wave path{fill:#f7b8b5}section.blogSection .blog li .wave{bottom:50px;box-shadow:none;left:0;right:0;margin:0 auto;transform:scaleX(5) scaleY(.5) rotate(180deg);z-index:55;}section.blogSection .blog li .wave path{fill:rgba(247,184,181,0.95);transition:fill .2s}section.blogSection .blog .blogImage{background:#f4e3b7;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.1);display:inline-block;margin:0;position:relative;transform:scale(1);transition:all .15s;height:100%;width:100%;}section.blogSection .blog .blogImage:hover .blogOverlay{background:#f7b8b5}section.blogSection .blog .blogImage img{object-fit:cover;width:100%;height:100%}section.blogSection .blog .blogOverlay{-ms-flex-align:start;align-items:flex-start;background:rgba(247,184,181,0.95);border-radius:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;padding:5px 10px 10px 15px;position:absolute;transition:background .2s;width:100%;}@media (min-width:600px){section.blogSection .blog .blogOverlay{padding:5px 15px 10px 20px}}section.blogSection .blog .blogOverlay p{color:#444;font-size:14px;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap}section.blogSection .blog .blogOverlay h3{color:#444;font-size:18px;font-weight:normal;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap;}@media (min-width:1200px){section.blogSection .blog .blogOverlay h3{font-size:18px}}section.blogSection .blog .blogOverlay a{text-shadow:none;}section.blogSection .blog .blogOverlay a img{position:absolute;bottom:0;left:0;margin:0 auto;position:absolute;right:0;text-align:center;background:none;border-radius:2px;z-index:0}section.about{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:0;}section.about .wave path{fill:#ffedbd}section.about p{line-height:2;text-align:center}section.about img{border-radius:200px;height:200px;width:200px;box-shadow:0 1px 1px rgba(0,0,0,0.1)}section.about a{color:#333;font-weight:bold}html{background:#d4c3e6;padding:0}html,body{color:#333;font-weight:500;height:100%;margin:0;overflow-x:hidden;position:relative;width:100%}body{font-family:'Raleway',sans-serif;opacity:0;padding:0;transition:opacity .25s;}body.loaded{opacity:1 !important}ol{padding-left:20px}ul{list-style:none;padding:0;}ul li{margin:10px 0}b,p,li{font-size:16px;line-height:1.5;margin:0;max-width:768px;}@media (min-width:600px){b,p,li{font-size:18px}}@media (min-width:1200px){b,p,li{font-size:20px;line-height:36px;text-align:justify}}a{color:#333;font-weight:bold;text-decoration:none;transition:all .2s;}a:hover:not(.button){text-decoration:underline}h1,h2,h3{color:#3a303a;font-family:'Fredoka One',sans-serif;font-weight:normal;margin:0;}h1 i,h2 i,h3 i{display:inline-block;margin-right:10px}h3{font-size:24px;line-height:28px;text-align:center;}@media (min-width:600px){h3{font-size:28px;line-height:42px}}@media (max-width:1199px){h3{margin-top:0}}button,.button,input[type="submit"]{background:#9adefe;backface-visibility:hidden;border:0;border-radius:50px;box-shadow:0 1px 1px rgba(0,0,0,0.1);font-family:'Fredoka One';font-weight:400;color:#333;cursor:pointer;display:inline-block;font-size:18px;max-width:768px;transform:none;transition:all .2s;padding:15px 25px 15px 25px;text-decoration:none;transform:none;vertical-align:middle;}button:focus,.button:focus,input[type="submit"]:focus,button:hover,.button:hover,input[type="submit"]:hover{box-shadow:0 6px 6px rgba(0,0,0,0.2);transform:translate3d(-2px,-2px,0)}button:active,.button:active,input[type="submit"]:active{box-shadow:0 2px 2px rgba(0,0,0,0.3);transform:none}button[disabled],.button[disabled],input[type="submit"][disabled]{pointer-events:none}button:hover,.button:hover,input[type="submit"]:hover{background:#aee5fe}button:active,.button:active,input[type="submit"]:active{background:#86d7fe}button.green,.button.green,input[type="submit"].green{background:#bdedb6;}button.green:hover,.button.green:hover,input[type="submit"].green:hover{background:#caf1c5}button.green:active,.button.green:active,input[type="submit"].green:active{background:#aee9a5}button.purple,.button.purple,input[type="submit"].purple{background:#d4c3e6;}button.purple:hover,.button.purple:hover,input[type="submit"].purple:hover{background:#ddcfeb}button.purple:active,.button.purple:active,input[type="submit"].purple:active{background:#c9b4e0}button i,.button i,input[type="submit"] i{margin-right:5px}input[type="email"],input[type="text"]{background:#fafafa;border:0;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.1);color:#333;font-family:'Font Awesome 5 Pro','Raleway';font-size:18px;height:50px;transform:none;transition:all .2s;margin-bottom:15px;max-width:768px;text-align:center;transition:all .2s;vertical-align:middle}input[type="email"]:focus,input[type="text"]:focus,input[type="email"]:hover,input[type="text"]:hover{box-shadow:0 6px 6px rgba(0,0,0,0.2);transform:translate3d(-2px,-2px,0)}input[type="email"]:active,input[type="text"]:active{box-shadow:0 2px 2px rgba(0,0,0,0.3);transform:none}ul.bulletPoints{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;margin-top:0;}ul.bulletPoints li{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;text-align:left;}@media (min-width:1200px){ul.bulletPoints li{margin:15px 0}}ul.bulletPoints li i{color:#333;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);margin-right:15px;min-width:30px;text-align:center;}@media (min-width:600px){ul.bulletPoints li i{margin-right:30px}}@media (min-width:1200px){ul.bulletPoints li i{font-size:34px;margin-right:40px;width:30px}}#container{height:100%;width:100%}section{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;position:relative;padding-top:50px;text-align:center;width:100%;max-width:100%;}@media (min-width:600px){section{padding-top:60px}}@media (min-width:1200px){section{padding-top:80px}section:not(.hero){padding-bottom:20px}}.sectionInner{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;padding:20px 0;width:calc(100% - 20px);max-width:100%;}.sectionInner h3 + p{margin-top:5px}.sectionInner > p{text-align:justify}@media (min-width:600px){.sectionInner{gap:30px;padding:30px 0}}.sectionInner img + div > p:first-child{margin-top:0;}@media (min-width:1200px){.sectionInner img + div > p:first-child{margin-top:22px}}.sectionInner .sectionInnerColumns{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:20px;}@media (min-width:1200px){.sectionInner .sectionInnerColumns{gap:40px}}.sectionInner .sectionInnerColumns img{object-fit:contain;margin-bottom:10px;max-width:640px;max-height:640px;}@media (max-width:1199px){.sectionInner .sectionInnerColumns img{max-height:480px;max-width:100%}}.sectionInner .sectionInnerColumns > div{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;gap:20px;}@media (min-width:600px){.sectionInner .sectionInnerColumns > div{gap:30px}}.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-family:'Fredoka One';font-size:18px;}@media (min-width:600px){.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:20px}}@media (min-width:1200px){.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:22px}}@media (min-width:1200px){.sectionInner .sectionInnerColumns{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:nowrap;flex-wrap:nowrap}}@media (min-width:1200px){section:nth-child(odd) .sectionInnerColumns{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.wave{bottom:0;position:absolute;transform:scaleX(5) translateY(35px);height:40px;}@media (min-width:600px){.wave{height:50px;transform:scaleX(10) translateY(45px)}}@media (min-width:1200px){.wave{transform:scaleX(15) translateY(45px)}}.button.ctaButton{background:#bdedb6;}.button.ctaButton:hover{background:#c4efbd}.footer{background:#f7b8b5;padding-bottom:40px;text-align:center;}.footer > div{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;padding:80px 0 30px 0;width:100%;z-index:-1;}.footer > div a{font-size:36px;cursor:pointer;color:#fafafa;margin:0 15px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}.footer > div svg{fill:#fafafa;height:40px;width:40px}.footer .privacy{color:#333;font-size:14px;font-style:italic;margin:0 auto;padding:10px 0;width:100%} \ No newline at end of file +section.hero{background:radial-gradient(50% 50% at 50% 50%,#d4c3e6 0%,#e2cff7 100%);padding-top:0;z-index:20;}section.hero .wave path{fill:#e2cff7}section.hero .header{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:15px;}@media (min-width:600px){section.hero .header{gap:15px}}@media (min-width:1200px){section.hero .header{gap:5px}}section.hero .header .wordmark{color:#f4e3b7;font-size:38px;font-family:'Titan One';font-weight:normal;margin:0;text-shadow:0 2px 2px rgba(20,0,20,0.15);text-transform:uppercase;}@media (min-width:600px){section.hero .header .wordmark{font-size:42px;line-height:56px}}@media (min-width:1200px){section.hero .header .wordmark{font-size:60px;margin-right:30px}}section.hero .header .logo{object-fit:contain;max-width:48px;}@media (min-width:600px){section.hero .header .logo{max-width:60px}}@media (min-width:1200px){section.hero .header .logo{max-width:100px;width:100px}}section.hero .sectionInner{padding-bottom:20px;}@media (min-width:1200px){section.hero .sectionInner{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-left:30px;padding-right:30px;padding-bottom:100px;padding-top:100px;width:calc(100% - 60px)}}section.hero .heroContent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:100%;gap:15px;}@media (min-width:600px){section.hero .heroContent{gap:20px}}@media (min-width:1200px){section.hero .heroContent{bottom:20px;margin:0 100px 0 20px;position:relative;gap:30px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:600px;max-width:100%;margin-right:-50px;margin-bottom:-40px;position:relative;right:60px;}@media (min-width:1200px){section.hero img.hero.heroImgDesktop{display:inline-block}}@media (min-width:1600px){section.hero img.hero.heroImgDesktop{right:0}}section.hero img.hero.heroImgMobile{display:inline-block;object-fit:contain;max-height:400px;max-width:100%;}@media (min-width:600px){section.hero img.hero.heroImgMobile{max-height:500px}}@media (min-width:1200px){section.hero img.hero.heroImgMobile{display:none}}section.hero .title{color:#fafafa;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);}@media (min-width:600px){section.hero .title{font-size:36px}}@media (min-width:1200px){section.hero .title{font-size:42px}}section.hero .subtitle{font-size:16px;max-width:100%;text-align:center;opacity:.75 !important;}@media (min-width:600px){section.hero .subtitle{font-size:22px}}@media (min-width:1200px){section.hero .subtitle{margin-bottom:10px;margin-top:-20px}}section.hero .appStoreButtons{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:20px;}section.hero .appStoreButtons a{display:inline-block;position:relative;}section.hero .appStoreButtons a img{height:auto;width:150px;object-fit:contain;}@media (min-width:600px){section.hero .appStoreButtons a img{width:180px}}@media (min-width:1200px){section.hero .appStoreButtons a img{width:200px}}section.howItWorks{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:10;}section.howItWorks .wave path{fill:#ffedbd}section.howItWorks ul.howItWorksItems{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;margin:0 10px;gap:30px;}@media (min-width:1200px){section.howItWorks ul.howItWorksItems{-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:space-evenly;justify-content:space-evenly;margin:0 50px;gap:40px}}section.howItWorks ul.howItWorksItems li{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex:1;flex:1;gap:15px;}@media (min-width:1200px){section.howItWorks ul.howItWorksItems li{gap:30px;-ms-flex-align:center;align-items:center}}section.howItWorks ul.howItWorksItems li .text{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;}section.howItWorks ul.howItWorksItems li .text h4{font-size:20px}section.howItWorks ul.howItWorksItems li .text p{text-align:center}section.howItWorks ul.howItWorksItems li .text i{color:#333;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);margin-right:15px;min-width:30px;text-align:center}section.howItWorks ul.howItWorksItems li img{margin:0 auto;max-height:320px;}@media (min-width:1200px){section.howItWorks ul.howItWorksItems li img{max-height:auto;max-width:80%}}section.intro{background:radial-gradient(50% 50% at 50% 50%,#bdedb6 0%,#c4efbd 100%);z-index:6;}section.intro .wave path{fill:#c4efbd}section.intro a{text-decoration:underline}section.partner{background:radial-gradient(50% 50% at 50% 50%,#f7b8b5 0%,#f8bfbc 100%);z-index:5;}section.partner .wave path{fill:#f8bfbc}section.partner a{text-decoration:underline}section.flashcard{background:radial-gradient(50% 50% at 50% 50%,#9adefe 0%,#a8e3ff 100%);z-index:4;}section.flashcard .wave path{fill:#a8e3ff}section.flashcard a{text-decoration:underline}section.path{background:radial-gradient(50% 50% at 50% 50%,#bdedb6 0%,#c4efbd 100%);z-index:3;}section.path .wave path{fill:#c4efbd}section.path a{text-decoration:underline}section.blogSection{background:radial-gradient(50% 50% at 50% 50%,#558 0%,#60609a 100%);z-index:1;}section.blogSection .wave path{fill:#60609a}section.blogSection h3{color:#fafafa}section.blogSection .blog{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;margin-top:0;max-width:1024px;width:100%;}@media (min-width:600px){section.blogSection .blog{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}section.blogSection .blog li{-ms-flex-align:center;align-items:center;box-shadow:0 1px 1px rgba(0,0,0,0.1);border-radius:5px 2px 5px 2px;display:-ms-flexbox;display:flex;height:320px;margin:0;overflow:hidden;position:relative;width:480px;max-width:100%;}section.blogSection .blog li:hover .wave path{fill:#f7b8b5}section.blogSection .blog li .wave{bottom:50px;box-shadow:none;left:0;right:0;margin:0 auto;transform:scaleX(5) scaleY(.5) rotate(180deg);z-index:55;}section.blogSection .blog li .wave path{fill:rgba(247,184,181,0.95);transition:fill .2s}section.blogSection .blog .blogImage{background:#f4e3b7;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.1);display:inline-block;margin:0;position:relative;transform:scale(1);transition:all .15s;height:100%;width:100%;}section.blogSection .blog .blogImage:hover .blogOverlay{background:#f7b8b5}section.blogSection .blog .blogImage img{object-fit:cover;width:100%;height:100%}section.blogSection .blog .blogOverlay{-ms-flex-align:start;align-items:flex-start;background:rgba(247,184,181,0.95);border-radius:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;padding:5px 10px 10px 15px;position:absolute;transition:background .2s;width:100%;}@media (min-width:600px){section.blogSection .blog .blogOverlay{padding:5px 15px 10px 20px}}section.blogSection .blog .blogOverlay p{color:#444;font-size:14px;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap}section.blogSection .blog .blogOverlay h3{color:#444;font-size:18px;font-weight:normal;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap;}@media (min-width:1200px){section.blogSection .blog .blogOverlay h3{font-size:18px}}section.blogSection .blog .blogOverlay a{text-shadow:none;}section.blogSection .blog .blogOverlay a img{position:absolute;bottom:0;left:0;margin:0 auto;position:absolute;right:0;text-align:center;background:none;border-radius:2px;z-index:0}section.about{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:0;}section.about .wave path{fill:#ffedbd}section.about p{line-height:2;text-align:center}section.about img{border-radius:200px;height:200px;width:200px;box-shadow:0 1px 1px rgba(0,0,0,0.1)}section.about a{color:#333;font-weight:bold}html{background:#d4c3e6;padding:0}html,body{color:#333;font-weight:500;height:100%;margin:0;overflow-x:hidden;position:relative;width:100%}body{font-family:'Raleway',sans-serif;opacity:0;padding:0;transition:opacity .25s;}body.loaded{opacity:1 !important}ol{padding-left:20px}ul{list-style:none;padding:0;}ul li{margin:10px 0}b,p,li{font-size:16px;line-height:1.5;margin:0;max-width:768px;}@media (min-width:600px){b,p,li{font-size:18px}}@media (min-width:1200px){b,p,li{font-size:20px;line-height:36px;text-align:justify}}a{color:#333;font-weight:bold;text-decoration:none;transition:all .2s;}a:hover:not(.button){text-decoration:underline}h1,h2,h3,h4{color:#3a303a;font-family:'Fredoka One',sans-serif,sans-serif;font-weight:normal;margin:0;}h1 i,h2 i,h3 i,h4 i{display:inline-block;margin-right:10px}h3{font-size:24px;line-height:28px;text-align:center;}@media (min-width:600px){h3{font-size:28px;line-height:42px}}@media (max-width:1199px){h3{margin-top:0}}button,.button,input[type="submit"]{background:#9adefe;backface-visibility:hidden;border:0;border-radius:50px;box-shadow:0 1px 1px rgba(0,0,0,0.1);font-family:'Fredoka One',sans-serif;font-weight:400;color:#333;cursor:pointer;display:inline-block;font-size:18px;max-width:768px;transform:none;transition:all .2s;padding:15px 25px 15px 25px;text-decoration:none;transform:none;vertical-align:middle;}button:focus,.button:focus,input[type="submit"]:focus,button:hover,.button:hover,input[type="submit"]:hover{box-shadow:0 6px 6px rgba(0,0,0,0.2);transform:translate3d(-2px,-2px,0)}button:active,.button:active,input[type="submit"]:active{box-shadow:0 2px 2px rgba(0,0,0,0.3);transform:none}button[disabled],.button[disabled],input[type="submit"][disabled]{pointer-events:none}button:hover,.button:hover,input[type="submit"]:hover{background:#aee5fe}button:active,.button:active,input[type="submit"]:active{background:#86d7fe}button.green,.button.green,input[type="submit"].green{background:#bdedb6;}button.green:hover,.button.green:hover,input[type="submit"].green:hover{background:#caf1c5}button.green:active,.button.green:active,input[type="submit"].green:active{background:#aee9a5}button.purple,.button.purple,input[type="submit"].purple{background:#d4c3e6;}button.purple:hover,.button.purple:hover,input[type="submit"].purple:hover{background:#ddcfeb}button.purple:active,.button.purple:active,input[type="submit"].purple:active{background:#c9b4e0}button i,.button i,input[type="submit"] i{margin-right:5px}input[type="email"],input[type="text"]{background:#fafafa;border:0;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.1);color:#333;font-family:'Font Awesome 5 Pro','Raleway';font-size:18px;height:50px;transform:none;transition:all .2s;margin-bottom:15px;max-width:768px;text-align:center;transition:all .2s;vertical-align:middle}input[type="email"]:focus,input[type="text"]:focus,input[type="email"]:hover,input[type="text"]:hover{box-shadow:0 6px 6px rgba(0,0,0,0.2);transform:translate3d(-2px,-2px,0)}input[type="email"]:active,input[type="text"]:active{box-shadow:0 2px 2px rgba(0,0,0,0.3);transform:none}ul.bulletPoints{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;margin-top:0;}ul.bulletPoints li{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;text-align:left;}@media (min-width:1200px){ul.bulletPoints li{margin:15px 0}}ul.bulletPoints li i{color:#333;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);margin-right:15px;min-width:30px;text-align:center;}@media (min-width:600px){ul.bulletPoints li i{margin-right:30px}}@media (min-width:1200px){ul.bulletPoints li i{font-size:34px;margin-right:40px;width:30px}}#container{height:100%;width:100%}section{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;position:relative;padding-top:50px;text-align:center;width:100%;max-width:100%;}@media (min-width:600px){section{padding-top:60px}}@media (min-width:1200px){section{padding-top:80px}section:not(.hero){padding-bottom:20px}}.sectionInner{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;padding:20px 0;width:calc(100% - 20px);max-width:100%;}.sectionInner h3 + p{margin-top:5px}.sectionInner > p{text-align:justify}@media (min-width:600px){.sectionInner{gap:30px;padding:30px 0}}.sectionInner img + div > p:first-child{margin-top:0;}@media (min-width:1200px){.sectionInner img + div > p:first-child{margin-top:22px}}.sectionInner .sectionInnerColumns{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:20px;}@media (min-width:1200px){.sectionInner .sectionInnerColumns{gap:40px}}.sectionInner .sectionInnerColumns img{object-fit:contain;margin-bottom:10px;max-width:640px;max-height:640px;}@media (max-width:1199px){.sectionInner .sectionInnerColumns img{max-height:480px;max-width:100%}}.sectionInner .sectionInnerColumns > div{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;gap:20px;}@media (min-width:600px){.sectionInner .sectionInnerColumns > div{gap:30px}}.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-family:'Fredoka One',sans-serif;font-size:18px;}@media (min-width:600px){.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:20px}}@media (min-width:1200px){.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:22px}}@media (min-width:1200px){.sectionInner .sectionInnerColumns{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:nowrap;flex-wrap:nowrap}}@media (min-width:1200px){section:nth-child(odd) .sectionInnerColumns{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.wave{bottom:0;position:absolute;transform:scaleX(5) translateY(35px);height:40px;}@media (min-width:600px){.wave{height:50px;transform:scaleX(10) translateY(45px)}}@media (min-width:1200px){.wave{transform:scaleX(15) translateY(45px)}}.button.ctaButton{background:#bdedb6;}.button.ctaButton:hover{background:#c4efbd}.footer{background:#f7b8b5;padding-bottom:40px;text-align:center;}.footer > div{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;padding:80px 0 30px 0;width:100%;z-index:-1;}.footer > div a{font-size:36px;cursor:pointer;color:#fafafa;margin:0 15px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}.footer > div svg{fill:#fafafa;height:40px;width:40px}.footer .privacy{color:#333;font-size:14px;font-style:italic;margin:0 auto;padding:10px 0;width:100%} \ No newline at end of file diff --git a/css/sections.css b/css/sections.css index 6e89062..2152b29 100644 --- a/css/sections.css +++ b/css/sections.css @@ -1 +1 @@ -.header{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:15px;}@media (min-width:600px){.header{gap:15px}}@media (min-width:1200px){.header{gap:5px}}.header .wordmark{color:#f4e3b7;font-size:38px;font-family:'Titan One';font-weight:normal;margin:0;text-shadow:0 2px 2px rgba(20,0,20,0.15);text-transform:uppercase;}@media (min-width:600px){.header .wordmark{font-size:42px;line-height:56px}}@media (min-width:1200px){.header .wordmark{font-size:60px;margin-right:30px}}.header .logo{object-fit:contain;max-width:48px;}@media (min-width:600px){.header .logo{max-width:60px}}@media (min-width:1200px){.header .logo{max-width:100px;width:100px}}section.hero{background:radial-gradient(50% 50% at 50% 50%,#d4c3e6 0%,#e2cff7 100%);padding-top:0;z-index:20;}section.hero .wave path{fill:#e2cff7}section.hero .sectionInner{padding-bottom:20px;}@media (min-width:1200px){section.hero .sectionInner{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-left:30px;padding-right:30px;padding-bottom:100px;padding-top:100px;width:calc(100% - 60px)}}section.hero .heroContent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:100%;gap:15px;}@media (min-width:600px){section.hero .heroContent{gap:20px}}@media (min-width:1200px){section.hero .heroContent{bottom:20px;margin:0 100px 0 20px;position:relative;gap:30px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:600px;max-width:100%;margin-right:-50px;margin-bottom:-40px;position:relative;right:60px;}@media (min-width:1200px){section.hero img.hero.heroImgDesktop{display:inline-block}}@media (min-width:1600px){section.hero img.hero.heroImgDesktop{right:0}}section.hero img.hero.heroImgMobile{display:inline-block;object-fit:contain;max-height:400px;max-width:100%;}@media (min-width:600px){section.hero img.hero.heroImgMobile{max-height:500px}}@media (min-width:1200px){section.hero img.hero.heroImgMobile{display:none}}section.hero .title{color:#fafafa;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);}@media (min-width:600px){section.hero .title{font-size:36px}}@media (min-width:1200px){section.hero .title{font-size:42px}}section.hero .subtitle{font-size:16px;max-width:100%;text-align:center;opacity:.75 !important;}@media (min-width:600px){section.hero .subtitle{font-size:22px}}@media (min-width:1200px){section.hero .subtitle{margin-bottom:10px;margin-top:-20px}}section.hero .appStoreButtons{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:20px;}section.hero .appStoreButtons a{display:inline-block;position:relative;}section.hero .appStoreButtons a img{height:auto;width:150px;object-fit:contain;}@media (min-width:600px){section.hero .appStoreButtons a img{width:180px}}@media (min-width:1200px){section.hero .appStoreButtons a img{width:200px}}section.hero .additionalLinks{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;padding-top:30px;}section.hero .additionalLinks .button{font-family:'Raleway'}@media (min-width:1200px){section.hero .additionalLinks{-ms-flex-direction:row;flex-direction:row;padding-top:10px;opacity:.9}}section.hero .additionalLinks a{width:80%;}@media (min-width:1200px){section.hero .additionalLinks a{width:auto}}section.intro{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:6;}section.intro .wave path{fill:#ffedbd}section.intro a{text-decoration:underline}section.partner{background:radial-gradient(50% 50% at 50% 50%,#f7b8b5 0%,#f8bfbc 100%);z-index:5;}section.partner .wave path{fill:#f8bfbc}section.partner a{text-decoration:underline}section.flashcard{background:radial-gradient(50% 50% at 50% 50%,#9adefe 0%,#a8e3ff 100%);z-index:4;}section.flashcard .wave path{fill:#a8e3ff}section.flashcard a{text-decoration:underline}section.path{background:radial-gradient(50% 50% at 50% 50%,#bdedb6 0%,#c4efbd 100%);z-index:3;}section.path .wave path{fill:#c4efbd}section.path a{text-decoration:underline}section.blogSection{background:radial-gradient(50% 50% at 50% 50%,#558 0%,#60609a 100%);z-index:1;}section.blogSection .wave path{fill:#60609a}section.blogSection h3{color:#fafafa}section.blogSection .blog{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;margin-top:0;max-width:1024px;width:100%;}@media (min-width:600px){section.blogSection .blog{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}section.blogSection .blog li{-ms-flex-align:center;align-items:center;box-shadow:0 1px 1px rgba(0,0,0,0.1);border-radius:5px 2px 5px 2px;display:-ms-flexbox;display:flex;height:320px;margin:0;overflow:hidden;position:relative;width:480px;max-width:100%;}section.blogSection .blog li:hover .wave path{fill:#f7b8b5}section.blogSection .blog li .wave{bottom:50px;box-shadow:none;left:0;right:0;margin:0 auto;transform:scaleX(5) scaleY(.5) rotate(180deg);z-index:55;}section.blogSection .blog li .wave path{fill:rgba(247,184,181,0.95);transition:fill .2s}section.blogSection .blog .blogImage{background:#f4e3b7;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.1);display:inline-block;margin:0;position:relative;transform:scale(1);transition:all .15s;height:100%;width:100%;}section.blogSection .blog .blogImage:hover .blogOverlay{background:#f7b8b5}section.blogSection .blog .blogImage img{object-fit:cover;width:100%;height:100%}section.blogSection .blog .blogOverlay{-ms-flex-align:start;align-items:flex-start;background:rgba(247,184,181,0.95);border-radius:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;padding:5px 10px 10px 15px;position:absolute;transition:background .2s;width:100%;}@media (min-width:600px){section.blogSection .blog .blogOverlay{padding:5px 15px 10px 20px}}section.blogSection .blog .blogOverlay p{color:#444;font-size:14px;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap}section.blogSection .blog .blogOverlay h3{color:#444;font-size:18px;font-weight:normal;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap;}@media (min-width:1200px){section.blogSection .blog .blogOverlay h3{font-size:18px}}section.blogSection .blog .blogOverlay a{text-shadow:none;}section.blogSection .blog .blogOverlay a img{position:absolute;bottom:0;left:0;margin:0 auto;position:absolute;right:0;text-align:center;background:none;border-radius:2px;z-index:0}section.about{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:0;}section.about .wave path{fill:#ffedbd}section.about p{line-height:2;text-align:center}section.about img{border-radius:200px;height:200px;width:200px;box-shadow:0 1px 1px rgba(0,0,0,0.1)}section.about a{color:#333;font-weight:bold} \ No newline at end of file +section.hero{background:radial-gradient(50% 50% at 50% 50%,#d4c3e6 0%,#e2cff7 100%);padding-top:0;z-index:20;}section.hero .wave path{fill:#e2cff7}section.hero .header{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:15px;}@media (min-width:600px){section.hero .header{gap:15px}}@media (min-width:1200px){section.hero .header{gap:5px}}section.hero .header .wordmark{color:#f4e3b7;font-size:38px;font-family:'Titan One';font-weight:normal;margin:0;text-shadow:0 2px 2px rgba(20,0,20,0.15);text-transform:uppercase;}@media (min-width:600px){section.hero .header .wordmark{font-size:42px;line-height:56px}}@media (min-width:1200px){section.hero .header .wordmark{font-size:60px;margin-right:30px}}section.hero .header .logo{object-fit:contain;max-width:48px;}@media (min-width:600px){section.hero .header .logo{max-width:60px}}@media (min-width:1200px){section.hero .header .logo{max-width:100px;width:100px}}section.hero .sectionInner{padding-bottom:20px;}@media (min-width:1200px){section.hero .sectionInner{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-left:30px;padding-right:30px;padding-bottom:100px;padding-top:100px;width:calc(100% - 60px)}}section.hero .heroContent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:100%;gap:15px;}@media (min-width:600px){section.hero .heroContent{gap:20px}}@media (min-width:1200px){section.hero .heroContent{bottom:20px;margin:0 100px 0 20px;position:relative;gap:30px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:600px;max-width:100%;margin-right:-50px;margin-bottom:-40px;position:relative;right:60px;}@media (min-width:1200px){section.hero img.hero.heroImgDesktop{display:inline-block}}@media (min-width:1600px){section.hero img.hero.heroImgDesktop{right:0}}section.hero img.hero.heroImgMobile{display:inline-block;object-fit:contain;max-height:400px;max-width:100%;}@media (min-width:600px){section.hero img.hero.heroImgMobile{max-height:500px}}@media (min-width:1200px){section.hero img.hero.heroImgMobile{display:none}}section.hero .title{color:#fafafa;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);}@media (min-width:600px){section.hero .title{font-size:36px}}@media (min-width:1200px){section.hero .title{font-size:42px}}section.hero .subtitle{font-size:16px;max-width:100%;text-align:center;opacity:.75 !important;}@media (min-width:600px){section.hero .subtitle{font-size:22px}}@media (min-width:1200px){section.hero .subtitle{margin-bottom:10px;margin-top:-20px}}section.hero .appStoreButtons{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:20px;}section.hero .appStoreButtons a{display:inline-block;position:relative;}section.hero .appStoreButtons a img{height:auto;width:150px;object-fit:contain;}@media (min-width:600px){section.hero .appStoreButtons a img{width:180px}}@media (min-width:1200px){section.hero .appStoreButtons a img{width:200px}}section.howItWorks{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:10;}section.howItWorks .wave path{fill:#ffedbd}section.howItWorks ul.howItWorksItems{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;margin:0 10px;gap:30px;}@media (min-width:1200px){section.howItWorks ul.howItWorksItems{-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:space-evenly;justify-content:space-evenly;margin:0 50px;gap:40px}}section.howItWorks ul.howItWorksItems li{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex:1;flex:1;gap:15px;}@media (min-width:1200px){section.howItWorks ul.howItWorksItems li{gap:30px;-ms-flex-align:center;align-items:center}}section.howItWorks ul.howItWorksItems li .text{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;}section.howItWorks ul.howItWorksItems li .text h4{font-size:20px}section.howItWorks ul.howItWorksItems li .text p{text-align:center}section.howItWorks ul.howItWorksItems li .text i{color:#333;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);margin-right:15px;min-width:30px;text-align:center}section.howItWorks ul.howItWorksItems li img{margin:0 auto;max-height:320px;}@media (min-width:1200px){section.howItWorks ul.howItWorksItems li img{max-height:auto;max-width:80%}}section.intro{background:radial-gradient(50% 50% at 50% 50%,#bdedb6 0%,#c4efbd 100%);z-index:6;}section.intro .wave path{fill:#c4efbd}section.intro a{text-decoration:underline}section.partner{background:radial-gradient(50% 50% at 50% 50%,#f7b8b5 0%,#f8bfbc 100%);z-index:5;}section.partner .wave path{fill:#f8bfbc}section.partner a{text-decoration:underline}section.flashcard{background:radial-gradient(50% 50% at 50% 50%,#9adefe 0%,#a8e3ff 100%);z-index:4;}section.flashcard .wave path{fill:#a8e3ff}section.flashcard a{text-decoration:underline}section.path{background:radial-gradient(50% 50% at 50% 50%,#bdedb6 0%,#c4efbd 100%);z-index:3;}section.path .wave path{fill:#c4efbd}section.path a{text-decoration:underline}section.blogSection{background:radial-gradient(50% 50% at 50% 50%,#558 0%,#60609a 100%);z-index:1;}section.blogSection .wave path{fill:#60609a}section.blogSection h3{color:#fafafa}section.blogSection .blog{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;margin-top:0;max-width:1024px;width:100%;}@media (min-width:600px){section.blogSection .blog{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}section.blogSection .blog li{-ms-flex-align:center;align-items:center;box-shadow:0 1px 1px rgba(0,0,0,0.1);border-radius:5px 2px 5px 2px;display:-ms-flexbox;display:flex;height:320px;margin:0;overflow:hidden;position:relative;width:480px;max-width:100%;}section.blogSection .blog li:hover .wave path{fill:#f7b8b5}section.blogSection .blog li .wave{bottom:50px;box-shadow:none;left:0;right:0;margin:0 auto;transform:scaleX(5) scaleY(.5) rotate(180deg);z-index:55;}section.blogSection .blog li .wave path{fill:rgba(247,184,181,0.95);transition:fill .2s}section.blogSection .blog .blogImage{background:#f4e3b7;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.1);display:inline-block;margin:0;position:relative;transform:scale(1);transition:all .15s;height:100%;width:100%;}section.blogSection .blog .blogImage:hover .blogOverlay{background:#f7b8b5}section.blogSection .blog .blogImage img{object-fit:cover;width:100%;height:100%}section.blogSection .blog .blogOverlay{-ms-flex-align:start;align-items:flex-start;background:rgba(247,184,181,0.95);border-radius:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;padding:5px 10px 10px 15px;position:absolute;transition:background .2s;width:100%;}@media (min-width:600px){section.blogSection .blog .blogOverlay{padding:5px 15px 10px 20px}}section.blogSection .blog .blogOverlay p{color:#444;font-size:14px;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap}section.blogSection .blog .blogOverlay h3{color:#444;font-size:18px;font-weight:normal;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap;}@media (min-width:1200px){section.blogSection .blog .blogOverlay h3{font-size:18px}}section.blogSection .blog .blogOverlay a{text-shadow:none;}section.blogSection .blog .blogOverlay a img{position:absolute;bottom:0;left:0;margin:0 auto;position:absolute;right:0;text-align:center;background:none;border-radius:2px;z-index:0}section.about{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:0;}section.about .wave path{fill:#ffedbd}section.about p{line-height:2;text-align:center}section.about img{border-radius:200px;height:200px;width:200px;box-shadow:0 1px 1px rgba(0,0,0,0.1)}section.about a{color:#333;font-weight:bold} \ No newline at end of file diff --git a/index.html b/index.html index 0ecc89d..a1741d9 100644 --- a/index.html +++ b/index.html @@ -49,18 +49,6 @@
Select words you want to learn based on your life and interests
+Your partner adds these words to your learning deck with their personal touch
+Watch your language skills and relationship grow in a few minutes per day
+