const list = [{
name: ‘1 курс’,
item: [
{
name: ‘Остапчук Петро’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Остапчук-Петро.jpg’
},
{
name: ‘Болвiнов Данило’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Болвiнов-Данило.jpg’
}
]
},
{
name: ‘2 курс’,
item: [
{
name: ‘Продан Петро’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Петро-Продан.jpg’
},
{
name: ‘Берецькiй Владислав’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Влад-Берецький.jpg’
},
{
name: ‘Смерека Андрiй’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Андрій-Смерека.jpg’
},
{
name: ‘Шумчук Богдан’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Богдан-Шумчук.jpg’
}
]
},
{
name: ‘3 курс’,
item: [
{
name: ‘Матвiйчук Владислав’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Матвійчук-Владислав.jpg’
},
{
name: ‘Яровий Назар’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Назар-Яровий.jpg’
}
]
},
{
name: ‘4 курс’,
item: [
{
name: ‘Баранник Антон’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Антон-Бараннік.jpg’
},
{
name: ‘Мурга Олексiй’,
img: ‘http://uati.adventist.ua/wp-content/uploads/2020/04/Олексій-Мурга.jpg’
}
]
}];
for (let n = 0; n < list.length; n++) {
let contant1 = document.getElementById("contant1");
let wrapper = document.createElement('div');
let cell = document.createElement('div');
let title = document.createElement('h3');
wrapper.className = 'wrapper111';
cell.className = 'cell111';
title.className = 'title111'
title.innerHTML = list[n].name;
contant1.appendChild(wrapper);
wrapper.appendChild(title);
wrapper.appendChild(cell);
list[n].item.forEach(function (e) {
let container = document.createElement('div');
let imgWr = document.createElement('div');
let img = document.createElement('img');
let textWr = document.createElement('div');
let firstName = document.createElement('h2');
let lastName = document.createElement('p');
container.className = 'contant1111';
imgWr.className = 'img111';
textWr.className = 'text111';
cell.appendChild(container);
container.appendChild(imgWr);
container.appendChild(textWr);
imgWr.appendChild(img);
textWr.appendChild(firstName);
textWr.appendChild(lastName);
img.src = e.img;
let f = '';
let s = '';
let space = 0;
for (let i = 0; i < e.name.length; i++) {
if (e.name[i] === ' ' && space === 0) {
firstName.innerHTML = f;
f = ''
space = 1;
}
f += e.name[i];
if (space === 1) {
lastName.innerHTML = f;
}
}
})
}
#contant1 {
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
}
.wrapper111 {
max-width: 1000px;
width: 100%;
margin-bottom: 100px;
}
.wrapper111 .title111 {
font-size: 30px;
text-align: center;
}
.cell111 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-content: center;
}
.contant1111 {
width: 25%;
height: 280px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*margin-bottom: 40px;*/
position: relative;
}
.contant1111:before {
content : “”;
position: absolute;
left : 25%;
bottom : 0;
height : 0;
width : 50%;
border-bottom: 2px solid #337ab7;
}
.img111 {
height: 60%;
width: 60%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 10%;
}
.img111 img {
width: 100%;
height: auto;
}
.text111 {
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text111 h2 {
font-size: 22px;
margin-top: 0;
/* margin-bottom: 10px; */
}
.text111 p {
font-size: 18px;
margin-top: 0;
margin-bottom: 0;
}
/*
@media screen and (max-width: 1024px)
{
.text111 h2 {
margin-top: 0;
font-size: 18px;
margin-bottom: 25px;
}
.text111 p {
font-size: 14px;
margin-bottom: 20px;
}
.contant1111 {
height: 180px;
}
}
*/
@media screen and (max-width: 768px)
{
.contant1111 {
padding-bottom: 20px;
}
.img111 {
width: 80%;
height: 80%;
}
}
@media screen and (max-width: 480px)
{
.title111 {
padding-bottom: 20px;
}
.text111 {
padding-bottom: 5px;
}
.img111 {
width: 70%;
height: 70%;
}
.cell111 {
flex-direction: column;
justify-content: center;
align-items: center;
}
.contant1111 {
width: 70%;
height: auto;
margin-bottom: 20px;
}
}
const list = [{
name: '1 курс',
item: [
{
name: 'Остапчук Петро',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Остапчук-Петро.jpg'
},
{
name: 'Болвiнов Данило',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Болвiнов-Данило.jpg'
}
]
},
{
name: '2 курс',
item: [
{
name: 'Продан Петро',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Петро-Продан.jpg'
},
{
name: 'Берецькiй Владислав',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Влад-Берецький.jpg'
},
{
name: 'Смерека Андрiй',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Андрій-Смерека.jpg'
},
{
name: 'Шумчук Богдан',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Богдан-Шумчук.jpg'
}
]
},
{
name: '3 курс',
item: [
{
name: 'Матвiйчук Владислав',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Матвійчук-Владислав.jpg'
},
{
name: 'Яровий Назар',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Назар-Яровий.jpg'
}
]
},
{
name: '4 курс',
item: [
{
name: 'Баранник Антон',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Антон-Бараннік.jpg'
},
{
name: 'Мурга Олексiй',
img: 'http://uati.adventist.ua/wp-content/uploads/2020/04/Олексій-Мурга.jpg'
}
]
}];
for (let n = 0; n < list.length; n++) {
let contant1 = document.getElementById("contant1");
let wrapper = document.createElement('div');
let cell = document.createElement('div');
let title = document.createElement('h3');
wrapper.className = 'wrapper111';
cell.className = 'cell111';
title.className = 'title111'
title.innerHTML = list[n].name;
contant1.appendChild(wrapper);
wrapper.appendChild(title);
wrapper.appendChild(cell);
list[n].item.forEach(function (e) {
let container = document.createElement('div');
let imgWr = document.createElement('div');
let img = document.createElement('img');
let textWr = document.createElement('div');
let firstName = document.createElement('h2');
let lastName = document.createElement('p');
container.className = 'contant1111';
imgWr.className = 'img111';
textWr.className = 'text111';
cell.appendChild(container);
container.appendChild(imgWr);
container.appendChild(textWr);
imgWr.appendChild(img);
textWr.appendChild(firstName);
textWr.appendChild(lastName);
img.src = e.img;
let f = '';
let s = '';
let space = 0;
for (let i = 0; i < e.name.length; i++) {
if (e.name[i] === ' ' && space === 0) {
firstName.innerHTML = f;
f = ''
space = 1;
}
f += e.name[i];
if (space === 1) {
lastName.innerHTML = f;
}
}
})
}
#contant1 {
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
}
.wrapper111 {
max-width: 1000px;
width: 100%;
margin-bottom: 100px;
}
.wrapper111 .title111 {
font-size: 30px;
text-align: center;
}
.cell111 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-content: center;
}
.contant1111 {
width: 25%;
height: 280px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*margin-bottom: 40px;*/
position: relative;
}
.contant1111:before {
content : "";
position: absolute;
left : 25%;
bottom : 0;
height : 0;
width : 50%;
border-bottom: 2px solid #337ab7;
}
.img111 {
height: 60%;
width: 60%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 10%;
}
.img111 img {
width: 100%;
height: auto;
}
.text111 {
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text111 h2 {
font-size: 22px;
margin-top: 0;
/* margin-bottom: 10px; */
}
.text111 p {
font-size: 18px;
margin-top: 0;
margin-bottom: 0;
}
/*
@media screen and (max-width: 1024px)
{
.text111 h2 {
margin-top: 0;
font-size: 18px;
margin-bottom: 25px;
}
.text111 p {
font-size: 14px;
margin-bottom: 20px;
}
.contant1111 {
height: 180px;
}
}
*/
@media screen and (max-width: 768px)
{
.contant1111 {
padding-bottom: 20px;
}
.img111 {
width: 80%;
height: 80%;
}
}
@media screen and (max-width: 480px)
{
.title111 {
padding-bottom: 20px;
}
.text111 {
padding-bottom: 5px;
}
.img111 {
width: 70%;
height: 70%;
}
.cell111 {
flex-direction: column;
justify-content: center;
align-items: center;
}
.contant1111 {
width: 70%;
height: auto;
margin-bottom: 20px;
}
}