Skip to content

Commit

Permalink
responsive update V2
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoaquinSuarezVallejos
JoaquinSuarezVallejos committed Apr 22, 2024
1 parent 87f622e commit fe0e723
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 52 deletions.
124 changes: 107 additions & 17 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,17 @@
/* Menú de Navegación (NavBar) */
/* ------------------------------------------------------------------------------------------------------------- */
nav{
position: fixed;
/* position: fixed; */
width: 100%;
padding: 20px 0;
padding: 14px 0;
z-index: 998;
transition: all 0.3s ease;
background: #ED9121;
}
nav.sticky{
/* nav.sticky{
background: #ED9121;
padding: 13px 0;
}
} */
nav .navbar{
width: 90%;
display: flex;
Expand All @@ -53,7 +54,7 @@ nav .navbar{
nav .navbar .logo a{
font-weight: 750;
font-size: 35px;
color: #ED9121;
color: #fff;
font-family: 'Poppins', sans-serif;
}
nav.sticky .navbar .logo a{
Expand All @@ -79,7 +80,7 @@ nav .navbar .menu li{
font-family: 'Poppins', sans-serif;
}
.navbar .menu .navbarHome-btn:hover{
color: #ED9121;
color: #000;
}
nav.sticky .menu .navbarHome-btn:hover{
color: #000;
Expand All @@ -96,7 +97,7 @@ nav.sticky .menu .navbarHome-btn:hover{
font-family: 'Poppins', sans-serif;
}
.navbar .menu .navbarAbout-btn:hover{
color: #ED9121;
color: #000;
}
nav.sticky .menu .navbarAbout-btn:hover{
color: #000;
Expand All @@ -113,7 +114,7 @@ nav.sticky .menu .navbarAbout-btn:hover{
font-family: 'Poppins', sans-serif;
}
.navbar .menu .navbarService-btn:hover{
color: #ED9121;
color: #000;
}
nav.sticky .menu .navbarService-btn:hover{
color: #000;
Expand All @@ -130,7 +131,7 @@ nav.sticky .menu .navbarService-btn:hover{
font-family: 'Poppins', sans-serif;
}
.navbar .menu .navbarTechnologies-btn:hover{
color: #ED9121;
color: #000;
}
nav.sticky .menu .navbarTechnologies-btn:hover{
color: #000;
Expand All @@ -147,20 +148,20 @@ nav.sticky .menu .navbarTechnologies-btn:hover{
font-family: 'Poppins', sans-serif;
}
.navbar .menu .navbarContact-btn:hover{
color: #ED9121;
color: #000;
}
nav.sticky .menu .navbarContact-btn:hover{
color: #000;
}
.navbar .WhatsApp-navbar{
color: #1DAA61;
color: #fff;
font-size: 22px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
transition: all 0.4s ease;
}
.navbar .WhatsApp-navbar:hover{
color: #fff;
color: #000;
cursor: pointer;
}
.navbar .WhatsApp-navbar i{
Expand All @@ -185,6 +186,7 @@ nav.sticky .WhatsApp-navbar:hover{
background-position: center;
background-attachment: fixed;
font-family: 'Poppins', sans-serif;
margin-bottom: -80px;
}
.home .home-content{
width: 90%;
Expand All @@ -198,14 +200,15 @@ nav.sticky .WhatsApp-navbar:hover{
display: flex;
float: right;
height: 400px;
margin-top: 30px;
margin-top: -40px;
margin-right: 6px;
}
.home .text-one{
color: #fff;
font-size: 80px;
font-weight: 800;
margin-bottom: -6px;
margin-top: -70px;
}
.home .text-two{
font-size: 70px;
Expand Down Expand Up @@ -732,19 +735,107 @@ footer .textFooter span{
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
color: #fff;
background: #ED9121;
padding: 7px 12px;;
font-size: 18px;
border-radius: 6px;
box-shadow: 3px 3px 2px #191919;
display: none;
transition: all 0.4s ease;
}
/* ------------------------------------------------------------------------------------------------------------- */


/* Responsive Media Query */
/* ------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1920px) {
.home{
margin-bottom: -80px;
}
.home .ChargeFix_Logo{
height: 500px;
margin-top: -120px;
}
.home .text-one{
font-size: 100px;
margin-top: -140px;
}
.home .text-two{
font-size: 90px;
}
.home .text-three{
font-size: 40px;
}
.home .text-four{
font-size: 40px;
}
.home .contact-us-btn button{
font-size: 36px;
}
.about .left img{
margin-left: 130px;
}
.about-details .right .textMision{
font-size: 20px;
}
.services .boxes .box{
margin: 20px 0;
width: calc(100% / 3 - 20px);
}
.technologies .boxes{
justify-content: space-evenly;
}
}
@media (max-width: 1600px) {
.home{
margin-bottom: -80px;
}
.home .ChargeFix_Logo{
display: flex;
float: right;
height: 400px;
margin-top: -140px;
margin-right: 6px;
margin-bottom: -30px;
}
.home .text-one{
font-size: 80px;
margin-top: -160px;
}
.home .text-two{
font-size: 70px;
}
.home .text-three{
font-size: 30px;
}
.home .text-four{
font-size: 30px;
}
.home .contact-us-btn button{
font-size: 28px;
margin-bottom: -50px;
}
.about .left img{
width: 512px;
height: 341px;
object-fit: cover;
margin-bottom: 5px;
margin-left: 7px;
}
.about-details .right .textMision{
font-size: 19px;
}
/* .services .boxes .box{
margin: 20px 0;
width: calc(100% / 3 - 20px);
} */
.technologies .boxes{
justify-content: space-between;
}
}

@media (max-width: 1190px) {
section .content{
width: 85%;
Expand Down Expand Up @@ -833,9 +924,6 @@ footer .textFooter span{
justify-content: center;
margin-bottom: -50px;
}
/* .technologies .content .titleTecnologias span{
font-size: 40px;
} */
.technologies .technologies-details{
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -868,4 +956,6 @@ footer .textFooter span{
color: #ED9121;
}
}
/* ------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------- */


14 changes: 10 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,26 @@
<body>
<!-- Flecha Scroll Up (Volver a Inicio) -->
<div class="scroll-up-button">
<a href="#home"><i class="fas fa-arrow-up"></i></a>
<a><i class="fas fa-arrow-up"></i></a>
</div>

<!-- Menú de Navegación (NavBar) -->
<!----------------------------------------------------------------------------------------------------------->
<nav>
<div class="navbar">
<div class="navbar" id="navbar">
<div class="logo"><a href="#">ChargeFix</a></div>
<ul class="menu">
<li><button class="navbarHome-btn">Inicio</button></li>
<!-- <li><button class="navbarHome-btn">Inicio</button></li>
<li><button class="navbarAbout-btn">Nosotros</button></li>
<li><button class="navbarService-btn">Servicio</button></li>
<li><button class="navbarTechnologies-btn">Tecnologías</button></li>
<li><button class="navbarContact-btn">Contacto</button></li>
<li><button class="navbarContact-btn">Contacto</button></li> -->

<li><a class="navbarHome-btn">Inicio</a></li>
<li><a href="#about" class="navbarAbout-btn">Nosotros</a></li>
<li><a href="#services" class="navbarService-btn">Servicio</a></li>
<li><a href="#technologies" class="navbarTechnologies-btn">Tecnologías</a></li>
<li><a href="#contact" class="navbarContact-btn">Contacto</a></li>
</ul>
<div class="WhatsApp-navbar">
<i class="fab fa-whatsapp"></i>
Expand Down
60 changes: 29 additions & 31 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,47 @@
// Menú de Navegación (Sticky NavBar) y Flecha Scroll Up (Volver a Inicio)
let nav = document.querySelector("nav");
let scrollBtn = document.querySelector(".scroll-up-button a");
console.log(scrollBtn);
let val;
window.onscroll = function()
{
if (document.documentElement.scrollTop > 60) {
nav.classList.add("sticky");
window.onscroll = function() {
if (document.documentElement.scrollTop > 100) {
scrollBtn.style.display = "block";
}
else {
nav.classList.remove("sticky");
scrollBtn.style.display = "none";
}
}

// NavBar: Botón "Inicio"
let navbar_home_btn = document.querySelector(".navbarHome-btn");
navbar_home_btn.onclick = function() {
scrollBtn.onclick = function() {
window.scrollTo(0, 0);
}

// NavBar: Botón "Nosotros"
let navbar_about_btn = document.querySelector(".navbarAbout-btn");
navbar_about_btn.onclick = function() {
window.scrollTo(0, 580);
}
// // NavBar: Botón "Inicio"
// let navbar_home_btn = document.querySelector(".navbarHome-btn");
// navbar_home_btn.onclick = function() {
// window.scrollTo(0, 0);
// }

// NavBar: Botón "Servicio"
let navbar_service_btn = document.querySelector(".navbarService-btn");
navbar_service_btn.onclick = function() {
window.scrollTo(0, 1180);
}
// // NavBar: Botón "Nosotros"
// let navbar_about_btn = document.querySelector(".navbarAbout-btn");
// navbar_about_btn.onclick = function() {
// window.scrollTo(0, 580);
// }

// NavBar: Botón "Tecnologías"
let navbar_tech_btn = document.querySelector(".navbarTechnologies-btn");
navbar_tech_btn.onclick = function() {
window.scrollTo(0, 1862);
}
// // NavBar: Botón "Servicio"
// let navbar_service_btn = document.querySelector(".navbarService-btn");
// navbar_service_btn.onclick = function() {
// window.scrollTo(0, 1180);
// }

// NavBar: Botón "Contacto"
let navbar_contact_btn = document.querySelector(".navbarContact-btn");
navbar_contact_btn.onclick = function() {
window.scrollTo(0, document.documentElement.scrollHeight);
}
// // NavBar: Botón "Tecnologías"
// let navbar_tech_btn = document.querySelector(".navbarTechnologies-btn");
// navbar_tech_btn.onclick = function() {
// window.scrollTo(0, 1862);
// }

// // NavBar: Botón "Contacto"
// let navbar_contact_btn = document.querySelector(".navbarContact-btn");
// navbar_contact_btn.onclick = function() {
// window.scrollTo(0, document.documentElement.scrollHeight);
// }

// Botón "Contáctenos" - Inicio
let contactBtn = document.querySelector(".contact-us-btn");
Expand Down

0 comments on commit fe0e723

Please sign in to comment.