elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Arreglado, de nuevo, el registro del warzone (wargame) de EHN


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Soy nuevo ayuda :-*
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Soy nuevo ayuda :-*  (Leído 1,029 veces)
Panic0

Desconectado Desconectado

Mensajes: 142



Ver Perfil
Soy nuevo ayuda :-*
« 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


En línea

Los ataques de pánico suelen comenzar de forma súbita, sin advertencia.
Drakaris

Desconectado Desconectado

Mensajes: 240


Todo lo que puedas imaginar, lo puedes crear.


Ver Perfil
Re: Soy nuevo ayuda :-*
« Respuesta #1 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
  1. <head>
  2.    <link rel="stylesheet" href="css/fonts.css">
  3. </head>
  4.  

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)


« Última modificación: 28 Septiembre 2020, 13:17 pm por Drakaris » En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 1.753



Ver Perfil
Re: Soy nuevo ayuda :-*
« Respuesta #2 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)
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda Soy nuevo
Sugerencias y dudas sobre el Foro
wilder 2 1,061 Último mensaje 30 Octubre 2004, 05:06 am
por ¤ Nerviozzo ¤
[Ayuda] Ayuda para diseñar el nuevo Red Music 3.0 « 1 2 »
Diseño Gráfico
Red Mx 12 2,918 Último mensaje 13 Agosto 2006, 23:14 pm
por Red Mx
[Ayuda] De nuevo...
Programación Visual Basic
Powa 8 2,454 Último mensaje 1 Septiembre 2009, 02:03 am
por seba123neo
[AYUDA] Soy nuevo en java y necesito ayuda para meter imagenes en un .jar
Java
Noxware 0 1,322 Último mensaje 16 Septiembre 2014, 23:01 pm
por Noxware
[AYUDA][javascript] Soy muy nuevo en JS y necesito ayuda con este codogo
Desarrollo Web
Noxware 2 1,450 Último mensaje 30 Septiembre 2014, 10:20 am
por trig0
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines