Home / user-14622

May's questions

Martin Hope
May
Asked: 2020-10-20 04:48:45 +0800 CST
  • 5

I have the following code where I get data from the Urls

if (isset($_GET['id'])){
    $url = $_GET['id'];
}

I check the value that the variable is giving me $urlas a result:

book-php/

Currently the data is obtained in such a way because I have the file .htaccessin friendly Urls .

The data is correct at the time of making the query:

$stmtID = $con->prepare("SELECT idlibro,libro,titulo,precio FROM biblioteca WHERE url=?");

Now my question:

What value does he give idto $_GET?

If I change this way the code does not work, all the variables of the file lose their validation for the reason that they no longer receive the ideal result for the query.

if (isset($_GET['url'])){
    $url = $_GET['url'];
}

What does the in have to do idwith it $_GET?

I don't have any product or data in the database that has a column , idall IDS are defined like this id_producto, id_usuarioetc.

Why giving it another name does not work the same?

Update

.htaccess file

#Regla Url amigable
RewriteRule ^([a-zA-Z0-9-/]+)$ detalle.php?id=$1
php
Martin Hope
May
Asked: 2020-07-04 08:43:01 +0800 CST
  • 5

How to create a placeholder label type the wix platform if you can see when clicking on the Email input itplaceholder does not disappear if it is not on top.

When copying to the Wixinput form element, it can be seen that the function does not exist in the formplaceholder

<input autofocus="" default-email="" name="email" ng-attr-wix-mail-validator="{{!$ctrl.novalidateEmail()}}" ng-model="$ctrl.email" required="" type="email" class="ng-pristine ng-scope md-input ng-empty ng-valid-email ng-invalid ng-invalid-required ng-touched" id="input_0" wix-mail-validator="true" style="">

How can I add that effect in My code

.form-two {
outline: none;
color: #212121;
font-size: 13px;
border: 1px solid #f2f2f2;
background: none;
width: 100%;
padding: 1.2em 1.8em;
margin-bottom: 1.5em;
}
.center {
  text-align: center;
}
.left {
  float: left;
}

.right {
  float: right;
}
<div class="center">
  <div class="container">
<div class="wrp">
    <h2>ENTRE AQUÍ.</h2>
    <form action="#" method="post">
	    <!-- class="form-one"  -->
	    <div class="left">
	      <input type="text" class="form-two" name="First Name" placeholder="Nombre">
	    </div>
			<div class="right">
			  <input type="text" class="form-two" name="Last Name" placeholder="Apellidos">
			</div>
</div>
  </div>
</div>

html
Martin Hope
May
Asked: 2020-06-15 22:02:45 +0800 CST
  • 2

I found an illustrative example, very creative I have tried to imitate it but I am getting lost in the stylesCSS

The idea is to get the same example of the image:

enter image description here

What has been achieved so far.

Full code:

#fobd {
margin-top: 70px !important;
margin-bottom: -35px !important;
padding-top: 10px !important;
padding-bottom: 70px !important;
background: #eeeeee url(http://skilled.aislinthemes.com/app/uploads/2015/08/pricing-plans.png?id=10681) !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.center {
text-align: center;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.four-column {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.frame-item {
padding: 1em;
border: 1px solid #B2B2B2;
}

@media (min-width: 1200px){
.container {
width: 1170px;
}}
@media (min-width: 992px){
.container {
width: 970px;
}}
@media (min-width: 768px){
.container {
width: 750px;
}}

@media (min-width: 992px){
.four-column {
float: left;
width: 25%;
}}
<div id="fobd">
  <div class="container">
  <h2 class="center">CONTACT US</h2>
  </div>
  
  <div class="container">
<div class="row">
  <div class="four-column middle-pro">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>
  </div>
  
  <div class="four-column middle-pro">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>
  </div>
  
  <div class="four-column middle-pro">
    <div class="frame-item">
      <h1>
        Contact US
      </h1>
    </div>
  </div>
  
</div>
  </div>
  
</div>

Now my question?

How can I join the 3 frames in a single horizontal row, as shown in the image, and when I change the device, the responsive is carried out in an orderly manner.

html
Martin Hope
May
Asked: 2020-06-01 19:33:33 +0800 CST
  • 7

I am trying to create two borders one on the left and one on the right and the main text is in the middle of the two borders.

An example to idea to what I am trying to achieve I have uploaded two sample images.

I tried doing it this way but the two lines come together.

    <div class="www">

      <h4><span class="lineseparator"></span>
        TITLE NOT TITLE
        <span class="lineseparator"></span>
      </h4>

      <p>Content and content and contecnt</p>
    </div>

I tried this other way but same problem.

    <div class="www">
      <span class="lineseparator"></span>
      <h4>TITLE NOT TITLE</h4>
      <span class="lineseparator"></span>
      <p>Content and content and contecnt</p>
    </div>

Execution:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 13px;
  font-family: 'OpenSans', 'cursive', 'Releway', Roboto, Lato, Utsaah;
  background-color: #FBFBFB;
}
.www {
  position: relative;
  padding-top: 35px;
}
.lineseparator {
height: 1px;
border-top: 1px solid #000;
display: block;
position: relative;
top: 12px;
width: 20%;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

p {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
}
    <div class="www">
      <span class="lineseparator"></span>
      <h4>TITLE NOT TITLE</h4>
      <span class="lineseparator"></span>
      <p>Content and content and contecnt</p>
    </div>

<br><br><br>
    <div class="www">
      
      <h4><span class="lineseparator"></span>
        TITLE NOT TITLE
        <span class="lineseparator"></span>
      </h4>
      
      <p>Content and content and contecnt</p>
    </div>

What I want to achieve is the following example I take it from a website. enter image description here

And that when making responsive it adapts in the following way. enter image description here

html
Martin Hope
May
Asked: 2020-04-10 12:33:09 +0800 CST
  • 3

In some cases there are images with colors that cannot be adapted to the color of the text, one of the first options is to apply a dark layer with a transparent color.

The problem with applying a dark layer to the image is that the text content also changes its color to a dark color.

My second mistake is the layer trying to apply doesn't seem to be working properly.

.animation::after {
    background-color: rgba(0, 0, 0, 0.4);
    height: 100%;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
    width: 100%;
    z-index: 10;
}

How do I properly add a dark layer without affecting the text content?

.item {
  width: 100%;
  height: 656px !important;
  background-size: cover;
  background-position: 50% 0;
  background-repeat: no-repeat;
}

.animation {
  display: block;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.animation::after {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
width: 100%;
z-index: 10;
}

.out-about {
  text-align: center;
  margin: 0 auto;
}

.out-about h1 {
  font-size: 35px;
  color:  #97D302;
  font-weight: 100;
}

.out-about h2 {
  font-size: 35px;
  padding-top: 30px;
  padding-bottom: 10px;
  color: #95a5a6;
  font-weight: 100;
}

.LightGrey {
  color: #ccc;
}

.TanDark {
  color: #c59e6f;
}
  <div class="item" style="background-image: url('https://s3-us-west-2.amazonaws.com/devcode/img/fondo/fondo.jpg');">
    <div class="container">
      <div class="row">
        <div class="animation">
          <div class="out-about slideInUp">
            <h3 class="TanDark">"Lorem ipsum dolor sit amet, ius minim gubergren ad."</h3>
          </div>
          <div class="out-about">
            <p class="LightGrey">Lorem ipsum dolor sit amet, vix erat audiam ei. Cum doctus civibus efficiantur in. Nec id tempor imperdiet deterruisset, doctus volumus explicari qui ex.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

html5
Martin Hope
May
Asked: 2020-10-08 07:30:37 +0800 CST
  • 2

There is movement of the carousel content on both the left and right sides by holding down the left mouse button.

But?

The error is that it moves the object selecting everything, the idea of ​​moving the object is to move both sides but continue circularly without causing this error as can be seen in the image:

enter image description here

The second error is that the movement of the carousel when moving to the top of the left, the carousel is executed only in that part, it does not return to the width normally, that is, it is as if it were locked or made smaller, it only moves in that space.

The desired thing is to move the carousel by having the left mouse button pressed but circularly continuously:

Example this carousel that is at the bottom of the Digital Media page if you can see the content moves to both left and right sides when you have the left mouse button pressed, the carousel moves circularly continuously and leaves no space like the image of the error of this carousel.

var direccion  = "up";
var pasoActual = 0;
var scrollUsuario = false;
var scroll0 = -1;

$(function(){

  // vars for clients list carousel 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);

  var rotating = true;
  var clientspeed = 1800;
  var seeclients = setInterval(rotateClients, clientspeed);

  $(document).on({
    mouseenter: function(){
      rotating = false; // turn off rotation when hovering
    },
    mouseleave: function(){
      rotating = true;
    }
  }, '#clients');

  function rotateClients() {
    if(rotating != false) {
      if (direccion == "up") {
        rotateClientsUp();
        if (++pasoActual == $("#clients-list li").length) direccion = "down";
      } else {
        rotateClientsDown();
        if (--pasoActual == 0)  direccion = "up";
      }

    }
  }

  function rotateClientsUp() {
    var $last   = $('#clients-list li:last');
    $last.remove().css("margin-left", "-140px");
    $("#clients-list").prepend($last);
    $last.animate({ 'margin-left': '0' }, 600);
  }

  function rotateClientsDown() {
    var $first = $('#clients-list li:first');
    $first.animate({ 'margin-left': '-140px' }, 600, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#clients-list li:last').after($first);
    });
  }
  
  $clientcarousel.on("mousedown", function(e) {
    scrollUsuario = true;
    scroll0 = e.pageX;
    event.preventDefault();
  }).on("mouseup", function(e) {
    scrollUsuario = false;
    var num = Math.floor(Math.abs(scroll0 - e.pageX) / 140);
    var dir = scroll0 - e.pageX < 0 ? "up" : "down";
    for (var x = 0; x < num; x++) {
    	var $first = $('#clients-list li:first');
    	var $last  = $('#clients-list li:last');
      if (dir == "up") {
      	$last.prependTo("#clients-list");
      } else {
      	$first.appendTo("#clients-list");
      }
    }
    $("#clients-list").css("transform", "translate(0, 0)")
  }).on("mousemove", function(e) {
  	if (scrollUsuario) {
      $("#clients-list").css("transform", "translate(" + ( e.pageX - scroll0 ) +"px, 0)")
    }
  });
});
#clients {
  margin: 0 auto;
  padding: 60px 0;
  background: #f9f9f9;
}
#clients .clients-wrap {
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  display: block;
  padding-bottom: 45px;
  overflow: hidden;
}
#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65); 
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); 
  opacity: 1.0;
}
#clients, #clients * {
  user-select:none;
  -webkit-user-select:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="clients">
  <div class="clients-wrap">
    <ul id="clients-list" class="clearfix">
      <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
      <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
      <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
      <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
      <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
      <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
      <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
    </ul>
  </div><!-- @end .clients-wrap -->
</div><!-- @end #clients -->

jquery
Martin Hope
May
Asked: 2020-09-30 00:37:57 +0800 CST
  • 24

On StackOverflow I found various questions about carousel among other topics based on my question.

Very useful questions as a guide:

Now my question is:

How to create auto move left and right?

I explain to myself to make the movement of the images move to the left taking into account the start of the game in this case it would be image 1 to image 6 and go back / return the movement to the right of image 6 to the main image so on.

How to create a horizontal scroll in the images or the content of the images?

In other words, being able to move the images or the content both to the right and to the left with this effect when trying to select the image, the only thing that can be achieved is to move the content of the carousel.

  • Example: the effects of this customer carousel found at the bottom of this Digital Media website .

In the carousel of customer testimonials how to make the automatic movement in the customer testimonials.


Could you explain to me how to apply these effects.

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel
 
  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
var $last = $('#testimonial-list li:last');
$last.remove().css({ 'margin-left': '-415px' });
$('#testimonial-list li:first').before($last);
$last.animate({ 'margin-left': '0px' }, animtime); 
  });
  
  $('#nxt-testimonial').on('click', function(){
var $first = $('#testimonial-list li:first');
$first.animate({ 'margin-left': '-415px' }, animtime, function() {
  $first.remove().css({ 'margin-left': '0px' });
  $('#testimonial-list li:last').after($first);
});  
  });


  // vars for clients list carousel
 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);
  
  var rotating = true;
  var clientspeed = 1800;
  var seeclients = setInterval(rotateClients, clientspeed);
  
  $(document).on({
mouseenter: function(){
  rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
  rotating = true;
}
  }, '#clients');
  
  function rotateClients() {
if(rotating != false) {
  var $first = $('#clients-list li:first');
  $first.animate({ 'margin-left': '-140px' }, 600, function() {
    $first.remove().css({ 'margin-left': '0px' });
    $('#clients-list li:last').after($first);
  });
}
  }
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}


/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65); 
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); 
  opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div id="w">
<div id="content">
  
  <div id="testimonials">
    <h2>Client Testimonials</h2>
    <div class="carousel-nav clearfix">
      <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Left-icon.png" id="prv-testimonial" class="prevbtn">
      <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Right-icon.png" id="nxt-testimonial" class="nextbtn">
    </div>
    <div class="carousel-wrap">
      <ul id="testimonial-list" class="clearfix">
        <li>
          <p class="context">"Their services are beyond anything I could have imagined. It gets my highest recommendation."</p>
          <p class="credits">Johnny Appleseed, <a href="http://www.apple.com/">Apple, Inc.</a></p>
        </li>
        <li>
          <p class="context">"Simple. Efficient. Quick production and easy to work with."</p>
          <p class="credits">Smithy Smith, <a href="http://www.roughdraftstudios.com/">Rough Draft Studios, Inc.</a></p>
        </li>
        <li>
          <p class="context">"The marketing strategy is superb. These guys came through above and beyond expectations."</p>
          <p class="credits">Mr. Generic, <a href="http://www.google.com/">Google</a></p>
        </li>
        <li>
          <p class="context">"We needed a reliable team to help with some finishing touches. These guys are reliable, fair, and trustworthy... A+ quality."</p>
          <p class="credits">Seth MacFarlane, <a href="http://en.wikipedia.org/wiki/Fuzzy_Door_Productions">Fuzzy Door Productions</a></p>
        </li>
      </ul><!-- @end #testimonial-list -->
    </div><!-- @end .carousel-wrap -->
  </div><!-- @end #testimonials -->
  
  <div id="clients">
    <h3>Past &amp; Present Clients</h3>
    <div class="clients-wrap">
      <ul id="clients-list" class="clearfix">
        <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
        <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
        <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
        <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
        <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
        <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
        <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
      </ul>
    </div><!-- @end .clients-wrap -->
  </div><!-- @end #clients -->
</div><!-- @end #content -->
  </div><!-- @end #w -->

jquery
Martin Hope
May
Asked: 2020-09-28 22:42:57 +0800 CST
  • 2

How do I adapt a gradient background image with a resolution of 150x150.

The background image is divided into several parts, as I manage to adapt the gradient image correctly.

body {
 margin: 0;
 padding: 0;
 background: url(http://dominointernet.s3.amazonaws.com/web/wp-content/uploads/2013/07/home-slider-bg-gris.png) center center fixed;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div>contenido, contenido</div>
</body>
</html>

html5
Martin Hope
May
Asked: 2020-09-28 12:08:03 +0800 CST
  • 4

I have a text alignment error, the text does not adjust when changing the screen resolution, there is too much space to the right of the text.

The error in the images are not adjusted in a specific order, the desired thing is that the images that are on the right when making the image responsive jump below the text. And if the image is on the left, the text will jump below the image.

The first container divthe text wraps correctly, the rest don't.

Full code:

* {
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #8899a1;
  font-size: 13px;
  font-family: OpenSans;
}

ul li {
  border: none;
  border-spacing: none;
  list-style-type: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

p {
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  margin: 0 0 10px;
}

img {
  height: auto;
  border: none;
  display: block;
  max-width: 100%;
  vertical-align: middle;
}

#container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px; 
  padding-right: 15px;
}

.block {
  display: inline-block;
}

#features {
  clear: both;
  padding: 100px 0;
  background: #f5f5f5;
}

.section-header {
  margin-bottom: 50px;
}

.section-title {
  margin-bottom: 15px;
  display: block;
  clear: both;
  font-size: 28px;
  line-height: 38px;
  text-align: center;
  font-weight: 400;
  color: #262f32;
  text-transform: uppercase;
}

.section-header p {
  display: block;
  clear: both;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  font-weight: 300;
  color: #8d8d8d;
 }

.media {
  margin-top: 80px;
  margin: 25px 0;
}

.box{
  margin-right: 20px;
  padding-right: 10px;
  float: left!important;
}

.boxb{
  display: table-cell;
  vertical-align: top;
}

.ico {
  font-size: 24px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  width: 64px;
  color: #72C05B;
  box-shadow: inset 0 0 0 1px #d7d7d7;
  -webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
  transition: background-color 400ms, background-color 400ms;
  position: relative;
  display: block;
  line-height: 60px;
  font-size: 18px;
  transform: translateZ(0px);
}

.creative-services {
  display: inline-block;
  width: 48%;
}

.creative-services ul.creative-feature li {
  color: #1b1d1f;
  display: inline-block;
  padding-left: 10px;
  text-transform: capitalize;
  width: 33%;
  margin-bottom: 15px;
}

.creative-services ul.creative-feature li:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Blue_check_PD.svg/2000px-Blue_check_PD.svg.png);
  background-size: cover;
  position: relative;
  left: -5px;
}

.creative-services h3, h4 {
  margin-bottom: 30px;
}

#about {
  padding: 100px 0;
}

.bloque1{
  float: left;
  width: 50%;
}

.column-title {
  margin-top: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  position: relative;
}

.column-title:after {
  content: " ";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40%;
  border-bottom: 1px solid #72C05B;
}
<div id="features">
  <div id="container">
<div class="section-header">
  <h2 class="section-title">WELCOME TO OUR COMPANY</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br>  et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="content">
  <div class="bloque1"><img class="" src="http://themeinthebox.com/demo/color/images/feature-2.png" alt=""></div>
  <div class="bloque1">
    <div class="media">
      <div class="box"><i class="ico"></i></div>
      <div class="boxb"><h4 class="h4">Title Title</h4><p>
Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p></div>
    </div>
    <div class="media">
      <div class="box"><i class="ico"></i></div>
      <div class="boxb"><h4 class="h4">Title Title</h4><p>
Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p></div>
    </div>
    <div class="media">
      <div class="box"><i class="ico"></i></div>
      <div class="boxb"><h4 class="h4">Title Title</h4><p>
Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p></div>
    </div>
  </div>
</div>
  </div>
</div>

  <div id="creative">
<div id="container">
  <div class="block"><img src="https://ioyby2hf25e3sg55t3muegr1-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Switch-Onepage-Business-WordPress-Theme.png" alt="" width="600px"></div>
  <div class="creative-services">
    <h3>Unique experience</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book Lorem Ipsum has been the industry's.</p>
    <h4>Features</h4>
    <ul class="creative-feature">
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
    </ul>
  </div>
</div>
</div>

<div id="about">
  <div id="container">
<div class="conten">
  <div class="bloque1">
    <h3 class="column-title">A Little More About Us</h3>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <a class="btn btn-primary" href="#">Discover Us</a>
  </div>
  <div class="bloque1">
    <img class="" src="http://themeinthebox.com/demo/color/images/feature-2.png" alt="">
  </div>
</div>
  </div>
</div>

How could I fix these alignment and fit errors without using Media-queries ?

Note: I keep in mind that media queries are designed for responsive design, what I try to do is limit their use, only use them for specific details, so as not to have an extensive media-query.

Here are some images as a reference to what you want:

Image 1 http://inidesing.com/imagenes/responisveeeerrot.png

Image 2 http://inidesing.com/imagenes/responsivemal.png

html5
Martin Hope
May
Asked: 2020-09-25 20:05:59 +0800 CST
  • 2

Some example of how to create a link on the same page with php index type.

In jQuery I have created an animated scroll on the links with jQuery.

But with this example the external links don't work. Yes, I change this value $('a').click(function(e){for this $('.scroll').click(function(e){, the external links work but the links on the same page are shown in the urls in this way:example/index.php#ancla1

Instead with this value: $('a').click(function(e){no but external links do not work.

How could I make the external links work but without the links on the same page not showing this in the urls example/index.php#ancla1

$(document).ready(function () {
  $('a').click(function(e){
    e.preventDefault();
    $('html, body').stop().animate({scrollTop: $($(this).attr('href')).offset().top}, 1000);
  });
});
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<nav>
 <ul>
  <li><a href="#ancla1">ancla1</a></li>
  <li><a href="#ancla2">ancla2</a></li>
  <li><a href="#ancla3">ancla3</a></li>
 </ul>
</nav>

<div id="ancla1">Vestibulum ultricies, leo non iaculis gravida, quam nunc tristique sem, in tincidunt nisl sapien vitae nisi. Aliquam ipsum mi, interdum vehicula sodales eu, vulputate vitae leo. Sed fringilla venenatis nisi, in vulputate arcu lobortis sit amet. Nulla ullamcorper, turpis nec semper rutrum, enim magna ultricies nunc, at blandit odio turpis sit amet dolor. Cras cursus quis tortor et pretium. Suspendisse potenti. Ut volutpat, purus eget hendrerit porta, dolor nulla sodales mi, ac accumsan justo sem at justo. Morbi sit amet nulla tristique dolor sollicitudin accumsan nec et eros. Nam et sodales tortor.</p>

<p>Cras auctor laoreet quam sit amet vestibulum. Aenean pharetra eleifend nisl semper dignissim. Curabitur at elementum elit. Ut eu imperdiet purus. Cras eros diam, congue et libero vel, lobortis porttitor sapien. Maecenas vitae malesuada turpis, eget viverra ipsum. Mauris nec viverra elit, ut ornare dui.</p>

<p>Curabitur lobortis convallis tincidunt. Nunc luctus magna vitae felis congue interdum. Nullam accumsan pellentesque velit vitae dictum. Duis interdum libero at turpis molestie vehicula. Nulla sit amet tortor id turpis rutrum tempor. Sed ac lectus mollis, consequat dolor dictum, semper eros. Duis pharetra, turpis sit amet imperdiet ullamcorper, lectus mi condimentum purus, sit amet mattis neque ipsum id dui. Praesent fringilla, dolor auctor tristique pretium, odio turpis luctus magna, sit amet faucibus lacus nunc vel sem.</div>

<div id="ancla3">Vestibulum ultricies, leo non iaculis gravida, quam nunc tristique sem, in tincidunt nisl sapien vitae nisi. Aliquam ipsum mi, interdum vehicula sodales eu, vulputate vitae leo. Sed fringilla venenatis nisi, in vulputate arcu lobortis sit amet. Nulla ullamcorper, turpis nec semper rutrum, enim magna ultricies nunc, at blandit odio turpis sit amet dolor. Cras cursus quis tortor et pretium. Suspendisse potenti. Ut volutpat, purus eget hendrerit porta, dolor nulla sodales mi, ac accumsan justo sem at justo. Morbi sit amet nulla tristique dolor sollicitudin accumsan nec et eros. Nam et sodales tortor.</p>

<p>Cras auctor laoreet quam sit amet vestibulum. Aenean pharetra eleifend nisl semper dignissim. Curabitur at elementum elit. Ut eu imperdiet purus. Cras eros diam, congue et libero vel, lobortis porttitor sapien. Maecenas vitae malesuada turpis, eget viverra ipsum. Mauris nec viverra elit, ut ornare dui.</p>

<p>Curabitur lobortis convallis tincidunt. Nunc luctus magna vitae felis congue interdum. Nullam accumsan pellentesque velit vitae dictum. Duis interdum libero at turpis molestie vehicula. Nulla sit amet tortor id turpis rutrum tempor. Sed ac lectus mollis, consequat dolor dictum, semper eros. Duis pharetra, turpis sit amet imperdiet ullamcorper, lectus mi condimentum purus, sit amet mattis neque ipsum id dui. Praesent fringilla, dolor auctor tristique pretium, odio turpis luctus magna, sit amet faucibus lacus nunc vel sem.</div>

<div id="ancla1">Vestibulum ultricies, leo non iaculis gravida, quam nunc tristique sem, in tincidunt nisl sapien vitae nisi. Aliquam ipsum mi, interdum vehicula sodales eu, vulputate vitae leo. Sed fringilla venenatis nisi, in vulputate arcu lobortis sit amet. Nulla ullamcorper, turpis nec semper rutrum, enim magna ultricies nunc, at blandit odio turpis sit amet dolor. Cras cursus quis tortor et pretium. Suspendisse potenti. Ut volutpat, purus eget hendrerit porta, dolor nulla sodales mi, ac accumsan justo sem at justo. Morbi sit amet nulla tristique dolor sollicitudin accumsan nec et eros. Nam et sodales tortor.</p>

<p>Cras auctor laoreet quam sit amet vestibulum. Aenean pharetra eleifend nisl semper dignissim. Curabitur at elementum elit. Ut eu imperdiet purus. Cras eros diam, congue et libero vel, lobortis porttitor sapien. Maecenas vitae malesuada turpis, eget viverra ipsum. Mauris nec viverra elit, ut ornare dui.</p>

<p>Curabitur lobortis convallis tincidunt. Nunc luctus magna vitae felis congue interdum. Nullam accumsan pellentesque velit vitae dictum. Duis interdum libero at turpis molestie vehicula. Nulla sit amet tortor id turpis rutrum tempor. Sed ac lectus mollis, consequat dolor dictum, semper eros. Duis pharetra, turpis sit amet imperdiet ullamcorper, lectus mi condimentum purus, sit amet mattis neque ipsum id dui. Praesent fringilla, dolor auctor tristique pretium, odio turpis luctus magna, sit amet faucibus lacus nunc vel sem.</div>

In php, how the links would be created on the same page, something similar to jQuery.

php
Martin Hope
May
Asked: 2020-09-25 13:25:41 +0800 CST
  • 2

Is there any other way to prevent floating content from overlapping other tags.

To prevent divcontent floats from single serviciesoverlapping other content I use this <div style="clear: both;"></div>as a rule at the end to prevent content single serviciesfrom overlapping other tags.

Without it all the content is on top, it would be possible that instead of using clear: both;the property heightof the content body it would increase as if the contents single serviciesdid not have this propertyfloat: left;

#services {
  padding-top: 40px!important;
  display: block;
}

.services-title {
  text-align: center;
}

.services-title h2 {
  font-size: 18px;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.services-title p {
  margin: 0 auto;
  max-width: 800px;
}

.single-services {
  float: left;
  padding-left: 15px;
  margin-bottom: 30px;
  padding-right: 15px;
}

footer {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 180px;
  background-color: #333;
}
  <div id="services">
<div id="container">
  <div class="services-title">
    <h2>Nuestro Servicio</h2>
    <p>Lorem Ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div style="clear: both;"></div>
</div>
  </div>
<footer>
  <div id="content">
  </div>
</footer>

html5
Martin Hope
May
Asked: 2020-09-25 09:24:49 +0800 CST
  • 3

The way I'm implementing the video is the correct way to create a background video.

How do I play the background video automatically by applying only css3 styling or is it necessary to add jQuery to play the video automatically.

How to hide or remove video playback buttons or tools 

#background-video {
  position: absolute;
  top: -157.906px;
  left: 0px;
  width: 1349px;
  height: 758.813px;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

video {
  height: 100%;
  width: 100%;
  display: block;
}
<div id="background-video ">
  <video poster="http://www.themesindustry.com/html/bizone/video/thumb.jpg">
    <source src="http://www.themesindustry.com/html/bizone/video/video.mp4" type="video/mp4">
  </video>
</div>

jquery
Martin Hope
May
Asked: 2020-09-19 07:46:45 +0800 CST
  • 5

I am making a counter of how many online users are seeing a question. Example: Pedro and Juan and one more person are seeing this question. The variable user_onlinestores the names of online users. I use because through AJAX I want to refresh online users.

var user_online = ["Pedro", "Juan", "Carlos"];


My question is how do I, when pressing a button on the page, send the value of this variable, collecting the values ​​in PHP and saving it in the database using , following this structure:

 id    User_Online
----  ---------------------
 1     Pedro, Juan, Carlos
php