Esta página ha sido pensada para ser desarrollada con mobile first, y responsive design.
Puedes ver, haciendo la pantalla más pequeña, cómo diseñé su estructura para tablet o para móvil (por ejemplo, decidí ocultar este mismo texto en la versión de movil)
Como ayuda adicional, el logo se cambiará, según la versión de pantalla que estés viendo
En el diseño para tablet y movil, el encabezado h1 con mi nombre y el footer, los mantengo fijos, con lo que necesitarás hacer scroll para ver todo el contenido. El degradado, como podrás observar, lo he utilizado para el background de la propia página, suavizando el color base hasta blanco
Las tres imágenes superiores, en modo movil, aparecen en una columna, y en tablet/escritorio, en una fila
Antes que nada, ten en cuenta que para leer todo el contenido de aquí, lógicamente, debes desplazarte hacia abajo, ya que el footer es fijo, como muchas páginas y apps para móvil
En el vídeo, he puesto un marco para añadir los bordes redondeados (poquito, 7px, porque la verdad es que este recurso no me gusta demasiado), para las versiones tablet y escritorio.
Para la versión escritorio y tablet, el padding derecho e izquierdo son adaptativos, y para la versión movil, El video (y la capa que lo contiene) ocupa todo el tamaño horizontal de la pantalla, y hago desaparecer los bordes redondeados.