We Keep Coding

How to make buttons inside columns equal in height on all devices?

My Bootstrap columns are equal in height no matter the size of the device (computers, tablets, phones, etc.) thanks to JavaScript's MatchHeight.
But the problem is that I also want to make the buttons inside them equal in height despite different amount of text above them. I've tried min-height, margin-bottom (aren't responsive). How can I achieve this? With bootstrap somehow, or js, or something but it's important for aesthetics!
EDIT: This is what I want to achieve: https://i.stack.imgur.com/NOlns.png
Buttons stay the same no matter what!
#section4 .divider-fullwidth {
margin-bottom: 15px;
}
#section4 .lastdivider {
margin-top: 50px;
}
#section4 .box {
margin: 1px;
margin-bottom: 30px;
padding: 5% 8%;
}
#section4 .btn {
font-size: .9em;
padding: 5% 4%;
width: 100%;
}
#section4 .innerBox {
min-height: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background_section4">
<div id="section4" class="container">
<div class="row intro">
<h2>ESCOGE TU PLAN</h2>
<p>El precio influye en el tipo y número de actividades que organizaremos, pero te aseguramos que todas son extraordinarias.</p>
</div>
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
</div>
</div>
</div>

Below is the solution, I assume ,this is what you are looking for.
.box{
position: relative;
height:500px;
}
.btn{
position: absolute;
bottom:0px;
width: auto; //You can adjust the width accordingly
}
You can adjust the height of your div accordingly.
.box {
border: 1px solid black;
padding: 20px;
margin: 20px;
position: relative;
height: 440px;
}
.btn {
font-size: .9em;
float: none;
width: auto;
position: absolute;
bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
</div>
Padding given to .box is causing the issue.

Site does not load layoutt

Hello I have 2 errors that I do not know how to solve, the layout of it does not load I saw here on inspect site in google it says 2erros but I do not know where it comes from is how to solve them I'm new at it.
Here are the errors:
Uncaught SyntaxError: Unexpected token
Failed to load resource: the server responded with a status of 400 (Bad Request)
Link to my website: http://habbomania.esy.es/vibe_v3/index.php
<?php
header('Content-Type: text/html; charset=iso-8859-1');
session_start();
date_default_timezone_set('America/Sao_Paulo');
/* CONEXAO */
include('site_vibe/install/config.php');
/* INSTALAR */
include('site_vibe/install/install.php');
/* MODULOS */
$caminhoModulo = 'site_vibe/modulos/';
include('site_vibe/modulos/Functions.php');
include('site_vibe/modulos/Extras.php');
if(!class_exists('Main')) {
include('site_vibe/modulos/Main.php');
$Main = new Main();
}
if(!class_exists('Site')) {
include('site_vibe/modulos/Site.php');
$Site = new Site();
}
if(!class_exists('Vibe')) {
include('site_vibe/modulos/Vibe.php');
$Vibe = new Vibe();
}
if(!class_exists('Usuario')) {
include('site_vibe/modulos/Usuario.php');
$Usuario = new Usuario();
}
$deleteUsersOn = mysql_query(sprintf("DELETE FROM online WHERE tempo < '%u'", time()));
if(isset($_SESSION['usuario'])){
$onlines_users = mysql_query(sprintf("SELECT * FROM online WHERE usuario='%s'", $_SESSION['usuario']));
$online_users_row = mysql_num_rows($onlines_users);
}else{
$online_users_row = true;
}
$online_visit = mysql_query(sprintf("SELECT * FROM online WHERE ip='%s' AND usuario='visitante'", $_SERVER['REMOTE_ADDR']));
$online_visit_row = mysql_num_rows($online_visit);
if(!$online_visit_row){
$sql_users = mysql_query(sprintf("INSERT INTO online(ip, tempo, usuario) VALUES ('%s', '%s', '%s')", $_SERVER['REMOTE_ADDR'], strtotime('+1 minutes'), 'visitante'));
}
if(!$online_users_row){
$sql_users = mysql_query(sprintf("INSERT INTO online(tempo, usuario) VALUES ('%s', '%s')", strtotime('+1 minutes'), $_SESSION['usuario']));
}
if(Usuario::Logado()):
if(Usuario::Dados('banido') == 'sim'){
session_start();ob_start();session_unset();session_destroy();
}
endif;
$notificacao_nao_lida = db::NumRows(db::Query("SELECT * FROM notificacao WHERE recebedor='".$_SESSION['usuario']."' AND visto='nao' AND modo='1'"));
$notificacao_seguidor_nao_lida = db::NumRows(db::Query("SELECT * FROM notificacao WHERE recebedor='".$_SESSION['usuario']."' AND visto='nao' AND tipo='seguindo' AND modo='2'"));
/* PRESENCA */
$sql_presenca = db::Query("SELECT * FROM presenca WHERE ativo='s' ORDER BY id DESC");
while($ver_presenca = db::FetchArray($sql_presenca)){
$data_presenca = $ver_presenca['data'];
$id_presenca = $ver_presenca['id'];
if($data_presenca > time() - 300){
echo('');
}else{
db::Query("UPDATE presenca SET ativo='n' WHERE id='$id_presenca' ");
}
}
?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vibe Habbo ~ A vibe dos seus pixels!</title>
<base href="/<?php echo $install['diretorio']; ?>">
<meta http-equiv="content-language" content="pt-br">
<meta name="author" content="Gabriel Lopes">
<meta name="reply-to" content="biellopes1#hotmail.com">
<meta name="description" content="A vibe dos seus pixels!">
<meta name="keywords" content="vibehabbo, fã-site, rádio, música, noticias, habbo, top, forúm, topico, pixel, tirinha, valores, pixel, ducket, cambios, moedas, rico, pobre, divulgue, button, player, parceiros, mobis, mobs, mobilias, raros, gabriel lopes, fwdesign, administradores, locutor, jornalista, moderador, fã-center, pagina inicial, rede socias, facebook, twitter, fw, fwdesign">
<meta name="url" content="http://vibehabbo.com.br"/>
<meta name="Robots" content="index,follow">
<meta name="language" content="pt_BR">
<link rel="shortcut icon" href="imagens/favicon.png" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="VibeHabbo.Com.Br - Feed RRS" href="" />
<!-- Styles -->
<link type="text/css" rel="stylesheet" href="/<?php echo $install['diretorio']; ?>css/fwcss.css?v=1"/>
<link type="text/css" rel="stylesheet" href="/<?php echo $install['diretorio']; ?>css/shadowbox.css?<?php echo filemtime('css/shadowbox.css'); ?>"/>
<link type="text/css" rel="stylesheet" href="/<?php echo $install['diretorio']; ?>css/colortips.css?<?php echo filemtime('css/colortips.css'); ?>"/>
<!-- Jquery -->
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/jquery.js?<?php echo filemtime('scripts/jquery.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/jquery-nav.js?<?php echo filemtime('scripts/jquery-nav.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/colortip.js?<?php echo filemtime('scripts/colortip.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/jquery.cycle.all.min.js?<?php echo filemtime('scripts/jquery-nav.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/shadowbox.js?<?php echo filemtime('scripts/shadowbox.js'); ?>"></script>
<script type="text/javascript" src="/<?php echo $install['diretorio']; ?>scripts/principal.js?v=1"></script>
</head>
<style>
#modal { background:#19140D; position:fixed; left:0; right:0; top:0; bottom:0 ;z-index:99999999999999999999999999999999999999999999999;}
#modal #alerta { width:387px; position:fixed; cursor:move; }
</style>
<script>
var Site = '/<?php echo $install['diretorio']; ?>';
</script>
<body>
<div id="content_topo">
<div id="content_player_canto">
<div id="avatar-player" style="width:60px; height:65px; float:left; margin:6px 0 0 1px; background:url(imagens/avatar.png) 1px -13px; cursor:pointer;" onClick="player.atualizar('avatar');">
<div id="botao_mais_locutor_player_canto"></div>
</div>
<div id="content_botao_base_play_pause">
<div id="content_botao_play_pause"><div id="icone_pause_player"></div></div>
</div>
<div id="content_ouvintes">
<div id="total_ouvintes" class="text_total_ouvintes_player ver-ouvintes-player" style="cursor:pointer;" onClick="player.atualizar('ouvintes');">...</div>
<div id="title_ouv_player" class="text_title_ouvintes_player">ouv.</div>
</div>
<div id="content_nome_programa_locutor_player">
<div id="content_insert_nome_programa_locutor_player" class="text_nome_programa_locutor_player ver-locutor-player" style="cursor:pointer;" onClick="player.atualizar('locutor');">carregando</div>
</div>
<div id="content_nome_programa_locutor_player">
<div id="content_insert_nome_programa_locutor_player" class="text_nome_programa_locutor_player ver-programa-player" style="cursor:pointer;" onClick="player.atualizar('programa');"><marquee height="19" scrollamount="4" scrolldelay="4" direction="left">carregando</marquee></div>
</div>
<div id="botao_pedido_player">
<div id="botao_pedido_player_cima"></div>
<div id="insert_botao_text_pedido_player" class="text_botao_pedido_player">Fazer pedido</div>
</div>
</div>
<?php if(!Usuario::Logado()): ?>
<form action="javascript:;" id="form-login">
<div id="content_conta_canto_esq" style="z-index:999999999;">
<div id="content_notificacao_login">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra_login">
<div id="titulo_content_notificacao">
<div id="content_title_notificacao_login" class="text_titulo_insert_notificacao">login</div>
<div id="botao_configuracoes_notificacao" class="text_botao_configuracao">Crie sua conta</div>
</div>
<div id="content_insert_notificacao_login">
<div id="insert_titulo_box_login" class="text_titulo_box_lados">E-mail ou nick:</div>
<input type="text" id="username-login" style="width:246px;"/>
<div id="insert_titulo_box_login" class="text_titulo_box_lados">
<div id="botao_esqueceu_senha" class="text_botao_esqueceu_senha">Esqueceu a senha?</div>
Senha:</div>
<input id="password-login"type="password" style="width:246px;"/>
</div>
</div>
<div id="botao_content_notificacao">
<div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao logar-submit">fazer login</div>
</div>
</div>
<div id="insert_conta_canto_esq">
<div id="icone_conta_canto_esq"></div>
</div>
</div>
<?php else: ?>
<!-- inicia logado -->
<div id="content_logado_canto">
<div style="width:60px; height:46px; float:left; margin:3px 0 0 0; background:url(https://www.habbo.com.br/habbo-imaging/avatarimage?img_format=gif&user=<?php echo $_SESSION['usuario']; ?>&action=std&direction=2&head_direction=2&gesture=sml&size=b) 1px -13px;">
<div id="botao_editar_dados_logado_canto">
<div id="icone_editar_dados_logado_canto"></div>
</div>
</div>
<div id="content_logado_canto_opcoes">
<!-- inicia notificacao -->
<div id="content_notificacao">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra">
<div id="titulo_content_notificacao">
<div id="icone_insert_notificacao"></div>
<div id="content_title_notificacao" class="text_titulo_insert_notificacao">notificações</div>
<div id="botao_configuracoes_notificacao" class="text_botao_configuracao">Configurações</div>
</div>
<div style="height:383px; overflow-x:hidden; overflow-y:auto; clear:both;" id="recebe-notificacao-total">
<?php include('Notificacao.php'); ?>
</div>
</div>
<div id="botao_content_notificacao"><div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao">ver todas notificações</div></div>
</div>
<!-- encerra notificacao -->
<!-- inicia notificacao seguidores -->
<div id="content_notificacao_solicitacao">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra">
<div id="titulo_content_notificacao">
<div id="content_title_notificacao_solicitacao" class="text_titulo_insert_notificacao">seguidores</div>
<div id="botao_configuracoes_notificacao" class="text_botao_configuracao">Configurações</div>
</div>
<div style="height:383px; overflow-x:hidden; overflow-y:auto; clear:both;" id="recebe-seguidores-total">
<?php include('Seguidor.php'); ?>
</div>
</div>
<div id="botao_content_notificacao"><div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao">ver todos seguidores</div></div>
</div>
<!-- encerra notificacao -->
<!-- inicia notificacao marcar presensa -->
<div id="content_notificacao_presenca">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra_presenca">
<div id="titulo_content_notificacao">
<div id="content_title_notificacao_marcar_presenca" class="text_titulo_insert_notificacao">código de presença</div>
<div id="botao_codigos_hoje_notificacao" class="text_botao_codigos_hoje">Códigos de Hoje</div>
</div>
<div style="height:189px; overflow-x:hidden; overflow-y:auto; clear:both;">
<div id="content_insert_presenca_notificacao">
<div id="insert_title_presenca_notificacao" class="text_insert_title_presenca_notificacao">Digite o Código de presença abaixo</div>
<div id="content_input_botao_codigo_presenca">
<style>
#input_insert_codigo_presenca {width:113px; height:28px; float:left; padding:0px; margin:6px 0 0 16px; background:#D9D9D9; border:none; font-family:Segoe UI; font-size:15px; color:#333; font-weight:bold;}
#input_insert_codigo_presenca:focus, #input_insert_codigo_presenca:hover {border:0px; box-shadow:0px 0px 0px; margin:6px 0 0 16px;}
</style>
<form id="gerar-presenca" action="javascript:;">
<div id="base_input_codigo_presenca"><input id="input_insert_codigo_presenca" type="text"/></div>
<div id="botao_codigo_presenca_gerar">
<div id="insert_botao_codigo_presenca_gerar_title" class="text_insert_botao_presenca_gerar">Gerar código</div>
</div>
</form>
<!--
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
-->
</div>
</div>
</div>
</div>
<div id="botao_content_notificacao"><div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao">ver todos códigos gerados</div></div>
</div>
<!-- encerra notificacao marcar presenca -->
<div id="icone_notificacao_logado"><div id="content_total_notificacoes" class="text_total_notificacoes total-notificao-tudo"><?php echo $notificacao_nao_lida; ?></div></div>
<div id="icone_solicitacao_logado"><div id="content_total_notificacoes" class="text_total_notificacoes total-notificao-seguidor"><?php echo $notificacao_seguidor_nao_lida; ?></div></div>
<div id="icone_creditos_logado"></div>
<div id="icone_marcar_presenca_logado"></div>
<div id="icone_configuracao_logado"></div>
<div id="icone_home_logado"></div>
<div id="icone_galeria_logado"></div>
<div id="icone_topico_logado"></div>
</div>
<div id="botao_sair_logado_canto" onClick="usuario.deslogar();">
<div id="insert_botao_sair_logado_canto" class="text_sair_logado_canto">sair</div>
</div>
</div>
<!-- encerra logado -->
<?php endif; ?>
<!-- inicia pesquisar -->
<div id="content_pesquisar_canto_esq">
<!-- caixa lado pesquisa -->
<div id="content_pesquisa_canto_esq_lado">
<div id="icone_flecha_content_pesquisa_canto_esq"></div>
<div id="content_insert_pesquisa_principal_canto_esq">
<style>
#input_pesquisar_canto_lado_esq {width:140px; height:20px; padding:0px; float:left; margin:11px 0 0 19px; background:#558EC0; border:none; font-family:Segoe UI; font-size:13px; color:#FFF; line-height:1.0em;}
#input_pesquisar_canto_lado_esq:focus, #input_pesquisar_canto_lado_esq:hover {border:0px; box-shadow:0px 0px 0px; margin:11px 0 0 19px;}</style>
<form action="javascript:;" id="pesquisar-canto">
<input id="input_pesquisar_canto_lado_esq" type="text" value="Pesquisar usuário"/>
</form>
<div id="icone_pesquisa_canto_esq_small"></div>
</div>
</div>
<!-- caixa lado pesquisa -->
<div id="insert_content_pesquisar_canto_esq">
<div id="icone_pesquisar_canto_esq"></div>
</div>
</div>
<!-- encerra pesquisar -->
<div id="insert_content_topo">
<style>
#content_paginacao_slide a {width:13px; height:13px; float:left; margin:0 7px 0 0; background:rgba(500,500,500,0.7); border-radius:100%; cursor:pointer; transition:0.3s;}
#content_paginacao_slide a.activeSlide {width:13px; height:13px; float:left; margin:0 7px 0 0; background:#FF0033; border-radius:100%; cursor:pointer;}
</style>
<div id="content_paginacao_slide" style="position:absolute; z-index:100;">
</div>
<div id="recebe-slide" style="width:552px; height:310px; float:left;">
<div id="imagem_principal_slide" style="background:url(http://imgur.com/Pyp3XCI.png);">
<div id="contagem_segundos_slide" class="text_contagem_segundos_slide" style="opacity:0.0;">Próximo slide: <b>10S</b></div>
<div id="content_info_slide">
<div id="barra_carregando_slide_normal">
<div id="barra_carregando_slide_carregado" style="width:190px;"></div>
</div>
<div id="insert_content_info_slide">
<div id="insert_text_info_slide">
<div id="insert_text_info_slide_grande" class="text_insert_info_slide_grande">Bem-vindo a versão 3!</div>
<div id="insert_text_info_slide_pequeno" class="text_insert_info_slide_pequeno">Cadastre-se em nosso site !</div>
</div>
<div id="botao_mais_info_slide">
<div id="botao_mais_info_slide_cima"></div>
<div id="insert_botao_text_info_slide" class="text_botao_mais_info_slide">Ir para o site</div>
</div>
</div>
</div>
</div>
<!-- fim slide -->
<div id="imagem_principal_slide" style="background:url(http://i.imgur.com/8pkjwwb.png);">
<div id="contagem_segundos_slide" class="text_contagem_segundos_slide" style="opacity:0.0;">Próximo slide: <b>10S</b></div>
<div id="content_info_slide">
<div id="barra_carregando_slide_normal">
<div id="barra_carregando_slide_carregado" style="width:190px;"></div>
</div>
<div id="insert_content_info_slide">
<div id="insert_text_info_slide">
<div id="insert_text_info_slide_grande" class="text_insert_info_slide_grande">Facebook da VibeHabbo!</div>
<div id="insert_text_info_slide_pequeno" class="text_insert_info_slide_pequeno">fica ligando em nosso facebook</div>
</div>
<div id="botao_mais_info_slide">
<div id="botao_mais_info_slide_cima"></div>
<div id="insert_botao_text_info_slide" class="text_botao_mais_info_slide">Ir para o site</div>
</div>
</div>
</div>
</div>
<!-- fim slide -->
</div>
<div id="logo_site_principal"></div>
<div id="content_palcos_mobilias_recentes">
<div id="palco_mobilias_recentes_1"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/1.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_2"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/9.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_3"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/8.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_4"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/2.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_5"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/3.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_6"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/6.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_9"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/7.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_7"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/5.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_8"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/4.png) no-repeat center;"></div></div>
</div>
</div>
</div>
<div id="content_base_corpo_site">
<div id="info_barra_corpo_site">
<div id="content_insert_info_barra_corpo_site">
<div id="icone_insert_info_barra_corpo_site"></div>
<div id="insert_text_info_barra_corpo_site" class="text_insert_info_barra_corpo_site">Olá <b>usuários</b>, gostariamos de saber oque acharam do nosso novo site?</div>
</div>
</div>
<div id="corpo_site">
<?php
Site::Paginas('Paginas');
?>
</div>
<div id="content_rodape">
<div id="content_text_creditos_rodape" class="text_creditos_rodape">Copyrights © 2013 - 2014 | Vibe Habbo. Todos os direitos reservados a este site da web. Este site não é de propriedade ou operado pela Sulake Corporation e não é parte do Habbo Hotel®.</div>
<div id="logo_vibe_rodape"></div>
<div id="base_logo_fw_rodape"><div id="logo_fw_rodape"></div></div>
</div>
</div>
</body>
</html>

Site does not load layout [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello everyone I have a bug that my site does not want to load its layout, I do not know where it comes from, so I left PHP, it's CSS, if you can help me please I appreciate it, I'm a beginner in it
The error that appears is in the photo below.
Screenshot
/*!
* Style ColorTip.
* http://jquery.com - http://fwdesign.com.br
*
* Copyright 2013, Jquery.com
* Editado por: Gabriel Lopes (https://www.facebook.com/gabrielopes1);
*
* All rights reserved to this website.
*/
.colorTip {
display: none;
position: absolute;
left: 50%;
bottom: 63px;
font-family:Segoe UI;
font-size: 12px;
font-style: normal;
font-weight:normal;
text-decoration: none;
text-align: center;
text-shadow: 0 0 1px white;
white-space: nowrap;
border-radius: 4px;
margin-top: 30px;
padding:0px 5px;
z-index:9999999999;
}
.colorTipContainer {
position: relative;
text-decoration: none !important;
}
.pointyTip,.pointyTipShadow {
border:6px solid transparent;
bottom:-10px;
height:0;
left:50%;
margin-left:-6px;
position:absolute;
width:0;
}
.pointyTipShadow {
border-width:7px;
bottom:-14px;
margin-left:-7px;
}
.colorTipContainer {
position:relative;
text-decoration:none !important;
}
.yellow .pointyTip {
border-top-color:#000;
}
.yellow .pointyTipShadow {
border-top-color:#000;
}
.yellow .colorTip {
background-color:#000;
border:1px solid #000;
color:#fff;
opacity:0.9;
font-family:Segoe UI;
font-size: 12px;
padding:5px 8px;
text-shadow:#000 0px 1px;
}
.none .pointyTip {
border-top-color:rgba(0,0,0,0.0);
}
.none .pointyTipShadow {
border-top-color:rgba(0,0,0,0.0);
}
.none .colorTip {
background-color:rgba(0,0,0,0.0);
border:1px solid rgba(0,0,0,0.0);
text-shadow:rgba(0,0,0,0.0);
box-shadow: 0px 0px 5px rgba(0,0,0,0.0);
padding:0px;
}
<?php
header('Content-Type: text/html; charset=iso-8859-1');
session_start();
date_default_timezone_set('America/Sao_Paulo');
/* CONEXAO */
include('site_vibe/install/config.php');
/* INSTALAR */
include('site_vibe/install/install.php');
/* MODULOS */
$caminhoModulo = 'site_vibe/modulos/';
include('site_vibe/modulos/Functions.php');
include('site_vibe/modulos/Extras.php');
if(!class_exists('Main')) {
include('site_vibe/modulos/Main.php');
$Main = new Main();
}
if(!class_exists('Site')) {
include('site_vibe/modulos/Site.php');
$Site = new Site();
}
if(!class_exists('Vibe')) {
include('site_vibe/modulos/Vibe.php');
$Vibe = new Vibe();
}
if(!class_exists('Usuario')) {
include('site_vibe/modulos/Usuario.php');
$Usuario = new Usuario();
}
$deleteUsersOn = mysql_query(sprintf("DELETE FROM online WHERE tempo < '%u'", time()));
if(isset($_SESSION['usuario'])){
$onlines_users = mysql_query(sprintf("SELECT * FROM online WHERE usuario='%s'", $_SESSION['usuario']));
$online_users_row = mysql_num_rows($onlines_users);
}else{
$online_users_row = true;
}
$online_visit = mysql_query(sprintf("SELECT * FROM online WHERE ip='%s' AND usuario='visitante'", $_SERVER['REMOTE_ADDR']));
$online_visit_row = mysql_num_rows($online_visit);
if(!$online_visit_row){
$sql_users = mysql_query(sprintf("INSERT INTO online(ip, tempo, usuario) VALUES ('%s', '%s', '%s')", $_SERVER['REMOTE_ADDR'], strtotime('+1 minutes'), 'visitante'));
}
if(!$online_users_row){
$sql_users = mysql_query(sprintf("INSERT INTO online(tempo, usuario) VALUES ('%s', '%s')", strtotime('+1 minutes'), $_SESSION['usuario']));
}
if(Usuario::Logado()):
if(Usuario::Dados('banido') == 'sim'){
session_start();ob_start();session_unset();session_destroy();
}
endif;
$notificacao_nao_lida = db::NumRows(db::Query("SELECT * FROM notificacao WHERE recebedor='".$_SESSION['usuario']."' AND visto='nao' AND modo='1'"));
$notificacao_seguidor_nao_lida = db::NumRows(db::Query("SELECT * FROM notificacao WHERE recebedor='".$_SESSION['usuario']."' AND visto='nao' AND tipo='seguindo' AND modo='2'"));
/* PRESENCA */
$sql_presenca = db::Query("SELECT * FROM presenca WHERE ativo='s' ORDER BY id DESC");
while($ver_presenca = db::FetchArray($sql_presenca)){
$data_presenca = $ver_presenca['data'];
$id_presenca = $ver_presenca['id'];
if($data_presenca > time() - 300){
echo('');
}else{
db::Query("UPDATE presenca SET ativo='n' WHERE id='$id_presenca' ");
}
}
?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vibe Habbo ~ A vibe dos seus pixels!</title>
<base href="/<?php echo $install['diretorio']; ?>">
<meta http-equiv="content-language" content="pt-br">
<meta name="author" content="Gabriel Lopes">
<meta name="reply-to" content="biellopes1#hotmail.com">
<meta name="description" content="A vibe dos seus pixels!">
<meta name="keywords" content="vibehabbo, fã-site, rádio, música, noticias, habbo, top, forúm, topico, pixel, tirinha, valores, pixel, ducket, cambios, moedas, rico, pobre, divulgue, button, player, parceiros, mobis, mobs, mobilias, raros, gabriel lopes, fwdesign, administradores, locutor, jornalista, moderador, fã-center, pagina inicial, rede socias, facebook, twitter, fw, fwdesign">
<meta name="url" content="http://vibehabbo.com.br"/>
<meta name="Robots" content="index,follow">
<meta name="language" content="pt_BR">
<link rel="shortcut icon" href="imagens/favicon.png" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="VibeHabbo.Com.Br - Feed RRS" href="http://vibehabbo.com.br/feed" />
<!-- Styles -->
<link type="text/css" rel="stylesheet" href="css/fwcss.css"/>
<link type="text/css" rel="stylesheet" href="css/shadowbox.css"/>
<link type="text/css" rel="stylesheet" href="css/colortips.css"/>
<!-- Jquery -->
<script type="text/javascript" src="scripts/jquery.js"</script>
<script type="text/javascript" src="scripts/jquery-nav.js"></script>
<script type="text/javascript" src="scripts/colortip.js"</script>
<script type="text/javascript" src="scripts/jquery.cycle.all.min.js"</script>
<script type="text/javascript" src="scripts/shadowbox.js"</script>
<script type="text/javascript" src="scripts/principal.js"</script>
<!-- HTML 5 -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<style>
#modal { background:#19140D; position:fixed; left:0; right:0; top:0; bottom:0 ;z-index:99999999999999999999999999999999999999999999999;}
#modal #alerta { width:387px; position:fixed; cursor:move; }
</style>
<script>
var Site = '/<?php echo $install['diretorio']; ?>';
</script>
<body>
<div id="content_topo">
<div id="content_player_canto">
<div id="avatar-player" style="width:60px; height:65px; float:left; margin:6px 0 0 1px; background:url(imagens/avatar.png) 1px -13px; cursor:pointer;" onClick="player.atualizar('avatar');">
<div id="botao_mais_locutor_player_canto"></div>
</div>
<div id="content_botao_base_play_pause">
<div id="content_botao_play_pause"><div id="icone_pause_player"></div></div>
</div>
<div id="content_ouvintes">
<div id="total_ouvintes" class="text_total_ouvintes_player ver-ouvintes-player" style="cursor:pointer;" onClick="player.atualizar('ouvintes');">...</div>
<div id="title_ouv_player" class="text_title_ouvintes_player">ouv.</div>
</div>
<div id="content_nome_programa_locutor_player">
<div id="content_insert_nome_programa_locutor_player" class="text_nome_programa_locutor_player ver-locutor-player" style="cursor:pointer;" onClick="player.atualizar('locutor');">carregando</div>
</div>
<div id="content_nome_programa_locutor_player">
<div id="content_insert_nome_programa_locutor_player" class="text_nome_programa_locutor_player ver-programa-player" style="cursor:pointer;" onClick="player.atualizar('programa');"><marquee height="19" scrollamount="4" scrolldelay="4" direction="left">carregando</marquee></div>
</div>
<div id="botao_pedido_player">
<div id="botao_pedido_player_cima"></div>
<div id="insert_botao_text_pedido_player" class="text_botao_pedido_player">Fazer pedido</div>
</div>
</div>
<?php if(!Usuario::Logado()): ?>
<form action="javascript:;" id="form-login">
<div id="content_conta_canto_esq" style="z-index:999999999;">
<div id="content_notificacao_login">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra_login">
<div id="titulo_content_notificacao">
<div id="content_title_notificacao_login" class="text_titulo_insert_notificacao">login</div>
<div id="botao_configuracoes_notificacao" class="text_botao_configuracao">Crie sua conta</div>
</div>
<div id="content_insert_notificacao_login">
<div id="insert_titulo_box_login" class="text_titulo_box_lados">E-mail ou nick:</div>
<input type="text" id="username-login" style="width:246px;"/>
<div id="insert_titulo_box_login" class="text_titulo_box_lados">
<div id="botao_esqueceu_senha" class="text_botao_esqueceu_senha">Esqueceu a senha?</div>
Senha:</div>
<input id="password-login"type="password" style="width:246px;"/>
</div>
</div>
<div id="botao_content_notificacao">
<div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao logar-submit">fazer login</div>
</div>
</div>
<div id="insert_conta_canto_esq">
<div id="icone_conta_canto_esq"></div>
</div>
</div>
<?php else: ?>
<!-- inicia logado -->
<div id="content_logado_canto">
<div style="width:60px; height:46px; float:left; margin:3px 0 0 0; background:url(https://www.habbo.com.br/habbo-imaging/avatarimage?img_format=gif&user=<?php echo $_SESSION['usuario']; ?>&action=std&direction=2&head_direction=2&gesture=sml&size=b) 1px -13px;">
<div id="botao_editar_dados_logado_canto">
<div id="icone_editar_dados_logado_canto"></div>
</div>
</div>
<div id="content_logado_canto_opcoes">
<!-- inicia notificacao -->
<div id="content_notificacao">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra">
<div id="titulo_content_notificacao">
<div id="icone_insert_notificacao"></div>
<div id="content_title_notificacao" class="text_titulo_insert_notificacao">notificações</div>
<div id="botao_configuracoes_notificacao" class="text_botao_configuracao">Configurações</div>
</div>
<div style="height:383px; overflow-x:hidden; overflow-y:auto; clear:both;" id="recebe-notificacao-total">
<?php include('Notificacao.php'); ?>
</div>
</div>
<div id="botao_content_notificacao"><div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao">ver todas notificações</div></div>
</div>
<!-- encerra notificacao -->
<!-- inicia notificacao seguidores -->
<div id="content_notificacao_solicitacao">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra">
<div id="titulo_content_notificacao">
<div id="content_title_notificacao_solicitacao" class="text_titulo_insert_notificacao">seguidores</div>
<div id="botao_configuracoes_notificacao" class="text_botao_configuracao">Configurações</div>
</div>
<div style="height:383px; overflow-x:hidden; overflow-y:auto; clear:both;" id="recebe-seguidores-total">
<?php include('Seguidor.php'); ?>
</div>
</div>
<div id="botao_content_notificacao"><div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao">ver todos seguidores</div></div>
</div>
<!-- encerra notificacao -->
<!-- inicia notificacao marcar presensa -->
<div id="content_notificacao_presenca">
<div id="flecha_content_notificacao"></div>
<div id="insert_notificacao_mostra_presenca">
<div id="titulo_content_notificacao">
<div id="content_title_notificacao_marcar_presenca" class="text_titulo_insert_notificacao">código de presença</div>
<div id="botao_codigos_hoje_notificacao" class="text_botao_codigos_hoje">Códigos de Hoje</div>
</div>
<div style="height:189px; overflow-x:hidden; overflow-y:auto; clear:both;">
<div id="content_insert_presenca_notificacao">
<div id="insert_title_presenca_notificacao" class="text_insert_title_presenca_notificacao">Digite o Código de presença abaixo</div>
<div id="content_input_botao_codigo_presenca">
<style>
#input_insert_codigo_presenca {width:113px; height:28px; float:left; padding:0px; margin:6px 0 0 16px; background:#D9D9D9; border:none; font-family:Segoe UI; font-size:15px; color:#333; font-weight:bold;}
#input_insert_codigo_presenca:focus, #input_insert_codigo_presenca:hover {border:0px; box-shadow:0px 0px 0px; margin:6px 0 0 16px;}
</style>
<form id="gerar-presenca" action="javascript:;">
<div id="base_input_codigo_presenca"><input id="input_insert_codigo_presenca" type="text"/></div>
<div id="botao_codigo_presenca_gerar">
<div id="insert_botao_codigo_presenca_gerar_title" class="text_insert_botao_presenca_gerar">Gerar código</div>
</div>
</form>
<!--
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
<div id="total_pontos_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">Você gerou 1 PONTO</div>
<div id="total_horas_gerados_presenca_notificacao" class="text_total_pontos_horas_gerados_presenca">há 22 horas</div>
-->
</div>
</div>
</div>
</div>
<div id="botao_content_notificacao"><div id="content_title_botao_vermais_notificacao" class="text_botao_vermais_notificacao">ver todos códigos gerados</div></div>
</div>
<!-- encerra notificacao marcar presenca -->
<div id="icone_notificacao_logado"><div id="content_total_notificacoes" class="text_total_notificacoes total-notificao-tudo"><?php echo $notificacao_nao_lida; ?></div></div>
<div id="icone_solicitacao_logado"><div id="content_total_notificacoes" class="text_total_notificacoes total-notificao-seguidor"><?php echo $notificacao_seguidor_nao_lida; ?></div></div>
<div id="icone_creditos_logado"></div>
<div id="icone_marcar_presenca_logado"></div>
<div id="icone_configuracao_logado"></div>
<div id="icone_home_logado"></div>
<div id="icone_galeria_logado"></div>
<div id="icone_topico_logado"></div>
</div>
<div id="botao_sair_logado_canto" onClick="usuario.deslogar();">
<div id="insert_botao_sair_logado_canto" class="text_sair_logado_canto">sair</div>
</div>
</div>
<!-- encerra logado -->
<?php endif; ?>
<!-- inicia pesquisar -->
<div id="content_pesquisar_canto_esq">
<!-- caixa lado pesquisa -->
<div id="content_pesquisa_canto_esq_lado">
<div id="icone_flecha_content_pesquisa_canto_esq"></div>
<div id="content_insert_pesquisa_principal_canto_esq">
<style>
#input_pesquisar_canto_lado_esq {width:140px; height:20px; padding:0px; float:left; margin:11px 0 0 19px; background:#558EC0; border:none; font-family:Segoe UI; font-size:13px; color:#FFF; line-height:1.0em;}
#input_pesquisar_canto_lado_esq:focus, #input_pesquisar_canto_lado_esq:hover {border:0px; box-shadow:0px 0px 0px; margin:11px 0 0 19px;}</style>
<form action="javascript:;" id="pesquisar-canto">
<input id="input_pesquisar_canto_lado_esq" type="text" value="Pesquisar usuário"/>
</form>
<div id="icone_pesquisa_canto_esq_small"></div>
</div>
</div>
<!-- caixa lado pesquisa -->
<div id="insert_content_pesquisar_canto_esq">
<div id="icone_pesquisar_canto_esq"></div>
</div>
</div>
<!-- encerra pesquisar -->
<div id="insert_content_topo">
<style>
#content_paginacao_slide a {width:13px; height:13px; float:left; margin:0 7px 0 0; background:rgba(500,500,500,0.7); border-radius:100%; cursor:pointer; transition:0.3s;}
#content_paginacao_slide a.activeSlide {width:13px; height:13px; float:left; margin:0 7px 0 0; background:#FF0033; border-radius:100%; cursor:pointer;}
</style>
<div id="content_paginacao_slide" style="position:absolute; z-index:100;">
</div>
<div id="recebe-slide" style="width:552px; height:310px; float:left;">
<div id="imagem_principal_slide" style="background:url(http://imgur.com/Pyp3XCI.png);">
<div id="contagem_segundos_slide" class="text_contagem_segundos_slide" style="opacity:0.0;">Próximo slide: <b>10S</b></div>
<div id="content_info_slide">
<div id="barra_carregando_slide_normal">
<div id="barra_carregando_slide_carregado" style="width:190px;"></div>
</div>
<div id="insert_content_info_slide">
<div id="insert_text_info_slide">
<div id="insert_text_info_slide_grande" class="text_insert_info_slide_grande">Bem-vindo a versão 3!</div>
<div id="insert_text_info_slide_pequeno" class="text_insert_info_slide_pequeno">Cadastre-se em nosso site !</div>
</div>
<div id="botao_mais_info_slide">
<div id="botao_mais_info_slide_cima"></div>
<div id="insert_botao_text_info_slide" class="text_botao_mais_info_slide">Ir para o site</div>
</div>
</div>
</div>
</div>
<!-- fim slide -->
<div id="imagem_principal_slide" style="background:url(http://i.imgur.com/8pkjwwb.png);">
<div id="contagem_segundos_slide" class="text_contagem_segundos_slide" style="opacity:0.0;">Próximo slide: <b>10S</b></div>
<div id="content_info_slide">
<div id="barra_carregando_slide_normal">
<div id="barra_carregando_slide_carregado" style="width:190px;"></div>
</div>
<div id="insert_content_info_slide">
<div id="insert_text_info_slide">
<div id="insert_text_info_slide_grande" class="text_insert_info_slide_grande">Facebook da VibeHabbo!</div>
<div id="insert_text_info_slide_pequeno" class="text_insert_info_slide_pequeno">fica ligando em nosso facebook</div>
</div>
<div id="botao_mais_info_slide">
<div id="botao_mais_info_slide_cima"></div>
<div id="insert_botao_text_info_slide" class="text_botao_mais_info_slide">Ir para o site</div>
</div>
</div>
</div>
</div>
<!-- fim slide -->
</div>
<div id="logo_site_principal"></div>
<div id="content_palcos_mobilias_recentes">
<div id="palco_mobilias_recentes_1"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/1.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_2"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/9.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_3"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/8.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_4"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/2.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_5"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/3.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_6"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/6.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_9"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/7.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_7"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/5.png) no-repeat center;"></div></div>
<div id="palco_mobilias_recentes_8"><div id="base_mobilia_palco_1" style="background:url(imagens/mobis_recentes/4.png) no-repeat center;"></div></div>
</div>
</div>
</div>
<div id="content_base_corpo_site">
<div id="info_barra_corpo_site">
<div id="content_insert_info_barra_corpo_site">
<div id="icone_insert_info_barra_corpo_site"></div>
<div id="insert_text_info_barra_corpo_site" class="text_insert_info_barra_corpo_site">Olá <b>usuários</b>, gostariamos de saber oque acharam do nosso novo site?</div>
</div>
</div>
<div id="corpo_site">
<?php
Site::Paginas('Paginas');
?>
</div>
<div id="content_rodape">
<div id="content_text_creditos_rodape" class="text_creditos_rodape">Copyrights © 2013 - 2014 | Vibe Habbo. Todos os direitos reservados a este site da web. Este site não é de propriedade ou operado pela Sulake Corporation e não é parte do Habbo Hotel®.</div>
<div id="logo_vibe_rodape"></div>
<div id="base_logo_fw_rodape"><div id="logo_fw_rodape"></div></div>
</div>
</div>
</body>
</html>

Here's what your script header tags should look like. Notice how there is a > symbol after each src element. This denotes the closing of the tag.
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery-nav.js"></script>
<script type="text/javascript" src="scripts/colortip.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="scripts/shadowbox.js"></script>
<script type="text/javascript" src="scripts/principal.js"></script>
It's also recommended to use _ instead of spaces in your folder name to help reduce errors. So http://habbomania.esy.es/vibe v3/index.php should be http://habbomania.esy.es/vibe_v3/index.php.

Two scripts not working together

I'm learning to write some scripts in jQuery at work and I have a problem with two of them: one of them is not working along with the other, while when alone it is working perfectly fine. As I'm not expert on Javascript nor programming basics (sorry for that), I don't know if there is some kind of conflict between the scripts.
So I'm begging you to help me, cause I'm desperate right now.
This is the page where both scripts are: http://www.ufv.es/beli (just scroll until you see some blue buttons).
The first script is loading different content on the right side of the page depending on the button you click on.
The second one is supposed to work within "Claustro docente" button, just as it works on this other page I created to show you: http://www.ufv.es/beli2
I'm sure I'm making a lot of mistakes, but if you could please help me... thank you!
$(document).ready(function() {
jQuery('.grados-content').hide();
jQuery('#grados-contenido').html(jQuery('#grados-content1').html());
divContenido = jQuery('.grado-item', this).children('.grados-content');
$('.grado-item',this).click(function(e){
e.preventDefault();
jQuery('#grados-contenido').html(jQuery(this).children('.grados-content').html());
$(this).addClass('grado-seleccionado');
$('.grado-item').not(this).removeClass('grado-seleccionado');
});
var curentProfe = 0;
var totalProfes = $('#profes').children().length;
function showBigProfe(profeDiv) {
var RutaImagen = $(profeDiv).children('img').attr('src');
var titulo = $(profeDiv).find('h3').html();
var subti = $(profeDiv).find('.masinfo').html();
var profeweb = $(profeDiv).find('.webenlace').attr('href');
var profemail = $(profeDiv).find('.mailenlace').attr('href');
var linkedin = $(profeDiv).find('.linkedinenlace').attr('href');
var researchgate = $(profeDiv).find('.researchgate').attr('href');
var facebook = $(profeDiv).find('.facebookenlace').attr('href');
var twitter = $(profeDiv).find('.twitterenlace').attr('href');
$('#grande').fadeIn();
$('#conteneprof').children('img').attr('src', RutaImagen);
$('.infocontenido').children('h3').html(titulo);
$('.bio').html(subti);
if (profeweb == '#') {
$('#iconoweb').css('display', 'none');
} else {
$('#iconoweb').css('display', 'inline-block');
$('.infocontenido').children('.webenlace').attr('href', profeweb);
}
if (profemail == '#'){
$('#iconomail').css('display', 'none');
} else{
$('#iconomail').css('display', 'inline-block');
$('.infocontenido').children('.mailenlace').attr('href', profemail);
}
if (linkedin == '#'){
$('.linkedinenlace').css('display', 'none');
} else {
$('.linkedinenlace').css('display', 'inline-block');
$('.infocontenido').children('.linkedinenlace').attr('href', linkedin);
}
if (researchgate == '#'){
$('.researchgate').css('display', 'none');
} else {
$('.researchgate').css('display', 'inline-block');
$('.infocontenido').children('.researchgate').attr('href', researchgate);
}
if (facebook == '#'){
$('.facebookenlace').css('display', 'none');
} else {
$('.facebookenlace').css('display', 'inline-block');
$('.infocontenido').children('.facebookenlace').attr('href', facebook);
}
if (twitter == '#'){
$('.twitterenlace').css('display', 'none');
} else {
$('.twitterenlace').css('display', 'inline-block');
$('.infocontenido').children('.twitterenlace').attr('href', twitter);
}
}
$('.profe', this).mouseenter(function() {
$('.infoprof', this).fadeIn(600).css('z-index', '1');
});
$('.profe', this).mouseleave(function() {
$('.infoprof', this).fadeOut(600);
});
$('.fa-times, #grande').click(function() {
$('#grande').fadeOut();
});
$('#conteneprof').click(function(event) {
event.stopPropagation();
});
$('.profe', this).click(function() {
curentProfe = Number(this.id);
showBigProfe(this);
});
$('.fa-chevron-left').click(function() {
curentProfe = curentProfe - 1;
if (curentProfe < 1) {
curentProfe = totalProfes;
}
showBigProfe('#' + curentProfe);
});
$('.fa-chevron-right').click(function() {
curentProfe = curentProfe + 1;
if (curentProfe > totalProfes) {
curentProfe = 1;
}
showBigProfe('#' + curentProfe);
});
});
jQuery('.boton-redondo-llamamos').click(function(){
window.location.href = "http://www.ufv.es/nosotros-te-llamamos";
});
#profes{
min-width:106%;
}
#profes .profe{
width:150px;
height:130px;
margin:5px;
float:left;
position:relative;
overflow: hidden;
cursor:pointer;
}
#profes .infoprof{
width:100%;
height:90px;
margin-top:20px;
background:rgba(255, 255, 255, 0.75);
position:absolute;
display:none;
}
.infoprof a{
text-indent:-9999px;
color:transparent;
}
.infoprof h3, .infoprof p{
position:absolute;
color:white;
}
.infoprof h3{
text-align:center;
text-transform:uppercase;
color:#003d67;
z-index:-1;
width:100%;
margin:0!important;
}
#profes .profe img.fotos{
position: absolute;
min-height:130px;
opacity:.8;
}
.profe p{
left:30%;
top:50%;
}
.masinfo{
display:none;
}
#grande{
position:fixed;
background-color:rgba(0,0,0,0.7);
width:100%;
height:100%;
top:0px;
left:0;
display:none;
z-index:10;
}
#conteneprof{
width:625px;
display:table;
padding:60px;
background-color:white;
margin:150px auto;
opacity:1;
position:relative;
border-radius:10px;
}
#conteneprof p{
color:#575950;
margin:5px;
}
.fa-times{
color:#003d67;
text-align:center;
width:24px;
height:24px;
position:absolute;
top:15px;
right:15px;
font-size:22px!important;
cursor:pointer;
border:3px solid transparent;
border-radius:30px;
transition:all 0.35s linear;
-webkit-transition:all 0.35s linear;
padding:2px 0 2px 5px;
}
.fa-times:hover{
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
border:3px solid #003d67;
}
.fa-chevron-left, .fa-chevron-right{
position:absolute;
width:36px;
height:36px;
font-size:32px!important;
color:#003d67;
top:50%;
margin-top:-18px;
cursor:pointer;
transition:all .3s ease;
}
.fa-chevron-left:hover, .fa-chevron-right:hover{
color:#6fa3b6;
}
.fa-chevron-left{
left:10px;
}
.fa-chevron-right{
right:10px;
}
#conteneprof img{
float:left;
width:160px;
margin:5px;
padding:15px 0 0 45px;
}
#conteneprof .infocontenido{
max-width:345px;
margin:0 57px 0 5px;
float:left;
padding:15px 0 20px 0;
}
#conteneprof .infocontenido h3{
color:#003d67;
float:left;
margin:5px;
text-transform:uppercase;
}
#conteneprof .infocontenido p{
padding:0!important;
}
#conteneprof .infocontenido a.redenlace{
text-indent: -9999px;
float: left;
width: 27px;
height: 27px;
backface-visibility: hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
transform: translateZ(0px);
transition-duration: 0.3s;
transition-property: transform;
vertical-align: middle;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
display:none;
color:transparent;
margin:5px;
}
#conteneprof .infocontenido a.webenlace{
background: url("http://recursos.ufv.es/img/es/icono-web.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.mailenlace{
background: url("http://recursos.ufv.es/img/es/mail-arroba.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.linkedinenlace{
background: url("http://recursos.ufv.es/img/es/linkedin.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.researchgate{
background: url("http://recursos.ufv.es/img/es/logo-research-gate.gif") no-repeat 0 0;
}
#conteneprof .infocontenido a.facebookenlace{
background: url("http://recursos.ufv.es/img/es/facebook-profes.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.twitterenlace{
background: url("http://recursos.ufv.es/img/es/twitter.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.redenlace:before {
background: radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);
content: "";
height: 10px;
left: 5%;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transition-duration: 0.3s;
transition-property: transform, opacity;
width: 90%;
z-index: -1;
}
#conteneprof .infocontenido a.redenlace:hover, #conteneprof .infocontenido a.redenlace:focus, #conteneprof .infocontenido a.redenlace:active {
transform: translateY(-5px);
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
}
#conteneprof .infocontenido a.redenlace:hover:before, #conteneprof .infocontenido a.redenlace:focus:before, #conteneprof .infocontenido a.redenlace:active:before {
opacity: 1;
transform: translateY(5px);
}
.infocontenido .bio{
max-height:200px;
overflow-y:scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beli test</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="beli.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src="beli.js"></script>
</head>
<body>
<div class="grados-menu">
<ul>
<li class="grado-item grado-seleccionado">
<a class="enlace" href="#" id="1">Presentación</a>
<div class="grados-content" id="grados-content1">
content1
</li>
<li class="grado-item">
<a class="enlace" href="#" id="2">Plan de estudios</a>
<div class="grados-content" id="grados-content2">
content2
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="3">Título propio: El liderazgo colaborativo en el marketing digital</a>
<div class="grados-content" id="grados-content3">
content3
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="4">Metodología</a>
<div class="grados-content" id="grados-content4">
content4
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="5">Salidad profesionales del Grado en Marketing</a>
<div class="grados-content" id="grados-content5">
content5
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="6">Claustro docente</a>
<div class="grados-content" id="grados-content6">
<h1>
Claustro docente</h1>
<br />
<p>
Nuestro equipo docente combina perfiles de diferentes características:</p>
<div class="lista">
<ul class="inline">
<li>
Profesionales en activo que desempeñan su actividad ajena a la Universidad y que se prestan por su vocación docente a dar clase a nuestros alumnos.</li>
<li>
Profesores a tiempo completo en la Universidad que son doctores en sus materias.</li>
</ul>
</div>
<br />
<div id="profes">
<div class="profe" id="1">
<div class="infoprof">
<h3 class="hfoto">
Raquel Ayesterán</h3>
<a class="webenlace" href="http://raquelayestaran.com">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/raquelayestaran">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/raquel-ayesteran.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Dirección Estratégica, Marketing, Comercial y Comunicación. Doctor en Marketing Integrado 360º. Directora de Grado.</p>
</div>
</div>
<div class="profe" id="2">
<div class="infoprof">
<h3 class="hfoto">
Rafael Alé Ruiz</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/rafael-ale.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Organización de Empresas. Doctor en Físicas.</p>
</div>
</div>
<div class="profe" id="3">
<div class="infoprof">
<h3 class="hfoto">
Guillermo Arce</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://www.linkedin.com/in/guillermo-arce-dr-phd-2b7623b?trk=nav_responsive_tab_profile">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/guillermo-arce.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Marca, Marketing, Ventas, Redes Sociales e Internet Doctor en UAX. Experto en Estrategia de Marca.</p>
</div>
</div>
<div class="profe" id="4">
<div class="infoprof">
<h3 class="hfoto">
Beatriz Duarte</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/beatriz-duarte-monedero-67641682">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/beatriz-duarte.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Doctora en Ciencias Económicas y Empresariales, UCM.Analista Financiero. Responsable de Calidad del Grado en ADE.</p>
</div>
</div>
<div class="profe" id="5">
<div class="infoprof">
<h3 class="hfoto">
Adolfo García</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/adolfo-garcia.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Logística, Marketing y Ventas Experiencia profesional en: MINOLTA, TNT, TELEFONICA, MAFRESA. Licenciado en Ciencias Económicas y Empresariales.</p>
</div>
</div>
<div class="profe" id="6">
<div class="infoprof">
<h3 class="hfoto">
Fidel Rodríguez</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/fidel-rodriguez.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Ciencias sociales, Historia y Artes Doctor en Historia y Doctor en Sociología. Profesor universitario, UFV.</p>
</div>
</div>
<div class="profe" id="7">
<div class="infoprof">
<h3 class="hfoto">
Jesús Sánchez</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/jesus-sanchez.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Comercial y Marketing en ADE+MARKETING Doctor en Derecho, Comillas. Miembro del Comité Científico del Instituto de Investigación. TheScientificCommittee oftheAnnuals of Economicand Management, Universidad Católica Juan Pablo II de Lublin-Polonia.</p>
</div>
</div>
<div class="profe" id="8">
<div class="infoprof">
<h3 class="hfoto">
Francisco Solá</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/matthew-foley-ryan.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Marketing y Comunicación Licenciado en Ciencias Económicas y Empresariales, UCM. Experto en Marketing y Comunicación Publicitaria. Socio de la empresa "Acciones de Comunicación y Estrategia". Responsable de Calidad del Grado en Marketing, UFV.</p>
</div>
</div>
<div class="profe" id="9">
<div class="infoprof">
<h3 class="hfoto">
Alfonso Jesús Torres</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/alfonso-jesus-torres.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Administración de empresas Licenciado en Ciencias Económicas y Empresariales, UAM. Master en Dirección Comercial y Marketing,CEI. Master en Humanidades UFV</p>
</div>
</div>
<div class="profe" id="10">
<div class="infoprof">
<h3 class="hfoto">
Inmaculada Puebla</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/inmaculada-puebla-a398ba46">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/inmaculada-puebla.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Tecnologías de la Información y Comunicación, Ventas, Marketing, Gestión Empresarial, Gamificación, Matemáticas etc. Doctora en Humanidades, UFV. Licenciada en Ciencias Físicas, especialidad Informática por la UCM. Máster de finanzas y marketing UPM. Alta experiencia en empresas tecnológicas.</p>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="grande">
<div id="conteneprof">
<i class="fa fa-times"> </i> <i class="fa fa-chevron-left"> </i> <i class="fa fa-chevron-right"> </i> <img />
<div class="infocontenido">
<h3>
</h3>
<div class="clear">
</div>
<a class="redenlace webenlace" href="#" id="iconoweb" target="blank_">a</a> <a class="redenlace mailenlace" href="#" id="iconomail" target="blank_">a</a> <a class="redenlace linkedinenlace" href="#" id="iconoli" target="blank_">a</a> <a class="redenlace researchgate" href="#" id="iconorg" target="blank_">a</a> <a class="redenlace twitterenlace" href="#" id="iconotw" target="blank_">a</a> <a class="redenlace facebookenlace" href="#" id="iconotw" target="blank_">a</a>
<div class="clear">
</div>
<div class="bio">
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="7">Perfil internacional del Grado en Marketing</a>
<div class="grados-content" id="grados-content7">
content7
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="8">Alumni</a>
<div class="grados-content" id="grados-content8">
content8
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="9">Vive la UFV</a>
<div class="grados-content" id="grados-content9">
content9
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="10">Calidad y mejora del título</a>
<div class="grados-content" id="grados-content10">
content10
</div>
</li>
</ul>
</div>
<div id="grados-contenido">
</div>
</body>
</html>

I've already found the mistake and it wasn't within the js file, but the html itself (I had various elements with the same ID and that's why the second script didn't work along with the first one).
Thank you all for your help!
Cheers.

align div's on one horizontal line

I have 5 horizontal divs.
Each div contains three child divs:
Header div
line div
text div
How can I achieve that all the line div's (I mean the div that creates a line between header text and content text) will be aligned horizontally?
I need all the horizontal line divs (class="h_line") on one horizontal line.
The horizontal lines are highlighted with red arrows.
See the fiddle.
Please note that I use bigtext.
That library centers the text in its div.
Html
<div class="ThirdSectionTextArea">
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell1">
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell2">
<span class="bigtext">
<div class="header_allroundservice leftalign">
HEADER
</div>
<div class="h_line"></div>
<div class="leftalign">
SOME Content
</div>
</span>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell3">
<span class="bigtext">
<div class="leftalign uppercase">
HEADER
</div>
<div class="h_line"></div>
<div class="leftalign">
SOME Content
</div>
</span>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell4">
<span class="bigtext">
<div class="leftalign uppercase">
HEADER
</div>
<div class="h_line"></div>
<div class="leftalign">
SOME CONTENT
</div>
</span>
</div>
<div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell5">
</div>

I assume any title text can vary in length and span over more than 1 line when some are in just 1 line, is that correct?
In such case you need rows, like below sample, if you want it to be dynamically adjusting. If not, you need to have fixed heights on the title.
table, body {
background-color: #ccc;
}
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 33%;
padding-left: 2%;
padding-right: 2%;
}
.cell:nth-child(1) {
background-color: orange;
border-right: 5px solid #ccc;
}
.cell:nth-child(2) {
background-color: yellow;
border-left: 5px solid #ccc;
border-right: 5px solid #ccc;
}
.cell:nth-child(3) {
background-color: lime;
border-left: 5px solid #ccc;
}
.inner {
max-height: 100px;
overflow: auto;
}
<div class="table">
<div class="row">
<div class="cell">
First
</div>
<div class="cell">
Second<br>
2 lines
</div>
<div class="cell">
Third
</div>
</div>
<div class="row">
<div class="cell">
<hr />
</div>
<div class="cell">
<hr />
</div>
<div class="cell">
<hr />
</div>
</div>
<div class="row">
<div class="cell">
<div class="inner">
First
</div>
</div>
<div class="cell">
<div class="inner">
Second<br>
2 lines
</div>
</div>
<div class="cell">
<div class="inner">
Third<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
with many lines<br>
</div>
</div>
</div>
</div>

Use display-inline
.parent {
display: flex;
}
.block {
margin: 0px;
background-color: #84c300;
display: inline-block;
width: 20%;
}
.block .title {
padding: 5px;
}
.block .text {
padding: 5px;
}
<div class="parent">
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
<div class="block">
<div class="title">title</div>
<hr />
<div class="text">text</div>
</div>
</div>

Please try my JS fiddle code. I hope this will solve your problem.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box-1 {
width:25%;
float:left;
text-align:center;
}
.box-1:first-child {
background: red;
}
.box-1:nth-child(2) {
background: green;
}
.box-1:nth-child(3) {
background: brown;
}
.box-1:nth-child(4) {
background: orange;
}
.heading {
min-height:40px;
border-bottom: 1px solid #fff;
}
.heading h1 {
color:#fff;
font-size:11px;
}
.text p{
color:#fff;
font-size:10px;
}
</style>
</head>
<body>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
<div class="box-1">
<div class="heading">
<h1>
SOFTWARE- UND <br> DATENBANKENTWICKLUNG
</h1>
</div>
<div class="text">
<p>
Unsere Kernkompetenz liegt im Bereich Softwareentwicklung
und Datenbank- programmierung. Hierbei legen wir den Focus
auf die Steigerung der Effizienz und Transparenz Ihrer
Geschäftsprozesse. Wir stecken viel Know-how in eine
einfache Bedienbarkeit der Software – selbst wenn komplexe
Vorgänge abgebildet werden. Denn Sie sollen Ihre Software
schließlich intuitiv bedienen können, nicht wir.
</p>
</div>
</div>
</body>
</html>
Float divs with same heading height(https://jsfiddle.net/ua7hmwsn/)