A modern, bold, and corporate-style website for a cybersecurity and digital services company. Built with HTML, CSS, and JavaScript, featuring a red, white, and black color theme.
- Modern Corporate Design: Clean, professional layout with bold typography
- Red, White, Black Color Scheme: Following the specified color palette
- Fully Responsive: Mobile-first design that works on all devices
- Interactive Elements: Smooth animations, hover effects, and modern UI components
- Multiple Pages: Home, About, Services, Trainings, Contact, and more
our_website/
├── index.html # Homepage
├── about.html # About us page
├── branding.html # Branding services page
├── cloud-penetration.html # Cloud penetration testing page
├── code-review.html # Code review services page
├── contact.html # Contact page
├── digital-marketing.html # Digital marketing services page
├── email-marketing.html # Email marketing services page
├── graphic-designing.html # Graphic designing services page
├── mobile-penetration.html # Mobile penetration testing page
├── orm.html # Online reputation management page
├── seo.html # SEO services page
├── services.html # Services overview page
├── social-media-marketing.html # Social media marketing page
├── software-application.html # Software application services page
├── trainings.html # Training programs page
├── web-application.html # Web application services page
├── web-penetration.html # Web penetration testing page
├── website-development.html # Website development services page
├── css/
│ ├── base.css # Base styles and variables
│ ├── components.css # Reusable UI components
│ ├── layout.css # Layout and grid systems
│ ├── pages.css # Page-specific styles
│ └── styles.min.css # Minified production CSS
├── styles.css # Main stylesheet (legacy or global)
├── script.js # JavaScript functionality
├── public/ # Images and assets
│ ├── 1.jpg, 2.jpg, ... # Image assets
│ └── macksofy logo.png, ... # Logos and graphics
├── favicon.ico # Website favicon
├── robots.txt # Search engine crawling rules
├── sitemap.xml # Site structure for search engines
└── README.md # This file
- ✅ Standardized brand name to "Macksofy Technologies" across all pages
- ✅ Updated all page titles, headers, and footer content
- ✅ Fixed logo references to use the actual Macksofy logo
- ✅ Added comprehensive meta tags (description, keywords, author)
- ✅ Implemented Open Graph tags for social media sharing
- ✅ Added Twitter Card meta tags
- ✅ Created canonical URLs for all pages
- ✅ Added robots.txt and sitemap.xml for search engines
- ✅ Created modular CSS structure for future development:
base.css- Reset styles, variables, and typographycomponents.css- Reusable UI componentslayout.css- Grid systems and page layoutspages.css- Page-specific styles
- ✅ Maintained original
styles.cssfor current functionality - ✅ All pages now use consistent CSS references
- ✅ Added favicon support for all devices
- ✅ Created robots.txt for search engine crawling
- ✅ Generated sitemap.xml for better SEO
- ✅ Updated all HTML files to use optimized CSS
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No additional software required - this is a static website
-
Local Development:
- Simply open
index.htmlin your web browser - Or use a local server for better development experience
- Simply open
-
Using a Local Server (Recommended):
# Using Python 3 python -m http.server 8000 # Using Node.js (if you have http-server installed) npx http-server # Using PHP php -S localhost:8000
-
Access the Website:
- Open your browser and go to
http://localhost:8000 - The website will be fully functional with all features
- Open your browser and go to
- index.html: Homepage with hero, trust, services, trainings, testimonials, FAQ, and CTAs
- about.html: Company overview and mission
- branding.html: Branding services
- cloud-penetration.html: Cloud penetration testing
- code-review.html: Code review services
- contact.html: Contact form, company info, location, FAQ, social links
- digital-marketing.html: Digital marketing services
- email-marketing.html: Email marketing services
- graphic-designing.html: Graphic designing services
- mobile-penetration.html: Mobile penetration testing
- orm.html: Online reputation management
- seo.html: SEO services
- services.html: Services overview
- social-media-marketing.html: Social media marketing
- software-application.html: Software application services
- trainings.html: Training programs, course details, pricing, enrollment
- web-application.html: Web application services
- web-penetration.html: Web penetration testing
- website-development.html: Website development services
The website uses CSS custom properties (variables) for easy color customization:
:root {
--primary-color: #FF0000; /* Main red color */
--primary-dark: #CC0000; /* Darker red for hover states */
--secondary-color: #000000; /* Black */
--text-color: #333333; /* Dark gray for text */
--background: #FFFFFF; /* White background */
/* ... more variables */
}The website uses Inter font family. To change fonts:
- Update the Google Fonts link in HTML files
- Modify the
font-familyproperty in CSS
- Company Name: Updated to "Macksofy Technologies" throughout all HTML files
- Contact Information: Update phone, email, and address in
contact.html - Services: Modify service descriptions in the relevant HTML files
- Training Programs: Update course details in
trainings.html
- Images and assets are stored in the
public/folder (notimages/). - Update image paths in HTML files to reference
public/. - Font Awesome icons are used via CDN (see HTML files for link).
- Mobile Menu: Hamburger menu for mobile devices
- FAQ Accordion: Expandable FAQ sections
- Form Validation: Contact form with client-side validation
- Smooth Scrolling: Smooth navigation between sections
- Hover Effects: Interactive hover animations
- WhatsApp Float Button: Floating contact button
- Mobile First: Designed for mobile devices first
- Breakpoints: Responsive at 768px and 480px
- Flexible Grid: CSS Grid and Flexbox for layouts
- Adaptive Typography: Font sizes adjust to screen size
- Optimized CSS: Efficient stylesheet structure
- Minimal JavaScript: Lightweight interactive features
- Fast Loading: No heavy dependencies
- SEO Friendly: Semantic HTML structure
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
This website can be deployed to any static hosting service:
- GitHub Pages: Free hosting for GitHub repositories
- Netlify: Drag and drop deployment
- Vercel: Fast deployment with Git integration
- AWS S3: Scalable static hosting
- Firebase Hosting: Google's hosting solution
- Upload all files to your hosting provider
- Ensure
index.htmlis in the root directory - Configure your domain (if applicable)
- Test all pages and functionality
For production deployment:
- Update contact form to use a backend service
- Implement proper form validation and CSRF protection
- Use HTTPS for all connections
- Consider adding a Content Security Policy (CSP)
- Update WhatsApp number and social media links
- Logo: Replace text logo with image logo (see
public/for logo files) - Colors: Update CSS variables for brand colors
- Content: Modify text content in HTML files
- Services: Add/remove service cards or pages
- Contact Form: Connect to email service or CRM
- Create new HTML file following existing structure
- Update navigation in all HTML files
- Add page-specific styles to CSS
- Test responsiveness and functionality
The website includes:
- Semantic HTML structure
- Meta tags for social sharing
- Proper heading hierarchy
- Alt text for images (when added)
- Fast loading times
- Mobile-friendly design
This project is open source and available under the MIT License.
Feel free to submit issues and enhancement requests!
Macksofy Technologies - Your trusted partner in cybersecurity excellence 🔒