Skip to content

Commit 5c76979

Browse files
suyash-rgbsuyash-rgb
committed
Added cards section
1 parent a4bb94a commit 5c76979

File tree

3 files changed

+295
-0
lines changed

3 files changed

+295
-0
lines changed

‎cards.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
const cards = document.querySelectorAll('.card');
3+
const openCard = document.querySelector('.open-card');
4+
const infoCard = document.querySelector('.info-card');
5+
const overlay = document.querySelector('.overlay');
6+
7+
const cardContent = {
8+
'3D': {
9+
title: "3D Vector Illustration",
10+
content: "3D vector illustrations offer a powerful and innovative way to elevate your business's visual communication. By harnessing the latest in design technology, these illustrations provide a clean, modern, and impactful way to represent complex ideas, making them easier to understand and more engaging for your audience.",
11+
image: "Assests/layerss(1).png"
12+
},
13+
'Web': {
14+
title: "Web Development",
15+
content: "Web development is at the core of building a strong digital presence, and our team specializes in creating responsive, high-performance websites that are designed to deliver an exceptional user experience. Utilizing the latest web technologies, we craft websites that are not only visually stunning but also optimized for speed.",
16+
image: "Assests/wedevv.png"
17+
},
18+
'Graphic': {
19+
title: "Graphic Design",
20+
content: "Our graphic design services blend creativity with strategy, ensuring that every visual element we create is aligned with your brand's vision and goals. From compelling logos to visually stunning web designs, we craft graphics that not only catch the eye but also communicate your message effectively.",
21+
image: "Assests/desgin.png"
22+
},
23+
'Hosting': {
24+
title: "Hosting Services",
25+
content: "We provide reliable, secure, and scalable hosting solutions to support your business's digital infrastructure. Our services are designed to deliver optimal performance, fast load times, and top-tier security, ensuring your website or application runs seamlessly.",
26+
image: "Assests/hosting.png"
27+
},
28+
'Digital': {
29+
title: "Digital Marketing",
30+
content: "Enhance your online presence with strategic digital marketing solutions designed to drive engagement and foster growth. Our tailored approach combines SEO, content marketing, social media, and email campaigns to create a comprehensive strategy that resonates with your target audience.",
31+
image: "Assests/digital.png"
32+
},
33+
'Cloud': {
34+
title: "Cloud Solution",
35+
content: "Transform your business operations with our cutting-edge cloud solutions that enhance flexibility, scalability, and efficiency. We provide customized cloud services tailored to meet your specific needs, enabling seamless collaboration and access to your data from anywhere.",
36+
image: "Assests/cloudd.png"
37+
}
38+
};
39+
40+
cards.forEach(card => {
41+
card.addEventListener('click', () => {
42+
const cardType = card.getAttribute('data-card');
43+
openCardPopup(cardType);
44+
});
45+
});
46+
47+
overlay.addEventListener('click', closeCardPopup);
48+
49+
function openCardPopup(cardType) {
50+
const content = cardContent[cardType];
51+
infoCard.innerHTML = `
52+
<div class="img-container">
53+
<img src="${content.image}" alt="${content.title}">
54+
</div>
55+
<h1>${content.title}</h1>
56+
<p>${content.content}</p>
57+
`;
58+
openCard.classList.add('popup_open');
59+
overlay.classList.add('popup_open');
60+
document.body.style.overflow = 'hidden';
61+
}
62+
63+
function closeCardPopup() {
64+
openCard.classList.remove('popup_open');
65+
overlay.classList.remove('popup_open');
66+
document.body.style.overflow = '';
67+
    }
68+
});

‎home.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,3 +225,145 @@ nav button:hover{
225225
line-height: 15px;
226226
margin-top: 5px;
227227
}
228+
229+
/* ************************** Offer-Section ************************** */
230+
231+
.Offer-Section{
232+
padding-top: 10%;
233+
padding-bottom: 30%;
234+
}
235+
236+
.Offer-Heading{
237+
text-align: center;
238+
max-width: 1000px;
239+
margin: 0 auto 30px;
240+
background-color: transparent;
241+
display: flex;
242+
flex-direction: row;
243+
align-items: center;
244+
justify-content: space-between;
245+
gap: 7px;
246+
}
247+
248+
.title{
249+
width: 30%;
250+
font-size: 50px;
251+
font-weight: 900;
252+
letter-spacing: -1px;
253+
}
254+
255+
.title-des{
256+
width: 40%;
257+
color: hsla(0, 0%, 100%, 0.632);
258+
}
259+
260+
.offer-container {
261+
/* margin-top: 15%; */
262+
display: flex;
263+
flex-direction: column;
264+
align-items: center;
265+
}
266+
267+
.offer-cards {
268+
display: flex;
269+
justify-content: center;
270+
gap: 20px;
271+
margin-top: 2rem;
272+
}
273+
274+
.card {
275+
display: flex;
276+
flex-direction: column;
277+
align-items: center;
278+
justify-content: space-around;
279+
height: 250px;
280+
width: 300px;
281+
color: #ffffff;
282+
background-color: #3336335f;
283+
border-radius: 10%;
284+
padding: 10px;
285+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
286+
cursor: pointer;
287+
transition: transform 0.3s ease, box-shadow 0.3s ease;
288+
}
289+
290+
.card:hover {
291+
transform: translateY(-5px);
292+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
293+
}
294+
295+
.img-container {
296+
height: 110px;
297+
width: 110px;
298+
overflow: hidden;
299+
margin-bottom: 10px;
300+
border-radius: 10%;
301+
}
302+
303+
.img-container img {
304+
width: 100%;
305+
height: 100%;
306+
object-fit: cover;
307+
}
308+
309+
.card-title {
310+
text-align: center;
311+
}
312+
313+
.overlay {
314+
position: fixed;
315+
top: 0;
316+
left: 0;
317+
width: 100%;
318+
height: 100%;
319+
background-color: rgba(0, 0, 0, 0.5);
320+
backdrop-filter: blur(5px);
321+
z-index: 10;
322+
opacity: 0;
323+
visibility: hidden;
324+
transition: opacity 0.3s ease, visibility 0.3s ease;
325+
}
326+
327+
.open-card {
328+
position: fixed;
329+
top: 50%;
330+
left: 50%;
331+
transform: translate(-50%, -50%) scale(0.9);
332+
width: 50%;
333+
height: 70%;
334+
background-color: #1a1d29;
335+
border-radius: 1rem;
336+
z-index: 20;
337+
opacity: 0;
338+
visibility: hidden;
339+
transition: all 0.3s ease;
340+
overflow-y: auto;
341+
}
342+
343+
.info-card {
344+
padding: 2rem;
345+
color:antiquewhite;
346+
}
347+
348+
.info-card .img-container {
349+
width: 50%;
350+
height: 300px;
351+
margin-bottom: 1rem;
352+
}
353+
354+
.info-card h1 {
355+
margin-bottom: 1rem;
356+
}
357+
358+
.info-card p{
359+
color: hsla(0, 0%, 100%, 0.484);
360+
}
361+
362+
.popup_open {
363+
opacity: 1;
364+
visibility: visible;
365+
}
366+
367+
.open-card.popup_open {
368+
transform: translate(-50%, -50%) scale(1);
369+
}

‎home.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,93 @@ <h4>24/7 Techinal Support</h4>
9696
</div>
9797
</div>
9898
</section>
99+
100+
<!-- Cards -->
101+
<section class="Offer-Section" id="Offer-Section">
102+
<div class="Offer-Heading">
103+
<div class="title"> Crafted For Impact </div>
104+
<div class="title-des"> At Zidio, our services are shaped by the principles that define top-tier product
105+
teams: an
106+
unwavering focus on innovation, swift execution, and a relentless commitment to quality.
107+
</div>
108+
</div>
109+
110+
<div class="offer-container">
111+
<div class="offer-cards offer-cards-1">
112+
<div class="card" data-card="3D">
113+
<div class="img-container">
114+
<img src="Assests/layerss(1).png" alt="3D Vector Illustration">
115+
</div>
116+
<div class="card-title">
117+
<h3>3D Vector Illustration</h3>
118+
</div>
119+
</div>
120+
<div class="card" data-card="Web">
121+
<div class="img-container">
122+
<img src="Assests/wedevv.png" alt="Web Development">
123+
</div>
124+
<div class="card-title">
125+
<h3>Web Development</h3>
126+
</div>
127+
</div>
128+
<div class="card" data-card="Graphic">
129+
<div class="img-container">
130+
<img src="Assests/desgin.png" alt="Graphic Design">
131+
</div>
132+
<div class="card-title">
133+
<h3>Graphic Design</h3>
134+
</div>
135+
</div>
136+
</div>
137+
<div class="offer-cards offer-cards-2">
138+
<div class="card" data-card="Hosting">
139+
<div class="img-container">
140+
<img src="Assests/hosting.png" alt="Hosting Services">
141+
</div>
142+
<div class="card-title">
143+
<h3>Hosting Services</h3>
144+
</div>
145+
</div>
146+
<div class="card" data-card="Digital">
147+
<div class="img-container">
148+
<img src="Assests/digital.png" alt="Digital Marketing">
149+
</div>
150+
<div class="card-title">
151+
<h3>Digital Marketing</h3>
152+
</div>
153+
</div>
154+
<div class="card" data-card="Cloud">
155+
<div class="img-container">
156+
<img src="Assests/cloudd.png" alt="Cloud Solution">
157+
</div>
158+
<div class="card-title">
159+
<h3>Cloud Solution</h3>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
165+
<div class="overlay"></div>
166+
167+
<div class="open-card">
168+
<div class="info-card">
169+
<div class="img-container">
170+
<img src="" alt="">
171+
</div>
172+
<h1></h1>
173+
<p></p>
174+
</div>
175+
</div>
176+
</section>
177+
178+
179+
180+
181+
182+
99183

100184

101185

186+
<script src="cards.js"></script>
102187
</body>
103188
</html>

0 commit comments

Comments
 (0)