Compare commits
No commits in common. "dev" and "main" have entirely different histories.
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
BIN
assets/dm.jpg
BIN
assets/dm.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 641 KiB |
BIN
assets/email.png
BIN
assets/email.png
Binary file not shown.
|
Before Width: | Height: | Size: 450 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 496 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 502 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 370 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 214 KiB |
BIN
assets/team1.jpg
BIN
assets/team1.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 440 KiB |
BIN
assets/team2.png
BIN
assets/team2.png
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
BIN
assets/team3.jpg
BIN
assets/team3.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
BIN
assets/web.jpeg
BIN
assets/web.jpeg
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
220
contact.html
220
contact.html
|
|
@ -1,220 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Multi-Step Form</title>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
|
||||||
<link rel="stylesheet" href="css/contact.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<div class="container">
|
|
||||||
<div class="logo">Digital Agency</div>
|
|
||||||
<nav>
|
|
||||||
<div class="hamburger" onclick="toggleMenu()">
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<div class="nav-links">
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="#services">Services</a>
|
|
||||||
<a href="#pricing">Pricing</a>
|
|
||||||
<a href="#team">Team</a>
|
|
||||||
<a href="contact.html">Contact</a>
|
|
||||||
<a href="swiper.html">Slider</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="form-container">
|
|
||||||
<h2>Multi-Step Form</h2>
|
|
||||||
<div class="progress-container">
|
|
||||||
<div class="progress-bar" id="progressBar"></div>
|
|
||||||
</div>
|
|
||||||
<form id="multiStepForm">
|
|
||||||
<!-- Step 1: Personal Details -->
|
|
||||||
<div class="step active" id="step1">
|
|
||||||
<h3>Step 1: Personal Details</h3>
|
|
||||||
<input type="text" id="fullName" placeholder="Full Name (min 3 chars)" required>
|
|
||||||
<input type="email" id="email" placeholder="Email" required>
|
|
||||||
<input type="text" id="phone" placeholder="Phone (10 digits)" maxlength="10" required>
|
|
||||||
<div>
|
|
||||||
<label>Gender:</label>
|
|
||||||
<input type="radio" name="gender" value="male" required> Male
|
|
||||||
<input type="radio" name="gender" value="female" required> Female
|
|
||||||
<input type="radio" name="gender" value="other" required> Other
|
|
||||||
</div>
|
|
||||||
<input type="number" id="age" placeholder="Age (18-100)" min="18" max="100" required>
|
|
||||||
<div class="button-container">
|
|
||||||
<button type="button" onclick="nextStep()">Next</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 2: Professional Details -->
|
|
||||||
<div class="step" id="step2">
|
|
||||||
<h3>Step 2: Professional Details</h3>
|
|
||||||
<select id="education" required>
|
|
||||||
<option value="">Select Education</option>
|
|
||||||
<option value="highschool">High School</option>
|
|
||||||
<option value="bachelor">Bachelor's Degree</option>
|
|
||||||
<option value="master">Master's Degree</option>
|
|
||||||
<option value="phd">PhD</option>
|
|
||||||
</select>
|
|
||||||
<div>
|
|
||||||
<label>Skills:</label>
|
|
||||||
<input type="checkbox" name="skills" value="HTML"> Non-Medical
|
|
||||||
<input type="checkbox" name="skills" value="CSS"> Enineering
|
|
||||||
<input type="checkbox" name="skills" value="JavaScript"> Master of Engineering
|
|
||||||
<input type="checkbox" name="skills" value="React"> PhD
|
|
||||||
</div>
|
|
||||||
<input type="number" id="experience" placeholder="Experience (0-50 years)" min="0" max="50" required>
|
|
||||||
<input type="text" id="currentRole" placeholder="Current Role" required>
|
|
||||||
<div class="button-container">
|
|
||||||
<button type="button" onclick="prevStep()">Previous</button>
|
|
||||||
<button type="button" onclick="nextStep()">Next</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 3: Review & Submit -->
|
|
||||||
<div class="step" id="step3">
|
|
||||||
<h3>Step 3: Review & Submit</h3>
|
|
||||||
<div id="review"></div>
|
|
||||||
<div class="button-container">
|
|
||||||
<button type="button" onclick="prevStep()">Edit</button>
|
|
||||||
<button type="button" onclick="submitForm()">Submit</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="button-container">
|
|
||||||
<button type="button" onclick="clearForm()">Clear Form</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="successMessage">
|
|
||||||
<h3>Success!</h3>
|
|
||||||
<p>Your data has been submitted successfully.</p>
|
|
||||||
<button onclick="exportData()">Export Data as JSON</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
let currentStep = 0;
|
|
||||||
|
|
||||||
function showStep(step) {
|
|
||||||
const steps = document.querySelectorAll('.step');
|
|
||||||
steps.forEach(s => s.classList.remove('active'));
|
|
||||||
steps[step].classList.add('active');
|
|
||||||
updateProgressBar();
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextStep() {
|
|
||||||
if (validateStep(currentStep)) {
|
|
||||||
currentStep++;
|
|
||||||
if (currentStep >= document.querySelectorAll('.step').length) {
|
|
||||||
currentStep = document.querySelectorAll('.step').length - 1;
|
|
||||||
}
|
|
||||||
showStep(currentStep);
|
|
||||||
if (currentStep === 2) {
|
|
||||||
reviewData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function prevStep() {
|
|
||||||
currentStep--;
|
|
||||||
if (currentStep < 0) {
|
|
||||||
currentStep = 0;
|
|
||||||
}
|
|
||||||
showStep(currentStep);
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateStep(step) {
|
|
||||||
const inputs = document.querySelectorAll(`#step${step + 1} input, #step${step + 1} select`);
|
|
||||||
for (let input of inputs) {
|
|
||||||
if (!input.checkValidity()) {
|
|
||||||
input.reportValidity();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateProgressBar() {
|
|
||||||
const totalSteps = document.querySelectorAll('.step').length;
|
|
||||||
const progressPercentage = ((currentStep + 1) / totalSteps) * 100;
|
|
||||||
document.getElementById('progressBar').style.width = `${progressPercentage}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function reviewData() {
|
|
||||||
const fullName = document.getElementById('fullName').value;
|
|
||||||
const email = document.getElementById('email').value;
|
|
||||||
const phone = document.getElementById('phone').value;
|
|
||||||
const gender = document.querySelector('input[name="gender"]:checked').value;
|
|
||||||
const age = document.getElementById('age').value;
|
|
||||||
const education = document.getElementById('education').value;
|
|
||||||
const experience = document.getElementById('experience').value;
|
|
||||||
const currentRole = document.getElementById('currentRole').value;
|
|
||||||
|
|
||||||
const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value).join(', ');
|
|
||||||
|
|
||||||
document.getElementById('review').innerHTML = `
|
|
||||||
<p><strong>Full Name:</strong> ${fullName}</p>
|
|
||||||
<p><strong>Email:</strong> ${email}</p>
|
|
||||||
<p><strong>Phone:</strong> ${phone}</p>
|
|
||||||
<p><strong>Gender:</strong> ${gender}</p>
|
|
||||||
<p><strong>Age:</strong> ${age}</p>
|
|
||||||
<p><strong>Education:</strong> ${education}</p>
|
|
||||||
<p><strong>Skills:</strong> ${skills}</p>
|
|
||||||
<p><strong>Experience:</strong> ${experience} years</p>
|
|
||||||
<p><strong>Current Role:</strong> ${currentRole}</p>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function submitForm() {
|
|
||||||
const data = {
|
|
||||||
fullName: document.getElementById('fullName').value,
|
|
||||||
email: document.getElementById('email').value,
|
|
||||||
phone: document.getElementById('phone').value,
|
|
||||||
gender: document.querySelector('input[name="gender"]:checked').value,
|
|
||||||
age: document.getElementById('age').value,
|
|
||||||
education: document.getElementById('education').value,
|
|
||||||
skills: Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(el => el.value),
|
|
||||||
experience: document.getElementById('experience').value,
|
|
||||||
currentRole: document.getElementById('currentRole').value
|
|
||||||
};
|
|
||||||
|
|
||||||
localStorage.setItem('formData', JSON.stringify(data));
|
|
||||||
document.getElementById('multiStepForm').style.display = 'none';
|
|
||||||
document.getElementById('successMessage').style.display = 'block';
|
|
||||||
}
|
|
||||||
|
|
||||||
function exportData() {
|
|
||||||
const data = localStorage.getItem('formData');
|
|
||||||
const blob = new Blob([data], { type: 'application/json' });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = 'formData.json';
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearForm() {
|
|
||||||
document.getElementById('multiStepForm').reset();
|
|
||||||
localStorage.removeItem('formData');
|
|
||||||
currentStep = 0;
|
|
||||||
showStep(currentStep);
|
|
||||||
document.getElementById('successMessage').style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize the form
|
|
||||||
showStep(currentStep);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
117
css/contact.css
117
css/contact.css
|
|
@ -1,117 +0,0 @@
|
||||||
body {
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
background-color: #f4f7fa;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.form-container {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: auto;
|
|
||||||
margin-top: 6rem;
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.progress-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 10px;
|
|
||||||
background-color: #e9ecef;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
width: 0;
|
|
||||||
background-color: #007bff;
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
text-align: center;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.step {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.step.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
input[type="text"],
|
|
||||||
input[type="email"],
|
|
||||||
input[type="number"],
|
|
||||||
select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
margin: 10px 0;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
}
|
|
||||||
input[type="text"]:focus,
|
|
||||||
input[type="email"]:focus,
|
|
||||||
input[type="number"]:focus,
|
|
||||||
select:focus {
|
|
||||||
border-color: #007bff;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
input[type="radio"],
|
|
||||||
input[type="checkbox"] {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.button-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.button-container button {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s, transform 0.2s;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.button-container button:hover {
|
|
||||||
background-color: #0056b3;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
#successMessage {
|
|
||||||
display: none;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #d4edda;
|
|
||||||
color: #155724;
|
|
||||||
border: 1px solid #c3e6cb;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.step-indicator {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.step-indicator div {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #e9ecef;
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
.step-indicator .active {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.button-container {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.button-container button {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
589
css/styles.css
589
css/styles.css
|
|
@ -1,589 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
color: #333;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a {
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
transition: color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a:hover {
|
|
||||||
color: #ff9800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger {
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger div {
|
|
||||||
width: 25px;
|
|
||||||
height: 3px;
|
|
||||||
background: #333;
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
height: 100vh;
|
|
||||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../assets/dm.jpg') center/cover no-repeat;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-button {
|
|
||||||
background: #ff9800;
|
|
||||||
color: #fff;
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-button:hover {
|
|
||||||
background: #e68900;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
services */
|
|
||||||
|
|
||||||
.services {
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
text-align: center;
|
|
||||||
background: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.services h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.services p{
|
|
||||||
color: gray;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cards {
|
|
||||||
display: grid;
|
|
||||||
/* grid-template-columns: repeat(4, 1fr); */
|
|
||||||
gap: 2rem;
|
|
||||||
margin-left: 4rem;
|
|
||||||
margin-right: 4rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: #fff;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0px 4px 6px #e68900;
|
|
||||||
transition: transform 0.3s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card i {
|
|
||||||
font-size: 2rem;
|
|
||||||
color: #ff9800;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card h3 {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* pricing */
|
|
||||||
|
|
||||||
#pricing {
|
|
||||||
/* margin-top: 10px; */
|
|
||||||
/* Adjust this value to clear the navbar */
|
|
||||||
/* padding: 20px; */
|
|
||||||
text-align: center;
|
|
||||||
/* align-items: center; */
|
|
||||||
/* margin-bottom: 2rem; */
|
|
||||||
|
|
||||||
}
|
|
||||||
#pricing p{
|
|
||||||
margin-top: 4rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.pricing-table {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
max-width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-top: 4rem;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan {
|
|
||||||
background: linear-gradient(145deg, #ffffff, #e6e6e6);
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
|
||||||
width: 300px;
|
|
||||||
transition: transform 0.3s, box-shadow 0.3s;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan:hover {
|
|
||||||
transform: translateY(-10px);
|
|
||||||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.plan-title {
|
|
||||||
font-size: 1.8em;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
color: #1f2937;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plan-price {
|
|
||||||
font-size: 2.2em;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 20px 0;
|
|
||||||
color: #3b82f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plan-description {
|
|
||||||
color: #6b7280;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
color: #4b5563;
|
|
||||||
text-align: left;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features li {
|
|
||||||
margin: 10px 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features li::before {
|
|
||||||
content: '\2713';
|
|
||||||
color: #10b981;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 12px 24px;
|
|
||||||
font-size: 1em;
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #3b82f6;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background-color 0.3s, transform 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
background-color: #2563eb;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
right: -10px;
|
|
||||||
background: #f59e0b;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 0.9em;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 50px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary-badge {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -10px;
|
|
||||||
right: -10px;
|
|
||||||
background: #10b981;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 0.8em;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 50px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* team */
|
|
||||||
|
|
||||||
.team {
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
text-align: center;
|
|
||||||
background: #f9f9f9;
|
|
||||||
box-shadow: 0 4px 6px #e68900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team h2 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team .team-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-left: 6rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
margin-right: 6rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.team .team-member {
|
|
||||||
|
|
||||||
margin-left: 4rem;
|
|
||||||
width: 70%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.team-member img{
|
|
||||||
height: 300px;
|
|
||||||
box-shadow: 0 4px 6px #e68900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team img {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: transform 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team img:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.team .team-name {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact {
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
text-align: center;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact h2 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact input, .contact textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact input:focus, .contact textarea:focus {
|
|
||||||
border-color: #ff9800;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-button {
|
|
||||||
background: #ff9800;
|
|
||||||
color: #fff;
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.3s;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-button:hover {
|
|
||||||
background: #e68900;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
.footer {
|
|
||||||
background-color: #000000;
|
|
||||||
padding: 3rem;
|
|
||||||
box-shadow: 0 4px 6px #e68900;
|
|
||||||
color: white;
|
|
||||||
text-align: left;
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 0rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
.footer-copyright {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1rem 0;
|
|
||||||
background-color: #000000;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #555;
|
|
||||||
width: 100%;
|
|
||||||
border-top: 1px solid #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-copyright p {
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Tab (768px - 1199px) */
|
|
||||||
@media (max-width: 1199px) and (min-width: 768px) {
|
|
||||||
.cards {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
.hero p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
.cta-button {
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.contact input, .contact textarea {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
/* .price-container {
|
|
||||||
justify-content: space-around;
|
|
||||||
} */
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info h4, .sitemap h4, .social-media h4 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info p, .sitemap ul li {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #777;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info a, .sitemap a, .social-icons a {
|
|
||||||
color: #ff9800;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info a:hover, .sitemap a:hover, .social-icons a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
color: #e68900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sitemap ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-icons a {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Responsiveness */
|
|
||||||
|
|
||||||
/* pc (1200px+) */
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.cards {
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
.hero p {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
.cta-button {
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
.contact input, .contact textarea {
|
|
||||||
padding: 1.25rem;
|
|
||||||
}
|
|
||||||
/* .price-container {
|
|
||||||
justify-content: space-around;
|
|
||||||
} */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tab (768px - 1199px) */
|
|
||||||
@media (max-width: 1199px) and (min-width: 768px) {
|
|
||||||
.cards {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
.hero p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
.cta-button {
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.contact input, .contact textarea {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
/* .price-container {
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-card {
|
|
||||||
width: 45%;
|
|
||||||
} */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile (320px - 767px) */
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.cards {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.nav-links {
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
background: #fff;
|
|
||||||
position: absolute;
|
|
||||||
top: 60px;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
.nav-links.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.hamburger {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
.hero p {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.cta-button {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
.contact input, .contact textarea {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
.pricing-plan {
|
|
||||||
max-width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .price-card {
|
|
||||||
width: 90%;
|
|
||||||
} */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
212
css/swiper.css
212
css/swiper.css
|
|
@ -1,212 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&display=swap');
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
/* display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center; */
|
|
||||||
height: 100%;
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
}
|
|
||||||
.swipecontainer .heading p{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-slide img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.swipecontainer {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 8rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
.swipecontainer p{
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper {
|
|
||||||
width: 100%;
|
|
||||||
padding: 50px 0;
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-slide {
|
|
||||||
position: relative;
|
|
||||||
aspect-ratio: 3.5/4;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
|
|
||||||
cursor: grab;
|
|
||||||
user-select: none;
|
|
||||||
overflow: hidden;
|
|
||||||
max-width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-slide img {
|
|
||||||
object-fit: cover;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caption {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 70px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
|
||||||
color: #e2e2e2;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 20px;
|
|
||||||
transform: translateY(70px);
|
|
||||||
transition: transform 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-slide:hover .caption {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
.swipecontainer p {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.swiper-wrapper {
|
|
||||||
transition-timing-function: linear !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* featured projects slider */
|
|
||||||
|
|
||||||
.featured-projects-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-slider {
|
|
||||||
width: 60%;
|
|
||||||
margin-bottom: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-slider .slick-slide {
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-slider img {
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.content-slider {
|
|
||||||
width: 35%;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
height: 300px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-slider .slide {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-slider .slide h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
color: #000;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-slider .slide p {
|
|
||||||
font-size: 17px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-slider .slick-slide {
|
|
||||||
display: none;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-slider .slick-active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* featured projects section title */
|
|
||||||
|
|
||||||
.project-section-title {
|
|
||||||
text-align: center;
|
|
||||||
font-family: "Roboto", serif;
|
|
||||||
margin: 10px 0px;
|
|
||||||
}
|
|
||||||
.project-section-title h2 {
|
|
||||||
margin: 0px 0px;
|
|
||||||
font-size: 3rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-section-title span{
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-section-title p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
.slick-images img {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* new */
|
|
||||||
@media (min-width: 769px) and (max-width: 1400px) {
|
|
||||||
.slick-images img {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
gap: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.featured-projects-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
289
index.html
289
index.html
|
|
@ -1,289 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Digital Marketing Agency</title>
|
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
|
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
|
||||||
<link rel="stylesheet" href="css/swiper.css">
|
|
||||||
<script src="js/script.js"></script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- Header Section -->
|
|
||||||
<header>
|
|
||||||
<div class="container">
|
|
||||||
<div class="logo">Digital Agency</div>
|
|
||||||
<nav>
|
|
||||||
<div class="hamburger" onclick="toggleMenu()">
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<div class="nav-links">
|
|
||||||
<a href="#">Home</a>
|
|
||||||
<a href="#services">Services</a>
|
|
||||||
<a href="#pricing">Pricing</a>
|
|
||||||
<a href="#team">Team</a>
|
|
||||||
<a href="contact.html">Form</a>
|
|
||||||
<a href="swiper.html">Slider</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section class="hero">
|
|
||||||
<div>
|
|
||||||
<h1>Grow Your Business with Us</h1>
|
|
||||||
<p>We provide top-notch digital marketing solutions to elevate your brand.</p>
|
|
||||||
<button class="cta-button">Get Started</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Services Section -->
|
|
||||||
|
|
||||||
<section class="services" id="services">
|
|
||||||
<h2>Thrive's Digital Marketing Services</h2>
|
|
||||||
<p>Our full-service digital marketing agency offers affordable and effective digital marketing plans. </p>
|
|
||||||
<p>We work to deliver improved rankings, increased traffic and, in turn, more business.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="cards">
|
|
||||||
<div class="card">
|
|
||||||
<div><i class="fas fa-chart-line"></i></div>
|
|
||||||
|
|
||||||
<h3>SEO Optimization</h3>
|
|
||||||
<p>We help you improve your Google ranking and increase your organic (non-paid) website traffic. SEO is more than just incorporating keywords and we can help to optimize all elements.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<i class="fas fa-bullhorn"></i>
|
|
||||||
<h3>Search Engine Advertising / Google Ads</h3>
|
|
||||||
<p>Search engine advertising, also known as pay-per-click advertising or Google Ads, helps you reach new customers and guarantees a consistent traffic flow to your website.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<i class="fas fa-pencil-alt"></i>
|
|
||||||
<h3>Web Design</h3>
|
|
||||||
<p>Websites are the essence of your online presence. We will create a functional website that is customized for your business and drives results. All of our websites include SEO, and lead generation tools.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<i class="fas fa-users"></i>
|
|
||||||
<h3>Social Media Marketing</h3>
|
|
||||||
<p>We help you with social media advertising to help you grow your business and reach new clients.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<i class="fas fa-users"></i>
|
|
||||||
<h3>Content Marketing</h3>
|
|
||||||
<p>We help you with social media advertising to help you grow your business and reach new clients.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<i class="fas fa-users"></i>
|
|
||||||
<h3>Pay Per Click (PPC) Management</h3>
|
|
||||||
<p>Boost your business with our expert PPC campaigns! Our AdWords-certified specialists craft targeted ads, optimize bids, leverage device strategies, and track ROI. We maximize seasonal trends to drive leads and high-quality traffic.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<i class="fas fa-users"></i>
|
|
||||||
<h3>Digital Marketing strategy</h3>
|
|
||||||
<p>Unlock a custom digital marketing strategy designed for your business. From SEO to paid ads, we create a plan that drives results. Schedule a free consultation today and start reaching your goals.</p>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<i class="fas fa-users"></i>
|
|
||||||
<h3>Email Marketing</h3>
|
|
||||||
<p>Stand out with expert email marketing! We craft personalized newsletters, grow your subscriber list, and optimize campaigns to drive action. From testing to creating curiosity, we ensure your emails make an impact.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- swiper slider -->
|
|
||||||
<div class="swipecontainer" id="services">
|
|
||||||
<p>Our Featured Services</p>
|
|
||||||
<div class="swiper">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/affiliate.webp" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Affiliate Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/analytics.jpg" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Analytics and Reporting</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/content.png" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Content Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/email.png" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Email Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/influencer.png" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Influencer Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/payperclick.webp" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Pay-Per-Click Advertising (PPC)</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/social-media.jpg" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Social Media Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/web.jpeg" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Web Design and Development</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pricing Plan -->
|
|
||||||
|
|
||||||
<section id="pricing" class="pricing">
|
|
||||||
<p>Our Cost Effective Service Pricing</p>
|
|
||||||
<h class="desc">Empowering businesses of all sizes to grow online with affordable and effective digital marketing solutions. </h>
|
|
||||||
<br />
|
|
||||||
<h class="desc">Trusted by clients worldwide, we're here to help you thrive</h>
|
|
||||||
|
|
||||||
<div class="pricing-table">
|
|
||||||
<div class="pricing-plan">
|
|
||||||
<div class="badge">Popular</div>
|
|
||||||
<div class="secondary-badge">Save 10%</div>
|
|
||||||
<h2 class="plan-title">Basic</h2>
|
|
||||||
<p class="plan-price">$49/month</p>
|
|
||||||
<p class="plan-description">Ideal for small businesses starting out.</p>
|
|
||||||
<ul class="features">
|
|
||||||
<li>5 Social Media Posts</li>
|
|
||||||
<li>Email Support</li>
|
|
||||||
<li>Basic Analytics</li>
|
|
||||||
</ul>
|
|
||||||
<a href="#" class="btn">Get Started</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pricing-plan">
|
|
||||||
<div class="badge">Best Value</div>
|
|
||||||
<div class="secondary-badge">Save 15%</div>
|
|
||||||
<h2 class="plan-title">Standard</h2>
|
|
||||||
<p class="plan-price">$99/month</p>
|
|
||||||
<p class="plan-description">Perfect for growing businesses.</p>
|
|
||||||
<ul class="features">
|
|
||||||
<li>15 Social Media Posts</li>
|
|
||||||
<li>Priority Email Support</li>
|
|
||||||
<li>Advanced Analytics</li>
|
|
||||||
</ul>
|
|
||||||
<a href="#" class="btn">Get Started</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pricing-plan">
|
|
||||||
<div class="badge">Premium</div>
|
|
||||||
<div class="secondary-badge">Save 20%</div>
|
|
||||||
<h2 class="plan-title">Premium</h2>
|
|
||||||
<p class="plan-price">$199/month</p>
|
|
||||||
<p class="plan-description">For established businesses scaling up.</p>
|
|
||||||
<ul class="features">
|
|
||||||
<li>Unlimited Social Media Posts</li>
|
|
||||||
<li>24/7 Support</li>
|
|
||||||
<li>Comprehensive Analytics</li>
|
|
||||||
</ul>
|
|
||||||
<a href="#" class="btn">Get Started</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Team Section -->
|
|
||||||
|
|
||||||
<section class="team" id="team">
|
|
||||||
<h2>Meet Our Digital Marketing Experts Team</h2>
|
|
||||||
<div class="team-grid">
|
|
||||||
<div class="team-member">
|
|
||||||
<img src="assets/team1.jpg" alt="Team Member 1">
|
|
||||||
<p class="team-name">Alice Johnson</p>
|
|
||||||
</div>
|
|
||||||
<div class="team-member">
|
|
||||||
<img src="assets/team2.png" alt="Team Member 2">
|
|
||||||
<p class="team-name">Michael Smith</p>
|
|
||||||
</div>
|
|
||||||
<div class="team-member">
|
|
||||||
<img src="assets/team3.jpg" alt="Team Member 3">
|
|
||||||
<p class="team-name">Sophia Lee</p>
|
|
||||||
</div>
|
|
||||||
<div class="team-member">
|
|
||||||
<img src="assets/team4.jpeg" alt="Team Member 4">
|
|
||||||
<p class="team-name">James Brown</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Contact Us Form -->
|
|
||||||
|
|
||||||
<section class="contact" id="contact">
|
|
||||||
<h2>Contact Us</h2>
|
|
||||||
<form onsubmit="return validateForm()">
|
|
||||||
<input type="text" id="name" placeholder="Your Name" required>
|
|
||||||
<input type="email" id="email" placeholder="Your Email" required>
|
|
||||||
<textarea id="message" placeholder="Your Message" required></textarea>
|
|
||||||
<button type="submit" class="cta-button">Send Message</button>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
<!-- footer -->
|
|
||||||
<footer class="footer">
|
|
||||||
<div class="footer-content">
|
|
||||||
<!-- Contact Info Section -->
|
|
||||||
<div class="contact-info">
|
|
||||||
<h4>Contact</h4>
|
|
||||||
<p>DigiMantra<br>Sector 74, S.A.S Nagar<br>Mohali</p>
|
|
||||||
<p>Email: <a href="mailto:info@griddigitalmarketing.com">info@digitalmarketing.com</a></p>
|
|
||||||
<p>WhatsApp: <a href="tel:+31610732535">+91234567890</a></p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Sitemap Section -->
|
|
||||||
<div class="sitemap">
|
|
||||||
<h4>Sitemap</h4>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li><a href="#">Services</a></li>
|
|
||||||
<li><a href="#">Pricing</a></li>
|
|
||||||
<li><a href="#">Team</a></li>
|
|
||||||
<li><a href="#">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social Media Section -->
|
|
||||||
<div class="social-media">
|
|
||||||
<h4>Follow Us</h4>
|
|
||||||
<div class="social-icons">
|
|
||||||
<a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook"></i></a>
|
|
||||||
<a href="#" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a>
|
|
||||||
<a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
|
|
||||||
<a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer-copyright">
|
|
||||||
<p>© 2024 DigiMantra. All Rights Reserved.</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
||||||
<script src="js/slider.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
function toggleMenu() {
|
|
||||||
const navLinks = document.querySelector('.nav-links');
|
|
||||||
navLinks.classList.toggle('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
30
js/slider.js
30
js/slider.js
|
|
@ -1,30 +0,0 @@
|
||||||
const swipecontainer = document.querySelector(".swipecontainer");
|
|
||||||
const likeBtns = document.querySelector(".like-btns");
|
|
||||||
|
|
||||||
var swiper = new Swiper(".swiper", {
|
|
||||||
spaceBetween: 30,
|
|
||||||
slidesPerView: "auto",
|
|
||||||
loop: true,
|
|
||||||
speed: 5000,
|
|
||||||
freeMode: true,
|
|
||||||
allowTouchMove: false,
|
|
||||||
autoplay: {
|
|
||||||
delay: 0,
|
|
||||||
disableOnInteraction: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function stopAutoPlay() {
|
|
||||||
const swiperTranslate = swiper.getTranslate();
|
|
||||||
swiper.setTranslate(swiperTranslate);
|
|
||||||
swiper.autoplay.stop();
|
|
||||||
}
|
|
||||||
|
|
||||||
function startAutoPlay() {
|
|
||||||
swiper.slideTo(swiper.activeIndex, 5000, false);
|
|
||||||
swiper.autoplay.start()
|
|
||||||
}
|
|
||||||
|
|
||||||
swipecontainer.addEventListener("mouseenter", () => stopAutoPlay());
|
|
||||||
swipecontainer.addEventListener("mouseleave", () => startAutoPlay());
|
|
||||||
104
js/swiper.js
104
js/swiper.js
|
|
@ -1,104 +0,0 @@
|
||||||
const swipecontainer = document.querySelector(".swipecontainer");
|
|
||||||
const likeBtns = document.querySelector(".like-btns");
|
|
||||||
var swiper = new Swiper(".swiper", {
|
|
||||||
spaceBetween: 60,
|
|
||||||
slidesPerView: "auto",
|
|
||||||
loop: true,
|
|
||||||
speed: 5000,
|
|
||||||
freeMode: true,
|
|
||||||
allowTouchMove: true,
|
|
||||||
autoplay: {
|
|
||||||
delay: 0,
|
|
||||||
disableOnInteraction: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
function stopAutoPlay() {
|
|
||||||
const swiperTranslate = swiper.getTranslate();
|
|
||||||
swiper.setTranslate(swiperTranslate);
|
|
||||||
swiper.autoplay.stop();
|
|
||||||
}
|
|
||||||
function startAutoPlay() {
|
|
||||||
swiper.slideTo(swiper.activeIndex, 5000, true);
|
|
||||||
swiper.autoplay.start();
|
|
||||||
}
|
|
||||||
swipecontainer.addEventListener("mouseenter", () => stopAutoPlay());
|
|
||||||
swipecontainer.addEventListener("mouseleave", () => startAutoPlay());
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// featured projects slider
|
|
||||||
$(document).ready(function () {
|
|
||||||
var imageSlider = $(".slick-images").slick({
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '60px',
|
|
||||||
slidesToShow: 3,
|
|
||||||
arrows: false,
|
|
||||||
dots: true,
|
|
||||||
asNavFor: ".slick-content",
|
|
||||||
infinite: true,
|
|
||||||
speed: 500,
|
|
||||||
responsive: [
|
|
||||||
{
|
|
||||||
breakpoint: 768,
|
|
||||||
settings: {
|
|
||||||
arrows: false,
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '40px',
|
|
||||||
slidesToShow: 3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: 480,
|
|
||||||
settings: {
|
|
||||||
arrows: false,
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '40px',
|
|
||||||
slidesToShow: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize Slick Slider for Content Slider with Center Mode
|
|
||||||
var contentSlider = $(".slick-content").slick({
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '60px',
|
|
||||||
slidesToShow: 1,
|
|
||||||
asNavFor: ".slick-images",
|
|
||||||
infinite: true,
|
|
||||||
arrows: false,
|
|
||||||
dots: true,
|
|
||||||
speed: 500,
|
|
||||||
responsive: [
|
|
||||||
{
|
|
||||||
breakpoint: 768,
|
|
||||||
settings: {
|
|
||||||
arrows: false,
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '40px',
|
|
||||||
slidesToShow: 3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: 480,
|
|
||||||
settings: {
|
|
||||||
arrows: false,
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '40px',
|
|
||||||
slidesToShow: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sync swipe direction of both sliders
|
|
||||||
$('.content-slider').on('swipe', function (event, slick, direction) {
|
|
||||||
if (direction === 'left') {
|
|
||||||
imageSlider.slick('slickNext');
|
|
||||||
} else if (direction === 'right') {
|
|
||||||
imageSlider.slick('slickPrev');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
180
swiper.html
180
swiper.html
|
|
@ -1,180 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Digital Marketing Company</title>
|
|
||||||
<link rel="stylesheet" href="css/swiper.css" />
|
|
||||||
<link rel="stylesheet" href="css/styles.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
|
|
||||||
<!-- Swiper JS -->
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<div class="container">
|
|
||||||
<div class="logo">Digital Agency</div>
|
|
||||||
<nav>
|
|
||||||
<div class="hamburger" onclick="toggleMenu()">
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<div class="nav-links">
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="#services">Services</a>
|
|
||||||
<a href="#pricing">Pricing</a>
|
|
||||||
<a href="#team">Team</a>
|
|
||||||
<a href="contact.html">Contact</a>
|
|
||||||
<a href="swiper.html">Slider</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Swiper Start -->
|
|
||||||
<div class="swipecontainer">
|
|
||||||
<div class="heading">
|
|
||||||
<p>Our Featured Services</p>
|
|
||||||
</div>
|
|
||||||
<div class="swiper">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/affiliate.webp" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Affiliate Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/analytics.jpg" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Analytics and Reporting</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/content.png" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Content Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/email.png" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Email Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/influencer.png" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Influencer Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/payperclick.webp" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Pay-Per-Click Advertising (PPC)</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/social-media.jpg" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Social Media Marketing</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/web.jpeg" alt="">
|
|
||||||
<div class="caption">
|
|
||||||
<h1>Web Design and Development</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- featured project slider -->
|
|
||||||
<div class="project-section-title">
|
|
||||||
<h2> <span>Featured </span> Projects</h2>
|
|
||||||
<p>Learn how we are delivering cutting-edge solutions and transforming businesses. </p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="featured-projects-container">
|
|
||||||
<!-- Content Slider -->
|
|
||||||
<div class="content-slider">
|
|
||||||
<div class="slick-content">
|
|
||||||
<div class="slide">
|
|
||||||
<h2>Evil Genius Games</h2>
|
|
||||||
<p>Evil Genius Games invites players to dive into captivating tabletop RPG experiences, seamlessly
|
|
||||||
blending strategic depth with immersive gameplay. Our team led the development of their digital
|
|
||||||
platform, ensuring intuitive interfaces and dynamic mechanics. Our collaboration has solidified
|
|
||||||
Evil Genius Games as an industry leader in immersive gaming experiences.</p>
|
|
||||||
</div>
|
|
||||||
<div class="slide">
|
|
||||||
<h2>EarthLink Fiber Internet</h2>
|
|
||||||
<p>Earthlink epitomizes leadership in digital innovation, seamlessly blending advanced technology
|
|
||||||
with unbeatable connectivity. Our team led the development and design efforts for their digital
|
|
||||||
infrastructure, ensuring seamless integration and optimal performance. Through meticulous
|
|
||||||
planning, implementation, and ongoing support, we helped Earthlink maintain its position as a
|
|
||||||
frontrunner in the digital connectivity landscape.</p>
|
|
||||||
</div>
|
|
||||||
<div class="slide">
|
|
||||||
<h2>Involvely Parenting Resource</h2>
|
|
||||||
<p> Involvvely functions as a comprehensive Parent Resource and school platform,
|
|
||||||
fosteringconnections among community parents. Our team played a pivotal role in developing and
|
|
||||||
designing their platform, ensuring seamless integration and user-friendly interfaces. Our
|
|
||||||
technical contributions streamlined Involvvely's platform, allowing parents to get more involved
|
|
||||||
in their children's education using their innovative ideas.</p>
|
|
||||||
</div>
|
|
||||||
<div class="slide">
|
|
||||||
<h2>Data-Driven Insights</h2>
|
|
||||||
<p>We go beyond simply building software. We leverage data-driven insights and analytics to
|
|
||||||
continuously monitor and optimize your solutions, maximizing performance and user experience.
|
|
||||||
This ongoing cycle of measurement, analysis, and improvement ensures your software not only
|
|
||||||
meets your initial needs but also adapts and evolves alongside your business objectives.</p>
|
|
||||||
</div>
|
|
||||||
<div class="slide">
|
|
||||||
<h2>Collaborative Innovative Solutions</h2>
|
|
||||||
<p>
|
|
||||||
We cultivate an environment of co-creation and open communication to design the perfect solution
|
|
||||||
tailored to your unique needs and goals. This collaborative approach ensures the delivery of
|
|
||||||
solutions that are not only technically sound but also meet the needs of the business and its
|
|
||||||
customers.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="slide">
|
|
||||||
<h2>Future Proof Technology Stack
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
We remain at the forefront of technological advancements, continuously investing in and
|
|
||||||
integrating the latest tools, frameworks, and methodologies into our development process. This
|
|
||||||
commitment ensures that your solutions are built on a future-proof foundation, adaptable to the
|
|
||||||
ever-evolving digital landscape.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Image Slider -->
|
|
||||||
<div class="image-slider">
|
|
||||||
<div class="slick-images">
|
|
||||||
<div><img src="assets/features/evil.webp" alt="" /></div>
|
|
||||||
<div><img src="assets/features/elink.webp" alt="" /></div>
|
|
||||||
<div><img src="assets/features/involv.webp" alt="" /></div>
|
|
||||||
<div><img src="assets/features/collaborate.webp" alt="" /></div>
|
|
||||||
<div><img src="assets/features/dataDrivenInsights.webp" alt="" /></div>
|
|
||||||
<div><img src="assets/features/futureProofTech.webp" alt="" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
|
||||||
<script src="https://kit.fontawesome.com/d06d270777.js" crossorigin="anonymous"></script>
|
|
||||||
<script src="js/swiper.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in a new issue