 Autor
|
Tema: Soy nuevo ayuda :-* (Leído 3,398 veces)
|
Panic0
 Desconectado
Mensajes: 218
|
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  .Bueno les dejo el código. html <!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 @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
Mensajes: 286
Todo lo que puedas imaginar, lo puedes crear.
|
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: <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#msg2228589Pd: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
|
Lo increible, no es lo que ves, sino como es
|
|
|
|
EdePC
|
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  o si tienes conocimientos básicos ir directamente a los puntos que necesitas) |
|
|
|
|
En línea
|
|
|
|
|
| Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
|
Ayuda Soy nuevo
Sugerencias y dudas sobre el Foro
|
wilder
|
2
|
2,170
|
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
|
5,184
|
13 Agosto 2006, 23:14 pm
por Red Mx
|
|
|
|
[Ayuda] De nuevo...
Programación Visual Basic
|
Powa
|
8
|
3,485
|
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
|
2,472
|
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
|
2,820
|
30 Septiembre 2014, 10:20 am
por trig0
|
 |
