Imprimir Página - Soy nuevo ayuda :-*

Título: Soy nuevo ayuda :-*
Publicado por: Panic0 en 28 Septiembre 2020, 04:20 am

Hola buenas noches, soy nuevo usando html/css y estoy trabajando en un proyecto para la secundaria.Quiero hacer la primera pagina de mi web que sea Responsive,
no se como hacer esto averigüe con algo llamado media queries pero no me salio :huh:.Bueno les dejo el código.
html

Código:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="img/FavIcon/icon.png" type="image/x-icon">
    <title>PROYECTO FH2</title>
</head>
<nav>
    <div id="menu">
        <ul>
            <li><a href="html/Tenologia.html">Tecnologia</a></li>
            <li><a href="UAL.html">Ual</a></li>
            <li><a href="html/InglesEN.html">Ingles</a></li>
            <li><a href="CEI.html">Ciencias exp</a></li>
            <li><a href="html/IdiomaEsp.html">Idioma esp</a></li>
            <li><a href="Biologia.html">Biologia</a></li>
            <li><a href="RepTec.html">Rep.Tecnica</a></li>
            <li><a href="matematicas.html">Matematica</a></li>
            <li><a href="html/Taller.html">Taller</a></li>
        </ul>
    </div>
</nav>
<body>
    <div class="banner">
        <video autoplay muted loop>
            <source src="vid/background.mp4" type="video/mp4">
        </video>
        <div class="contenido">
            <h2>PROYECTO FH2</h2>
        </div>
    </div>
</body>
</html>

css

Código:

@import url(http://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swamp);


footer{
    margin-top: 38%;
    color: white;
    background-color: rgb(51, 51, 51);
    text-align: center;
    
}




body {
    background-color: black;
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
}

.banner{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    
}

.banner video{
    position: absolute;
    pointer-events: none;
    width: 2000px;
    top: 49px;

}




header {
    background-color: black;
}

#menu {
    z-index: 1;
    background-color: rgb(51, 51, 51);
    
}

#menu ul {
    list-style: none;
    padding: 0px;

    margin: 0;


}

#menu ul li {
    display: inline-flex;


}

nav #menu ul li a {
    
    color: white;
    text-decoration: none;
    padding: 15px;
    display: inline-block;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}





#menu ul li a:hover {
   background-color: gray;
 }


h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 5em;
    position: absolute;
    color: #fff;
    top: 200px;
}

Pd:la resolucion del video es 3840 × 2160 píxeles
Pd2:Soy nuevo seguro hay muchos errores en el código.No me insulten mucho pls ::)

Gracias

Título: Re: Soy nuevo ayuda :-*
Publicado por: Drakaris en 28 Septiembre 2020, 13:15 pm

Buenas! He visto que en css importas fuentes de google, te recomiendo que vayas a la url (http://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swamp) y descargate el código, ya que al estar en la red, puede ser modificada y eso se verá afectada a tu web. Para ello crea un archivo .css con el código, por ejemplo "fonts.css". Después ves a header y añade una etiqueta link:

Código

<head>
    <link rel="stylesheet" href="css/fonts.css">
</head>

Ok, ahora ya tendrás las fuentes cargadas, desde local, así te aseguras de que no se modificarán en un futuro. Así también puedes eliminar el @import de index.css

Para el responsive design, este trabaja con @media (media querys).
https://foro.elhacker.net/desarrollo_web/responsive_web-t506895.0.html;msg2228589#msg2228589

Citar

Pd:la resolucion del video es 3840 × 2160 píxeles

El responsive como lo queres, para pantallas >3840 px o <3840? En el ejemplo del otro post, puse max-width:600px que en ese caso era para moviles con resolucion de ancho <600px. Prueba en tu caso @media (max-width:3840)

Título: Re: Soy nuevo ayuda :-*
Publicado por: EdePC en 28 Septiembre 2020, 16:48 pm

Las Media Query son una herramienta más para lograr Responsive Web Design, dependerá de la complejidad del proyecto utilizarlas o no, ya que una página puede ser Responsive sin utilizar Media Query y viceversa.

Lo más habitual es utilizar primero Elementos Flexibles con medidas relativas, y Elementos Fluidos, logrados antiguamente con Float y ahora con FlexBox y Grid. Los media Query se usan más para cambiar el aspecto de la página dependiendo de la salida, por ejemplo en pantallas verticales, horizontales, de diferentes tamaños, en vista de impresión, etc, etc, etc.

Tienes que ser más puntual con tu solicitud de ayuda, no está bien visto que digas: "Tengo todo esto y lo quiero Responsive". Mejor has una pregunta concreta a un elemento, por ejemplo tu Elemento Video, decir que tienes ese elemento pero no se ve bien en tal circunstancia y quisieras que se vea de diferente manera, poniendo ejemplo para el caso.

Por tu pregunta general yo directo te recomendaría ir a un curso de Responsive Web Design, luego hacer tu tarea y solo cuando tengas algún problema puntual comentarlo en el foro.

- Yo te recomendaría este curso: https://www.youtube.com/playlist?list=PLvq-jIkSeTUbFYbzpJFN1GLMBZnm9hX5G (vas a necesitar una larga vida :laugh: o si tienes conocimientos básicos ir directamente a los puntos que necesitas)

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Panic0 en 28 Septiembre 2020, 04:20 am