0

hice un index con su respectivo CSS, el index lo copio para lo que serian los enlaces, pero estos no copian del todo el estilo del CSS, me queda mal y no se cual es el problema. Pegare el Index.html, el servicios.html y el estilos.css gracias :D

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi sitio Web</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/612199579a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="estilos.css">


</head>

SERVICIOS.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi sitio Web</title>
    
    <link rel="stylesheet" href="estilos.css">
    <script src="https://kit.fontawesome.com/612199579a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


</head>
1
  • la línea de estilos.css en servicio.html ponelo abajo de los otros estilos, siempre te tiene que quedar abajo de todo las modificaciones que haces.
    – Roy
    Commented el 5 jul. 2021 a las 17:23

2 respuestas 2

-1

EL CODIGO CSS seria este

@import url('https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap');

body{
    background-color: #eee;
    color: #333;
    font-family: 'Otomanopee One', sans-serif;
}
a{
    text-decoration: none;
    color: dodgerblue;
}
a:hover{
    text-decoration: underline;
    color: darkblue;
}
img{
    width: 100%;
}

#navbar{
    background-color: black;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    z-index: 100;
    overflow: hidden;
}

#navbar ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.lista-sm{
    display: block;
}
#navbar li{
    float: left;
}

#navbar  li a{
    padding: 20px;
    display: inline-block;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
    color: aliceblue;
}

#navbar li.active a{
    color: red;
}

#navbar li a:hover{
    background-color: coral;
    color: black;
}

.myicono{
    color: aliceblue;
    font-size: 1.5em;
    padding: 10px;
    display: none;
}

#content{
    max-width: 1180px;
    position: relative;
    top: 80px;
    margin: 0 auto;
    background-color: #fff;
    padding: 2%;
}

#content header{
    height: 100px;
    padding: 10px 15px;
    background-color: #ddd;
    border-radius: 1em;
}

#principal{
    width: 40%;
    float: left;
    padding: 5px;
}
#secundario{
    width: 40%;
    float: left;
    padding: 5px;
}

#content aside{
    width: 20%;
    float: left;
    padding: 5px;
}

#content footer{
    clear: both;
    width: 100%;
    background-color: #ddd;
    height: 100px;
    padding: 25px;
}

@media screen and (max-width: 820px){
    #content{
        padding: 0;
        max-width: 100%;
    }
    #content header{
        padding: 0;
        border-radius: 0;
    }

    #principal{
        padding: 3%;
        width: 45%;
    }

    #secundario{
        float: right;
        padding: 3%;
        width: 45%;
    }
    #content aside{
        clear: both;
        padding: 5%;
        width: 100%;
    }
    #content footer{
        width: 100%;
        padding: 0;
    }
}

@media screen and (max-width: 600px){
    #content{
        width: auto;
    }

    #principal{
        width: auto;
        float: none;
        margin: 0px;
    }

    #secundario{
        width: auto;
        float: none;
        margin: 0px;
    }
    #content aside{
        padding: 0;
        width: auto;
    }
    #content footer{
        width: auto;
    }

    .lista-sm{
        display: none;
    }
    #navbar li{
        float: none;
        display: block;
    }
    #navbar li a{
        padding: 5px;
        text-align: left;
        width: 100%;
    }
    .myicono{
        display: block;
        text-align: right;
    }
}
1
  • Esto, va en la pregunta.. todas las publicaciones tienen un enlace editar debajo.. usalo, borra estas dos respuestas que no son respuestas, y agrega todo en la pregunta....
    – gbianchi
    Commented el 5 jul. 2021 a las 17:14
-1

como se ve en la imagen, cuando ambos son exactamente los mismos

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.