Home CSS
Sun Nov 12 2023 21:19:22 GMT+0000 (Coordinated Universal Time)
Saved by @dannyholman #css
/* General Styles */ body { margin: 0; } html { scroll-behavior: smooth; } /* Carousel */ #carousel-container { width: 100%; overflow-x: hidden; background-color: rgba(255, 255, 255, 0); z-index: 920; } #carousel { white-space: nowrap; animation: scroll 40s linear infinite; margin-bottom: 20px; z-index: 921; } #carousel img { max-width: 100%; height: auto; display: inline-block; margin-right: -5px; } /* Home Services */ .home-services { display: flex; width: 100%; justify-content: space-between; align-items: center; background-color: #515151; text-align: center; padding: 0; } .home-services a h2 { font-size: 15px; color: #ffffff; background-color: #515151; transition: color .5s ease, background-color .5s ease; padding: 20px 30px; border-radius: 200px; margin: 10px; border: 0; } .home-services a h2:hover { color: #ffffff; background-color: #4A1621; } /* Home Content */ .home-content { line-height: 25px; align-items: center; justify-content: center; overflow: hidden; } .home-item { display: flex; justify-content: space-between; background-color: #000000; align-items: center; transition: background-color 1s ease; border-radius: 200px; margin: 20px; cursor: pointer; } .home-item:hover { background-color: #515151; } .home-text { margin: 0 4vw 0 4vw; font-size: 16px; } .home-img img { width: 20vw; height: 100%; } .home-item ul { font-family: nunito; text-indent: 10px; color: white; line-height: 2vw; display: none; } .arrow img { width: 4vw; margin: 0 10vw; transform: translateX(0); transition: 2s ease; } .home-item:hover .arrow img { transform: translateX(30px); } .home-content h1, .home-content h2 { color: white; white-space: nowrap; } /* Hero */ .hero-image img { width: 100%; height: auto; display: block; z-index: 2; opacity: .4; transition: opacity 1s ease-in-out; } /* Hero Mobile */ @media (max-width: 900px) { .home-title h1 { display: none; } .hero-buttons { display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%; margin: 10px 0; } .hero-image { position: relative; width: 100%; height: auto; } .hero-image img { width: 100%; height: 500px; display: block; object-fit: cover; } .hero-content { position: absolute; display: flex; flex-direction: column; top: 20vh; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; z-index: 1; width: 100%; justify-content: center; } .hero-content button { border-radius: 200px; border: none; padding: 15px; font-family: Montserrat; cursor: pointer; margin: 5px; background-color: #fff; transition: .5s ease; width: 60vw; font-size: 15px; line-height: 14px; align-items: center; display: flex; justify-content: center; } .hero-content button:hover { background-color: black; color: white; } }
Comments