cars.css

body{
    text-align:center;
    margin: 0;
    padding: 0%;
    font-family: fantasy;
    background: aliceblue;
    font-size: x-large;
}

header{
    background-color:antiquewhite ;
    padding: 20px;
}

.banner{
    width:100%;
}

.banner-image{
    width:100%
    background-size cover;
    background-position: center;
    animation:banneranim 4s infinite;
}

@keyframes banneranim{
    0% {background-image: url(banner2.jpg);}
    50% {background-image: url(banner3.jpg);}
}

.car-selector{
display: flex;
justify-content: center;
}

.car{
    border: 2px solid transparent;
    border-radius: 15px;
    width:100%;
    transition: transform 0.3s, border-color 0.3s;
    justify-content:center;
    cursor: pointer;
    animation: fadeIn 3s;
}

@keyframes fadeIn{
    0% {opacity: 0;}
    100%{opacity:1;}
}

.car:hover{
    transform: scale(1.1);
    color: rgb(142, 127, 170);
}

.car-image{
    width:33%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    float: left;
}
header{
    animation: fadeIn 3s;
}
.seven
{
    animation-name:moves;
    animation-duration: 2s;
    animation-iteration-count: 1;
    position: relative;
}
@keyframes moves{
    0%{ left: 0px;}
    50%{left: 1000px;}
    100%{left:0px;}
}
.eight
{
    animation-name:move;
    animation-duration: 2s;
    animation-iteration-count: 1;
    position: relative;
}
@keyframes move{
    0%{ right: 0px;}
    50%{right: 1000px;}
    100%{right:0px;}
}