Rubén Chávez

hola chicos termine el curso de css desde 0 (mi primer curso XD) he hice un sitio el el cual tengo todos los apuntes de las clases hecho por mi, todo, cada cosa ejemplos y explicaciones, solo tienen que ir uno de los enlaces https://mygithome.000webhostapp.com/CSS-Desde%200/[Index.html](https://Index.html) (solo cópienlo y borren los paracentesis y corchetes que ponde el sitio de ed.team ._.) o este enlace https://mygithome.000webhostapp.com/CSS-Desde%200/ (den click y en la url escriban al final de esta Index.html, Index con i mayúscula al principio.)

hola chicos termine el curso de css desde 0 (mi primer curso XD) he hice un sitio el el cual tengo todos los apuntes de las clases hecho por mi, todo, cada cosa ejemplos y explicaciones, solo tienen que ir uno de los enlaces https://mygithome.000webhostapp.com/CSS-Desde%200/[Index.html](https://Index.html) (solo cópienlo y borren los paracentesis y corchetes que ponde el sitio de ed.team ._.) o este enlace https://mygithome.000webhostapp.com/CSS-Desde%200/ (den click y en la url escriban index.html)

Hola chicos, para los que comentario o se dieron cuenta del fallo que al momento de subir arriba del todo vemos que el margin y el padding empujan de mas el flujo. Para solucionar esto lo que hice es que al tarjetear al body el margin de este sea 0. El ejemplo pueden ver mi página que también de hecho incluye apuntes de todo el curso, desde la clase 1 (introducción) hasta la clase 14. https://mygithome.000webhostapp.com/CSS-Desde%200/[Index.html](https://Index.html)

<div class="cajita"><iframe src="https://www.youtube.com/embed/-qlU9j5LR7Y"></iframe></div>

.cajita iframe {
background-color:red;
}

.cajita iframe::before {
content:'';
display:block;
padding-bottom:56.25%;
}

como caga este enfermito

.box-4 { --border-radius-y:120px; --border-radius-x:90px; background: hsl(10, 90%, 40%); width: 490px; height: 345px; padding:0.1px; border-top-left-radius:var(--border-radius-x) var(--border-radius-y); border-top-right-radius:var(--border-radius-x) var(--border-radius-y); border-bottom-right-radius:var(--border-radius-x) var(--border-radius-y); border-bottom-left-radius:var(--border-radius-x) var(--border-radius-y); } /Como recordatorio agrregamos padding con un leve aumento para solucionar el problema de colapsado de margin verticales :,v/ /Ahora el boton de play/

.play { --dad-width:115px; --border-width:58.3px; width: 0; height: 0; /* margin-left:150px; margin-top: 115px ;*/ margin: var(--dad-width) auto; border-left:var(--dad-width) solid #fff; border-top: var(--border-width) solid transparent; border-bottom: var(--border-width) solid transparent; } /Colocamos 155px de margin y de top porque equivalen a una 3ra parte del total del ancho del papá/