We got so carried away studying the features of grids that we did not notice that it is now time for another test. I hope that you have not forgotten your cool landscape design skills?
Now you have been assigned the task of laying out a small park of the kind that we have become accustomed to: with a lawn, rocks, lakes, sand, and, of course, lava.
To do this, you need to:
The choice is yours!
Grid cell sizes are multiples of 10px.
Assign values to the grid-column-start/grid-column-end and grid-row-start/grid-row-end properties of 1 to 5 only for the first four elements with the classes element--1, element--2, element--3 and element--4. The remaining elements will automatically occupy the remaining empty cells in the grid.
<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>var b=document.documentElement.classList;b.remove('no-js');if(!window.Promise||!window.sessionStorage||!!sessionStorage.getItem('muller.v2')){b.add('muller')}</script><link rel="dns-prefetch" href="https://assets.htmlacademy.org"><script async src="https://www.googletagmanager.com/gtag/js?id=G-MXPCRXM48C"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MXPCRXM48C');
</script><script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
amplitude.getInstance().init("df11525b6880a3c5e2af14f9b6238408", null,{
includeUtm: true,
includeGclid: true,
includeReferrer: true,
deviceIdFromUrlParam: true
}, function (instance) {
window.amplitudeLoaded = true;
});
</script><link rel="stylesheet" href="https://assets.htmlacademy.org/css/core.v284.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/text.v104.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-paywall.v6.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-light.v20.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-ru.v2.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/cookies.css"><link rel="preload" as="script" href="https://assets.htmlacademy.org/js/general.v274.js"><title>Test: Laying out a park — Introduction to Grid Layout — HTML Academy</title><meta name="csrf-token" content=""><meta property="og:type" content="website"><meta property="og:site_name" content="HTML Academy"><meta name="twitter:url" property="og:url" content="https://htmlacademy.org"><meta name="twitter:title" property="og:title" content="Interactive online courses HTML Academy"><meta name="twitter:description" property="og:description" content="Together we’ll learn how to work with real code, solve true-to-life problems, use cutting edge technologies. Minimum of boring theory and lots of practical tasks."><meta name="twitter:image" property="og:image" content="https://htmlacademy.org/og/htmlacademy.png"><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://htmlacademy.org/courses/layout/grid/park-layout"><meta name="theme-color" content="#2f358f"></head><body class="course-interface course-interface--light" data-base="/assets/courses/28/"><header class="page-header page-header--course"><div class="page-header__inner"><div class="page-header__top"><a class="page-header__logo" href="/" aria-label="HTML Academy Home"><img src="https://assets.htmlacademy.org/img/logo--small.svg?cs=1218aec0be4a5f23db79ad29a14e30f7f9fb9a25" width="24" height="36" alt="HTML Academy"></a><nav class="main-nav main-nav--mini" role="navigation"><div class="main-nav__course-nav"><a class="main-nav__course-item main-nav__course-button main-nav__course-button--prev" href="/courses/layout/grid/summary-2">Summary of “Creating layouts using grids”</a><div class="main-nav__course-item main-nav__course-list main-nav__course-list--collapsed"><b class="main-nav__course-title">Introduction to Grid Layout</b><span class="main-nav__course-stat">21/32</span><div class="main-nav__course-contents"><a class="main-nav__course-contents-link" href="/courses/layout/grid">Back to the list of tasks</a><ul class="main-nav__course-contents-list"><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-row-column-start">1. The grid item’s position: grid-row-start and grid-column-start</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-column-start-end">2. The grid item’s position: grid-column-start and grid-column-end</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-row-start-end">3. The grid item’s position: grid-row-start and grid-row-end</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-column-negative">4. Negative values for grid-column-start and grid-column-end</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-row-negative">5. Negative values for grid-row-start and grid-row-end</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-item-overlay">6. Grid item overlay</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-item-overlay-z-index">7. Overlaying grid items and the z-index property</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/summary-1">8. Summary of “Grids: positioning grid items”</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/building-bridges">9. Test: Building bridges</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-template-areas">10. Named grid areas: the grid-template-areas property</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-template-areas-empty">11. The grid-template-areas property and empty grid areas</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/auto-coordinates-column">12. Automatic coordinates of the grid items: columns</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/auto-coordinates-rows">13. Automatic coordinates of elements in the grid: columns and rows</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/combine-coordinates">14. Combining automatic and explicit coordinates</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/combine-coordinates-2">15. Combining automatic and explicit coordinates, part 2</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/unfixed-column">16. Unfixed column width</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/unfixed-column-row">17. Unfixed column and row widths</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/grid-gap">18. Grid spacing: the gap property</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/row-column-gap">19. Grid spacing: the row-gap and column-gap properties</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/summary-2">20. Summary of “Creating layouts using grids”</a></li><li class="main-nav__course-contents-item main-nav__course-contents-item--current"><a href="/courses/layout/grid/park-layout">21. Test: Laying out a park</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/page-layout">22. Laying out a simple page: creating a grid</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/page-header-layout">23. Laying out a simple page: the header</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/promo-layout">24. Laying out a simple blog page: the promo block</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/sidebar-layout">25. Laying out a simple page: the sidebar</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/blog-layout">26. Laying out a simple blog page</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/page-final">27. Laying out a simple page: the final step</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/online-store-layout">28. Laying out the online store catalog: creating an internal grid</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/sorting-layout">29. Laying out an online store catalog: the “Sort by” block</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/filter-layout">30. Laying out an online store catalog: the filter block</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/online-store-final">31. Laying out an online store catalog: the final step</a></li><li class="main-nav__course-contents-item"><a href="/courses/layout/grid/page-grid-layout">32. Test: The grid layout of a page</a></li></ul></div></div><a class="main-nav__course-item main-nav__course-button main-nav__course-button--next" href="/courses/layout/grid/page-layout">Laying out a simple page: creating a grid</a></div><ul class="main-nav__list main-nav__list--user main-nav__list--user-guest"><li class="main-nav__item" itemprop="name"><a class="main-nav__link" href="/signup?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" title="Sign up" data-modal="open" data-value="register" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#user"></use></svg></span>Sign up</a></li><li class="main-nav__item main-nav__item--login" itemprop="name"><a class="main-nav__link" href="/login?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" title="Log in" data-modal="open" data-value="login" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#login"></use></svg></span>Log in</a></li></ul></nav></div></div></header><main class="course-container course-interface__content js-course"><div class="course-container__inner"><article class="course-layout"><div class="course-layout__sidebar course-theory"><div class="course-theory__inner course-theory__inner--left-stub"><button class="course-theory__close icon-close icon-close--light" type="button" title="Close">Close</button><ul class="course-tabs course-tabs--non-interactive course-layout__theory-heading"><li class="course-tabs__item course-tabs__item--external course-tab course-tab--centered"><span class="course-tab__icon"><svg aria-hidden="true"><use xlink:href="courses#icon-theory"></use></svg></span><span class="course-tab__title">Theory</span></li><li class="course-tabs__item course-tabs__item--internal course-tab course-tab--centered course-tab--active"><span class="course-tab__icon"><svg aria-hidden="true"><use xlink:href="courses#icon-theory"></use></svg></span><span class="course-tab__title">Theory</span></li></ul><section class="course-theory__content"><div class="course-theory__content-inner"><h1 class="course-theory__content-heading">Test: Laying out a park</h1><div class="course-theory__content-text"><p>We got so carried away studying the features of grids that we did not notice that it is now time for another test. I hope that you have not forgotten your cool landscape design skills?</p><p>Now you have been assigned the task of laying out a small park of the kind that we have become accustomed to: with a lawn, rocks, lakes, sand, <em>and, of course, lava</em>.</p><p>To do this, you need to:</p><ul><li><a href="auto-coordinates-rows">Create a grid</a> using <code>grid-template-columns</code> and <code>grid-template-rows</code>;</li><li><a href="building-bridges">Assign the grid items coordinates</a> using <code>grid-column</code> and <code>grid-row</code>;</li><li>or you can approach it another way and use <a href="grid-template-areas">the named areas</a> and the <code>grid-template-areas</code> property to declare a grid structure.</li></ul><p>The choice is yours!</p><p>Grid cell sizes are multiples of <code>10px</code>.</p><div class="course-theory__spoiler course-theory__spoiler--collapsed"><button class="course-theory__spoiler-switch" type="button">Show a tooltip</button><div class="course-theory__spoiler-content"><p>Assign values to the <code>grid-column-start/grid-column-end</code> and <code>grid-row-start/grid-row-end</code> properties of 1 to 5 only for the first four elements with the classes <code>element--1</code>, <code>element--2</code>, <code>element--3</code> and <code>element--4</code>. The remaining elements will automatically occupy the remaining empty cells in the grid.</p></div></div></div></div></section><div class="course-theory__controls"><button class="button button--close" type="button">To the task</button></div></div></div><div class="course-layout__column"><ul class="course-tabs course-layout__course-tabs"><li class="course-tabs__item course-tabs__item--limited course-tabs__item--limited-large course-tab"><span class="course-tab__title">index.html</span></li></ul><div class="course-layout__editors"><div class="course-editor course-layout__editor"><span class="course-editor__label"><span class="course-editor__label-item">HTML</span></span><div class="course-editor__item" id="html"></div></div></div></div><div class="course-layout__column"><span class="course-separator-control"><svg aria-hidden="true"><use xlink:href="courses#icon-arrows-separator"></use></svg></span><div class="course-browser"><div class="course-browser__menu"><span class="course-browser__menu-item course-browser__address"><span class="course-browser__menu-item-inner">HTML</span></span><button class="js--autorun course-browser__menu-item course-browser__menu-button course-browser__menu-button--text-with-icon course-browser__menu-button--autorun course-browser__menu-button--autorun-on" title="Autorun" type="button"><span class="course-browser__menu-item-inner"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-autorun"></use></svg>
Autorun
</span></button><button class="course-browser__menu-item course-browser__menu-button course-browser__menu-button--expand" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11"><path d="M1.375 5.125v4.5h4.5m3.75-3.75v-4.5h-4.5" fill="none" fill-rule="evenodd" stroke="currentColor"></path></svg></button></div><div class="course-browser__content"><div class="course-browser__modal js--browser-modal"><div class="course-browser__notification course-browser__modal-heading js--browser-modal-heading"><p class="course-browser__notification-text">You’ve gone to a different page</p><button class="course-browser__notification-button js--close" type="button">← Go back</button></div><div class="course-browser__zoomer"><iframe class="js--preview-document course-browser__content course-browser__zoomer-element"></iframe><p class="course-browser__focus-message">
Click inside the mini-browser to shift the focus onto this window.
</p></div></div><div class="course-browser__menu course-browser__menu--vertical"><button class="course-browser__menu-item course-browser__menu-button course-browser__menu-button--increase" type="button" disabled title="Larger"><span class="course-browser__menu-item-inner">Larger</span></button><span class="course-browser__menu-item course-browser__zoom"><span class="course-browser__menu-item-inner">100%</span></span><button class="course-browser__menu-item course-browser__menu-button course-browser__menu-button--decrease" type="button" title="Smaller"><span class="course-browser__menu-item-inner">Smaller</span></button></div><div class="js--validation-view course-browser__results-restriction course-browser__results-restriction--mini"><span class="tooltip tooltip--light tooltip--short course-browser__results-restriction-tooltip"><span class="js--tooltip-text"></span><button class="js--validation-view-close course-browser__results-restriction-tooltip-close icon-close" type="button">Закрыть</button></span></div></div></div></div></article></div><div class="course-interface__overlay course-interface__overlay--active"></div></main><main class="js-subscription hidden"><div class="page-content"><div class="page-content__inner"><div class="service-layout-wrapper"><section class="service"><nav class="breadcrumbs" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul class="breadcrumbs__list"><li class="breadcrumbs__item" itemprop="name"><a href="/" itemprop="url">Home</a></li><li class="breadcrumbs__item" itemprop="name"><a href="/courses" itemprop="url">Interactive courses</a></li><li class="breadcrumbs__item" itemprop="name"><a href="/courses/layout" itemprop="url">Creating a layout</a></li><li class="breadcrumbs__item" itemprop="name"><a href="/courses/layout/grid" itemprop="url">Introduction to Grid Layout</a></li></ul></nav><div class="service__inner"><div class="service__image"><img src="/static/img/cashier.svg" width="227" height="250" alt="Granny Muffin"></div><div class="service__content"><h1 class="service__title">Easy there, pal!</h1><p class="service__info">To access the <a href="/courses/layout/grid">Introduction to Grid Layout</a> challenges in the <a href="/courses/layout">Creating a layout</a>, you need to sign up and subscribe first.</p><div class="service__buttons"><a class="button button--wide" href="/signup?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" title="Sign up" data-modal="open" data-value="register" itemprop="url">Sign up</a></div></div></div></section></div></div></div></main><footer class="page-footer page-footer--tiny"><div class="page-footer__inner"><p><a href="/docs/cookies">Cookies</a> ∙
<a href="/docs/privacy">Privacy</a> ∙
<a href="/docs/agreement">License Agreement</a> ∙
<a href="/docs/about">About</a> ∙
<a href="/contacts">Contacts</a> ∙
© HTML Academy OÜ, 2019−2026
</p><div class="page-footer__financial"><img src="https://assets.htmlacademy.org/img/visa-white.svg?cs=96e54ec8c587db9d4b1d8d328ffd87c2ebfd9555" alt="VISA" title="VISA" width="35" height="35"><img src="https://assets.htmlacademy.org/img/mastercard-horizontal.v2.svg" alt="Mastercard" title="Mastercard" width="35" height="35"></div></div></footer><div class="modal"><div class="modal__inner"><div class="modal__wrapper js-login hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Log in</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/login?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aebbc4688f6"><input type="hidden" name="csrf_value" value="caa512fbeb43423f2fcb0a62ec35da58"><div class="form__group"><label class="sr-only" for="login-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="login-email"></div><div class="form__group"><label class="sr-only" for="login-password">Password</label><input class="field field--text field--full-width ym-disable-keys" type="password" name="password" placeholder="Password" id="login-password"></div><input class="button button--full-width" type="submit" data-submit-text="Logging in…" value="Log in"></form><p class="modal__forgot-password"><a href="/recover" data-modal="open" data-value="recover">Forgot your password?</a></p><a class="modal__bottom-link" href="/signup" data-modal="open" data-value="register">Sign up</a></div><div class="modal__wrapper js-register hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Sign up</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/signup?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" autocomplete="off" method="post"><input type="hidden" name="csrf_name" value="csrf69aebbc4688f6"><input type="hidden" name="csrf_value" value="caa512fbeb43423f2fcb0a62ec35da58"><div class="form__group"><label class="sr-only" for="email">
Email
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="email" name="email" value="" id="email" required placeholder="Email"></div></div><div class="form__group"><label class="sr-only" for="password">
Password
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="password" name="password" value="" id="password" required placeholder="Password"></div></div><div class="form__group"><label class="checkbox"><input class="checkbox__input" type="checkbox" name="agreement" value="1" required><span class="checkbox__text"><span>By signing up, you agree to our <a href="/docs/agreement" target="_blank">License Agreement</a> and <a href="/docs/privacy" target="_blank">Privacy Policy</a>.</span></span></label></div><input class="button button--full-width" type="submit" data-submit-text="Signing up…" value="Sign up"></form><a class="modal__bottom-link" href="/login?redirect_url=%2Fcourses%2Flayout%2Fgrid%2Fpark-layout" data-modal="open" data-value="login">Log in</a></div><div class="modal__wrapper modal__wrapper--no-btn-bottom js-recover hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Restore access</h4><p class="modal__text-accent">Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.</p><form class="modal__form form" action="/recover" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aebbc4688f6"><input type="hidden" name="csrf_value" value="caa512fbeb43423f2fcb0a62ec35da58"><div class="form__group"><label class="sr-only" for="recovery-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="recovery-email"></div><script src='https://www.google.com/recaptcha/api.js'></script><div class="form__group"><div class="g-recaptcha" data-sitekey="6LetCTEqAAAAANROWtPzfC7Rfg9iIRiRt2k2FPn7"></div></div><input class="button button--full-width" type="submit" data-submit-text="Sending…" value="Send"></form><p class="modal__text">Forgot to connect your email to the profile? Email us and we’ll help.</p></div></div></div><script async src="https://assets.htmlacademy.org/js/general.v274.js" data-assets="https://assets.htmlacademy.org" data-require="toggle,navigation-courses,modal,form,nav"></script><script src="https://assets.htmlacademy.org/js/courses-paywall.v11.js"></script></body></html>