Spaces:
Running
Running
| <html lang="kg"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GM Entertainment - От идеи до экрана</title> | |
| <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=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* --- CSS Variables --- */ | |
| :root { | |
| --color-primary: #FFD700; /* Gold/Yellow */ | |
| --color-dark: #1a1a1a; /* Near Black */ | |
| --color-light: #ffffff; /* White */ | |
| --color-grey-light: #f8f8f8; /* Very Light Grey */ | |
| --color-grey-dark: #555555; /* Dark Grey */ | |
| --font-main: 'Montserrat', sans-serif; | |
| --transition-speed: 0.3s; | |
| } | |
| /* --- Basic Reset & Base Styles --- */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| font-weight: 300; /* Lighter default weight */ | |
| line-height: 1.7; | |
| color: var(--color-dark); | |
| background-color: var(--color-light); | |
| font-size: 16px; | |
| overflow-x: hidden; /* Prevent horizontal scroll */ | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-weight: 700; /* Bolder headings */ | |
| line-height: 1.3; | |
| margin-bottom: 0.75em; | |
| color: var(--color-dark); | |
| } | |
| h2 { | |
| font-size: 2.5rem; /* 40px */ | |
| text-align: center; | |
| margin-bottom: 60px; | |
| position: relative; | |
| padding-bottom: 15px; | |
| } | |
| /* Underline effect for H2 */ | |
| h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60px; | |
| height: 4px; | |
| background-color: var(--color-primary); | |
| border-radius: 2px; | |
| } | |
| p { | |
| margin-bottom: 1.2em; | |
| color: var(--color-grey-dark); | |
| } | |
| a { | |
| color: var(--color-primary); | |
| text-decoration: none; | |
| transition: color var(--transition-speed) ease; | |
| } | |
| a:hover { | |
| color: var(--color-dark); | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| /* --- Structure & Layout --- */ | |
| .container { | |
| max-width: 1200px; /* Wider container */ | |
| margin: auto; | |
| padding: 0 30px; /* More padding */ | |
| } | |
| section { | |
| padding: 100px 0; /* More vertical space */ | |
| position: relative; /* For potential pseudo-elements */ | |
| } | |
| /* Alternating Backgrounds */ | |
| section:nth-of-type(even) { | |
| background-color: var(--color-grey-light); | |
| } | |
| /* --- Header --- */ | |
| header { | |
| background: var(--color-dark); | |
| color: var(--color-light); | |
| padding: 15px 0; | |
| position: fixed; /* Sticky header */ | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| transition: background var(--transition-speed) ease; | |
| } | |
| /* Optional: slightly transparent header on top, solid on scroll */ | |
| /* header.scrolled { background: rgba(26, 26, 26, 0.95); backdrop-filter: blur(5px); } */ | |
| header .container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| header #logo { | |
| font-size: 1.8rem; /* 28.8px */ | |
| font-weight: 700; | |
| color: var(--color-primary); | |
| letter-spacing: 1px; | |
| /* Replace with <img> if available */ | |
| } | |
| .lang-switcher button { | |
| background: transparent; | |
| color: var(--color-grey-dark); | |
| border: 1px solid var(--color-grey-dark); | |
| padding: 6px 12px; | |
| margin-left: 8px; | |
| cursor: pointer; | |
| border-radius: 20px; /* Pill shape */ | |
| font-size: 0.8rem; /* 12.8px */ | |
| font-weight: 500; | |
| transition: all var(--transition-speed) ease; | |
| } | |
| .lang-switcher button.active { | |
| background: var(--color-primary); | |
| color: var(--color-dark); | |
| border-color: var(--color-primary); | |
| } | |
| .lang-switcher button:hover:not(.active) { | |
| background: var(--color-grey-dark); | |
| color: var(--color-light); | |
| border-color: var(--color-grey-dark); | |
| } | |
| /* --- Hero Section --- */ | |
| #hero { | |
| /* Placeholder background - REPLACE WITH HIGH-QUALITY IMAGE/VIDEO */ | |
| background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)), url('https://via.placeholder.com/1920x1080/1a1a1a/1a1a1a?text=') no-repeat center center/cover; | |
| color: var(--color-light); | |
| text-align: center; | |
| padding: 200px 0 150px 0; /* More padding, adjusted for fixed header */ | |
| min-height: 70vh; /* Minimum height */ | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-top: 70px; /* Adjust for fixed header height */ | |
| } | |
| #hero h1 { | |
| font-size: 3.5rem; /* 56px */ | |
| margin-bottom: 25px; | |
| line-height: 1.2; | |
| font-weight: 700; | |
| color: var(--color-light); | |
| max-width: 900px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #hero h1 span { /* Highlight part of the title */ | |
| color: var(--color-primary); | |
| } | |
| #hero p { | |
| font-size: 1.25rem; /* 20px */ | |
| max-width: 750px; | |
| margin: 0 auto 30px auto; | |
| color: rgba(255, 255, 255, 0.85); /* Slightly transparent white */ | |
| font-weight: 300; | |
| } | |
| .cta-button { /* Example Call to Action Button */ | |
| display: inline-block; | |
| background: var(--color-primary); | |
| color: var(--color-dark); | |
| padding: 15px 35px; | |
| border-radius: 50px; /* Pill shape */ | |
| font-weight: 700; | |
| font-size: 1rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all var(--transition-speed) ease; | |
| box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); | |
| } | |
| .cta-button:hover { | |
| background: var(--color-light); | |
| color: var(--color-dark); | |
| box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4); | |
| transform: translateY(-2px); | |
| } | |
| /* --- Services Section --- */ | |
| #services { | |
| background: var(--color-dark); | |
| } | |
| #services h2 { | |
| color: var(--color-light); | |
| } | |
| #services h2::after { | |
| background-color: var(--color-primary); /* Keep yellow line on dark bg */ | |
| } | |
| .service-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */ | |
| gap: 40px; /* Increased gap */ | |
| margin-top: 60px; | |
| } | |
| .card { | |
| background: var(--color-light); | |
| padding: 40px 30px; | |
| border-radius: 15px; /* More rounded */ | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); | |
| text-align: center; | |
| transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease; | |
| border: 1px solid #eee; /* Subtle border */ | |
| } | |
| .card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); | |
| } | |
| /* Add Icon placeholder style */ | |
| .card::before { | |
| content: "★"; /* Placeholder Star Icon - Replace with SVG or Font Awesome */ | |
| display: block; | |
| font-size: 2.5rem; | |
| color: var(--color-primary); | |
| margin-bottom: 20px; | |
| } | |
| .card p { | |
| font-size: 1rem; /* 16px */ | |
| color: var(--color-grey-dark); | |
| font-weight: 400; | |
| } | |
| /* --- Approach Section --- */ | |
| #approach { | |
| background-color: var(--color-grey-light); | |
| } | |
| #approach .container { | |
| max-width: 900px; /* Wider text container */ | |
| text-align: center; | |
| } | |
| #approach p { | |
| font-size: 1.3rem; /* 20.8px */ | |
| color: var(--color-dark); | |
| font-weight: 400; | |
| line-height: 1.8; | |
| } | |
| #approach p span { /* Highlight keyword */ | |
| color: var(--color-primary); | |
| font-weight: 500; | |
| } | |
| /* --- Projects Section --- */ | |
| #projects { | |
| background-color: var(--color-light); | |
| } | |
| #projects h2 { | |
| color: var(--color-dark); | |
| } | |
| #projects h2::after { | |
| background-color: var(--color-primary); | |
| } | |
| .project { | |
| background: var(--color-light); | |
| margin-bottom: 50px; | |
| padding: 50px; | |
| border-radius: 15px; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); | |
| border: 1px solid #eaeaea; | |
| transition: box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease; | |
| display: flex; /* Use flex for layout */ | |
| flex-wrap: wrap; | |
| gap: 30px; /* Gap between elements inside */ | |
| } | |
| .project-content { | |
| flex: 2; /* Text takes more space */ | |
| min-width: 300px; | |
| } | |
| .project-visuals { | |
| flex: 1; /* Visuals take less space */ | |
| min-width: 250px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; /* Center logos */ | |
| justify-content: center; | |
| } | |
| .project:hover { | |
| box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); | |
| border-color: #ddd; | |
| } | |
| .project.highlight { /* Special style for Kerege */ | |
| border-left: 10px solid var(--color-primary); /* Thicker highlight border */ | |
| background-color: #fff; /* Keep it white for contrast */ | |
| box-shadow: 0 15px 40px rgba(255, 215, 0, 0.15); /* Subtle yellow glow shadow */ | |
| } | |
| .project.highlight:hover { | |
| box-shadow: 0 20px 50px rgba(255, 215, 0, 0.25); | |
| } | |
| .project h3 { | |
| font-size: 2rem; /* 32px */ | |
| color: var(--color-dark); | |
| margin-bottom: 8px; | |
| font-weight: 700; | |
| } | |
| .project .project-type { /* Style for 'теледолбоору' */ | |
| font-size: 0.9rem; /* 14.4px */ | |
| font-weight: 500; | |
| color: var(--color-grey-dark); | |
| margin-left: 15px; | |
| background-color: var(--color-grey-light); | |
| padding: 4px 10px; | |
| border-radius: 15px; | |
| display: inline-block; /* Make it behave like a tag */ | |
| vertical-align: middle; /* Align with heading */ | |
| } | |
| .project .tagline { | |
| font-style: normal; /* Remove italic */ | |
| color: var(--color-grey-dark); | |
| margin-bottom: 25px; | |
| font-size: 1.1rem; /* 17.6px */ | |
| font-weight: 500; | |
| border-left: 3px solid var(--color-primary); | |
| padding-left: 15px; | |
| } | |
| .project p { | |
| margin-bottom: 15px; | |
| color: var(--color-dark); /* Slightly darker paragraph text */ | |
| font-weight: 400; | |
| } | |
| .project-logos { | |
| display: flex; | |
| align-items: center; | |
| gap: 30px; | |
| margin-top: 25px; | |
| flex-wrap: wrap; | |
| justify-content: center; /* Center logos in their container */ | |
| } | |
| .logo-placeholder { /* Placeholder style for logos */ | |
| padding: 15px 25px; | |
| border: 1px dashed var(--color-grey-dark); /* Dashed border */ | |
| border-radius: 8px; | |
| background-color: transparent; | |
| font-size: 0.9rem; | |
| color: var(--color-grey-dark); | |
| text-align: center; | |
| min-width: 120px; | |
| font-weight: 500; | |
| opacity: 0.7; /* Make placeholders less prominent */ | |
| } | |
| /* --- Replace .logo-placeholder with actual <img> tags and style them --- | |
| .project-logos img { | |
| max-height: 50px; | |
| max-width: 150px; | |
| object-fit: contain; | |
| filter: grayscale(100%); // Optional: grayscale logos initially | |
| transition: filter var(--transition-speed) ease; | |
| opacity: 0.8; | |
| } | |
| .project-logos img:hover { | |
| filter: grayscale(0%); | |
| opacity: 1; | |
| } | |
| */ | |
| .project a.more-link { | |
| display: inline-block; | |
| background: var(--color-dark); | |
| color: var(--color-primary); | |
| padding: 10px 25px; | |
| text-decoration: none; | |
| border-radius: 50px; /* Pill shape */ | |
| transition: all var(--transition-speed) ease; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| margin-top: 25px; | |
| border: 1px solid var(--color-dark); | |
| } | |
| .project a.more-link:hover { | |
| background: var(--color-primary); | |
| color: var(--color-dark); | |
| border-color: var(--color-primary); | |
| transform: translateY(-2px); | |
| } | |
| .project a.more-link span { | |
| margin-left: 5px; | |
| transition: transform var(--transition-speed) ease; | |
| display: inline-block; | |
| } | |
| .project a.more-link:hover span { | |
| transform: translateX(3px); | |
| } | |
| /* --- Partners Section --- */ | |
| #partners { | |
| background-color: var(--color-grey-light); | |
| padding-bottom: 120px; /* Extra padding at the bottom */ | |
| } | |
| .partner-logos { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */ | |
| gap: 50px; /* Generous gap */ | |
| align-items: center; | |
| margin-top: 60px; | |
| } | |
| .partner-item { | |
| text-align: center; | |
| } | |
| .partner-item .logo-placeholder { /* Reuse placeholder style */ | |
| margin: 0 auto 15px auto; /* Center placeholder */ | |
| padding: 20px 30px; | |
| min-width: 150px; | |
| opacity: 0.6; /* Make partner logos subtle */ | |
| transition: opacity var(--transition-speed) ease; | |
| } | |
| .partner-item:hover .logo-placeholder { | |
| opacity: 1; | |
| } | |
| .partner-item p { | |
| font-size: 0.85rem; /* 13.6px */ | |
| color: var(--color-grey-dark); | |
| font-weight: 500; | |
| } | |
| /* --- Replace .logo-placeholder with actual <img> tags --- | |
| .partner-logos img { | |
| max-height: 65px; // Slightly larger logos | |
| max-width: 180px; | |
| object-fit: contain; | |
| margin: 0 auto 15px auto; | |
| filter: grayscale(100%); // Start grayscale | |
| opacity: 0.7; | |
| transition: all var(--transition-speed) ease; | |
| } | |
| .partner-item:hover img { | |
| filter: grayscale(0%); | |
| opacity: 1; | |
| transform: scale(1.05); | |
| } | |
| */ | |
| /* --- Footer --- */ | |
| footer { | |
| background: var(--color-dark); | |
| color: rgba(255, 255, 255, 0.7); /* Light text on dark */ | |
| text-align: center; | |
| padding: 80px 0 40px 0; | |
| font-size: 0.9rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 60px; | |
| text-align: left; | |
| } | |
| .footer-section h4 { | |
| margin-bottom: 20px; | |
| color: var(--color-primary); /* Yellow headings */ | |
| font-size: 1.1rem; /* 17.6px */ | |
| font-weight: 700; | |
| } | |
| .footer-section a, .footer-section p { | |
| color: rgba(255, 255, 255, 0.7); | |
| text-decoration: none; | |
| display: block; | |
| margin-bottom: 10px; | |
| font-size: 0.95rem; /* 15.2px */ | |
| transition: color var(--transition-speed) ease; | |
| font-weight: 400; | |
| } | |
| .footer-section a:hover { | |
| color: var(--color-light); | |
| } | |
| .footer-section .gm-logo-footer { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--color-light); | |
| margin-bottom: 15px; | |
| } | |
| .footer-section .gm-logo-footer span { | |
| color: var(--color-primary); | |
| } | |
| .footer-section p.tagline-footer { | |
| font-style: italic; | |
| opacity: 0.8; | |
| } | |
| .footer-bottom { | |
| margin-top: 50px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.15); | |
| padding-top: 30px; | |
| font-size: 0.85rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .footer-bottom a { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .footer-bottom a:hover { | |
| color: var(--color-primary); | |
| } | |
| /* --- Scroll-to-top button --- */ | |
| #scrollTopBtn { | |
| display: none; | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| z-index: 99; | |
| border: none; | |
| outline: none; | |
| background-color: var(--color-primary); | |
| color: var(--color-dark); | |
| cursor: pointer; | |
| padding: 0; /* Remove padding */ | |
| width: 50px; /* Fixed size */ | |
| height: 50px; /* Fixed size */ | |
| border-radius: 50%; | |
| font-size: 1.5rem; /* Larger icon */ | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| transition: all var(--transition-speed) ease; | |
| opacity: 0; /* Start hidden */ | |
| line-height: 50px; /* Center icon vertically */ | |
| text-align: center; | |
| } | |
| #scrollTopBtn.visible { | |
| display: block; | |
| opacity: 1; | |
| } | |
| #scrollTopBtn:hover { | |
| background-color: var(--color-light); | |
| color: var(--color-dark); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); | |
| transform: translateY(-3px); | |
| } | |
| /* --- Responsive Adjustments --- */ | |
| @media (max-width: 992px) { | |
| h2 { font-size: 2.2rem; } | |
| #hero h1 { font-size: 2.8rem; } | |
| #hero p { font-size: 1.1rem; } | |
| section { padding: 80px 0; } | |
| .project { flex-direction: column; } /* Stack project content/visuals */ | |
| .project-visuals { margin-top: 30px; } | |
| } | |
| @media (max-width: 768px) { | |
| body { font-size: 15px; } | |
| h2 { font-size: 2rem; margin-bottom: 40px; } | |
| #hero { padding: 150px 0 100px 0; min-height: 60vh; margin-top: 65px; /* Adjust for smaller header potentially */ } | |
| #hero h1 { font-size: 2.2rem; } | |
| #hero p { font-size: 1rem; } | |
| .container { padding: 0 20px; } | |
| .service-cards { grid-template-columns: 1fr; gap: 30px; } /* Single column */ | |
| .card { padding: 30px 20px;} | |
| .project { padding: 30px; } | |
| .project h3 { font-size: 1.6rem; } | |
| .project .tagline { font-size: 1rem; } | |
| .footer-content { grid-template-columns: 1fr; text-align: center; } | |
| .footer-section h4 { margin-bottom: 15px; } | |
| .footer-section a, .footer-section p { margin-bottom: 8px; } | |
| .footer-bottom { text-align: center; } | |
| } | |
| @media (max-width: 480px) { | |
| header #logo { font-size: 1.5rem; } | |
| .lang-switcher button { padding: 5px 10px; font-size: 0.7rem;} | |
| #hero { padding: 120px 0 80px 0; } | |
| #hero h1 { font-size: 1.8rem; } | |
| #hero p { font-size: 0.9rem; } | |
| .cta-button { padding: 12px 25px; font-size: 0.9rem;} | |
| h2 { font-size: 1.8rem; } | |
| .project h3 { font-size: 1.4rem; } | |
| .project a.more-link { padding: 8px 20px; } | |
| #scrollTopBtn { width: 45px; height: 45px; line-height: 45px; font-size: 1.3rem; bottom: 20px; right: 20px;} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header id="main-header"> | |
| <div class="container"> | |
| <a href="#" id="logo">GM</a> <!-- Shorter Logo for impact --> | |
| <nav> | |
| <div class="lang-switcher"> | |
| <button id="lang-kg" class="active">KG</button> | |
| <button id="lang-ru">RU</button> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="hero"> | |
| <div class="container"> | |
| <h1 data-kg="Идеядан <span class='highlight-text'>экранга</span> чейин шыктандыруучу окуяларды жаратабыз" | |
| data-ru="Создаем вдохновляющие истории от <span class='highlight-text'>идеи</span> до экрана"> | |
| Идеядан <span style="color: var(--color-primary);">экранга</span> чейин шыктандыруучу окуяларды жаратабыз | |
| </h1> | |
| <p data-kg="Биз креативдүү идеяларды иштеп чыгып, сценарийлерди кылдат ойлонуштуруп, жогорку сапаттагы тартуу жана постпродакшн процесстерин камсыздайбыз." | |
| data-ru="Мы разрабатываем креативные идеи, тщательно продумываем сценарии, обеспечиваем высокое качество съемок и постпродакшн."> | |
| Биз креативдүү идеяларды иштеп чыгып, сценарийлерди кылдат ойлонуштуруп, жогорку сапаттагы тартуу жана постпродакшн процесстерин камсыздайбыз. | |
| </p> | |
| <a href="#projects" class="cta-button" data-kg="Долбоорлорду көрүү" data-ru="Смотреть проекты">Долбоорлорду көрүү</a> | |
| </div> | |
| </section> | |
| <!-- Services Section ("Биздин мүмкүнчүлүктөр") --> | |
| <section id="services"> | |
| <div class="container"> | |
| <h2 data-kg="Биздин мүмкүнчүлүктөр" data-ru="Наши возможности">Биздин мүмкүнчүлүктөр</h2> | |
| <div class="service-cards"> | |
| <div class="card"> | |
| <!-- Icon Placeholder --> | |
| <p data-kg="Жарнамалык видеолорду, промо-кампанияларды жана бренд-контенттерди даярдоо" | |
| data-ru="Подготовка рекламных видеороликов, промо-кампаний и бренд-контента"> | |
| Жарнамалык видеолорду, промо-кампанияларды жана бренд-контенттерди даярдоо | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <!-- Icon Placeholder --> | |
| <p data-kg="Социалдык жана документалдык долбоорлорду жаратуу." | |
| data-ru="Создание социальных и документальных проектов."> | |
| Социалдык жана документалдык долбоорлорду жаратуу. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <!-- Icon Placeholder --> | |
| <p data-kg="Толук метраждуу фильмдерди, сериалдарды жана ири кинопроекттерди ишке ашыруу." | |
| data-ru="Реализация полнометражных фильмов, сериалов и крупных кинопроектов."> | |
| Толук метраждуу фильмдерди, сериалдарды жана ири кинопроекттерди ишке ашыруу. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Approach Section --> | |
| <section id="approach"> | |
| <div class="container"> | |
| <p data-kg="Биз <span class='highlight'>чыгармачылык</span>, <span class='highlight'>технология</span> жана <span class='highlight'>кесипкөйлүктү</span> айкалыштырып, адамдарды шыктандыруучу, кызыктыруучу жана унутулгус таасир калтыруучу контент түзөбүз." | |
| data-ru="Мы сочетаем <span class='highlight'>творчество</span>, <span class='highlight'>технологии</span> и <span class='highlight'>профессионализм</span>, создавая контент, который <span class='highlight'>вдохновляет</span>, <span class='highlight'>интересует</span> и оставляет незабываемое <span class='highlight'>впечатление</span>."> | |
| Биз <span style="color: var(--color-primary); font-weight: 500;">чыгармачылык</span>, <span style="color: var(--color-primary); font-weight: 500;">технология</span> жана <span style="color: var(--color-primary); font-weight: 500;">кесипкөйлүктү</span> айкалыштырып, адамдарды шыктандыруучу, кызыктыруучу жана унутулгус таасир калтыруучу контент түзөбүз. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Projects Section ("Долбоорлор") --> | |
| <section id="projects"> | |
| <div class="container"> | |
| <h2 data-kg="Флагмандык долбоорлор" data-ru="Флагманские проекты">Флагмандык долбоорлор</h2> | |
| <!-- Kerege Project (Highlighted) --> | |
| <article class="project highlight"> | |
| <div class="project-content"> | |
| <h3>«Кереге»</h3> | |
| <span class="project-type" data-kg="теледолбоору" data-ru="телепроект">теледолбоору</span> | |
| <p class="tagline" data-kg="Туура аракет - керектүү жыйынтык" data-ru="Правильное действие - нужный результат"> | |
| Туура аракет - керектүү жыйынтык | |
| </p> | |
| <p data-kg="«Кереге» - каржылык сабаттуулукту жогорулатууга багытталган флагмандык теледолбоор. Жеке финансыны башкаруу, пландаштыруу, кредиттерди туура пайдалануу жана акча топтоо ыкмалары." | |
| data-ru="«Кереге» — флагманский телепроект, направленный на повышение финансовой грамотности. Управление личными финансами, планирование, правильное использование кредитов и методы накопления."> | |
| «Кереге» - каржылык сабаттуулукту жогорулатууга багытталган флагмандык теледолбоор. Жеке финансыны башкаруу, пландаштыруу, кредиттерди туура пайдалануу жана акча топтоо ыкмалары. | |
| </p> | |
| <p data-kg="УТРК жана Кыргыз Республикасынын Улуттук Банкы менен биргеликте ишке ашырылууда." | |
| data-ru="Реализуется совместно с НТРК и Национальным Банком Кыргызской Республики."> | |
| УТРК жана Кыргыз Республикасынын Улуттук Банкы менен биргеликте ишке ашырылууда. | |
| </p> | |
| <a href="#" class="more-link" data-kg="Кененирээк билүү" data-ru="Узнать больше">Кененирээк билүү <span aria-hidden="true">→</span></a> | |
| </div> | |
| <div class="project-visuals"> | |
| <!-- Replace with actual logos --> | |
| <div class="logo-placeholder">КЕРЕГЕ Логотип</div> | |
| <div class="project-logos"> | |
| <div class="logo-placeholder">УТРК</div> | |
| <div class="logo-placeholder">КР Улуттук Банкы</div> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Alga Project --> | |
| <article class="project"> | |
| <div class="project-content"> | |
| <h3>«Алга»</h3> | |
| <span class="project-type" data-kg="теледолбоору" data-ru="телепроект">теледолбоору</span> | |
| <p class="tagline" data-kg="Бүгүнкү аракет - эртеңки келечек" data-ru="Сегодняшнее усилие - завтрашнее будущее"> | |
| Бүгүнкү аракет - эртеңки келечек | |
| </p> | |
| <p data-kg="«Алга» - экономикалык түшүнүктөрдү жана Кыргызстандын өнүгүү мүмкүнчүлүктөрүн жөнөкөй тилде түшүндүргөн программа." | |
| data-ru="«Алга» — программа, объясняющая экономические концепции и возможности развития Кыргызстана простым языком."> | |
| «Алга» - экономикалык түшүнүктөрдү жана Кыргызстандын өнүгүү мүмкүнчүлүктөрүн жөнөкөй тилде түшүндүргөн программа. | |
| </p> | |
| <p data-kg="КР Президентинин алдындагы Инвестициялар боюнча мамлекеттик агенттиги менен биргеликте." | |
| data-ru="Совместно с Национальным агентством по инвестициям при Президенте КР."> | |
| КР Президентинин алдындагы Инвестициялар боюнча мамлекеттик агенттиги менен биргеликте. | |
| </p> | |
| <a href="#" class="more-link" data-kg="Кененирээк билүү" data-ru="Узнать больше">Кененирээк билүү <span aria-hidden="true">→</span></a> | |
| </div> | |
| <div class="project-visuals"> | |
| <!-- Replace with actual logos --> | |
| <div class="logo-placeholder">АЛГА Логотип</div> | |
| <div class="project-logos"> | |
| <div class="logo-placeholder">УТРК</div> | |
| <div class="logo-placeholder">Инвест Агенттиги</div> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- 100th Anniversary Project --> | |
| <article class="project"> | |
| <div class="project-content"> | |
| <h3 data-kg="Кара-Кыргыз автономиялуу облусуна 100 жыл" | |
| data-ru="100 лет Кара-Киргизской автономной области"> | |
| Кара-Кыргыз автономиялуу облусуна 100 жыл | |
| </h3> | |
| <span class="project-type" data-kg="Кыска метраждуу тасма" data-ru="Короткометражный фильм">Кыска метраждуу тасма</span> | |
| <p class="tagline" data-kg="Тарыхый мурасты даңазалоо" data-ru="Прославление исторического наследия">Тарыхый мурасты даңазалоо</p> | |
| <p data-kg="Кыргыз Республикасынын Президенти С.Н. Жапаровдун колдоосу менен тартылган, тарыхый маанидеги окуяга арналган тасма." | |
| data-ru="Фильм, посвященный историческому событию, снятый при поддержке Президента Кыргызской Республики С.Н. Жапарова."> | |
| Кыргыз Республикасынын Президенти С.Н. Жапаровдун колдоосу менен тартылган, тарыхый маанидеги окуяга арналган тасма. | |
| </p> | |
| <a href="#" class="more-link" data-kg="Кененирээк билүү" data-ru="Узнать больше">Кененирээк билүү <span aria-hidden="true">→</span></a> | |
| </div> | |
| <div class="project-visuals"> | |
| <!-- Replace with actual logos --> | |
| <div class="logo-placeholder">100 Жыл Логотип</div> | |
| <div class="project-logos"> | |
| <div class="logo-placeholder">Маданият Министрлиги</div> | |
| <!-- Add other relevant logos if known --> | |
| <div class="logo-placeholder">Президент Аппараты (placeholder)</div> | |
| </div> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- Partners Section ("Өнөктөштөр") --> | |
| <section id="partners"> | |
| <div class="container"> | |
| <h2 data-kg="Биздин өнөктөштөр" data-ru="Наши партнеры">Биздин өнөктөштөр</h2> | |
| <div class="partner-logos"> | |
| <div class="partner-item"> | |
| <!-- Replace with actual logo --> | |
| <div class="logo-placeholder">УТРК Логотип</div> | |
| <p data-kg="УТРК" data-ru="НТРК">УТРК</p> | |
| </div> | |
| <div class="partner-item"> | |
| <!-- Replace with actual logo --> | |
| <div class="logo-placeholder">КР Улуттук Банкы Логотип</div> | |
| <p data-kg="КР Улуттук Банкы" data-ru="Нацбанк КР">КР Улуттук Банкы</p> | |
| </div> | |
| <div class="partner-item"> | |
| <!-- Replace with actual logo --> | |
| <div class="logo-placeholder">Маданият Министрлиги Логотип</div> | |
| <p data-kg="Маданият Министрлиги" data-ru="Минкультуры КР">Маданият Министрлиги</p> | |
| </div> | |
| <div class="partner-item"> | |
| <!-- Replace with actual logo --> | |
| <div class="logo-placeholder">Инвестициялар Агенттиги Логотип</div> | |
| <p data-kg="Инвестициялар Агенттиги" data-ru="Агентство по Инвестициям">Инвестициялар Агенттиги</p> | |
| </div> | |
| <!-- Add more partners as needed --> | |
| <div class="partner-item"> | |
| <div class="logo-placeholder">Президент Аппараты (Логотип)</div> | |
| <p data-kg="КР Президентинин Администрациясы" data-ru="Администрация Президента КР">КР Президентинин Администрациясы</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container footer-content"> | |
| <div class="footer-section"> | |
| <h4 class="gm-logo-footer">GM <span>Entertainment</span></h4> | |
| <p class="tagline-footer" data-kg="Идеядан экранга чейин шыктандыруу." data-ru="Вдохновение от идеи до экрана.">Идеядан экранга чейин шыктандыруу.</p> | |
| </div> | |
| <div class="footer-section"> | |
| <h4 data-kg="Навигация" data-ru="Навигация">Навигация</h4> | |
| <a href="#hero" data-kg="Башкы бет" data-ru="Главная">Башкы бет</a> | |
| <a href="#services" data-kg="Мүмкүнчүлүктөр" data-ru="Возможности">Мүмкүнчүлүктөр</a> | |
| <a href="#projects" data-kg="Долбоорлор" data-ru="Проекты">Долбоорлор</a> | |
| <a href="#partners" data-kg="Өнөктөштөр" data-ru="Партнеры">Өнөктөштөр</a> | |
| </div> | |
| <div class="footer-section"> | |
| <h4 data-kg="Соцтармактар" data-ru="Соцсети">Соцтармактар</h4> | |
| <a href="#" target="_blank">YouTube</a> | |
| <a href="#" target="_blank">Instagram</a> | |
| <a href="#" target="_blank">TikTok</a> | |
| <!-- Add Facebook, etc. if needed --> | |
| </div> | |
| <div class="footer-section"> | |
| <h4 data-kg="Байланыш" data-ru="Контакты">Байланыш</h4> | |
| <p>+996 559 013 965</p> | |
| <p>+996 505 013 965</p> | |
| <p><a href="mailto:info@gmentertainment.kg" data-kg="info@gmentertainment.kg (мисал)" data-ru="info@gmentertainment.kg (пример)">info@gmentertainment.kg (мисал)</a></p> | |
| </div> | |
| </div> | |
| <div class="container footer-bottom"> | |
| <p>© <span id="currentYear">2024</span> GM Entertainment. <span data-kg="Бардык укуктар корголгон." data-ru="Все права защищены.">Бардык укуктар корголгон.</span> <a href="#">Privacy Policy (placeholder)</a></p> | |
| </div> | |
| </footer> | |
| <!-- Scroll Top Button --> | |
| <button id="scrollTopBtn" title="Go to top">⇧</button> | |
| <script> | |
| // --- Language Switching --- | |
| const langButtons = document.querySelectorAll('.lang-switcher button'); | |
| const translatableElements = document.querySelectorAll('[data-kg][data-ru]'); | |
| const htmlTag = document.documentElement; | |
| function setLanguage(lang) { | |
| htmlTag.setAttribute('lang', lang); | |
| translatableElements.forEach(el => { | |
| const text = el.getAttribute(`data-${lang}`); | |
| // Handle elements with nested spans for highlighting | |
| if (el.querySelector('span')) { | |
| // Basic approach: might need refinement if spans have data attributes too | |
| // This replaces the entire innerHTML, assuming the structure inside data-xx matches | |
| el.innerHTML = text; | |
| } else { | |
| el.textContent = text; | |
| } | |
| }); | |
| langButtons.forEach(btn => { | |
| btn.classList.toggle('active', btn.id === `lang-${lang}`); | |
| }); | |
| localStorage.setItem('preferredLanguage', lang); | |
| } | |
| langButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const lang = button.id.split('-')[1]; | |
| setLanguage(lang); | |
| }); | |
| }); | |
| const storedLang = localStorage.getItem('preferredLanguage'); | |
| setLanguage(storedLang || 'kg'); // Default to KG | |
| // --- Scroll-to-Top Button --- | |
| const scrollTopBtn = document.getElementById("scrollTopBtn"); | |
| window.onscroll = function() {scrollFunction()}; | |
| function scrollFunction() { | |
| if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { | |
| scrollTopBtn.classList.add('visible'); | |
| } else { | |
| scrollTopBtn.classList.remove('visible'); | |
| } | |
| } | |
| scrollTopBtn.addEventListener('click', () => { | |
| window.scrollTo({top: 0, behavior: 'smooth'}); | |
| }); | |
| // --- Dynamic Year in Footer --- | |
| document.getElementById('currentYear').textContent = new Date().getFullYear(); | |
| // --- Optional: Change header background on scroll --- | |
| /* | |
| const header = document.getElementById('main-header'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| */ | |
| </script> | |
| </body> | |
| </html> |