First-Capstone-Project/services.js at master · ashmalzahra/First-Capstone-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
const experts = [
  {
    title: 'QUALITY APPROACH',
    email: 'info@techin.com',
    paragraph: 'Our Social Media Agency has a professional team with skills inherent to each member.',
    img1: './images/quality.jpeg',
    class: 'item',
  },

  {
    title: 'DESIGN OF YOUR PRODUCT',
    email: 'info@techin.com',
    paragraph: 'An upstream research is set up to study your industry web and marketing environment.',
    img1: './images/The-Product-Design-Process.webp',
    class: 'item',
  },
];

const addExperts = [

  {
    title: 'KEEPING TRACK',
    email: 'info@techin.com',
    paragraph: 'We keep you updated on the creation progress during development phase.',
    img1: './images/IC-OG-ProjectStatusReport.jpg',
    class: 'item',
    btnClass: 'add-speaker-sec',
  },

  {
    title: 'PROJECT MONITORING',
    email: 'info@techin.com',
    paragraph: 'For smooth development, we offer personal follow-up with a privileged interlocutor.',
    img1: './images/pm.png',
    class: 'item',
    btnClass: 'add-speaker-sec',
  },

];

const addExperts2 = [

  {
    title: 'EASY CONNECTION',
    email: 'info@techin.com',
    paragraph: 'We offer you the Digital Marketing service based on your specific and real needs.',
    img1: './images/creating-a-store-discount.jpg',
    class: 'item',
    btnClass: 'add-speaker-sec',
  },

  {
    title: 'YOU DESIGN IT',
    email: 'info@techin.com',
    paragraph: 'Whatever your demand, we create, develop and execute customized strategies.',
    img1: './images/cellphone-floats-above-light-blue-background.jpg',
    class: 'item',
    btnClass: 'add-speaker-sec',
  },

];

const speakerSection = document.querySelector('.speaker-sec');

let text1 = '';

experts.forEach((element) => {
  text1 += `

<div class="item">
    <div class="chess">
    <img class="img-item" src="${element.img1}" alt="">
    </div>
    <div class="description">
    <h5 class="description-heading">${element.title}</h5>
    <a class="email" href="">${element.email}</a>
    <hr class="chess-line">
    <p class="description-paragraph">${element.paragraph}</p>
    </div>
</div>

`;
});

speakerSection.innerHTML = text1;

const addSpeakerSection = document.querySelector('.add-speaker-sec');

let text2 = '';

addExperts.forEach((element) => {
  text2 += `

<div class=" item">
    <div class="chess">
    <img class="img-item" src="${element.img1}" alt="">
    </div>
    <div class="description">
    <h5 class="description-heading">${element.title}</h5>
    <a class="email" href="">${element.email}</a>
    <hr class="chess-line">
    <p class="description-paragraph">${element.paragraph}</p>
    </div>
</div>   `;
});

addSpeakerSection.innerHTML = text2;

const addSpeakerSection1 = document.querySelector('.add-speaker-sec1');

let text3 = '';

addExperts2.forEach((element) => {
  text3 += `

<div class=" item">
    <div class="chess">
    <img class="img-item" src="${element.img1}" alt="">
    </div>
    <div class="description">
    <h5 class="description-heading">${element.title}</h5>
    <a class="email" href="">${element.email}</a>
    <hr class="chess-line">
    <p class="description-paragraph">${element.paragraph}</p>
    </div>
</div>   `;
});

addSpeakerSection1.innerHTML = text3;