Merge pull request 'Inital Commit' (#1) from dev into main
Reviewed-on: #1
This commit is contained in:
commit
b4ca40bdfb
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
BIN
images/background1.webp
Normal file
BIN
images/background1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
images/call-center.jpg
Normal file
BIN
images/call-center.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 641 KiB |
BIN
images/content writing.webp
Normal file
BIN
images/content writing.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
images/coperate.webp
Normal file
BIN
images/coperate.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
images/creative.webp
Normal file
BIN
images/creative.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
images/digital-agency.jpg
Normal file
BIN
images/digital-agency.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
images/download.jpg
Normal file
BIN
images/download.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
images/graphic (1).jpg
Normal file
BIN
images/graphic (1).jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
images/images.jpeg
Normal file
BIN
images/images.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
images/logo.jpg
Normal file
BIN
images/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
images/marketing.webp
Normal file
BIN
images/marketing.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
images/seo.jpg
Normal file
BIN
images/seo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
images/social-media.jpg
Normal file
BIN
images/social-media.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
images/web-dev.avif
Normal file
BIN
images/web-dev.avif
Normal file
Binary file not shown.
250
index.html
Normal file
250
index.html
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Digital Agency - Empowering Your Online Presence</title>
|
||||
<meta name="description" content="Discover innovative solutions for web design, branding, SEO, and digital marketing. Partner with our digital agency to elevate your online presence and achieve your business goals." />
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
|
||||
<link
|
||||
href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="topnav">
|
||||
<a href="#home" class="active">
|
||||
Digital Agency
|
||||
</a>
|
||||
<!-- Navigation links (hidden by default) -->
|
||||
<div id="myLinks">
|
||||
<a href="#home" onclick="closeNavigationLinks()"> Home</a>
|
||||
<a href="#services" onclick="closeNavigationLinks()">What we do</a>
|
||||
<a href="#pricing" onclick="closeNavigationLinks()">Pricing plans</a>
|
||||
<a href="#team" onclick="closeNavigationLinks()">Meet our teams</a>
|
||||
</div>
|
||||
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
|
||||
<a href="javascript:void(0);" class="icon" onclick="toggleNavigationLinks()">
|
||||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Hero section -->
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-content">
|
||||
<h1>Transform Your Ideas Into Reality</h1>
|
||||
<p>
|
||||
We help businesses grow with innovative digital solutions. Start your
|
||||
journey today!
|
||||
</p>
|
||||
<a href="#contact" class="cta-button">Get Started</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main section -->
|
||||
<!-- services -->
|
||||
<div class="wrapper" id="services">
|
||||
<h1>Our Company Services</h1>
|
||||
<p>List of the best services delivered to our clients</p>
|
||||
<div class="content-box">
|
||||
<div class="card">
|
||||
<i class="bx bx-bar-chart-alt bx-md"></i>
|
||||
<h2>Marketing Services</h2>
|
||||
<p>Promoting and positioning a product in the market to attract potential customers, drive sales, and build brand awareness.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<i class="bx bx-laptop bx-md"></i>
|
||||
<h2>Web App Development</h2>
|
||||
<p>Process of designing, building, and maintaining applications that run on different web browsers with ease .</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<i class="bx bx-line-chart bx-md"></i>
|
||||
<h2>24/7 call center services</h2>
|
||||
<p>Provide round-the-clock support to customers, ensuring that businesses can handle inquiries, complaints, or assistance requests.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<i class="bx bx-mail-send bx-md"></i>
|
||||
<h2>Social Media Marketing</h2>
|
||||
<p>Social media platforms to connect with your audience, build your brand, increase sales, and drive website traffic.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<i class="bx bx-bar-chart-alt bx-md"></i>
|
||||
<h2>Coperate Business</h2>
|
||||
<p>Large-scale organizations or companies engaged in commercial activities across industries such as finance, technology.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<i class="bx bx-paint bx-md"></i>
|
||||
<h2>Creative Consultancy</h2>
|
||||
<p>Service-oriented business that provides innovative and strategic solutions to help organizations enhance their branding, marketing, product design.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- tables -->
|
||||
<h2 id="pricing">Pricing according to services</h2>
|
||||
<div class="columns">
|
||||
<ul class="price">
|
||||
<li class="header">Basic</li>
|
||||
<li class="grey"><strong>$ 99 / month</strong></li>
|
||||
<li><i class="fa-solid fa-palette"></i> 2 Design Revisions</li>
|
||||
<li><i class="fa-solid fa-rectangle-ad"></i> 1 Ad Campaign</li>
|
||||
<li><i class="fa-brands fa-searchengin"></i> Basic SEO Audit</li>
|
||||
<li><i class="fa-solid fa-envelope"></i>Email Support</li>
|
||||
<li><i class="fa-solid fa-phone"></i>Monthly Performance Report</li>
|
||||
<li class="grey">
|
||||
<a href="signup.html" class="button">Sign Up</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<ul class="price">
|
||||
<li class="header">Pro</li>
|
||||
<li class="grey"><strong>$ 199 / month</strong></li>
|
||||
<li><i class="fa-solid fa-palette"></i> 5 Design Revisions</li>
|
||||
<li><i class="fa-solid fa-rectangle-ad"></i> 3 Ad Campaigns</li>
|
||||
<li><i class="fa-brands fa-searchengin"></i> Advanced SEO Audit</li>
|
||||
<li><i class="fa-solid fa-envelope"></i>Priority Email Support</li>
|
||||
<li><i class="fa-solid fa-phone"></i>Weekly Performance Report</li>
|
||||
<li class="grey">
|
||||
<a href="signup.html" class="button">Sign Up</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<ul class="price">
|
||||
<li class="header">Premium</li>
|
||||
<li class="grey"><strong>$ 299 / month</strong></li>
|
||||
<li><i class="fa-solid fa-infinity"></i>Unlimited Design Revisions</li>
|
||||
<li><i class="fa-solid fa-rectangle-ad"></i> 5 Ad Campaigns</li>
|
||||
<li><i class="fa-brands fa-searchengin"></i> Complete SEO Audit</li>
|
||||
<li><i class="fa-solid fa-check"></i>24/7 Priority Support</li>
|
||||
<li><i class="fa-solid fa-phone"></i>Daily Performance Reports</li>
|
||||
<li class="grey">
|
||||
<a href="signup.html" class="button">Sign Up</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Team Members -->
|
||||
<h2 id="team" >Meet Our Team</h2>
|
||||
<p class="team-description">
|
||||
Our talented professionals are here to make your project a success.
|
||||
</p>
|
||||
|
||||
<div class="team-container">
|
||||
<div class="team-member">
|
||||
<img src="images/web-dev.avif" alt="Team Member 1" />
|
||||
<h3>John Doe</h3>
|
||||
<p>Web Developer</p>
|
||||
<div class="social-links">
|
||||
<i class="fa-brands fa-facebook"></i>
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
<i class="fa-brands fa-linkedin"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-member">
|
||||
<img src="images/graphic (1).jpg" alt="Team Member 2" />
|
||||
<h3>Jane Smith</h3>
|
||||
<p>Graphic Designer</p>
|
||||
<div class="social-links">
|
||||
<i class="fa-brands fa-facebook"></i>
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
<i class="fa-brands fa-linkedin"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-member">
|
||||
<img src="images/seo.jpg" alt="Team Member 3" />
|
||||
<h3>Michael Brown</h3>
|
||||
<p>SEO Specialist</p>
|
||||
<div class="social-links">
|
||||
<i class="fa-brands fa-facebook"></i>
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
<i class="fa-brands fa-linkedin"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-member">
|
||||
<img src="images/content writing.webp" alt="Team Member 4" />
|
||||
<h3>Emily Davis</h3>
|
||||
<p>Content Writer</p>
|
||||
<div class="social-links">
|
||||
<i class="fa-brands fa-facebook"></i>
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
<i class="fa-brands fa-linkedin"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<h2 style="text-align: center;" id="contact">Contact Us Today</h2>
|
||||
<div class="container">
|
||||
<form onsubmit="return validateForm()" >
|
||||
|
||||
<label for="fname">First Name</label>
|
||||
<input type="text" id="fname" name="firstname" placeholder="Your name.." required>
|
||||
|
||||
<label for="lname">Last Name</label>
|
||||
<input type="text" id="lname" name="lastname" placeholder="Your last name.." required>
|
||||
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" placeholder="Your email.." required>
|
||||
|
||||
<label for="phone">Phone Number</label>
|
||||
<input type="tel" id="phone" name="phone" placeholder="Your phone number.." pattern="[0-9]{10}" required>
|
||||
|
||||
<label for="country">Country</label>
|
||||
<select id="country" name="country">
|
||||
<option value="india">India</option>
|
||||
<option value="australia">Australia</option>
|
||||
<option value="canada">Canada</option>
|
||||
<option value="usa">USA</option>
|
||||
</select>
|
||||
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div id="successModal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Your data has been saved in our database</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Quick Links -->
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="footer-links">
|
||||
<a href="#home">Home</a>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#contact">Contact Us</a>
|
||||
</div>
|
||||
<div class="social-links">
|
||||
<a href="https://x.com/VanshVatsa" target="_blank">Twitter</a>
|
||||
<a href="https://www.linkedin.com/in/banshvatsa/" target="_blank">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© 2024 Digital Agency. All rights reserved. Made with ❤️ in India.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
73
scripts.js
Normal file
73
scripts.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
function toggleNavigationLinks() {
|
||||
try {
|
||||
const x = document.getElementById("myLinks");
|
||||
if (!x) throw new Error("Element with ID 'myLinks' not found.");
|
||||
|
||||
x.style.display = x.style.display === "block" ? "none" : "block";
|
||||
} catch (error) {
|
||||
console.error("Error toggling navigation links: ", error.message);
|
||||
alert("An error occurred while toggling the navigation links. Please try again.");
|
||||
}
|
||||
}
|
||||
|
||||
function closeNavigationLinks() {
|
||||
const x = document.getElementById("myLinks");
|
||||
if (x) {
|
||||
x.style.display = "none";
|
||||
}
|
||||
}
|
||||
// Form validation function (Simplified)
|
||||
function validateForm() {
|
||||
try {
|
||||
const firstName = document.getElementById("fname").value.trim();
|
||||
const lastName = document.getElementById("lname").value.trim();
|
||||
const letterRegex = /^[A-Za-z]+$/;
|
||||
|
||||
if (!letterRegex.test(firstName)) {
|
||||
alert("First Name should only contain letters.");
|
||||
return false; // Prevent form submission
|
||||
}
|
||||
|
||||
if (!letterRegex.test(lastName)) {
|
||||
alert("Last Name should only contain letters.");
|
||||
return false; // Prevent form submission
|
||||
}
|
||||
|
||||
// If validation passes, show success modal
|
||||
showSuccessModal();
|
||||
return false; // Prevent form submission to show the modal
|
||||
|
||||
} catch (error) {
|
||||
console.error("Form validation error: ", error.message);
|
||||
alert("An error occurred during form validation. Please try again.");
|
||||
return false; // Prevent form submission
|
||||
}
|
||||
}
|
||||
|
||||
// Show success modal (Simplified)
|
||||
function showSuccessModal() {
|
||||
try {
|
||||
const modal = document.getElementById("successModal");
|
||||
if (modal) {
|
||||
modal.style.display = "block"; // Show modal
|
||||
} else {
|
||||
throw new Error("Modal element not found.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error displaying the modal: ", error.message);
|
||||
alert("An error occurred while displaying the success message. Please try again.");
|
||||
}
|
||||
}
|
||||
|
||||
// Close the modal when clicked on the close button
|
||||
document.querySelector(".close").onclick = function() {
|
||||
document.getElementById("successModal").style.display = "none";
|
||||
}
|
||||
|
||||
// Close the modal if clicked outside of it
|
||||
window.onclick = function(event) {
|
||||
const modal = document.getElementById("successModal");
|
||||
if (event.target === modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
573
styles.css
Normal file
573
styles.css
Normal file
|
|
@ -0,0 +1,573 @@
|
|||
/* Style the navigation menu */
|
||||
.body{
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Hide the links inside the navigation menu (except for logo/home) */
|
||||
.topnav #myLinks {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Style navigation menu links */
|
||||
.topnav a {
|
||||
color: white;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Style the hamburger menu */
|
||||
.topnav a.icon {
|
||||
background: black;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Add a grey background color on mouse-over */
|
||||
.topnav a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Style the active link (or home/logo) */
|
||||
.active {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* General Hero Section Styling (Applies to all breakpoints) */
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to right, #0f2027, #203a43, #2c5364),
|
||||
url('download.jpg') no-repeat center center/cover;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 5px;
|
||||
background-color: #00bcd4;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #008c9e;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Body and general wrapper styles */
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
color: #555;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.content-box {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
position: relative;
|
||||
}
|
||||
#pricing{
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.header{
|
||||
background-color: #23abdc"
|
||||
}
|
||||
#team{
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.team-description{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card i {
|
||||
font-size: 3rem;
|
||||
color: #3498db;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 1rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Hover effects with images */
|
||||
.card:nth-child(1):hover {
|
||||
background: linear-gradient(45deg,
|
||||
rgba(10, 114, 233, 0.8) 0%,
|
||||
rgba(51, 163, 249, 0.8) 100%),
|
||||
url('images/marketing.webp');
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card:nth-child(2):hover {
|
||||
background: linear-gradient(45deg,
|
||||
rgba(10, 114, 233, 0.8) 0%,
|
||||
rgba(51, 163, 249, 0.8) 100%),
|
||||
url('images/images.jpeg');
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card:nth-child(3):hover {
|
||||
background: linear-gradient(45deg,
|
||||
rgba(10, 114, 233, 0.8) 0%,
|
||||
rgba(51, 163, 249, 0.8) 100%),
|
||||
url('images/call-center.jpg');
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card:nth-child(4):hover {
|
||||
background: linear-gradient(45deg,
|
||||
rgba(10, 114, 233, 0.8) 0%,
|
||||
rgba(51, 163, 249, 0.8) 100%),
|
||||
url('images/social-media.jpg');
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card:nth-child(5):hover {
|
||||
background: linear-gradient(45deg,
|
||||
rgba(10, 114, 233, 0.8) 0%,
|
||||
rgba(51, 163, 249, 0.8) 100%),
|
||||
url('images/coperate.webp');
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card:nth-child(6):hover {
|
||||
background: linear-gradient(45deg,
|
||||
rgba(10, 114, 233, 0.8) 0%,
|
||||
rgba(51, 163, 249, 0.8) 100%),
|
||||
url('images/creative.webp');
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.columns {
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
padding: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.price {
|
||||
list-style-type: none;
|
||||
border: 1px solid #eee;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.price:hover {
|
||||
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
|
||||
}
|
||||
|
||||
.price .header {
|
||||
background-color: #111;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.price li {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price .grey {
|
||||
background-color: #eee;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
background-color: #00bcd4;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.team-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Styling each team member */
|
||||
.team-member {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
background-color: #f9f9f9;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.team-member:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.team-member img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.team-member h3 {
|
||||
margin: 15px 0 5px;
|
||||
font-size: 1.25em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.team-member p {
|
||||
color: #777;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
/* Social links */
|
||||
.social-links {
|
||||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
margin: 0 5px;
|
||||
color: #555;
|
||||
font-size: 1.2em;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.social-links a:hover {
|
||||
color: #007BFF;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
input[type=text], input[type=email], input[type=tel], select, textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 16px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Style the submit button with a specific background color etc */
|
||||
input[type=submit] {
|
||||
background-color: #00bcd4;
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* When moving the mouse over the submit button, add a darker green color */
|
||||
|
||||
|
||||
/* Add a background color and some padding around the form */
|
||||
.container {
|
||||
border-radius: 5px;
|
||||
background-color: #f2f2f2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Footer styles */
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.footer-links, .social-links {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
.footer-links a, .social-links a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.footer-links a:hover, .social-links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.copyright {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.card i {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
|
||||
/* Desktop (1200px and above) */
|
||||
@media (min-width: 1200px) {
|
||||
.hero {
|
||||
padding: 0 5rem;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 4rem; /* Larger text for desktop */
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.5rem; /* Larger description text */
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
font-size: 1.2rem;
|
||||
padding: 1.2rem 2.5rem;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Tablet (768px to 1199px) */
|
||||
@media (min-width: 768px) and (max-width: 1199px) {
|
||||
.hero {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
font-size: 1rem;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile (320px to 767px) */
|
||||
@media (max-width: 767px) {
|
||||
.hero {
|
||||
flex-direction: column; /* Stack content vertically */
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.columns {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in a new issue