At the end of this section, you will have a webpage that looks and functions like the webpage in the video below (white and green lines are fixed, the white car sticks to the top of the viewport instead of leaving the viewport on scroll):
this is what I have so far just need help with the cars they are both the same size one is (red-car.png) and the other is (white-car.png)
<!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>Part 4 - Positions</title>
<style>
/* element selector */
.left-grassp {
position:absolute;
left:120px;
top:-70px;
width: 1100px;
height: 109vh;
background-color:#414046;
}
.right-grasspp {
position: absolute;
left:220px;
top:1px;
width: 4em;
height: 100vh;
background-color:#414046;
}
/* class selector */
.right-sidep {
position: absolute;
left: 4em;
top: 0;
background-color: white;
}
/* class selector */
.left-side {
position: absolute;
left:4em;
top: 0;
background-color: white;
width: 4em;
height: 100vh;
}
/* class selector */
.left-grass {
position: absolute;
top: 0;
background-color: rgb(0, 128, 28);
width: 4em;
height: 100vh;
}
/* class selector */
.right-grass{
position: absolute;
left:1300px;
top:-20px;
background-color: green;
width: 4em;
height: 100vh;
}
/* class selector */
.car-left {
/* background: url('./images/white-car.png');
background-repeat: no-repeat;
background-size: cover;
transform: rotate(180deg);
position: absolute;
margin-top: 50em;
top: 50px;
left: 12%;
width:20em;
height: 20em;
float: left; */
position: absolute;
/* background: url('./images/red-car.png'); */
background: url('./images/white-car.png');
background-repeat: repeat;
background-size: cover;
/* margin-top: 5em; */
top: 26em;
left: 12%;
width: 6em;
height: 13em;
}
/* General sibling combinator */
.car-right {
position: absolute;
/* background: url('./images/red-car.png'); */
background: url('./images/red-car');
background-repeat: repeat;
background-size: cover;
/* margin-top: 5em; */
top: 7em;
right: 12%;
width: 6em;
height: 13em;
}
/* General sibling combinator */
.center {
background-color: #EFB700;
border-radius: 2px;
margin: 4em auto;
width: 2em;
height: 10em;
}
</style>
</head>
<body>
<div class="left-grass"></div>
<div class="left-grassp">
<div class="car-left"></div>
<div class="center"></div> <div class="center"></div> <div class="center"></div>
<div class="right-grassp"></div>
<div class="car-right"></div>
</div>
<div class="right-side"></div>
<div class="right-grass"></div>
</div>
</body>
</html>
Step by step
Solved in 3 steps
