src\assets. Создай там папку ( если там много json будет) и положи туда json файлы. return this.http.get('/assets/file.json');. Так же, чтоб получить данные, нужно сделать подписку вида: getJson().subscribe( ( data ) => {});.
<img src="https://i.imgur.com/4LF4d3J.jpg" ondragstart="return false;">@-webkit-keyframes autofill {
to {
color: #000;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}<div class="header"> <!-- Блок шапка -->
<div class="header-logo"></div>
<div class="header-information">
<div class="social"> <!-- Блок соц сетей. Его можно переместить в другое место шаблона -->
<div class="social-vk"></div>
<div class="social-f"></div>
<div class="social-r"></div>
</div>
<div class="header-btn"></div>
<div class="header-btn header-btn--orange"></div> <!-- Изменили цвет кнопки -->
</div>
</div>
<div class="content">
<div class="profile"> <!-- блок profile может быть и не в блоке content, но если считаешь, что только в нем, то изменить на content-profile content-avatar и т.д-->
<div class="profile-avatar"></div>
<div class="profile-fio"></div>
</div>
....
</div>
<div class="footer">
... какая-нибудь разметка
<div class="social"> <!-- Блок соц сетей. Его можно переместить в другое место шаблона -->
<div class="social-vk"></div>
<div class="social-f"></div>
<div class="social-r"></div>
</div>
</div>.sprite{ /* Картинки должны быть одинаковой размерности */
background: url(/img/spritesheet.png) no-repeat; /* ваш спрайт */
width: 278px; /* ширина одной картинка */
height: 189px; /* высота одной картинки */
}
.sprite.pig{
background-position: 0px 0px; /* допустим это первая картинка и у вас нет отступов слева ( т.е картинка начинается сразу) */
}
.sprite.fish{
background-position: -278px 0px; /* Следующая картинка справа на той же полосе (если я не ошибаюсь, но принцип такой) */
}<div class="sprite pig"><div>
<div class="sprite fish"><div>