Crea Tu Web

Esta es una explicación mas completa del tutorial ya explicado en un video de mi canal

Creación

Sigue los pasos para crear tu web

• Descarga el archivo desde GitHub

• Dirígete a Glitch y crea una cuenta

• Crea un nuevo proyecto "glitch-hello-website"

• Dale Click al cubito que se encuentra a un lado de "Show" a ti te saldrá de otro color y con otro nombre

• Cámbiale el nombre (este será el "dominio" de tu link, Si usas "pedro" será pedro.glitch.me, Elije bien el nombre igual lo podrás cambiar cuando quieras), Igualmente puedes añadirle una descripción (opcional)

• Extra el .zip que descárgate anterior mente

• Oprime "New File"

• Oprime "Upload a File" y sube los archivos extraídos

Personalización

• Las siguientes partes son las primeras que puedes editar:

En la sección <meta name="theme-color" content="#00ffff"> Linea 9 Cambia content="#00ffff" Por el color hex de tu preferencia (debe ir dentro de las "")

• En la sección <meta property="og:title" content="Ejemplo"> Linea 10 Cambia content="Ejemplo" Por el titulo que se mostrara en el embed del link:

En la sección <meta property="og:site_name" content="Ejemplo"> Linea 11 Cambia content="Ejemplo" Por lo que quieras que salga arriba del titulo puede ser tu nombre :D

En la sección <meta property="og:image" content="https://cdn.discordapp.com/emojis/787446450581143612.gif?v=1"> Linea 12 Cambia https://cdn.discordapp.com/emojis/787446450581143612.gif?v=1 Por cualquier otro link de imagen .png, .jpg, .gif Tienes que hacerlo dentro de las ""

En la sección <meta property="og:description" content="Ejemplo de Discord"> Linea 13 Cambia content="Ejemplo de Discord" por cualquier otra descripción que quieras usar

Ahora editaras el icono que aparece en la pestaña.

En la sección <link rel="shortcut icon" type="" href="https://cdn.discordapp.com/emojis/787446450581143612.gif?v=1"> Linea 15 Cambia href="https://cdn.discordapp.com/emojis/787446450581143612.gif?v=1" por el icono que quieras usar (recuerda que debe ir dentro de "")

Personalizando la web

• Dirígete a la línea 27 y en la parte de url('https://media.discordapp.net/attachments/870482016116830208/875146079111352380/unknown.png'); cambia el link dentro de las ' ' por otro link que quieras usar como el Fondo de la web

• Ahora dirígete a la línea 32 y en la parte src="https://cdn.discordapp.com/emojis/787446450581143612.gif?v=1" cambia el link de dentro de las " " por cualquier otra imagen que quieras usar como Avatar de la web:

Personalización de Botones

Los botones son estos que te permitirán re direccionar a tus redes sociales u otro contenido

• Puedes eliminar los ya creados para ir personalizando los tuyos

Para crear tu propio boton es con lo siguiente: <a href="" class="btn discord-dropshadow animation hover" target="_blank"><i class="fab fa-discord"></i> Discord</a> Dentro de las "" del href="" Debe ir el link a donde se mandara al usuario y el class="btn discord-dropshadow animation hover" es color por lo cual lo puedes cambiar por cualquiera de los siguientes colores disponibles:

youtube whatsapp viber twitter twitch tumblr telegram steam spotify soundcloud snapchat slack skype reddit pinterest paypal npm linkedin line instagram google gitlab github facebook discord android amazon watermelon turquoise transparent sun-flower soft-purple silver secondary raw-purple rasberry pumpkin primary pink peter peach nephritis-blue honey lavender gold emerald cubered cardboard blurple black belize-hole aqua amethyst alizarin

• Suponiendo que escojes el color gold tu resultado seria class="btn gold-dropshadow animation hover" Solo se edita la parte antes de el dropshadow

El <i class="fab fa-discord"></i> es donde ira el "icono" por asi decirlo del cual va despues del fa- los iconos disponibles son:

youtube whatsapp viber twitter twitch tumblr telegram steam spotify soundcloud snapchat slack skype reddit pinterest paypal npm linkedin line instagram google gitlab github facebook discord android amazon

• Suponiendo que escojes el icono facebook tu resultado seria <i class="fab fa-facebook"></i> si lo unimos con lo anterior tenemos un resultado:

<a href="" class="btn golf-dropshadow animation hover" target="_blank"><i class="fab fa-facebook"></i> Discord</a> Asi que debemos cambiar el texto de la parte "Discord" por lo que queremos que diga y el resultado seria: <a href="" class="btn golf-dropshadow animation hover" target="_blank"><i class="fab fa-facebook"></i> Mi Facebook</a>

Ahora solo lo colocamos donde emos eliminado los botones anteriores y hacemos Ctrl + s y se guardara lo echo

Fin