feat: add css styles

css/pricing.css

@@ -1,6 +1,132 @@
+:root{
+  --color-azul: #3541e9;
+}
+
 
 
 .pricing-header {
-  max-width: 700px;
+  max-width: 800px;
+}
+
+
+/* 
+HEADER NAVBAR
+*/
+
+.header__navbar ul{
+  display: flex;
+  margin: 0;
+}
+
+.header__navbar ul li{
+  list-style: none!important;
+}
+
+.header__navbar ul li a {
+  text-decoration: none;
+  padding: 10px 16px;
+  border-bottom: none;
+  transition: all 400ms;
+}
+
+.header__navbar ul li a:hover,
+.footer__navbar ul li a:hover{
+  color: var(--color-azul)!important;
 }
 
+/* 
+  Estilos del Hero
+*/
+
+.btnMap{
+  color:#141619;
+  text-decoration: none;
+  transition: all 400ms;
+}
+
+.hero__social{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero__social h5{
+  margin: 0;
+  margin-right: 10px;
+}
+
+.hero__social button {
+  padding: 5px;
+  border-radius: 6px;
+}
+
+.hero__social button img {
+  width: 30px;
+  height: auto;
+}
+
+.hero__mapa{
+  margin: 20px;
+}
+
+.header__cities{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.header__cities a{
+  text-decoration: none;
+  background-color: var(--color-azul);
+  color: white!important;
+  border-radius: 6px;
+  margin: 4px;
+  transition: 400ms;
+}
+
+.header__cities a:hover{
+  color: var(--color-azul)!important;
+  background-color: rgba(100,100,100, 0.2);
+}
+
+.city{
+  margin: 30px 0;
+}
+
+.btnTop{
+  border: none;
+  background: transparent!important;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  animation: fadeIn ease 600ms;
+}
+
+.btnTop.oculto{
+  opacity: 0;
+  animation: fadeOut  600ms;
+}
+
+.btnTop img{
+  width: 60px;
+}
+
+
+@keyframes fadeIn{
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@keyframes fadeOut{
+  0% {opacity:1;}
+  100% {opacity:0;}
+}
+
+.footer__navbar ul li{
+  margin: 4px 0;
+}
+
+
+.footer__navbar ul li a{
+  text-decoration: none;
+}

js/index.js

@@ -0,0 +1,24 @@
+const load = () =>{
+    let top = document.querySelector('.btnTop')
+    console.log("click")
+    top.addEventListener('click', function(){
+        document.body.scrollTop = 0 // For Safari
+        document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera
+    })
+}
+
+const toggleTop = () => {
+    let top = document.querySelector('.btnTop')
+    const currentScroll = window.pageYOffset;
+    if(currentScroll>100){
+        top.classList.remove('d-none')
+        top.classList.remove('oculto')
+    }else{
+        top.classList.add('oculto')
+    }
+}
+
+
+window.addEventListener("scroll", toggleTop);
+
+document.addEventListener("DOMContentLoaded", load);