body{
margin:0;
justify-content: center;
background: url(/image/bg-cover.png);
}
.des{
padding-bottom: 100px; ;
}
.container{
display: flex;
overflow-x: auto;
}
.container ::-webkit-scrollbar{
width:0px;
}
.wheelbg{
height: 400px;
width :600px;
/* background-image: url(/image/wheel-bg.jpg); */
margin-right: 33px;
/* background: turquoise; */
}
.wheelbg img{
height: 250px;
width: auto;
object-fit: cover;
display: block;
margin:auto;
}
button{
padding: 10px;
border: none;
background: #37f;
font-size: 30px;
color: white;
position: absolute;
top:50%;
}
.nex{
border-radius: 10px 0px 0px 10px;
margin-left: 50em;
}
.prev{
border-radius: 0px 10px 10px 0px;
}
button:hover{
transform: scale(1.5);
}
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Varta:wght@300;400;500&display=swap">
</head>
<body>
<h1>Wheels</h1>
<p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, dignissimos. Modi animi quam architecto, deleniti ipsum porro voluptatum dolorum fuga, ad et tempora laborum fugiat magnam, quidem aut reiciendis libero!</p>
<button class="prev"><</button>
<div class="container">
<div class="wheelbg">
<img src="image/1.png" alt="">
wheel 1
</div>
<div class="wheelbg">
<img src="image/2.png" alt="">
wheel 2
</div>
<div class="wheelbg">
<img src="image/3.png" alt="">
Wheel 3
</div>
<div onclick="zoom()" class="wheelbg">
<img src="image/4.png" alt="">
<div>Wheel 4
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p></div>
</div>
</div>
<button class="nex">></button>
<script src="script.js"></script>
</body>
</html>
I am trying to make a webpage by following these rules:
- Convert the attached “layout.jpg” to HTML without using any html framework like (bootstrap, w3css etc.). The assets are shared in an image zip and use dummy content.
- Keep container maximum size of “1152px X 720px”. Layout should be vertical center position.
- Slider functionality should be enabled without using any plugin (as per design).
- Zoom functionality – by default all wheel images should be in normal state. On click, an active wheel should be zoomed smoothly as per design.
- While clicking left/right arrow, an active state will be inactive (zoom to normal state) and then move accordingly.
- If slide reached the beginning/end, the left/right side arrow should be disabled (unable to click)
While trying to do this, while fetching the css properties by document.getElementsByClassName(“wheelbg”).style.height;
it is showing height is not defined.
|i am using css external file.