About the Project: SmileCraft is a dental clinic website built with HTML, CSS, and JavaScript. It presents services, team profiles, and clinic information in a clean, professional layout — structured to show real-world frontend skills.
Key Highlights: Component-based JavaScript architecture, smooth scroll interactions, sticky header, horizontal doctor card slider, and a fully responsive layout across all screen sizes.
- Header — Top bar with contact info, navigation, and sticky scroll behavior.
- Hero — Full-width banner with headline, description, and email callback form.
- Services — Six dental service cards displayed in a responsive grid layout.
- About — Clinic overview section with image and descriptive content.
- Doctors — Horizontally scrollable cards showing team members and roles.
- CTA — Appointment booking section with banner image and call-to-action button.
- Blog — Three blog cards with date badges and read more links.
- Footer — Multi-column layout with links, services, and contact details.
- Back to Top — Floating button that appears after scrolling down the page.
- Component-Based Structure — Each section is a separate, independently rendered JavaScript module.
- Sticky Header — Header slides in with animation when user scrolls down the page.
- Mobile Navigation — Toggle menu opens and closes smoothly on smaller screens.
- Horizontal Doctor Slider — Scrollable card list with custom scrollbar styling per breakpoint.
- Email Callback Form — Hero form captures email and confirms submission with a message.
- Back to Top Button — Appears after 300px scroll with smooth visibility transition.
- Responsive Design — Layout adapts cleanly across mobile, tablet, and desktop screens.
- HTML5 — Semantic structure with accessible landmarks and ARIA labels.
- CSS3 — Custom properties, CSS Grid, Flexbox, animations, and media queries.
- JavaScript (ES6+) — Modular components using ES module imports and exports.
- Ionicons — Icon library used for UI icons throughout the site.
- Google Fonts — Poppins and Roboto loaded for consistent typography.
smile-craft/
│
├── index.html # Main HTML with section root elements
│
├── assets/
│ ├── css/
│ │ └── style.css # Complete styles with custom properties and responsive design
│ │
│ ├── js/
│ │ ├── app.js # Main entry point that imports and initializes all components
│ │ ├── header.js # Header component with navigation and sticky behavior
│ │ ├── hero.js # Hero banner with email form functionality
│ │ ├── service.js # Services grid with cards and banner
│ │ ├── about.js # About section component
│ │ ├── doctor.js # Doctor profiles with horizontal scroll
│ │ ├── cta.js # Call-to-action section component
│ │ ├── blog.js # Blog cards grid component
│ │ ├── footer.js # Footer with multiple columns
│ │ └── backTop.js # Back-to-top button with scroll detection
│ │
│ └── images/ # Hero banners, service icons, doctor photos, blog images
│
└── README.md # Project documentation
-
Clone the repository:
git clone https://github.com/nawazdevx/smile-craft.git
<li>
<strong>Open the project:</strong>
<ul>
<li>Open <code>index.html</code> directly in your browser</li>
<li>Or run a local server:</li>
</ul>
<pre><code>python -m http.server 3000</code></pre>
Then visit <code>http://localhost:3000</code>
</li>
<li>
<strong>Start Customizing:</strong>
<ul>
<li>Update clinic name, contact, and menu links in <code>header.js</code></li>
<li>Edit headline, description, and hero image in <code>hero.js</code></li>
<li>Add or update dental service cards in <code>service.js</code></li>
<li>Change doctor names, roles, and photos in <code>doctor.js</code></li>
<li>Update colors, fonts, and spacing variables in <code>style.css</code></li>
</ul>
</li>
</ol>
License: This project is licensed under the MIT License.
Contact: Connect with me on LinkedIn or visit my Portfolio.
Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.
