prueba | Negri Cases

				
					*{
	margin:0;
	padding: 0;

}

                         /*MAIN*/
main{
	background-color: #222;
}
main::-webkit-scrollbar {
	width: 0;
}

html{
	scroll-behavior: smooth;
}


                         /*HEADER*/

.header{
	width: 100%;
	height: 100vh;
	min-height: 350px;
	position: relative;
	background-image:url("img/fondocase.png"), url("img/1424057024-huge.jpg");
	background-size: cover;
}

.nav__link{
	padding-top: 5px;
	display: flex;
	flex-wrap: wrap;
	gap:2em;
	justify-content: space-evenly;
	align-items: center;
	list-style: none;

}

.nav__links{
	font-size: 1.5vw;
}

.nav__links:hover{
	color: #aaa;
}

.nav__logo{
	margin-top: 0.5%;
	width: 14%;
	height: 14%;
}

                /*CUADRADO DE ELECCION*/

.chose__style{
	width: 100%;
	height: 45vh;
	display: flex;
	justify-content: space-evenly;
}



.chose__element{
	width: 60%;
	height: 35vh;
	text-align: center;
	/*background-color: #0000000e;*/
	border-radius: 50px;
	padding: 50px;
	margin:20% auto;
	border: 0.1px solid rgba(120,120,120,0.2);
	transition: transform 1s;
}

.chose__element:hover{
	transform: scale(1.1); 
	background-color: rgba(120,120,120,0.2);
}

.chose__active{
	transform: scale(1.1); 
	background-color: rgba(120,120,120,0.2);
}
a {
	text-decoration: none;
	color: #eee;
}

.chose__title{
	font-weight: 900;
	font-size: 2vw;
	padding: 7px;
}

.chose__features{
	margin-top: 20px;
	font-size: 1.5vw;
}

.hero__container{
	text-align: center;
}

.subtitle{
	font-weight: bold;
	font-size: 8vh;
	color: #eee;
	position: relative;
	margin-top: 5%;
	letter-spacing: 3px;
}



                           /*CLASIC*/

#clasic{
	width: 100%;
	height: 85vh;
	min-height: 350px;
	position: relative;
	background-image:url("img/fondocase - copia.png"), url("img/fondo1.png");
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}

.clasic__case{
	width: 40%;
	height:70%;
	margin-left: -13%;
	margin-top: 20%;
	object-fit: cover;
	object-position: 50% 30%;
}

.clasic__negri{
	width: 45%;
	height: 35%;
	margin-top: -10%;
	margin-left: -4%;
	object-fit: cover;
}


						/* MODERN */


#modern{
	width: 100%;
	height: 85vh;
	min-height: 350px;
	position: relative;
	background-image:linear-gradient(360deg,#191919 0%,#00000000 30%),url("img/modern fondo recortado.png");
	background-size: cover;
	/* display: block; */
	display: none;
}

.modern__container{
	margin: auto;
}
.modern__negri, .modern__case{
	display: block;
	text-align: center;
	margin: auto;
}
.modern__negri{
	padding-top: 10vh;
	width: 60%;
}

.modern__case{
	width: 80%;
}


						/* BUTTON */

.button{
	background-color: #222;
	height: 15vh;
	text-align: center;
	display: none;
	background-image: linear-gradient(#191919 0%,#00000000 30%);
}
.learnMore{
	color: #ccc;
	border: none;
	font-weight: bold;
	padding: 15px 40px;
	background-color: #555;

	font-size: 29px;
	border-radius: 50px;
	margin-top: 5vh;
}

.learnMore:hover{
	background-color: #777;
}


					/*MEDIA QUERY*/


@media (max-width: 900px){
						
				/* CHOSE BOX MEDIA QUERY */
	
	.chose__features{
		display: none;
	}
	.chose__style{
		display: block;
	}

	.chose__title{
		font-size: 4vh;
	}
	.chose__element{
		width: 60%;
		max-height: 7vh;
		margin: 15px auto;
	}

					/* CLASIC MEDIA QUERY */

	.clasic__case{
		display: none;
	}
	.clasic__negri{
		display: block;
		object-fit: fill;
		width: 92%;
		height: 25%;
	}

					/* MODERN MEDIA QUERY*/

	#modern{
		position: relative;
		background-image:linear-gradient(360deg,#191919 0%,#00000000 30%),url("img/Modern cel.jpg");
		background-size: cover;
		/* display: block; */
		display: none;
	}

	.modern__negri{
		width: 100%;
	}
	
	.modern__case{
		width: 100%;
	}
}

				
					/*CLASIC*/

const clasic = document.getElementById("clasicon");
const seccionClasic = document.getElementById("clasic");
const choseClasic = document.querySelector(".chose__clasic")

/*MODERN*/

const seccionModern = document.getElementById("modern");
const mod = document.getElementById("mod");
const choseMod = document.querySelector(".chose__mod");
/*BUTTON*/

const button = document.querySelector(".button");



/*CLASIC*/
clasic.addEventListener("click", e =>{
	seccionModern.style.display = "none";
	button.style.display = "block";
	choseClasic.classList.add('chose__active');
	choseMod.classList.remove('chose__active');
	seccionClasic.style.display = "flex";
	seccionClasic.scrollIntoView({behavior: 'smooth'});  
	
})



/*MODERN*/

mod.addEventListener("click", e =>{
	seccionClasic.style.display = "none";
	button.style.display = "block";
	seccionModern.style.display = "block";
	choseMod.classList.add('chose__active');
	choseClasic.classList.remove('chose__active');
	seccionModern.scrollIntoView({behavior: 'smooth'});    
	
})

Luis Negri

Chose your style

LUXURY

MODERN

CLASIC