• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS need help creating app

kawasaki93

New Coder
hello, im trying to create a sunbed app for a project but having some problems and questions. I have to create this one;

https://ibb.co/qBYf1HQ

1.how can i "clone" the exact number of squares i need.
2.web margins to see it same in a mobile or tablet.(when i log in with my mobile i see 10 squares per row and in my tablet i see more then 20 squares) i need 10 per row always.
3.it is possible to clone two different elements so that it remains the same as in the image. the first two rows hexagonal and the rest square?

Here is my work;

https://codepen.io/Kawasaki93/pen/qBxwVbR

Html;
HTML:
<html>
 
<body>

<div class="beach_wrapper">
  <div class="sunbed toggle">
    <div class="margenes">
      <div class="scaled">
      

    <div class="form">
      <div class="grid-container">
          
              
<head>
     </head> 
        
  
    
      <form>
    
        <input type= "text" style="height:17px" size="3"    value="">
        
        <label>
          </label>
          </form>
    
   <style>
 
     form {
       /*Codigo centrado formulario */
 
  margin-left: -12px;
  margin-top: 26px;
  padding: 1em;
  border: 0px solid#CCC;
  text-align: center;
 
  }
    
     ul{
      
       list-style: none;
       padding: 0;
       margin: 0;
       }
    
     form li + li {
       margin-top: 1px;
      
       }
     label {
       /*Tamaño y alineacion uniforme*/
       display: inline-block;
       width:7px;
       text-align: center;
       }
     input,textarea {
       font: 1em sans-serif;
       widht: 7px;
       box-sizing: border-box;
       border: 1px solid #999
        
         }
     input:focus,
     textarea:focus {}
    
     </style>
        </body>
        
</div>
  </div>
    </div>
      </div>
  </div>
  </div>
</html>

CSS:
.beach_wrapper {
  }

html {
  height: 100%;
  width:220%;
  transform: scale(0.5);
 
 
}

body {
    min-height: 100%;
 
}




.sunbed {
  width: 70px;
  height: 40px;
  border: 2px solid;
  color: orange;
  border-color: black;
  background: green;
  text-align: center;
  display:inline-block;
  font-family: sans-serif;
  margin-left:12px;
  margin-top:15px;
 
 
  }

.sunbed.step1 {
  background: yellow
    
    }

.sunbed.step2 {
  background: red
    
    }

.sunbed.step3 {
  background: purple
    
    }
.sunbed.step4 {
  background: yellow
}

.sunbed.step5{
  background:red
}
.sunbed.step6{
  background:purple
}
.sunbed.step7{
  background:yellow
}
.sunbed.step8{
  background:red
}
.sunbed.step9{
  background:purple
}
 .form input{
  background-color: #FFEFD5;
  border: none;
  border-bottom: 1px solid green;
  text-align:center;
  zoom: 100%;
  touch-action: none;
 

}

JavaScript:
for (var x=1;x<7;x++)
 
 


{
 
  $(".beach_wrapper").append($(".sunbed").clone(
    ));
   }


$('.toggle').dblclick(function () {  let step = $(this).data('actual-step') || 1;
                                                        
$(this).addClass('step'+ step);

$(this).data('actual-step', step + 1 );
                                  
 

                                
                                
});

hope you can help me guys,thx.
 

Attachments

  • 20220619_090638.jpg
    20220619_090638.jpg
    538.4 KB · Views: 3
Last edited:

OldMan

King Coder
Please clean up your code and re-post it.
You have CSS in the HTML section. You also have the <hrag> tags in it. and a lot of </type> tags AFTER the </body> tag.

So you need to post the HTML and the new CSS code.

ARE you using Jquery? what ver.?
 
Top