Skip to content

Commit

Permalink
Merge pull request #42 from alissatroiano/alissa-homepage
Browse files Browse the repository at this point in the history
Alissa Landing Page
  • Loading branch information
ClaudiaLie committed Apr 23, 2022
2 parents 09020bd + d96471a commit d5743d6
Show file tree
Hide file tree
Showing 9 changed files with 202 additions and 60 deletions.
97 changes: 82 additions & 15 deletions assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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 */
Expand All @@ -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;
}

}
Binary file added assets/images/electric.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/electrillo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions assets/js/create-nav-and-footer.js
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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>
Expand Down
75 changes: 75 additions & 0 deletions assets/js/script.js
Original file line number Diff line number Diff line change
@@ -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);
27 changes: 13 additions & 14 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -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=="
Expand All @@ -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>
Expand All @@ -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"
Expand All @@ -57,4 +55,5 @@ <h1 class="display-4 mt-3 mt-md-5">Welcome to Electrillo</h1>
crossorigin="anonymous"></script>

</body>
</html>

</html>
4 changes: 4 additions & 0 deletions mission.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit d5743d6

Please sign in to comment.