Cuando uso el inspector de elementos noto que cuando se reduce la anchura menor de 895px
(aprox) comienza a aparecer un margen derecho que se acrecenta a medida que hago la ventana más angosta.
Algunas de las cosas que intenté:
- Quitar el
box-sizing:border box;
del selector universal. - Especificar
width: 100%
al body. - Comentar los elementos flotantes (nav y boton "Sumate").
- Dar border: directamente en el selector universal para ver que ningun elemento salga del body.
- Dar un
margin-right: 0;
al body. - Crear una regla html solo para dar
border:0;
/* RESET BASICO */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
/* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
font-family: 'Josefin Sans', sans-serif;
font-family: sans-serif;
border: solid 2px greenyellow;
}
/* ESTILOS GENERALES */
body{
display: flex;
flex-direction: column;
width: 100%;
/* height: 100%; */
background-image: url("../images/fondo.jpg");
background-size: cover;
background-attachment: fixed;
border:solid red;
}
section{
border: solid blue;
}
.subtitulo__formateado{
color: white;
padding: 10px;
background-color: orange;
text-align: center;
opacity:.8;
width: 100%;
border-bottom: rgb(216, 115, 0) solid 4px;
}
.texto__formateado{
font-family: 'Balsamiq Sans' !important; /* PORQUE NO LA TOMA? */
font-weight: bold;
letter-spacing: .5px;
padding: 60px 100px;
background-color: #fff;
opacity: .8;
color:rgb(15, 46, 37);
/* height: auto; */
}
.fondo__verde{
color: rgb(213, 235, 213);
background-image: linear-gradient(to bottom, rgb(47, 161, 47), rgb(15, 46, 37));
width: 100%;
height: auto;
padding: 20px 50px;
text-align: center;
opacity: .9;
}
.fondo__naranja{
color: rgb(213, 235, 213);
background-image: linear-gradient(to bottom, rgb(218, 131, 0), rgb(102, 46, 0));
width: 100%;
height: auto;
padding: 20px 0;
text-align: center;
opacity: .9;
}
.foto__miniatura{
margin-right: 20px;
border-radius: 100%;
width: 100px;
}
a{
text-decoration: none;
color: rgba(255, 255, 255, 0.959);
font-weight: bold;
}
/* BARRA DE NAVEGACION */
nav{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 10;
width: 60%;
height: 5%;
border-radius: 0px 0px 70px 0px;
background-color:white;
overflow: hidden;
box-shadow: 0px 0px 4px .8px rgb(26, 156, 69);
opacity: .5;
transition: 1s;
}
nav:hover{
opacity: .87;
transition: 1s;
}
nav ul{
list-style: none;
display: flex;
}
nav ul li a{
color:rgb(0, 128, 58);
padding: 10px 20px;
}
nav ul li a:hover{
color:rgba(255, 255, 255, .9);
background-color: rgba(0, 128, 58, 0.9);
transition: .3s;
}
/* BOTON SUMATE */
.sumate{
width: 70px;
position: fixed;
right: 3px;
top: 3px;
z-index: 1;
transition: .3s;
border-radius: 25px;
box-shadow: 0px 0px 15px 3px rgb(26, 156, 69);
opacity: .8;
}
.sumate:hover{
transform: scale(1.5) translate(-10px, 10px);
opacity: 1;
box-shadow: 0px 0px 120px 40px rgb(255, 222, 34);
filter: contrast(1.2);
transition: .3s;
}
/* CABECERA Y PRESENTACION */
header{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-image: url("../images/galeria_img1.jpg");
background-size: cover;
background-position: center;
filter: saturate(95%);
}
.Bienvenida{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
}
.contenedor__bienvenida{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.bienvenida__texto{
width: 38%;
color: rgb(0, 128, 79);
text-shadow:
-2px -2px 0 white,
2px -2px 0 white,
-2px 2px 0 white,
2px 2px 0 white;
font-weight: bolder;
font-size:20px;
/* margin:50px; */
padding:140px;
border: rgba(255, 255, 255, 0.575) dotted 1px;
}
.bienvenida__logo{
width: 38%; /* Al tener mucho margen el png si le damos menos de 38% empuja la img fuera el layout */
border: rgba(255, 255, 255, 0.61) dotted 1px;
}
.bienvenida__logo img{
width: 100%; /*350px*/
}
/* PROVERBIOS IRLANDESES */
/* PROXIMOS EVENTOS */
.eventos{
display: flex;
justify-content: space-evenly;
align-items: center;
border:solid;
}
.evento--pasados{
display: flex;
width: 28%;/*335px;*/
height: auto;
}
.evento--pasados img{
width: 100%; /*330px;*/
height: auto;
transition: .4s;
opacity: .6;
}
.evento--pasados img:hover{
opacity: 1;
transition: 1s;
}
.evento--otros{
display: flex;
width: 28%;
height: auto;
}
.evento--otros img{
width: 100%;
height: auto;
transition: .4s;
opacity: .6;
}
.evento--otros img:hover{
opacity: 1;
transition: 1s;
}
.evento--proximo{
display: flex;
width: 30%; /*365px;*/
height: auto;
margin: 3% 0;
}
.evento--proximo img{
width: 100%; /*360px;*/
height: auto;
box-shadow: 0px 0px 15px 3px rgb(255, 238, 0);
transition: 1s;
}
.evento--proximo img:hover{
width: 100%;
height: auto;
transform: scale(1.12);
transition: .4s;
box-shadow: 0px 0px 100px 10px rgb(255, 196, 87);
border: solid 2px rgba(255, 166, 0, 0.603);
filter: contrast(2);
}
/* NUESTRA ESCUELA */
section>div>ul{
margin: 0 0 0 30px;
}
/* GELERIA DE FOTOS */
.galeriaFotos{
display: flex;
flex-direction: column;
align-items: center;
}
.contenedor__fotos{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.foto{
width: 20%;
height: 500px;
transition: .5s;
filter: saturate(50%);
}
.foto:hover{
width: 80%;
transition: .5s;
filter: saturate(100%);
}
.foto img{
width: 100%;
height: 100%;
object-fit: cover;
}
/* BIOGRAFIA DEL DIRECTOR */
.biografia__cabecera{
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.biografia__cuerpo{
display: flex;
height: auto; /* 150px contraido */
font-weight: bold;
letter-spacing: .5px;
padding: 60px 100px 100px;
color:rgb(15, 46, 37);
}
.boton__largo{
display: flex;
margin-top: 17px;
font-size: 20px;
color: orange;
justify-content: center;
border: orange solid 2px;
border-radius: 12px;
padding: 7px;
transition: .3s
}
.boton__largo:hover{
background-color: orange;
color: white;
transition: .3s
}
/* SOBRE NUESTROS MIEMBROS */
/* FOOTER */
footer{
display: flex;
justify-content: space-evenly;
width: 100%;
height: 500px;
padding: 30px 0;
text-align: center;
position: relative; /* Solo a efecto de posicionar la ventana de creditos */
}
.footerItem{
display: flex;
justify-content: center;
align-items: center;
width: 400px;
}
/* SOCIAL MEDIA Y LEGALES */
/* .contactos{
display: flex;
align-items: center;
justify-content: space-evenly;
} */
.SMyLegales{
display: grid;
grid-template-columns: 64px 64px 64px 64px ;
grid-template-rows: 64px 44.5px 44.5px;
width: 30%;
border-radius: 20px;
background-color: rgba(33, 165, 110, 0.082);
justify-content: center;
}
/* .SMyLegales div{
background-color: salmon;
border:solid white 1px;
} */
.legal__font{
font-size: smaller;
}
.creditos{
display: flex;
justify-content: center;
align-items: center;
grid-column: 1/5;
}
.legales{
display: flex;
grid-column: 1/5;
align-items: end;
}
.socialMedia__contenedor{
display: flex;
justify-content: center;
align-items: center;
}
.socialMedia__img{
width: 52px;
}
/* RED-GEM DEV-DESIGNER */
.redGem__container{
display: flex;
align-items: end;
}
/* .varios{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.legal{
display: flex;
} */
.patrocinadores{
display: grid;
grid-template-columns: 64px 64px 64px 64px ;
grid-template-rows: 64px 64px 25px;
width: 30%;
background-color: rgba(33, 165, 110, 0.082);
border-radius: 20px;
justify-content: center;
}
.patrocinadores div{
display: flex;
justify-content: center;
align-items: center;
border:dotted rgba(255, 255, 255, 0.164) 1px;
}
.patrocinador__1 img{
display: flex;
justify-content: center;
align-items: center;
width:64px;
}
.patrocinadores__link{
font-size: smaller;
grid-column: 1/5;
}
/* VENTANA FLOTANTE CREDITOS */
.ventana__creditos{
display:flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 92px;
left: 370px;
width: 520px;
min-height: 200px;
border-radius: 20px 20px 20px 0;
height: auto;
border: rgb(51, 146, 75) solid 4px;
background-color: #fff;
visibility: hidden;
}
.ventana__creditos div a, .ventana__creditos div h2{
color:black;
}
.ventana__creditos div h2{
margin-bottom: 10px;
}
.ventana__creditos div{
text-align: left;
width: 90%;
}
.ventana__creditos div ul{
list-style: none;
}
.creditos h4{
cursor:alias;
}
/* CLASES ASIGNADAS POR JS */
.visible{
visibility: visible;
}
/* BREAK POINTS -Responsive Design- */
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Dev-designer: Matías Dionisio Montalto.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="toirtis, sesion escuela, musica irlandesa">
<title>Toirtis</title>
<!-- <link rel="stylesheet" href="styles/normalize.css"> -->
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/script.js" defer></script>
<!-- GOOGLE FONTS -->
<!-- Josefin Sans -->
<!-- <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap" rel="stylesheet"> -->
</head>
<body>
<!-- BARRA DE NAVEGACION -->
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#presentaciones">Presentaciones</a></li>
<li><a href="#escuela">Escuela</a></li>
<li><a href="#galeria">Galeria</a></li>
<li><a href="#director">Director</a></li>
<li><a href="#miembros">Miembros</a></li>
<li><a href="#contactos">Contactos</a></li>
</ul>
</nav>
<!-- SUMATE BOTON-->
<a href="http://wa.me/xxx" target="_blank" rel="noopener noreferrer"><img class="sumate" src="images/Sumate.png" title="Sumate a Toirtis!" alt="Sumate a Toirtis!"></a>
<!-- PRESENTACION DE TOIRTIS -->
<header>
<div id="inicio" class="Bienvenida">
<div class="contenedor__bienvenida">
<div class="bienvenida__texto">
<p>¡ Sumate a Toirtís !<br>Un espacio dedicado a iniciantes en La Plata y CABA.</p>
</div>
<div class="bienvenida__logo">
<img src="images/ToirtísLogoBordeBl3.png" alt="Logo de Toirtis">
</div>
</div>
</div>
<div id="datoCulturaIrlandesa" class="fondo__verde"> <!--class= "curiosidades"-->
<h3 id="titulo">🍀 Proverbio Irlandes.</h3>
<cite>
<p id="parrafo">En Irlanda se celebran numerosos festivales de música tradicional a lo largo del año. Algunos de los más conocidos son el Fleadh Cheoil (Festival de la Música Irlandesa) y el Willie Clancy Summer School, donde músicos y bailarines se reúnen para compartir su pasión por la música tradicional.</p>
</cite>
</div>
</header>
<!-- PROVERBIOS IRLANDESES fuente: https://www.diariofemenino.com/psicologia/frases-y-reflexiones/los-proverbios-irlandeses-mas-sabios-y-enriquecedores-con-traduccion/-->
<main>
<!-- SECCION PROXIMOS EVENTOS -->
<div class="subtitulo__formateado">
<h2 id="presentaciones">Presentaciones</h2>
</div>
<section class="eventos">
<div class="evento--pasados">
<img src="images/MarcoCuadrado7.png" alt="Proximo evento">
</div>
<div class="evento--proximo">
<img src="images/MarcoCuadrado7.png" alt="Proximo evento">
</div>
<div class="evento--otros">
<img src="images/MarcoCuadrado7.png" alt="Proximo evento">
</div>
</section>
<!-- NUESTRA ESCUELA -->
<section>
<div id="escuela" class="subtitulo__formateado">
<h2>Nuestra Escuela</h2>
</div>
<div class="texto__formateado">
<p>Toirtís, Sesión Escuela de Música Irlandesa es un espacio de aprendizaje y enseñanza de la Música Tradicional Irlandesa dedicado a iniciantes, que combina los formatos Escuela y Sesión Irlandesa.<br>Tenemos sede en La Plata.</p>
<br>
<p>En éste espacio se aprende desde la práctica:</p>
<br>
<ul>
<li>Tocamos en conjunto desde el primer día.</li>
<li>Abordamos repertorio tradicional a un tempo lento, lo que lo hace mucho más accesible.</li>
<li>Incitamos a que todos y todas toquen, sin importar si no están del todo familiarizados con las melodías ¡Se aprende equivocándose!</li>
</ul>
<br>
<p>A menudo incorporamos actividades especiales para abordar aquellos conocimientos y habilidades que no se desarrollan en nuestro trabajo habitual:</p>
<br>
<ul>
<li>Aprendemos nuevas melodías, frase por frase.</li>
<li>Realizamos presentaciones frente a público.</li>
<li>Dictamos Talleres y Seminarios sobre temas necesarios para un músico de éste género.</li>
</ul>
<br>
<p>¡ Formá parte de Toirtís !<br>Las inscripciones están abiertas todo el año, para todas las edades y niveles. No se requiere ningún conocimiento previo ¡Animate!</p>
</div>
</section>
<!-- GALERIA DE FOTOS -->
<section id="galeria" class="galeriaFotos">
<h2 class="subtitulo__formateado">Galeria de fotos</h2>
</div>
<div class="contenedor__fotos">
<div class="foto"><img src="images/galeria_img1.jpg" alt=""></div>
<div class="foto"><img src="images/galeria_img2.png" alt=""></div>
<div class="foto"><img src="images/galeria_img3.jpg" alt=""></div>
<div class="foto"><img src="images/galeria_img4.png" alt=""></div>
<div class="foto"><img src="images/galeria_img5.jpg" alt=""></div>
<div class="foto"><a href="https://photos.app.goo.gl/fTcqSQVNLRwuxyNN8" target="_blank" rel="noopener noreferrer"><img src="images/galeria_img6.png" alt=""></a></div>
</div>
</section>
<!-- BIOGRAFIA DEL DIRECTOR -->
<section id="director" class="BiografiaDirector">
<div class="fondo__naranja biografia__cabecera">
<img class="foto__miniatura" src="images/foto_lu.jpg" alt="Fundador & Director de Toirtis: Luciano Martín Montalto">
<div>
<h2>Acerca de nuestro Director</h2>
<p><i>Luciano Martin Montalto</i></p>
</div>
</div>
<div class="biografia__cuerpo texto__formateado">
<div>
<h3>¡Hola!</h3>
<br>
<p>Mi nombre es Luciano y soy un músico y docente apasionado por la Música Tradicional Irlandesa.</p>
<br>
<p>Mi intención al iniciar ésta escuela fue acercar la Música Irlandesa a aquellas personas que quieren hacer música pero no saben cómo comenzar, o se han frustrado con otros métodos de aprendizaje.</p>
<br>
<p>Noté que éste género cuenta con muchas bondades y que, abordando el repertorio adecuado a una velocidad accesible, podría resultar ideal para iniciantes en música ¡Aún sin conocimientos o experiencias previas!</p>
<br>
<p>Así surgió Toirtís, un espacio en que se aprende tocando en conjunto.
Compartiendo la música de ésta manera, los participantes trabajan varias aptitudes necesarias para el músico desde el contacto directo con la realidad musical.</p>
<br>
<p>Actualmente me formo en la Facultad de Artes perteneciente a la Universidad Nacional de La Plata, en el Profesorado y Licenciatura en Música, siendo mi especialización la Educación Musical. También he tomado clases particulares de algunos instrumentos de Música Tradicional Irlandesa con docentes idóneos.</p>
<p>A la par, dicto talleres y seminarios sobre Música Irlandesa y doy presentaciones en diversos contextos.</p>
<br><br>
<p><a class="boton__largo" href="https://docs.google.com/document/d/1tuRHuyoQMAX2roK4-RpK9DL1XfVyYmVpmTSupHZb_ik/edit?usp=sharing" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a></p>
</div>
</div>
</section>
<!-- SOBRE NUESTROS MIEMBROS -->
<section id="miembros" class="sobreNuestrosMiembros">
<div class="fondo__naranja biografia__cabecera">
<img class="foto__miniatura" src="images/foto_grupo.jpg" alt="Miembros de Toirtis en una presentación">
<div>
<h2>Sobre nuestros Miembros</h2>
<p><i>Conocenos!</i></p>
</div>
</div>
<div class="miembros__cuerpo texto__formateado">
<div>
<p>En Toirtis reina un clima de comunidad, camaraderia, y apoyo mutuo.<br>Todos nuestros miembros comparten estos ideales, lo que deriva en un ambiente ideodeo para el aprendizaje y la amistad.<br>Estamos anciosos por conocerte y compartir con tigo lo que amamos!</p>
<br><br>
<p><a class="boton__largo" href="https://photos.app.goo.gl/ZoV4a6Z4iUUE8WZA9" target="_blank" rel="noopener noreferrer">¡Conocenos!</a></p>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer id="contactos" class="fondo__verde">
<!-- SOCIALMEDIA Y LEGALES -->
<div class="SMyLegales"> <!-- class="footerItem contactos" -->
<div class="socialMedia__contenedor">
<a href="https://www.instagram.com/toir.tis" title="@toir.tis" target="_blank" rel="noopener noreferrer"><img class="socialMedia__img" src="images/instagram.png" alt="Instagram"></a>
</div>
<div class="socialMedia__contenedor">
<a href="https://www.youtube.com/@toir-tis" title="@toir-tis" target="_blank" rel="noopener noreferrer"><img class="socialMedia__img" src="images/youtube.png" alt="Youtube"></a>
</div>
<div class="socialMedia__contenedor">
<a href="http://wa.me/xxx" title="xxx" target="_blank" rel="noopener noreferrer"><img class="socialMedia__img" src="images/whatsapp.png" alt="Whatsapp"></a>
</div>
<div class="socialMedia__contenedor">
<a href="[email protected]" title="[email protected]" target="_blank" rel="noopener noreferrer"><img class="socialMedia__img" src="images/gmail.png" alt="E-mail"></a>
</div>
<div class="creditos">
<h4 onclick="mostrar();">Creditos externos</h4>
</div>
<div class="legales">
<p class="legal__font"><a href="pages/terminos_uso.html">Terminos de uso</a> | <a href="pages/politicas_privacidad.html">Politicas de privacidad</a> | <a href="pages/politicas-cookies.html">Politicas de Cookies</a></p>
</div>
</div>
<!-- REDGEM DEV-DESIGNER -->
<div class="redGem__container">
<h3><a href="http://wa.me/xxx" target="_blank" rel="noopener noreferrer">RedGem | Dev-Designer</a></h3>
<!-- <p>Creditos</p>
<div class="legal">
</div> -->
</div>
<!-- patrocinadores CON GRID -->
<div class="patrocinadores"> <!--class="footerItem patrocinadores"-->
<div>4</div>
<div>3</div>
<div>2</div>
<div class="patrocinador__1"><a href="https://www.instagram.com/kitsune_whistles" target="_blank" rel="noopener noreferrer"><img class="kitsune__logo" src="images/KitsuneLogoWhistleMedioBlanco.png" alt="Kitsune Whistles" title ="Patrocinado por Kitsune Whistles"></a></div>
<div><a href="http://wa.me/" title="¡Quiero Patrocinarlos!" target="_blank" rel="noopener noreferrer">+Nuevo</a></div>
<div>7</div>
<div>6</div>
<div>5</div>
<div class="patrocinadores__link"><a href="#" target="_blank" rel="noopener noreferrer">Conoce a nuestros Patrocinadores!</a></div>
</div>
<!-- VENTANA FLOTANTE CREDITOS -->
<div id="ventanaCreditos" class="ventana__creditos" onclick="esconder();" hidden>
<div>
<h2>Creditos externos</h2>
<ul>
<li><a href="https://www.flaticon.es/iconos-gratis/facebook" title="facebook iconos" target="_blank" rel="noopener noreferrer">Facebook iconos creados por Pixel perfect - Flaticon</a></li>
<li><a href="https://www.flaticon.es/iconos-gratis/instagram" title="instagram iconos" target="_blank" rel="noopener noreferrer">Instagram iconos creados por Pixel perfect - Flaticon</a></li>
<li><a href="https://www.flaticon.es/iconos-gratis/whatsapp" title="whatsapp iconos" target="_blank" rel="noopener noreferrer">Whatsapp iconos creados por Fathema Khanom - Flaticon</a></li>
<li><a href="https://www.flaticon.es/iconos-gratis/gmail" title="gmail iconos" target="_blank" rel="noopener noreferrer">Gmail iconos creados por Pixel perfect - Flaticon</a></li>
<li><a href="https://www.flaticon.es/iconos-gratis/youtube" title="youtube iconos" target="_blank" rel="noopener noreferrer">Youtube iconos creados por Md Tanvirul Haque - Flaticon</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>