https://github.com/sujeethy/digital_marketing
A modern, responsive Digital Marketing Agency website featuring stylish hover effects on cards, vibrant images, and easy contact options, built with Bootstrap, custom CSS, and JavaScript.
https://github.com/sujeethy/digital_marketing
bootstrap cards css draggable html jquery model
Last synced: 2 months ago
JSON representation
A modern, responsive Digital Marketing Agency website featuring stylish hover effects on cards, vibrant images, and easy contact options, built with Bootstrap, custom CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/sujeethy/digital_marketing
- Owner: Sujeethy
- Created: 2024-06-04T22:50:27.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-22T12:26:35.000Z (almost 2 years ago)
- Last Synced: 2025-01-08T18:49:02.315Z (over 1 year ago)
- Topics: bootstrap, cards, css, draggable, html, jquery, model
- Language: HTML
- Homepage: https://digital-marketing-gold.vercel.app
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Digital Marketing Agency - README
## Project Overview
This project is a Digital Marketing Agency website that provides a variety of services to its clients. The website is designed to showcase the agency's services, highlight its expertise, and provide an easy way for potential clients to contact the agency. It features a modern, responsive design using Bootstrap and custom CSS, with interactive elements powered by JavaScript and jQuery.
## Features
### Home Section
- **Award-Winning Agency**: The homepage highlights the agency as an award-winning entity, with a call-to-action button for users to contact the agency.
- **Hero Image**: A visually appealing hero image is displayed next to the text.
### Popup Contact Form
- **Popup Modal**: Clicking the "Contact Us" button opens a modal form that users can fill out to contact the agency.
- **Form Fields**: Includes fields for email, first name, last name, and a checkbox for agreeing to terms and conditions.
- **Form Submission**: The form is submitted via AJAX to a predefined URL.
### Services Section
- **What We Do**: A section that outlines the services provided by the agency.
- **Service Details**: Each service is described with a title and a brief description.
### Why Choose Us Section
- **Reasons to Choose**: Highlights the key reasons why the agency stands out, such as clarified vision, high performance, security, and strategy.
- **Visual Representation**: Icons and images are used to visually represent each feature.
### Our Projects Section
- **Project Showcase**: Displays images and descriptions of the agency’s recent projects.
- **Dynamic Content**: Includes a mix of images and text blocks to provide a detailed view of the projects.
### Company Growth Section
- **Growth Metrics**: Showcases key metrics like satisfied customers, days of operation, completed projects, and awards won.
- **Interactive Count-Up**: The metrics animate with a count-up effect as users scroll down.
### Testimonials Section
- **Client Feedback**: Displays a testimonial from a client with a quote and attribution.
### Footer
- **Branding**: The footer includes an image that represents the brand or logo of the agency.
## Technologies Used
- **HTML5**: The structure of the website.
- **CSS3**: Custom styling with Bootstrap integration for responsiveness.
- **JavaScript**: Interactive features such as the popup modal and form submission.
- **jQuery**: Used for DOM manipulation and AJAX form submission.
- **Bootstrap 4**: Provides a responsive grid system and pre-designed components.
- **Font Awesome**: Icons used throughout the website.
- **Google Fonts**: Custom fonts for styling text elements.
- **Getform**: Backend service for handling form submissions.
## Installation & Setup
1. **Clone the repository**:
```bash
git clone https://github.com/yourusername/digital-marketing-agency.git
cd digital-marketing-agency
```
2. **Open the project**:
Open the `index.html` file in your web browser to view the website.
3. **Modify the Content**:
- Update the text and images in the HTML file as needed.
- Customize the CSS by editing the `styles_new.css` file.
4. **Deploy**:
Deploy the website to any web server or hosting service of your choice.
## Usage
- **Contact Form**: Ensure the form action URL is correctly set to your backend service or email handler.
- **Interactive Elements**: The count-up effect for metrics and the popup modal for the contact form should work out of the box.
## Customization
- **Styles**: Modify `styles_new.css` to change the look and feel of the website.
- **Scripts**: Edit `script.js` to add more interactive features or modify existing ones.
- **Images**: Replace placeholder images with your own.
## License
This project is licensed under the MIT License - see the LICENSE file for details.
---