diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5f55c21
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+ Code Academy
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..f27a38a
--- /dev/null
+++ b/main.js
@@ -0,0 +1,32 @@
+const input = document.querySelector('.form__input');
+
+input.addEventListener('keyup', () => {
+ if (input.value !== '') {
+ input.classList.add('form__input--filled');
+ } else {
+ input.classList.remove('form__input--filled');
+ }
+});
+
+const config = {
+ apiKey: process.env.API_KEY,
+ authDomain: process.env.AUTH_DOMAIN,
+ databaseURL: process.env.DATABASE_URL,
+ projectId: process.env.PROJECT_ID,
+ storageBucket: process.env.STORAGE_BUCKET,
+ messagingSenderId: process.env.MESSAGING_SENDER_ID,
+};
+
+firebase.initializeApp(config);
+
+const database = firebase.database();
+const ref = database.ref('emails');
+
+const submitButton = document.querySelector('#LandingEmail');
+
+submitButton.addEventListener('click', (e) => {
+ e.preventDefault();
+ const email = input.value;
+
+ ref.push(email);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ce51c4e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,229 @@
+*, *:after, *:before {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Lato', sans-serif;
+ background: linear-gradient(180deg, #83EB94 0%, #47D95E 100%);
+ background-repeat: no-repeat;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+}
+
+.header__ribbon {
+ display: none;
+}
+
+@media(min-width: 768px) {
+ .header__ribbon {
+ display: block;
+ width: 10%;
+ top: 50px;
+ position: absolute;
+ right: 0;
+ }
+}
+
+@media(min-width: 1920px) {
+ .header__ribbon {
+ width: 5%;
+ }
+}
+
+.header__logo {
+ width: 100%;
+}
+
+@media(min-width: 768px) {
+ .header__logo {
+ width: 80%;
+ }
+}
+
+@media(min-width: 1024px) {
+ .header__logo {
+ width: 35%;
+ }
+}
+
+@media(min-width: 1920px) {
+ .header__logo {
+ width: 40%;
+ }
+}
+
+.header__title {
+ color: #fff;
+ text-transform: uppercase;
+ text-align: center;
+ font-weight: 300;
+ letter-spacing: 4px;
+}
+
+@media(min-width: 1024px) {
+ .header__title {
+ font-size: 3.5rem;
+ }
+}
+
+.main {
+ margin-top: 2rem;
+}
+
+@media(min-height: 700px) {
+ .main {
+ margin-top: 5rem;
+ }
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 70%;
+ margin: 0 auto;
+}
+
+.form__title {
+ color: #fff;
+ font-size: 1.1rem;
+ font-weight: 400;
+ margin-bottom: 1.5rem;
+}
+
+@media(min-width: 768px) {
+ .form__title {
+ font-size: 2rem;
+ }
+}
+
+@media(min-width: 768px) {
+ .form__container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ }
+}
+
+.form__group {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ position: relative;
+ margin-top: .5rem;
+}
+
+@media(min-width: 768px) {
+ .form__group {
+ margin-top: 0;
+ }
+}
+
+.form__input {
+ border: none;
+ height: 50px;
+ box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+ border-radius: 9px;
+ text-indent: 10px;
+ position: relative;
+ display: block;
+}
+
+.form__label {
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ transform: translateY(-50%);
+ color: #A0A0A0;
+ font-weight: 300;
+ transition: top .5s ease;
+}
+
+.form__input:focus {
+ outline: none;
+ box-shadow: inset 0 0 0 2pt #5AAF65;
+}
+
+.form__input:focus + .form__label {
+ top: -12px;
+ color: #fff;
+}
+
+.form__input--filled + .form__label {
+ top: -12px;
+ color: #fff;
+}
+
+.form__input:focus + .form__label:after,
+.form__input--filled + .form__label:after {
+ content: ':';
+ color: #fff;
+ position: absolute;
+ right: -5px;
+ top: 0;
+}
+
+.form__input:invalid + .form__label {
+ color: red;
+}
+
+.form__input:invalid + .form__label:before {
+ content: 'Invalid';
+ color: red;
+}
+
+.form__input:invalid + .form__label:after {
+ color: red;
+}
+
+.form__input:invalid {
+ box-shadow: inset 0 0 0 2pt red;
+}
+
+.form__button {
+ background: #0297EC;
+ color: #fff;
+ text-transform: uppercase;
+ border: none;
+ font-weight: 700;
+ padding: 1rem 2rem;
+ border-radius: 9px;
+ width: 100%;
+ margin-top: 1rem;
+ transition: box-shadow .5s ease;
+ cursor: pointer;
+}
+
+.form__button:hover {
+ box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
+}
+
+@media(min-width: 768px) {
+ .form__button {
+ margin-top: 0;
+ margin-left: 1rem;
+ }
+}
+
+.footer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ color: #fff;
+ margin-bottom: 1rem;
+ margin-top: auto;
+}
\ No newline at end of file
+ 
+