diff --git a/index.html b/index.html new file mode 100644 index 0000000..c227728 --- /dev/null +++ b/index.html @@ -0,0 +1,185 @@ + + + + + + + + + Document + + + + + + + + + + +
+
+
+
+

The most engaging way to learn computer science

+
+
+
+
+ I'm an Educator +
+
+
+
+ I'm a Student +
+
+
+
+ Play +
+
+
+
+ +
+
+
+
+

+ CodeCombat is a game-based computer science program where students type real code and see their + characters react in real time. +

+ TRY THE GAME +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+

We Strive To:

+ +
    +
  • Engage every + student so that they believe coding is for them.
    • +
  • Empower any + educator to feel confident when teaching coding.
    • +
  • Inspire all school + leaders to create a world-class computer science program.
    • +
+
+
+
+ SIGN UP +
+
+
+ +
+
+
+

Where Creativity Meets Rigor

+
+
+
+
+ +
+

Make coding fun and teach real-world skills

+

Students type real Python and JavaScript while playing games that encourage + trial-and-error, critical thinking, and creativity. Students then apply the coding + skills they’ve learned by developing their own games and websites in project-based + courses.

+
+
+
+
+
+ +
+

Reach students at their level

+

Every CodeCombat level is scaffolded based on millions of data points and optimized to + adapt to each learner. Practice levels and hints help students when they get stuck, and + challenge levels assess students' learning throughout the game.

+
+
+
+
+
+ +
+

Built for all teachers, regardless of experience

+

CodeCombat’s self-paced, standards-aligned curriculum makes teaching computer science + possible for everyone. CodeCombat equips teachers with the training, instructional + resources, and dedicated support to feel confident and successful in the classroom.

+
+
+
+
+
+ REQUEST A QUOTE +
+
+
+ + + + + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..9b99155 --- /dev/null +++ b/index.js @@ -0,0 +1,15 @@ + +var langs = ['Chinese', 'Japanese', 'Hindi']; +var langDropdown = document.getElementById('langs'); + +langs.forEach((lang) => { + var newLangNode = makeTemplate(`${lang}`); + langDropdown.appendChild(newLangNode); +}); + +function makeTemplate(html) { + var template = document.createElement('template'); + html = html.trim(); // Never return a text node of whitespace as the result + template.innerHTML = html; + return template.content.firstChild; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..321c5cd --- /dev/null +++ b/style.css @@ -0,0 +1,122 @@ + +split-btn { + border: 2px solid #1FBAB4; + border-radius: 0 4px 4px 0; + color: #1FBAB4; + background-color: #fff; + padding: 8px 15px !important; +} + +.split-btn.filled { + border-radius: 4px 0 0 4px; + color: #fff; + background-color: #1FBAB4; +} + +.land-btn { + font-weight: 700; + text-transform: none; + font-family: 'Open Sans', sans-serif; + width: 250px; + border-radius: 4px; + border: 2px solid #F2BE19; + color: #F2BE19; +} + +.land-btn:hover { + background-color: #F2BE19; + color: #232323; + +} + +.land-btn.filled { + background-color: #F2BE19; + color: #232323; +} + +.land-btn.filled:hover { + border-color: #fdd247; + background-color: #fdd247; +} + +.play-btn { + font-weight: 700; + font-family: 'Open Sans', sans-serif; + width: 250px; + border-radius: 4px; + margin-top: 20px; + border: 2px solid #1FBAB4; + background-color: #1FBAB4; + color: #232323; +} + +.play-btn:hover { + background-color: #2DCEC8; +} + +.navbar { + box-shadow: none; +} + +.navy-text { + color: #0E4C60; +} + +.teal-text { + color: #1FBAB4; +} + +p { + font-family: 'Open Sans', sans-serif; + font-weight: 300; + font-size: 18px; +} + +h1 { + font-family: 'Arvo', serif; + font-size: 46px; + font-weight: 700; + color: #fff; +} + +h2 { + font-family: 'Arvo', serif; + font-size: 33px; + font-weight: 700; + color: #fff; +} + +h3 { + font-family: 'Arvo', serif; + font-size: 24px; + font-weight: 700; + line-height: 32px; + letter-spacing: 0.52px; +} + +#strive li::before { + content: "\2022 "; + color: #1FBAB4; + font-size: 30px; + padding: 10px; +} + +#strive li { + color: #fff; + font-weight: 300; + text-indent: -20px; + margin-bottom: 15px; + list-style-type: none; + font-size: 24px; + font-family: 'Open Sans', sans-serif; +} + + +#landing-section { + margin-top: 66px; + height: calc(100vh - 66px); + background-image: url(https://codecombat.com/images/pages/home/jumbotron.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; +} \ No newline at end of file