Soy nuevo ayuda :-*

Iniciado por Panic0, 28 Septiembre 2020, 04:20 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Panic0

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 [Seleccionar]
<!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 [Seleccionar]
@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
Los ataques de pánico suelen comenzar de forma súbita, sin advertencia.

Drakaris

#1
28 Septiembre 2020, 13:15 PM Ultima modificación: 28 Septiembre 2020, 13:17 PM por Drakaris
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 (html) [Seleccionar]

<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)
Lo increible, no es lo que ves, sino como es

EdePC

#2
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)
Imprimir
Ir Arriba Páginas1
Acciones del Usuario