[Muestra] Página web hecha en Wix

MAB

Destructor Lvl 2
El background no tiene calidad.
Si el contenedor va a tener esa textura, los botones no hacen juego con ella.

De todos modos si estás usando un template, el markup es asqueroso... lleno de divs con porquerías xD.
 

Rydzek

OlimpoAO Staff
Miembro del equipo
Moderador
Especialista de RRPP
Ante todo, es importante que aprendas a ver a las críticas de forma constructiva, sino te va a costar mucho progresar.
Entendé que hay personas que pueden ser un poco despectivas a la hora de criticar, pero en el fondo es probable que te termine siendo útil.
Obvio que también están los que dicen cualquier boludez, pero a esos los ignorás y listo.

Sobre la página, creo que es un buen inicio. Me gusta que tenga de fondo una imagen del juego, aunque estaría bueno que fuera de mejor calidad. También podrías hacerlo animado.
Igualmente, Wix no me gusta mucho. Creo que hay mejores plataformas, capaz te convendría buscar más.

Saludos!
 

Facu Chamas

Newbie Lvl 4
Con respecto a la pagina Web;
  • El fondo NO queda con los botones.
  • Podrías poner alguna que otra imagen GIF.
  • La letra del Logo es muy barata, la usan la mayoría Morpheus.
  • En el momento de hacer click en un apartado de la pagina, por ejemplo: antes de querer hacer click en Galería, Wiki, lo que sea tenga un movimiento, como si se oscureciera el botón, por ahí no se entiende lo que quiero decir, no me explique mucho.
Adiós.
 
Última edición por un moderador:

ElChachiz

Newbie Lvl 2
No me gusta , muy simple y poco original

Creo que tenes mucho espacios libres a los costados que no hacen nada
 

MAB

Destructor Lvl 2
Buena respuesta!! Hacete una pagina original y pasamela, asi aprendo de vos genio
Toma genio del wix, completa a gusto.



HTML

HTML:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="stylesheet.css" type="text/css" rel="stylesheet" />
    <title>Denyum AO</title>
</head>
<body>
    <header>
        <div id="logo"><img src="images/logo.png" alt="Logo"></div>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Descargas</a></li>
                <li><a href="#">Galería</a></li>
                <li><a href="#">Wiki</a></li>
                <li><a href="#">Soporte</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <img src="images/news.png" alt="Noticias">
        <div id="article_header">
            <span>11/09/2017</span>
            <span>MEB</span>
        </div>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </section>
    <footer>
        &copy; 2017 MEB-Sama.
    </footer>
</body>
</html>
CSS

CSS:
* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}

:root {
    font-size: 13px;
}

body {
    width: 100%;
    background: #262626;
    font-size: 1rem;
}

header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#logo {
    width: 100%;
    justify-content: center;
    text-align: center;
}

nav {
    width: 450px;
    margin: 0 auto;
}

nav ul {
    width: 450px;
    position: absolute;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

nav li {
    list-style: none;
    display: inline;
}

nav li a:link, nav li a:visited {
    text-decoration: none;
    font-size: 1rem;
    text-shadow: 1px 1px #000000;
    color: #f5f5f5;
    background: #81371e;
    box-shadow: inset 0 0 15px 3px #7b2f1b;
    padding: 10px 20px;
    border: 1px solid #7e3411;
    transition: all 0.3s ease;
}

nav li a:hover, nav li a:active {
    background: #5d2815;
    box-shadow: inset 0 0 15px 3px #4d1f11;
    color: #d3d3d3;
    border: 1px solid #602816;
    transition: all 0.3s ease;
}

section {
    width: 500px;
    height: 650px;
    margin: 0 auto;
    text-align: center;
    background: url("images/body.png") no-repeat center top;
}

section img {
    padding-top: 65px;
    margin: 0 auto;
}

#article_header {
    width: 350px;
    display: flex;
    justify-content: space-between;
    background: #b0a18d;
    border: 1px solid #a39480;
    padding: 3px;
    margin: 0 auto -1px auto;
}

#article_header span {
    font-size: 0.8rem;
    color: #565656;
}

article {
    width: 350px;
    margin: 0 auto;
    display: flex;
    text-align: justify;
    color: #565656;
    background: #b0a18d;
    border: 1px solid #a39480;
    padding: 10px;
}

footer {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 1rem;
    color: #565656;
}
 

mergui

The 'DM' Never Forgets.
Ex-Staff
Buena respuesta!! Hacete una pagina original y pasamela, asi aprendo de vos genio
Ninguna respuesta te viene bien xD...

Da miedo opinar, pero ahí va xD:

1.- La morpheus es bonita pero está muy quemada, de cara al usuario medio es una fuente acertada, pero la gente que tocó el photoshop más de 3 veces y se fija en esas cosas te va a odiar por usarla. La fuente de los botones lo mismo, es la misma que usa IAO, los users que puedas agarrar de IAO lo van a tomar como un plagio y te van a odiar también xD. No es que sean malas fuentes, pero estás aspirando a recoger usuarios que ya juegan a otros servidores, para entrar y ver lo mismo que en sus servidores, para qué cambiar?
2.- Antes tenías una foto de un AO pixelada, ahora tenés un orco también pixelado, intentá conseguir una imagen que tenga el tamaño adecuado, y si no la encontrás, juntar dos fotos con el photoshop es francamente fácil, un tutorial de 5 minutos y aprendés.
3.- Hay varias cosas que le añadiría si fuera vos, pero siendo que estás usando Wix supongo que no sabés programar, por si querés mirar tutoriales en internet:

- Habría que tener tres tipos de botones: Botón sin apretar sin el ratón encima, botón sin apretar con el ratón encima y botón apretado.
- El espacio central es demasiado pequeño, si pudieras ensancharlo y dejar menos fondo visible mejor, porque a fin de cuentas el espacio central es el espacio útil, el resto solo debería acompañar.
- La wiki, el texto se sale de los recuadros de texto xD.
- Los colores son muy monótonos, algún marquito de otro color(de el de los botones por ejemplo) que les de un poco de profundidad y alegría a la página, para todos los recuadros de texto y los dibujos de las clases quedaría genial.

Supongo que ahora me va a tocar mi insulto, pero estos son los fallos que le veo.
 

Gelfor

Dragón Ancestral Lvl 5
A mí me gusto, es simple y linda para la vista, igualmente tomaría las criticas que te dicen los usuarios y la mejoraría un poco más.

No podes tomar todas las criticas de mala manera, sino no pidas criticas. (Era obvio de un principio que todo el mundo iba a tener algo que criticar, la web no es perfecta, pero con el tiempo y las ganas de aceptar las criticas y usarlas para mejorarla, la web irá quedando mucho mejor).

Igualmente te recomiendo que aprendas lo básico de HTML5 CSS3, así podes hacer una web más a gusto y editarla en su totalidad, yo te puedo dar una mano si queres, no es difícil lo básico que se necesita para hacer una web simple.

PD: hablame al WPP, que perdí los contactos cuando me pase a la mierdas mas grande del Mundo que es IOS.
 

nereah

Newbie Lvl 3
Toma genio del wix, completa a gusto.



HTML

HTML:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="stylesheet.css" type="text/css" rel="stylesheet" />
    <title>Denyum AO</title>
</head>
<body>
    <header>
        <div id="logo"><img src="images/logo.png" alt="Logo"></div>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Descargas</a></li>
                <li><a href="#">Galería</a></li>
                <li><a href="#">Wiki</a></li>
                <li><a href="#">Soporte</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <img src="images/news.png" alt="Noticias">
        <div id="article_header">
            <span>11/09/2017</span>
            <span>MEB</span>
        </div>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </section>
    <footer>
        &copy; 2017 MEB-Sama.
    </footer>
</body>
</html>
CSS

CSS:
* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}

:root {
    font-size: 13px;
}

body {
    width: 100%;
    background: #262626;
    font-size: 1rem;
}

header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#logo {
    width: 100%;
    justify-content: center;
    text-align: center;
}

nav {
    width: 450px;
    margin: 0 auto;
}

nav ul {
    width: 450px;
    position: absolute;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

nav li {
    list-style: none;
    display: inline;
}

nav li a:link, nav li a:visited {
    text-decoration: none;
    font-size: 1rem;
    text-shadow: 1px 1px #000000;
    color: #f5f5f5;
    background: #81371e;
    box-shadow: inset 0 0 15px 3px #7b2f1b;
    padding: 10px 20px;
    border: 1px solid #7e3411;
    transition: all 0.3s ease;
}

nav li a:hover, nav li a:active {
    background: #5d2815;
    box-shadow: inset 0 0 15px 3px #4d1f11;
    color: #d3d3d3;
    border: 1px solid #602816;
    transition: all 0.3s ease;
}

section {
    width: 500px;
    height: 650px;
    margin: 0 auto;
    text-align: center;
    background: url("images/body.png") no-repeat center top;
}

section img {
    padding-top: 65px;
    margin: 0 auto;
}

#article_header {
    width: 350px;
    display: flex;
    justify-content: space-between;
    background: #b0a18d;
    border: 1px solid #a39480;
    padding: 3px;
    margin: 0 auto -1px auto;
}

#article_header span {
    font-size: 0.8rem;
    color: #565656;
}

article {
    width: 350px;
    margin: 0 auto;
    display: flex;
    text-align: justify;
    color: #565656;
    background: #b0a18d;
    border: 1px solid #a39480;
    padding: 10px;
}

footer {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 1rem;
    color: #565656;
}
Alguien me puede decir como hacer para subir esta pagina a wix???
Alguien me podría dar una mano por favor?
 
Arriba