added in footer css and js for button

This commit is contained in:
Rohit Pai 2022-01-24 00:19:48 +00:00
parent b9a6f92c93
commit 2dabc63fe5
7 changed files with 50 additions and 4 deletions

2
dist/css/main.css vendored

File diff suppressed because one or more lines are too long

2
dist/index.html vendored

File diff suppressed because one or more lines are too long

2
dist/js/main.js vendored

File diff suppressed because one or more lines are too long

37
src/css/footer.css Normal file
View File

@ -0,0 +1,37 @@
footer {
background-color: var(--primaryDefault);
margin-top: 5em;
padding: 2em;
display: flex;
color: #FFFFFF;
}
footer .spacer {
width: 100%;
margin-right: auto;
}
footer p {
margin: auto;
width: 100%;
text-align: center;
}
footer .button {
margin-left: auto;
width: 100%;
text-align: center;
}
footer .button button {
border: 5px solid #FFFFFF;
background: none;
font-size: 3em;
padding: 0.5rem 1rem;
width: 2em;
color: #FFFFFF;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;
cursor: pointer;
}

View File

@ -8,6 +8,7 @@
@import "cv.css"; @import "cv.css";
@import "projects.css"; @import "projects.css";
@import "contact.css"; @import "contact.css";
@import "footer.css";
/****** Root Style ******/ /****** Root Style ******/
:root { :root {

View File

@ -154,8 +154,11 @@
</section> </section>
<footer class="flexRow"> <footer class="flexRow">
<div class="spacer"></div>
<p>&copy; 2021 Rohit Pai all rights reserved</p> <p>&copy; 2021 Rohit Pai all rights reserved</p>
<button class="goBackToTop"></button> <div class="button">
<button id="goBackToTop"><i class="fas fa-chevron-up"></i></button>
</div>
</footer> </footer>
</main> </main>
<script src="js/main.js"></script> <script src="js/main.js"></script>

View File

@ -218,6 +218,11 @@ document.addEventListener('DOMContentLoaded', () =>
document.querySelector("#contactError .close").addEventListener("click", () => document.querySelector("#contactError .close").addEventListener("click", () =>
document.querySelector("#contactError").classList.toggle("hidden")); document.querySelector("#contactError").classList.toggle("hidden"));
document.querySelector("#goBackToTop").addEventListener("click", () =>
{
window.scrollTo(0, 0);
});
// contact form // contact form
document.querySelector("#contactForm").addEventListener("submit", e => document.querySelector("#contactForm").addEventListener("submit", e =>
{ {