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;
hope you can help me guys,thx.
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
Last edited: