this is have i have so far just need help with the cars Part 4 - Positions
this is have i have so far just need help with the cars
<!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: url('passbook.jpeg');
background-repeat: no-repeat;
background-size: cover;
transform: rotate(180deg);
position: absolute;
margin-top: 50em;
top: 50px;
left: 12%;
width: 20em;
height: 40em;
float: left;
}
/* General sibling combinator */
.car-right {
position: absolute;
background: url('./images/red-car.png'); background: url('passbook.jpeg');
background-repeat: repeat;
background-size: cover;
margin-top: 5em;
top: 80em;
right: 12%;
width: 20em;
height: 40em;
float: right;
}
/* 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 with 1 images
