Skip to content

Commit

Permalink
Merge pull request #56 from alissatroiano/alissa-branch
Browse files Browse the repository at this point in the history 
Update questions page to ally with team strategy
  • Loading branch information
@ClaudiaLie
ClaudiaLie authored Apr 24, 2022
2 parents fd35817 + 4b74068 commit 425f4e4
Show file tree
Hide file tree
Showing 3 changed files with 272 additions and 236 deletions.
123 changes: 84 additions & 39 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,20 @@
--bg-gray-1: #fafafa;
--bg-gray-2: #f0f0f0;
--p-blue-1: #303854;
--p-green: #00b300;
--p-yellow: #E8A413;
--p-blue-3: #0d1018;
--s-blue: #79C1CC;
--s-green-1: #9df19c;
--s-green-2: #b6f5b5;
--t-green: #0c4b0c;
}

* {
box-sizing: border-box;
}


/* Global Styles */
main {
padding: 1rem;
height: auto;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;}

h1,
h2,
h3,
Expand All @@ -46,42 +39,86 @@ p {

i {
color: #4b5887;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.1);
}

i:hover {
color: #79c1cc;
}

/*--------------- Custom Classes */
main {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
}

/*--------------- Custom Classes */
.font-dark {
color: var(--p-blue-1);
}

.btn.btn-main {
font-family: 'Oswald', sans-serif;
background-color: #4b5887;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
color: var(--bg-gray-1);
margin-left: 10px;
text-transform: uppercase;
letter-spacing: 1.2px;
box-shadow: 0px 0px 10px var(--p-blue-3);
}

.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);
text-transform: uppercase;
box-shadow: 0px 0px 10px var(--p-blue-3);
margin-left: 10px;
}

.green-btn {
font-family: 'Oswald', sans-serif;
background-color: var(--p-blue-3);
color: var(--bg-gray-1);
text-transform: uppercase;
letter-spacing: 1.2px;
box-shadow: 0px 0px 10px var(--p-blue-3);
}

.section-heading {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
}

.text-green,
.btn-none {
font-family: 'futura-pt', sans-serif;
background-color: transparent;
background: none;
border: none;
color: var(--p-green);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.1rem;
font-weight: 600;
}

.text-blue {
font-family: 'futura-pt', sans-serif;
color: #4b5887;
font-weight: 600;
text-transform: uppercase;
font-size: 1rem;
letter-spacing: 1px;
}

.text-bold {
font-weight: 600;
font-family: 'futura-pt', sans-serif;
}

/*-------------- Navbar */
.navbar {
font-family: 'futura-pt', sans-serif;
Expand All @@ -107,7 +144,11 @@ i:hover {

/* Landing Page */
.landing-page {
max-width: 100%;
height: 100vh;
min-height: 100%;
overflow: hidden;
position: relative;
}

img {
Expand All @@ -119,7 +160,7 @@ img {
.jumbotron {
max-width: 100%;
min-height: 100%;
margin-top: 90px;
margin-top: 50px;
}

.mission-container {
Expand Down Expand Up @@ -175,16 +216,29 @@ p.lead {
}

/* Quiz Page */
#sizeCompact:hover, #sizeMed:hover, #sizeSUV:hover {
#sizeCompact:hover,
#sizeMed:hover,
#sizeSUV:hover {
background-color: var(--bg-gray-1);
box-shadow: 0px 0px 10px #cddbc2;
}

#modal-desc {
font-size: 1rem;
color: #4b5887;
}

.text-muted.text-small {
font-family: 'futura-pt', sans-serif;

}
/* Footer */
footer {
font-family: 'futura-pt', sans-serif;
letter-spacing: 0.5px;
background-color: var(--bg-gray-2);;
background-color: var(--bg-gray-2);
;
position: relative;
}

.footer-text {
Expand All @@ -206,12 +260,12 @@ a.link-secondary:hover {

/* Team page */

.card-body i{
.card-body i {
padding: 2px;
}

#team-card {
border: 0;
border: 0;
width: 10rem;
margin-top: 25px;
}
Expand All @@ -222,29 +276,20 @@ a.link-secondary:hover {

}

#footer-copyright{
#footer-copyright {
font-family: 'futura-pt', sans-serif;
}

@media only screen and (min-width: 600px) {
/*selected question border*/
.card-selected {
box-shadow: 0 0 5px 5px #79c1cc;
}

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
.jumbotron {
max-width: 100%;
height: auto;
margin-top: 30px;
min-height: 100vh;
margin: 0 auto;
overflow: hidden;
}

h1.display-4 {
font-size: 2.67rem;
font-weight: 410;
color: var(--p-blue-1);
margin: 0 15px;
}
}
/* QUESTIONS */

/*selected question border*/
.card-selected {
box-shadow: 0 0 5px 5px #79c1cc;
}
89 changes: 48 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,59 +18,66 @@

<body>
<header>
<div id="navbar-container"></div>
<div class="container">
<div id="navbar-container"></div>
</div>
</header>
<main>
<section class="container jumbotron landing-page">
<div class="row d-flex align-items-center justify-content-center py-sm-5">
<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 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 class="row d-flex align-items-center justify-content-center">
<div class="col-12 col-md-5 pt-3" 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 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>
</section>
<section class="container mission-container" id="mission">
<!--container for mission page starts here-->
<div class="row mt-5 py-5">
<div class="col-12 text-center">
<h1 class="display-4 pt-xxl-4">Our Mission</h1>
<p class="mission-statement mt-5">Electrillo is dedicated to ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr>
<div class="col-12 text-center">
<h1 class="display-4 mt-3 mt-md-5 pt-xxl-4">Our Mission</h1>
<p class="mission-statement mt-5">Electrillo is dedicated to ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr>
</div>
<!--grid for mission section features-->
<div class="row d-flex my-0 mx-auto justify-content-center text-center mt-3 mt-md-5">
<div class="col-xs-8 col-sm-4">
<div class="text-center">
<i class="fas fa-charging-station fa-3x mb-3"></i>
<h4>EV-aluator</h4>
<p class="m-3 m-md-4 m-xxl-5">Our state of the art EV/Fuel comparison calculator can help you save thousands of dollars on fuel each year!</p>
</div>
<div class="col-xs-8 col-sm-4">
<div class="text-center">
<i class="fas fa-charging-station fa-3x mb-3"></i>
<h4>EV-aluator</h4>
<p class="m-3 m-md-4 m-xxl-5">Our state of the art EV/Fuel comparison calculator can help you save thousands
of dollars on fuel each year!</p>
</div>
<div class="col-xs-8 col-sm-4">
<div class="text-center">
<i class="fas fa-handshake fa-3x mb-3"></i>
<h4>Commitment</h4>
<p class="m-3 m-md-4 m-xxl-5">Our team is committed to providing tools & resources that will help both you & our Planet Earth in the long run. </p>
</div>
</div>
<div class="col-xs-8 col-sm-4">
<div class="text-center">
<i class="fas fa-handshake fa-3x mb-3"></i>
<h4>Commitment</h4>
<p class="m-3 m-md-4 m-xxl-5">Our team is committed to providing tools & resources that will help both you &
our Planet Earth in the long run. </p>
</div>
<div class="col-xs-8 col-sm-4">
<div class="text-center">
<i class="fas fa-globe-americas fa-3x mb-3"></i>
<h4>Your Part</h4>
<p class="m-3 m-md-4 m-xxl-5">The tools & resources we provide at Electrillo were built to educate our users & reduce fuel emissions. </p>
</div>
</div>
<div class="col-xs-8 col-sm-4">
<div class="text-center">
<i class="fas fa-globe-americas fa-3x mb-3"></i>
<h4>Your Part</h4>
<p class="m-3 m-md-4 m-xxl-5">The tools & resources we provide at Electrillo were built to educate our users
& reduce fuel emissions. </p>
</div>
<!--./-at-->
</div>
<!--./-at-->
</div>
</section>
</section>

</main>

Expand All @@ -91,10 +98,10 @@ <h4>Your Part</h4>
<script>
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
const bsCollapse = new bootstrap.Collapse(menuToggle, { toggle: false })
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.toggle() })
})
l.addEventListener('click', () => { bsCollapse.toggle() })
})
</script>
</body>

Expand Down
Loading

0 comments on commit 425f4e4

Please sign in to comment.