Spaces:
Running
Running
Upload 16 files
Browse files- .gitattributes +7 -0
- home.html +253 -0
- images/IntelliChat.png +3 -0
- images/book.jpg +0 -0
- images/expressoblackCoffee.jfif +0 -0
- images/instant3.jpg +0 -0
- images/leader.png +3 -0
- images/mochaFrappuccino.jfif +3 -0
- images/review-1.jpg +3 -0
- images/review-2.jpg +3 -0
- images/review-3.jpg +0 -0
- images/ser-1.png +3 -0
- images/ser-2.png +3 -0
- images/ser-3.png +0 -0
- images/ser-4.png +0 -0
- script.js +154 -0
- style.css +810 -152
.gitattributes
CHANGED
|
@@ -34,3 +34,10 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
|
|
| 34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
| 35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
| 36 |
bg.png filter=lfs diff=lfs merge=lfs -text
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
| 35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
| 36 |
bg.png filter=lfs diff=lfs merge=lfs -text
|
| 37 |
+
images/IntelliChat.png filter=lfs diff=lfs merge=lfs -text
|
| 38 |
+
images/leader.png filter=lfs diff=lfs merge=lfs -text
|
| 39 |
+
images/mochaFrappuccino.jfif filter=lfs diff=lfs merge=lfs -text
|
| 40 |
+
images/review-1.jpg filter=lfs diff=lfs merge=lfs -text
|
| 41 |
+
images/review-2.jpg filter=lfs diff=lfs merge=lfs -text
|
| 42 |
+
images/ser-1.png filter=lfs diff=lfs merge=lfs -text
|
| 43 |
+
images/ser-2.png filter=lfs diff=lfs merge=lfs -text
|
home.html
ADDED
|
@@ -0,0 +1,253 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>IntelliChat</title>
|
| 7 |
+
<!--Link to css-->
|
| 8 |
+
<link rel="stylesheet" href="style.css" type="text/css " />
|
| 9 |
+
<!-- Box Icon-->
|
| 10 |
+
<link
|
| 11 |
+
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
|
| 12 |
+
rel="stylesheet"
|
| 13 |
+
/>
|
| 14 |
+
</head>
|
| 15 |
+
|
| 16 |
+
<body>
|
| 17 |
+
<!--Header-->
|
| 18 |
+
<header>
|
| 19 |
+
<!--Logo-->
|
| 20 |
+
<div class="header-container">
|
| 21 |
+
<a href="#" class="logo">IntelliChat</a>
|
| 22 |
+
<nav>
|
| 23 |
+
<!--Navbar-->
|
| 24 |
+
<div class="navbar">
|
| 25 |
+
<a href="" class="nav-link">Home</a>
|
| 26 |
+
<a href="#services" class="nav-link">Services</a>
|
| 27 |
+
<a href="#products" class="nav-link">Products</a>
|
| 28 |
+
<a href="#team" class="nav-link">Team</a>
|
| 29 |
+
<a href="#reviews" class="nav-link">Reviews</a>
|
| 30 |
+
</div>
|
| 31 |
+
<!--Menu Icon-->
|
| 32 |
+
<div class="menu-icon">
|
| 33 |
+
<div class="line1"></div>
|
| 34 |
+
<div class="line2"></div>
|
| 35 |
+
<div class="line3"></div>
|
| 36 |
+
</div>
|
| 37 |
+
</nav>
|
| 38 |
+
</div>
|
| 39 |
+
</header>
|
| 40 |
+
|
| 41 |
+
<!--Home-->
|
| 42 |
+
<section class="container" id="home">
|
| 43 |
+
<div class="home">
|
| 44 |
+
<div class="home-text">
|
| 45 |
+
<h1>
|
| 46 |
+
IntelliChat<br />
|
| 47 |
+
<!-- pháp luật Việt Nam -->
|
| 48 |
+
</h1>
|
| 49 |
+
<p>
|
| 50 |
+
Your Intelligent, Trusted, and Free AI Assistant for Vietnamese Legal Documents. Experience the power of true intelligence: secure, reliable, and tailored to help you understand Vietnam’s legal system with ease — anytime, anywhere, at no cost.
|
| 51 |
+
</p>
|
| 52 |
+
<a href="https://preview-vibidlqa.hf.space/" class="btn" target="_blank">
|
| 53 |
+
<span>Get Started</span>
|
| 54 |
+
<i class="bx bx-up-arrow-alt"></i>
|
| 55 |
+
</a>
|
| 56 |
+
</div>
|
| 57 |
+
<!--Home Image-->
|
| 58 |
+
<img src="images/IntelliChat.png" alt="" class="home-img" />
|
| 59 |
+
</div>
|
| 60 |
+
</section>
|
| 61 |
+
<!--Services-->
|
| 62 |
+
<section class="services container" id="services">
|
| 63 |
+
<!--Heading-->
|
| 64 |
+
<div class="heading">
|
| 65 |
+
<h2>
|
| 66 |
+
Legal Clarity, Powered by Intelligence, </br>Trust, and Security — Always Free
|
| 67 |
+
</h2>
|
| 68 |
+
</div>
|
| 69 |
+
<div class="service-content">
|
| 70 |
+
<a href="">
|
| 71 |
+
<div class="ser-box">
|
| 72 |
+
<img src="images/ser-1.png" />
|
| 73 |
+
<p>Intelligent</p>
|
| 74 |
+
</div>
|
| 75 |
+
</a>
|
| 76 |
+
<div class="ser-box">
|
| 77 |
+
<a href=""><img src="images/ser-3.png" /></a>
|
| 78 |
+
<p>Trustworthy</p>
|
| 79 |
+
</div>
|
| 80 |
+
<div class="ser-box">
|
| 81 |
+
<!--Click to Products.html-->
|
| 82 |
+
<img src="images/ser-4.png" />
|
| 83 |
+
<p>Responsible</p>
|
| 84 |
+
</div>
|
| 85 |
+
<a href="">
|
| 86 |
+
<div class="ser-box">
|
| 87 |
+
<!--Click to Products.html and section bean-->
|
| 88 |
+
<img src="images/ser-2.png" />
|
| 89 |
+
<p>Complimentary</p>
|
| 90 |
+
</div>
|
| 91 |
+
</a>
|
| 92 |
+
</div>
|
| 93 |
+
</section>
|
| 94 |
+
<!--Products-->
|
| 95 |
+
<section class="products container" id="products">
|
| 96 |
+
<!--Heading-->
|
| 97 |
+
<div class="heading">
|
| 98 |
+
<h2>IntelliChat - AI Assistant for Vietnamese Legal Documents</h2>
|
| 99 |
+
<p>
|
| 100 |
+
IntelliChat is a cutting-edge AI system specifically trained to answer questions related to Vietnamese law, making legal knowledge accessible to every Vietnamese citizen. Available on both <strong>Website</strong> and <strong>Facebook Messenger</strong> platforms to maximize user reach and convenience.<br><br>
|
| 101 |
+
</p>
|
| 102 |
+
<iframe src="https://www.youtube.com/embed/4I6hgL-y1kk" title="IntelliChat - Trợ lý AI văn bản pháp luật Việt Nam" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
| 103 |
+
<p>
|
| 104 |
+
Built on a sophisticated multi-layered architecture leveraging state-of-the-art AI technologies, IntelliChat prioritizes accuracy by grounding all responses in official Vietnamese legal documents. Every answer comes with <strong>reference sources</strong> and supporting documentation, enabling users to independently verify and cross-check the information provided.<br><br>
|
| 105 |
+
Our system is designed with comprehensive safety measures, ensuring polite and professional responses while refusing to engage with harmful content. IntelliChat features specialized legal AI trained exclusively on Vietnamese law, source-based responses with reference documentation, safety-centered design with responsible AI principles - all <strong>completely free</strong> for all Vietnamese citizens.<br><br>
|
| 106 |
+
<em>Democratizing legal intelligence and empowering every Vietnamese citizen with instant, reliable access to legal guidance - bridging the gap between complex legal language and everyday understanding.</em>
|
| 107 |
+
</p>
|
| 108 |
+
</div>
|
| 109 |
+
<!--Products Context-->
|
| 110 |
+
|
| 111 |
+
</section>
|
| 112 |
+
<!--Team-->
|
| 113 |
+
<section class="team container" id="team">
|
| 114 |
+
<div class="heading">
|
| 115 |
+
<h2>Meet the Innovator Behind the Vision</h2>
|
| 116 |
+
</div>
|
| 117 |
+
<!--Team Content-->
|
| 118 |
+
<div class="team-content">
|
| 119 |
+
|
| 120 |
+
</div>
|
| 121 |
+
<div class="team-box">
|
| 122 |
+
<p>
|
| 123 |
+
Meet Truong-Phuc Nguyen, a visionary final-year Computer Science student at Hung Yen University of Technology and Education, who is transforming the intersection of artificial intelligence and legal accessibility in Vietnam.<br><br>
|
| 124 |
+
</p>
|
| 125 |
+
<img src="images/leader.png" alt="" />
|
| 126 |
+
<h2>Truong-Phuc Nguyen</h2>
|
| 127 |
+
<span>Senior Computer Science Student</span>
|
| 128 |
+
<p>
|
| 129 |
+
Specializing in Natural Language Processing with expertise spanning Question-Answering systems, Information Retrieval, Text Generation, and cutting-edge Large Language Models, Truong-Phuc has already made remarkable contributions to the scientific community. His research portfolio includes publications at prestigious international conferences such as KSE2024 and SoICT2024, with additional works published in academic journals and submitted to renowned venues like EAAI and ACM-TALLIP.<br><br>
|
| 130 |
+
But beyond academic achievements lies a deeper purpose. Truong-Phuc envisions a Vietnam where legal knowledge is accessible to every citizen, regardless of their background or resources. Through <strong>IntelliChat</strong> - his groundbreaking free AI assistant specifically designed for Vietnamese legal documents - he's democratizing legal intelligence and empowering communities nationwide.<br><br>
|
| 131 |
+
His ultimate mission extends far beyond individual success: to elevate Vietnam's presence on the global scientific map through meaningful research contributions that serve the Vietnamese people. Truong-Phuc represents the next generation of innovators who blend technical excellence with social impact, proving that technology's greatest power lies in its ability to serve humanity.
|
| 132 |
+
</p>
|
| 133 |
+
</div>
|
| 134 |
+
|
| 135 |
+
</div>
|
| 136 |
+
</section>
|
| 137 |
+
<!--Reviews-->
|
| 138 |
+
<section class="review container" id="reviews">
|
| 139 |
+
<div class="heading">
|
| 140 |
+
<h2>Discover How IntelliChat Transforms Legal Access</h2>
|
| 141 |
+
</div>
|
| 142 |
+
<!--Swiper-->
|
| 143 |
+
<div class="swiper mySwiper">
|
| 144 |
+
<div class="swiper-wrapper">
|
| 145 |
+
<!--Slide 1-->
|
| 146 |
+
<div class="swiper-slide">
|
| 147 |
+
<div class="review-box">
|
| 148 |
+
<img src="images/review-1.jpg" alt="" />
|
| 149 |
+
<h2>Minh-Anh Nguyen</h2>
|
| 150 |
+
<span>
|
| 151 |
+
Legal clarity at my fingertips.
|
| 152 |
+
</span>
|
| 153 |
+
<p>
|
| 154 |
+
As a small business owner, I used to struggle with understanding complex labor law regulations. IntelliChat provided instant, accurate answers with clear references to legal documents. It's like having a legal consultant available 24/7, completely free!
|
| 155 |
+
</p>
|
| 156 |
+
</div>
|
| 157 |
+
</div>
|
| 158 |
+
<!--Slide 2-->
|
| 159 |
+
<div class="swiper-slide">
|
| 160 |
+
<div class="review-box">
|
| 161 |
+
<img src="images/review-2.jpg" alt="" />
|
| 162 |
+
<h2>Duc-Thanh Pham</h2>
|
| 163 |
+
<span>
|
| 164 |
+
Empowering legal knowledge for everyone.
|
| 165 |
+
</span>
|
| 166 |
+
<p>
|
| 167 |
+
IntelliChat helped me understand my rental rights when dealing with a difficult landlord. The AI explained complex legal terms in simple Vietnamese, and provided exact law references I could use. This tool is revolutionizing how Vietnamese citizens access legal information.
|
| 168 |
+
</p>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
<!--Slide 3-->
|
| 172 |
+
<div class="swiper-slide">
|
| 173 |
+
<div class="review-box">
|
| 174 |
+
<img src="images/review-3.jpg" alt="" />
|
| 175 |
+
<h2>Lan-Huong Dang</h2>
|
| 176 |
+
<span>
|
| 177 |
+
Reliable legal guidance when I needed it most.
|
| 178 |
+
</span>
|
| 179 |
+
<p>
|
| 180 |
+
During my divorce proceedings, IntelliChat helped me understand family law procedures and my legal rights. The responses were professional, accurate, and backed by official legal documents. It gave me confidence to navigate a difficult situation.
|
| 181 |
+
</p>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
<div class="swiper-pagination"></div>
|
| 186 |
+
</div>
|
| 187 |
+
</section>
|
| 188 |
+
<!--Book-->
|
| 189 |
+
<section class="book container" id="book">
|
| 190 |
+
<img src="images/book.jpg" alt="" class="book-img" />
|
| 191 |
+
<div class="book-overlay"></div>
|
| 192 |
+
<div class="book-data">
|
| 193 |
+
<h2>
|
| 194 |
+
Join Our Mission to Scale </br>Legal Intelligence Across Vietnam
|
| 195 |
+
</h2>
|
| 196 |
+
<form action="book">
|
| 197 |
+
<div class="input-book">
|
| 198 |
+
<i class="bx bx-phone-call"></i>
|
| 199 |
+
<input
|
| 200 |
+
type="text"
|
| 201 |
+
name=""
|
| 202 |
+
placeholder="Your Phone Number"
|
| 203 |
+
id="booknumber"
|
| 204 |
+
/>
|
| 205 |
+
</div>
|
| 206 |
+
<div class="input-book">
|
| 207 |
+
<i class="bx bx-user"></i>
|
| 208 |
+
<input type="text" name="" placeholder="Your Full Name" id="bookname" />
|
| 209 |
+
</div>
|
| 210 |
+
<a href="" class="book-btn" onclick="CheckBook()">Request Partnership</a>
|
| 211 |
+
</form>
|
| 212 |
+
<p>We’ll be in touch to explore how we can bring legal clarity to more communities together.</p>
|
| 213 |
+
</div>
|
| 214 |
+
</section>
|
| 215 |
+
<!--Footer-->
|
| 216 |
+
<section class="footer container">
|
| 217 |
+
<div class="footer-box">
|
| 218 |
+
<a href="#" class="logo">IntelliChat</a>
|
| 219 |
+
<div class="social">
|
| 220 |
+
<a href="#"><i class="bx bxl-twitch"></i></a>
|
| 221 |
+
<a href="#"><i class="bx bxl-twitter"></i></a>
|
| 222 |
+
<a href="#"><i class="bx bxl-linkedin"></i></a>
|
| 223 |
+
<a href="#"><i class="bx bxl-youtube"></i></a>
|
| 224 |
+
</div>
|
| 225 |
+
</div>
|
| 226 |
+
<div class="footer-box">
|
| 227 |
+
<h3>About</h3>
|
| 228 |
+
<a href="#">Our Story</a>
|
| 229 |
+
<a href="#">FAQ</a>
|
| 230 |
+
<a href="#">Our Mission</a>
|
| 231 |
+
</div>
|
| 232 |
+
<div class="footer-box">
|
| 233 |
+
<h3>User Support</h3>
|
| 234 |
+
<a href="#">Documentation</a>
|
| 235 |
+
<a href="#">Tutorials</a>
|
| 236 |
+
<a href="#">Help Center</a>
|
| 237 |
+
</div>
|
| 238 |
+
<div class="footer-box">
|
| 239 |
+
<h3>Contact us</h3>
|
| 240 |
+
<a href="#">Facebook</a>
|
| 241 |
+
<a href="#">Email</a>
|
| 242 |
+
<a href="#">Zalo</a>
|
| 243 |
+
</div>
|
| 244 |
+
</section>
|
| 245 |
+
<!--Copyright-->
|
| 246 |
+
<p class="copyright">© Powered by IntelliChat. All developed by Truong-Phuc Nguyen.</p>
|
| 247 |
+
|
| 248 |
+
</div>
|
| 249 |
+
|
| 250 |
+
<script src="script.js"></script>
|
| 251 |
+
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
| 252 |
+
</body>
|
| 253 |
+
</html>
|
images/IntelliChat.png
ADDED
|
Git LFS Details
|
images/book.jpg
ADDED
|
images/expressoblackCoffee.jfif
ADDED
|
Binary file (47.8 kB). View file
|
|
|
images/instant3.jpg
ADDED
|
images/leader.png
ADDED
|
Git LFS Details
|
images/mochaFrappuccino.jfif
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
version https://git-lfs.github.com/spec/v1
|
| 2 |
+
oid sha256:11b1a1f624f46774e7bc5a9fcd604dad106cfa18cd2a43b6ab8b0e4cc819698f
|
| 3 |
+
size 110822
|
images/review-1.jpg
ADDED
|
Git LFS Details
|
images/review-2.jpg
ADDED
|
Git LFS Details
|
images/review-3.jpg
ADDED
|
images/ser-1.png
ADDED
|
Git LFS Details
|
images/ser-2.png
ADDED
|
Git LFS Details
|
images/ser-3.png
ADDED
|
images/ser-4.png
ADDED
|
script.js
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
let currentIndex = 0,
|
| 2 |
+
menu = document.querySelector(".menu-icon"),
|
| 3 |
+
navbar = document.querySelector(".navbar"),
|
| 4 |
+
bag = document.getElementById("bill"),
|
| 5 |
+
listProductBill = [],
|
| 6 |
+
checkTakeAWay = false;
|
| 7 |
+
|
| 8 |
+
// JavaScript for automatic slide change
|
| 9 |
+
const slides = document.querySelectorAll(".swiper-slide");
|
| 10 |
+
function showSlide1(index) {
|
| 11 |
+
slides.forEach((slide, i) => {
|
| 12 |
+
slide.style.display = i === index ? "block" : "none";
|
| 13 |
+
});
|
| 14 |
+
}
|
| 15 |
+
function nextSlide() {
|
| 16 |
+
currentIndex = (currentIndex + 1) % slides.length;
|
| 17 |
+
showSlide1(currentIndex);
|
| 18 |
+
}
|
| 19 |
+
setInterval(nextSlide, 3000);
|
| 20 |
+
showSlide1(currentIndex);
|
| 21 |
+
|
| 22 |
+
// Menu open and close
|
| 23 |
+
menu.onclick = () => {
|
| 24 |
+
menu.classList.toggle("move");
|
| 25 |
+
navbar.classList.toggle("open-menu");
|
| 26 |
+
};
|
| 27 |
+
|
| 28 |
+
// Close menu
|
| 29 |
+
window.onscroll = () => {
|
| 30 |
+
menu.classList.remove("move");
|
| 31 |
+
navbar.classList.remove("open-menu");
|
| 32 |
+
};
|
| 33 |
+
|
| 34 |
+
// Open Menu Products
|
| 35 |
+
function goToShoppingPage() {
|
| 36 |
+
window.location.href = "Products.html";
|
| 37 |
+
}
|
| 38 |
+
function goToHomePage() {
|
| 39 |
+
window.location.href = "mainCoffee.html";
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
function MenuToTakeAWay() {
|
| 43 |
+
goToShoppingPage();
|
| 44 |
+
checkTakeAWay = true;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
function displayBill() {
|
| 48 |
+
if (bag !== null) {
|
| 49 |
+
if (bag.style.width === "0%") {
|
| 50 |
+
bag.style.width = "20%";
|
| 51 |
+
} else {
|
| 52 |
+
bag.style.width = "0%";
|
| 53 |
+
}
|
| 54 |
+
} else {
|
| 55 |
+
console.error("Element with ID 'bill' not found.");
|
| 56 |
+
}
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
// add products with name, images and price to the cart, display cart in the right
|
| 60 |
+
// Function to handle click on the heart icon
|
| 61 |
+
function handleHeartClick(event) {
|
| 62 |
+
// Navigate up to the parent product-box element
|
| 63 |
+
let productBox = event.target.closest(".product-box");
|
| 64 |
+
|
| 65 |
+
if (productBox !== null) {
|
| 66 |
+
// Get specific information from product-box
|
| 67 |
+
let productName = productBox.querySelector("h2").textContent.trim();
|
| 68 |
+
let priceRange = productBox
|
| 69 |
+
.querySelector(".product-info span")
|
| 70 |
+
.textContent.trim();
|
| 71 |
+
let imageUrl = productBox.querySelector("img").src;
|
| 72 |
+
|
| 73 |
+
let existingProduct = listProductBill.find(
|
| 74 |
+
(product) => product.name === productName
|
| 75 |
+
);
|
| 76 |
+
if (existingProduct) {
|
| 77 |
+
// If product exists, increment the quantity
|
| 78 |
+
existingProduct.quantity++;
|
| 79 |
+
} else {
|
| 80 |
+
// Create an object with the extracted information
|
| 81 |
+
let productInfo = {
|
| 82 |
+
name: productName,
|
| 83 |
+
price: priceRange,
|
| 84 |
+
image: imageUrl,
|
| 85 |
+
quantity: 1,
|
| 86 |
+
};
|
| 87 |
+
|
| 88 |
+
// Push the information to the list
|
| 89 |
+
listProductBill.push(productInfo);
|
| 90 |
+
}
|
| 91 |
+
// Display the list in the console
|
| 92 |
+
console.log(listProductBill);
|
| 93 |
+
} else {
|
| 94 |
+
console.log("Product information not found!");
|
| 95 |
+
}
|
| 96 |
+
renderListProduct();
|
| 97 |
+
}
|
| 98 |
+
// Attach click event listener to all heart icons with class "bx-shopping-bag"
|
| 99 |
+
let heartIcons = document.querySelectorAll(".bx-shopping-bag");
|
| 100 |
+
heartIcons.forEach((icon) => {
|
| 101 |
+
icon.addEventListener("click", handleHeartClick);
|
| 102 |
+
});
|
| 103 |
+
|
| 104 |
+
// Delete products in bill
|
| 105 |
+
function removeProduct(productName) {
|
| 106 |
+
const shouldDelete = window.confirm(
|
| 107 |
+
`Do you want to remove "${productName}" from the list?`
|
| 108 |
+
);
|
| 109 |
+
if (shouldDelete) {
|
| 110 |
+
const indexToRemove = listProductBill.findIndex(
|
| 111 |
+
(product) => product.name === productName
|
| 112 |
+
);
|
| 113 |
+
if (indexToRemove !== -1) {
|
| 114 |
+
listProductBill.splice(indexToRemove, 1);
|
| 115 |
+
renderListProduct();
|
| 116 |
+
} else {
|
| 117 |
+
alert(`Product not found: ${productName}`);
|
| 118 |
+
}
|
| 119 |
+
}
|
| 120 |
+
}
|
| 121 |
+
// Total price and ask customer with cash or credit cards
|
| 122 |
+
function showHiddenTag() {
|
| 123 |
+
var hiddenTag = document.getElementById("hiddenTag");
|
| 124 |
+
document.getElementById("thankyou").style.width = "20%";
|
| 125 |
+
if (checkTakeAWay === true) {
|
| 126 |
+
hiddenTag.innerHTML = `<h1>Thank you so much!</h1>
|
| 127 |
+
<h3>Your items will be there in a few minutes!</h3>
|
| 128 |
+
<h1>$ ${totalBill}</h1>`;
|
| 129 |
+
} else {
|
| 130 |
+
hiddenTag.innerHTML = `<h1>Wish you a good appetite!</h1>
|
| 131 |
+
<h3>Your items will be there in a few minutes!</h3>
|
| 132 |
+
<h1>$ ${totalBill}</h1>`;
|
| 133 |
+
}
|
| 134 |
+
setTimeout(function () {
|
| 135 |
+
document.getElementById("thankyou").style.width = "0%";
|
| 136 |
+
}, 5000);
|
| 137 |
+
displayBill();
|
| 138 |
+
listProductBill = [];
|
| 139 |
+
renderListProduct();
|
| 140 |
+
checkTakeAWay = false;
|
| 141 |
+
}
|
| 142 |
+
|
| 143 |
+
function CheckBook() {
|
| 144 |
+
let number = document.getElementById("booknumber").value;
|
| 145 |
+
let name = document.getElementById("bookname").value;
|
| 146 |
+
|
| 147 |
+
alert(
|
| 148 |
+
`Hi ${name}, We will contact you via this number ${number} as soon as possible!`
|
| 149 |
+
);
|
| 150 |
+
|
| 151 |
+
// Reset input values
|
| 152 |
+
document.getElementById("booknumber").value = "";
|
| 153 |
+
document.getElementById("bookname").value = "";
|
| 154 |
+
}
|
style.css
CHANGED
|
@@ -1,230 +1,888 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
*{
|
| 4 |
margin: 0;
|
| 5 |
padding: 0;
|
| 6 |
box-sizing: border-box;
|
| 7 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 8 |
}
|
| 9 |
|
| 10 |
-
|
| 11 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 12 |
width: 100%;
|
| 13 |
-
min-height: 100vh;
|
| 14 |
display: flex;
|
| 15 |
-
|
| 16 |
-
justify-content: flex-start;
|
| 17 |
-
background: url(bg.png)no-repeat;
|
| 18 |
-
background-size: cover;
|
| 19 |
-
background-position: center;
|
| 20 |
}
|
| 21 |
|
| 22 |
-
header{
|
| 23 |
-
position: relative;
|
| 24 |
-
top: 0;
|
| 25 |
width: 100%;
|
| 26 |
-
padding:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
display: flex;
|
| 28 |
justify-content: space-between;
|
| 29 |
-
align-items: center;
|
| 30 |
}
|
| 31 |
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
font-weight: 800;
|
| 39 |
-
letter-spacing: 1px;
|
| 40 |
}
|
| 41 |
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
transition: 0.3s;
|
| 50 |
-
transition-property: background;
|
| 51 |
}
|
| 52 |
|
| 53 |
-
|
| 54 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 55 |
}
|
| 56 |
|
| 57 |
-
|
| 58 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 59 |
}
|
| 60 |
|
| 61 |
-
.
|
| 62 |
-
|
| 63 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 64 |
}
|
| 65 |
|
| 66 |
-
.
|
| 67 |
-
|
| 68 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 69 |
text-transform: uppercase;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 70 |
font-weight: 800;
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 74 |
}
|
| 75 |
|
| 76 |
-
.
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 80 |
}
|
| 81 |
|
| 82 |
-
.
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
|
|
|
|
|
|
|
| 86 |
}
|
| 87 |
|
| 88 |
-
.content
|
| 89 |
-
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 93 |
font-weight: 500;
|
| 94 |
-
|
| 95 |
-
padding:
|
| 96 |
-
border
|
| 97 |
-
|
| 98 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 99 |
}
|
| 100 |
|
| 101 |
-
.
|
| 102 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 103 |
}
|
| 104 |
|
| 105 |
-
.
|
| 106 |
display: flex;
|
| 107 |
-
|
| 108 |
align-items: center;
|
| 109 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 110 |
}
|
| 111 |
|
| 112 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 113 |
position: relative;
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 118 |
}
|
| 119 |
|
| 120 |
-
.
|
| 121 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 122 |
}
|
| 123 |
|
| 124 |
-
|
| 125 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 126 |
}
|
| 127 |
|
| 128 |
-
|
| 129 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 130 |
}
|
| 131 |
|
| 132 |
-
|
| 133 |
-
|
| 134 |
-
|
|
|
|
|
|
|
| 135 |
}
|
| 136 |
|
| 137 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 138 |
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 143 |
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 150 |
}
|
| 151 |
|
| 152 |
-
|
| 153 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 154 |
}
|
| 155 |
|
| 156 |
-
|
| 157 |
-
|
| 158 |
}
|
| 159 |
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 168 |
display: flex;
|
| 169 |
flex-direction: column;
|
| 170 |
-
justify-content: center;
|
| 171 |
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 172 |
}
|
| 173 |
-
|
| 174 |
-
|
| 175 |
-
|
| 176 |
-
margin-right: 0;
|
| 177 |
-
margin-bottom: 50px;
|
| 178 |
-
letter-spacing: 2px;
|
| 179 |
}
|
| 180 |
-
|
| 181 |
-
#check:checked ~ header label .menu-btn{
|
| 182 |
-
display: none;
|
| 183 |
-
}
|
| 184 |
-
|
| 185 |
-
#check:checked ~ header label .close-btn{
|
| 186 |
-
z-index: 2;
|
| 187 |
display: block;
|
| 188 |
-
|
| 189 |
}
|
| 190 |
-
|
| 191 |
-
|
| 192 |
-
|
|
|
|
| 193 |
}
|
| 194 |
-
|
| 195 |
-
|
| 196 |
-
position: absolute;
|
| 197 |
-
bottom: -6px;
|
| 198 |
}
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
line-height: 50px;
|
| 203 |
}
|
| 204 |
-
|
| 205 |
-
|
| 206 |
-
font-size: 40px;
|
| 207 |
-
font-weight: 600;
|
| 208 |
}
|
| 209 |
-
|
| 210 |
-
|
| 211 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 212 |
}
|
| 213 |
}
|
| 214 |
|
| 215 |
-
|
| 216 |
-
|
| 217 |
-
|
| 218 |
-
|
|
|
|
| 219 |
}
|
| 220 |
-
|
| 221 |
-
|
| 222 |
-
|
| 223 |
-
font-weight: 600;
|
| 224 |
}
|
| 225 |
-
|
| 226 |
-
|
| 227 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 228 |
}
|
| 229 |
}
|
| 230 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/* Goole Fonts */
|
| 2 |
+
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Vithkuqi:wght@500&family=Playfair+Display:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap");
|
| 3 |
+
* {
|
| 4 |
margin: 0;
|
| 5 |
padding: 0;
|
| 6 |
box-sizing: border-box;
|
| 7 |
+
scroll-behavior: smooth;
|
| 8 |
+
scroll-padding-top: 3rem;
|
| 9 |
+
font-family: var(--font-family-2);
|
| 10 |
+
}
|
| 11 |
+
/* Variables */
|
| 12 |
+
:root {
|
| 13 |
+
--main-color: #54372a;
|
| 14 |
+
--second-color: #df582e;
|
| 15 |
+
--text-color: #060413;
|
| 16 |
+
--container-color: #f8e4be;
|
| 17 |
+
--bg-color: #f9f6f2;
|
| 18 |
+
--text-alter-color: #94908e;
|
| 19 |
+
--poppins-font: "Poppins", sans-serif;
|
| 20 |
+
--font-family-2: "Playfair Display", serif;
|
| 21 |
}
|
| 22 |
|
| 23 |
+
body {
|
| 24 |
+
color: var(--text-color);
|
| 25 |
+
background-color: var(--bg-color);
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
a {
|
| 29 |
+
text-decoration: none;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
img {
|
| 33 |
+
width: 100%;
|
| 34 |
+
}
|
| 35 |
+
|
| 36 |
+
section {
|
| 37 |
+
padding: 3rem 0 2rem;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.container {
|
| 41 |
+
max-width: 1920px;
|
| 42 |
+
margin: auto;
|
| 43 |
width: 100%;
|
|
|
|
| 44 |
display: flex;
|
| 45 |
+
justify-content: center;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 46 |
}
|
| 47 |
|
| 48 |
+
header {
|
|
|
|
|
|
|
| 49 |
width: 100%;
|
| 50 |
+
padding: 5px 20px;
|
| 51 |
+
display: flex;
|
| 52 |
+
justify-content: center;
|
| 53 |
+
background-color: #54372a;
|
| 54 |
+
column-gap: 2rem;
|
| 55 |
+
position: fixed;
|
| 56 |
+
top: 0;
|
| 57 |
+
left: 0;
|
| 58 |
+
z-index: 1;
|
| 59 |
+
}
|
| 60 |
+
.logo {
|
| 61 |
+
font-size: 2.5rem;
|
| 62 |
+
font-weight: 700;
|
| 63 |
+
color: var(--container-color);
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
.header-container {
|
| 67 |
+
width: 60%;
|
| 68 |
display: flex;
|
| 69 |
justify-content: space-between;
|
|
|
|
| 70 |
}
|
| 71 |
|
| 72 |
+
.nav-icons {
|
| 73 |
+
display: flex;
|
| 74 |
+
align-items: center;
|
| 75 |
+
column-gap: 2rem;
|
| 76 |
+
margin-left: 45%;
|
| 77 |
+
cursor: pointer;
|
|
|
|
|
|
|
| 78 |
}
|
| 79 |
|
| 80 |
+
nav {
|
| 81 |
+
display: flex;
|
| 82 |
+
justify-content: end;
|
| 83 |
+
align-items: center;
|
| 84 |
+
padding: 10px 20px;
|
| 85 |
+
border-radius: 2rem;
|
| 86 |
+
width: 50%;
|
|
|
|
|
|
|
| 87 |
}
|
| 88 |
|
| 89 |
+
.navbar {
|
| 90 |
+
display: flex;
|
| 91 |
+
justify-content: center;
|
| 92 |
+
align-items: center;
|
| 93 |
+
column-gap: 4rem;
|
| 94 |
+
width: 100%;
|
| 95 |
+
margin-left: 30%;
|
| 96 |
}
|
| 97 |
|
| 98 |
+
.nav-link {
|
| 99 |
+
font-size: 0.8rem;
|
| 100 |
+
color: var(--bg-color);
|
| 101 |
+
font-weight: 600;
|
| 102 |
+
font-family: var(--poppins-font);
|
| 103 |
+
transition: 0.4s all cubic-bezier(0.075, 0.82, 0.165, 1);
|
| 104 |
+
}
|
| 105 |
+
.nav-link:hover {
|
| 106 |
+
color: var(--second-color);
|
| 107 |
+
transition: 0.4s all cubic-bezier(0.075, 0.82, 0.165, 1);
|
| 108 |
}
|
| 109 |
|
| 110 |
+
.bx {
|
| 111 |
+
color: var(--bg-color);
|
| 112 |
+
font-size: 20px;
|
| 113 |
+
}
|
| 114 |
+
/* Menu Icon */
|
| 115 |
+
.menu-icon {
|
| 116 |
+
display: none;
|
| 117 |
+
flex-direction: column;
|
| 118 |
+
align-items: center;
|
| 119 |
+
justify-content: center;
|
| 120 |
+
row-gap: 5px;
|
| 121 |
+
cursor: pointer;
|
| 122 |
+
z-index: 100;
|
| 123 |
+
transition: 0.3s;
|
| 124 |
+
}
|
| 125 |
+
.menu-icon div {
|
| 126 |
+
display: block;
|
| 127 |
+
background: var(--text-color);
|
| 128 |
+
height: 2px;
|
| 129 |
+
width: 23px;
|
| 130 |
+
transition: 0.3s;
|
| 131 |
+
}
|
| 132 |
+
.move .line1 {
|
| 133 |
+
transform: rotate(-45deg) translate(-5px, 5px);
|
| 134 |
+
}
|
| 135 |
+
.move .line2 {
|
| 136 |
+
opacity: 0;
|
| 137 |
+
}
|
| 138 |
+
.move .line3 {
|
| 139 |
+
transform: rotate(45deg) translate(-5px, -5px);
|
| 140 |
+
}
|
| 141 |
+
.home {
|
| 142 |
+
width: 60%;
|
| 143 |
+
min-height: 500px;
|
| 144 |
+
display: grid;
|
| 145 |
+
grid-template-columns: repeat(2, 1fr);
|
| 146 |
+
align-items: center;
|
| 147 |
+
gap: 1.5rem;
|
| 148 |
+
margin-top: 5rem;
|
| 149 |
+
animation: fadeInLeft 1s ease forwards;
|
| 150 |
+
}
|
| 151 |
+
.home-text h1 {
|
| 152 |
+
font-size: 3.5rem;
|
| 153 |
+
font-weight: 800;
|
| 154 |
+
color: var(--main-color);
|
| 155 |
+
}
|
| 156 |
+
.home-text p {
|
| 157 |
+
max-width: 400px;
|
| 158 |
+
font-size: 0.94rem;
|
| 159 |
+
font-family: var(--poppins-font);
|
| 160 |
+
margin: 1rem 0 1.5rem;
|
| 161 |
+
text-align: justify;
|
| 162 |
}
|
| 163 |
|
| 164 |
+
.btn {
|
| 165 |
+
max-width: 168px;
|
| 166 |
+
padding: 10px;
|
| 167 |
+
display: flex;
|
| 168 |
+
align-items: center;
|
| 169 |
+
justify-content: center;
|
| 170 |
+
column-gap: 0.5rem;
|
| 171 |
+
border-radius: 2rem;
|
| 172 |
+
background: var(--main-color);
|
| 173 |
+
box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
|
| 174 |
+
}
|
| 175 |
+
.btn span {
|
| 176 |
+
font-family: var(--poppins-font);
|
| 177 |
+
color: var(--bg-color);
|
| 178 |
text-transform: uppercase;
|
| 179 |
+
}
|
| 180 |
+
.btn .bx {
|
| 181 |
+
font-size: 20px;
|
| 182 |
+
background: var(--second-color);
|
| 183 |
+
color: var(--bg-color);
|
| 184 |
+
padding: 5px;
|
| 185 |
+
border-radius: 50%;
|
| 186 |
+
transform: rotate(60deg);
|
| 187 |
+
}
|
| 188 |
+
.btn:hover {
|
| 189 |
+
/* transform: translateY(-5px); */
|
| 190 |
+
transform: scale(1.1);
|
| 191 |
+
transition: 0.5s;
|
| 192 |
+
}
|
| 193 |
+
|
| 194 |
+
.home-img {
|
| 195 |
+
max-width: 560px;
|
| 196 |
+
width: 100%;
|
| 197 |
+
}
|
| 198 |
+
.heading {
|
| 199 |
+
display: flex;
|
| 200 |
+
flex-direction: column;
|
| 201 |
+
align-items: center;
|
| 202 |
+
text-align: center;
|
| 203 |
+
}
|
| 204 |
+
|
| 205 |
+
.heading h2 {
|
| 206 |
+
font-size: 2.2rem;
|
| 207 |
font-weight: 800;
|
| 208 |
+
margin: 1rem 0;
|
| 209 |
+
}
|
| 210 |
+
.service-content {
|
| 211 |
+
display: grid;
|
| 212 |
+
grid-template-columns: repeat(auto-fit, minmax(auto, 200px));
|
| 213 |
+
justify-content: space-between;
|
| 214 |
+
gap: 1rem;
|
| 215 |
+
margin-top: 2rem;
|
| 216 |
+
}
|
| 217 |
+
.ser-box {
|
| 218 |
+
background: var(--main-color);
|
| 219 |
+
display: flex;
|
| 220 |
+
flex-direction: column;
|
| 221 |
+
align-items: center;
|
| 222 |
+
row-gap: 1rem;
|
| 223 |
+
padding: 40px 20px;
|
| 224 |
+
border-radius: 2rem;
|
| 225 |
+
cursor: pointer;
|
| 226 |
+
transition: 0.5s;
|
| 227 |
}
|
| 228 |
|
| 229 |
+
.ser-box img {
|
| 230 |
+
width: 100px;
|
| 231 |
+
height: 100px;
|
| 232 |
+
object-fit: contain;
|
| 233 |
+
}
|
| 234 |
+
.ser-box p {
|
| 235 |
+
color: var(--container-color);
|
| 236 |
+
}
|
| 237 |
+
.ser-box:hover {
|
| 238 |
+
transform: scale(1.1);
|
| 239 |
}
|
| 240 |
|
| 241 |
+
.heading p {
|
| 242 |
+
max-width: 100%;
|
| 243 |
+
text-align: justify;
|
| 244 |
+
font-size: 0.9rem;
|
| 245 |
+
font-family: var(--poppins-font);
|
| 246 |
+
margin-top: 1rem;
|
| 247 |
}
|
| 248 |
|
| 249 |
+
.product-content {
|
| 250 |
+
display: grid;
|
| 251 |
+
grid-template-columns: repeat(3, 250px);
|
| 252 |
+
justify-content: space-between;
|
| 253 |
+
gap: 2rem;
|
| 254 |
+
background: #d0a97a;
|
| 255 |
+
border-radius: 1.5rem;
|
| 256 |
+
padding: 40px 60px;
|
| 257 |
+
}
|
| 258 |
+
.product-box {
|
| 259 |
+
background: #fff8f7;
|
| 260 |
+
padding: 20px;
|
| 261 |
+
border-radius: 1.5rem;
|
| 262 |
+
display: flex;
|
| 263 |
+
flex-direction: column;
|
| 264 |
+
align-items: center;
|
| 265 |
+
cursor: pointer;
|
| 266 |
+
}
|
| 267 |
+
.product-box .heart-icon {
|
| 268 |
+
position: absolute;
|
| 269 |
+
top: 20px;
|
| 270 |
+
left: 20px;
|
| 271 |
+
padding: 8px;
|
| 272 |
+
background: #fff;
|
| 273 |
+
color: var(--second-color);
|
| 274 |
+
border-radius: 50%;
|
| 275 |
+
}
|
| 276 |
+
.product-box img {
|
| 277 |
+
margin-top: 1.5rem;
|
| 278 |
+
width: 140px;
|
| 279 |
+
height: 140px;
|
| 280 |
+
border-radius: 50%;
|
| 281 |
+
object-fit: cover;
|
| 282 |
+
box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.25);
|
| 283 |
+
}
|
| 284 |
+
.product-box p {
|
| 285 |
+
font-size: 0.7rem;
|
| 286 |
font-weight: 500;
|
| 287 |
+
font-family: var(--poppins-font);
|
| 288 |
+
padding: 2px 7px;
|
| 289 |
+
border: 1px solid var(--text-alter-color);
|
| 290 |
+
border-radius: 1rem;
|
| 291 |
+
background: #fff;
|
| 292 |
+
margin: 1rem 0 0.5rem;
|
| 293 |
+
}
|
| 294 |
+
.product-box h2 {
|
| 295 |
+
color: var(--main-color);
|
| 296 |
+
font-size: 1.3rem;
|
| 297 |
+
font-weight: 500;
|
| 298 |
+
}
|
| 299 |
+
.product-box:hover {
|
| 300 |
+
transform: translateY(-5px);
|
| 301 |
+
}
|
| 302 |
+
.product-info {
|
| 303 |
+
display: flex;
|
| 304 |
+
align-items: center;
|
| 305 |
+
justify-content: space-between;
|
| 306 |
+
margin-top: 2rem;
|
| 307 |
+
width: 100%;
|
| 308 |
}
|
| 309 |
|
| 310 |
+
.product-info span {
|
| 311 |
+
color: var(--main-color);
|
| 312 |
+
font-weight: 500;
|
| 313 |
+
}
|
| 314 |
+
.product-info .bx {
|
| 315 |
+
padding: 8px;
|
| 316 |
+
background: var(--second-color);
|
| 317 |
+
color: var(--bg-color);
|
| 318 |
+
border-radius: 50%;
|
| 319 |
+
cursor: pointer;
|
| 320 |
+
}
|
| 321 |
+
.product-info .bx:hover {
|
| 322 |
+
background: var(--main-color);
|
| 323 |
+
transition: 0.4s all cubic-bezier(0.075, 0.82, 0.165, 1);
|
| 324 |
+
}
|
| 325 |
+
.team-content {
|
| 326 |
+
display: grid;
|
| 327 |
+
grid-template-columns: repeat(auto-fit, minmax(240px, auto));
|
| 328 |
+
gap: 1.5rem;
|
| 329 |
+
}
|
| 330 |
+
.team-box img {
|
| 331 |
+
width: 100%;
|
| 332 |
+
height: 400px;
|
| 333 |
+
object-fit: cover;
|
| 334 |
+
border-radius: 10px;
|
| 335 |
+
}
|
| 336 |
+
.team-box h2 {
|
| 337 |
+
font-size: 0.94rem;
|
| 338 |
+
font-weight: 500;
|
| 339 |
+
color: var(--main-color);
|
| 340 |
+
font-family: var(--poppins-font);
|
| 341 |
+
margin-top: 1rem;
|
| 342 |
+
}
|
| 343 |
+
.team-box span {
|
| 344 |
+
font-size: 0.77rem;
|
| 345 |
+
color: var(--text-alter-color);
|
| 346 |
+
font-family: var(--poppins-font);
|
| 347 |
+
}
|
| 348 |
+
.team-box p {
|
| 349 |
+
font-size: 0.88rem;
|
| 350 |
+
font-family: var(--poppins-font);
|
| 351 |
+
color: var(--main-color);
|
| 352 |
+
margin-top: 10px;
|
| 353 |
+
}
|
| 354 |
+
.review {
|
| 355 |
+
max-width: 550px;
|
| 356 |
+
margin: auto;
|
| 357 |
+
width: 100%;
|
| 358 |
}
|
| 359 |
|
| 360 |
+
.review-box {
|
| 361 |
display: flex;
|
| 362 |
+
flex-direction: column;
|
| 363 |
align-items: center;
|
| 364 |
+
text-align: center;
|
| 365 |
+
margin-bottom: 3.5rem !important;
|
| 366 |
+
}
|
| 367 |
+
.review-box img {
|
| 368 |
+
width: 100px;
|
| 369 |
+
height: 100px;
|
| 370 |
+
border-radius: 50%;
|
| 371 |
+
border: 7px soild #fff8f7;
|
| 372 |
+
object-fit: cover;
|
| 373 |
+
object-position: center;
|
| 374 |
+
box-shadow: 0 4px 16px hsla(355, 25%, 15%, 0.1);
|
| 375 |
+
}
|
| 376 |
+
.review-box h2 {
|
| 377 |
+
font-size: 1rem;
|
| 378 |
+
color: var(--main-color);
|
| 379 |
+
font-family: var(--poppins-font);
|
| 380 |
+
font-weight: 500;
|
| 381 |
+
margin: 1rem 0;
|
| 382 |
+
}
|
| 383 |
+
.review-box span {
|
| 384 |
+
font-size: 1.4rem;
|
| 385 |
+
font-weight: 700;
|
| 386 |
+
color: var(--main-color);
|
| 387 |
+
}
|
| 388 |
+
.review-box p {
|
| 389 |
+
font-size: 0.9rem;
|
| 390 |
+
font-family: var(--poppins-font);
|
| 391 |
+
columns: var(--text-alter-color);
|
| 392 |
+
margin-top: 1rem;
|
| 393 |
+
}
|
| 394 |
+
.swiper-wrapper {
|
| 395 |
+
overflow: hidden;
|
| 396 |
+
position: relative;
|
| 397 |
+
}
|
| 398 |
+
.swiper-slide {
|
| 399 |
+
display: flex;
|
| 400 |
+
position: relative;
|
| 401 |
+
object-fit: cover;
|
| 402 |
+
}
|
| 403 |
+
.swiper-pagination-bullet {
|
| 404 |
+
width: 8px !important;
|
| 405 |
+
height: 8px !important;
|
| 406 |
+
border-radius: 0.2rem !important;
|
| 407 |
+
background: var(--main-color) !important;
|
| 408 |
+
opacity: 1 !important;
|
| 409 |
+
}
|
| 410 |
+
|
| 411 |
+
.swiper-pagination-bullet-active {
|
| 412 |
+
width: 1.5rem !important;
|
| 413 |
+
background: var(--second-color) !important;
|
| 414 |
}
|
| 415 |
|
| 416 |
+
.book {
|
| 417 |
+
display: flex;
|
| 418 |
+
flex-direction: column;
|
| 419 |
+
align-items: center;
|
| 420 |
+
color: var(--bg-color);
|
| 421 |
+
padding: 40px 20px;
|
| 422 |
position: relative;
|
| 423 |
+
}
|
| 424 |
+
.book-img {
|
| 425 |
+
position: absolute;
|
| 426 |
+
width: 100%;
|
| 427 |
+
height: 100%;
|
| 428 |
+
object-fit: cover;
|
| 429 |
+
border-radius: 1rem;
|
| 430 |
+
z-index: -1;
|
| 431 |
+
}
|
| 432 |
+
.book-overlay {
|
| 433 |
+
content: "";
|
| 434 |
+
position: absolute;
|
| 435 |
+
width: 100%;
|
| 436 |
+
height: 100%;
|
| 437 |
+
background: rgba(0, 0, 0, 0.6);
|
| 438 |
+
border-radius: 1rem;
|
| 439 |
+
z-index: -1;
|
| 440 |
+
}
|
| 441 |
+
.book-data {
|
| 442 |
+
margin-top: 4rem;
|
| 443 |
}
|
| 444 |
|
| 445 |
+
.book-data h2 {
|
| 446 |
+
font-size: 2rem;
|
| 447 |
+
text-align: center;
|
| 448 |
+
font-weight: 700;
|
| 449 |
+
}
|
| 450 |
+
.book-data form {
|
| 451 |
+
display: flex;
|
| 452 |
+
align-items: center;
|
| 453 |
+
gap: 10px;
|
| 454 |
+
background: var(--bg-color);
|
| 455 |
+
border-radius: 2rem;
|
| 456 |
+
padding: 10px;
|
| 457 |
+
margin: 1rem 0;
|
| 458 |
+
/* opacity: 0.88; */
|
| 459 |
+
}
|
| 460 |
+
.input-box {
|
| 461 |
+
display: flex;
|
| 462 |
+
align-items: center;
|
| 463 |
+
column-gap: 5px;
|
| 464 |
+
}
|
| 465 |
+
.input-box .bx {
|
| 466 |
+
color: var(--text-color);
|
| 467 |
+
}
|
| 468 |
+
.input-box input {
|
| 469 |
+
width: 100%;
|
| 470 |
+
border: none;
|
| 471 |
+
outline: none;
|
| 472 |
+
padding: 15px 0;
|
| 473 |
+
background: transparent;
|
| 474 |
+
}
|
| 475 |
+
.book-btn {
|
| 476 |
+
text-align: center;
|
| 477 |
+
font-family: var(--poppins-font);
|
| 478 |
+
font-size: 0.8rem;
|
| 479 |
+
padding: 10px 14px;
|
| 480 |
+
background: var(--main-color);
|
| 481 |
+
color: var(--bg-color);
|
| 482 |
+
border-radius: 2.5em;
|
| 483 |
+
}
|
| 484 |
+
.book-btn:hover {
|
| 485 |
+
background: #f8e4be;
|
| 486 |
+
transition: 0.4s all cubic-bezier(0.075, 0.82, 0.165, 1);
|
| 487 |
+
color: #54372a;
|
| 488 |
+
}
|
| 489 |
+
.book-data p {
|
| 490 |
+
font-size: 0.8rem;
|
| 491 |
+
text-align: center;
|
| 492 |
+
font-weight: 500;
|
| 493 |
+
}
|
| 494 |
+
.footer {
|
| 495 |
+
display: grid;
|
| 496 |
+
grid-template-columns: repeat(4, auto);
|
| 497 |
+
justify-content: space-between;
|
| 498 |
+
gap: 1rem;
|
| 499 |
+
margin-top: 3rem !important;
|
| 500 |
+
}
|
| 501 |
+
.footer .logo {
|
| 502 |
+
color: var(--main-color);
|
| 503 |
+
margin-bottom: 1rem;
|
| 504 |
+
}
|
| 505 |
+
.social {
|
| 506 |
+
display: flex;
|
| 507 |
+
align-items: center;
|
| 508 |
+
}
|
| 509 |
+
.social a {
|
| 510 |
+
font-size: 24px;
|
| 511 |
+
color: var(--main-color);
|
| 512 |
+
margin-right: 1rem;
|
| 513 |
+
}
|
| 514 |
+
.social a:hover {
|
| 515 |
+
color: var(--second-color);
|
| 516 |
+
}
|
| 517 |
+
.footer-box {
|
| 518 |
+
display: flex;
|
| 519 |
+
flex-direction: column;
|
| 520 |
+
}
|
| 521 |
+
.footer-box h3 {
|
| 522 |
+
font-size: 1.1rem;
|
| 523 |
+
font-weight: 600;
|
| 524 |
+
color: var(--main-color);
|
| 525 |
+
margin-bottom: 1rem;
|
| 526 |
+
}
|
| 527 |
+
.footer-box a {
|
| 528 |
+
color: var(--main-color);
|
| 529 |
+
margin-bottom: 10px;
|
| 530 |
+
}
|
| 531 |
+
.copyright {
|
| 532 |
+
padding: 30px;
|
| 533 |
+
color: var(--main-color);
|
| 534 |
+
text-align: center;
|
| 535 |
}
|
| 536 |
|
| 537 |
+
/* Cart */
|
| 538 |
+
.bill {
|
| 539 |
+
width: 0%;
|
| 540 |
+
height: 60%;
|
| 541 |
+
position: fixed;
|
| 542 |
+
right: 0;
|
| 543 |
+
bottom: 20%;
|
| 544 |
+
z-index: 10;
|
| 545 |
+
display: block;
|
| 546 |
+
transition: 1s;
|
| 547 |
+
box-shadow: 5px 5px 10px 5px var(--text-alter-color);
|
| 548 |
+
border-bottom-left-radius: 10px;
|
| 549 |
+
border-top-left-radius: 10px;
|
| 550 |
+
background-color: white;
|
| 551 |
}
|
| 552 |
|
| 553 |
+
.caption {
|
| 554 |
+
height: 10%;
|
| 555 |
+
width: 100%;
|
| 556 |
+
column-gap: 3rem;
|
| 557 |
+
border-bottom: 1px solid #94908e;
|
| 558 |
+
padding: 6px 5px;
|
| 559 |
}
|
| 560 |
|
| 561 |
+
.caption h1 {
|
| 562 |
+
font-size: 2rem;
|
| 563 |
+
margin: 0;
|
| 564 |
+
padding: 0;
|
| 565 |
+
float: left;
|
| 566 |
}
|
| 567 |
|
| 568 |
+
.caption img {
|
| 569 |
+
width: 40px;
|
| 570 |
+
height: 40px;
|
| 571 |
+
float: right;
|
| 572 |
+
padding: 5px 3px;
|
| 573 |
+
margin: 5px;
|
| 574 |
+
border-radius: 10px;
|
| 575 |
+
border: 2px solid var(--main-color);
|
| 576 |
+
cursor: pointer;
|
| 577 |
+
}
|
| 578 |
|
| 579 |
+
.billProduct {
|
| 580 |
+
height: 70%;
|
| 581 |
+
width: 100%;
|
| 582 |
+
display: block;
|
| 583 |
+
border-bottom: 1px solid #94908e;
|
| 584 |
+
overflow: scroll;
|
| 585 |
+
}
|
| 586 |
+
.billProduct h3 {
|
| 587 |
+
text-align: center;
|
| 588 |
+
color: var(--second-color);
|
| 589 |
+
}
|
| 590 |
|
| 591 |
+
.detailProduct {
|
| 592 |
+
width: 100%;
|
| 593 |
+
min-height: 15%;
|
| 594 |
+
display: flex;
|
| 595 |
+
border: 1px solid #d0a97a;
|
| 596 |
+
column-gap: 0.4rem;
|
| 597 |
+
}
|
| 598 |
+
|
| 599 |
+
.detailProduct img {
|
| 600 |
+
width: 30px;
|
| 601 |
+
height: 30px;
|
| 602 |
+
border-radius: 50%;
|
| 603 |
+
margin: 6px 5px;
|
| 604 |
+
}
|
| 605 |
+
|
| 606 |
+
.detailProduct h4 {
|
| 607 |
+
padding: 5px 2px;
|
| 608 |
+
width: 50%;
|
| 609 |
+
}
|
| 610 |
+
|
| 611 |
+
.quantity {
|
| 612 |
+
height: 100%;
|
| 613 |
+
width: 20%;
|
| 614 |
+
display: block;
|
| 615 |
+
text-align: center;
|
| 616 |
+
font-weight: 600;
|
| 617 |
+
}
|
| 618 |
+
|
| 619 |
+
.quantity p {
|
| 620 |
+
color: #df582e;
|
| 621 |
+
}
|
| 622 |
+
|
| 623 |
+
.detailProduct img:last-child {
|
| 624 |
+
margin: 7px 5px;
|
| 625 |
+
cursor: pointer;
|
| 626 |
+
}
|
| 627 |
+
|
| 628 |
+
.inforBill {
|
| 629 |
+
width: 100%;
|
| 630 |
+
height: 20%;
|
| 631 |
+
color: chocolate;
|
| 632 |
+
padding: 10px 10px;
|
| 633 |
+
display: flex;
|
| 634 |
+
column-gap: 60%;
|
| 635 |
+
}
|
| 636 |
+
.inforBill button {
|
| 637 |
+
width: 40%;
|
| 638 |
+
height: 40%;
|
| 639 |
+
margin: 5px 5%;
|
| 640 |
+
float: right;
|
| 641 |
+
background-color: #d0a97a;
|
| 642 |
+
color: white;
|
| 643 |
+
font-weight: 600;
|
| 644 |
+
font-size: 1rem;
|
| 645 |
+
border: none;
|
| 646 |
+
cursor: pointer;
|
| 647 |
+
border-radius: 10px;
|
| 648 |
+
}
|
| 649 |
+
|
| 650 |
+
.printer {
|
| 651 |
+
width: 0%;
|
| 652 |
+
height: auto;
|
| 653 |
+
position: fixed;
|
| 654 |
+
left: 0;
|
| 655 |
+
top: 20%;
|
| 656 |
+
transition: 1.5s;
|
| 657 |
+
border: 2px solid #d0a97a;
|
| 658 |
+
border-radius: 20px;
|
| 659 |
+
column-gap: 0.5rem;
|
| 660 |
+
display: flex;
|
| 661 |
+
color: #df582e;
|
| 662 |
+
text-align: center;
|
| 663 |
+
box-shadow: #d0a97a 0px 20px 30px -10px;
|
| 664 |
+
background-color: var(--bg-color);
|
| 665 |
+
}
|
| 666 |
+
.printer div {
|
| 667 |
+
padding: 1%;
|
| 668 |
+
overflow: hidden;
|
| 669 |
+
}
|
| 670 |
+
|
| 671 |
+
.printer img {
|
| 672 |
+
width: 40%;
|
| 673 |
+
border-radius: 20px;
|
| 674 |
+
padding: 3%;
|
| 675 |
+
}
|
| 676 |
+
|
| 677 |
+
.printer div h1:last-child {
|
| 678 |
+
font-size: 3.5rem;
|
| 679 |
+
}
|
| 680 |
+
|
| 681 |
+
@media (max-width: 1500px) {
|
| 682 |
+
.header-container {
|
| 683 |
+
width: 80%;
|
| 684 |
}
|
| 685 |
|
| 686 |
+
.caption h1 {
|
| 687 |
+
font-size: 1.2rem;
|
| 688 |
+
}
|
| 689 |
+
.caption img {
|
| 690 |
+
width: 25px;
|
| 691 |
+
height: 25px;
|
| 692 |
+
padding: 2px;
|
| 693 |
+
margin: 2px;
|
| 694 |
+
}
|
| 695 |
+
.inforBill h1 {
|
| 696 |
+
font-size: 1.2rem;
|
| 697 |
+
font-weight: 600;
|
| 698 |
+
}
|
| 699 |
+
.inforBill button {
|
| 700 |
+
height: 50%;
|
| 701 |
+
margin: 2px 5px;
|
| 702 |
+
}
|
| 703 |
+
.inforBil {
|
| 704 |
+
height: 15%;
|
| 705 |
+
}
|
| 706 |
+
.billProduct {
|
| 707 |
+
height: 75%;
|
| 708 |
+
}
|
| 709 |
+
.printer {
|
| 710 |
+
height: 30%;
|
| 711 |
+
font-size: 0.6rem;
|
| 712 |
+
}
|
| 713 |
+
.printer div h1:last-child {
|
| 714 |
+
font-size: 2.5rem;
|
| 715 |
+
}
|
| 716 |
+
}
|
| 717 |
+
@media (max-width: 1080px) {
|
| 718 |
+
.container {
|
| 719 |
+
width: 90%;
|
| 720 |
+
margin: 0 auto;
|
| 721 |
}
|
| 722 |
|
| 723 |
+
.header-container {
|
| 724 |
+
width: 90%;
|
| 725 |
}
|
| 726 |
|
| 727 |
+
.home-text h1 {
|
| 728 |
+
font-size: 3rem;
|
| 729 |
+
}
|
| 730 |
+
.product-content {
|
| 731 |
+
grid-template-columns: repeat(3, 1fr);
|
| 732 |
+
padding: 40px;
|
| 733 |
+
}
|
| 734 |
+
}
|
| 735 |
+
@media (max-width: 875px) {
|
| 736 |
+
section {
|
| 737 |
+
padding: 2rem 0;
|
| 738 |
+
}
|
| 739 |
+
.home-text h1 {
|
| 740 |
+
font-size: 2.5rem;
|
| 741 |
+
}
|
| 742 |
+
}
|
| 743 |
+
@media (max-width: 770px) {
|
| 744 |
+
.home {
|
| 745 |
+
min-height: 500px;
|
| 746 |
+
grid-template-columns: 1fr;
|
| 747 |
+
margin-top: 4.5rem !important;
|
| 748 |
+
}
|
| 749 |
+
.home-text {
|
| 750 |
+
order: 1;
|
| 751 |
+
}
|
| 752 |
+
.heading h2,
|
| 753 |
+
.book-data h2 {
|
| 754 |
+
font-size: 1.6rem;
|
| 755 |
+
}
|
| 756 |
+
.product-content {
|
| 757 |
+
grid-template-columns: repeat(2, 1fr);
|
| 758 |
+
}
|
| 759 |
+
.book {
|
| 760 |
+
padding: 20px;
|
| 761 |
+
}
|
| 762 |
+
.book-data {
|
| 763 |
+
margin-top: 3rem;
|
| 764 |
+
max-width: 350px;
|
| 765 |
+
width: 100%;
|
| 766 |
+
}
|
| 767 |
+
.book-data form {
|
| 768 |
+
display: grid;
|
| 769 |
+
padding: 15px;
|
| 770 |
+
border-radius: 10px;
|
| 771 |
+
}
|
| 772 |
+
.input-box {
|
| 773 |
+
border-bottom: 1px solid var(--text-alter-color);
|
| 774 |
+
}
|
| 775 |
+
.footer {
|
| 776 |
+
grid-template-columns: repeat(3, auto);
|
| 777 |
+
}
|
| 778 |
+
}
|
| 779 |
+
@media (max-width: 700px) {
|
| 780 |
+
header {
|
| 781 |
+
top: 15px;
|
| 782 |
+
}
|
| 783 |
+
nav {
|
| 784 |
+
padding: 14px 20px;
|
| 785 |
+
}
|
| 786 |
+
.logo {
|
| 787 |
+
font-size: 1.25rem;
|
| 788 |
+
}
|
| 789 |
+
.menu-icon {
|
| 790 |
+
display: flex;
|
| 791 |
+
}
|
| 792 |
+
.navbar {
|
| 793 |
+
position: absolute;
|
| 794 |
+
top: 110%;
|
| 795 |
+
left: 50%;
|
| 796 |
+
transform: translate(-50%);
|
| 797 |
+
width: 90vw;
|
| 798 |
+
background: var(--text-color);
|
| 799 |
display: flex;
|
| 800 |
flex-direction: column;
|
|
|
|
| 801 |
align-items: center;
|
| 802 |
+
padding: 20px;
|
| 803 |
+
border-radius: 1rem;
|
| 804 |
+
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
|
| 805 |
+
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
|
| 806 |
}
|
| 807 |
+
.open-menu {
|
| 808 |
+
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
| 809 |
+
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
|
|
|
|
|
|
|
|
| 810 |
}
|
| 811 |
+
.nav-link {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 812 |
display: block;
|
| 813 |
+
margin: 1rem 0;
|
| 814 |
}
|
| 815 |
+
}
|
| 816 |
+
@media (max-width: 500px) {
|
| 817 |
+
.heading h2 br {
|
| 818 |
+
display: contents;
|
| 819 |
}
|
| 820 |
+
.service-content {
|
| 821 |
+
justify-content: center;
|
|
|
|
|
|
|
| 822 |
}
|
| 823 |
+
.product-content {
|
| 824 |
+
grid-template-columns: 1fr;
|
| 825 |
+
padding: 20px;
|
|
|
|
| 826 |
}
|
| 827 |
+
.footer {
|
| 828 |
+
grid-template-columns: 1fr;
|
|
|
|
|
|
|
| 829 |
}
|
| 830 |
+
}
|
| 831 |
+
@media (max-width: 380px) {
|
| 832 |
+
.home {
|
| 833 |
+
font-size: 2rem;
|
| 834 |
+
}
|
| 835 |
+
.service-content {
|
| 836 |
+
grid-template-columns: repeat(auto-fit, minmax(auto, 140px));
|
| 837 |
+
}
|
| 838 |
+
.ser-box img {
|
| 839 |
+
width: 80px;
|
| 840 |
+
height: 80px;
|
| 841 |
+
}
|
| 842 |
+
p {
|
| 843 |
+
font-size: 0.9rem;
|
| 844 |
+
}
|
| 845 |
+
.heading h2,
|
| 846 |
+
.book-data h2 {
|
| 847 |
+
font-size: 1.4rem;
|
| 848 |
}
|
| 849 |
}
|
| 850 |
|
| 851 |
+
/* Animation */
|
| 852 |
+
@keyframes fadeInLeft {
|
| 853 |
+
0% {
|
| 854 |
+
opacity: 0;
|
| 855 |
+
transform: translateX(-30px);
|
| 856 |
}
|
| 857 |
+
100% {
|
| 858 |
+
opacity: 1;
|
| 859 |
+
transform: translateX(0px);
|
|
|
|
| 860 |
}
|
| 861 |
+
}
|
| 862 |
+
@keyframes fadeInRight {
|
| 863 |
+
0% {
|
| 864 |
+
opacity: 0;
|
| 865 |
+
transform: translateX(30px);
|
| 866 |
+
}
|
| 867 |
+
100% {
|
| 868 |
+
opacity: 1;
|
| 869 |
+
transform: translateX(0px);
|
| 870 |
}
|
| 871 |
}
|
| 872 |
+
|
| 873 |
+
iframe {
|
| 874 |
+
border-radius: 20px;
|
| 875 |
+
width: 100%;
|
| 876 |
+
height: 600px;
|
| 877 |
+
}
|
| 878 |
+
|
| 879 |
+
.input-book input {
|
| 880 |
+
padding: 2px 10px;
|
| 881 |
+
border: none;
|
| 882 |
+
background: transparent;
|
| 883 |
+
font-weight: 700;
|
| 884 |
+
}
|
| 885 |
+
|
| 886 |
+
.input-book input:focus {
|
| 887 |
+
outline: none;
|
| 888 |
+
}
|