|
body { |
|
|
|
padding: 0; |
|
margin: 0; |
|
} |
|
|
|
|
|
#nav-bar { |
|
position: sticky; |
|
top: 0; |
|
z-index: 10; |
|
} |
|
|
|
.navbar { |
|
background-image: linear-gradient(to right, #75ee71c7, #eceb84); |
|
padding: 0 !important; |
|
} |
|
|
|
.navbar-nav li { |
|
padding: 0 10px; |
|
} |
|
|
|
.navbar-nav li a { |
|
font-weight: 600; |
|
} |
|
|
|
|
|
|
|
#banner { |
|
background-image: linear-gradient(to right, #75ee71c7, #eceb84); |
|
padding-top: 5%; |
|
} |
|
|
|
.promo-title { |
|
font-size: 40px; |
|
font-weight: 600; |
|
margin-top: 100px; |
|
} |
|
|
|
.img-fluid { |
|
border-radius: 12px; |
|
} |
|
|
|
.bottom-img { |
|
width: 100%; |
|
} |
|
|
|
|
|
#services { |
|
padding: 80px 0; |
|
} |
|
|
|
.service-img { |
|
width: 100px; |
|
margin-top: 20px; |
|
} |
|
|
|
.service-name { |
|
text-align: center; |
|
|
|
} |
|
|
|
.services { |
|
padding: 20px; |
|
} |
|
|
|
.title::before { |
|
content: ""; |
|
background: hsl(128, 84%, 66%); |
|
height: 5px; |
|
width: 200px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
display: block; |
|
transform: translateY(63px); |
|
} |
|
|
|
.title::after { |
|
content: ""; |
|
background: hsl(128, 84%, 66%); |
|
height: 10px; |
|
width: 50px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
margin-bottom: 40px; |
|
display: block; |
|
transform: translateY(8px); |
|
} |
|
|
|
|
|
|
|
#about-us { |
|
padding-bottom: 50px; |
|
padding-top: 50px; |
|
} |
|
|
|
#about-us ul li { |
|
margin: 10px 0; |
|
} |
|
|
|
|
|
#quotes { |
|
margin: 100px 0; |
|
} |
|
|
|
.quotes { |
|
border-left: 4px solid #f1f397e3; |
|
margin-top: 50px; |
|
margin-bottom: 50px; |
|
} |
|
|
|
.quotes img { |
|
height: 60px; |
|
width: 60px; |
|
border-radius: 50%; |
|
margin: 0 10px; |
|
} |
|
|
|
.user-details { |
|
display: inline-block; |
|
font-size: 12px; |
|
} |
|
|
|
|
|
#social-media { |
|
|
|
padding: 100px 0; |
|
} |
|
|
|
#social-media p { |
|
font-size: 36px; |
|
font-weight: 600; |
|
margin-bottom: 30px; |
|
} |
|
|
|
.social-icons img { |
|
width: 120px; |
|
transition: 0.5s; |
|
padding: 20px; |
|
} |
|
|
|
.social-icons a:hover img { |
|
transform: translateY(-10px); |
|
} |
|
|
|
|
|
|
|
#footer { |
|
background-image: linear-gradient(to right, #75ee71c7, #eceb84); |
|
color: rgb(106, 110, 110) |
|
} |
|
|
|
#footer img { |
|
width: 100%; |
|
} |
|
|
|
.footer-box { |
|
padding: 20px; |
|
} |
|
|
|
#footer .footer-box img { |
|
width: 30%; |
|
margin-bottom: 20px; |
|
border-radius: 5%; |
|
} |
|
|
|
#footer .footer-box .addition-info { |
|
display: inline-block; |
|
font-size: 20px; |
|
} |
|
|
|
|
|
.recommendation-input-container { |
|
max-width: 800px; |
|
|
|
margin: 60px auto 0; |
|
|
|
display: flex; |
|
align-items: center; |
|
background-color: white; |
|
padding: 20px; |
|
border-radius: 15px; |
|
|
|
} |
|
|
|
|
|
.image_input { |
|
width: 50%; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
background-color: white; |
|
padding: 30px; |
|
border-radius: 20px; |
|
} |
|
|
|
|
|
.market_input { |
|
width: 40%; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
background-color: white; |
|
padding: 15px; |
|
border-radius: 20px; |
|
} |
|
|
|
|
|
|
|
.crop-image { |
|
background-color: white; |
|
padding: 30px; |
|
border-radius: 20px; |
|
} |
|
.crop-image img { |
|
border-radius: 20px; |
|
width: 100%; |
|
} |
|
.crop-image .text h1 { |
|
font-size: 35px; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.crop-image .text p { |
|
font-size: 18px; |
|
} |
|
|
|
.crop-image a{ |
|
margin-top: 20px; |
|
} |
|
.crop-image h2{ |
|
margin-bottom: 30px; |
|
} |
|
|
|
|
|
|
|
.plant-image { |
|
background-color: white; |
|
padding: 30px; |
|
border-radius: 20px; |
|
width: 60%; |
|
} |
|
.plant-image img { |
|
border-radius: 20px; |
|
width: 70%; |
|
margin: 0 auto; |
|
display: block; |
|
} |
|
|
|
.plant-image a{ |
|
margin-top: 20px; |
|
|
|
} |
|
.plant-image h2{ |
|
margin-bottom: 30px; |
|
} |
|
|
|
|
|
|
|
.market_price_message{ |
|
background-color: white; |
|
padding: 20px; |
|
border-radius: 15px; |
|
width: 70%; |
|
margin-top: 5%; |
|
} |
|
|
|
.market_price_message a{ |
|
margin-top: 10px; |
|
} |