Two-dimensional objects
2D transformations, translation, scaling, skewing, rotation
Volumetric objects: basics
Transformations for three-dimensional objects, perspective, point of view
Volumetric objects: transformations and functions
transform-style, translate3d, rotate3d, scale3d
<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="en" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">
<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="zKm5a8UKTi6AXqm2ecH0hyDYjDhZB2yh7ihfLWqA9Zefb9Rd5GF1zudUVl7LX8NGLHICY5UZdq1MrZU-J1wqTA";gon.locale="en";gon.language="en";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLScNwxM8rjQRRWqW5G6dn6-0NvLUblFemy7EvA9VsJ7Ov5wXqA";
//]]>
</script>
<meta charset="utf-8">
<title>Course CSS Animation</title>
<meta name="description" content="The skill of creating CSS animations to enhance user experience and increase market demand">
<link rel="canonical" href="https://hexlet.io/programs/css-animation">
<link rel="image_src" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNDEsInB1ciI6ImJsb2JfaWQifX0=--c6257f453e8d810021729725e433d63fccfceb5f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Open%20source-cuate.png">
<meta property="og:title" content="Course CSS Animation">
<meta property="og:description" content="The skill of creating CSS animations to enhance user experience and increase market demand">
<meta property="og:url" content="https://hexlet.io/programs/css-animation">
<meta property="og:image" content="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNDEsInB1ciI6ImJsb2JfaWQifX0=--c6257f453e8d810021729725e433d63fccfceb5f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Open%20source-cuate.png">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="aFXHMH3Xb7QEaVbSmGWz6ujSgHZRlk7PXOhVAky9rTM7k6oGXLxUVGNjqToq-4Qr5HgOLZ2IVMP-bZ8RAWFy6A" />
<script src="/vite/assets/inertia-CgrHVkgd.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-C1cfMHAs.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-BXKrsWjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-Du9ljYPK.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/RootLayout-CUZzAr0T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DbDKujDz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DATLpQdV.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-BhY0AP_c.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-P1s4q94S.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-BsSGGK2I.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" />
<script src="/vite/assets/application-ZyVHkzwO.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-BokUl44d.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-gQnwoPhY.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-CB1F2-VC.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" media="screen" />
<!-- Google Tag Manager - deferred -->
<script>
// dataLayer stub сразу — пуши работают до загрузки скрипта
window.dataLayer = window.dataLayer || [];
// Сам скрипт — отложенно после load
window.addEventListener('load', function() {
setTimeout(function() {
dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
var j = document.createElement('script');
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
document.head.appendChild(j);
}, 1500);
});
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-WK88TH" style="display:none;visibility:hidden" width="0"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Hexlet logo" height="24" src="https://hexlet.io/vite/assets/logo_en_light-FS-yL6XB.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Menu" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
All courses
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Everything</div>
<div class="text-muted">8</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular categories</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_backend-development">Backend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_frontend-development">Frontend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Testing
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular courses</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Frontend Developer
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
About Hexlet
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">About company
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Blog
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.results">Results</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.career">Career</span>
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Testimonials
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.support">Support</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&promo_name=referal-program&promo_position=promo_position&promo_start=010724&promo_type=link" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.referal_program">Referal Program</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.certificates">Certificates</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.vacancies">Vacancies</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.teams">Teams</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.college">College</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.private_school">Private School</span>
</span></li>
</ul>
</li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Switch theme" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Sign up</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://hexlet.io/session/new" role="button"><span>Sign in</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">
</div>
<main class="mb-6 min-vh-100 h-100">
<link rel="preload" as="image" href="/vite/assets/15-DYqgXwlz.png" fetchPriority="high"/><div id="app" data-page="{"component":"web/programs/show","props":{"errors":{},"locale":"en","language":"en","httpsHost":"https://hexlet.io","host":"hexlet.io","colorScheme":"light","auth":{"user":{"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false}},"cloudflareTurnstileSiteKey":"0x4AAAAAAA15KmeFXzd2H0Xo","vkIdClientId":"51586979","yandexIdClientId":null,"formAuthToken":"Bj1lQjZnWGudqvSP8pBFhMtQ4XE2OiDABjpj3Wmc_e9V-wh0Fwxji_qgC2dADnJFx_pvKvokOsykv6nOJEAiNA","landing":{"stack":{"id":140,"slug":"css-animation","title":"CSS Animation","audience":"for_programmers","start_type":"anytime","pricing_model":"subscription","priority":"medium","kind":"track","state":"published","stack_state":"finished","order":null,"duration_in_months":1,"lessons_count":7,"projects_count":0},"id":237,"slug":"css-animation","title":"CSS Animation","subtitle":"The skill of creating CSS animations to enhance user experience and increase market demand","subtitle_for_lists":"","skill_list":["CSS","2D Objects","3D objects","2D Transformations","3D Transformations"],"locale":"en","current":true,"duration_in_months_text":"1 month","stack_slug":"css-animation","price_text":"from $49","duration_text":"1 month","audience_text":"Translation missing: en.views.web.shared.courses.cards.it.advanced_level"},"projects":[],"landingLearningModules":[{"items":[{"id":593,"title":"Two-dimensional objects","description":"2D transformations, translation, scaling, skewing, rotation","order":1},{"id":594,"title":"Volumetric objects: basics","description":"Transformations for three-dimensional objects, perspective, point of view","order":2},{"id":595,"title":"Volumetric objects: transformations and functions","description":"transform-style, translate3d, rotate3d, scale3d","order":3}],"id":200,"title":"Object transformation.","duration_value":1,"duration_unit":"month","exercises_count":7,"quizzes_count":8,"order":1,"project_title":"","project_description":"","project_cover":{"name":"project_cover","record":{"id":200,"title":"Object transformation.","order":1,"duration_value":1,"duration_unit":"month","exercises_count":7,"quizzes_count":8,"stack_landing_id":237,"tags":["2D Objects","3D Objects","2D Transformations","3D Transformations"],"created_at":"2025-04-22T08:01:11.336Z","updated_at":"2025-04-30T10:37:46.827Z","project_title":"","project_description":"","project_image_data":null}},"tags":["2D Objects","3D Objects","2D Transformations","3D Transformations"]}],"landingQnaItems":[]},"url":"/programs/css-animation","version":"1656487db0d1dd5f33634fe1070e57e55135cbeb","encryptHistory":false,"clearHistory":false,"flash":{"events":[{"type":"Ecommerce::ProductViewedEvent","name":"Product Viewed","event_id":"a3ee417a-2363-47af-b143-e4b479340a16","metadata":{},"data":{"user_id":null,"product_id":"140","name":"CSS Animation","category":"program","locale":"en","language":"en"}}]}}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}
:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}
:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="overflow:hidden" class=""><style data-mantine-styles="inline">.__m__-_R_1mb_{padding-bottom:var(--mantine-spacing-xs);}@media(min-width: 75em){.__m__-_R_1mb_{padding-bottom:var(--mantine-spacing-xxl);}}</style><div style="--container-size:var(--container-size-lg);overflow:visible" class="m_7485cace mantine-Container-root __m__-_R_1mb_" data-size="lg" data-strategy="block"><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-top:var(--mantine-spacing-xl);margin-bottom:var(--mantine-spacing-xl)" class="m_4081bf90 mantine-Group-root"><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">CSS</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">2D Objects</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">3D objects</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">2D Transformations</span></div><div style="--badge-dot-color:var(--mantine-color-indigo-filled);font-weight:normal" class="m_fbd81e3d m_347db0ec mantine-Badge-root" data-variant="dot"><span class="m_5add502a mantine-Badge-label">3D Transformations</span></div></div><style data-mantine-styles="inline">.__m__-_R_2lmb_{--grid-gutter:var(--mantine-spacing-md);}</style><div style="overflow:visible;height:100%" class="m_410352e9 mantine-Grid-root __m__-_R_2lmb_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_dmlmb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_dmlmb_{--col-flex-grow:auto;--col-flex-basis:58.333333333333336%;--col-max-width:58.333333333333336%;}}</style><div style="flex-direction:column" class="m_96bdd299 mantine-Grid-col __m__-_R_dmlmb_ m_8bffd616 mantine-Flex-root __m__-_R_1ddmlmb_"><style data-mantine-styles="inline">.__m__-_R_6rddmlmb_{width:100%;}@media(min-width: 48em){.__m__-_R_6rddmlmb_{width:80%;}}@media(min-width: 62em){.__m__-_R_6rddmlmb_{width:90%;}}</style><div style="margin-bottom:var(--mantine-spacing-xxl)" class="__m__-_R_6rddmlmb_"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size);font-size:var(--mantine-font-size-display-2);line-height:1" class="m_8a5d1357 mantine-Title-root" data-order="1">CSS Animation</h1><p style="--text-fz:var(--mantine-font-size-lg);--text-lh:var(--mantine-line-height-lg);margin-top:var(--mantine-spacing-md)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="lg">The skill of creating CSS animations to enhance user experience and increase market demand</p></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-top:auto" class="m_4081bf90 mantine-Group-root"><div class=""><a style="--button-height:var(--button-height-xl);--button-padding-x:var(--button-padding-x-xl);--button-fz:var(--mantine-font-size-xl);--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-md);display:block" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-size="xl" href="/programs/css-animation/goto"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Start learning</span></span></a><div style="color:var(--mantine-color-dimmed)" class="m_4451eb3a mantine-Center-root" data-inline="true"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-pyramid-plus "><path d="M18.719 11.985l-5.889 -9.539a.999 .999 0 0 0 -1.664 0l-8.54 13.836a1.005 1.005 0 0 0 .386 1.452l8.092 4.054a1.994 1.994 0 0 0 1.789 0l.149 -.074"></path><path d="M12 2v20"></path><path d="M16 19h6"></path><path d="M19 16v6"></path></svg></div><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Included in subscription (over 50 courses)</p></div></div><div style="margin-top:auto" class=""><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root"></p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root"></p></div></div></div><style data-mantine-styles="inline">.__m__-_R_lmlmb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_lmlmb_{--col-flex-grow:auto;--col-flex-basis:41.66666666666667%;--col-max-width:41.66666666666667%;}}</style><div style="overflow:visible" class="m_96bdd299 mantine-Grid-col __m__-_R_lmlmb_ mantine-visible-from-md"><div style="overflow:visible;height:calc(29.375rem * var(--mantine-scale));position:relative" class=""><style data-mantine-styles="inline">@media(min-width: 62em){.__m__-_R_bdlmlmb_{right:calc(-10rem * var(--mantine-scale));}}@media(min-width: 75em){.__m__-_R_bdlmlmb_{right:calc(-6.875rem * var(--mantine-scale));}}</style><img style="width:calc(43.75rem * var(--mantine-scale));position:absolute" class="m_9e117634 mantine-Image-root __m__-_R_bdlmlmb_" src="/vite/assets/15-DYqgXwlz.png" fetchPriority="high"/></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_6mb_{padding-block:var(--mantine-spacing-md);}@media(min-width: 75em){.__m__-_R_6mb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-lg)" class="m_7485cace mantine-Container-root __m__-_R_6mb_" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_d6mb_{margin-bottom:var(--mantine-spacing-xl);}@media(min-width: 48em){.__m__-_R_d6mb_{margin-bottom:var(--mantine-spacing-xxl);}}</style><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);font-size:var(--mantine-font-size-display-3)" class="m_8a5d1357 mantine-Title-root __m__-_R_d6mb_" data-order="2">Learning syllabus</h2><div style="--accordion-chevron-size:auto" class="m_9bdbb667 mantine-Accordion-root" data-variant="separated" id="mantine-_R_l6mb_" data-accordion="true"><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item" data-active="true"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-active="true" data-chevron-position="right" type="button" aria-expanded="true" aria-controls="mantine-_R_l6mb_-panel-module-200" id="mantine-_R_l6mb_-control-module-200"><span class="m_3f35ae96 mantine-Accordion-chevron" data-rotate="true" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--stack-gap:var(--mantine-spacing-md);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-h3)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1<!-- -->. <!-- -->Object transformation.</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;color:var(--mantine-color-dimmed)" class="m_4081bf90 mantine-Group-root"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">7 exercises</p><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">8 quizzes</p></div></div><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">2D Objects</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">3D Objects</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">2D Transformations</span></div><div style="--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;font-weight:normal" class="m_347db0ec mantine-Badge-root" data-variant="default"><span class="m_5add502a mantine-Badge-label">3D Transformations</span></div></div></div></span></button><div style="box-sizing:border-box;opacity:1;transition:opacity 200ms ease;padding-top:var(--mantine-spacing-xl)" class="m_df78851f mantine-Accordion-panel" aria-hidden="false" role="region" id="mantine-_R_l6mb_-panel-module-200" aria-labelledby="mantine-_R_l6mb_-control-module-200"><div class="m_4ba554d4 mantine-Accordion-content"><style data-mantine-styles="inline">.__m__-_R_5lrl6mb_{--sg-spacing-x:var(--mantine-spacing-md);--sg-spacing-y:var(--mantine-spacing-md);--sg-cols:1;}@media(min-width: 36em){.__m__-_R_5lrl6mb_{--sg-cols:2;}}@media(min-width: 62em){.__m__-_R_5lrl6mb_{--sg-cols:3;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_5lrl6mb_"><style data-mantine-styles="inline">.__m__-_R_rdlrl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_rdlrl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_rdlrl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Two-dimensional objects</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2D transformations, translation, scaling, skewing, rotation</p></div><style data-mantine-styles="inline">.__m__-_R_1bdlrl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_1bdlrl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_1bdlrl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Volumetric objects: basics</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Transformations for three-dimensional objects, perspective, point of view</p></div><style data-mantine-styles="inline">.__m__-_R_1rdlrl6mb_{padding:0rem;}@media(min-width: 36em){.__m__-_R_1rdlrl6mb_{padding:var(--mantine-spacing-md);}}</style><div class="m_1b7284a3 mantine-Paper-root __m__-_R_1rdlrl6mb_"><p style="margin-bottom:var(--mantine-spacing-xs);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Volumetric objects: transformations and functions</p><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">transform-style, translate3d, rotate3d, scale3d</p></div></div></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_emb_{padding-block:var(--mantine-spacing-xl);}@media(min-width: 75em){.__m__-_R_emb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-lg)" class="m_7485cace mantine-Container-root __m__-_R_emb_" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_demb_{margin-bottom:var(--mantine-spacing-xl);}@media(min-width: 75em){.__m__-_R_demb_{margin-bottom:var(--mantine-spacing-xxl);}}</style><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);font-size:var(--mantine-font-size-display-3)" class="m_8a5d1357 mantine-Title-root __m__-_R_demb_" data-order="2">How learning is organised</h2><style data-mantine-styles="inline">.__m__-_R_lemb_{--grid-gutter:var(--mantine-spacing-md);}</style><div class="m_410352e9 mantine-Grid-root __m__-_R_lemb_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_3dlemb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_3dlemb_{--col-flex-grow:auto;--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_3dlemb_"><div style="--accordion-chevron-size:auto" class="m_9bdbb667 mantine-Accordion-root" data-variant="separated" id="mantine-_R_bbdlemb_" data-accordion="true"><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item" data-active="true"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-active="true" data-chevron-position="right" type="button" aria-label="Simple, clear and always at hand" aria-expanded="true" aria-controls="mantine-_R_bbdlemb_-panel-theory" id="mantine-_R_bbdlemb_-control-theory"><span class="m_3f35ae96 mantine-Accordion-chevron" data-rotate="true" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Simple, clear and always at hand</p></div></div></span></button><div style="box-sizing:border-box;opacity:1;transition:opacity 200ms ease" class="m_df78851f mantine-Accordion-panel" aria-hidden="false" role="region" id="mantine-_R_bbdlemb_-panel-theory" aria-labelledby="mantine-_R_bbdlemb_-control-theory"><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">You learn the theory in a convenient text format - easy to read even from your phone. Live examples help you immediately understand how everything works in practice. The material is organised in such a way that you move step by step from simple to complex without missing important details</p></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-label="Check and consolidate knowledge" aria-expanded="false" aria-controls="mantine-_R_bbdlemb_-panel-quizzes" id="mantine-_R_bbdlemb_-control-quizzes"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Check and consolidate knowledge</p></div></div></span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;height:0;overflow:hidden;display:none" class="m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_bbdlemb_-panel-quizzes" aria-labelledby="mantine-_R_bbdlemb_-control-quizzes" inert=""><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">After each topic, you go through quizzes to make sure you understand everything. Questions of varying levels of difficulty will give you the opportunity to both test your knowledge base and practise your application of knowledge</p></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-label="Learn from real-life challenges" aria-expanded="false" aria-controls="mantine-_R_bbdlemb_-panel-exercises" id="mantine-_R_bbdlemb_-control-exercises"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn from real-life challenges</p></div></div></span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;height:0;overflow:hidden;display:none" class="m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_bbdlemb_-panel-exercises" aria-labelledby="mantine-_R_bbdlemb_-control-exercises" inert=""><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">We've created a convenient virtual environment where you solve problems right in your browser. You have a code editor, a console and automatic tests that instantly show results</p></div></div></div><div class="m_9f59b069 m_9bd7b098 mantine-Accordion-item"><button class="mantine-focus-auto m_4ba585b8 mantine-Accordion-control m_87cf2631 mantine-UnstyledButton-root" data-accordion-control="true" data-chevron-position="right" type="button" aria-label="AI mentor in your studies" aria-expanded="false" aria-controls="mantine-_R_bbdlemb_-panel-totaAI" id="mantine-_R_bbdlemb_-control-totaAI"><span class="m_3f35ae96 mantine-Accordion-chevron" data-position="right"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span><span class="m_df3ffa0f mantine-Accordion-label"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><div class=""><p style="font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">AI mentor in your studies</p></div></div></span></button><div style="box-sizing:border-box;opacity:0;transition:opacity 200ms ease;height:0;overflow:hidden;display:none" class="m_df78851f mantine-Accordion-panel" aria-hidden="true" role="region" id="mantine-_R_bbdlemb_-panel-totaAI" aria-labelledby="mantine-_R_bbdlemb_-control-totaAI" inert=""><div class="m_4ba554d4 mantine-Accordion-content"><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm">Our AI-powered Learning Assistant is like a mentor that's always on hand. It understands where you are in the course, what you need to do, and what your code looks like. If something goes wrong, you get clear and helpful hints right away</p></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_5dlemb_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_5dlemb_{--col-flex-grow:auto;--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div style="text-align:center" class="m_96bdd299 mantine-Grid-col __m__-_R_5dlemb_"><div style="--ar-ratio:1.7777777777777777" class="m_71ac47fc mantine-AspectRatio-root"><div style="background:var(--mantine-color-gray-1);width:calc(37.5rem * var(--mantine-scale));height:100%" class=""></div></div></div></div></div></div><div style="background-color:light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><style data-mantine-styles="inline">.__m__-_R_dimb_{padding-block:var(--mantine-spacing-xl);}@media(min-width: 75em){.__m__-_R_dimb_{padding-block:var(--mantine-spacing-xl);}}</style><div style="--container-size:var(--container-size-md)" class="m_7485cace mantine-Container-root __m__-_R_dimb_" data-size="md" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_2timb_{--sg-spacing-x:0rem;--sg-spacing-y:0rem;--sg-cols:1;}@media(min-width: 36em){.__m__-_R_2timb_{--sg-spacing-x:var(--mantine-spacing-xs);--sg-spacing-y:var(--mantine-spacing-xs);--sg-cols:2;}}@media(min-width: 48em){.__m__-_R_2timb_{--sg-spacing-x:var(--mantine-spacing-xxl);--sg-spacing-y:var(--mantine-spacing-xxl);}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_2timb_"><div style="margin-bottom:var(--mantine-spacing-lg)" class=""><p style="font-size:var(--mantine-font-size-h3);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Subscription 3,900 ₽/month</p><p style="margin-bottom:var(--mantine-spacing-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">The subscription gives access to all courses in the "subscription" catalog. Cancel anytime. Company payments are available.</p><a style="--button-height:var(--button-height-lg);--button-padding-x:var(--button-padding-x-lg);--button-fz:var(--mantine-font-size-lg);--button-color:var(--mantine-color-white)" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-size="lg" href="https://hexlet.io/subscription/new?back_to=https%3A%2F%2Fhexlet.io%2Fprograms%2Fcss-animation"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Subscribe →</span></span></a></div><div style="align-items:center;height:100%" class="m_8bffd616 mantine-Flex-root __m__-_R_lmtimb_"><ul style="padding:0rem" class="m_abbac491 mantine-List-root"><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">50+ courses</span></div></li><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">Lifetime access to theory</span></div></li><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">Learn in parallel</span></div></li><li class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-check "><path d="M5 12l5 5l10 -10"></path></svg></div></div></span><span class="mantine-List-itemLabel">Learning with an AI assistant</span></div></li></ul></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">About Hexlet</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">About us</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io/category/4316" data-target="_blank" role="button">Help</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Site Map</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Learn</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend-development">Backend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_frontend-development">Frontend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_python">Python
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Testing
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_beginners">Popular Courses For Beginners</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Frontend Developer</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_advanced">Popular Courses For Advanced</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/web-development-free">Fundamentals of Web Development</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-development">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/css-animation">CSS Animation</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/http-api">HTTP API</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/layout-designer-positioning">Position CSS</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/cli-basics">Command line basics</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/git-basics-free">Git fundamentals</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Facebook" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.facebook.com/hexlethq"><span class="bi bi-facebook"></span>
</a></li>
<li class="me-3">
<a aria-label="Instagram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.instagram.com/hello_hexlet/"><span class="bi bi-instagram"></span>
</a></li>
<li>
<a aria-label="Twitter" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://twitter.com/Hexlet_IO"><span class="bi bi-twitter-x"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:%2B7%20717%20272%2076%2070">+7 717 272 76 70</a>
<span class="d-block opacity-50 small">free call</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Legal</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer"><span class="translation_missing" title="translation missing: en.layouts.footer_content.offer">Offer</span></a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts"><span class="translation_missing" title="translation missing: en.layouts.footer_content.contacts">Contacts</span></a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>TOO "Hexlet"</div>
<div>The Republic of Kazakhstan, Almaty</div>
<div>Auezova St., 14A</div>
<div>BIN 230340043714
</div>
</div>
</div>
</div>
</footer>
<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-CIOaBlj-.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DejNWqwz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-DZwEN4Zo.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-CJocDKTE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-DH3_MBnL.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-Cj65YiRw.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-Csl7vw8x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-DeAQqnBE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-CN66HKVH.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-DQgTDFJJ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-BcxwEZ7X.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/prop-types-DGBR76ns.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>