<!DOCTYPE html> <html lang="mn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>10-р ангийн МХТ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> <style> *{ margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; } body{ background:#0b1120; color:white; overflow-x:hidden; } /* Background Glow */ .bg{ position:fixed; width:100%; height:100%; z-index:-1; background: radial-gradient(circle at top left,#7c3aed55,transparent 30%), radial-gradient(circle at bottom right,#2563eb55,transparent 30%), #0b1120; } header{ display:flex; justify-content:space-between; align-items:center; padding:25px 8%; backdrop-filter:blur(10px); background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:0; z-index:100; } .logo{ font-size:28px; font-weight:700; background:linear-gradient(90deg,#60a5fa,#c084fc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } nav a{ color:#cbd5e1; text-decoration:none; margin-left:25px; transition:0.3s; font-weight:500; } nav a:hover{ color:white; } .hero{ min-height:100vh; display:flex; justify-content:center; align-items:center; text-align:center; flex-direction:column; padding:40px; } .hero h1{ font-size:75px; line-height:1.1; max-width:900px; background:linear-gradient(90deg,#ffffff,#93c5fd,#d8b4fe); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .hero p{ margin-top:25px; max-width:700px; color:#94a3b8; font-size:20px; line-height:1.7; } .hero button{ margin-top:35px; padding:15px 40px; border:none; border-radius:50px; background:linear-gradient(90deg,#2563eb,#7c3aed); color:white; font-size:18px; cursor:pointer; transition:0.3s; box-shadow:0 0 25px #7c3aed55; } .hero button:hover{ transform:scale(1.05); box-shadow:0 0 35px #7c3aed99; } .section-title{ text-align:center; font-size:45px; margin-bottom:50px; font-weight:700; } .lessons{ padding:80px 8%; } .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; } .card{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(15px); border-radius:25px; padding:35px; transition:0.4s; position:relative; overflow:hidden; } .card::before{ content:''; position:absolute; width:200px; height:200px; background:#7c3aed33; border-radius:50%; top:-80px; right:-80px; } .card:hover{ transform:translateY(-12px); border-color:#7c3aed; box-shadow:0 0 25px #7c3aed55; } .card h3{ font-size:28px; margin-bottom:15px; } .card p{ color:#cbd5e1; line-height:1.7; } .card button{ margin-top:25px; padding:12px 25px; border:none; border-radius:12px; background:#ffffff10; color:white; cursor:pointer; transition:0.3s; } .card button:hover{ background:#7c3aed; } footer{ padding:40px; text-align:center; color:#64748b; border-top:1px solid rgba(255,255,255,0.08); margin-top:80px; } @media(max-width:768px){ .hero h1{ font-size:48px; } .hero p{ font-size:17px; } header{ flex-direction:column; gap:15px; } } </style> </head> <body> <div class="bg"></div> <header> <div class="logo">10A МХТ</div> <nav> <a href="#">Нүүр</a> <a href="#">Хичээл</a> <a href="#">Тест</a> <a href="#">Даалгавар</a> </nav> </header> <section class="hero"> <h1> Монголын 10-р ангийн<br> МХТ Хичээлийн Вэбсайт </h1> <p> HTML, CSS, JavaScript, Python болон орчин үеийн технологийн хичээлүүдийг aesthetic дизайнтайгаар суралцаарай. </p> <button onclick="alert('Хичээл эхэллээ 🚀')"> Start Learning </button> </section> <section class="lessons"> <h2 class="section-title">Хичээлүүд</h2> <div class="cards"> <div class="card"> <h3>HTML</h3> <p> Вэб хуудасны бүтэц хийх үндсэн хэл. </p> <button>View Lesson</button> </div> <div class="card"> <h3>CSS</h3> <p> Орчин үеийн гоё дизайн болон animation. </p> <button>View Lesson</button> </div> <div class="card"> <h3>JavaScript</h3> <p> Interactive website болон dynamic effect. </p> <button>View Lesson</button> </div> <div class="card"> <h3>Python</h3> <p> Програмчлалын үндэс болон AI logic. </p> <button>View Lesson</button> </div> </div> </section> <footer> © 2026 10-р ангийн МХТ • Designed by Jarvis </footer> </body> </html>
Show full message