A modern, responsive landing page for a cloud hosting service built with HTML, CSS, and JavaScript. Features a component-based architecture and optimized performance with responsive images and animations.
- Responsive Design - Fully responsive layout that works on all devices
- Component-Based Architecture - Modular HTML components for easy maintenance
- Performance Optimized - WebP images with fallbacks, lazy loading, and optimized assets
- Modern CSS - CSS Grid, Flexbox, and custom properties
- Interactive Elements - Collapsible navigation, smooth animations with AOS
- SEO Optimized - Semantic HTML, meta tags, and Open Graph properties
- Cross-Browser Compatible - Normalized CSS for consistent rendering
- HTML5 - Semantic markup with accessibility features
- CSS3 - Modern CSS with Grid, Flexbox, and animations
- JavaScript (ES6+) - Interactive components and DOM manipulation
- Parcel - Build tool for development and production
- AOS (Animate On Scroll) - Scroll-triggered animations
- Google Fonts - Inter font family for typography
moshify/
├── css/
│ ├── normalize.css # CSS reset and normalization
│ └── styles.css # Main stylesheet
├── js/
│ └── main.js # JavaScript functionality
├── images/ # Optimized images (WebP + fallbacks)
├── components/ # Reusable HTML components
│ ├── navbar/
│ ├── collapsible/
│ ├── button.html
│ ├── card.html
│ └── ...
├── block/ # Page section components
│ ├── hero.html
│ ├── feature.html
│ ├── testimonial.html
│ └── ...
├── Layout/
│ └── grid.html # Grid system examples
├── index.html # Main landing page
├── playground.html # Component testing page
└── package.json # Project dependencies
The project uses a modular component system:
- Buttons - Various button styles (primary, secondary, accent, outline)
- Cards - Content containers with headers and bodies
- Badges - Small status indicators
- Icons - SVG sprite-based icon system
- Forms - Input groups and form elements
- Lists - Styled list components
- Media Objects - Image + content combinations
- Grid System - Responsive CSS Grid layouts
- Navigation - Collapsible mobile-friendly navbar
- Hero Section - Landing page header with CTA
- Feature Blocks - Service highlight sections
- Testimonials - Customer review components
- Pricing Plans - Subscription plan cards
- Footer - Multi-column footer with links
- Node.js (v12 or higher)
- npm or yarn
-
Clone the repository
git clone <repository-url> cd moshify
-
Install dependencies
npm install
-
Start development server
npm start
or
npx parcel index.html
-
Build for production
npm run build
or
npx parcel build index.html
The design adapts to different screen sizes:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Hero Section - Main value proposition with CTA
- Domain Search - Interactive domain name search
- Pricing Plans - Three-tier hosting plans
- Features - Key service benefits with icons
- Showcase - Control panel preview
- Testimonials - Customer reviews
- Call-to-Action - Final conversion section
- Footer - Links and company information
Primary colors are defined as CSS custom properties in styles.css:
- Primary: Blue theme
- Secondary: Orange accents
- Dark: Navigation and footer backgrounds
- Font Family: Inter (Google Fonts)
- Responsive font sizes using clamp()
- Consistent vertical rhythm
- WebP format with PNG/JPG fallbacks
- Retina-ready (@2x versions)
- Optimized file sizes
- Lazy Loading - Images load as needed
- WebP Images - Modern format with fallbacks
- Minified Assets - Compressed CSS and JS
- Font Display Swap - Improved font loading
- Preconnect - Faster Google Fonts loading
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- IE11+ (with graceful degradation)
Created as part of a web development learning project.
- Fork the repository
- Create a feature branch
- Make your changes
- Test responsiveness across devices
- Submit a pull request