Alissa Landing Page

assets/css/style.css

@@ -4,14 +4,14 @@
 
 :root {
     --bg-gray-1: #fafafa;
-    --bg-gray-2: #f0f0f0; 
+    --bg-gray-2: #f0f0f0;
     --p-blue-1: #303854;
     --p-yellow: #E8A413;
     --p-blue-3: #0d1018;
     --s-blue: #79C1CC;
     --s-green-1: #9df19c;
     --s-green-2: #b6f5b5;
-  }
+}
 
 * {
     box-sizing: border-box;
@@ -20,18 +20,51 @@
 /* Main */
 main {
     padding: 1rem;
+    height: auto;
+    overflow: auto;
 }
 
 .font-dark {
     color: var(--p-blue-1);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-family: 'Oswald', sans-serif;
     font-weight: 700;
     color: var(--p-blue-1);
 }
 
+.btn.btn-main {
+    background-color: #4b5887;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    color: var(--bg-gray-1);
+    margin-left: 10px;
+}
+
+.btn.btn-main:hover {
+    background-color: var(--p-blue-1);
+    color: var(--bg-gray-1);
+
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    margin-left: 10px;
+}
+
+/* .btn.btn-blue {
+    background-color: #79c1cc;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    color: var(--p-blue-1);
+    margin-left: 10px;
+}
+
+.btn.btn-blue:hover {
+    background-color: #79c1cca8;
+} */
+
 /* Navbar */
 .navbar {
     font-family: 'Oswald', sans-serif;
@@ -52,7 +85,7 @@ h1, h2, h3, h4, h5, h6 {
     text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2);
 }
 
-#cta-nav {
+/* #cta-nav {
     background-color: #79c1cc;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     color: var(--p-blue-1);
@@ -62,38 +95,56 @@ h1, h2, h3, h4, h5, h6 {
 #cta-nav:hover {
     background-color: #79c1cca8;
     color: var(--p-blue-1);
-}
+} */
+
 /* Landing Page */
+.jumbotron {
+    max-width: 100%;
+    height: 100vh;
+    min-height: 100%;
+    margin-top: 50px;
+    overflow: hidden;
+}
+
+#down {
+    color: #303854;
+}
+
+#down:hover {
+    color: #79c1cc;
+}
+
+#hero-text {
+    margin-top: 40px;
+}
+
 h1.display-4 {
     margin-top: 30px;
     font-family: 'Oswald', sans-serif;
     text-transform: uppercase;
     letter-spacing: 1.2px;
-    font-size: 2.85rem;
+    font-size: 2.3rem;
     font-weight: 410;
     color: var(--p-blue-1);
+    margin: 5px 15px;
+
 }
 
 p.lead {
-    font-family: 'raleway', sans-serif;
+    font-family: 'futura-pt', sans-serif;
     font-size: 1.25rem;
     color: var(--p-blue-1);
     font-weight: 400;
+    margin: 0 15px;
 }
 
-.btn.btn-main.btn-lg,
-.btn.btn-main.btn-lg.cta-button {
+.cta-button {
     font-family: 'futura-pt', sans-serif;
     text-transform: uppercase;
     letter-spacing: 2.5px;
     font-size: 1.4rem;
-    background-color: #9df19c;
     border: none;
-}
-
-.btn.btn-main.btn-lg:hover,
-.btn.btn-main.btn-lg.cta-button:hover {
-    background-color: #b6f5b5;
+    margin: 10px 0;
 }
 
 /* Footer */
@@ -119,5 +170,21 @@ a.footer-link {
 #footer-cta {
     background-color: #79c1cca8;
     padding: 5px 10px;
+}
+
+@media only screen and (min-width: 600px) {
+    .jumbotron {
+        max-width: 100%;
+        height: 100vh;
+        min-height: 100%;
+        margin-top: 30px;
+    }
+
+    h1.display-4 {
+        font-size: 2.67rem;
+        font-weight: 410;
+        color: var(--p-blue-1);
+        margin: 0 15px;
+    }
 
 }

assets/js/create-nav-and-footer.js

@@ -1,7 +1,7 @@
 function createNavbar () {
     container = document.getElementById("navbar-container")
     container.innerHTML = `
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
       <div class="container-fluid">
         <a class="navbar-brand" href="index.html">Electrillo</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
@@ -33,7 +33,7 @@ function createNavbar () {
 function createFooter () {
     container = document.getElementById("footer-container")
     container.innerHTML = `
-    <footer class="d-flex fixed-bottom flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+    <footer class="flex-wrap fixed-bottom d-none d-md-flex justify-content-between align-items-center py-3 mb-4 border-top">
       <div class="col-4 d-flex align-items-center">
         <span class="text-muted footer-text ms-3 ms-md-5">©2022 Electrillo </span>
       </div>

assets/js/script.js

@@ -0,0 +1,75 @@
+// We will use the index of the questions array to get the current question
+Quiz.prototype.getQuestionIndex = function() {
+    return this.questionIndex;
+}
+
+// Quiz Ended/Over script
+Quiz.prototype.isEnded = function() {
+}
+
+// This function is called when the user clicks on the start button
+function Question(text, choices, answer) {
+    this.text = text;
+    this.choices = choices;
+    this.answer = answer;
+}
+
+// Store the user's choice here
+Question.prototype.userChoice = function(choice) {
+    return choice === this.answer;
+};
+
+
+// A function for the user's chouce
+function answer(id, choice) {
+    // Find the ID's in the HTML
+    var button = document.getElementById(id);
+}
+
+// show progress
+function showProgress() {
+    const currentQuestionNumber = quiz.questionIndex + 1;
+    const element = document.getElementById('progress');
+    element.innerHTML = `Question ${currentQuestionNumber} of ${quiz.questions.length}`;
+}
+
+// Create an array of questions here
+var questions = [
+    {
+      question: "What type of car do you want?",
+      answers: {
+        a: "Compact",
+        b: "Mid-Size",
+        c: "SUV"
+      },
+      userAnswer: ""
+    },
+    {
+      question: "What is your annual mileage?",
+      answers: {
+        a: "Less than 10,000",
+        b: "10,000 - 20,000",
+        c: "More than 20,000"
+      },
+      userAnswer: ""
+    },
+    {
+      question: "What is your budget?",
+      answers: {
+        a: "Less than $30,000",
+        b: "$30,000 - $50,000",
+        c: "$More than $50,000"
+      },
+      userAnswer: ""
+    }
+  ];
+
+
+// Used the questions defined about to create the quiz
+function Quiz(questions) {
+    this.score = 0;
+    this.questions = 0;
+    this.questionIndex = 0;
+}
+
+var quiz = new Quiz(questions);

index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,12 +9,6 @@
   <!--Bootstrap 5 CDN-->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-  <!--Google Fonts-->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-    rel="stylesheet">
   <!--Font Awesome 5.14-->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
     integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
@@ -27,15 +22,19 @@
   </header>
   <main>
     <section class="container landing-page">
-      <div class="row">
-        <div class="col-md-12">
-          <div class="jumbotron">
-            <h1 class="display-4 mt-3 mt-md-5">Welcome to Electrillo</h1>
-            <p class="lead my-3 my-md-4 my-lg-5 pe-3 pe-md-5">Electrillo is a web application that will let users find out how driving an electric vehicle
+      <div class="jumbotron">
+        <div class="row d-flex align-items-center justify-content-center">
+          <div class="col-12 col-md-5" id="hero-text">
+            <h1 class="display-4">Welcome to Electrillo</h1>
+            <p class="lead my-3 my-md-4 my-lg-5 pe-3 pe-md-5">Electrillo is a web application that will let users find
+              out how driving an electric vehicle
               can save them money and improve the planet.</p>
-            <a class="btn btn-main btn-lg cta-button" href="questions.html" role="button">Start Here</a>
+            <a class="btn btn-main btn-lg cta-button me-2 me-md-4" href="questions.html" role="button">Start Here</a>
             </p>
           </div>
+          <div class="col-12 col-md-7" id="img-column">
+            <img src="assets/images/electrillo.png" alt="car" class="img img-fluid">
+          </div>
         </div>
       </div>
     </section>
@@ -47,7 +46,6 @@ <h1 class="display-4 mt-3 mt-md-5">Welcome to Electrillo</h1>
   <!-- Local Script Links -->
   <script src="assets/js/create-nav-and-footer.js"></script>
   <script src="assets/js/script.js"></script>
-
   <!--Bootstrap JS Bundle-->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
     integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
@@ -57,4 +55,5 @@ <h1 class="display-4 mt-3 mt-md-5">Welcome to Electrillo</h1>
     crossorigin="anonymous"></script>
 
 </body>
-</html>
+
+</html>

mission.html

@@ -36,6 +36,10 @@
                 <div class="col-12">
                     <h1 class="display-4 mb-3">Our mission</h1>
                     <p class="lead">A brief description, or mission statement, about our project's purpose</p>
+                    <p class="lead">A brief description, or mission statement, about our project's purpose</p>
+
+                    <p class="lead">A brief description, or mission statement, about our project's purpose</p>
+
                     </p>
                 </div>
             </div>