J
I'm guessing json should be thinking:{
"services" : [
"Манікюр",
"Перукарські послуги",
"СПА",
"Косметологія",
"Візаж"
],
"about_us" : [
"Новини",
"Про салон",
"Дипломи",
"Віртуальний тур"
]
}
In your html, I inserted a script tag with this code:window.onload = () => {
// c помощью JSON.parse парсим json строку в объект
const dataFromJson = JSON.parse(`
{"services" : [
"Манікюр",
"Перукарські послуги",
"СПА",
"Косметологія",
"Візаж"
],
"about_us" : [
"Новини",
"Про салон",
"Дипломи",
"Віртуальний тур"
]}`)
//#forJson это селектор элемента в который вы хотите вставить данные из json
const elem = document.querySelector('#forJson')
//здесь название каждого сервиса оборачивается в элемент <p> и вставляется в раннее выбраный elem
elem.innerHTML = dataFromJson.services.map(service => <p>${service}</p>).join('')
}
@import url('https://fonts.googleapis.com/css?family=Taviraj:400,500,700&display=swap');
body,
html {
width: 100%;
height: 100%;
font-family: 'Taviraj', serif;
color: #222;
}
.navbar-brad img {
width: 150px
}
.navbar-nav li {
padding-right: 90px;
}
.nav-link {
font-size: 1.4em !important
}
.carousel-inner img {
height: 100%;
}
@media (min-width: 1100px) {
.carousel-inner img {
width: 100%;
}
}
.carousel-caption {
position: absolute;
top: 60%;
transform: translateY(-80%);
text-shadow: 1px 1px 10px #000;
}
@media (max-width: 450px) {
.carousel-caption .display-2 {
font-size: 3em;
}
}
.jumbotron {
padding: 1em;
border-radius: 0;
width: 70%;
margin: 0 auto;
margin-top: 20px;
}
.padding {
padding-bottom: 2em;
}
.alert {
width: 75%;
margin: 0 auto;
padding-top: 2em;
}
.alert hr {
border-top: 2px solid silver;
width: 95%;
margin-top: 0.3em;
margin-bottom: 1em;
}
#fixed {
height: 400px;
border-top: 4px solid #f0f0f0;
border-bottom: 4px solid #f0f0f0;
background: url("../img/1.jpg") no-repeat center center fixed;
background-blend-mode: multiply;
background-color: lightblue;
background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
Дальше я в ваш код добавил так script:<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Beauty salon</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script>
window.onload = () => {
// c помощью JSON.parse парсим json строку в объект
const dataFromJson = JSON.parse( {"services" : [ "Манікюр", "Перукарські послуги", "СПА", "Косметологія", "Візаж" ], "about_us" : [ "Новини", "Про салон", "Дипломи", "Віртуальний тур" ]})
//#forJson это селектор элемента в который вы хотите вставить данные из json
const elem = document.querySelector('#forJson')
//здесь название каждого сервиса оборачивается в элемент <p> и вставляется в раннее выбраный elem
elem.innerHTML = dataFromJson.services.map(service => <p>${service}</p>).join('')
}
</script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Шапка сайту -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a href="#" class="navbar-brad"><img src="img/01.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="#navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a href="#" class="nav-link">Про нас</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Послуги</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Фотогалерея</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Відгуки</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Контакти</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Слайдер зображень -->
<div class="carousel slide" data-ride="carousel" id="slides">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/02.jpg">
</div>
<div class="carousel-caption">
<h1 class="display-2">Beauty salon</h1>
<h3>Запишіться на послугу прямо зараз</h3>
<button type="button" class="btn btn-outline btn-lg">Записатись</button>
<button type="button" class="btn btn-warning btn-lg">Партнери</button>
</div>
<div class="carousel-item">
<img src="img/new.jpg">
</div>
<div class="carousel-item">
<img src="img/04.jpg">
</div>
</div>
</div>
<!-- Головний блок -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">Ми пропонуємо всі види перукарських послуг: стрижки, вечірні, весільні зачіски, фарбування, мілірування, колорування, тонування, догляд за волоссям, корекцію (камуфлювання) сивини у мужчин, "стійке вкладання" волосся, манікюр, покриття нігтів
гель-лаком, парафінотерапія рук, педикюр, воскову та цукрову депіляцію, косметоглогічні послуги, візаж, безболісне проколювання вух. Ми використовуємо виключно високоякісні матеріали з ретельним дотриманням технології. Наші послуги доступні
для широкого кола відвідувачів. Ми знаємо: якість обслуговування – це наша найкраща реклама.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
<a href="#"><button class="btn btn-succes btn-lg">Дізнатись більше</button></a>
</div>
</div>
</div>
<!-- Блок з характеристиками -->
<div class="container-fluid">
<div class="row text-center alert">
<div class="col-12">
<h4 class="display-4">Косметика</h4>
</div>
<hr>
<div class="col-12">
<p class="lead">Наш салон працює на професійній косметиці Wella Professionals, Goldwell, Peggy Sage - Paris, OPI, Cucco, Baehr, dr. Kraut, BeautyHall, Demax.</p>
</div>
</div>
</div>
<!-- Проста секція з зображенням -->
<div class="container-fluid padding">
<div class="row padding">
<div class="offset-lg-2 col-lg-4">
<h2>Акції та знижки</h2>
<p>Наш салон вітає Вас, і дарує -10% на будь-які послуги салону!Знижка не розповсюджується на придбання косметики.Увага! Акція діє за день, та в день Вашого народження. Знижка надається за умови, що послуга надається в робочий час салону.Обов’язково
мати документ для підтвердження дати!<br>- чудову можливість привітати своїх близьких та знайомих. Подарунковий сертифікат дає право пред'явнику розрахуватись за послуги чи придбаний товар.Термін дії сертифікату - 6 місяців з моменту придбання.
Номінал - від 150,00 грн.</p>
<br>
<a href="#" class="btn btn-danger">Читати більше</a>
<br>
</div>
<div class="col-lg-6">
<img src="img/6.jpg" class="img-fluid">
</div>
</div>
</div>
<div id="forJson"></div>
<!-- Блок з фіксацією зображення -->
<figure>
<div class="fixed-wrap">
<div id="fixed">
</div>
</div>
</figure>
<div class="text-center">
<button type="button" class=""="btn btn-success" data-toggle="collapse" data-target="#gifs">Відкрити блок</button>
</div>
</body>
</html>