diff --git a/assets/css/styles.css b/assets/css/styles.css
index 92e0287..4a9e9d6 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -475,41 +475,50 @@ img {
overflow: hidden;
}
-.footer__container{
+.footer__container {
row-gap: 4rem;
}
+
.footer__logo {
font-size: var(--h2-font-size);
font-weight: var(--font-semi-bold);
color: var(--first-color);
}
+
.footer__data {
grid-template-columns: repeat(2, 1fr);
row-gap: 4rem;
}
+
.footer__title {
font-size: var(--h3-font-size);
margin-bottom: 1rem;
}
+
.footer__links {
display: grid;
row-gap: 0.75rem;
}
+
.footer__link {
color: var(--text-color);
transition: color 0.4s;
}
+
.footer__link:hover {
color: var(--first-color);
}
+
.footer__group {
grid-column: 1/3;
}
+
.footer__form {
display: grid;
row-gap: 1rem;
margin-bottom: 2rem;
}
+
.footer__input,
.footer__button {
font-size: var(--normal-font-size);
@@ -517,6 +526,7 @@ img {
border: none;
outline: none;
}
+
.footer__input {
width: 100%;
padding: 1.15rem 1.25rem;
@@ -524,50 +534,75 @@ img {
color: var(--text-color);
background-color: var(--container-color);
}
+
.footer__input::placeholder {
color: var(--text-color);
}
+
.footer__button {
cursor: pointer;
}
+
.footer__social {
display: flex;
justify-content: center;
column-gap: 1rem;
}
+
.footer__social-link {
font-size: 1.25rem;
color: var(--white-color);
transition: color 0.4s;
}
+
.footer__social-link:hover {
- color: var(--first-color);
+ color: var(--first-color);
}
+
.footer__copy {
display: block;
margin-top: 5rem;
font-size: var(--small-font-size);
text-align: center;
}
+
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
width: 0.6rem;
border-radius: 0.5rem;
background-color: hsl(23, 4%, 15%);
}
+
::-webkit-scrollbar-thumb {
border-radius: 0.5rem;
background-color: hsl(23, 4%, 30%);
}
+
::-webkit-scrollbar-thumb:hover {
background-color: hsl(23, 4%, 40%);
}
/*=============== SCROLL UP ===============*/
-
-
+.scroll__up {
+ position: fixed;
+ right: 1rem;
+ bottom: -50%;
+ display: inline-flex;
+ font-size: 1.25rem;
+ color: var(--white-color);
+ background: var(--gradient-color);
+ padding: 6px;
+ border-radius: 0.25rem;
+ z-index: var(--z-tooltip);
+ transition: bottom 0.4s, transform 0.4s;
+}
+.scroll__up:hover {
+ transform: translateY(-0.5rem);
+}
/* Show Scroll Up */
-
+.show-scroll {
+ bottom: 3rem;
+}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
diff --git a/assets/js/main.js b/assets/js/main.js
index 84b2246..c23f323 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -42,9 +42,14 @@ let swiperFavorite = new Swiper('.favorite__swiper', {
}
}
})
-
/*=============== SHOW SCROLL UP ===============*/
-
+const scrollUp = () => {
+ const scrollUp = document.getElementById('scroll-up')
+ // When the scroll is more than 350 viewport height, add the show-scroll class to a tag with the class scroll__up class
+ this.scrollY >= 350 ? scrollUp.classList.add('show-scroll')
+ : scrollUp.classList.remove('show-scroll')
+}
+window.addEventListener('scroll', scrollUp)
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
diff --git a/index.html b/index.html
index 83c1767..02fbe8c 100644
--- a/index.html
+++ b/index.html
@@ -244,7 +244,9 @@
-
+
+
+