Skip to content
This repository was archived by the owner on Dec 16, 2020. It is now read-only.

Final Commit #16

Open
damayanti2000 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Final Commit #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
43ae15e
Add files via upload
damayanti2000 Jul 22, 2019
bf1c726
Add files via upload
damayanti2000 Jul 22, 2019
ac30e04
Add files via upload
damayanti2000 Jul 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 185 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
</head>

<body>

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://codecombat.com/images/pages/base/logo.png" width="179" height="40">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
English (US)
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" id="langs">
</div>
</li>
<li class="nav-item">
<a class="nav-link split-btn filled" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link split-btn" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>

<section id="landing-section">
<div class="container">
<div class="row" style="padding-top: 20vh">
<div class="col-12 col-md-10 col-lg-6">
<h1>The most engaging way to learn computer science</h1>
</div>
</div>
<div class="row">
<div class="col">
<a class="btn btn-lg land-btn filled" href="#" role="button">I'm an Educator</a>
</div>
</div>
<div class="row">
<div class="col">
<a class="btn btn-lg land-btn filled" href="#" role="button">I'm a Student</a>
</div>
</div>
<div class="row">
<div class="col">
<a class="btn btn-lg land-btn" href="#" role="button">Play</a>
</div>
</div>
</div>
</section>

<section>
<div class="container" style="padding: 62px 75px;">
<div class="row">
<div class="col-sm-12 col-lg-5 order-lg-1 order-2" style="text-align: center">
<h3 class="navy-text" style="padding-top: 24px">
CodeCombat is a game-based computer science program where students type real code and see their
characters react in real time.
</h3>
<a class="btn btn-lg play-btn" href="#" role="button">TRY THE GAME</a>
</div>
<div class="col-sm-10 offset-sm-1 offset-lg-0 col-lg-7 order-lg-2 order-1">
<img class="img-fluid" src="https://codecombat.com/images/pages/home/type_real_code_logo.gif"
style="width:100%; height:auto;">
</div>
</div>
</div>
</section>

<section style="background: linear-gradient(118.13deg, #0E4C60 0%, #20572B 100%);" id="strive">
<div class="container" style="padding: 62px 5px;">
<div class="row">
<div class="col-xl-7 col-12">
<iframe src="https://player.vimeo.com/video/229304323" frameborder="0" webkitallowfullscreen=""
mozallowfullscreen="" allowfullscreen="" width="100%" height="350" class="vimeo-player"
data-ready="true"></iframe>
</div>
<div class="col-xl-5 col-12">
<h2 style="padding-top: 24px;">We Strive To:</h2>
<img src="https://codecombat.com/images/pages/home/pink_rectangle.png" alt="">
<ul>
<li><span class="text-p">Engage every
student so that they believe coding is for them.</span></li>
<li><span class="text-p">Empower any
educator to feel confident when teaching coding.</span></li>
<li><span class="text-p">Inspire all school
leaders to create a world-class computer science program.</span></li>
</ul>
</div>
</div>
<div class="row justify-content-center">
<a class="btn btn-lg play-btn" href="#" role="button">SIGN UP</a>
</div>
</div>
</section>

<section style="background-color: #eaeeee">
<div class="container">
<div class="row justify-content-center">
<h1 class="navy-text" style="padding: 62px 0 20px 0;">Where Creativity Meets Rigor</h1>
</div>
<div class="row">
<div class="col-12 col-lg-4">
<div class="card">
<img class="card-img-top" src="https://codecombat.com/images/pages/home/creativity_rigor1.png">
<div class="card-body">
<h3 class="teal-text">Make coding fun and teach real-world skills</h3>
<p>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.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card">
<img class="card-img-top" src="https://codecombat.com/images/pages/home/creativity_rigor2.png">
<div class="card-body">
<h3 class="teal-text">Reach students at their level</h3>
<p>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.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card">
<img class="card-img-top" src="https://codecombat.com/images/pages/home/creativity_rigor3.png">
<div class="card-body">
<h3 class="teal-text">Built for all teachers, regardless of experience</h3>
<p>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.</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<a class="btn btn-lg play-btn" href="#" role="button">REQUEST A QUOTE</a>
</div>
</div>
</section>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js"
integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous">
</script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js"
integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous">
</script>
<script src="./index.js"></script>
</body>

</html>
15 changes: 15 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@

var langs = ['Chinese', 'Japanese', 'Hindi'];
var langDropdown = document.getElementById('langs');

langs.forEach((lang) => {
var newLangNode = makeTemplate(`<a class="dropdown-item" href="#">${lang}</a>`);
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;
}
122 changes: 122 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}