Skip to content

Commit 8cf48ef

Browse files
gyanshankar1708gyanshankar1708
authored
Merge pull request #335 from Khushi5155/feature/graphic-design
Add graphic design Service page
2 parents 9b18156 + 406e8b7 commit 8cf48ef

File tree

4 files changed

+1518
-1
lines changed

4 files changed

+1518
-1
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5502
3+
}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -818,7 +818,7 @@ <h6 class="mb-0">Social Media Management</h6>
818818

819819
<!-- Graphic Designing -->
820820
<div class="col-sm-12 col-md-6 col-lg-4">
821-
<a href="#" class="training-links">
821+
<a href="src/graphic_design.html" class="training-links">
822822
<div class="program-card d-flex align-items-center gap-2"
823823
data-tooltip="Create beautiful and professional designs.">
824824
<img src="images/icons/GraphicDesign.png" alt="Graphic Designing" class="icon" />

‎src/darkMode.js‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1066,6 +1066,189 @@ class DarkModeToggle {
10661066
transform: translateY(-7px);
10671067
box-shadow: 0 8px 25px rgba(42, 41, 41, 0.26);
10681068
}
1069+
.dark .testimonials {
1070+
padding: 80px 20px;
1071+
background: #0d1117; /* Dark background */
1072+
text-align: center;
1073+
color: #e6edf3; /* Light text */
1074+
}
1075+
1076+
.dark .testimonials h2 {
1077+
font-size: 2.5rem;
1078+
margin-bottom: 40px;
1079+
background: linear-gradient(90deg, #6a11cb, #2575fc);
1080+
-webkit-background-clip: text;
1081+
-webkit-text-fill-color: transparent;
1082+
}
1083+
1084+
.dark .testimonial-container {
1085+
position: relative;
1086+
max-width: 700px;
1087+
margin: 0 auto;
1088+
perspective: 1000px;
1089+
height: 200px;
1090+
}
1091+
1092+
.dark .testimonial {
1093+
position: absolute;
1094+
top: 0;
1095+
left: 0;
1096+
right: 0;
1097+
opacity: 0;
1098+
transform: rotateY(90deg);
1099+
transition: all 0.8s ease;
1100+
background: #161b22; /* Dark card */
1101+
padding: 30px;
1102+
border-radius: 15px;
1103+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Softer dark shadow */
1104+
color: #e6edf3;
1105+
}
1106+
1107+
.dark .testimonial.active {
1108+
opacity: 1;
1109+
transform: rotateY(0deg);
1110+
}
1111+
1112+
.dark .testimonial p {
1113+
font-size: 1.1rem;
1114+
font-style: italic;
1115+
margin-bottom: 15px;
1116+
color: #c9d1d9; /* Softer light text */
1117+
}
1118+
1119+
.dark .testimonial h4 {
1120+
font-weight: 600;
1121+
color: #ffffff; /* Bright username */
1122+
}
1123+
1124+
.dark .testimonial-controls {
1125+
margin-top: 30px;
1126+
}
1127+
1128+
.dark .dot {
1129+
display: inline-block;
1130+
height: 14px;
1131+
width: 14px;
1132+
margin: 0 6px;
1133+
background: #444; /* Darker inactive */
1134+
border-radius: 50%;
1135+
cursor: pointer;
1136+
transition: 0.3s;
1137+
}
1138+
1139+
.dark .dot.active {
1140+
background: #2575fc; /* Accent for active */
1141+
transform: scale(1.2);
1142+
}
1143+
1144+
/* Responsive */
1145+
.dark @media (max-width: 768px) {
1146+
.testimonial-container {
1147+
height: auto;
1148+
}
1149+
1150+
.testimonial {
1151+
font-size: 0.95rem;
1152+
}
1153+
}
1154+
.dark .professional-footer,
1155+
.dark .professional-footer {
1156+
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%) !important;
1157+
color: #ffffff !important;
1158+
}
1159+
.dark.brand-name,
1160+
.dark .brand-name {
1161+
color: #ffffff !important;
1162+
background: linear-gradient(45deg, #00ffe7, #0b84f3) !important;
1163+
-webkit-background-clip: text !important;
1164+
-webkit-text-fill-color: transparent !important;
1165+
background-clip: text !important;
1166+
}
1167+
.dark .stat-number,
1168+
.dark .stat-number {
1169+
color: #00ffe7 !important;
1170+
}
1171+
.dark .stat-label,
1172+
.dark .stat-label {
1173+
color: #a8b2d1 !important;
1174+
}
1175+
.dark .footer-title,
1176+
.dark .footer-title {
1177+
color: #ffffff !important;
1178+
}
1179+
.dark .footer-title::after,
1180+
.dark .footer-title::after {
1181+
background: linear-gradient(45deg, #00ffe7, #0b84f3) !important;
1182+
}
1183+
.dark .footer-links a,
1184+
.dark .footer-links a {
1185+
color: #a8b2d1 !important;
1186+
}
1187+
.dark .footer-links a:hover,
1188+
.dark .footer-links a:hover {
1189+
color: #00ffe7 !important;
1190+
}
1191+
.dark .footer-links a::before,
1192+
.dark .footer-links a::before {
1193+
color: #0b84f3 !important;
1194+
}
1195+
.dark .contact-item i,
1196+
.dark .contact-item i {
1197+
color: #0b84f3 !important;
1198+
}
1199+
.dark .contact-item a,
1200+
.dark .contact-item a {
1201+
color: #a8b2d1 !important;
1202+
}
1203+
.dark .contact-item a:hover,
1204+
.dark .contact-item a:hover {
1205+
color: #00ffe7 !important;
1206+
}
1207+
.dark .contact-item span,
1208+
.dark .contact-item span {
1209+
color: #a8b2d1 !important;
1210+
}
1211+
.dark .footer-bottom,
1212+
.dark .footer-bottom {
1213+
background: rgba(0, 0, 0, 0.3) !important;
1214+
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
1215+
}
1216+
.dark .copyright,
1217+
.dark .copyright {
1218+
color: #a8b2d1 !important;
1219+
}
1220+
.dark .footer-nav a,
1221+
.dark .footer-nav a {
1222+
color: #a8b2d1 !important;
1223+
}
1224+
.dark .footer-nav a:hover,
1225+
.dark .footer-nav a:hover {
1226+
color: #00ffe7 !important;
1227+
}
1228+
1229+
1230+
1231+
1232+
1233+
1234+
1235+
1236+
1237+
1238+
1239+
1240+
1241+
1242+
1243+
1244+
1245+
1246+
1247+
1248+
1249+
1250+
1251+
10691252
10701253
`;
10711254
document.head.appendChild(style);

0 commit comments

Comments
 (0)