4

Buen día, para comenzar hablando de esto, hay una web que fue copiada con httrack y a partir de ello he ido modificandola para aprender.

Resulta que al parecer esta web fue hecha en vue.js y el programa lo convirtió todo en algo estático (el index es router.html). Al poner un código como esto:

        <!-- ESTA PARTE NO LO INTERPRETA BIEN-->
   <style type="text/css">
.block2 {
    width: 100%;
background-color:#7596CB;}
.msg {
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
color:white;
text-shadow: black 0.1em 0.1em 0.2em;
  font-size: 500%;
height:2em;
}
.block1 {
background-color:#7596CB;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: right top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: right top;
    text-align:center;
  width:700px;
margin-left:-700px;
}
</style>


<div class="row">
  <div class="col-sm-4">

    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">SERVICIOS</div>
            </td>
        </tr>
        </table>
    </div>
<style>
.block1{
width:700px;
margin-left:-700px;
}
</style>
</div>

   <div class="col-sm-8">coaaaaaaaaaaaaaaaaaaaaal-sm-8</div>
</div>

Y se ve así:

Imagen vista previa

Cuando en realidad debería verse al menos con esto del código de arriba:

Ideal

La web se encuentra alojada en este sitio web para visualizar todo de mejor forma y localmente.

Adjunto index.html:

   <!DOCTYPE html>
<html>
  <!-- Mirrored from talentogem.cl/router.php by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 18 Jul 2019 05:54:05 GMT -->
  <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
  <head>
      <!-- Basic Page Needs
      ================================================== -->
      <meta charset="utf-8">
      <!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="TALENTO GEM: Somos una plataforma de empleo basada en videos, donde empresas y personas se conectan en base a habilidades, competencias e intereses.">
      <title>TALENTO GEM</title>
      <meta name="author" content="Virtus-it.cl">

      <!-- Favicons
      ================================================== -->
      <link rel="shortcut icon" href="img/ico/favicon.ico" type="image/x-icon">
      <link rel="apple-touch-icon" href="img/apple-touch-icon.html">
      <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.html">
      <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.html">

      <!-- Bootstrap -->
      <link rel="preload" href="css/bootstrap.min.css" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="css/style.css" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="css/responsive.css" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="http://fonts.googleapis.com/css?family=Raleway:500,600,700,100,800,900,400,200,300" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="http://fonts.googleapis.com/css?family=Playball" as="style" onload="this.rel='stylesheet'">


      <link href="css/nuevostyle.css" rel="stylesheet" type="text/css" media="all">

      <!-- No estaba bien incluida en el head-->
    <style type="text/css">
    .block2 {
        width: 100%;
    background-color:#7596CB;}
    .msg {
        display: inline-block;
        white-space: nowrap;
        font-family: Verdana;
        font-size: 14pt;
    color:white;
    text-shadow: black 0.1em 0.1em 0.2em;
      font-size: 500%;
    height:2em;
    }
    .block1 {
    background-color:#7596CB;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: right top;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right top;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: right top;
        text-align:center;
        width:700px;
        margin-left:-700px;
    }
    </style>

  </head>
  <body>
    <div id="app" v-cloak>
      <div id="tf-home">
        <div class="overlay">
            <div id="sticky-anchor"></div>
            <header>
                <nav class="navbar navbar-default navbar-fixed-top" style="background: white;height: 15vh;">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                            aria-expanded="false" class="navbar-toggle collapsed ">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a href="index.html" class="navbar-brand hidden-xs hidden-sm" style="padding: 0px 15px; margin-left:30%;"><img src="img/logo.jpg" class="hidden-xs hidden-sm" style="height: 13vh;"></a>
                            <a class="navbar-header" href="index.html"><img src="img/logo-s.jpg" style="height:70px; weight:auto; margin-left:5%; margin-bottom:5%;" class="visible-xs visible-sm"/></a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- que es esto -->
                            <ul class="nav navbar-nav navbar-right" style="
                            margin-top: 0 !important;
                            color: black;
                            ">
                                <li><a href="router.html" v-if="personaLogueada">Mi Perfil</a></li>
                                <li><a href="routerf6f2.html?page=blog" class="btn btn-xs btn-warning btn-circle"><span class="fa fa-rss hidden-xs"></span><span class="visible-xs">Blog</span></a></li>
                                <li><a target="new" href="mailto:[email protected]" class="btn btn-xs btn-warning btn-circle"><span class="fa fa-envelope-o hidden-xs"></span><span class="visible-xs">Contacto</span></a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </header>
      <!--<body>-->
            <div class="row">
              <div class="col-sm-4">
                <div class="block1">
                    <table class="block2">
                        <tr>
                            <td>
                                <div class="msg">SERVICIOS</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-sm-8">coaaaaaaaaaaaaaaaaaaaaal-sm-8</div>
            </div>
            <div class="container">
                <form classi="form-inline">
                    <div class="content" style="color:#444 !important;padding-top:5% !important">
                        <div class="row" style="padding-top: 40px; padding-bottom: 80px">
                            <div class="col-sm-6">
                                <div class="box"> <!--- *** -->
                                    <div class="row" style="padding-top: 40px; padding-bottom: 80px">
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <h3><b>BUSCAS EMPLEO? <a class="btn3" href="#" @click="ingresar()" v-if="!personaLogueada" style="color: blue">Ingresar</a></b></h3>
                                            <ul style="text-align:left">
                                                <li><h5><b>Crea un CV de manera fácil, rápida y dinámica</b></h5></li>
                                                <li><h5><b>Muestra lo que esperan ver de tí</b></h5></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="row" style="padding-top: 0px">
                                        <div class="col-sm-3" >
                                            <img src="img/Home_Ico1.png" height="90px">
                                            <h4 style="color:black">1. Crea tu Usuario</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico2.png" height="90px">
                                            <h4 style="color:black">2. Completa e Ingresa los campos de CV</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico3.png" height="90px">
                                            <h4 style="color:black">3. Revisa tu CV y envía!</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico4.png" height="90px">
                                            <h4 style="color:black">4. En pocos minutos ya tienes TU CV y visible para todos</h4>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- *** -->
                            <div class="col-sm-6">
                                <div class="box1"> <!--- *** -->
                                    <div class="row" style="padding-top: 40px; padding-bottom: 80px">
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <h3><b>BUSCAS PERSONAS? <a href="#" @click="ingresar()" v-if="!personaLogueada" style="color: blue">Ingresar</a></b></h3>
                                            <ul style="text-align:left">
                                                <li><h5><b>Publica tu necesidad</b></h5></li>
                                                <li><h5><b>Recibe y evalua candidatos!!!</b></h5></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="row" style="padding-top: 0px">
                                        <div class="col-sm-3 col-sm-offset-1" >
                                            <img src="img/Home_Ico1.png" height="90px">
                                            <h4 style="color:black">1. Crea tu Usuario</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico2.png" height="90px">
                                            <h4 style="color:black">2. Publica tu necesidad</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico3.png" height="90px">
                                            <h4 style="color:black">3. Recibe candidatos!!!</h4>
                                        </div>
                                    </div>  
                                </div> <!--- *** --->
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div id="tf-service" class="hidden">
            <div class="container">
                <div class="col-md-4">
                    <div class="media">
                        <div class="media-body">
                            <h4 class="media-heading">Encuentra un trabajo acorde a tus fortalezas.</h4>
                            <img src="img/i2.jpg" class="img-responsive img-rounded"/>
                            <br/>
                            <p>Preséntate. Vidéate. Destaca!</p>
                            <h4>Talento es actitud </h4>
                            <!--</p> Que cierra esto???-->
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="media">
                        <div class="media-body">
                            <h4 class="media-heading">¿Por qué un video?</h4>
                                <p>Es más rápido, personal y completo. Comunica mejor. </p>
                            <p>Va directo a la parte principal del proceso de reclutamiento: reconocerse.</p>
                            <p>En TALENTO GEM las personas que buscan empleo suben un video, destacando su experiencia y fortalezas personales. Las empresas que necesitan incorporar colaboradores, reclutan en base a criterios de trayectoria y habilidades clave. </p>
                            <img src="img/i1.jpg" class="img-responsive img-rounded"/><br/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tf-about" class="hidden">
          <div class="overlay">
              <div class="container">
                  <div class="row">

                  </div>
              </div>
          </div>
        </div>
        <div id="tf-why-me" class="hidden">
          <div class="overlay">
          </div>
        </div>
        <nav id="tf-footer">
          <div class="container">
               <div class="pull-left">
                  <p>© TALENTOGEM 2019. Todos los derechos reservados.<br><br><a target="new" href="https://www.google.com/maps/place/Gral+del+Canto+303,+Oficina+611,+Providencia,+Regi%C3%B3n+Metropolitana/@-33.4306215,-70.618853,17z/data=!4m5!3m4!1s0x9662cf7cc0f4b24d:0xaa291aa715484bb9!8m2!3d-33.4306439!4d-70.6174046"><span class="fas fa-map-marker-alt">General del Canto, Oficina 611, Providencia.</span></a></p>
                  <ul class="social-media list-inline">

                  </ul>
              </div>
              <div class="pull-right">
                <small>Desarrollado por <a href="http://virtus-it.cl/" target="_blank">Virtus-it.cl</a></small>
              </div>
          </div>
        </nav>

        <div id="registry" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header text-center">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h5><b>Bienvenido(a) a TALENTO GEM</b></h5>
                    </div>
                        <div class="modal-body">

                        </div>

                </div>
            </div>
        </div>



        <v-login ref="login" v-model="personaLogueada" @onlogin="loginOK"></v-login>
    </div>

    <!-- Script formulario login-->
<script type="text/x-template" id="login-template">
    <div id="divlogin" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5><b>Bienvenid@ a TALENTO GEM</b></h5>
                </div>
                <div class="modal-body">

                <form >
                    <!--<p>Por favor, ingresa tus credenciales... </p>-->
                    <div class="content" style="padding:5px !important">
                        <div class="row">
                            <div class="col-sm-6 align-center">
                            <!--<label class="control-label" for="nombre">Mail</label>-->
                                <input type="text" class="form-control" v-model="mail" placeholder="Mail"/>
                            </div>
                            <div class="col-sm-6 align-center">
                            <!--<label class="control-label" for="rut">Password</label>-->
                                <input type="password" class="form-control" v-model="password" placeholder="Password">
                                <input type="password" class="form-control" v-model="password2" v-if="emailRegistrado==2" placeholder="Confirmar clave">
                            </div>

                        </div>
                        <hr/>
                        <div class="row">
                            <div class="col-sm-6 align-center">
                                <a class="form-control btn btn btn-primary" v-if="emailValido && emailRegistrado==1"  @click="login">Ingresar</a>
                            </div>
                            <div class="col-sm-6 align-center">
                                <a class="form-control btn btn btn-primary" v-if="emailValido && emailRegistrado==1"  @click="enviarCredenciales">Enviarme credenciales por Mail</a>
                                <a class="form-control btn btn btn-primary" v-if="emailValido && emailRegistrado==2 && passwordCoinciden" @click="registrarCandidato">Registrarme como Candidato</a>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-sm-6" style="background-color:lavender;">
                            <h4>¿BUSCAS EMPLEO?</h4>
                            <b>1. Crea tu Usuario</b></br>
                            <b>2. Completa e Ingresa los campos de CV</b></br>
                            <b>3. Revisa tu CV y envía!</b></br>
                            <b>4. En pocos minutos ya tienes TU CV y visible para todos
                        </div>
                        <div class="col-sm-6" style="background-color:lavenderblush;">
                            <h4>¿BUSCAS PERSONAS?</h4>
                            <b>1. Crea tu Usuario</b></br>
                            <b>2. Publica tu necesidad</b></br>
                            <b>3. Recibe candidatos!!!</b>
                            <p></p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div><!-- este div que cierra ?? -->
</script>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.blockUI.js"></script>
<script src="js/vue/vue.min.js"></script><script src="js/vue/vue.menu.js"></script><script type="text/javascript" src="js/main.js"></script>
<script>
    var queryString = [];
    var contactoAnteErroresMail = '[email protected]';
    var PERSONA_LOGUEADA = {
        PERS_ID: '',
        COPE_ID: '',
        PERF_ID: ''
    };
    var mensaje = '';

</script>
<script type="text/javascript" src="js/validaciones.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123717870-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag("js", new Date());

    gtag("config", "UA-123717870-1");
</script>
<script type="text/javascript" src="main8b19.js?v=1557269742"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/jquery.mask.min.js"></script>
<script src="js/vue/vue.login.js"></script>

</body>

<!-- Mirrored from talentogem.cl/router.php by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 18 Jul 2019 05:54:31 GMT -->
</html>

Entonces me preguntaba que es lo que en realidad está pasando, quizás es porque es con vue.js y en la descarga simplemente se quedó así? he intentado cambiar muchas cosas pero sigue sin interpretarlo bien, cualquier ayuda es recibida. Muchas gracias de antemano.

1
  • Por qué tienes dos bloques style? Con poner todo en el primero debería de funcionarte, lo segundo, por qué tienes dos clases de css que se llaman igual? eso genera conflicto. Commented el 30 ago. 2019 a las 6:30

2 respuestas 2

6

Te falta por implementar en tu código la librería bootstrap las clases col-sm-4 y row pertenecen a ella.

.block2 {
    width: 100%;
background-color:#7596CB;}
.msg {
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
color:white;
text-shadow: black 0.1em 0.1em 0.2em;
  font-size: 500%;
height:2em;
}
.block1 {
background-color:#7596CB;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: right top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: right top;
    text-align:center;
  width:700px;
margin-left:-700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-4">

    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">SERVICIOS</div>
            </td>
        </tr>
        </table>
    </div>
</div>

   <div class="col-sm-8">coaaaaaaaaaaaaaaaaaaaaal-sm-8</div>
</div>

Te recomiendo que leas el funcionamiento de esa librería

Edición

Creo que tu fallo puede estar en la organización de tu html. He revisado tu código y he encontrado una cosa que me llamaba la atención, la estructura web no está muy clara. Normalmente es:

<html>
   <head>
      //estilos y metas
   </head>
   <body>
      //estructura web
      //scripts
   </body>
</html>

Lo que tenias tu era un poco caotico en la parte del head y el estilo metido dentro del body, también alguna etiqueta suelta que te puede generar conflicto.

Te dejo el código revisado aunque no te confirmo al 100% que esté bien, he reorganizado un poco todo pero mejor que compruebes y eches un vistazo.

    <!DOCTYPE html>
<html>
  <!-- Mirrored from talentogem.cl/router.php by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 18 Jul 2019 05:54:05 GMT -->
  <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
  <head>
      <!-- Basic Page Needs
      ================================================== -->
      <meta charset="utf-8">
      <!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="TALENTO GEM: Somos una plataforma de empleo basada en videos, donde empresas y personas se conectan en base a habilidades, competencias e intereses.">
      <title>TALENTO GEM</title>
      <meta name="author" content="Virtus-it.cl">

      <!-- Favicons
      ================================================== -->
      <link rel="shortcut icon" href="img/ico/favicon.ico" type="image/x-icon">
      <link rel="apple-touch-icon" href="img/apple-touch-icon.html">
      <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.html">
      <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.html">

      <!-- Bootstrap -->
      <link rel="preload" href="css/bootstrap.min.css" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="css/style.css" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="css/responsive.css" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="http://fonts.googleapis.com/css?family=Raleway:500,600,700,100,800,900,400,200,300" as="style" onload="this.rel='stylesheet'">
      <link rel="preload" href="http://fonts.googleapis.com/css?family=Playball" as="style" onload="this.rel='stylesheet'">


      <link href="css/nuevostyle.css" rel="stylesheet" type="text/css" media="all">

      <!-- No estaba bien incluida en el head-->
    <style type="text/css">
    .block2 {
        width: 100%;
    background-color:#7596CB;}
    .msg {
        display: inline-block;
        white-space: nowrap;
        font-family: Verdana;
        font-size: 14pt;
    color:white;
    text-shadow: black 0.1em 0.1em 0.2em;
      font-size: 500%;
    height:2em;
    }
    .block1 {
    background-color:#7596CB;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: right top;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right top;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: right top;
        text-align:center;
        width:700px;
        margin-left:-700px;
    }
    </style>

  </head>
  <body>
    <div id="app" v-cloak>
      <div id="tf-home">
        <div class="overlay">
            <div id="sticky-anchor"></div>
            <header>
                <nav class="navbar navbar-default navbar-fixed-top" style="background: white;height: 15vh;">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                            aria-expanded="false" class="navbar-toggle collapsed ">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a href="index.html" class="navbar-brand hidden-xs hidden-sm" style="padding: 0px 15px; margin-left:30%;"><img src="img/logo.jpg" class="hidden-xs hidden-sm" style="height: 13vh;"></a>
                            <a class="navbar-header" href="index.html"><img src="img/logo-s.jpg" style="height:70px; weight:auto; margin-left:5%; margin-bottom:5%;" class="visible-xs visible-sm"/></a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- que es esto -->
                            <ul class="nav navbar-nav navbar-right" style="
                            margin-top: 0 !important;
                            color: black;
                            ">
                                <li><a href="router.html" v-if="personaLogueada">Mi Perfil</a></li>
                                <li><a href="routerf6f2.html?page=blog" class="btn btn-xs btn-warning btn-circle"><span class="fa fa-rss hidden-xs"></span><span class="visible-xs">Blog</span></a></li>
                                <li><a target="new" href="mailto:[email protected]" class="btn btn-xs btn-warning btn-circle"><span class="fa fa-envelope-o hidden-xs"></span><span class="visible-xs">Contacto</span></a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </header>
      <!--<body>-->
            <div class="row">
              <div class="col-sm-4">
                <div class="block1">
                    <table class="block2">
                        <tr>
                            <td>
                                <div class="msg">SERVICIOS</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-sm-8">coaaaaaaaaaaaaaaaaaaaaal-sm-8</div>
            </div>
            <div class="container">
                <form classi="form-inline">
                    <div class="content" style="color:#444 !important;padding-top:5% !important">
                        <div class="row" style="padding-top: 40px; padding-bottom: 80px">
                            <div class="col-sm-6">
                                <div class="box"> <!--- *** -->
                                    <div class="row" style="padding-top: 40px; padding-bottom: 80px">
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <h3><b>BUSCAS EMPLEO? <a class="btn3" href="#" @click="ingresar()" v-if="!personaLogueada" style="color: blue">Ingresar</a></b></h3>
                                            <ul style="text-align:left">
                                                <li><h5><b>Crea un CV de manera fácil, rápida y dinámica</b></h5></li>
                                                <li><h5><b>Muestra lo que esperan ver de tí</b></h5></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="row" style="padding-top: 0px">
                                        <div class="col-sm-3" >
                                            <img src="img/Home_Ico1.png" height="90px">
                                            <h4 style="color:black">1. Crea tu Usuario</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico2.png" height="90px">
                                            <h4 style="color:black">2. Completa e Ingresa los campos de CV</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico3.png" height="90px">
                                            <h4 style="color:black">3. Revisa tu CV y envía!</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico4.png" height="90px">
                                            <h4 style="color:black">4. En pocos minutos ya tienes TU CV y visible para todos</h4>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- *** -->
                            <div class="col-sm-6">
                                <div class="box1"> <!--- *** -->
                                    <div class="row" style="padding-top: 40px; padding-bottom: 80px">
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <h3><b>BUSCAS PERSONAS? <a href="#" @click="ingresar()" v-if="!personaLogueada" style="color: blue">Ingresar</a></b></h3>
                                            <ul style="text-align:left">
                                                <li><h5><b>Publica tu necesidad</b></h5></li>
                                                <li><h5><b>Recibe y evalua candidatos!!!</b></h5></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="row" style="padding-top: 0px">
                                        <div class="col-sm-3 col-sm-offset-1" >
                                            <img src="img/Home_Ico1.png" height="90px">
                                            <h4 style="color:black">1. Crea tu Usuario</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico2.png" height="90px">
                                            <h4 style="color:black">2. Publica tu necesidad</h4>
                                        </div>
                                        <div class="col-sm-3">
                                            <img src="img/Home_Ico3.png" height="90px">
                                            <h4 style="color:black">3. Recibe candidatos!!!</h4>
                                        </div>
                                    </div>  
                                </div> <!--- *** --->
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div id="tf-service" class="hidden">
            <div class="container">
                <div class="col-md-4">
                    <div class="media">
                        <div class="media-body">
                            <h4 class="media-heading">Encuentra un trabajo acorde a tus fortalezas.</h4>
                            <img src="img/i2.jpg" class="img-responsive img-rounded"/>
                            <br/>
                            <p>Preséntate. Vidéate. Destaca!</p>
                            <h4>Talento es actitud </h4>
                            <!--</p> Que cierra esto???-->
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="media">
                        <div class="media-body">
                            <h4 class="media-heading">¿Por qué un video?</h4>
                                <p>Es más rápido, personal y completo. Comunica mejor. </p>
                            <p>Va directo a la parte principal del proceso de reclutamiento: reconocerse.</p>
                            <p>En TALENTO GEM las personas que buscan empleo suben un video, destacando su experiencia y fortalezas personales. Las empresas que necesitan incorporar colaboradores, reclutan en base a criterios de trayectoria y habilidades clave. </p>
                            <img src="img/i1.jpg" class="img-responsive img-rounded"/><br/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tf-about" class="hidden">
          <div class="overlay">
              <div class="container">
                  <div class="row">

                  </div>
              </div>
          </div>
        </div>
        <div id="tf-why-me" class="hidden">
          <div class="overlay">
          </div>
        </div>
        <nav id="tf-footer">
          <div class="container">
               <div class="pull-left">
                  <p>© TALENTOGEM 2019. Todos los derechos reservados.<br><br><a target="new" href="https://www.google.com/maps/place/Gral+del+Canto+303,+Oficina+611,+Providencia,+Regi%C3%B3n+Metropolitana/@-33.4306215,-70.618853,17z/data=!4m5!3m4!1s0x9662cf7cc0f4b24d:0xaa291aa715484bb9!8m2!3d-33.4306439!4d-70.6174046"><span class="fas fa-map-marker-alt">General del Canto, Oficina 611, Providencia.</span></a></p>
                  <ul class="social-media list-inline">

                  </ul>
              </div>
              <div class="pull-right">
                <small>Desarrollado por <a href="http://virtus-it.cl/" target="_blank">Virtus-it.cl</a></small>
              </div>
          </div>
        </nav>

        <div id="registry" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header text-center">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h5><b>Bienvenido(a) a TALENTO GEM</b></h5>
                    </div>
                        <div class="modal-body">

                        </div>

                </div>
            </div>
        </div>



        <v-login ref="login" v-model="personaLogueada" @onlogin="loginOK"></v-login>
    </div>

    <!-- Script formulario login-->
<script type="text/x-template" id="login-template">
    <div id="divlogin" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5><b>Bienvenid@ a TALENTO GEM</b></h5>
                </div>
                <div class="modal-body">

                <form >
                    <!--<p>Por favor, ingresa tus credenciales... </p>-->
                    <div class="content" style="padding:5px !important">
                        <div class="row">
                            <div class="col-sm-6 align-center">
                            <!--<label class="control-label" for="nombre">Mail</label>-->
                                <input type="text" class="form-control" v-model="mail" placeholder="Mail"/>
                            </div>
                            <div class="col-sm-6 align-center">
                            <!--<label class="control-label" for="rut">Password</label>-->
                                <input type="password" class="form-control" v-model="password" placeholder="Password">
                                <input type="password" class="form-control" v-model="password2" v-if="emailRegistrado==2" placeholder="Confirmar clave">
                            </div>

                        </div>
                        <hr/>
                        <div class="row">
                            <div class="col-sm-6 align-center">
                                <a class="form-control btn btn btn-primary" v-if="emailValido && emailRegistrado==1"  @click="login">Ingresar</a>
                            </div>
                            <div class="col-sm-6 align-center">
                                <a class="form-control btn btn btn-primary" v-if="emailValido && emailRegistrado==1"  @click="enviarCredenciales">Enviarme credenciales por Mail</a>
                                <a class="form-control btn btn btn-primary" v-if="emailValido && emailRegistrado==2 && passwordCoinciden" @click="registrarCandidato">Registrarme como Candidato</a>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-sm-6" style="background-color:lavender;">
                            <h4>¿BUSCAS EMPLEO?</h4>
                            <b>1. Crea tu Usuario</b></br>
                            <b>2. Completa e Ingresa los campos de CV</b></br>
                            <b>3. Revisa tu CV y envía!</b></br>
                            <b>4. En pocos minutos ya tienes TU CV y visible para todos
                        </div>
                        <div class="col-sm-6" style="background-color:lavenderblush;">
                            <h4>¿BUSCAS PERSONAS?</h4>
                            <b>1. Crea tu Usuario</b></br>
                            <b>2. Publica tu necesidad</b></br>
                            <b>3. Recibe candidatos!!!</b>
                            <p></p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div><!-- este div que cierra ?? -->
</script>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.blockUI.js"></script>
<script src="js/vue/vue.min.js"></script><script src="js/vue/vue.menu.js"></script><script type="text/javascript" src="js/main.js"></script>
<script>
    var queryString = [];
    var contactoAnteErroresMail = '[email protected]';
    var PERSONA_LOGUEADA = {
        PERS_ID: '',
        COPE_ID: '',
        PERF_ID: ''
    };
    var mensaje = '';

</script>
<script type="text/javascript" src="js/validaciones.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123717870-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag("js", new Date());

    gtag("config", "UA-123717870-1");
</script>
<script type="text/javascript" src="main8b19.js?v=1557269742"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/jquery.mask.min.js"></script>
<script src="js/vue/vue.login.js"></script>

</body>

<!-- Mirrored from talentogem.cl/router.php by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 18 Jul 2019 05:54:31 GMT -->
</html>

La organización en web y en general el mundo de la programación es muy importante.

8
  • 1
    Entiendo lo que comentas y te encuentro toda la razón, pero a lo que voy es que en esa web no se interpreta la parte de los servicios y omite todo tipo de diseño (primera imagen), cuando en realidad debería mostrar el cuadro en azul con su texto
    – Sebastián
    Commented el 30 ago. 2019 a las 6:45
  • 1
    @Sebastián No comprendo bien que quieres decir con ello, lo que quieres es que se muestre el texto en horizontal y como uno de la imagen de arriba? Commented el 30 ago. 2019 a las 6:51
  • 1
    Cuando intento insertar el código de 'servicios' a la primera imagen, simplemente no lo interpreta, solo texto y sin diseño. Eso esta mal por alguna razón
    – Sebastián
    Commented el 30 ago. 2019 a las 7:07
  • 1
    Ya lo entiendo, puede ser que te este generando conflicto alguna clase que se llame de la misma manera o que tengas mal puesto el style si puedes editar tu pregunta para que pueda ver el código completo será de mas ayuda Commented el 30 ago. 2019 a las 7:15
  • 1
    Pienso lo mismo, listo, actualicé la pregunta
    – Sebastián
    Commented el 30 ago. 2019 a las 7:35
0

creo que el problema radica en la rotacion de div.block1. Al rotarlo 90º proyecta su anchura, en tu caso 700px, en modo vertical mientras que su contenedor div.col-sm-4 conserva su altura original de 162px.

Deberias aumentar esa altura añadiendo a tu seccion de estilos

.row .col-sm-4{
  height:700px;
}

Espero que te sirva. Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.