Este commit está contenido en:
2025-09-13 11:33:38 -03:00
padre b7f5ec7012
commit c16005cf80
Se han modificado 22 ficheros con 13010 adiciones y 0 borrados

10
303.html Archivo ejecutable
Ver fichero

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content />
<meta name="author" content />
<title>303</title>
<meta http-equiv="refresh" content="0;URL='https://cdn.altomarketing.com/303'" />
</head>

10
403.html Archivo ejecutable
Ver fichero

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content />
<meta name="author" content />
<title>403</title>
<meta http-equiv="refresh" content="0;URL='https://cdn.altomarketing.com/403'" />
</head>

10
404.html Archivo ejecutable
Ver fichero

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content />
<meta name="author" content />
<title>404</title>
<meta http-equiv="refresh" content="0;URL='https://cdn.altomarketing.com/404'" />
</head>

10
500.html Archivo ejecutable
Ver fichero

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content />
<meta name="author" content />
<title>500</title>
<meta http-equiv="refresh" content="0;URL='https://cdn.altomarketing.com/500'" />
</head>

BIN
assets/favicon.ico Archivo ejecutable

Archivo binario no mostrado.

Después

Anchura:  |  Altura:  |  Tamaño: 23 KiB

BIN
assets/profile.png Archivo ejecutable

Archivo binario no mostrado.

Después

Anchura:  |  Altura:  |  Tamaño: 1010 KiB

2
chat/README.md Archivo ejecutable
Ver fichero

@@ -0,0 +1,2 @@
# chatSocketAchex
http://oscaruhp.github.io/chatSocketAchex

59
chat/chatSocketAchex.css Archivo ejecutable
Ver fichero

@@ -0,0 +1,59 @@
.chatpluginchat
{
list-style: none;
margin: 0;
padding: 0;
}
.chatpluginchat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chatpluginchat li.left .chat-body
{
margin-left: 60px;
}
.chatpluginchat li.right .chat-body
{
margin-right: 60px;
}
.chatpluginchat li .chat-body p
{
margin: 0;
color: #777777;
}
.panel .slidedown .glyphicon, .chatpluginchat .glyphicon
{
margin-right: 5px;
}
.panel-body
{
overflow-y: scroll;
height: 250px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

155
chat/chatSocketAchex.js Archivo ejecutable
Ver fichero

@@ -0,0 +1,155 @@
$.fn.extend({ChatSocket: function(opciones) {
var ChatSocket=this;
var idChat=$(ChatSocket).attr('id');
defaults = {
ws,
Room:"RoomDeveloteca",
pass:"1234",
lblTitulChat:" Chat Develoteca.com ",
lblCampoEntrada:"Menssage",
lblEnviar:"Send",
textoAyuda:"Develoteca",
Nombre:"Anónimo",
urlImg:"http://placehold.it/50/55C1E7/fff&text=U",
btnEntrar:"btnEntrar",
btnEnviar:"btnEnviar",
lblBtnEnviar:"Enviar",
lblTxtEntrar:"txtEntrar",
lblTxtEnviar:"txtMensaje",
lblBtnEntrar:"Enter",
idDialogo:"DialogoEntrada",
classChat:"",
idOnline:"ListaOnline",
lblUsuariosOnline:"Users joined",
lblEntradaNombre:"Name:",
panelColor:"success"
}
var opciones = $.extend({}, defaults, opciones);
var ws;
var Room=opciones.Room;
var pass=opciones.pass;
var lblTitulChat=opciones.lblTitulChat;
var lblCampoEntrada=opciones.lblCampoEntrada;
var lblEnviar=opciones.lblBtnEnviar;
var textoAyuda=opciones.textoAyuda;
var Nombre=opciones.Nombre;
var urlImg=opciones.urlImg;
var btnEntrar=opciones.btnEntrar;
var btnEnviar=opciones.btnEnviar;
var lblBtnEnviar=opciones.lblBtnEnviar;
var lblTxtEntrar=opciones.lblTxtEntrar;
var lblTxtEnviar=opciones.lblTxtEnviar;
var lblBtnEntrar=opciones.lblBtnEntrar;
var idDialogo=opciones.idDialogo;
var classChat=opciones.classChat;
var idOnline=opciones.idOnline;
var lblUsuariosOnline=opciones.lblUsuariosOnline;
var lblEntradaNombre=opciones.lblEntradaNombre;
var panelColor=opciones.panelColor;
if( $('#'+idOnline).length==0 )
{
idOnline=idChat+"listaOnline";
$('#'+idChat).append('<br/><div id="'+idOnline+'"></div>');
}
function IniciarConexion(){
conex='{"setID":"'+Room+'","passwd":"'+pass+'"}';
ws= new WebSocket("ws://achex.ca:4010");
ws.onopen= function(){ ws.send(conex); }
ws.onmessage= function(Mensajes){
var MensajesObtenidos=Mensajes.data;
var obj = jQuery.parseJSON(MensajesObtenidos);
AgregarItem(obj);
if(obj.sID!=null){
if( $('#'+obj.sID).length==0 )
{
$('#listaOnline').append('<li class="list-group-item" id="'+obj.sID+'"><span class="label label-success">&#9679;</span> - '+obj.Nombre+'</li>');
}
}
}
ws.onclose= function(){
alert("Conexión cerrada");
}
}
IniciarConexion();
function iniciarChat(){
Nombre=$('#'+lblTxtEntrar).val();
$('#'+idDialogo).hide();
$('#'+idOnline).show();
CrearChat();
UsuarioOnline();
getOnline();
}
function CrearEntrada(){
$('#'+idChat).append('<div id="'+idDialogo+'" class="'+classChat+'" id="InputNombre"><div class="panel-footer" style="margin-top:100px;"><div class="input-group"><input id="'+lblTxtEntrar+'" type="text" class="form-control input-sm" placeholder="'+lblEntradaNombre+'"><span class="input-group-btn"><button id="'+btnEntrar+'" class="btn btn-success btn-sm" >'+lblBtnEntrar+'</button></span></div></div></div>');
$('#'+idOnline).append(' <div class="panel panel-'+panelColor+'"><div class="panel-heading"><span class="glyphicon glyphicon-user"></span> '+lblUsuariosOnline+'</div><div class="panel-body"><ul class="list-group" id="listaOnline"></ul></div><div class="panel-footer"><div class="input-group"><div><a href="http://develoteca.com">by develoteca.com</a></div></span></div></div></div>');
$("#"+lblTxtEntrar).keyup(function (e) {if (e.keyCode == 13) { iniciarChat(); }});
$("#"+btnEntrar).click(function(){
iniciarChat();
});
}
function CrearChat(){
$('#'+idChat ).append( '<div class="'+classChat+'"><div class="panel panel-'+panelColor+'"><div class="panel-heading"><span class="glyphicon glyphicon-comment"></span>'+lblTitulChat+" : "+Nombre+'<div class="btn-group pull-right"><button type="button" onclick="alert(\''+textoAyuda+'\')" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-chevron-down"></span></button></div></div><div class="panel-body"><ul class="chatpluginchat"></ul></div><div class="panel-footer"><div class="input-group"><input id="'+lblTxtEnviar+'" type="text" class="form-control input-sm" placeholder="'+lblCampoEntrada+'" /><span class="input-group-btn"><button class="btn btn-warning btn-sm" id="'+btnEnviar+'">'+lblEnviar+'</button></span></div></div></div></div><li class="left clearfix itemtemplate" style="display:none"><span class="chat-img pull-left"><img src="'+urlImg+'" alt="User Avatar" class="img-circle" id="Foto"/></span><div class="chat-body clearfix"><div class="header"><strong class="primary-font" id="Nombre">Nombre</strong><small class="pull-right text-muted"><span class="glyphicon glyphicon-asterisk"></span><span id="Tiempo">12 mins ago</span></small></div> <p id="Contenido">Contenido</p></div></li>');
$("#"+lblTxtEnviar).keyup(function (e) {if (e.keyCode == 13) { EnviarMensaje();}});
$("#"+btnEnviar).click(function () {EnviarMensaje();});
}
function EnviarMensaje(){
ws.send('{"to":"'+Room+'","Nombre":"'+Nombre+'","Contenido":"'+$('#'+lblTxtEnviar).val()+'"}');
$("#"+lblTxtEnviar).val('');
};
function UsuarioOnline(){
ws.send('{"to":"'+Room+'","Nombre":"'+Nombre+'"}');
}
function AgregarItem(Obj){
if((Obj.Contenido!=null)&&(Obj.Nombre!=null)){
$( ".itemtemplate" ).clone().appendTo( ".chatpluginchat" );
$('.chatpluginchat .itemtemplate').show(10);
$('.chatpluginchat .itemtemplate #Nombre').html(Obj.Nombre);
$('.chatpluginchat .itemtemplate #Contenido').html(Obj.Contenido);
var formattedDate = new Date();
var d = formattedDate.getUTCDate();
var m = formattedDate.getMonth();
var y = formattedDate.getFullYear();
var h= formattedDate.getHours();
var min= formattedDate.getMinutes();
Fecha=d+"/"+m+"/"+y+" "+h+":"+min;
$('.chatpluginchat .itemtemplate #Tiempo').html(Fecha);
$('.chatpluginchat .itemtemplate').removeClass("itemtemplate");
}
}
function getOnline() {
setInterval(UsuarioOnline, 3000);
}
CrearEntrada();
// Fin
}
});

5
chat/css/bootstrap.min.css vendido Archivo ejecutable

Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas

232
chat/css/prism.css Archivo ejecutable
Ver fichero

@@ -0,0 +1,232 @@
/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+clike+javascript */
/**
* prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
* @author Tim Shedor
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
position: relative;
margin: .5em 0;
-webkit-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
-moz-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
border-left: 10px solid #358ccb;
background-color: #fdfdfd;
background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
background-size: 3em 3em;
background-origin: content-box;
overflow: visible;
max-height: 30em;
}
code[class*="language"] {
max-height: inherit;
height: 100%;
padding: 0 1em;
display: block;
overflow: auto;
}
/* Margin bottom to accomodate shadow */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background-color: #fdfdfd;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 1em;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
position: relative;
padding: .2em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
-ms-border-radius: 0.3em;
-o-border-radius: 0.3em;
border-radius: 0.3em;
color: #c92c2c;
border: 1px solid rgba(0, 0, 0, 0.1);
}
pre[class*="language-"]:before,
pre[class*="language-"]:after {
content: '';
z-index: -2;
display: block;
position: absolute;
bottom: 0.75em;
left: 0.18em;
width: 40%;
height: 20%;
-webkit-box-shadow: 0px 13px 8px #979797;
-moz-box-shadow: 0px 13px 8px #979797;
box-shadow: 0px 13px 8px #979797;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
:not(pre) > code[class*="language-"]:after,
pre[class*="language-"]:after {
right: 0.75em;
left: auto;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #7D8B99;
}
.token.punctuation {
color: #5F6364;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
color: #c92c2c;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.function,
.token.builtin,
.token.inserted {
color: #2f9c0a;
}
.token.operator,
.token.entity,
.token.url,
.token.variable {
color: #a67f59;
background: rgba(255, 255, 255, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword,
.token.class-name {
color: #1990b8;
}
.token.regex,
.token.important {
color: #e90;
}
.language-css .token.string,
.style .token.string {
color: #a67f59;
background: rgba(255, 255, 255, 0.5);
}
.token.important {
font-weight: normal;
}
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.namespace {
opacity: .7;
}
@media screen and (max-width: 767px) {
pre[class*="language-"]:before,
pre[class*="language-"]:after {
bottom: 14px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
/* Plugin styles */
.token.tab:not(:empty):before,
.token.cr:before,
.token.lf:before {
color: #e0d7d1;
}
/* Plugin styles: Line Numbers */
pre[class*="language-"].line-numbers {
padding-left: 0;
}
pre[class*="language-"].line-numbers code {
padding-left: 3.8em;
}
pre[class*="language-"].line-numbers .line-numbers-rows {
left: 0;
}
/* Plugin styles: Line Highlight */
pre[class*="language-"][data-line] {
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
}
pre[data-line] code {
position: relative;
padding-left: 4em;
}
pre .line-highlight {
margin-top: 0;
}

166
chat/index.htm Archivo ejecutable
Ver fichero

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>chatSocketAchex.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/prism.css">
<script src="js/jquery.min.js"></script>
<script src="js/prism.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="chatSocketAchex.js"></script>
<link rel="stylesheet" type="text/css" href="chatSocketAchex.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="well" >
<a href="http://develoteca.com">
<img src="http://develoteca.com/wp-content/themes/site/img/develoteca.png"/>
<br/>by develoteca.com
</a>
</div>
<a href="https://github.com/oscaruhp/chatSocketAchex/archive/gh-pages.zip" class="btn3d btn btn-success btn-lg">Download v1.0</a>
<br/><br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- lateral -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-4331617637495482"
data-ad-slot="7438564459"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="col-md-12 well">
<h3>Thank you for comments</h3>
<div id="fb-root"></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_MX/sdk.js#xfbml=1&version=v2.5&appId=132799306837455";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://oscaruhp.github.io/chatSocketAchex/" data-width="300" data-numposts="5"></div>
</div>
</div>
<div class="col-md-8">
<br/>
<h1 class="text-center"><span style="color:#449D44">chatSocketAchex</span> jQuery Plugin</h1>
<h1>chatSocketAchex (Demo)</h1>
<div class="row alert alert-info">
<div class="col-lg-4">
<div id="ListaOnline">
</div>
</div>
<div class="col-lg-8">
<div id="Elchat"></div>
</div>
</div>
<script type="text/javascript">
$('#Elchat').ChatSocket({'lblEntradaNombre':'Enter a user name in the field below for the chat room'});
</script>
<h2>chatSocketAchex jQuery</h2>
<h3>Quick start</h3>
1.- Include the files
<pre><code class="language-markup">
<br>
&lt;!-- Bootstrap and JQuery --&gt;<br>
&lt;script src=&quot;jquery.min.js&quot;&gt; &lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot;&gt;
&lt;!-- Plugin --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;chatSocketAchex.css&quot;&gt;
&lt;script src=&quot;chatSocketAchex.js&quot;&gt;&lt;/script&gt;
</code></pre>
2.- Create HTML Element
<pre><code class="language-markup">
&lt;div id=&quot;Elchat&quot;&gt;&lt;/div&gt;
</code></pre>
3.- Call the the plugin on a container as your wish
<pre><code class="language-javascript">
$('#Elchat').ChatSocket();
</code></pre>
4.- All done!
<h2>Options</h2>
you can custom by passing options when call the plugin, all available options are listed below.
call the the plugin on a container wish you wish
<pre><code class="language-javascript">
$('#Elchat').ChatSocket({
option: value,
option2: value2
});
</code></pre>
Demo (Options)
<pre><code class="language-javascript">
{
Room:&quot;RoomDeveloteca&quot;, // important - room or user
pass:&quot;1234&quot;, // important - pass of room or user
lblTitulChat:&quot; Chat Develoteca.com &quot;, //Chat Name
lblCampoEntrada:&quot;Menssage&quot;,
lblEnviar:&quot;Send&quot;,
textoAyuda:&quot;Develoteca&quot;, // Help button
Nombre:&quot;Anónimo&quot;, // default Name.
urlImg:&quot;http://placehold.it/50/55C1E7/fff&amp;text=U&quot;, // Avatar chat
btnEntrar:&quot;btnEntrar&quot;,
btnEnviar:&quot;btnEnviar&quot;,
lblBtnEnviar:&quot;Enviar&quot;,
lblTxtEntrar:&quot;txtEntrar&quot;,
lblTxtEnviar:&quot;txtMensaje&quot;,
lblBtnEntrar:&quot;Enter&quot;, // Joined button
idDialogo:&quot;DialogoEntrada&quot;,
classChat:&quot;&quot;, // add class chat
idOnline:&quot;ListaOnline&quot;, // id control users joined
lblUsuariosOnline:&quot;Users joined&quot;, // text users online
lblEntradaNombre:&quot;Name:&quot;,
panelColor:&quot;success&quot;
}
</code></pre>
<div class="panel panel-default">
<div class="panel-heading"><h1>&nbsp;</h1></div>
</div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74824848-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

49
chat/index.html Archivo ejecutable
Ver fichero

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>chatSocketAchex.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/prism.css">
<script src="js/jquery.min.js"></script>
<script src="js/prism.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="chatSocketAchex.js"></script>
<link rel="stylesheet" type="text/css" href="chatSocketAchex.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<br/>
<div class="row alert alert-info">
<div class="col-lg-4">
<div id="ListaOnline">
</div>
</div>
<div class="col-lg-8">
<div id="Elchat"></div>
</div>
</div>
<script type="text/javascript">
$('#Elchat').ChatSocket({'lblEntradaNombre':'Enter a user name in the field below for the chat room'});
</script>

7
chat/js/bootstrap.min.js vendido Archivo ejecutable

Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas

5
chat/js/jquery.min.js vendido Archivo ejecutable

Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas

6
chat/js/prism.js Archivo ejecutable
Ver fichero

@@ -0,0 +1,6 @@
/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+clike+javascript */
self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.map(function(e){return t.util.clone(e)})}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e];if(2==arguments.length){a=arguments[1];for(var l in a)a.hasOwnProperty(l)&&(i[l]=a[l]);return i}var s={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var l in a)a.hasOwnProperty(l)&&(s[l]=a[l]);s[o]=i[o]}return t.languages.DFS(t.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=s)}),r[e]=s},DFS:function(e,n,a){for(var r in e)e.hasOwnProperty(r)&&(n.call(e,r,e[r],a||r),"Object"===t.util.type(e[r])?t.languages.DFS(e[r],n):"Array"===t.util.type(e[r])&&t.languages.DFS(e[r],n,r))}},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];)t.highlightElement(a,e===!0,n)},highlightElement:function(a,r,i){for(var l,s,o=a;o&&!e.test(o.className);)o=o.parentNode;if(o&&(l=(o.className.match(e)||[,""])[1],s=t.languages[l]),a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=a.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l),s){var u=a.textContent;if(u){u=u.replace(/^(?:\r?\n|\r)/,"");var g={element:a,language:l,grammar:s,code:u};if(t.hooks.run("before-highlight",g),r&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g)},c.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g)}}},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i)n[l]=i[l];delete n.rest}e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var s=n[l];s="Array"===t.util.type(s)?s:[s];for(var o=0;o<s.length;++o){var u=s[o],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var s="";for(var o in i.attributes)s+=o+'="'+(i.attributes[o]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+s+">"+i.content+"</"+i.tag+">"},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);;
Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[^\s>\/]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&amp;/,"&"))});;
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/i,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css},alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));;
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};;
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/(?!\d)[a-z0-9_$]+(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/i,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});;

11734
css/styles.css Archivo ejecutable

La diferencia del archivo ha sido suprimido porque es demasiado grande Cargar Diff

238
index.html Archivo ejecutable
Ver fichero

@@ -0,0 +1,238 @@
<?php $('#Elchat').ChatSocket(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title> Radio Widget</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Custom Google font-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<style>
.py-5 { padding-top: 0 !important;}
.py-3 { padding-bottom: 0 !important;}
body {background-image: url("road2.jpg");}
</style>
</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
<!-- Navigation-->
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
<div class="container px-5">
<a class="navbar-brand" href="index.html"><span class="fw-bolder text-primary">Radio Widget</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
</div>
</nav>-->
<!-- Header-->
<header class="py-5">
<div class="container px-5 pb-5">
<div class="row gx-5 align-items-center">
<div class="col-xxl-5">
<!-- Header text content-->
<div class="text-center text-xxl-start">
<div class="badge bg-gradient-primary-to-secondary text-white mb-4"><div class="text-uppercase">Noticias &middot; Música &middot; Entrevistas</div></div>
<div class="fs-3 fw-light text-muted">Bienvenidos a</div>
<h1 class="display-3 fw-bolder mb-5"><span class="text-gradient d-inline">Radio Widget</span></h1>
<div class="text-left my-5">
<div id="tlkio" data-channel="radiowidget" data-theme="theme--night" style="width:100%;height:400px;"></div><script async src="http://tlk.io/embed.js" type="text/javascript"></script>
</div>
<div class="text-left my-5">
<p class="text-muted">Seguinos en nuestras redes</p>
<div class="d-flex justify-content-left fs-2 gap-4">
<a class="text-gradient" href="#!"><i class="bi bi-facebook"></i></a>
<a class="text-gradient" href="#!"><i class="bi bi-instagram"></i></a>
<a class="text-gradient" href="#!"><i class="bi bi-youtube"></i></a>
<a class="text-gradient" href="#!"><i class="bi bi-tiktok"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xxl-7">
<!-- Header profile picture-->
<div class="d-flex justify-content-center mt-5 mt-xxl-0">
<div class="profile ">
<!-- <div class="profile bg-gradient-primary-to-secondary">-->
<!-- TIP: For best results, use a photo with a transparent background like the demo example below-->
<!-- Watch a tutorial on how to do this on YouTube (link)-->
<iframe src="https://radio31.servidorderadio.net/widget/audio-player/3" height="800px" width="100%" frameBorder="0"></iframe>
<div class="dots-1">
<!-- SVG Dots-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 191.6 1215.4" style="enable-background: new 0 0 191.6 1215.4" xml:space="preserve">
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)">
<path d="M227.7,12788.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,12801.6,289.7,12808.6,227.7,12788.6z"></path>
<path d="M1507.7,12788.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262 C1663.7,12801.6,1569.7,12808.6,1507.7,12788.6z"></path>
<path d="M227.7,11508.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,11521.6,289.7,11528.6,227.7,11508.6z"></path>
<path d="M1507.7,11508.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262 C1663.7,11521.6,1569.7,11528.6,1507.7,11508.6z"></path>
<path d="M227.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,10241.6,289.7,10248.6,227.7,10228.6z"></path>
<path d="M1507.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,10241.6,1569.7,10248.6,1507.7,10228.6z"></path>
<path d="M227.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,8961.6,289.7,8968.6,227.7,8948.6z"></path>
<path d="M1507.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,8961.6,1569.7,8968.6,1507.7,8948.6z"></path>
<path d="M227.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,7681.6,289.7,7688.6,227.7,7668.6z"></path>
<path d="M1507.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,7681.6,1569.7,7688.6,1507.7,7668.6z"></path>
<path d="M227.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,6401.6,289.7,6408.6,227.7,6388.6z"></path>
<path d="M1507.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,6401.6,1569.7,6408.6,1507.7,6388.6z"></path>
<path d="M227.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,5121.6,289.7,5128.6,227.7,5108.6z"></path>
<path d="M1507.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,5121.6,1569.7,5128.6,1507.7,5108.6z"></path>
<path d="M227.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,3841.6,289.7,3848.6,227.7,3828.6z"></path>
<path d="M1507.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,3841.6,1569.7,3848.6,1507.7,3828.6z"></path>
<path d="M227.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,2561.6,289.7,2568.6,227.7,2548.6z"></path>
<path d="M1507.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,2561.6,1569.7,2568.6,1507.7,2548.6z"></path>
<path d="M227.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,1281.6,289.7,1288.6,227.7,1268.6z"></path>
<path d="M1507.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,1281.6,1569.7,1288.6,1507.7,1268.6z"></path>
</g>
</svg>
<!-- END of SVG dots-->
</div>
<div class="dots-2">
<!-- SVG Dots-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 191.6 1215.4" style="enable-background: new 0 0 191.6 1215.4" xml:space="preserve">
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)">
<path d="M227.7,12788.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,12801.6,289.7,12808.6,227.7,12788.6z"></path>
<path d="M1507.7,12788.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262 C1663.7,12801.6,1569.7,12808.6,1507.7,12788.6z"></path>
<path d="M227.7,11508.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,11521.6,289.7,11528.6,227.7,11508.6z"></path>
<path d="M1507.7,11508.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262 C1663.7,11521.6,1569.7,11528.6,1507.7,11508.6z"></path>
<path d="M227.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,10241.6,289.7,10248.6,227.7,10228.6z"></path>
<path d="M1507.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,10241.6,1569.7,10248.6,1507.7,10228.6z"></path>
<path d="M227.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,8961.6,289.7,8968.6,227.7,8948.6z"></path>
<path d="M1507.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,8961.6,1569.7,8968.6,1507.7,8948.6z"></path>
<path d="M227.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,7681.6,289.7,7688.6,227.7,7668.6z"></path>
<path d="M1507.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,7681.6,1569.7,7688.6,1507.7,7668.6z"></path>
<path d="M227.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,6401.6,289.7,6408.6,227.7,6388.6z"></path>
<path d="M1507.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,6401.6,1569.7,6408.6,1507.7,6388.6z"></path>
<path d="M227.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,5121.6,289.7,5128.6,227.7,5108.6z"></path>
<path d="M1507.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,5121.6,1569.7,5128.6,1507.7,5108.6z"></path>
<path d="M227.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,3841.6,289.7,3848.6,227.7,3828.6z"></path>
<path d="M1507.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,3841.6,1569.7,3848.6,1507.7,3828.6z"></path>
<path d="M227.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,2561.6,289.7,2568.6,227.7,2548.6z"></path>
<path d="M1507.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,2561.6,1569.7,2568.6,1507.7,2548.6z"></path>
<path d="M227.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,1281.6,289.7,1288.6,227.7,1268.6z"></path>
<path d="M1507.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,1281.6,1569.7,1288.6,1507.7,1268.6z"></path>
</g>
</svg>
<!-- END of SVG dots-->
</div>
<div class="dots-3">
<!-- SVG Dots-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 191.6 1215.4" style="enable-background: new 0 0 191.6 1215.4" xml:space="preserve">
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)">
<path d="M227.7,12788.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,12801.6,289.7,12808.6,227.7,12788.6z"></path>
<path d="M1507.7,12788.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262 C1663.7,12801.6,1569.7,12808.6,1507.7,12788.6z"></path>
<path d="M227.7,11508.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,11521.6,289.7,11528.6,227.7,11508.6z"></path>
<path d="M1507.7,11508.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262 C1663.7,11521.6,1569.7,11528.6,1507.7,11508.6z"></path>
<path d="M227.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,10241.6,289.7,10248.6,227.7,10228.6z"></path>
<path d="M1507.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,10241.6,1569.7,10248.6,1507.7,10228.6z"></path>
<path d="M227.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,8961.6,289.7,8968.6,227.7,8948.6z"></path>
<path d="M1507.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,8961.6,1569.7,8968.6,1507.7,8948.6z"></path>
<path d="M227.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,7681.6,289.7,7688.6,227.7,7668.6z"></path>
<path d="M1507.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,7681.6,1569.7,7688.6,1507.7,7668.6z"></path>
<path d="M227.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,6401.6,289.7,6408.6,227.7,6388.6z"></path>
<path d="M1507.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,6401.6,1569.7,6408.6,1507.7,6388.6z"></path>
<path d="M227.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,5121.6,289.7,5128.6,227.7,5108.6z"></path>
<path d="M1507.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,5121.6,1569.7,5128.6,1507.7,5108.6z"></path>
<path d="M227.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,3841.6,289.7,3848.6,227.7,3828.6z"></path>
<path d="M1507.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,3841.6,1569.7,3848.6,1507.7,3828.6z"></path>
<path d="M227.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,2561.6,289.7,2568.6,227.7,2548.6z"></path>
<path d="M1507.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,2561.6,1569.7,2568.6,1507.7,2548.6z"></path>
<path d="M227.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,1281.6,289.7,1288.6,227.7,1268.6z"></path>
<path d="M1507.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,1281.6,1569.7,1288.6,1507.7,1268.6z"></path>
</g>
</svg>
<!-- END of SVG dots-->
</div>
<div class="dots-4">
<!-- SVG Dots-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 191.6 1215.4" style="enable-background: new 0 0 191.6 1215.4" xml:space="preserve">
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)">
<path d="M227.7,12788.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,12801.6,289.7,12808.6,227.7,12788.6z"></path>
<path d="M1507.7,12788.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262 C1663.7,12801.6,1569.7,12808.6,1507.7,12788.6z"></path>
<path d="M227.7,11508.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,11521.6,289.7,11528.6,227.7,11508.6z"></path>
<path d="M1507.7,11508.6c-151-50-253-216-222-362c25-119,136-230,254-255c194-41,395,142,375,339c-11,105-90,213-190,262 C1663.7,11521.6,1569.7,11528.6,1507.7,11508.6z"></path>
<path d="M227.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,10241.6,289.7,10248.6,227.7,10228.6z"></path>
<path d="M1507.7,10228.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,10241.6,1569.7,10248.6,1507.7,10228.6z"></path>
<path d="M227.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,8961.6,289.7,8968.6,227.7,8948.6z"></path>
<path d="M1507.7,8948.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,8961.6,1569.7,8968.6,1507.7,8948.6z"></path>
<path d="M227.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,7681.6,289.7,7688.6,227.7,7668.6z"></path>
<path d="M1507.7,7668.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,7681.6,1569.7,7688.6,1507.7,7668.6z"></path>
<path d="M227.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,6401.6,289.7,6408.6,227.7,6388.6z"></path>
<path d="M1507.7,6388.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,6401.6,1569.7,6408.6,1507.7,6388.6z"></path>
<path d="M227.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,5121.6,289.7,5128.6,227.7,5108.6z"></path>
<path d="M1507.7,5108.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,5121.6,1569.7,5128.6,1507.7,5108.6z"></path>
<path d="M227.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,3841.6,289.7,3848.6,227.7,3828.6z"></path>
<path d="M1507.7,3828.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,3841.6,1569.7,3848.6,1507.7,3828.6z"></path>
<path d="M227.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,2561.6,289.7,2568.6,227.7,2548.6z"></path>
<path d="M1507.7,2548.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,2561.6,1569.7,2568.6,1507.7,2548.6z"></path>
<path d="M227.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C383.7,1281.6,289.7,1288.6,227.7,1268.6z"></path>
<path d="M1507.7,1268.6c-105-35-200-141-222-248c-43-206,163-412,369-369c155,32,275,190,260,339c-11,105-90,213-190,262 C1663.7,1281.6,1569.7,1288.6,1507.7,1268.6z"></path>
</g>
</svg>
<!-- END of SVG dots-->
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- About Section-->
<!-- <section class="bg-light py-5">
<div class="container px-5">
<div class="row gx-5 justify-content-center">
<div class="col-xxl-8">
<div class="text-center my-5">
<h2 class="display-5 fw-bolder"><span class="text-gradient d-inline">About Me</span></h2>
<p class="lead fw-light mb-4">My name is Start Bootstrap and I help brands grow.</p>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit dolorum itaque qui unde quisquam consequatur autem. Eveniet quasi nobis aliquid cumque officiis sed rem iure ipsa! Praesentium ratione atque dolorem?</p>
<div class="d-flex justify-content-center fs-2 gap-4">
<a class="text-gradient" href="#!"><i class="bi bi-twitter"></i></a>
<a class="text-gradient" href="#!"><i class="bi bi-linkedin"></i></a>
<a class="text-gradient" href="#!"><i class="bi bi-github"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>-->
</main>
<!-- Footer-->
<!-- <footer class="bg-light py-4 mt-auto">
<div class="container px-5">
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
<div class="col-auto"><div class="small m-0">Copyright &copy; Your Website 2024</div></div>
<div class="col-auto">
<a class="small" href="#!">Link 1</a>
<span class="mx-1">&middot;</span>
<a class="small" href="#!">Link 2</a>
<span class="mx-1">&middot;</span>
<a class="small" href="#!">Link 3</a>
</div>
</div>
</div>
</footer>-->
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>

7
js/scripts.js Archivo ejecutable
Ver fichero

@@ -0,0 +1,7 @@
/*!
* Start Bootstrap - Personal v1.0.1 (https://startbootstrap.com/template-overviews/personal)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-personal/blob/master/LICENSE)
*/
// This file is intentionally blank
// Use this file to add JavaScript to your project

103
projects.html Archivo ejecutable
Ver fichero

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Modern Business - Start Bootstrap Template</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Custom Google font-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body class="d-flex flex-column h-100 bg-light">
<main class="flex-shrink-0">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
<div class="container px-5">
<a class="navbar-brand" href="index.html"><span class="fw-bolder text-primary">Start Bootstrap</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 small fw-bolder">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="resume.html">Resume</a></li>
<li class="nav-item"><a class="nav-link" href="projects.html">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Projects Section-->
<section class="py-5">
<div class="container px-5 mb-5">
<div class="text-center mb-5">
<h1 class="display-5 fw-bolder mb-0"><span class="text-gradient d-inline">Projects</span></h1>
</div>
<div class="row gx-5 justify-content-center">
<div class="col-lg-11 col-xl-9 col-xxl-8">
<!-- Project Card 1-->
<div class="card overflow-hidden shadow rounded-4 border-0 mb-5">
<div class="card-body p-0">
<div class="d-flex align-items-center">
<div class="p-5">
<h2 class="fw-bolder">Project Name 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius at enim eum illum aperiam placeat esse? Mollitia omnis minima saepe recusandae libero, iste ad asperiores! Explicabo commodi quo itaque! Ipsam!</p>
</div>
<img class="img-fluid" src="https://dummyimage.com/300x400/343a40/6c757d" alt="..." />
</div>
</div>
</div>
<!-- Project Card 2-->
<div class="card overflow-hidden shadow rounded-4 border-0">
<div class="card-body p-0">
<div class="d-flex align-items-center">
<div class="p-5">
<h2 class="fw-bolder">Project Name 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius at enim eum illum aperiam placeat esse? Mollitia omnis minima saepe recusandae libero, iste ad asperiores! Explicabo commodi quo itaque! Ipsam!</p>
</div>
<img class="img-fluid" src="https://dummyimage.com/300x400/343a40/6c757d" alt="..." />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Call to action section-->
<section class="py-5 bg-gradient-primary-to-secondary text-white">
<div class="container px-5 my-5">
<div class="text-center">
<h2 class="display-4 fw-bolder mb-4">Let's build something together</h2>
<a class="btn btn-outline-light btn-lg px-5 py-3 fs-6 fw-bolder" href="contact.html">Contact me</a>
</div>
</div>
</section>
</main>
<!-- Footer-->
<footer class="bg-white py-4 mt-auto">
<div class="container px-5">
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
<div class="col-auto"><div class="small m-0">Copyright &copy; Your Website 2023</div></div>
<div class="col-auto">
<a class="small" href="#!">Privacy</a>
<span class="mx-1">&middot;</span>
<a class="small" href="#!">Terms</a>
<span class="mx-1">&middot;</span>
<a class="small" href="#!">Contact</a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>

202
resume.html Archivo ejecutable
Ver fichero

@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Personal - Start Bootstrap Template</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Custom Google font-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body class="d-flex flex-column h-100 bg-light">
<main class="flex-shrink-0">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
<div class="container px-5">
<a class="navbar-brand" href="index.html"><span class="fw-bolder text-primary">Start Bootstrap</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 small fw-bolder">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="resume.html">Resume</a></li>
<li class="nav-item"><a class="nav-link" href="projects.html">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Content-->
<div class="container px-5 my-5">
<div class="text-center mb-5">
<h1 class="display-5 fw-bolder mb-0"><span class="text-gradient d-inline">Resume</span></h1>
</div>
<div class="row gx-5 justify-content-center">
<div class="col-lg-11 col-xl-9 col-xxl-8">
<!-- Experience Section-->
<section>
<div class="d-flex align-items-center justify-content-between mb-4">
<h2 class="text-primary fw-bolder mb-0">Experience</h2>
<!-- Download resume button-->
<!-- Note: Set the link href target to a PDF file within your project-->
<a class="btn btn-primary px-4 py-3" href="#!">
<div class="d-inline-block bi bi-download me-2"></div>
Download Resume
</a>
</div>
<!-- Experience Card 1-->
<div class="card shadow border-0 rounded-4 mb-5">
<div class="card-body p-5">
<div class="row align-items-center gx-5">
<div class="col text-center text-lg-start mb-4 mb-lg-0">
<div class="bg-light p-4 rounded-4">
<div class="text-primary fw-bolder mb-2">2019 - Present</div>
<div class="small fw-bolder">Web Developer</div>
<div class="small text-muted">Stark Industries</div>
<div class="small text-muted">Los Angeles, CA</div>
</div>
</div>
<div class="col-lg-8"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga.</div></div>
</div>
</div>
</div>
<!-- Experience Card 2-->
<div class="card shadow border-0 rounded-4 mb-5">
<div class="card-body p-5">
<div class="row align-items-center gx-5">
<div class="col text-center text-lg-start mb-4 mb-lg-0">
<div class="bg-light p-4 rounded-4">
<div class="text-primary fw-bolder mb-2">2017 - 2019</div>
<div class="small fw-bolder">SEM Specialist</div>
<div class="small text-muted">Wayne Enterprises</div>
<div class="small text-muted">Gotham City, NY</div>
</div>
</div>
<div class="col-lg-8"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga.</div></div>
</div>
</div>
</div>
</section>
<!-- Education Section-->
<section>
<h2 class="text-secondary fw-bolder mb-4">Education</h2>
<!-- Education Card 1-->
<div class="card shadow border-0 rounded-4 mb-5">
<div class="card-body p-5">
<div class="row align-items-center gx-5">
<div class="col text-center text-lg-start mb-4 mb-lg-0">
<div class="bg-light p-4 rounded-4">
<div class="text-secondary fw-bolder mb-2">2015 - 2017</div>
<div class="mb-2">
<div class="small fw-bolder">Barnett College</div>
<div class="small text-muted">Fairfield, NY</div>
</div>
<div class="fst-italic">
<div class="small text-muted">Master's</div>
<div class="small text-muted">Web Development</div>
</div>
</div>
</div>
<div class="col-lg-8"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga.</div></div>
</div>
</div>
</div>
<!-- Education Card 2-->
<div class="card shadow border-0 rounded-4 mb-5">
<div class="card-body p-5">
<div class="row align-items-center gx-5">
<div class="col text-center text-lg-start mb-4 mb-lg-0">
<div class="bg-light p-4 rounded-4">
<div class="text-secondary fw-bolder mb-2">2011 - 2015</div>
<div class="mb-2">
<div class="small fw-bolder">ULA</div>
<div class="small text-muted">Los Angeles, CA</div>
</div>
<div class="fst-italic">
<div class="small text-muted">Undergraduate</div>
<div class="small text-muted">Computer Science</div>
</div>
</div>
</div>
<div class="col-lg-8"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus laudantium, voluptatem quis repellendus eaque sit animi illo ipsam amet officiis corporis sed aliquam non voluptate corrupti excepturi maxime porro fuga.</div></div>
</div>
</div>
</div>
</section>
<!-- Divider-->
<div class="pb-5"></div>
<!-- Skills Section-->
<section>
<!-- Skillset Card-->
<div class="card shadow border-0 rounded-4 mb-5">
<div class="card-body p-5">
<!-- Professional skills list-->
<div class="mb-5">
<div class="d-flex align-items-center mb-4">
<div class="feature bg-primary bg-gradient-primary-to-secondary text-white rounded-3 me-3"><i class="bi bi-tools"></i></div>
<h3 class="fw-bolder mb-0"><span class="text-gradient d-inline">Professional Skills</span></h3>
</div>
<div class="row row-cols-1 row-cols-md-3 mb-4">
<div class="col mb-4 mb-md-0"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">SEO/SEM Marketing</div></div>
<div class="col mb-4 mb-md-0"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">Statistical Analysis</div></div>
<div class="col"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">Web Development</div></div>
</div>
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4 mb-md-0"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">Network Security</div></div>
<div class="col mb-4 mb-md-0"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">Adobe Software Suite</div></div>
<div class="col"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">User Interface Design</div></div>
</div>
</div>
<!-- Languages list-->
<div class="mb-0">
<div class="d-flex align-items-center mb-4">
<div class="feature bg-primary bg-gradient-primary-to-secondary text-white rounded-3 me-3"><i class="bi bi-code-slash"></i></div>
<h3 class="fw-bolder mb-0"><span class="text-gradient d-inline">Languages</span></h3>
</div>
<div class="row row-cols-1 row-cols-md-3 mb-4">
<div class="col mb-4 mb-md-0"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">HTML</div></div>
<div class="col mb-4 mb-md-0"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">CSS</div></div>
<div class="col"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">JavaScript</div></div>
</div>
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4 mb-md-0"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">Python</div></div>
<div class="col mb-4 mb-md-0"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">Ruby</div></div>
<div class="col"><div class="d-flex align-items-center bg-light rounded-4 p-3 h-100">Node.js</div></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
<!-- Footer-->
<footer class="bg-white py-4 mt-auto">
<div class="container px-5">
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
<div class="col-auto"><div class="small m-0">Copyright &copy; Your Website 2023</div></div>
<div class="col-auto">
<a class="small" href="#!">Privacy</a>
<span class="mx-1">&middot;</span>
<a class="small" href="#!">Terms</a>
<span class="mx-1">&middot;</span>
<a class="small" href="#!">Contact</a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>

BIN
road2.jpg Archivo ejecutable

Archivo binario no mostrado.

Después

Anchura:  |  Altura:  |  Tamaño: 221 KiB