I want text on the right side and pics on the left side with a selection of different pic of the product picture on left with one main picture and other thumbnails to select the different angles of the product. 2nd main problem is shared and private checked boxes are besides adult and children selection I want them in the next line below adult and children line
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media (max-width: 640px) {
.banner {
flex-direction: column;
}
}
body {
margin: 0;
box-sizing: border-box;
min-height: 100vh;
min-width: 100vw;
}
.banner {
width: 100vw;
display: flex;
justify-content: space-around;
}
.col-2 {
margin: 2%;
display: flex;
justify-content: center;
align-items: center;
}
.clm img {
width: 100%;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.clm {
width: 690px;
padding-left: 20px;
}
.up, .down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 25px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover, .down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
float: left;
display: flex;
justify-content: space-between;
}
input[type="radio"]{
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 30px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 30px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked + label{
background-color: orangered;
color: white;
}
input[type="radio"]:checked + label:before{
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
</script>
</head>
<body>
<div class="banner">
<div class="clm">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg">
</div>
<div class="clm">
<p>Home / Morning Safari</p>
<h1>Morning Safari</h1>
<h4> <label> Total:</label><label class="total Price"></label> </h4>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div><br>
<div class="container">
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
</div>
</div>
</body>
</html>