0

Vi un tutorial sobre como añadir un menu desplegable (no tenia ni idea como), lo añadi, y funciona bien solo que arruina todo lo demas, hace que el fondo y todo lo demas se centre y no llena toda la pantalla:

/* Fonts */
@font-face {
    font-family: "Point Free";
    src: url("fonts/pointfree.ttf");
}

@font-face {
    font-family: "Simple Type";
    src: url("fonts/Simpletype.ttf");
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
.header{
    width: 100%;
    height: 65px;
    background: #fff;
    position: fixed;
}
.container{
    max-width: 1100px;
    margin: auto;
}
.logo{
    float: left;
    line-height: 65px;
}
.menu{
    float: right;
    line-height: 65px;
}
.menu ul{
    display: flex;
    list-style: none;
}
.menu a{
    display: block;
    padding: 0px 20px;
    text-decoration: none;
    color: #000000;
    transition: all 500ms ease;
}
.menu a:hover{
    background: #ec529f;
    color: #fff;
}
.menu .submenu{
    background: #fff;
    box-shadow: 3px 10px 10px rgba(0,0,0,0.2);
    display: none;
}
.menu .submenu li a{
    line-height: 50px;
}
.menu ul li a:hover + ul, .menu .submenu:hover{
    display: block;
}



#firstPartOfBody {
    background: url("fondo-minimalista2.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}

#secondPartOfBody {
    background: url("fondo-minimalista-parte-2.jpg");
    background-size: 100%;
    background-repeat: repeat;
}

#title {
    font-family: "Simple Type";
    font-size: 100px;
    text-align: center;

    cursor: default;
}

#title2 {
    font-family: "Point Free";
    font-size: 70px;
    padding: 30px;
    color: #ff4da6;

    cursor: default;
}

#subtitle {
    font-family: "Point Free";
    text-align: center;
    font-size: 35px;

    cursor: default;
}

#firstParagraph {
    font-family: "Point Free";
    font-size: 25px;
    text-align: center;

    cursor: default;
}

#firstParagraph:hover {
    transform: scale(0.9);
}

#separator {
    font-family: "Point Free";
    font-size: 30px;
    text-align: center;

    cursor: default;
}

body::-webkit-scrollbar {
    width: 8px;
    background: rgb(49, 49, 49);
}

body::-webkit-scrollbar-thumb {
    background: #ec529f;
    border-radius: 5px;
}

#aplicationTitle {
    font-family: "Arial";
    font-size: 65px;
    margin-left: 100px;

    cursor: default;
}

#description {
    font-family: "Arial";
    font-size: 30px;
    margin-left: 180px;

    cursor: default;
}

.useButton {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 35px;
    color: #fff;
    margin-left: 650px;
    border-radius: 10px;
    border: solid #ec529f;
    background-color: #000;

    cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EasyHub</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <h1 style='font-family: "Simple Type";'>EasyHub</h1>
            </div>
            <nav class="menu">
                <ul>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Aplicaciones</a></li>
                    <li><a href="#">¿Por que EasyHub?</a></li>
                    <li><a href="#">Contacto</a></li>
                    
                </ul>
            </nav>
        </div>
    </header>


    <div class="container">
        <div id="firstPartOfBody">
            <br><br>
            <h1 id="title">EasyHub</h1>
            <br>
            <h3 id="subtitle">Tu hub de herramientas faciles</h3>
            <!-- <audio src="bgmusic.mp3" loop="1000000" autoplay="true" volume=20></audio> -->
            <!-- QUITAR EL COMENTARIO DEL AUDIO LUEGO -->
            <br><br><br><br><br>
            <p id="firstParagraph">
                EasyHub es un hogar de herramientas simples y <br>
                faciles de usar en el momento, cuenta con mas de<br>
                5 herramientas y que cada vez se suman mas y mas<br>
            </p>
            <p id="separator"><s>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</s></p>
            <p id="firstParagraph">
                Disfruta de herramientas sin costo, gratuitas<br>
                y utiles para tu dia a dia ¡Estamos las 24 horas<br>
                listos para ayudar!
            </p>
            <br>
        </div>
        <div id="secondPartOfBody">
            <br><br><br>
            <h3 id="title2"><s>ㅤ</s> Aplicaciones <s>ㅤㅤㅤㅤㅤㅤㅤㅤ</s></h3>
            <br><br>
            <h1 id="aplicationTitle" style="color: #ec529f;">● FreeWrite</h1>
            <br>
            <p id="description">
                Una amplia y gran herramienta libre<br>
                para escribir todo lo que quieras,<br>
                la Caja de Arena de la Escritura.
            </p>
            <input class="useButton" id="freeWriteButton" type="button" value="USAR AHORA">
            <br><br><br><br><br>


            <h1 id="aplicationTitle" style="color: #ec529f;">● Calculadora</h1>
            <br>
            <p id="description">
                Una simple y basica calculadora facil<br> 
                de usar y confunciones utiles para usar<br>
                en tu dia a dia
            </p>
            <input class="useButton" id="calculatorButton" type="button" value="USAR AHORA">
            <br><br><br><br><br><br>
            

            <h1 id="aplicationTitle" style="color: #ec529f;">● Cara o Cruz</h1>
            <br>
            <p id="description">
                El clasico juego de cara o cruz,<br>
                solo hay 2 posibilidades, ¡deja que<br>
                la suerte elija todo por ti!
            </p>
            <input class="useButton" id="faceOrCrossButton" type="button" value="USAR AHORA">
            <br><br><br><br><br>


            <h1 id="aplicationTitle" style="color: #ec529f;">● Color Picker</h1>
            <br>
            <p id="description">
                Encuentra el color que necesitas para<br>
                tu proximo proyecto facil y rapido
            </p>
            <input class="useButton" id="colorPickerButton" type="button" value="USAR AHORA">
            <br><br><br><br><br>


            <h1 id="aplicationTitle" style="color: #ec529f;">● Mora (Asistente Virtual)</h1>
            <br>
            <p id="description">
                Tu compañera web, existe y siempre<br>
                esta lista para ayudar o entretener
            </p>
            <input class="useButton" id="virtualAssistentButton" type="button" value="USAR AHORA">
            <br><br><br><br><br>
        </div>
    </div>
</body>
</html>

Y asi es como se ve (pongo la imagen porque no puedo incluir la imagen del fondo ni las fuentes)

introducir la descripción de la imagen aquí

Y no tiene que verse asi, tiene que el fondo cubrir toda la pantalla y que los textos se acomoden a la pantalla

Disculpen si no se dar muchos detalles, es que no se como solucionarlo y no se me ocurre como

Espero y me ayuden :D

Saludos.

4
  • Comenta o elimina esta línea dentro de la clase container de tu CSS: max-width: 1100px; Y si aun no te concence haz lo mismo con la siguiente que pone margin: auto; y ya nos diras si con eso se arregla
    – masterguru
    Commented el 31 ene. 2022 a las 6:08
  • @Skeletoos57 comenta los Css del container y cambialo por container-fuild si usas bootstrap es la clase para que te vaia el contenedor de punta a punta. El container normal te pone unos margenes. Aunque en el codigo no lo veo que lo uses pero. Otra solucion es ponerle un min-width:100vw; Commented el 31 ene. 2022 a las 7:44
  • @masterguru Gracias! Ya funciona perfectamente Commented el 31 ene. 2022 a las 15:15
  • De nada! Me alegro :-)
    – masterguru
    Commented el 31 ene. 2022 a las 15:15

1 respuesta 1

1

La solucion era quitar las lineas max-width: 1100px; y margin: auto; en el .container.

Gracias a los comentarios por su ayuda :)

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.