generated from microverseinc/readme-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Javascript.js
176 lines (161 loc) · 7.57 KB
/
Javascript.js
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
const cancel = document.querySelector('#cancel');
const hamburger = document.querySelectorAll('.navbar-toggler-icon');
const option1 = document.querySelector('.port');
const option2 = document.querySelector('.Ab');
const option3 = document.querySelectorAll('.cont');
function openDiv() {
const popup = document.querySelector('#popup');
popup.style.display = 'block';
}
function closeDiv() {
const get = document.querySelector('#popup');
get.style.display = 'none';
}
cancel.addEventListener('click', () => {
closeDiv();
});
hamburger.forEach((pop) => {
pop.addEventListener('click', () => {
openDiv();
});
});
option1.addEventListener('click', () => {
closeDiv();
});
option2.addEventListener('click', () => {
closeDiv();
});
option3.forEach((pop) => {
pop.addEventListener('click', () => {
closeDiv();
});
});
const arr = [
{
id: '0',
Images: 'images/speaker04.png',
SpeakerName: 'John Constatine',
SpeakersJob: 'John constatine is a real estate developer in Russia',
background:
'John constantine started his career in construction with a degree of construction management in 2012.',
},
{
id: '1',
Images: 'images/speaker03.png',
SpeakerName: 'Catherine Delight',
SpeakersJob: 'Catherine is a Mortage broker in Burundi',
background:
'Catherine started his career in real estate as Mortage broker with a degree of in Business Management in 2015.',
},
{
id: '2',
Images: 'images/speaker04.png',
SpeakerName: 'Lionel Delight',
SpeakersJob: 'Lionel is a Mortage broker in Burundi',
background:
'Lionel started his career in real estate as Mortage broker with a degree of in Business Management in 2015. she has sold more than 68 houses. she currently has a portfolio worth $200000',
},
{
id: '3',
Images: 'images/speaker05.png',
SpeakerName: 'Chris Dwell',
SpeakersJob: 'Chris is a Mortage broker in Burundi',
background:
'Chris started his career in real estate as Mortage broker with a degree of in Business Management in 2015. she has sold more than 68 houses. she currently has a portfolio worth $200000',
},
{
id: '4',
Images: 'images/speaker06.png',
SpeakerName: 'Nicole Nishimwe',
SpeakersJob: 'Nicole is a Mortage broker in Burundi',
background:
'Nicole started his career in real estate as Mortage broker with a degree of in Business Management in 2015. she has sold more than 68 houses. she currently has a portfolio worth $200000',
},
{
id: '5',
Images: 'images/speaker03.png',
SpeakerName: 'Nice Akimana',
SpeakersJob: 'Nice is a Mortage broker in Burundi',
background:
'Nice started his career in real estate as Mortage broker with a degree of in Business Management in 2015. she has sold more than 68 houses. she currently has a portfolio worth $200000',
},
];
const model = document.querySelector('.features');
const Speakerscont = `<div class="textline">
<h1 class=" title font-family"> Featured Speakers </h1>
<div class="guide_bar Color"></div>
</div>
`;
model.innerHTML += Speakerscont;
const topclass = `<div class="topclass">
<div class="speakers${0}">
<img class="speakerImage" src="${arr[0].Images}" alt="">
<div class="speakerInfo">
<h1 class="speakerName font-family">${arr[0].SpeakerName}</h1>
<div class="jobDescription font-family Color">${arr[0].SpeakersJob}</div>
<div class="bar "></div>
<div class="speakerbackground font-family"> ${arr[0].background}</div>
</div>
</div>
<div class="speakers${1}">
<img class="speakerImage" src="${arr[1].Images}" alt="">
<div class="speakerInfo">
<h1 class="speakerName font-family">${arr[1].SpeakerName}</h1>
<div class="jobDescription font-family Color">${arr[1].SpeakersJob}</div>
<div class="bar "></div>
<div class="speakerbackground font-family"> ${arr[1].background}</div>
</div>
</div>
</div>
`;
model.innerHTML += topclass;
const middleclass = `<div class="middleclass">
<div class="speakers${2}">
<img class="speakerImage" src="${arr[2].Images}" alt="">
<div class="speakerInfo">
<h1 class="speakerName font-family">${arr[2].SpeakerName}</h1>
<div class="jobDescription font-family Color">${arr[2].SpeakersJob}</div>
<div class="bar "></div>
<div class="speakerbackground font-family"> ${arr[2].background}</div>
</div>
</div>
<div class="speakers${3}">
<img class="speakerImage" src="${arr[3].Images}" alt="">
<div class="speakerInfo">
<h1 class="speakerName font-family">${arr[3].SpeakerName}</h1>
<div class="jobDescription font-family Color">${arr[3].SpeakersJob}</div>
<div class="bar "></div>
<div class="speakerbackground font-family"> ${arr[3].background}</div>
</div>
</div>
</div>
`;
model.innerHTML += middleclass;
const bottomclass = `<div class="bottomclass">
<div class="speakers${4}">
<img class="speakerImage" src="${arr[4].Images}" alt="">
<div class="speakerInfo">
<h1 class="speakerName font-family">${arr[4].SpeakerName}</h1>
<div class="jobDescription font-family Color">${arr[4].SpeakersJob}</div>
<div class="bar "></div>
<div class="speakerbackground font-family"> ${arr[4].background}</div>
</div>
</div>
<div class="speakers${5}">
<img class="speakerImage" src="${arr[5].Images}" alt="">
<div class="speakerInfo">
<h1 class="speakerName font-family">${arr[5].SpeakerName}</h1>
<div class="jobDescription font-family Color">${arr[5].SpeakersJob}</div>
<div class="bar "></div>
<div class="speakerbackground font-family"> ${arr[5].background}</div>
</div>
</div>
</div>
`;
model.innerHTML += bottomclass;
const plus = `<div class="expandmore"><h2 class="plus font-family">
MORE <i class="bi bi-chevron-down Color"></i>
</h2>
</div>
`;
model.innerHTML += plus;