Medical Store Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MediCare - Your Trusted Pharmacy</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <!-- Top Bar --> <div class="top-bar"> <div class="container"> <div class="top-bar-content"> <div class="contact-info"> <span><i class="fas fa-phone-alt"></i> +1 (555) 123-4567</span> <span><i class="fas fa-envelope"></i> info@medicare.com</span> </div> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> </div> <!-- Navigation --> <nav id="navbar"> <div class="container"> <div class="logo">Medi<span>Care</span></div> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#products">Products</a></li> <li><a href="#prescription">Prescription</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#team">Our Team</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="hero-content"> <h1>Your Health Is Our <span>Priority</span></h1> <p>Quality medicines, healthcare products, and professional advice to keep you and your family healthy.</p> <div class="hero-buttons"> <a href="#products" class="btn">Shop Now</a> <a href="#contact" class="btn-outline">Contact Us</a> </div> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1587854692152-cbe660dbde88?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Pharmacist helping customer"> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="about-image"> <img src="https://images.unsplash.com/photo-1631815588090-d4bfec5b1ccb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="MediCare Pharmacy Store"> </div> <div class="about-content"> <h2>About <span>MediCare</span></h2> <p>MediCare Pharmacy has been serving the community since 1995, providing quality healthcare products and professional pharmaceutical services.</p> <p>Our mission is to improve the health and wellness of our customers by providing exceptional service, quality products, and expert advice.</p> <div class="about-features"> <div class="feature"> <i class="fas fa-certificate"></i> <h3>Certified Pharmacists</h3> </div> <div class="feature"> <i class="fas fa-pills"></i> <h3>Quality Medicines</h3> </div> <div class="feature"> <i class="fas fa-heart"></i> <h3>Care & Compassion</h3> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services"> <div class="container"> <h2>Our <span>Services</span></h2> <p class="section-subtitle">We offer comprehensive pharmaceutical services to meet all your healthcare needs</p> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-prescription-bottle-alt"></i> </div> <h3>Prescription Filling</h3> <p>Fast and accurate prescription filling with thorough medication review by our pharmacists.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-syringe"></i> </div> <h3>Immunizations</h3> <p>Flu shots, travel vaccines, and other immunizations administered by certified professionals.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-user-md"></i> </div> <h3>Medication Therapy</h3> <p>Personalized medication therapy management to optimize your treatment outcomes.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-heartbeat"></i> </div> <h3>Health Screenings</h3> <p>Blood pressure, cholesterol, and glucose screenings to monitor your health.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-home"></i> </div> <h3>Home Delivery</h3> <p>Convenient home delivery service for your prescriptions and healthcare products.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-comments"></i> </div> <h3>Consultations</h3> <p>Private consultations with our pharmacists for medication questions and health advice.</p> </div> </div> </div> </section> <!-- Products Section --> <section id="products" class="products"> <div class="container"> <h2>Featured <span>Products</span></h2> <p class="section-subtitle">Browse our selection of quality healthcare products</p> <div class="product-categories"> <button class="category-btn active" data-category="all">All Products</button> <button class="category-btn" data-category="prescription">Prescription</button> <button class="category-btn" data-category="otc">OTC Medicines</button> <button class="category-btn" data-category="wellness">Wellness</button> <button class="category-btn" data-category="personal-care">Personal Care</button> </div> <div class="products-grid"> <div class="product-card" data-category="prescription"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Prescription Medicine"> <div class="product-badge">Prescription</div> </div> <h3>Lipitor 20mg</h3> <p>Cholesterol lowering medication</p> <div class="product-price">$45.99</div> <button class="add-to-cart">Add to Cart</button> </div> <div class="product-card" data-category="otc"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="OTC Medicine"> <div class="product-badge">OTC</div> </div> <h3>Tylenol Extra Strength</h3> <p>Pain reliever and fever reducer</p> <div class="product-price">$8.99</div> <button class="add-to-cart">Add to Cart</button> </div> <div class="product-card" data-category="wellness"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Vitamins"> <div class="product-badge">Wellness</div> </div> <h3>Vitamin D3 1000IU</h3> <p>Supports bone and immune health</p> <div class="product-price">$12.99</div> <button class="add-to-cart">Add to Cart</button> </div> <div class="product-card" data-category="personal-care"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1595341883842-e2f6f0f612d6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="First Aid Kit"> <div class="product-badge">Personal Care</div> </div> <h3>First Aid Kit</h3> <p>Comprehensive 100-piece kit</p> <div class="product-price">$24.99</div> <button class="add-to-cart">Add to Cart</button> </div> <div class="product-card" data-category="otc"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1631729371254-42c2892f0e6e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Allergy Medicine"> <div class="product-badge">OTC</div> </div> <h3>Claritin 24-Hour</h3> <p>Non-drowsy allergy relief</p> <div class="product-price">$15.49</div> <button class="add-to-cart">Add to Cart</button> </div> <div class="product-card" data-category="wellness"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Probiotics"> <div class="product-badge">Wellness</div> </div> <h3>Probiotic Complex</h3> <p>Supports digestive health</p> <div class="product-price">$18.99</div> <button class="add-to-cart">Add to Cart</button> </div> </div> <div class="view-all"> <a href="#" class="btn">View All Products</a> </div> </div> </section> <!-- Prescription Section --> <section id="prescription" class="prescription"> <div class="container"> <div class="prescription-content"> <h2>Easy <span>Prescription</span> Refills</h2> <p>Refill your prescriptions quickly and conveniently through our online system or mobile app.</p> <ul class="prescription-features"> <li><i class="fas fa-check-circle"></i> Fast refill processing</li> <li><i class="fas fa-check-circle"></i> Automatic refill reminders</li> <li><i class="fas fa-check-circle"></i> Multiple pickup options</li> <li><i class="fas fa-check-circle"></i> Home delivery available</li> </ul> <div class="prescription-buttons"> <a href="#" class="btn"><i class="fas fa-upload"></i> Upload Prescription</a> <a href="#" class="btn-outline"><i class="fas fa-redo"></i> Refill Prescription</a> </div> </div> <div class="prescription-image"> <img src="https://images.unsplash.com/photo-1587854692152-cbe660dbde88?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Prescription refill"> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <h2>What Our <span>Customers</span> Say</h2> <p class="section-subtitle">Hear from people who trust us with their healthcare needs</p> <div class="testimonial-slider"> <div class="testimonial active"> <div class="quote"> <i class="fas fa-quote-left"></i> <p>The staff at MediCare is always so helpful and knowledgeable. They take the time to answer all my questions and make sure I understand my medications.</p> <div class="author"> <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah Johnson"> <div class="author-info"> <h4>Sarah Johnson</h4> <span>Regular Customer</span> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> </div> <div class="testimonial"> <div class="quote"> <i class="fas fa-quote-left"></i> <p>I've been going to MediCare for years. Their home delivery service has been a lifesaver since I had surgery and couldn't get out easily.</p> <div class="author"> <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="Robert Wilson"> <div class="author-info"> <h4>Robert Wilson</h4> <span>Senior Customer</span> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> </div> <div class="testimonial"> <div class="quote"> <i class="fas fa-quote-left"></i> <p>As a busy mom, I appreciate how quickly MediCare fills my family's prescriptions. Their immunization services save me extra trips to the doctor.</p> <div class="author"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Emily Davis"> <div class="author-info"> <h4>Emily Davis</h4> <span>Family Customer</span> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> </div> </div> </div> <div class="slider-controls"> <button class="prev"><i class="fas fa-chevron-left"></i></button> <div class="dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> <button class="next"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- Team Section --> <section id="team" class="team"> <div class="container"> <h2>Meet Our <span>Team</span></h2> <p class="section-subtitle">Our dedicated healthcare professionals are here to serve you</p> <div class="team-grid"> <div class="team-member"> <div class="member-image"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Dr. Jennifer Smith"> </div> <h3>Dr. Jennifer Smith</h3> <p class="position">Pharmacist-in-Charge</p> <p class="bio">With over 15 years of experience, Dr. Smith ensures all medications meet the highest standards.</p> <div class="social-links"> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <div class="team-member"> <div class="member-image"> <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Michael Johnson"> </div> <h3>Michael Johnson</h3> <p class="position">Staff Pharmacist</p> <p class="bio">Specializes in medication therapy management and chronic disease management.</p> <div class="social-links"> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="team-member"> <div class="member-image"> <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Sarah Williams"> </div> <h3>Sarah Williams</h3> <p class="position">Pharmacy Technician</p> <p class="bio">Provides excellent customer service and prescription assistance.</p> <div class="social-links"> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <h2>Contact <span>Us</span></h2> <p class="section-subtitle">We're here to answer your questions and serve your healthcare needs</p> <div class="contact-content"> <div class="contact-form"> <form id="contact-form"> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="phone">Phone</label> <input type="tel" id="phone" name="phone"> </div> <div class="form-group"> <label for="subject">Subject</label> <select id="subject" name="subject"> <option value="">Select Subject</option> <option value="prescription">Prescription Question</option> <option value="product">Product Inquiry</option> <option value="service">Service Question</option> <option value="other">Other</option> </select> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" name="message" rows="5" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> <div class="contact-info"> <div class="info-card"> <i class="fas fa-map-marker-alt"></i> <h3>Our Location</h3> <p>123 Health Street<br>Medical District, CA 90210</p> </div> <div class="info-card"> <i class="fas fa-phone-alt"></i> <h3>Phone</h3> <p>+1 (555) 123-4567</p> <p>Emergency: +1 (555) 987-6543</p> </div> <div class="info-card"> <i class="fas fa-envelope"></i> <h3>Email</h3> <p>info@medicare.com</p> <p>prescriptions@medicare.com</p> </div> <div class="info-card"> <i class="fas fa-clock"></i> <h3>Hours</h3> <p>Monday-Friday: 8AM - 9PM</p> <p>Saturday: 9AM - 6PM</p> <p>Sunday: 10AM - 4PM</p> </div> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="footer-content"> <div class="footer-col"> <h3>Medi<span>Care</span></h3> <p>Your trusted neighborhood pharmacy providing quality healthcare products and services since 1995.</p> <div class="footer-social"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#products">Products</a></li> <li><a href="#prescription">Prescription</a></li> <li><a href="#team">Our Team</a></li> </ul> </div> <div class="footer-col"> <h3>Services</h3> <ul> <li><a href="#">Prescription Filling</a></li> <li><a href="#">Immunizations</a></li> <li><a href="#">Health Screenings</a></li> <li><a href="#">Medication Therapy</a></li> <li><a href="#">Home Delivery</a></li> </ul> </div> <div class="footer-col"> <h3>Newsletter</h3> <p>Subscribe to our newsletter for health tips and special offers.</p> <form id="newsletter-form"> <input type="email" placeholder="Your email address" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="footer-bottom"> <p>© 2023 MediCare Pharmacy. All rights reserved.</p> <div class="footer-links"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> </div> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --accent-color: #e74c3c; --dark-color: #2c3e50; --light-color: #ecf0f1; --text-color: #333; --text-light: #7f8c8d; --white: #fff; --black: #000; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; line-height: 1.2; } p { margin-bottom: 1rem; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; } ul { list-style: none; } span { color: var(--primary-color); } .btn { display: inline-block; background-color: var(--primary-color); color: var(--white); padding: 12px 30px; border-radius: 5px; font-weight: 600; transition: var(--transition); border: 2px solid var(--primary-color); } .btn:hover { background-color: transparent; color: var(--primary-color); } .btn-outline { display: inline-block; background-color: transparent; color: var(--primary-color); padding: 10px 25px; border-radius: 5px; font-weight: 600; transition: var(--transition); border: 2px solid var(--primary-color); } .btn-outline:hover { background-color: var(--primary-color); color: var(--white); } .section-subtitle { color: var(--text-light); margin-bottom: 2rem; text-align: center; } /* Top Bar */ .top-bar { background-color: var(--dark-color); color: var(--white); padding: 10px 0; font-size: 0.9rem; } .top-bar-content { display: flex; justify-content: space-between; align-items: center; } .contact-info span { margin-right: 20px; } .contact-info i { margin-right: 5px; color: var(--primary-color); } .social-links a { color: var(--white); margin-left: 15px; transition: var(--transition); } .social-links a:hover { color: var(--primary-color); } /* Navigation */ nav { position: sticky; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 1000; background-color: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } nav .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--dark-color); } .logo span { color: var(--primary-color); } .nav-links { display: flex; } .nav-links li { margin-left: 30px; } .nav-links a { color: var(--dark-color); font-weight: 500; transition: var(--transition); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .hamburger { display: none; cursor: pointer; width: 30px; height: 20px; flex-direction: column; justify-content: space-between; } .hamburger span { display: block; width: 100%; height: 3px; background-color: var(--dark-color); transition: var(--transition); } /* Hero Section */ .hero { padding: 100px 0; background-color: var(--light-color); } .hero .container { display: flex; align-items: center; gap: 50px; } .hero-content { flex: 1; } .hero-image { flex: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .hero-image img { display: block; transition: var(--transition); } .hero-image:hover img { transform: scale(1.05); } .hero h1 { font-size: 3rem; margin-bottom: 1.5rem; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; color: var(--text-light); } .hero-buttons { display: flex; gap: 20px; } /* About Section */ .about { padding: 100px 0; } .about .container { display: flex; align-items: center; gap: 50px; } .about-image { flex: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .about-image img { display: block; transition: var(--transition); } .about-image:hover img { transform: scale(1.05); } .about-content { flex: 1; } .about h2 { font-size: 2.5rem; margin-bottom: 1.5rem; } .about p { margin-bottom: 1.5rem; color: var(--text-light); } .about-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 30px; } .feature { text-align: center; padding: 20px 15px; background-color: var(--light-color); border-radius: 5px; transition: var(--transition); } .feature:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .feature i { font-size: 2rem; color: var(--primary-color); margin-bottom: 15px; } .feature h3 { font-size: 1.1rem; } /* Services Section */ .services { padding: 100px 0; background-color: var(--light-color); text-align: center; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .service-card { background-color: var(--white); padding: 40px 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-icon { width: 80px; height: 80px; background-color: rgba(52, 152, 219, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .service-icon i { font-size: 2rem; color: var(--primary-color); } .service-card h3 { margin-bottom: 15px; } .service-card p { color: var(--text-light); font-size: 0.9rem; } /* Products Section */ .products { padding: 100px 0; text-align: center; } .product-categories { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .category-btn { padding: 8px 20px; background-color: var(--light-color); border: none; border-radius: 30px; cursor: pointer; transition: var(--transition); font-weight: 500; } .category-btn.active { background-color: var(--primary-color); color: var(--white); } .category-btn:hover { background-color: var(--primary-color); color: var(--white); } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 30px; } .product-card { background-color: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .product-image { height: 200px; position: relative; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .product-card:hover .product-image img { transform: scale(1.1); } .product-badge { position: absolute; top: 10px; right: 10px; background-color: var(--primary-color); color: var(--white); padding: 5px 10px; border-radius: 3px; font-size: 0.8rem; font-weight: 600; } .product-card h3 { margin: 15px 15px 5px; font-size: 1.1rem; } .product-card p { margin: 0 15px 10px; color: var(--text-light); font-size: 0.9rem; } .product-price { margin: 10px 15px; font-size: 1.2rem; font-weight: 700; color: var(--primary-color); } .add-to-cart { display: block; width: calc(100% - 30px); margin: 15px; padding: 10px; background-color: var(--primary-color); color: var(--white); border: none; border-radius: 5px; cursor: pointer; transition: var(--transition); font-weight: 600; } .add-to-cart:hover { background-color: var(--dark-color); } .view-all { margin-top: 50px; } /* Prescription Section */ .prescription { padding: 100px 0; background-color: var(--light-color); } .prescription .container { display: flex; align-items: center; gap: 50px; } .prescription-content { flex: 1; } .prescription-image { flex: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .prescription-image img { display: block; transition: var(--transition); } .prescription-image:hover img { transform: scale(1.05); } .prescription h2 { font-size: 2.5rem; margin-bottom: 1.5rem; } .prescription p { margin-bottom: 1.5rem; color: var(--text-light); } .prescription-features { margin: 30px 0; } .prescription-features li { margin-bottom: 15px; display: flex; align-items: center; } .prescription-features i { color: var(--primary-color); margin-right: 10px; font-size: 1.2rem; } .prescription-buttons { display: flex; gap: 20px; } .prescription-buttons .btn i, .prescription-buttons .btn-outline i { margin-right: 8px; } /* Testimonials Section */ .testimonials { padding: 100px 0; text-align: center; } .testimonial-slider { max-width: 800px; margin: 50px auto 0; position: relative; } .testimonial { display: none; background-color: var(--white); padding: 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .testimonial.active { display: block; } .quote { position: relative; } .quote i { font-size: 2rem; color: var(--primary-color); opacity: 0.3; position: absolute; top: -10px; left: -10px; } .quote p { font-size: 1.1rem; font-style: italic; margin-bottom: 30px; } .author { display: flex; align-items: center; justify-content: center; } .author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-right: 15px; } .author-info h4 { margin-bottom: 5px; font-size: 1.1rem; text-align: left; } .author-info span { font-size: 0.9rem; color: var(--text-light); text-align: left; display: block; } .rating { color: var(--accent-color); text-align: left; margin-top: 5px; } .slider-controls { display: flex; justify-content: center; align-items: center; margin-top: 30px; } .slider-controls button { background: none; border: none; font-size: 1.5rem; color: var(--primary-color); cursor: pointer; padding: 0 15px; } .dots { display: flex; } .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; margin: 0 5px; cursor: pointer; transition: var(--transition); } .dot.active { background-color: var(--primary-color); } /* Team Section */ .team { padding: 100px 0; background-color: var(--light-color); text-align: center; } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .team-member { background-color: var(--white); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .team-member:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .member-image { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 5px solid var(--light-color); } .member-image img { width: 100%; height: 100%; object-fit: cover; } .team-member h3 { margin-bottom: 5px; } .position { color: var(--primary-color); font-weight: 600; margin-bottom: 15px; } .bio { color: var(--text-light); font-size: 0.9rem; margin-bottom: 20px; } .social-links { display: flex; justify-content: center; gap: 15px; } .social-links a { width: 35px; height: 35px; border-radius: 50%; background-color: var(--light-color); color: var(--primary-color); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .social-links a:hover { background-color: var(--primary-color); color: var(--white); } /* Contact Section */ .contact { padding: 100px 0; text-align: center; } .contact-content { display: flex; gap: 50px; margin-top: 50px; text-align: left; } .contact-form { flex: 1; background-color: var(--white); padding: 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit; font-size: 1rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); } .contact-info { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .info-card { background-color: var(--white); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .info-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .info-card i { font-size: 2rem; color: var(--primary-color); margin-bottom: 20px; } .info-card h3 { margin-bottom: 15px; } .info-card p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 5px; } /* Footer */ footer { background-color: var(--dark-color); color: var(--white); padding: 60px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 60px; } .footer-col h3 { font-size: 1.3rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 2px; background-color: var(--primary-color); } .footer-col p { color: #bbb; font-size: 0.9rem; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: #bbb; font-size: 0.9rem; transition: var(--transition); } .footer-col ul li a:hover { color: var(--primary-color); padding-left: 5px; } .footer-social { display: flex; gap: 15px; margin-top: 20px; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: var(--white); transition: var(--transition); } .footer-social a:hover { background-color: var(--primary-color); transform: translateY(-3px); } #newsletter-form { position: relative; margin-top: 20px; } #newsletter-form input { width: 100%; padding: 12px 50px 12px 15px; border: none; border-radius: 30px; font-family: inherit; } #newsletter-form button { position: absolute; right: 5px; top: 5px; background: none; border: none; color: var(--primary-color); font-size: 1.2rem; cursor: pointer; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; color: #bbb; font-size: 0.9rem; } .footer-links a { color: #bbb; margin-left: 20px; transition: var(--transition); } .footer-links a:hover { color: var(--primary-color); } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Styles */ @media (max-width: 992px) { .hero .container, .about .container, .prescription .container, .contact-content { flex-direction: column; } .hero-image, .about-image, .prescription-image { margin-top: 40px; order: -1; } .hero h1 { font-size: 2.5rem; } } @media (max-width: 768px) { .hamburger { display: flex; } .nav-links { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--white); flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 40px; transition: var(--transition); } .nav-links.active { left: 0; } .nav-links li { margin: 15px 0; } .top-bar-content { flex-direction: column; gap: 10px; } .contact-info { grid-template-columns: 1fr; } } @media (max-width: 576px) { .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .hero-buttons, .prescription-buttons { flex-direction: column; gap: 15px; } .section-subtitle { font-size: 0.9rem; } .footer-bottom { flex-direction: column; gap: 15px; text-align: center; } .footer-links a { margin: 0 10px; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Navigation const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); const navItems = document.querySelectorAll('.nav-links li'); hamburger.addEventListener('click', function() { this.classList.toggle('active'); navLinks.classList.toggle('active'); }); navItems.forEach(item => { item.addEventListener('click', function() { hamburger.classList.remove('active'); navLinks.classList.remove('active'); }); }); // Smooth Scrolling for Navigation Links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Product Filtering const categoryBtns = document.querySelectorAll('.category-btn'); const productCards = document.querySelectorAll('.product-card'); categoryBtns.forEach(btn => { btn.addEventListener('click', function() { // Remove active class from all buttons categoryBtns.forEach(b => b.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); const category = this.getAttribute('data-category'); // Filter products productCards.forEach(card => { if (category === 'all' || card.getAttribute('data-category') === category) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }); }); // Testimonial Slider const testimonials = document.querySelectorAll('.testimonial'); const dots = document.querySelectorAll('.dot'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let currentTestimonial = 0; function showTestimonial(index) { testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); testimonials[index].classList.add('active'); dots[index].classList.add('active'); currentTestimonial = index; } dots.forEach((dot, index) => { dot.addEventListener('click', () => showTestimonial(index)); }); prevBtn.addEventListener('click', () => { currentTestimonial = (currentTestimonial - 1 + testimonials.length) % testimonials.length; showTestimonial(currentTestimonial); }); nextBtn.addEventListener('click', () => { currentTestimonial = (currentTestimonial + 1) % testimonials.length; showTestimonial(currentTestimonial); }); // Auto-rotate testimonials let testimonialInterval = setInterval(() => { currentTestimonial = (currentTestimonial + 1) % testimonials.length; showTestimonial(currentTestimonial); }, 5000); // Pause auto-rotation on hover const testimonialSlider = document.querySelector('.testimonial-slider'); testimonialSlider.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); testimonialSlider.addEventListener('mouseleave', () => { testimonialInterval = setInterval(() => { currentTestimonial = (currentTestimonial + 1) % testimonials.length; showTestimonial(currentTestimonial); }, 5000); }); // Form Validation const contactForm = document.getElementById('contact-form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Simple validation const name = document.getElementById('name').value; const email = document.getElementById('email').value; const message = document.getElementById('message').value; if (!name || !email || !message) { alert('Please fill in all required fields'); return; } // Here you would typically send the form data to a server alert('Thank you for your message! We will contact you shortly.'); this.reset(); }); } // Newsletter Form const newsletterForm = document.getElementById('newsletter-form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const emailInput = this.querySelector('input[type="email"]'); if (emailInput.value) { alert('Thank you for subscribing to our newsletter!'); emailInput.value = ''; } }); } // Add to Cart Buttons const addToCartBtns = document.querySelectorAll('.add-to-cart'); addToCartBtns.forEach(btn => { btn.addEventListener('click', function() { const productCard = this.closest('.product-card'); const productName = productCard.querySelector('h3').textContent; const productPrice = productCard.querySelector('.product-price').textContent; // Here you would typically add the product to a shopping cart alert(`${productName} (${productPrice}) has been added to your cart!`); }); }); // Intersection Observer for Animations const observerOptions = { threshold: 0.1 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animated'); observer.unobserve(entry.target); } }); }, observerOptions); // Observe sections const sections = document.querySelectorAll('section'); sections.forEach(section => { observer.observe(section); }); });
Output Preview
Desktop
Mobile
Fullscreen
