Summarize this content to 400 words in Persian Lang
سلام به همه،من این صفحه فرود کارواش ساده را ایجاد کردم.
امکانات
پاسخگو
Tailwind css، برای توسعه سریع.
سایت زنده
شما می توانید سایت زنده را در اینجا مشاهده کنید: صفحه فرود کارواش
اسکرین شات
دنبال کردن
توییترgithub
کد منبع
lang=”en”>
charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>
Supreme car wash
name=”description” content=””>
name=”twitter:title” content=””>
name=”twitter:description” content=””>
rel=”shortcut icon” href=”./assets/logo.png” type=”image/x-icon”>
rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap”>
rel=”stylesheet” href=”./css/tailwind-build.css”>
rel=”stylesheet” href=”./css/index.css”>
rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css” integrity=”sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==” crossorigin=”anonymous” referrerpolicy=”no-referrer” />
class=”tw-min-h-[100vh] tw-w-full tw-bg-[#ffffff] tw-flex tw-flex-col”>
class=”tw-w-full tw-justify-around
tw-bg-gray-200 tw-h-[80px]
tw-flex tw-px-5
max-md:tw-hidden
tw-place-items-center
“>
class=”tw-text-3xl primary-text-color tw-font-semibold”>Supreme car wash
class=”tw-flex tw-gap-4″>
class=”tw-w-[50px] tw-h-[50px]
tw-flex tw-place-items-center
tw-place-content-center
tw-rounded-full tw-bg-secondary
tw-text-white
tw-p-3
“>
class=”bi bi-clock tw-text-3xl
tw-font-bold”>
class=”tw-text-xl tw-text-primary
tw-font-semibold”>Opening hours
class=”tw-text-gray-600″>Mon-Fri, 8:00 – 9:00
class=”tw-flex tw-gap-4″>
class=”tw-w-[50px] tw-h-[50px]
tw-flex tw-place-items-center
tw-place-content-center
tw-rounded-full tw-bg-secondary
tw-text-white
tw-p-3
“>
class=”bi bi-telephone tw-text-3xl
tw-font-bold”>
class=”tw-text-xl tw-text-primary
tw-font-semibold”>Call us
class=”tw-text-gray-600″>+1 222-222-222
class=”tw-flex tw-gap-4″>
class=”tw-w-[50px] tw-h-[50px]
tw-flex tw-place-items-center
tw-place-content-center
tw-rounded-full
tw-bg-secondary
tw-text-white
tw-p-3
“>
class=”bi bi-envelope tw-text-3xl
tw-font-bold”>
class=”tw-text-xl tw-text-primary
tw-font-semibold”>Email us
class=”tw-text-gray-600″>supreme@example.com
class=”tw-flex tw-w-full tw-z-20
tw-h-[60px]
md:tw-justify-around
tw-sticky tw-top-0 tw-px-[10%]
tw-bg-white
max-md:tw-bg-primary
max-md:tw-mr-auto
tw-shadow-lg
“>
class=”tw-flex tw-w-fit”>
class=”tw-w-[50px] tw-p-1″>
src=”./assets/logo.png”
alt=”supreme-car-wash logo” class=”tw-object-contain”>
class=”collapsable-header animated-collapse”
id=”collapsed-items”
>
class=”tw-absolute tw-text-white tw-z-50
tw-right-3
tw-top-3
tw-text-2xl bi bi-list md:tw-hidden”
onclick=”toggleHeader()” aria-label=”menu” id=”collapse-btn”>
class=”tw-w-full tw-h-[650px] max-md:tw-h-[300px] tw-max-w-[100vw]
tw-flex tw-flex-col tw-overflow-hidden”>
class=”slideshow-container tw-h-full
tw-w-full tw-flex tw-flex-col”>
class=”tw-relative tw-w-full tw-h-[650px] max-md:tw-h-full tw-overflow-clip”>
class=”slides fade”>
class=”numbertext”>1 / 3
src=”./assets/images/slideshow/car-wash.jpg”
alt=”Delux car wash”
class=”tw-object-cover tw-w-full tw-h-full”>
class=”text”>Supreme car wash
class=”slides fade”>
class=”numbertext”>2 / 3
src=”./assets/images/slideshow/interior.jpg”
alt=”Car wash”
class=”tw-object-cover tw-w-full tw-h-full”>
class=”text”>Interior car wash
class=”slides fade”>
class=”numbertext”>3 / 3
src=”./assets/images/slideshow/sponge-car-wash.jpg”
alt=”supreme car wash”
class=”tw-object-cover tw-w-full tw-h-full”>
class=”text”>Best car wash
class=”prev”>❮
class=”next”>❯
class=”dots-container tw-z-10″>
class=”dot”>
class=”dot”>
class=”dot”>
class=”tw-w-full tw-flex
tw-flex-col
tw-place-content-center
tw-min-h-[60vh]
tw-px-[20%]
max-md:tw-px-[5%]
tw-p-4
tw-gap-[10%]
max-md:tw-gap-[4%]
tw-place-items-center
tw-bg-[#fff]
“>
class=”tw-flex max-md:tw-flex-col tw-gap-[10%] tw-mt-[5%]
max-md:tw-place-items-center
max-md:tw-gap-[4%] tw-w-full tw-place-content-center”>
class=”tw-w-[400px] tw-h-[350px]
max-md:tw-w-[300px] max-md:tw-h-[300px]
tw-flex tw-overflow-hidden
max-md:tw-mt-[5%]
“>
src=”./assets/images/homepage/garage.jpg”
alt=”engine” class=”tw-w-full tw-object-cover”>
class=”tw-w-full tw-flex
tw-flex-col
tw-min-h-[60vh]
max-md:tw-min-h-[unset]
max-md:tw-h-max
tw-px-[20%]
max-md:tw-px-[5%]
tw-p-8
tw-gap-[10%]
max-md:tw-gap-[4%]
tw-place-items-center
tw-bg-[#EFEFEF]
“>
class=”tw-text-2xl max-md:tw-text-lg tw-text-secondary”>Our services
class=”tw-text-5xl max-md:tw-text-3xl tw-text-primary tw-text-center”>Premium washing service
class=”tw-w-full tw-mt-[5%] tw-flex
tw-gap-[10%]
tw-justify-around
max-md:tw-mt-8
tw-place-content-center”>
class=”tw-flex tw-flex-col tw-gap-4
tw-place-content-center
tw-place-items-center
tw-text-center
tw-w-[200px] tw-h-[350px]
max-md:tw-w-[150px] max-md:tw-h-[150px]
“>
class=”tw-w-full tw-h-[150px] max-md:tw-h-[100px]”>
src=”./assets/images/icons/car-wash.svg”
alt=”car wash” class=”tw-h-full tw-w-full tw-object-contain”>
class=”tw-text-2xl max-md:tw-text-lg primary-text-color”>
Exterior washing
class=”tw-flex tw-flex-col tw-gap-4
tw-place-content-center
tw-place-items-center
tw-text-center
tw-w-[200px] tw-h-[350px]
max-md:tw-w-[150px] max-md:tw-h-[150px]
“>
class=”tw-w-full tw-h-[150px] max-md:tw-h-[100px]”>
src=”./assets/images/icons/seat-cleaning.svg”
alt=”car wash” class=”tw-h-full tw-w-full tw-object-contain”>
class=”tw-text-2xl max-md:tw-text-lg primary-text-color”>
Seat cleaning
class=”tw-flex tw-flex-col tw-gap-4
tw-place-content-center
tw-place-items-center
tw-text-center
tw-w-[200px] tw-h-[350px]
max-md:tw-w-[150px] max-md:tw-h-[150px]
“>
class=”tw-w-full tw-h-[100px]”>
src=”./assets/images/icons/vaccuming.svg”
alt=”car wash” class=”tw-h-full tw-w-full tw-object-contain”>
class=”tw-text-2xl max-md:tw-text-lg primary-text-color”>
Vacuuming
class=”tw-w-full tw-flex tw-flex-col
tw-place-content-center
max-md:tw-px-[5%]
tw-p-[5%]
tw-place-items-center
tw-bg-[#fff]
“>
class=”tw-text-2xl tw-font-semibold tw-text-secondary”>Washing plans
class=”tw-text-4xl tw-font-semibold primary-text-color “>Choose your plan
class=”tw-w-full tw-flex
max-md:tw-flex-col tw-place-items-center
tw-mt-[5%] tw-gap-4 tw-place-content-center”>
class=”tw-flex tw-flex-col
tw-w-[350px] tw-h-[400px]
tw-bg-white
tw-p-4
tw-place-items-center
tw-gap-3
tw-rounded-lg
“>
class=”tw-text-3xl primary-text-color”>Basic cleaning
class=”tw-text-5xl tw-font-semibold tw-text-blue-950″>$14
class=”tw-flex tw-mt-2 tw-flex-col tw-gap-2
tw-text-lg”>
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Seat Washing
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Vacuum Cleaning
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Exterior Cleaning
class=”tw-flex tw-gap-2″>
class=”bi bi-x-circle”>
Interior Wet Cleaning
class=”tw-flex tw-gap-2″>
class=”bi bi-x-circle”>
Window Wiping
href=”” class=”tw-p-2 btn tw-mt-auto
hover:tw-scale-[1.02]
tw-duration-[0.3s]
tw-transition-transform
“>
Book now
class=”tw-flex tw-flex-col
tw-w-[350px] tw-h-[400px]
tw-bg-white
tw-p-4
tw-shadow-2xl
tw-border-2
tw-place-items-center
tw-gap-3
tw-rounded-lg
“>
class=”tw-text-3xl primary-text-color”>Executive cleaning
class=”tw-text-5xl tw-font-semibold”>$25
class=”tw-flex tw-mt-2 tw-flex-col tw-gap-2
tw-text-lg”>
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Seat Washing
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Vacuum Cleaning
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Exterior Cleaning
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Interior Wet Cleaning
class=”tw-flex tw-gap-2″>
class=”bi bi-x-circle”>
Window Wiping
href=”” class=”tw-p-2 btn tw-mt-auto
hover:tw-scale-[1.02]
tw-duration-[0.3s]
tw-transition-transform
“>
Book now
class=”tw-flex tw-flex-col
tw-w-[350px] tw-h-[400px]
tw-bg-white
tw-p-4
tw-place-items-center
tw-gap-3
tw-rounded-lg
“>
class=”tw-text-3xl primary-text-color”>Presidential cleaning
class=”tw-text-5xl tw-font-semibold tw-text-blue-950″>$35
class=”tw-flex tw-mt-2 tw-flex-col tw-gap-2
tw-text-lg”>
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Seat Washing
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Vacuum Cleaning
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Exterior Cleaning
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Interior Wet Cleaning
class=”tw-flex tw-gap-2″>
class=”bi bi-check-circle tw-text-green-500″>
Window Wiping
href=”” class=”tw-p-2 btn tw-mt-auto
hover:tw-scale-[1.02]
tw-duration-[0.3s]
tw-transition-transform”>
Book now
class=”tw-w-full tw-flex
tw-place-content-center
tw-px-[10%]
tw-p-4
tw-gap-[10%]
tw-place-items-center
tw-bg-[#EFEFEF]
max-md:tw-flex-col
tw-overflow-hidden
”
id=”booking”
>
class=”tw-w-[350px] tw-h-[350px] tw-rounded-md tw-flex
max-md:tw-hidden
tw-overflow-hidden”>
src=”./assets/images/homepage/car-washing.jpg”
alt=”car wash” class=”tw-w-full tw-object-cover”>
class=”tw-flex tw-flex-col tw-gap-[5%] tw-h-full tw-mt-[5%]”>
class=”tw-flex tw-flex-col tw-gap-2″>
class=”tw-text-5xl max-md:tw-text-3xl primary-text-color tw-font-medium”>Request car wash
class=”tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-center”>
class=”tw-text-xl”>To book call
class=”tw-text-3xl primary-text-color”>
+1 832-604-7679
class=”tw-mt-5 tw-w-full tw-flex tw-flex-col tw-p-[5%] tw-place-items-center”>
class=”tw-text-3xl max-md:tw-text-2xl primary-text-color tw-font-medium”>
What some of our clients say
class=”tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-gap-[5%]”>
class=”review-container tw-flex tw-flex-col”>
class=”tw-flex tw-h-[150px] tw-max-w-[550px]”>
class=”slides fade tw-text-lg tw-text-justify”>
class=”tw-italic tw-text-gray-600″>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sapiente laudantium id ratione! Fugiat nulla ut, possimus facere sit natus.
class=”tw-mt-2 tw-text-yellow-400″>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”tw-mt-3″>- Sandra Brooks
class=”slides fade tw-text-lg tw-text-justify”>
class=”tw-italic tw-text-gray-600 “>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium tempora reprehenderit illo accusamus minus sunt.
class=”tw-mt-2 tw-text-yellow-400″>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”tw-mt-3″>- Joshua Simmons
class=”slides fade tw-text-lg tw-text-justify”>
class=”tw-italic tw-text-gray-600 “>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate quaerat quia aut eveniet ipsa quae consectetur placeat debitis doloribus animi.
class=”tw-mt-2 tw-text-yellow-400″>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”bi bi-star-fill”>
class=”tw-mt-3″>- Roger Neely
class=”dots-container tw-mt-auto”>
class=”dot”>
class=”dot”>
class=”dot”>
class=”tw-mt-[5%] tw-flex tw-flex-col tw-w-full tw-place-items-center tw-place-content-center tw-gap-5″>
class=”tw-text-3xl primary-text-color”>On the map
src=”https://www.google.com/maps/embed?”
class=”tw-w-[600px]
tw-h-[350px]
max-md:tw-w-full
”
style=”border:0;” allowfullscreen=”” loading=”lazy”
referrerpolicy=”no-referrer-when-downgrade”>
class=”tw-w-full tw-flex
tw-flex-col
tw-place-content-center
tw-px-[10%]
tw-p-[5%]
tw-gap-[10%]
tw-place-items-center
tw-bg-[#EFEFEF]
“>
class=”tw-w-full tw-place-content-center
tw-flex tw-flex-col tw-gap-3
tw-place-items-center tw-mt-[5%]
“>
class=”tw-text-3xl max-md:tw-text-xl primary-text-color”>Like us?
class=”tw-text-xl max-md:tw-text-lg”>Tell us more
class=”tw-flex”>
class=”stars” data-rating=”0″>
class=”star” data-value=”1″>★
class=”star” data-value=”2″>★
class=”star” data-value=”3″>★
class=”star” data-value=”4″>★
class=”star” data-value=”5″>★
class=”tw-fixed
tw-top-[50%] tw-translate-y-[-50%]
tw-left-[50%] tw-translate-x-[-50%]
tw-w-[450px] tw-max-h-[450px]
max-md:tw-w-[350px]
tw-z-40
tw-p-3
tw-hidden
tw-flex
tw-flex-col
tw-rounded-md
tw-shadow-2xl
tw-bg-white”
id=”modal”
>
class=”tw-w-full tw-relative tw-h-[40px]”>
class=”tw-text-4xl
bi bi-x
tw-absolute
tw-right-2
”
id=”modal-close”
>
class=”tw-text-2xl tw-text-center tw-mt-[5%]”
id=”modal-title”>
class=”tw-text-base tw-font-normal tw-mt-2″
id=”modal-description”>
id=”modal-input”
placeholder=”write…”
maxlength=”2000″
class=”input tw-w-full
tw-hidden
tw-mt-2
tw-resize-y
tw-text-base
tw-font-normal
tw-min-h-[50px]
tw-max-h-[150px]”>
class=”tw-flex max-md:tw-flex-col tw-w-full tw-p-[5%]
tw-px-[10%] tw-place-content-around tw-gap-3
tw-bg-primary
tw-text-white
“>
class=”tw-h-full tw-w-[250px] tw-flex tw-flex-col
tw-gap-6 tw-place-items-center max-md:tw-w-full”>
src=”./assets/logo.png”
alt=”logo” class=”tw-w-[150px]”>
12111 Cypress,
TX,
United States
class=”tw-mt-3 tw-font-semibold tw-text-lg”>
Follow us
class=”tw-h-full tw-w-[250px] tw-flex tw-flex-col
tw-gap-4″>
class=”tw-text-3xl max-md:tw-text-xl”>
Services
class=”tw-h-full tw-w-[250px] tw-flex tw-flex-col
tw-gap-4″>
class=”tw-text-3xl max-md:tw-text-xl”>
Resources
src=]]>”./scripts/utils.js”>
src=]]>”index.js”>
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
:root{
–btn-color: #fdfdfd;/* button color*/
–btn-bg: #00006f;/* button bg color*/
–header-link-hover: #00006f;
–primary-text-color: #00006f;
/* –link-hover: #4f55c1; */
–input-hover-bd-color: #00006f;
}
html {
scroll-behavior: smooth;
}
header{
background-color: white;
}
header > .collapsable-header{
display: flex;
gap: 1rem;
width: 100%;
background-color: white;
place-content: center;
overflow: hidden;
/* transition: width 0.3s ease; */
}
.animated-collapse{
transition: width 0.3s ease;
}
.header-links {
display: flex;
align-items: center;
min-width: fit-content;
border-radius: 25px;
padding: 8px 15px;
transition: background-color 0.3s, color 0.3s;
}
.header-links:hover {
background-color: var(–header-link-hover);
color: #fff;
}
.black-text{
color: #000;
}
.white-text{
color: #fff;
}
.primary-text-color{
color: var(–primary-text-color);
}
.opacity-0{
opacity: 0 !important;
}
.opacity-100{
opacity: 100 !important;
}
.btn{
padding: 10px 15px;
width: max-content;
border-radius: 25px;
color: var(–btn-color);
background-color: var(–btn-bg);
justify-content: center;
align-items: center;
display: flex;
gap: 10px;
}
.btn:hover{
}
.input{
padding: 10px;
border-radius: 10px;
outline: none;
min-width: 100px;
border: 2px solid #cecece;
transition: border 0.3s;
}
.input:active, .input:focus, .input:focus-within{
border: 2px solid var(–input-hover-bd-color);
}
.slides {
display: none;
position: relative;
height: 100%;
}
/* Slideshow container */
.slideshow-container {
width: 100%;
position: relative;
margin: auto;
overflow: hidden;
height: 100%;
}
.slideshow-container img {
vertical-align: middle;
height: 100%;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
z-index: 10;
}
/* Position the “next button” to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.slideshow-container .text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Navigation dots styling */
.dots-container {
text-align: center;
margin-top: 20px;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dots-container .active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
.footer-link{
color: #fff;
transition: color 0.3s;
}
.footer-link:hover{
color: #0fe857;
}
.review-container {
position: relative;
max-width: 600px;
margin: auto;
}
.review-slide {
display: none;
padding: 20px;
text-align: center;
}
.fade {
animation: fadeEffect 1s ease-in-out;
}
@keyframes fadeEffect {
from { opacity: 0; }
to { opacity: 1; }
}
.stars {
display: inline-block;
font-size: 40px;
cursor: pointer;
}
.stars .star {
color: #ccc;
transition: color 0.2s;
}
.stars .star:hover,
.stars .star.active {
color: gold;
}
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px;
}
}
@media not all and (min-width: 768px) {
header .collapsable-header {
position: absolute;
right: 0px;
flex-direction: column;
justify-content: space-between;
opacity: 0;
height: 100vh;
width: 0vw;
padding: 5px;
padding-top: 5%;
padding-bottom: 5%;
place-items: end;
background-color: #00006f;
color: white;
}
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
سلام به همه،
من این صفحه فرود کارواش ساده را ایجاد کردم.
امکانات
- پاسخگو
- Tailwind css، برای توسعه سریع.
سایت زنده
شما می توانید سایت زنده را در اینجا مشاهده کنید: صفحه فرود کارواش
اسکرین شات
دنبال کردن
توییتر
github
کد منبع
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
class="tw-text-3xl primary-text-color tw-font-semibold">Supreme car wash
class="tw-flex tw-gap-4">
class="tw-w-[50px] tw-h-[50px]
tw-flex tw-place-items-center
tw-place-content-center
tw-rounded-full tw-bg-secondary
tw-text-white
tw-p-3
">
class="bi bi-clock tw-text-3xl
tw-font-bold">
class="tw-text-xl tw-text-primary
tw-font-semibold">Opening hours
class="tw-text-gray-600">Mon-Fri, 8:00 - 9:00
class="tw-flex tw-gap-4">
class="tw-w-[50px] tw-h-[50px]
tw-flex tw-place-items-center
tw-place-content-center
tw-rounded-full tw-bg-secondary
tw-text-white
tw-p-3
">
class="bi bi-telephone tw-text-3xl
tw-font-bold">
class="tw-text-xl tw-text-primary
tw-font-semibold">Call us
class="tw-text-gray-600">+1 222-222-222
class="tw-flex tw-gap-4">
class="tw-w-[50px] tw-h-[50px]
tw-flex tw-place-items-center
tw-place-content-center
tw-rounded-full
tw-bg-secondary
tw-text-white
tw-p-3
">
class="bi bi-envelope tw-text-3xl
tw-font-bold">
class="tw-text-xl tw-text-primary
tw-font-semibold">Email us
class="tw-text-gray-600">supreme@example.com
class="tw-flex tw-w-full tw-z-20
tw-h-[60px]
md:tw-justify-around
tw-sticky tw-top-0 tw-px-[10%]
tw-bg-white
max-md:tw-bg-primary
max-md:tw-mr-auto
tw-shadow-lg
">
class="tw-flex tw-w-fit">
class="tw-w-[50px] tw-p-1">
![]()
src="./assets/logo.png"
alt="supreme-car-wash logo" class="tw-object-contain">
class="collapsable-header animated-collapse"
id="collapsed-items"
>
class="tw-w-full tw-h-[650px] max-md:tw-h-[300px] tw-max-w-[100vw]
tw-flex tw-flex-col tw-overflow-hidden">
class="slideshow-container tw-h-full
tw-w-full tw-flex tw-flex-col">
class="tw-relative tw-w-full tw-h-[650px] max-md:tw-h-full tw-overflow-clip">
class="slides fade">
class="numbertext">1 / 3
![]()
src="./assets/images/slideshow/car-wash.jpg"
alt="Delux car wash"
class="tw-object-cover tw-w-full tw-h-full">
class="text">Supreme car wash
class="slides fade">
class="numbertext">2 / 3
![]()
src="./assets/images/slideshow/interior.jpg"
alt="Car wash"
class="tw-object-cover tw-w-full tw-h-full">
class="text">Interior car wash
class="slides fade">
class="numbertext">3 / 3
![]()
src="./assets/images/slideshow/sponge-car-wash.jpg"
alt="supreme car wash"
class="tw-object-cover tw-w-full tw-h-full">
class="text">Best car wash
class="prev">❮
class="next">❯
class="dots-container tw-z-10">
class="dot">
class="dot">
class="dot">
class="tw-w-full tw-flex
tw-flex-col
tw-place-content-center
tw-min-h-[60vh]
tw-px-[20%]
max-md:tw-px-[5%]
tw-p-4
tw-gap-[10%]
max-md:tw-gap-[4%]
tw-place-items-center
tw-bg-[#fff]
">
class="tw-flex max-md:tw-flex-col tw-gap-[10%] tw-mt-[5%]
max-md:tw-place-items-center
max-md:tw-gap-[4%] tw-w-full tw-place-content-center">
class="tw-w-[400px] tw-h-[350px]
max-md:tw-w-[300px] max-md:tw-h-[300px]
tw-flex tw-overflow-hidden
max-md:tw-mt-[5%]
">
![]()
src="./assets/images/homepage/garage.jpg"
alt="engine" class="tw-w-full tw-object-cover">
class="tw-w-full tw-flex
tw-flex-col
tw-min-h-[60vh]
max-md:tw-min-h-[unset]
max-md:tw-h-max
tw-px-[20%]
max-md:tw-px-[5%]
tw-p-8
tw-gap-[10%]
max-md:tw-gap-[4%]
tw-place-items-center
tw-bg-[#EFEFEF]
">
class="tw-text-2xl max-md:tw-text-lg tw-text-secondary">Our services
class="tw-text-5xl max-md:tw-text-3xl tw-text-primary tw-text-center">Premium washing service
class="tw-w-full tw-mt-[5%] tw-flex
tw-gap-[10%]
tw-justify-around
max-md:tw-mt-8
tw-place-content-center">
class="tw-flex tw-flex-col tw-gap-4
tw-place-content-center
tw-place-items-center
tw-text-center
tw-w-[200px] tw-h-[350px]
max-md:tw-w-[150px] max-md:tw-h-[150px]
">
class="tw-w-full tw-h-[150px] max-md:tw-h-[100px]">
![]()
src="./assets/images/icons/car-wash.svg"
alt="car wash" class="tw-h-full tw-w-full tw-object-contain">
class="tw-text-2xl max-md:tw-text-lg primary-text-color">
Exterior washing
class="tw-flex tw-flex-col tw-gap-4
tw-place-content-center
tw-place-items-center
tw-text-center
tw-w-[200px] tw-h-[350px]
max-md:tw-w-[150px] max-md:tw-h-[150px]
">
class="tw-w-full tw-h-[150px] max-md:tw-h-[100px]">
![]()
src="./assets/images/icons/seat-cleaning.svg"
alt="car wash" class="tw-h-full tw-w-full tw-object-contain">
class="tw-text-2xl max-md:tw-text-lg primary-text-color">
Seat cleaning
class="tw-flex tw-flex-col tw-gap-4
tw-place-content-center
tw-place-items-center
tw-text-center
tw-w-[200px] tw-h-[350px]
max-md:tw-w-[150px] max-md:tw-h-[150px]
">
class="tw-w-full tw-h-[100px]">
![]()
src="./assets/images/icons/vaccuming.svg"
alt="car wash" class="tw-h-full tw-w-full tw-object-contain">
class="tw-text-2xl max-md:tw-text-lg primary-text-color">
Vacuuming
class="tw-w-full tw-flex tw-flex-col
tw-place-content-center
max-md:tw-px-[5%]
tw-p-[5%]
tw-place-items-center
tw-bg-[#fff]
">
class="tw-text-2xl tw-font-semibold tw-text-secondary">Washing plans
class="tw-text-4xl tw-font-semibold primary-text-color ">Choose your plan
class="tw-w-full tw-flex
max-md:tw-flex-col tw-place-items-center
tw-mt-[5%] tw-gap-4 tw-place-content-center">
class="tw-flex tw-flex-col
tw-w-[350px] tw-h-[400px]
tw-bg-white
tw-p-4
tw-place-items-center
tw-gap-3
tw-rounded-lg
">
class="tw-text-3xl primary-text-color">Basic cleaning
class="tw-text-5xl tw-font-semibold tw-text-blue-950">$14
class="tw-flex tw-mt-2 tw-flex-col tw-gap-2
tw-text-lg">
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Seat Washing
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Vacuum Cleaning
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Exterior Cleaning
- class="tw-flex tw-gap-2">
class="bi bi-x-circle">
Interior Wet Cleaning
- class="tw-flex tw-gap-2">
class="bi bi-x-circle">
Window Wiping
href="" class="tw-p-2 btn tw-mt-auto
hover:tw-scale-[1.02]
tw-duration-[0.3s]
tw-transition-transform
">
Book now
class="tw-flex tw-flex-col
tw-w-[350px] tw-h-[400px]
tw-bg-white
tw-p-4
tw-shadow-2xl
tw-border-2
tw-place-items-center
tw-gap-3
tw-rounded-lg
">
class="tw-text-3xl primary-text-color">Executive cleaning
class="tw-text-5xl tw-font-semibold">$25
class="tw-flex tw-mt-2 tw-flex-col tw-gap-2
tw-text-lg">
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Seat Washing
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Vacuum Cleaning
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Exterior Cleaning
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Interior Wet Cleaning
- class="tw-flex tw-gap-2">
class="bi bi-x-circle">
Window Wiping
href="" class="tw-p-2 btn tw-mt-auto
hover:tw-scale-[1.02]
tw-duration-[0.3s]
tw-transition-transform
">
Book now
class="tw-flex tw-flex-col
tw-w-[350px] tw-h-[400px]
tw-bg-white
tw-p-4
tw-place-items-center
tw-gap-3
tw-rounded-lg
">
class="tw-text-3xl primary-text-color">Presidential cleaning
class="tw-text-5xl tw-font-semibold tw-text-blue-950">$35
class="tw-flex tw-mt-2 tw-flex-col tw-gap-2
tw-text-lg">
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Seat Washing
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Vacuum Cleaning
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Exterior Cleaning
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Interior Wet Cleaning
- class="tw-flex tw-gap-2">
class="bi bi-check-circle tw-text-green-500">
Window Wiping
href="" class="tw-p-2 btn tw-mt-auto
hover:tw-scale-[1.02]
tw-duration-[0.3s]
tw-transition-transform">
Book now
class="tw-w-full tw-flex
tw-place-content-center
tw-px-[10%]
tw-p-4
tw-gap-[10%]
tw-place-items-center
tw-bg-[#EFEFEF]
max-md:tw-flex-col
tw-overflow-hidden
"
id="booking"
>
class="tw-w-[350px] tw-h-[350px] tw-rounded-md tw-flex
max-md:tw-hidden
tw-overflow-hidden">
![]()
src="./assets/images/homepage/car-washing.jpg"
alt="car wash" class="tw-w-full tw-object-cover">
class="tw-flex tw-flex-col tw-gap-[5%] tw-h-full tw-mt-[5%]">
class="tw-flex tw-flex-col tw-gap-2">
class="tw-text-5xl max-md:tw-text-3xl primary-text-color tw-font-medium">Request car wash
class="tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-center">
class="tw-text-xl">To book call
class="tw-text-3xl primary-text-color">
+1 832-604-7679
class="tw-mt-5 tw-w-full tw-flex tw-flex-col tw-p-[5%]
tw-place-items-center">
class="tw-text-3xl max-md:tw-text-2xl primary-text-color tw-font-medium">
What some of our clients say
class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-gap-[5%]">
class="review-container tw-flex tw-flex-col">
class="tw-flex tw-h-[150px] tw-max-w-[550px]">
class="slides fade tw-text-lg tw-text-justify">
class="tw-italic tw-text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sapiente laudantium id ratione! Fugiat nulla ut, possimus facere sit natus.
class="tw-mt-2 tw-text-yellow-400">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="tw-mt-3">- Sandra Brooks
class="slides fade tw-text-lg tw-text-justify">
class="tw-italic tw-text-gray-600 ">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium tempora reprehenderit illo accusamus minus sunt.
class="tw-mt-2 tw-text-yellow-400">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="tw-mt-3">- Joshua Simmons
class="slides fade tw-text-lg tw-text-justify">
class="tw-italic tw-text-gray-600 ">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate quaerat quia aut eveniet ipsa quae consectetur placeat debitis doloribus animi.
class="tw-mt-2 tw-text-yellow-400">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="bi bi-star-fill">
class="tw-mt-3">- Roger Neely
class="dots-container tw-mt-auto">
class="dot">
class="dot">
class="dot">
class="tw-mt-[5%] tw-flex tw-flex-col tw-w-full tw-place-items-center tw-place-content-center tw-gap-5">
class="tw-text-3xl primary-text-color">On the map
class="tw-w-full tw-flex
tw-flex-col
tw-place-content-center
tw-px-[10%]
tw-p-[5%]
tw-gap-[10%]
tw-place-items-center
tw-bg-[#EFEFEF]
">
class="tw-w-full tw-place-content-center
tw-flex tw-flex-col tw-gap-3
tw-place-items-center tw-mt-[5%]
">
class="tw-text-3xl max-md:tw-text-xl primary-text-color">Like us?
class="tw-text-xl max-md:tw-text-lg">Tell us more
class="tw-flex">
class="stars" data-rating="0">
class="star" data-value="1">★
class="star" data-value="2">★
class="star" data-value="3">★
class="star" data-value="4">★
class="star" data-value="5">★
class="tw-fixed
tw-top-[50%] tw-translate-y-[-50%]
tw-left-[50%] tw-translate-x-[-50%]
tw-w-[450px] tw-max-h-[450px]
max-md:tw-w-[350px]
tw-z-40
tw-p-3
tw-hidden
tw-flex
tw-flex-col
tw-rounded-md
tw-shadow-2xl
tw-bg-white"
id="modal"
>
class="tw-w-full tw-relative tw-h-[40px]">
class="tw-text-2xl tw-text-center tw-mt-[5%]"
id="modal-title">
class="tw-text-base tw-font-normal tw-mt-2"
id="modal-description">
"./scripts/utils.js">
"index.js">
:root{
--btn-color: #fdfdfd;/* button color*/
--btn-bg: #00006f;/* button bg color*/
--header-link-hover: #00006f;
--primary-text-color: #00006f;
/* --link-hover: #4f55c1; */
--input-hover-bd-color: #00006f;
}
html {
scroll-behavior: smooth;
}
header{
background-color: white;
}
header > .collapsable-header{
display: flex;
gap: 1rem;
width: 100%;
background-color: white;
place-content: center;
overflow: hidden;
/* transition: width 0.3s ease; */
}
.animated-collapse{
transition: width 0.3s ease;
}
.header-links {
display: flex;
align-items: center;
min-width: fit-content;
border-radius: 25px;
padding: 8px 15px;
transition: background-color 0.3s, color 0.3s;
}
.header-links:hover {
background-color: var(--header-link-hover);
color: #fff;
}
.black-text{
color: #000;
}
.white-text{
color: #fff;
}
.primary-text-color{
color: var(--primary-text-color);
}
.opacity-0{
opacity: 0 !important;
}
.opacity-100{
opacity: 100 !important;
}
.btn{
padding: 10px 15px;
width: max-content;
border-radius: 25px;
color: var(--btn-color);
background-color: var(--btn-bg);
justify-content: center;
align-items: center;
display: flex;
gap: 10px;
}
.btn:hover{
}
.input{
padding: 10px;
border-radius: 10px;
outline: none;
min-width: 100px;
border: 2px solid #cecece;
transition: border 0.3s;
}
.input:active, .input:focus, .input:focus-within{
border: 2px solid var(--input-hover-bd-color);
}
.slides {
display: none;
position: relative;
height: 100%;
}
/* Slideshow container */
.slideshow-container {
width: 100%;
position: relative;
margin: auto;
overflow: hidden;
height: 100%;
}
.slideshow-container img {
vertical-align: middle;
height: 100%;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
z-index: 10;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.slideshow-container .text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Navigation dots styling */
.dots-container {
text-align: center;
margin-top: 20px;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dots-container .active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
.footer-link{
color: #fff;
transition: color 0.3s;
}
.footer-link:hover{
color: #0fe857;
}
.review-container {
position: relative;
max-width: 600px;
margin: auto;
}
.review-slide {
display: none;
padding: 20px;
text-align: center;
}
.fade {
animation: fadeEffect 1s ease-in-out;
}
@keyframes fadeEffect {
from { opacity: 0; }
to { opacity: 1; }
}
.stars {
display: inline-block;
font-size: 40px;
cursor: pointer;
}
.stars .star {
color: #ccc;
transition: color 0.2s;
}
.stars .star:hover,
.stars .star.active {
color: gold;
}
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px;
}
}
@media not all and (min-width: 768px) {
header .collapsable-header {
position: absolute;
right: 0px;
flex-direction: column;
justify-content: space-between;
opacity: 0;
height: 100vh;
width: 0vw;
padding: 5px;
padding-top: 5%;
padding-bottom: 5%;
place-items: end;
background-color: #00006f;
color: white;
}
}
