Full Stack Development Course | MD Skills
/* ===== MD SKILLS HERO SECTION ===== */
.md-course-hero,
.md-course-hero * {
box-sizing: border-box;
}
.md-course-hero {
--md-yellow: #ffd43b;
--md-white: #ffffff;
--md-muted: #d1d9ec;
--md-navy: #07142f;
position: relative;
overflow: hidden;
width: 100%;
padding: 56px 24px;
color: var(--md-white);
font-family: Inter, Arial, Helvetica, sans-serif;
background:
radial-gradient(ellipse at 8% 5%, rgba(39, 106, 224, .42), transparent 40%),
radial-gradient(ellipse at 92% 85%, rgba(0, 194, 255, .18), transparent 38%),
linear-gradient(125deg, #07142f 0%, #102c62 52%, #064b83 100%);
border-radius: 20px;
}
.md-course-hero::before {
content: "";
position: absolute;
width: 320px;
height: 320px;
top: -190px;
right: 12%;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
pointer-events: none;
}
.md-course-hero::after {
content: "";
position: absolute;
width: 450px;
height: 450px;
bottom: -320px;
left: 28%;
border: 1px solid rgba(255,255,255,.08);
border-radius: 50%;
pointer-events: none;
}
.md-hero-container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
align-items: center;
gap: 54px;
}
/* ===== BRAND ===== */
.md-brand {
display: inline-flex;
align-items: center;
gap: 11px;
margin-bottom: 28px;
}
.md-brand-logo {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #07142f;
background: var(--md-yellow);
border-radius: 13px;
font-size: 20px;
font-weight: 900;
letter-spacing: -1px;
}
.md-brand-name {
margin: 0;
color: #fff;
font-size: 19px;
line-height: 1.2;
font-weight: 800;
}
.md-brand-tagline {
display: block;
margin-top: 4px;
color: #cbd8f1;
font-size: 11px;
letter-spacing: 1.3px;
text-transform: uppercase;
}
/* ===== LEFT CONTENT ===== */
.md-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 13px;
margin-bottom: 19px;
color: #fff;
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.18);
border-radius: 50px;
font-size: 12px;
font-weight: 700;
letter-spacing: .6px;
}
.md-hero-eyebrow span {
width: 8px;
height: 8px;
background: #45e6a3;
border-radius: 50%;
box-shadow: 0 0 12px rgba(69,230,163,.7);
}
.md-hero-title {
max-width: 700px;
margin: 0 0 20px;
color: #fff;
font-size: clamp(36px, 4.3vw, 57px);
line-height: 1.1;
letter-spacing: -2px;
font-weight: 850;
}
.md-hero-title .md-highlight {
color: var(--md-yellow);
}
.md-hero-description {
max-width: 590px;
margin: 0 0 27px;
color: var(--md-muted);
font-size: 16px;
line-height: 1.8;
}
.md-hero-features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 20px;
margin: 0 0 30px;
}
.md-hero-feature {
display: flex;
align-items: center;
gap: 11px;
color: #f4f7ff;
font-size: 14px;
line-height: 1.5;
}
.md-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
flex-shrink: 0;
color: var(--md-yellow);
background: rgba(255,212,59,.11);
border: 1px solid rgba(255,212,59,.23);
border-radius: 10px;
font-size: 17px;
}
.md-hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 13px;
margin-bottom: 28px;
}
.md-hero-btn {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 49px;
padding: 0 22px;
border-radius: 9px;
text-decoration: none !important;
font-size: 14px;
font-weight: 800;
transition: transform .2s ease, box-shadow .2s ease;
}
.md-hero-btn:hover {
transform: translateY(-2px);
}
.md-hero-btn-primary {
color: #07142f !important;
background: var(--md-yellow);
box-shadow: 0 8px 25px rgba(255,212,59,.17);
}
.md-hero-btn-secondary {
color: #fff !important;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.27);
}
.md-hero-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 17px;
color: #d5def0;
font-size: 12px;
}
.md-trust-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.md-trust-check {
color: #65e6ad;
font-weight: 900;
}
/* ===== COUNSELLING FORM ===== */
.md-hero-form-card {
padding: 29px;
color: #18243a;
background: #fff;
border: 1px solid rgba(255,255,255,.65);
border-radius: 19px;
box-shadow: 0 25px 70px rgba(0,0,0,.24);
}
.md-form-topline {
display: inline-flex;
padding: 7px 11px;
margin-bottom: 14px;
color: #1457b8;
background: #edf5ff;
border-radius: 6px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.md-form-title {
margin: 0 0 8px;
color: #101d35;
font-size: 25px;
line-height: 1.25;
font-weight: 850;
}
.md-form-description {
margin: 0 0 22px;
color: #68758a;
font-size: 13px;
line-height: 1.6;
}
.md-course-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.md-course-form .md-field {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.md-course-form .md-field label {
color: #27364d;
font-size: 12px;
font-weight: 750;
}
.md-course-form .md-field input,
.md-course-form .md-field select {
display: block;
width: 100%;
min-width: 0;
height: 46px;
margin: 0;
padding: 0 12px;
color: #1c2940;
background-color: #f8faff;
border: 1px solid #dce4ef;
border-radius: 8px;
outline: none;
font-family: inherit;
font-size: 13px;
box-shadow: none;
}
.md-course-form .md-field input:focus,
.md-course-form .md-field select:focus {
border-color: #2769d8;
box-shadow: 0 0 0 3px rgba(39,105,216,.1);
}
.md-course-form .md-field select {
cursor: pointer;
}
.md-form-submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 49px;
padding: 12px 16px;
margin-top: 3px;
color: #07142f;
background: var(--md-yellow);
border: 0;
border-radius: 9px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 850;
transition: background .2s ease, transform .2s ease;
}
.md-form-submit:hover {
background: #ffca16;
transform: translateY(-1px);
}
.md-form-privacy {
margin: 0;
color: #8490a3;
font-size: 10px;
line-height: 1.6;
text-align: center;
}
.md-form-status {
display: none;
padding: 11px;
color: #14532d;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 8px;
font-size: 12px;
line-height: 1.6;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.md-course-hero {
padding: 42px 22px;
}
.md-hero-container {
grid-template-columns: 1fr;
gap: 35px;
max-width: 650px;
}
.md-hero-title {
font-size: clamp(36px, 7vw, 52px);
}
.md-hero-form-card {
width: 100%;
}
}
@media (max-width: 520px) {
.md-course-hero {
padding: 30px 16px;
border-radius: 13px;
}
.md-brand {
margin-bottom: 23px;
}
.md-hero-title {
font-size: 36px;
letter-spacing: -1.2px;
}
.md-hero-description {
font-size: 14px;
}
.md-hero-features {
grid-template-columns: 1fr;
gap: 12px;
}
.md-hero-actions {
align-items: stretch;
flex-direction: column;
}
.md-hero-btn {
width: 100%;
}
.md-hero-trust {
gap: 11px 15px;
}
.md-hero-form-card {
padding: 21px 16px;
border-radius: 14px;
}
.md-form-title {
font-size: 23px;
}
}
MD
MD Skills
Master Development Skills
CAREER-FOCUSED PROFESSIONAL TRAINING
Become a
Full Stack Developer
with Industry-Relevant Skills
Build practical development skills, work on real-world projects,
and prepare for your next career opportunity with structured
professional training.
⌘
Practical, project-based learning
▣
Industry-relevant curriculum
↗
Career preparation guidance
✓
Guided learning support
✓ Practical Learning
✓ Guided Projects
✓ Career Support
(function () {
const form = document.getElementById("md-course-form");
const status = document.getElementById("md-form-status");
if (!form || !status) return;
form.addEventListener("submit", function (event) {
event.preventDefault();
if (!form.reportValidity()) return;
status.style.display = "block";
status.textContent =
"Your details are ready, but this form is not connected to a submission service yet. Please connect it to Elementor Forms or your preferred form handler to receive enquiries.";
status.scrollIntoView({
behavior: "smooth",
block: "nearest"
});
});
})();
```
