UI/css/style.css
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin: 0 !important;
}
#wrapper {
display: flex;
background: #fff;
min-height: 100vh;
flex-direction: column;
width: 100%;
}
.header-main,
.footer-main {
height: 60px;
width: 100%;
background: #8a1162;
}
.header-main .nav-main {
display: flex;
flex-wrap: wrap;
padding: 0;
}
.nav li {
float: right;
}
.nav #logo {
float: left;
font-size: 2em;
}
.nav a {
text-decoration: none;
color: #fff;
margin-right: 10px;
font-size: 80%;
}
li {
list-style: none;
text-transform: capitalize;
font-size: 2em;
}
main {
background: #e9e0e8;
flex: 1;
height: 80vh
}
main h1 {
text-align: center;
}
#slider {
overflow: hidden;
}
#slider figure {
min-height: 100px;
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 15s slider infinite;
}
#slider figure img {
width: 20%;
float: left;
}
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
.buy-car {
margin: 0 auto;
padding-top: 1em;
border-radius: 5px;
margin-bottom: 1em;
}
.buy-car h2 {
text-align: center;
text-transform: capitalize;
font-size: 2em;
margin: 0;
}
.buycar span {
font-size: 1.4em;
font-weight: bold;
}
.sell-car {
height: 300px;
margin: 0 auto;
padding-top: 1em;
background: #caa9c0;
border-radius: 5px;
padding: 0.5em;
}
.sell-car h2 {
text-align: center;
text-transform: capitalize;
font-size: 2em;
margin: 0;
}
.sellcar span {
font-size: 1em;
font-weight: bold;
}
.testimonial {
display: flex;
flex-direction: column;
}
#testimonial-section h2 {
margin: 0 auto;
padding-top: 1em;
text-align: center;
font-size: 2em;
}
.testimony-items {
display: flex;
flex-direction: column;
width: 70%;
align-items: center;
background: white;
padding: 10px;
margin: 0 auto;
margin-bottom: 1em;
}
.testimony-items img {
width: 60%;
text-align: center;
padding: 1em;
}
.testimony-items p {
font-weight: bold;
}
.footer-main {
margin: 0;
background: #8a1162;
display: flex;
}
.footer-main p {
margin: 0 auto;
color: white;
padding: 1em;
font-size: 1em;
}
@media screen and (min-width: 700px) {
.buy-car {
height: 200px;
margin: 0 auto;
padding-top: 1em;
background: #d8ced5;
border-radius: 5px;
padding: 0em 0.5em 1.5em 0.5em;
}
.sell-car {
height: 200px;
margin: 0 auto;
padding-top: 1em;
background: #caa9c0;
border-radius: 5px;
padding: 0em 0.5em 1.5em 0.5em;
}
.testimonial {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
#slider img {
height: 650px;
width: 300px
}
.nav a {
text-decoration: none;
color: #fff;
margin-right: 2em;
font-size: 80%;
}
}