Skip to content

Commit 7390adb

Browse files
ipewzneripewzner
committed
cardForSponser
1 parent 4af1d25 commit 7390adb

3 files changed

Lines changed: 231 additions & 74 deletions

File tree

‎SponsorsPage.js‎

Lines changed: 129 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,113 @@
11
class SponsorsPage extends HTMLElement {
22
connectedCallback() {
3+
const sponsers = [
4+
{
5+
img: "./img/ANL_logo.png",
6+
alt: "ANL_logo",
7+
sponsor_name: "Haifa University",
8+
sponsor_title: "Charney School of Marine Sciences"
9+
},
10+
{
11+
img: "./img/LogoSchool.png",
12+
alt: "LogoSchool",
13+
sponsor_name: "Haifa University",
14+
sponsor_title: "Charney School of Marine Sciences"
15+
},
16+
{
17+
img: "./img/LogoMorrisKahn.png",
18+
alt: "LogoMorrisKahn",
19+
sponsor_name: "Morris Kahn",
20+
sponsor_title: "Morris Kahn Marine Research Station, University of Haifa"
21+
},
22+
{
23+
img: "./img/labust_logo.png",
24+
alt: "labust_logo",
25+
sponsor_name: "labust",
26+
sponsor_title: "Haifa University"
27+
},
28+
{
29+
img: "./img/UWINLABUSTFINALhorizontalni1.png",
30+
alt: "UWIN_LABUST_logo",
31+
sponsor_name: "UWIN",
32+
sponsor_title: "ERA CHAIR IN INTERNET OF UNDERWATER THINGS AT LABUST1"
33+
},
34+
{
35+
img: "./img/CoE_Marble_pozitiv_horizontalni.png",
36+
alt: "MarbleLogo",
37+
sponsor_name: "Marble",
38+
sponsor_title: "entre of Excellence in Maritime Robotics and Technologies"
39+
}
40+
]
41+
42+
/*
43+
this.innerHTML = `
44+
<div class="sponsors">
45+
<img src="img/Vertical wave.png" alt="Vertical wave" class="background-content-demos">
46+
47+
<div class="demos-container">
48+
<img src="img/wave.png" alt="wave" class="wave">
49+
<h2 class="wave-line-h2">Sponsors</h2>
50+
<img src="img/wave.png" alt="wave" class="wave miror">
51+
</div>
52+
53+
<ul class="sponsors-list">
54+
55+
<li class="sponsor-item">
56+
<img src="./img/ANL_logo.png" alt="ANL_logo" class="sponsor-logo">
57+
<div class="card-info">
58+
<p class="sponsor-name">ANL</p>
59+
<p class="sponsor-title">Underwater Acoustic and Navigation Laboratory, University of Haifa
60+
</p>
61+
</div>
62+
</li>
63+
64+
<li class="sponsor-item">
65+
<img src="./img/LogoSchool.png" alt="LogoSchool" class="sponsor-logo">
66+
<div class="card-info">
67+
68+
<p class="sponsor-name">Haifa University</p>
69+
<p class="sponsor-title">Charney School of Marine Sciences
70+
</p>
71+
</div>
72+
</li>
73+
74+
<li class="sponsor-item">
75+
<img src="./img/LogoMorrisKahn.png" alt="LogoMorrisKahn" class="sponsor-logo">
76+
<div class="card-info">
77+
<p class="sponsor-name">Morris Kahn</p>
78+
<p class="sponsor-title">Morris Kahn Marine Research Station, University of Haifa
79+
</p>
80+
</div>
81+
82+
</li>
83+
84+
<!--
85+
<li class="sponsor-item">
86+
<img src="./img/labust_logo.png" alt="labust_logo" class="sponsor-logo">
87+
<p class="sponsor-name">labust</p>
88+
<p class="sponsor-title">Haifa University</p>
89+
</li>
90+
-->
91+
92+
<li class="sponsor-item">
93+
<img src="./img/UWINLABUSTFINALhorizontalni1.png" alt="UWIN_LABUST_logo" class="sponsor-logo">
94+
<p class="sponsor-name">UWIN</p>
95+
<p class="sponsor-title">ERA CHAIR IN INTERNET OF UNDERWATER THINGS AT LABUST1
96+
</p>
97+
</li>
98+
99+
<li class="sponsor-item">
100+
<img src="./img/CoE_Marble_pozitiv_horizontalni.png" alt="MarbleLogo" class="sponsor-logo">
101+
<p class="sponsor-name">Marble</p>
102+
<p class="sponsor-title">entre of Excellence in Maritime Robotics and Technologies
103+
for Sustainable Blue Economy</p>
104+
</li>
105+
106+
</ul>
107+
</div>
108+
`;
109+
*/
110+
3111
this.innerHTML = `
4112
<div class="sponsors">
5113
<img src="img/Vertical wave.png" alt="Vertical wave" class="background-content-demos">
@@ -10,54 +118,31 @@ class SponsorsPage extends HTMLElement {
10118
<img src="img/wave.png" alt="wave" class="wave miror">
11119
</div>
12120
13-
<ul class="sponsors-list">
14-
15-
<li class="sponsor-item">
16-
<img src="./img/ANL_logo.png" alt="ANL_logo" class="sponsor-logo">
17-
<p class="sponsor-name">ANL</p>
18-
<p class="sponsor-title">Underwater Acoustic and Navigation Laboratory, University of Haifa
19-
</p>
20-
</li>
21-
22-
<li class="sponsor-item">
23-
<img src="./img/LogoSchool.png" alt="LogoSchool" class="sponsor-logo">
24-
<p class="sponsor-name">Haifa University</p>
25-
<p class="sponsor-title">Charney School of Marine Sciences
26-
</p>
27-
</li>
28-
29-
<li class="sponsor-item">
30-
<img src="./img/LogoMorrisKahn.png" alt="LogoMorrisKahn" class="sponsor-logo">
31-
<p class="sponsor-name">Morris Kahn</p>
32-
<p class="sponsor-title">Morris Kahn Marine Research Station, University of Haifa
33-
</p>
34-
</li>
121+
<ul class="sponsors-list" id="sponsorsList"></ul>
122+
</div>
123+
`;
35124

36-
<!--
37-
<li class="sponsor-item">
38-
<img src="./img/labust_logo.png" alt="labust_logo" class="sponsor-logo">
39-
<p class="sponsor-name">labust</p>
40-
<p class="sponsor-title">Haifa University</p>
41-
</li>
42-
-->
125+
this.fillList(sponsers);
126+
}
43127

44-
<li class="sponsor-item">
45-
<img src="./img/UWINLABUSTFINALhorizontalni1.png" alt="UWIN_LABUST_logo" class="sponsor-logo">
46-
<p class="sponsor-name">UWIN</p>
47-
<p class="sponsor-title">ERA CHAIR IN INTERNET OF UNDERWATER THINGS AT LABUST1
48-
</p>
49-
</li>
128+
fillList(sponsers) {
129+
// Because the table is appended to ‘this’, we can find the <tbody>:
130+
const sponsorsList = this.querySelector('#sponsorsList');
131+
sponsorsList.innerHTML = '';
50132

51-
<li class="sponsor-item">
52-
<img src="./img/CoE_Marble_pozitiv_horizontalni.png" alt="MarbleLogo" class="sponsor-logo">
53-
<p class="sponsor-name">Marble</p>
54-
<p class="sponsor-title">entre of Excellence in Maritime Robotics and Technologies
55-
for Sustainable Blue Economy</p>
56-
</li>
133+
sponsers.forEach(sponser => {
134+
sponsorsList.innerHTML += `
135+
<li class="sponsor-item">
136+
<img src=${sponser.img} alt=${sponser.alt} class="sponsor-logo">
137+
<div class="filler"></div>
138+
<div class="card-info">
139+
<p class="sponsor-name">${sponser.sponsor_name}</p>
140+
<p class="sponsor-title">${sponser.sponsor_title}</p>
141+
</div>
142+
</li>
143+
`;
57144

58-
</ul>
59-
</div>
60-
`;
145+
});
61146
}
62147
}
63148

‎style.css‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,10 @@ p {
259259
align-items: center;
260260
gap: 10px;
261261
margin-top: 20px;
262+
263+
margin-inline-start: 20%;
264+
margin-inline-end: 20%;
265+
width: 60%;
262266
}
263267

264268
.imgs-row img {
@@ -352,6 +356,7 @@ p {
352356

353357

354358
ol {
359+
padding-top:5px ;
355360
list-style-type: none;
356361
counter-reset: item;
357362
}
@@ -432,19 +437,6 @@ ol li:before {
432437

433438

434439

435-
436-
437-
438-
439-
440-
441-
442-
443-
444-
445-
446-
447-
448440
.sponsors {
449441
display: block;
450442
width: 100%;
@@ -461,45 +453,61 @@ ol li:before {
461453
justify-content: center;
462454
}
463455

456+
.filler {
457+
height: -webkit-fill-available;
458+
}
459+
464460
.sponsor-item {
461+
background-color: #ffffff;
462+
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
463+
border-radius: 25px;
464+
/*padding: 10px;*/
465+
465466
display: flex;
466467
flex-direction: column;
467-
/* סידור אנכי של תמונה וטקסט */
468-
align-items: center;
469-
/* מרכוז אופקי של התוכן */
468+
/*align-items: center;*/
470469
margin: 20px;
471-
/* רווח בין פריטים */
472470
text-align: center;
473-
max-width: 250px;
474-
/* הגבלת רוחב פריט */
471+
max-width: 350px;
472+
z-index: 6;
475473
}
476474

477-
.sponsor-logo {
478-
background-color: #fff;
479-
width: 250px;
475+
.sponsor-item img {
476+
padding: 10px;
477+
max-width: 100%;
478+
height: auto;
479+
}
480480

481-
height: 150px;
481+
.card-info {
482+
min-height: 75px;
483+
width: 100%;
484+
padding: 10px;
485+
background-color: #efefefc7;
486+
border-bottom-right-radius: 25px;
487+
border-bottom-left-radius: 25px;
482488

483-
margin-bottom: 10px;
484-
/* רווח בין תמונה לטקסט */
485489
}
486490

487491
.sponsor-name {
488492
font-size: 16px;
489-
/* גודל גופן */
490493
font-weight: bold;
491-
/* טקסט מודגש */
492-
margin: 0;
493-
/* הסרת מרווחים מיותרים */
494+
495+
margin-top: auto;
496+
/* דחיפת הכותרת לתחתית האלמנט */
494497
}
495498

496499

500+
497501
@media (max-width: 880px) {
498502

503+
.sponsor-item {
504+
min-width: 280px;
505+
}
506+
499507
.call-for-abstracts p {
500508
flex-direction: column;
501509
}
502-
510+
503511

504512
.menu {
505513
display: none;

‎temp.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<div class="sponsors">
2+
<img src="img/Vertical wave.png" alt="Vertical wave" class="background-content-demos">
3+
4+
<div class="demos-container">
5+
<img src="img/wave.png" alt="wave" class="wave">
6+
<h2 class="wave-line-h2">Sponsors</h2>
7+
<img src="img/wave.png" alt="wave" class="wave miror">
8+
</div>
9+
10+
<ul class="sponsors-list">
11+
12+
<li class="sponsor-item">
13+
<img src="./img/ANL_logo.png" alt="ANL_logo" class="sponsor-logo">
14+
<div class="card-info">
15+
<p class="sponsor-name">ANL</p>
16+
<p class="sponsor-title">Underwater Acoustic and Navigation Laboratory, University of Haifa
17+
</p>
18+
</div>
19+
</li>
20+
21+
<li class="sponsor-item">
22+
<img src="./img/LogoSchool.png" alt="LogoSchool" class="sponsor-logo">
23+
<div class="card-info">
24+
25+
<p class="sponsor-name">Haifa University</p>
26+
<p class="sponsor-title">Charney School of Marine Sciences
27+
</p>
28+
</div>
29+
</li>
30+
31+
<li class="sponsor-item">
32+
<img src="./img/LogoMorrisKahn.png" alt="LogoMorrisKahn" class="sponsor-logo">
33+
<div class="card-info">
34+
<p class="sponsor-name">Morris Kahn</p>
35+
<p class="sponsor-title">Morris Kahn Marine Research Station, University of Haifa
36+
</p>
37+
</div>
38+
39+
</li>
40+
41+
<!--
42+
<li class="sponsor-item">
43+
<img src="./img/labust_logo.png" alt="labust_logo" class="sponsor-logo">
44+
<p class="sponsor-name">labust</p>
45+
<p class="sponsor-title">Haifa University</p>
46+
</li>
47+
-->
48+
49+
<li class="sponsor-item">
50+
<img src="./img/UWINLABUSTFINALhorizontalni1.png" alt="UWIN_LABUST_logo" class="sponsor-logo">
51+
<p class="sponsor-name">UWIN</p>
52+
<p class="sponsor-title">ERA CHAIR IN INTERNET OF UNDERWATER THINGS AT LABUST1
53+
</p>
54+
</li>
55+
56+
<li class="sponsor-item">
57+
<img src="./img/CoE_Marble_pozitiv_horizontalni.png" alt="MarbleLogo" class="sponsor-logo">
58+
<p class="sponsor-name">Marble</p>
59+
<p class="sponsor-title">entre of Excellence in Maritime Robotics and Technologies
60+
for Sustainable Blue Economy</p>
61+
</li>
62+
63+
</ul>
64+
</div>

0 commit comments

Comments
 (0)