Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

About modal #10

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

About modal #10

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
05e821f
About modal, pic's, JS click func + img style +'d
Glutey Feb 14, 2023
1ffae32
Rmoved unwnted elements from modal div, added note
Glutey Feb 15, 2023
26dc6b6
Merge branch 'main' into About-Modal
Eugieno Feb 17, 2023
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
14 changes: 13 additions & 1 deletion assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,17 @@ input[type=text], select {
background-color: #323741;
color: white;
min-height: 5rem;

}

#eco, #planet {
max-width: 200px;
height: auto;
display: block;
margin: 0 auto;
}


border-radius: 10px;

}
Expand Down Expand Up @@ -469,4 +480,5 @@ input[type=text], select {
font-size: 20px;

}



Binary file added assets/images/Eco tracker logo.png
View file
Open in desktop
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/Enhanced-logo.png
View file
Open in desktop
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/no planet B.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,14 @@ $('#form').on('submit', function(event) {
title:titleInput,
transport_types:transportInput
}

///////////////////// My additional the JS provides a click func to the About //////////////////
$(function() {
$('#about-link').click(function() {
$('#aboutModal').modal('show');
});
});

///////////////////////////////////////// END //////////////////////////////////////////////////

const options = {
method: 'POST',
Expand Down
32 changes: 30 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@
<link rel="stylesheet" href="./assets/css/style.css" />
</head>


<body>
<header class="col-md-12">

<nav class="navbar navbar-inverse btn-outline-success position-fixed">
<div class="container-fluid d-flex justify-content-evenly">
<a id="len1" class="hoverable" href="#">Home</a>
<a id="len2" class="hoverable" href="#">About</a>
<a id="about-link" class="nav-item nav-link active hoverable" href="#" data-toggle="modal" data-target="#aboutModal" class="hoverable">About</a>
<a id="len4" class="hoverable" href="./contact-us-page.html">Contact</a>
</div>
</nav>
Expand All @@ -28,8 +29,35 @@
<!-- Jumbotron -->
<div class="container-fluid text-center text-white p-2 weather-header">
<img style="height: 7rem; padding-bottom: 0%;" class ="logo mt-lg-5"src="./assets/images/images.jfif" alt= "eco-Trip logo">

</div>
</header>

<!-- Modal dialog -->
<div class="modal fade" id="aboutModal" role="dialog" tabindex="-1"> <!-- tabindex="-1" makes the modal transistion quicker onto the page, without it the time to display is noticably longer -->
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">About</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Added context to the modal, it will need reviewing before final submission -->
<img src="assets/images/Enhanced-logo.png" alt="Eco-Trip company Logo" id="eco"><!-- added Eco-Trip image here -->
<p>Eco-Trip is your journey to a cleaner, greener future. With our cutting-edge tools and unwavering commitment to carbon neutrality, we empower you to make a positive impact on the world.
Uncover the true cost of carbon, track and plan your emissions, and discover the greenest forms of transport to make more sustainable choices.
Together, we can create a better future, one mile at a time.
Remember, there's no PLANet B, so join us in the global push towards a brighter tomorrow.</p>
<!--Add plantet B image here--><img src="assets/images/no planet B.jpg" alt="Protest sign stating that there's no planet B" id="planet">
</div>
</div>
</div>
</div>



<!-- Aside Forms -->
<!-- Aside Forms -->
<div class="container-fluid" id="mainCont" style="max-width: 1400px">
Expand Down Expand Up @@ -192,7 +220,6 @@ <h2 id="form-heading" class="mt-1 h3 form-label">
<input id="form-2-submit"type="submit" value="Submit">
</form>
</div>

</aside>

</div>
Expand All @@ -207,5 +234,6 @@ <h2 id="form-heading" class="mt-1 h3 form-label">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./assets/js/script.js"></script>

</body>
</html>