Home / user-70473

Mari Cruz's questions

Martin Hope
Mari Cruz
Asked: 2022-07-19 03:42:51 +0800 CST
  • 2

I want to change the default size of this section of a WordPress site, but I can't find a way to do it. I must say that I have only tried the following code:

.widget-title  shop-sidebar {
        font-size: 22px;
}

I have also used !important, without making changes to the font size

.widget-title  shop-sidebar {
        font-size: 22px !important;
}

This is the part where I want to make the changes:

<span class="widget-title  shop-sidebar"> Categorias </span>

What am I doing wrong ?

css
Martin Hope
Mari Cruz
Asked: 2022-01-06 11:14:02 +0800 CST
  • 4

I'm trying to fix the mobile usability issues of a website and I can't find a solution for more resources than I've searched. I have tried the solutions offered in other queries on this site, but none have worked.

In HTML, how can I fit the content to the width of the screen?

Correct screen width

The problem is in a table, it is the one that extends across, spoiling everything. I don't know what else I can do, I hope that with the code that I show you, you can give me some idea.

Thank you very much

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body class="homepage">
<section id="portfolio">
    <div class="container">
    <div class="container-politica">
      <h2>1. Política de privacidad</h2>
      <p>Este sitio web informa a los usuarios del sitio web sobre su política respecto del tratamiento ye servicios a través de su sitio web.</p
   <p>El uso de esta web implica la aceptación de esta política de privacidad</p>

      <h2>¿Qué son las cookies propias y las de terceros?</h2>
      <p>Las cookies propias son las generadas por la página que está visitando y las de terceros son las generadas por
        servicios
        o proveedores externos como Mailchimp, Mailrelay, Facebook, Twitter, Google, etc.</p>
      <h2>¿Se pueden eliminar las cookies?</h2>
      <p>Sí. No sólo eliminar, también bloquear, de forma general o particular para un dominio específico. Para eliminar
        las
        cookies de un sitio web debe ir a la configuración de su navegador y allí podrá buscar las asociadas al dominio
        en
        cuestión y proceder a su eliminación.</p>


      <h2>Cookies de redes sociales</h2>
      <p>Las Cookies de redes sociales pueden almacenarse en su navegador mientras navega por haciaelautoempleo.com por
        ejemplo,
        cuando utiliza el botón de compartir contenidos de haciaelautoempleo.com en alguna red social.</p>
      <p>Las empresas que generan estas cookies correspondientes a las redes sociales que utiliza esta web tienen sus
        propias
        políticas de cookies:</p>
      <ul>
        <li>Cookie de Twitter, según lo dispuesto en su
          <a target="_blank" href="https://twitter.com/privacy">Política de privacidad y uso de cookies.</a>
        </li>
        <li>Cookie de Google+ y Google Maps, según lo dispuesto en su página sobre qué
          <a target="_blank" href="http://www.google.com/intl/es/policies/technologies/types/">tipo de cookies
            utilizan</a>.</li>
      </ul>
      <p>&nbsp;</p>
      <p>En cumplimiento de lo establecido en el artículo 22.2 de la LSSI se detallan las cookies que pueden instalarse
        habitualmente
        durante la navegación por este sitio web:</p>

      <table class="egt">
        <caption>Cookies que utiliza esta web.</caption>

        <tr>
          <th scope="col">DOMINIO</th>
          <th>NOMBRE DE LA COOKIE</th>
          <th>DURACION</th>
          <th>CONTENIDO</th>
          <th>DESCRIPCION</th>
        </tr>
        <tr>
          <th>web</th>
          <td>PHPSESSID</td>
          <td>Al finalizar la sesión de navegación.</td>
          <td></td>
          <td> Esta cookie es usada por el lenguaje de encriptado PHP para permitir que las variables de SESIÓN sean
            guardadas
            en el servidor web. Esta cookies es esencial para el funcionamiento de la web</td>
        </tr>

        <tr>
          <th>web.com </th>
          <td>_ga</td>
          <td>Caducada.</td>
          <td></td>
          <td>Se utiliza para cualquier tipo de conexión.</td>
        </tr>

        <tr>
          <th>web.com </th>
          <td>cookies_surestao</td>
          <td>viernes, 4 de mayo de 2018, 22:07:35</td>
          <td></td>
          <td>Se utiliza para cualquier tipo de conexión.</td>
        </tr>
        <tr>
          <th>.static.addtoany.com </th>
          <td>__utmz</td>
          <td>sábado, 1 de septiembre de 2018, 6:19:04</td>
          <td>s|utmccn=(referral)|utmcmd=referral|utmcct=/</td>
          <td>Se utiliza estadisticas de redes sociales.</td>
        </tr>
        <tr>
          <th>.static.addtoany.com </th>
          <td>__utma</td>
          <td>domingo, 1 de marzo de 2020, 17:19:04</td>
          <td>5444.1517675303.1519902741.1520007545.13</td>
          <td>Se utiliza para comprobar las sesiones</td>
        </tr>
       
      </table>
      <h2>Más información sobre las cookies</h2>
      <p>Puedes consultar el reglamento sobre cookies publicado por la Agencia Española de Protección de Datos en su “
        <a target="_blank"
          href="https://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf">Guía
          sobre el uso de las cookies</a>” y obtener más información sobre las cookies en Internet,
        <a href="#"></a>
      </p>
      <p>Si desea tener un mayor control sobre la instalación de cookies, puede instalar programas o complementos a su
        navegador,
        conocidos como herramientas de “Do Not Track”, que le permitirán escoger aquellas cookies que desea permitir.
      </p>
      <h2>Advertencia importante sobre las cookies</h2>
    </div>
    </div>
  </section>

</body>
</html>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);


/*************************
*******Typography******
**************************/

.navbar1 {
  background-color: transparent !important;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.navbar1.alt-color {
  background-color: rgb(19, 143, 214) !important;
} 

body {
  background: #fff;
  font-family:'Open Sans', Arial, sans-serif;
  color:#333;
  line-height:1.6em;
}

.container-politica {
  font-size: 1.6em;
}

.container-politica h2 {
  font-size: 36px;
}

.container-politica p {
  line-height: 200%;
}

.container-politica ul {
  line-height: 200%;
}

/*.container-politica tr { 
  max-width: 100%;
  height: auto;
}

.container-politica.egt {
  display: flex;
  justify-content: space-between;
}

table{
  padding-right: 1em;
  width: 100%;
  }*/


h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight:500; 
    font-family:'Open Sans', Arial, sans-serif;
    color:#333;
}

h1{
  font-size: 36px;
  color:#fff;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 16px;
  color: #787878;
  font-weight: 400;
  line-height: 24px;
}

h4{
  font-size: 16px;
}

a {
  color: #E8CE0E;
  -webkit-transition: color 300ms, background-color 300ms;
  -moz-transition: color 300ms, background-color 300ms;
  -o-transition:  color 300ms, background-color 300ms;
  transition:  color 300ms, background-color 300ms;
}

a:hover, a:focus {
  color: #d43133;
}

hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}


.btn-primary {
  padding: 8px 20px;
  background: #E8CE0E;
  color: #fff;
  border-radius: 4px;
  border:none;
  margin-top: 10px;
}


.btn-primary:hover, 
.btn-primary:focus{
  background: #E8CE0E;
  outline: none;
  box-shadow: none;
} 

.btn-transparent {
  border: 3px solid #fff;
  background: transparent;
  color: #fff;
}

.btn-transparent:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

a:hover,
a:focus {
  color: #000;
  text-decoration: none;
  outline: none;
}

.dropdown-menu {
  margin-top: -1px;
  min-width: 180px;
}

.center h2{
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 20px;
}

.media>.pull-left{
  margin-right: 20px;
}

.media>.pull-right{
  margin-left: 20px;
}

body > section {
  padding: 70px 0;
}

.center {
  text-align: center;
  padding-bottom: 55px;
}

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
}

.lead{
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.transparent-bg {
  background-color: transparent !important;
  margin-bottom: 0;
}

@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}


/*************************
*******Header******
**************************/
.navbar-fixed-top .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar>.container .navbar-brand{
  margin-left: 0;
}

.top-bar {
  padding: 10px 0;
  background: #1163dd;
  border-bottom: 1px solid #222;
  line-height: 28px;
}

.social{
  text-align: center;
}

.social-share{
 display: inline-block;
 list-style: none;
 padding: 0;
 margin: 0;
}

ul.social-share li {
  display: inline-block;
}

ul.social-share li a {
  display: inline-block;
  color: #fff;
  background: #404040;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 2px;
}

ul.social-share li a:hover {
  background: #E8CE0E;
  color: #fff;
}

.navbar-brand {
  padding: 0;
  margin:0;
  color:#E8CE0E;
}
.navbar-header a.navbar-brand {
  color:#E8CE0E;
}

.navbar {
  border-radius: 0;
  margin-bottom: 0;
  background: #1475cf;
  padding: 15px 0;
  padding-bottom: 0;
}

 .navbar-nav{
  margin-top: 12px;
 }

.navbar-nav>li{
  margin-left: 25px;
  padding-bottom: 28px;
}

.navbar-fixed-top .navbar-nav > li > a {
  padding: 5px 15px;
  margin: 0;
  border-radius: 3px;
  color: #fff;
  line-height: 24px;
  display: inline-block;
}

.navbar-fixed-top .navbar-nav > li > a:hover{
    background-color: #E8CE0E;
  color: #333;
}

.navbar-fixed-top {
  border: none;
}

.navbar-fixed-top .navbar-brand {
  font-size: 36px;
  line-height: 50px;
  color: #fff;
}

.navbar-fixed-top .navbar-nav > .active > a,
.navbar-fixed-top .navbar-nav > .active > a:hover,
.navbar-fixed-top .navbar-nav > .active > a:focus,
.navbar-fixed-top .navbar-nav > .open > a,
.navbar-fixed-top .navbar-nav > .open > a:hover,
.navbar-fixed-top .navbar-nav > .open > a:focus {
  background-color: #E8CE0E;
  color: #333;
}

.navbar-fixed-top .navbar-nav .dropdown-menu {
  background-color: rgba(0,0,0,.85);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  border: 0;
  padding: 0;
  margin-top: 0;
  border-top: 0;
  border-radius: 0;
  left: 0;
}

.navbar-fixed-top .navbar-nav .dropdown-menu:before{
  position: absolute;
  top:0;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li > a {
  padding: 8px 15px;
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li:hover > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li:focus > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li.active > a {
  background-color: #E8CE0E;
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li:last-child > a {
  border-radius: 0 0 3px 3px;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li.divider {
  background-color: transparent;
}

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-top .navbar-form {
  border-top: 0;
  padding-bottom: 0;
}


/*************************
*******Home Page******
**************************/


.slider {
  position: relative;
  margin-top:130px;
}

#carousel-slider {
  position: relative;
}

#carousel-slider .carousel-indicators {
  bottom: -25px;
}

#carousel-slider .carousel-indicators li {
  border: 1px solid #ffbd20;
}

#carousel-slider a i {
  border: 1px solid #777;
  border-radius:50%;
  font-size: 28px;
  height: 50px;
  padding: 8px;
  position: absolute;
  top: 50%;
  width: 50px;
  color:#777;
}

#carousel-slider a i:hover {
  background:#E8CE0E;
  color:#fff;
  border: 1px solid #E8CE0E;
}

#carousel-slider 
.carousel-control {
  width:inherit;
}

#carousel-slider .carousel-control.left i {
  left:-25px
}

#carousel-slider .carousel-control.right i {
  right: -25px;
}

#carousel-slider
.carousel-control.left, 
#carousel-slider
.carousel-control.right {
  background: none;
}



#feature {
  background: #f2f2f2;
  padding-bottom: 40px;
}
#feature.transparent-bg {
  margin-top:-40px;
  
}
.features{
  padding: 0;
}

.feature-wrap {
  margin-bottom: 35px;
  overflow: hidden;
}

.feature-wrap h2{
  margin-top: 10px;
}

.feature-wrap .pull-left {
  margin-right: 25px;
}

.feature-wrap i{
  font-size: 48px;
  height: 110px;
  width: 110px;
  margin: 3px;
  border-radius: 100%;
  line-height: 110px;
  text-align:center;
  background: #ffffff;
  color: #E8CE0E;
  border: 3px solid #ffffff;
  box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  float: left;
  margin-right: 25px;
}

.feature-wrap i:hover {
  background: #E8CE0E;
  color: #fff;
  box-shadow: inset 0 0 0 5px #E8CE0E;
  -webkit-box-shadow: inset 0 0 0 5px #E8CE0E;
  border: 3px solid #E8CE0E;
}

#recent-works .col-xs-12.col-sm-4.col-md-3{
  padding: 0;
}
/*
#recent-works{
    padding-bottom: ;
}
*/
.recent-work-wrap {
  position: relative;
}

.recent-work-wrap img{
  width: 100%;
}

.recent-work-wrap .recent-work-inner{
  top: 0;
  background: transparent;
  opacity: .8;
  width: 100%;
  border-radius: 0;
  margin-bottom: 0;
}

.recent-work-wrap .recent-work-inner h3{
  margin: 10px 0;
}

.recent-work-wrap .recent-work-inner h3 a{
  font-size: 24px;
  color: #fff;
}

.recent-work-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: #333;
  color: #fff;
  vertical-align: middle;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;  
  padding: 30px;
}

.recent-work-wrap .overlay .preview {
  bottom: 0;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: #fff;
}

.recent-work-wrap:hover .overlay {
  opacity: 1;
}

#services {
  background: #000 url(../images/services/bg_services.jpg);
  background-size: cover;
  margin-top:70px;
}

#services .lead,
#services h2{
  color: #fff;
}

.services-wrap {
  padding: 40px 30px;
  background: #fff;
  border-radius: 4px;
  margin: 0 0 40px;
}

.services-wrap h3 {
  font-size: 20px;
  margin: 10px 0;
}

.services-wrap .pull-left {
  margin-right: 20px;
}

#middle {
  background: #fff;
  margin-top:-90px;
}

.skill h2{
  margin-bottom: 25px;
}

.progress-wrap{
  position: relative;
}

.progress .color1,
.progress .color1 .bar-width{
  background: #2d7da4;
}

.progress .color2,
.progress .color2 .bar-width{
  background: #6aa42f;
}

.progress .color3,
.progress .color3 .bar-width{
  background: #ffcc33;
}

.progress .color4,
.progress .color4 .bar-width{
  background: #db3615;
}

.progress, 
.progress-bar {
  height: 15px;
  line-height: 15px;
  background: #e6e6e6;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  text-align: right;
}

.progress{
  position: relative;
}

.progress .bar-width{
  position: absolute;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  top: -30px;
  border-radius: 2px;
  margin-left: -30px;
}

.progress span{
  position: relative;
}

.progress span:before{
  content: " ";
  position: absolute;
  width: auto;
  height: auto;
  border-width: 8px 5px;
  border-style: solid;
  bottom: -15px;
  right: 8px;
}

.progress .color1 span:before{
  border-color: #2d7da4 transparent transparent transparent;
}

.progress .color2 span:before{
  border-color: #6aa42f transparent transparent transparent;
}

.progress .color3 span:before{
  border-color: #ffcc33 transparent transparent transparent;
}

.progress .color4 span:before{
  border-color: #db3615 transparent transparent transparent;
}

.accordion h2{
  margin-bottom: 25px;
}

.panel-default{
  border-color: transparent;
}

.panel-default>.panel-heading,
.panel{
  background-color: #e6e6e6; 
  border:0 none;
  box-shadow:none;
}

.panel-default>.panel-heading+.panel-collapse .panel-body{
  background: #fff;
  color: #858586;
}

.panel-body{
  padding: 20px 20px 10px;
}

.panel-group .panel+.panel{
  margin-top: 0;
  border-top: 1px solid #d9d9d9;
}

.panel-group .panel{
  border-radius: 0;
}

.panel-heading{
  border-radius: 0;
}

.panel-title>a{
  color: #4e4e4e;
}

.accordion-inner img{
  border-radius: 4px;
}

.accordion-inner h4{
  margin-top: 0;
}

.panel-heading.active{
  background: #1f1f20;
}

.panel-heading.active .panel-title>a{
  color:#fff;
}

a.accordion-toggle  i{
  width: 45px;
  line-height: 44px;
  font-size: 20px;
  margin-top: -10px;
  text-align: center;
  margin-right: -15px;
  background: #c9c9c9;
}

.panel-heading.active a.accordion-toggle i{
  background: #E8CE0E;
  color: #fff;
}

.panel-heading.active a.accordion-toggle.collapsed i{
  background: #E8CE0E;
  color: #fff;
}

.nav-tabs>li{
  margin-bottom: 0px;
  border-bottom: 1px solid #e6e6e6;
}

.nav-tabs{
  border-bottom: transparent;
  border-right: 1px solid #e6e6e6;
}

.nav-tabs>li>a {
  background: #f5f5f5;
  color: #666;
  border-radius: 0;
  border: 0 none;
  line-height: 24px;
  margin-right:0;
  padding: 13px 15px;
}

.nav-tabs li:last-child{
  border-bottom: 0 none;
} 

.nav-stacked>li+li{
  margin-top: 0;
}

.nav-tabs>li>a:hover{
  background: #1f1f20;
  color:#fff;
}

.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:hover, 
.nav-tabs>li.active>a:focus {
  border: 0;
  color:#fff;
  background: #1f1f20;
  position: relative;
}

.nav-tabs>li.active>a:after {
  position: absolute;
  content:  "";
  width: auto;
  height: auto;
  border-style:solid;
  border-color: transparent transparent transparent #1f1f20;
  border-width: 25px 22px;
  right: -44px;
  top:0;
}

.tab-wrap{
  border:1px solid #e6e6e6;
  margin-bottom: 20px;
}

.tab-content{
  padding: 20px;
}

.tab-content h2{
  margin-top: 0;
}

.tab-content img{
  border-radius: 4px;
}

.testimonial h2{
  margin-top: 0;
}

.testimonial-inner {
  color:#858586;
  font-size: 14px;
}

.testimonial-inner .pull-left{
  border-right: 1px solid #e7e7e7;
  padding-right: 15px;
  position: relative;
}

.testimonial-inner .pull-left:after{
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 50%;
  margin-top: -5px;
  background: #FFF;
  -webkit-transform: rotate(45deg);
  border: 1px solid #e7e7e7;
  right: -5px;
  border-left: 0 none;
  border-bottom: 0 none;
}

#partner {
  background: url(../images/partners/partner_bg.png) 50% 50% no-repeat;
  background-size: cover;
}

#partner {
  color: #fff;
  text-align: center;
}

#partner h2, 
#partner h3 {
  color: #fff;
}

.partners ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners ul li{
  display: inline-block;
  float: left;
  width: 20%;
}

#conatcat-info{
  background: #fff url(../images/contact.png) no-repeat 90% 0;
  padding: 30px 0;
}

.contact-info i{
  width: 60px;
  height: 60px;
  font-size: 40px;
  line-height: 60px;
  color: #fff;
  background: #000;
  text-align: center;
  border-radius: 10px;
}

.contact-info h2{
  margin-top: 0;
  color: #000;
}

.contact-info{
  color:#000;
}


.validation {
    color: red;
    display:none;
    margin: 0 0 20px;
    font-weight:400;
    font-size:13px;
}

#sendmessage {
    color: green;
    border:1px solid green;
    display:none;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#errormessage {
    color: red;
    display:none;
    border:1px solid red;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#sendmessage.show, #errormessage.show, .show {
    display:block;
}

.services {
  padding: 0;
}

.get-started {
  background: none repeat scroll 0 0 #F3F3F3;
  border-radius: 3px;
  padding-bottom: 30px;
  position: relative;
  margin-bottom: 18px;
  margin-top: 60px;
}

.get-started h2 {
  padding-top: 30px;
  margin-bottom: 20px;
}

.request {
  bottom: -15px;
  left: 50%;
  position: absolute;
  margin-left: -110px;
}

.request h4 {
  position: absolute;
  width: 220px;
  position:relative;
}

.request h4 a{
  background:#E8CE0E;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  border-radius: 3px;
  padding: 5px 15px;
}

.clients-area {
  padding: 60px;
}

.clients-comments {
    background-image: url("../images/image_bg.png");
    background-position: center 118px;
    background-repeat: no-repeat;
    margin-bottom: 100px;
}

.clients-comments img {
  background:#DDDDDD;
  border: 1px solid #DDDDDD;
  height: 182px;
  padding: 3px;
  width: 182px;
  transition: all 0.9s ease 0s;
  -moz-transition: all 0.9s ease 0s;
  -webkit-transition: all 0.9s ease 0s;
  -o-transition: all 0.9s ease 0s;
}

.clients-comments h3 {
  margin-top: 55px;
  font-weight: 300;
  padding: 0 40px;
}

.clients-comments h4 {
  font-weight: 300;
  margin-top: 15px;
}


.clients-comments  h4  span {
  font-weight: 700;
  font-style: oblique;
}

/*************************
********* Portfolio CSS ******
**************************/
#portfolio {
  margin-top: 70px;
}

#portfolio_page {
  margin-top: 115px;
  padding-bottom: 0;
}

.portfolio-items, 
.portfolio-filter {
  list-style: none outside none;
  margin: 0 0 40px 0;
  padding: 0;
}

.portfolio-filter > li {
  display: inline-block;
}

.portfolio-filter > li a {
  background: none repeat scroll 0 0 #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  margin-right: 20px;
  text-transform: uppercase;
  transition: all 0.9s ease 0s;
  -moz-transition: all 0.9s ease 0s;
  -webkit-transition: all 0.9s ease 0s;
  -o-transition: all 0.9s ease 0s;
  border: 1px solid #F2F2F2;
  outline: none;
  border-radius: 3px;
}

.portfolio-filter > li a:hover,
.portfolio-filter > li a.active{
  color:#fff;
  background: #E8CE0E;
  border: 1px solid #E8CE0E;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.portfolio-items > li {
  float: left;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.portfolio-item {
  margin: 0;
  padding:0;
}

/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
javascript
Martin Hope
Mari Cruz
Asked: 2020-11-29 02:33:33 +0800 CST
  • 1

Hello, I am creating a document and I want some section to be as shown below, a list of several paragraphs, which have tabulation with respect to the rest of the text on the page, leaving space to the left in all the paragraph of the list and its point at the beginning of each new paragraph.

Like This is what I need: `

  • A paragraph with tabulation and a period at the beginning where to write what my list needs
  • Here I get it with a simple list, but in my project it doesn't work.
Here it works, but in my project neither the Point nor the tab stop appears in the paragraphs of the list. I show a screenshot of what comes out on my page: enter image description here

In the project I am using Bootstrap v3.3. and Font Awesome 4.4.0, I don't know if this has something to do with it because on my page it is shown without the tab or the period at the beginning, it simply shows two paragraphs. I show the code I use for the list:

<ul>
  <li>
   Un párrafo con tabulacion y punto al inicio donde escribir lo que mi lista necesita
  </li>
   <li>
Aqui lo consigo con una simple lista, pero en mi proyecto no funciona.
  </li>
</ul>

What should I do to get what I need?

Thanks.

html
Martin Hope
Mari Cruz
Asked: 2020-09-19 09:56:10 +0800 CST
  • 1

Hello I am having problems in Google Chrome. I have multiple tabs open and when I switch from one tab to another, they reload again. Each tab that I enter reloads again every time I switch, rather it's as if when I go from one to another, the one I leave already starts to reload, and it doesn't finish doing it until I go back to it and stay in the same . Don't disable cookies or anything like that. I didn't make any changes to the settings, so I don't know how to fix this and have the tabs stay where I left them. How could I correct this so that the pages stay as I left them when I switch tabs? Thank you

google-chrome
Martin Hope
Mari Cruz
Asked: 2020-08-04 07:04:57 +0800 CST
  • 2

Hello, I want to know if there is any method in the functions to determine if the argument that I pass it, would be a text string, is made up of uppercase, lowercase or if it is made up of uppercase or lowercase. I want to make a function that tells me if the arguments I pass it, in this case a text string, and get to know if it has uppercase, lowercase or both kinds of letters. This is what has occurred to me so far, but I still have to know how I distinguish the letters (uppercase and lowercase, or both) It would be a lot, if I managed to digest how many there are of each class, since there are uppercase and lowercase letters. I only managed to make the approach. An orientation of how to proceed, or where I can look for documentation. Look at https://www.w3schools.com/js/js_function_parameters.aspand MDN but I don't know if I didn't look for it well, I didn't find a way to achieve my purpose.

function distingueLetras (argumentos) {
    if (argumentos == son minusculas) {
        console.log(`La palabra esta compuesta de minusculas`)
    }  else if(argumentos == son mayusculas){
        console.log('la esta compuesta de mayusculas')
    } 
    else {
        console.log(`la palabra esta compuesta de ${x} mayusculas y ${y} minusculas`)
    }

}
distingueLetras('hoy hace mucho calor')
distingueLetras('Aqui ESTAmos a 35 Grados')
distingueLetras('A LA PISCINA)

javascript
Martin Hope
Mari Cruz
Asked: 2020-06-26 08:37:35 +0800 CST
  • 1

Hello, for days in Visual Studio Code I get a text about the functions of my code: Complexity is 11 You must be kidding.(I mark it with a green arrow in the image)

The number changes depending on the function.

There is also a colored square behind the function key (I mark it with a blue arrow)

When clicking on the text, which does not count as a line of code, several lines appear at the top of the editor.

What function or meaning does this have?

A few days ago I installed a Node.js extension, but now it doesn't show up to tell you what it is and maybe it has something to do with it.

If they gave me an idea of ​​what it is or where to look, I checked Microsoft tutorials and I didn't find anything.

Thanks.

enter image description here

funciones
Martin Hope
Mari Cruz
Asked: 2020-06-17 03:56:23 +0800 CST
  • 2

I'm trying to create an executable in the Ubuntu console, but I can't. The truth is that I have only tried with the following command, no matter how much I search in Google, I can't find anything. I searched the possible questions on Stack, but none convinced me.

This is what I add to the top of my file, without success:

#!/bin/node

What should I add to a JavaScript file to create an executable in Node.js?

javascript
Martin Hope
Mari Cruz
Asked: 2020-05-14 05:51:06 +0800 CST
  • 1

I have this challenge that I cannot overcome. I am only missing one of the following three conditions: orderMyLogic(4) should return "Less than 5" orderMyLogic(6) should return "Less than 10" orderMyLogic(11) should return "Greater than or equal to 10" I have Tried countless changes and I'm always missing one of the conditions. With this code, I am getting past: orderMyLogic(6) should return "Less than 10" orderMyLogic(11) should return "Greater than or equal to 10" . But this fails me: orderMyLogic(4) should return "Less than 5" I show my code so you can see what I'm doing wrong. Thanks.

function orderMyLogic(val) {
  if (val < 10 ) {
    return "Less than 10";
  } else if (val < 5) {
    return "Less than 5";
  } else {
    return "Greater than or equal to 10";
  }
}

// Change this value to test
orderMyLogic(4);

javascript
Martin Hope
Mari Cruz
Asked: 2020-03-18 10:48:19 +0800 CST
  • 2

Hello, I have created this program guided by one seen on google, but when it comes to the result it gives me 0, 0, 0, 0. On the other hand, I cannot find a way to put the years, months, days and hours elapsed. I mean adding the years to what I already have, but giving time well, not what it gives me now. What am I doing wrong and what should I add? Well, with what I have I would only get days, hours and minutes. As I say, I also wanted to put the years. Thanks.

var msegMinuto = 1000 * 60;
var msegHora = msegMinuto * 60;
var msegDia = msegHora * 24;

var nacimiento = new Date(1965, 7, 20)
var  hoy = new Date()

nacimiento.setMonth()
nacimiento.setDate()
nacimiento.setHours()

var tiempo = hoy - new Date()

//calcular dias 
var dias = Math.floor(tiempo / msegDia)
tiempo = tiempo - (dias * msegDia)

//calcula horas
var horas = Math.floor(tiempo / msegHora)
tiempo = tiempo - (horas * msegHora)

var minutos = Math.floor(tiempo /msegMinuto)
tiempo = tiempo - (minutos * msegMinuto)

console.log("Han pasado " + dias + "dias, " + horas +" horas, y"+  minutos + "minutos desde que naciste.')

javascript
Martin Hope
Mari Cruz
Asked: 2020-02-27 08:15:37 +0800 CST
  • 0

Hello, I have some buttons for social networks and I have the problem of attaching them to my code, the icons of the buttons become smaller than what is seen in my example, making them unreadable. Although there is a lot of code on my website to show, I don't know what is to blame for it, and without showing it you can't help me either. Another problem is that I wanted the buttons to appear only by hovering over the mouse, I don't know if it can be done with css or it will be javascript. I leave you what I have if you can help me. Thanks.

NOTE: I added the css with html, because otherwise it doesn't work 

$('.share-button').on('click', function(event) {
		event.preventDefault();
		if( $('.button').hasClass('show') ){
			$('.first-circle').removeClass('rotate1');
			$('.second-circle').removeClass('rotate2');
			$('.third-circle').removeClass('rotate3');
			$('.forth-circle').removeClass('rotate4');
			$('.fifth-circle').removeClass('rotate5');
			
			setTimeout(function(){
				$('.button').removeClass('show');
			} , 300);
		}else{
			$('.button').addClass('show');
			setTimeout(function(){
				$('.first-circle').addClass('rotate1');
				$('.second-circle').addClass('rotate2');
				$('.third-circle').addClass('rotate3');
				$('.forth-circle').addClass('rotate4');
				$('.fifth-circle').addClass('rotate5');
			} , 300);
		}
	});
html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
}

/*----------------------
	Body 
------------------------*/
body {
  background: #236E6B;
}

/*----------------------
	Text
------------------------*/
h2 {
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  margin-top: 50px;
  font-family: 'Cormorant Upright', serif;
}

/*----------------------
	Share-button 
------------------------*/
.share-button {
  width: 65px;
  height: 65px;
  position: absolute;
  top: 50%;
  z-index: 1;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  background: #fff;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.share-button:before {
  content: "\f1e0";
  position: absolute;
  color: #757676;
  font-size: 1.4rem;
  font-family: FontAwesome;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.share-button:hover {
  -webkit-box-shadow: 0 0 10px 1px #494848;
  box-shadow: 0 0 10px 1px #494848;
}

/*----------------------
	Circle
------------------------*/
.circle {
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  position: absolute;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.circle .button {
  width: 65px;
  height: 65px;
  position: absolute;
  top: -33px;
  right: -32px;
  z-index: -1;
  background: #fff;
  border-radius: 50%;
  visibility: hidden;
  cursor: pointer;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.circle .button:before {
  position: absolute;
  font-size: 1.4rem;
  font-family: FontAwesome;
  top: 50%;
  left: 50%;
  cursor: pointer;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}
.circle .button:hover:before {
  color: #fff;
}
.circle .show {
  visibility: visible;
  top: -115px;
  transition: all 0.25s ease-in-out 0s;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
}

.first-circle .button:before {
  color: lightcoral;
}
.first-circle .button:hover {
  background: lightcoral;
}

.second-circle .button:before {
  color: #00ABF1;
}
.second-circle .button:hover {
  background: #00ABF1;
}

.third-circle .button:before {
  color: #4767AA;
}
.third-circle .button:hover {
  background: #4767AA;
}

.forth-circle .button:before {
  color: #4D9FCA;
}
.forth-circle .button:hover {
  background: #4D9FCA;
}

.fifth-circle .button:before {
  color: #F26798;
}
.fifth-circle .button:hover {
  background: #F26798;
}

.rotate1 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.rotate1 .button {
  -ms-transform: translateX(0) translateY(0) rotate(0deg);
  transform: translateX(0) translateY(0) rotate(0deg);
  -webkit-transform: translateX(0) translateY(0) rotate(0deg);
  -moz-transform: translateX(0) translateY(0) rotate(0deg);
}

.rotate2 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(72deg);
  transform: translateX(-50%) translateY(-50%) rotate(72deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(72deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(72deg);
}
.rotate2 .button {
  -ms-transform: translateX(0) translateY(0) rotate(-72deg);
  transform: translateX(0) translateY(0) rotate(-72deg);
  -webkit-transform: translateX(0) translateY(0) rotate(-72deg);
  -moz-transform: translateX(0) translateY(0) rotate(-72deg);
}

.rotate3 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(144deg);
  transform: translateX(-50%) translateY(-50%) rotate(144deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(144deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(144deg);
}
.rotate3 .button {
  -ms-transform: translateX(0) translateY(0) rotate(-144deg);
  transform: translateX(0) translateY(0) rotate(-144deg);
  -webkit-transform: translateX(0) translateY(0) rotate(-144deg);
  -moz-transform: translateX(0) translateY(0) rotate(-144deg);
}

.rotate4 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(216deg);
  transform: translateX(-50%) translateY(-50%) rotate(216deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(216deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(216deg);
}
.rotate4 .button {
  -ms-transform: translateX(0) translateY(0) rotate(-216deg);
  transform: translateX(0) translateY(0) rotate(-216deg);
  -webkit-transform: translateX(0) translateY(0) rotate(-216deg);
  -moz-transform: translateX(0) translateY(0) rotate(-216deg);
}

.rotate5 {
  -ms-transform: translateX(-50%) translateY(-50%) rotate(288deg);
  transform: translateX(-50%) translateY(-50%) rotate(288deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(288deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(288deg);
}
.rotate5 .button {
  -ms-transform: translateX(0) translateY(0) rotate(72deg);
  transform: translateX(0) translateY(0) rotate(72deg);
  -webkit-transform: translateX(0) translateY(0) rotate(72deg);
  -moz-transform: translateX(0) translateY(0) rotate(72deg);
}

.first-circle .button:before {
  content: "\f0d5";
}

.second-circle .button:before {
  content: "\f099";
}

.third-circle .button:before {
  content: "\f09a";
}

.forth-circle .button:before {
  content: "\f0e1";
}

.fifth-circle .button:before {
  content: "\f17d";
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Share button</title>
  <link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Cormorant+Upright|Farsan" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>

  <style>
    /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */

    html {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }

    body {
      font-size: 16px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
      -webkit-box-sizing: inherit;
      -moz-box-sizing: inherit;
    }

    /*----------------------
	Body 
------------------------*/

    body {
      background: #236E6B;
    }

    /*----------------------
	Text
------------------------*/

    h2 {
      text-align: center;
      color: #fff;
      font-size: 1.5rem;
      margin-top: 50px;
      font-family: 'Cormorant Upright', serif;
    }

    /*----------------------
	Share-button 
------------------------*/

    .share-button {
      width: 65px;
      height: 65px;
      position: absolute;
      top: 50%;
      z-index: 1;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      background: #fff;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .share-button:before {
      content: "\f1e0";
      position: absolute;
      color: #757676;
      font-size: 1.4rem;
      font-family: FontAwesome;
      top: 50%;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }

    .share-button:hover {
      -webkit-box-shadow: 0 0 10px 1px #494848;
      box-shadow: 0 0 10px 1px #494848;
    }

    /*----------------------
	Circle
------------------------*/

    .circle {
      top: 50%;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      position: absolute;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .circle .button {
      width: 65px;
      height: 65px;
      position: absolute;
      top: -33px;
      right: -32px;
      z-index: -1;
      background: #fff;
      border-radius: 50%;
      visibility: hidden;
      cursor: pointer;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .circle .button:before {
      position: absolute;
      font-size: 1.4rem;
      font-family: FontAwesome;
      top: 50%;
      left: 50%;
      cursor: pointer;
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .circle .button:hover:before {
      color: #fff;
    }

    .circle .show {
      visibility: visible;
      top: -115px;
      transition: all 0.25s ease-in-out 0s;
      -webkit-transition: all 0.25s ease-in-out 0s;
      -moz-transition: all 0.25s ease-in-out 0s;
    }

    .first-circle .button:before {
      color: lightcoral;
    }

    .first-circle .button:hover {
      background: lightcoral;
    }

    .second-circle .button:before {
      color: #00ABF1;
    }

    .second-circle .button:hover {
      background: #00ABF1;
    }

    .third-circle .button:before {
      color: #4767AA;
    }

    .third-circle .button:hover {
      background: #4767AA;
    }

    .forth-circle .button:before {
      color: #4D9FCA;
    }

    .forth-circle .button:hover {
      background: #4D9FCA;
    }

    .fifth-circle .button:before {
      color: #F26798;
    }

    .fifth-circle .button:hover {
      background: #F26798;
    }

    .rotate1 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }

    .rotate1 .button {
      -ms-transform: translateX(0) translateY(0) rotate(0deg);
      transform: translateX(0) translateY(0) rotate(0deg);
      -webkit-transform: translateX(0) translateY(0) rotate(0deg);
      -moz-transform: translateX(0) translateY(0) rotate(0deg);
    }

    .rotate2 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(72deg);
      transform: translateX(-50%) translateY(-50%) rotate(72deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(72deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(72deg);
    }

    .rotate2 .button {
      -ms-transform: translateX(0) translateY(0) rotate(-72deg);
      transform: translateX(0) translateY(0) rotate(-72deg);
      -webkit-transform: translateX(0) translateY(0) rotate(-72deg);
      -moz-transform: translateX(0) translateY(0) rotate(-72deg);
    }

    .rotate3 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(144deg);
      transform: translateX(-50%) translateY(-50%) rotate(144deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(144deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(144deg);
    }

    .rotate3 .button {
      -ms-transform: translateX(0) translateY(0) rotate(-144deg);
      transform: translateX(0) translateY(0) rotate(-144deg);
      -webkit-transform: translateX(0) translateY(0) rotate(-144deg);
      -moz-transform: translateX(0) translateY(0) rotate(-144deg);
    }

    .rotate4 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(216deg);
      transform: translateX(-50%) translateY(-50%) rotate(216deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(216deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(216deg);
    }

    .rotate4 .button {
      -ms-transform: translateX(0) translateY(0) rotate(-216deg);
      transform: translateX(0) translateY(0) rotate(-216deg);
      -webkit-transform: translateX(0) translateY(0) rotate(-216deg);
      -moz-transform: translateX(0) translateY(0) rotate(-216deg);
    }

    .rotate5 {
      -ms-transform: translateX(-50%) translateY(-50%) rotate(288deg);
      transform: translateX(-50%) translateY(-50%) rotate(288deg);
      -webkit-transform: translateX(-50%) translateY(-50%) rotate(288deg);
      -moz-transform: translateX(-50%) translateY(-50%) rotate(288deg);
    }

    .rotate5 .button {
      -ms-transform: translateX(0) translateY(0) rotate(72deg);
      transform: translateX(0) translateY(0) rotate(72deg);
      -webkit-transform: translateX(0) translateY(0) rotate(72deg);
      -moz-transform: translateX(0) translateY(0) rotate(72deg);
    }

    .first-circle .button:before {
      content: "\f0d5";
    }

    .second-circle .button:before {
      content: "\f099";
    }

    .third-circle .button:before {
      content: "\f09a";
    }

    .forth-circle .button:before {
      content: "\f0e1";
    }

    .fifth-circle .button:before {
      content: "\f17d";
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <h2>Button For Share</h2>

  <div class="share-button"></div>

  <div class="circle first-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle second-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle third-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle forth-circle">
    <a href="#" class="button"></a>
  </div>
  <div class="circle fifth-circle">
    <a href="#" class="button"></a>
  </div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src="js/index.js"></script>




</body>

</html>

javascript
Martin Hope
Mari Cruz
Asked: 2020-02-07 09:41:38 +0800 CST
  • 1

Hi, I have created a website and the buttons on the navigation bar take me down the page, to the parts with the ID set like this: <li><a href="#service">Servicios</a></li> I have a form in another folder (form) from which I call the "services" section of the following way: <li><a href = "../index.html #service"> </a> </li> Well, when I have it on my local computer, from the form folder it takes me to the #servicemain page section. The problem comes when I upload it to the server and click on "services" from the form, it gives me an error: The requested URL form/index.html was not found on this server. How can I solve it, if it works locally and not on the server? Thank you

html
Martin Hope
Mari Cruz
Asked: 2020-12-23 02:51:11 +0800 CST
  • 5

I have a series of social network buttons, found in the community, and in one of them I wanted to put one that when I hover over it, it would automatically display more social network buttons. I can't find it, and as much as I searched, I only saw the CODEPEN example, but the code isn't there, so I don't know how to do it. I hope I have explained myself so that you can help me with what I am showing you, or tell me where to look. Thanks.

$(function() {
	
	const ARTICLE_TITLE =  document.title;
	const ARTICLE_URL = encodeURIComponent(window.location.href);
	const MAIN_IMAGE_URL = encodeURIComponent($('meta[property="og:image"]').attr('content'));

	$('.share-fb').click(function(){
		open_window('http://www.facebook.com/sharer/sharer.php?u='+ARTICLE_URL, 'facebook_share');
	});

	$('.share-twitter').click(function(){
		open_window('http://twitter.com/share?url='+ARTICLE_URL, 'twitter_share');
	});

	$('.share-google-plus').click(function(){
		open_window('https://plus.google.com/share?url='+ARTICLE_URL, 'google_share');
	});

	$('.share-linkedin').click(function(){
		open_window('https://www.linkedin.com/shareArticle?mini=true&url='+ARTICLE_URL+'&title='+ARTICLE_TITLE+'&summary=&source=', 'linkedin_share');
	});

	$('.share-pinterest').click(function(){
		open_window('https://pinterest.com/pin/create/button/?url='+ARTICLE_URL+'&media='+MAIN_IMAGE_URL+'&description='+ARTICLE_TITLE, 'pinterest_share');
	});
	
	$('.share-tumblr').click(function(){
		open_window('http://www.tumblr.com/share/link?url='+ARTICLE_URL+'&name='+ARTICLE_TITLE+'&description='+ARTICLE_TITLE, 'tumblr_share');
	});

	function open_window(url, name){
		window.open(url, name, 'height=320, width=640, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no');
	}
});
.share-buttons-row{
    height: 40px;

	display: -webkit-flex; 
    -webkit-align-items: center; 
    display: flex;
    align-items: center;
}
.share-buttons-row >div:hover {
    transform: rotate(360deg);
    border-radius: 100px;
  }

.share-buttons-row > div {
	width: 40px;
    height: 40px;
    cursor: pointer;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

	text-align: center;
	float: left;
	margin-right: .3em;
	padding: 0;
	
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}


.share-fb{
    background-color: #2d609b;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjY2NyAwaC0yMS4zMzRjLTIuOTQ1IDAtNS4zMzMgMi4zODgtNS4zMzMgNS4zMzR2MjEuMzMyYzAgMi45NDYgMi4zODcgNS4zMzQgNS4zMzMgNS4zMzRoMTAuNjY3di0xNGgtNHYtNGg0di0zYzAtMi43NjEgMi4yMzktNSA1LTVoNXY0aC01Yy0wLjU1MiAwLTEgMC40NDgtMSAxdjNoNS41bC0xIDRoLTQuNXYxNGg2LjY2N2MyLjk0NSAwIDUuMzMzLTIuMzg4IDUuMzMzLTUuMzM0di0yMS4zMzJjMC0yLjk0Ni0yLjM4Ny01LjMzNC01LjMzMy01LjMzNHoiPjwvcGF0aD48L3N2Zz4=);
}

.share-twitter{
    background-color: #00c3f3;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMyIDYuMDc2Yy0xLjE3NyAwLjUyMi0yLjQ0MyAwLjg3NS0zLjc3MSAxLjAzNCAxLjM1NS0wLjgxMyAyLjM5Ni0yLjA5OSAyLjg4Ny0zLjYzMi0xLjI2OSAwLjc1Mi0yLjY3NCAxLjI5OS00LjE2OSAxLjU5My0xLjE5OC0xLjI3Ni0yLjkwNC0yLjA3My00Ljc5Mi0yLjA3My0zLjYyNiAwLTYuNTY1IDIuOTM5LTYuNTY1IDYuNTY1IDAgMC41MTUgMC4wNTggMS4wMTYgMC4xNyAxLjQ5Ni01LjQ1Ni0wLjI3NC0xMC4yOTQtMi44ODgtMTMuNTMyLTYuODYtMC41NjUgMC45Ny0wLjg4OSAyLjA5Ny0wLjg4OSAzLjMwMSAwIDIuMjc4IDEuMTU5IDQuMjg3IDIuOTIxIDUuNDY1LTEuMDc2LTAuMDM0LTIuMDg4LTAuMzI5LTIuOTc0LTAuODIxLTAuMDAxIDAuMDI3LTAuMDAxIDAuMDU1LTAuMDAxIDAuMDgzIDAgMy4xODEgMi4yNjMgNS44MzQgNS4yNjYgNi40MzctMC41NTEgMC4xNS0xLjEzMSAwLjIzLTEuNzMgMC4yMy0wLjQyMyAwLTAuODM0LTAuMDQxLTEuMjM1LTAuMTE4IDAuODM1IDIuNjA4IDMuMjYgNC41MDYgNi4xMzMgNC41NTktMi4yNDcgMS43NjEtNS4wNzggMi44MS04LjE1NCAyLjgxLTAuNTMgMC0xLjA1Mi0wLjAzMS0xLjU2Ni0wLjA5MiAyLjkwNSAxLjg2MyA2LjM1NiAyLjk1IDEwLjA2NCAyLjk1IDEyLjA3NiAwIDE4LjY3OS0xMC4wMDQgMTguNjc5LTE4LjY4IDAtMC4yODUtMC4wMDYtMC41NjgtMC4wMTktMC44NDkgMS4yODMtMC45MjYgMi4zOTYtMi4wODIgMy4yNzYtMy4zOTh6Ij48L3BhdGg+PC9zdmc+);
}

.share-google-plus{
    background-color: #eb4026;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE3LjQ3MSAyYzAgMC02LjI4IDAtOC4zNzMgMC0zLjc1NCAwLTcuMjg3IDIuODQ0LTcuMjg3IDYuMTM4IDAgMy4zNjYgMi41NTkgNi4wODMgNi4zNzggNi4wODMgMC4yNjYgMCAwLjUyNC0wLjAwNSAwLjc3Ni0wLjAyNC0wLjI0OCAwLjQ3NS0wLjQyNSAxLjAwOS0wLjQyNSAxLjU2NCAwIDAuOTM2IDAuNTAzIDEuNjk0IDEuMTQgMi4zMTMtMC40ODEgMC0wLjk0NSAwLjAxNC0xLjQ1MiAwLjAxNC00LjY0OS0wLTguMjI4IDIuOTYxLTguMjI4IDYuMDMyIDAgMy4wMjQgMy45MjMgNC45MTYgOC41NzMgNC45MTYgNS4zMDEgMCA4LjIyOC0zLjAwOCA4LjIyOC02LjAzMiAwLTIuNDI1LTAuNzE1LTMuODc3LTIuOTI4LTUuNDQyLTAuNzU3LTAuNTM2LTIuMjA0LTEuODM5LTIuMjA0LTIuNjA0IDAtMC44OTcgMC4yNTYtMS4zNCAxLjYwNy0yLjM5NSAxLjM4NS0xLjA4MiAyLjM2NS0yLjYwMyAyLjM2NS00LjM3MiAwLTIuMTA2LTAuOTM4LTQuMTU5LTIuNjk5LTQuODM3aDIuNjU1bDEuODc0LTEuMzU1ek0xNC41NDYgMjIuNDgzYzAuMDY2IDAuMjggMC4xMDMgMC41NjkgMC4xMDMgMC44NjMgMCAyLjQ0NC0xLjU3NSA0LjM1My02LjA5MyA0LjM1My0zLjIxNCAwLTUuNTM1LTIuMDM1LTUuNTM1LTQuNDc4IDAtMi4zOTUgMi44NzktNC4zODkgNi4wOTMtNC4zNTQgMC43NSAwLjAwOCAxLjQ0OSAwLjEyOSAyLjA4MyAwLjMzNCAxLjc0NSAxLjIxMyAyLjk5NiAxLjg5OSAzLjM0OSAzLjI4MXpNOS40MDEgMTMuMzY4Yy0yLjE1Ny0wLjA2NS00LjIwNy0yLjQxMy00LjU4LTUuMjQ2czEuMDc0LTUuMDAxIDMuMjMxLTQuOTM3YzIuMTU3IDAuMDY1IDQuMjA3IDIuMzM4IDQuNTggNS4xNzFzLTEuMDc1IDUuMDc3LTMuMjMxIDUuMDEyek0yNiA4di02aC0ydjZoLTZ2Mmg2djZoMnYtNmg2di0yeiI+PC9wYXRoPjwvc3ZnPg==);
}

.share-linkedin{
    background-color: #0074a1;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjYyNSAwaC0yMS4yNWMtMi45NTYgMC01LjM3NSAyLjQxOS01LjM3NSA1LjM3NXYyMS4yNWMwIDIuOTU2IDIuNDE5IDUuMzc1IDUuMzc1IDUuMzc1aDIxLjI1YzIuOTU2IDAgNS4zNzUtMi40MTkgNS4zNzUtNS4zNzV2LTIxLjI1YzAtMi45NTYtMi40MTktNS4zNzUtNS4zNzUtNS4zNzV6TTEyIDI2aC00di0xNGg0djE0ek0xMCAxMGMtMS4xMDUgMC0yLTAuODk1LTItMnMwLjg5NS0yIDItMiAyIDAuODk1IDIgMi0wLjg5NSAyLTIgMnpNMjYgMjZoLTR2LThjMC0xLjEwNS0wLjg5NS0yLTItMnMtMiAwLjg5NS0yIDJ2OGgtNHYtMTRoNHYyLjQ4M2MwLjgyNS0xLjEzMyAyLjA4Ni0yLjQ4MyAzLjUtMi40ODMgMi40ODUgMCA0LjUgMi4yMzkgNC41IDV2OXoiPjwvcGF0aD48L3N2Zz4=);
}

.share-pinterest{
    background-color: #ca212a;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2IDBjLTguODM3IDAtMTYgNy4xNjMtMTYgMTYgMCA2Ljc3OCA0LjIxNyAxMi41NjggMTAuMTY5IDE0Ljg5OS0wLjE0LTEuMjY2LTAuMjY2LTMuMjA4IDAuMDU1LTQuNTkgMC4yOTEtMS4yNDkgMS44NzYtNy45NTMgMS44NzYtNy45NTNzLTAuNDc5LTAuOTU4LTAuNDc5LTIuMzc1YzAtMi4yMjUgMS4yOS0zLjg4NiAyLjg5NS0zLjg4NiAxLjM2NSAwIDIuMDI0IDEuMDI1IDIuMDI0IDIuMjU0IDAgMS4zNzMtMC44NzQgMy40MjUtMS4zMjUgNS4zMjctMC4zNzcgMS41OTMgMC43OTkgMi44OTIgMi4zNjkgMi44OTIgMi44NDQgMCA1LjAzMC0yLjk5OSA1LjAzMC03LjMyNyAwLTMuODMxLTIuNzUzLTYuNTA5LTYuNjgzLTYuNTA5LTQuNTUyIDAtNy4yMjUgMy40MTUtNy4yMjUgNi45NDMgMCAxLjM3NSAwLjUzIDIuODUgMS4xOTEgMy42NTEgMC4xMzEgMC4xNTggMC4xNSAwLjI5NyAwLjExMSAwLjQ1OS0wLjEyMSAwLjUwNi0wLjM5MSAxLjU5My0wLjQ0NCAxLjgxNS0wLjA3MCAwLjI5My0wLjIzMiAwLjM1NS0wLjUzNSAwLjIxNC0xLjk5OC0wLjkzLTMuMjQ4LTMuODUyLTMuMjQ4LTYuMTk4IDAtNS4wNDcgMy42NjctOS42ODIgMTAuNTcyLTkuNjgyIDUuNTUgMCA5Ljg2NCAzLjk1NSA5Ljg2NCA5LjI0MSAwIDUuNTE0LTMuNDc3IDkuOTUyLTguMzAyIDkuOTUyLTEuNjIxIDAtMy4xNDUtMC44NDItMy42NjctMS44MzcgMCAwLTAuODAyIDMuMDU1LTAuOTk3IDMuODAzLTAuMzYxIDEuMzktMS4zMzcgMy4xMzItMS45ODkgNC4xOTUgMS40OTcgMC40NjMgMy4wODggMC43MTMgNC43MzggMC43MTMgOC44MzYtMCAxNi03LjE2MyAxNi0xNnMtNy4xNjMtMTYtMTYtMTZ6Ij48L3BhdGg+PC9zdmc+);
}

.share-tumblr{
    background-color: #36465d;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjY2OCAwaC0yMS4zMzRjLTIuOTM0IDAtNS4zMzQgMi40LTUuMzM0IDUuMzM0djIxLjMzMmMwIDIuOTM2IDIuNCA1LjMzNCA1LjMzNCA1LjMzNGgyMS4zMzRjMi45MzMgMCA1LjMzMi0yLjM5OCA1LjMzMi01LjMzNHYtMjEuMzMyYy0wLTIuOTMzLTIuMzk5LTUuMzM0LTUuMzMyLTUuMzM0ek0yMi44NjYgMjUuNzcxYy0wLjk0MiAwLjQ0My0xLjc5OCAwLjc1Ni0yLjU2MyAwLjkzNi0wLjc2NSAwLjE3OC0xLjU5MyAwLjI2Ny0yLjQ4MSAwLjI2Ny0xLjAxMCAwLTEuNjA1LTAuMTI3LTIuMzgxLTAuMzgxLTAuNzc1LTAuMjU2LTEuNDM4LTAuNjIxLTEuOTg0LTEuMDkwLTAuNTQ5LTAuNDczLTAuOTI4LTAuOTc1LTEuMTQtMS41MDZzLTAuMzE3LTEuMzAzLTAuMzE3LTIuMzEzdi03Ljc0NGgtM3YtMy4xMjdjMC44NjctMC4yODEgMS44NzMtMC42ODUgMi40OS0xLjIxMSAwLjYyLTAuNTI3IDEuMTE2LTEuMTU4IDEuNDktMS44OTYgMC4zNzUtMC43MzYgMC42MzMtMS42NzYgMC43NzQtMi44MTVoMy4xNDF2NS4xMDhoNS4xMDV2My45NDFoLTUuMTA2djUuNjYyYzAgMS4yODEtMC4wMTcgMi4wMjAgMC4xMTkgMi4zODMgMC4xMzUgMC4zNjEgMC40NzMgMC43MzYgMC44NDEgMC45NTMgMC40ODkgMC4yOTMgMS4wNDcgMC40MzkgMS42NzYgMC40MzkgMS4xMTggMCAyLjIzMS0wLjM2MyAzLjMzNi0xLjA5MHYzLjQ4MnoiPjwvcGF0aD48L3N2Zz4=);
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mas botones</title>
    </head>
	<body>
		
		<!-- Buttons, Copy this to your Page Article -->
		<div class="share-buttons-row">
			<!--Facebook's Button -->
			<div class="share-fb"></div>
			<!--Twitter's Button -->
			<div class="share-twitter"></div>
			<!--Facebook's Button -->
			<div class="share-google-plus"></div>
			<!--Linkedin's Button -->
			<div class="share-linkedin"></div>
			<!--Pinterest's Button -->
			<div class="share-pinterest"></div>
			<!--Tumblr's Button -->
			<div class="share-tumblr"></div>
		</div>
		

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

	</body>

javascript
Martin Hope
Mari Cruz
Asked: 2020-12-22 16:23:05 +0800 CST
  • -3

I'm starting to create a website looking at different examples, but it doesn't look very good. The example that I saw consisted of a central part with two lateral parts where to put links to other sites. What am I doing wrong, did I want to use bootstrap? I show the code I picked up from the community example.

body {
                min-width: 630px;
            }
    
            #container {
                padding-left: 200px;
                padding-right: 190px;
            }
            
            #container .column {
                position: relative;
                float: left;
            }
            
            #center {
                padding: 10px 20px;
                width: 100%;
            }
            
            #left {
                width: 180px;
                padding: 0 10px;
                right: 240px;
                margin-left: -100%;
            }
            
            #right {
                width: 130px;
                padding: 0 10px;
                margin-right: -100%;
            }
            
            #footer {
                clear: both;
            }
            
            /* IE hack */
            * html #left {
                left: 150px;
            }
    
            /* Make the columns the same height as each other */
            #container {
                overflow: hidden;
            }
    
            #container .column {
                padding-bottom: 1001em;
                margin-bottom: -1000em;
            }
    
            /* Fix for the footer */
            * html body {
                overflow: hidden;
            }
            
            * html #footer-wrapper {
                float: left;
                position: relative;
                width: 100%;
                padding-bottom: 10010px;
                margin-bottom: -10000px;
                background: #fff;
            }
    
            /* Aesthetics */
            body {
                margin: 0;
                padding: 0;
                font-family:Sans-serif;
                line-height: 1.5em;
            }
            
            p {
                color: #555;
            }
    
            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            nav ul a {
                color: darkgreen;
                text-decoration: none;
            }
    
            #header, #footer {
                font-size: large;
                padding: 0.3em;
                background: #BCCE98;
            }
    
            #left {
                background: #DAE9BC;
            }
            
            #right {
                background: #F7FDEB;
            }
    
            #center {
                background: #fff;
            }
    
            #container .column {
                padding-top: 1em;
            }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <title>PROBANDO UNA WEB</title>
    </head>
    
    <body>
    
        <header id="header">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPAL</a>
                        </li>
                        <li>
                            <a href="#">CASA</a>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Recursos <span class="caret"></span></a>
                            <ul class="dropdown-menu" aria-labelledby="about-us">
                                <li><a href="#">PRODUCTOS</a></li>
                                <li><a href="#">NOTICIAS</a></li>
                                <li><a href="#">RECURSOS</a></li>
                            </ul>
                        </li>
                    </ul>
    
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Search</button>
                    </form>
    
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
        <div id="container">
    
            <main id="center" class="column">
                <article>
                
                    <h1>SEAN BIENVENIDOS A MI SITIO WEB...</h1>
                    <p>HOLA, ESTOY EMPEZANDO EN EL DESARROLLO WEB</p>
       
                    <h2>CURRICULUM</h2>

                    <h2>ESPEDIENTE ACADEMICO</h2>
                    <p>AQUI QUIERO PONER LOS ESTUDIOS REALIZADOS<a href="proyectos-4.html">humilde aplicacion.</a></p>
                    
                    <h2>EXPERIENCIA</h2>
                </article>								
            </main>
    
            <nav id="left" class="column">
                <h3>DATOS PERSONALES</h3>
                <ul>
                    <li><a target="_blank" href="#"TRABAJO</a></li><br>
                    <li><a target="_blank" href="#">DIPLOMATURAS</a></li><br>

                </ul>
                <br>
                <br>

            </nav>
    
            <div id="right" class="column">
                <h3>FOTO DE PERFIL</h3>
                
            </div>
    
        </div>
    
       <!-- <div id="footer-wrapper">
            <footer id="footer"><p>Footer...</p></footer>
        </div>-->
    
    </body>
    
    </html>

html