<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Forza Horizon 5 — установка</title>
<style>
html,body{margin:0;padding:0;background:#1A1B1F;
width:100%;height:100%;overflow:hidden;}
body{width:100%;height:100%;font-family:"Segoe UI",Tahoma,Arial,sans-serif;
user-select:none;-webkit-user-select:none;-moz-user-select:none;}
a{text-decoration:none;color:inherit;display:block;cursor:pointer;
transition:background-color .12s linear,color .12s linear;}
.win{position:relative;width:100%;height:100%;overflow:hidden;color:#fff;}
/* =============== ФОН — ЗАГЛУШКА ===============
Свою картинку сюда: раскомментировать background-image.
Годится file / data: / @RESNAME.
=============================================== */
.bg{position:absolute;left:0;top:0;width:100%;height:100%;
background-color:#070708;
/* background-image:url(bg.jpg); */
background-repeat:no-repeat;background-position:center top;}
/* затемнение фото к низу — нужно в любом случае */
.bg-fade{position:absolute;left:0;top:0;width:100%;height:100%;
background:linear-gradient(180deg,
rgba(26,27,31,0.00) 0%,
rgba(26,27,31,0.22) 20%,
rgba(26,27,31,0.60) 34%,
rgba(26,27,31,0.90) 44%,
rgba(26,27,31,1.00) 54%,
rgba(26,27,31,1.00) 100%);}
.close{position:absolute;left:445px;top:6px;width:57px;height:33px;
background:rgba(0,0,0,0.45);border-radius:3px;
text-align:center;line-height:33px;font-size:17px;color:#fff;}
/* ========== ЛОГО ИГРЫ — ЗАГЛУШКА (скруглённый квадрат) ==========
Свою картинку: раскомментировать img в разметке ниже.
================================================================ */
.logo{position:absolute;left:198px;top:56px;width:110px;height:110px;
border-radius:5px;overflow:hidden;}
.logo img{width:110px;height:110px;border-radius:5px;}
.h1{position:absolute;left:0;top:180px;width:507px;text-align:center;
font-size:30px;line-height:36px;color:#fff;}
.sub{position:absolute;left:0;top:230px;width:507px;text-align:center;
font-size:13px;line-height:18px;font-weight:600;color:#8B8C8E;}
.lead{position:absolute;left:23px;top:318px;width:462px;
font-size:13.5px;line-height:18px;color:#BABABB;}
.path{position:absolute;left:23px;top:346px;width:462px;height:68px;
background:#2B2B2B;border-radius:4px;}
.path-dir{position:absolute;left:14px;top:14px;font-size:13.5px;line-height:20px;color:#fff;}
.path-free{position:absolute;left:14px;top:36px;font-size:13px;line-height:18px;color:#BFBFBF;}
.path-change{position:absolute;right:14px;top:14px;font-size:12px;line-height:20px;
font-weight:700;letter-spacing:0.4px;color:#959595;}
/* строка 36px ради нормальной зоны наведения; текст стоит там же, где на макете */
.row{position:absolute;left:23px;width:462px;height:36px;border-radius:4px;
font-size:13.5px;line-height:36px;color:#fff;}
.row1{top:441px;}
.row2{top:481px;}
.cb{position:absolute;right:0;top:9px;width:16px;height:16px;
border:1px solid #FFFFFF;border-radius:3px;background:#303030;
text-align:center;line-height:16px;font-size:12px;color:#fff;}
.btns{position:absolute;left:23px;top:552px;width:462px;height:42px;display:flex;}
.btn{flex:1;height:42px;border-radius:4px;text-align:center;line-height:42px;
font-size:13px;font-weight:700;letter-spacing:0.4px;color:#fff;}
.btn-primary{background:#55A81C;}
.btn-secondary{background:#303030;margin-left:16px;}
.cb .mk{display:none;}
.cb.on .mk{display:inline;}
/* ================= НАВЕДЕНИЕ / НАЖАТИЕ ================= */
.close:hover{background:rgba(255,255,255,0.14);}
.close:active{background:rgba(255,255,255,0.07);}
.path-change:hover{color:#FFFFFF;}
.path-change:active{color:#CFCFCF;}
.row:hover{background:rgba(255,255,255,0.05);}
.row:hover .cb{background:#3D3D3D;}
.row:active{background:rgba(255,255,255,0.02);}
.btn-primary:hover{background:#62BD21;}
.btn-primary:active{background:#499217;}
.btn-secondary:hover{background:#3D3D3D;}
.btn-secondary:active{background:#292929;}
/* Картинка — последним правилом: токенизатор Pixie после url() съедает
следующие правила, поэтому терять после него нечего. */
.logo{background-image:url("gameHero.png");background-repeat:no-repeat;}
/* Фон: ПОСЛЕДНИМ элементом в документе (после него обрывать нечего)
и утоплен под интерфейс через z-index. Картинка 507x281 ложится
сверху, ниже её продолжает .bg-fade. */
.bgimg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;
background-image:url("gameArt.jpg");background-repeat:no-repeat;
background-position:left top;background-size:100%;}
</style>
</head>
<body>
<div class="win">
<div class="bg-fade"></div>
<a class="close" id="btn-close">✕</a>
<div class="h1" id="app-name">Forza Horizon 5</div>
<div class="sub">Требуется ГБ: <span id="req-gb">158</span> места на диске</div>
<div class="lead">Мы установим игру на выбранном диске.</div>
<div class="path">
<div class="path-dir" id="pathdir">C:\Program Files (x86)</div>
<div class="path-free">Доступно: ГБ: <span id="free-gb">211</span></div>
<a class="path-change" id="btn-browse">ИЗМЕНИТЬ</a>
</div>
<a class="row row1" id="row-desktopicon">Создать ярлык на рабочем столе<span class="cb on" id="cb-desktopicon"><span class="mk">✓</span></span></a>
<a class="row row2" id="row-nostartmenu">Не создавать папку в меню “Пуск”<span class="cb" id="cb-nostartmenu"><span class="mk">✓</span></span></a>
<div class="btns">
<a class="btn btn-primary" id="btn-install">УСТАНОВИТЬ</a>
<a class="btn btn-secondary" id="btn-custom">ВЫБОРОЧНАЯ УСТАНОВ...</a>
</div>
<div class="logo"></div>
<div class="bgimg"></div>
</div>
</body>
</html>