Skip to content

Commit 069609f

Browse files
hmillersarahhmillersarah
committed
internship hero section
1 parent 21286cd commit 069609f

6 files changed

Lines changed: 63 additions & 48 deletions

File tree

ims-internship.html renamed to archive/ims-internship.html

File renamed without changes.

‎ims-internship-2025.html‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@
7474

7575
<!-- Hamburger menu -->
7676
<script src="wp-includes/js/navbar.js"></script>
77+
78+
<!-- Web components -->
79+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
7780
</head>
7881

7982
<body id="ibm-com" class="ibm-com ibm-type">
@@ -277,27 +280,14 @@ <h5>IMS support</h5>
277280
<main id="content" class="main-content">
278281
<div id="main">
279282
<!-- =========================== Hero =========================== -->
280-
<section class="internship-bg">
281-
<div id="intro-section" class="pure-g blur-bg hero">
282-
<div class="pure-u-1 pure-u-md-1-24">
283-
<img src="wp-content/icons/icon_engage.svg" alt="" class="icon">
284-
</div>
285-
<div class="pure-u-1 pure-u-md-23-24">
286-
<h6>Engage</h6>
287-
<h1>IMS Customer Internship 2025</h1>
288-
<p>Take your skills to the next level with our annual, in-person, one-week training event.</p>
289-
<p><b>May 19 - 23, 2025</b></p>
290-
<a class="button button-primary"
291-
onfocus="closeNavMenu()"
292-
target="_blank"
293-
aria-label="Register now for the IMS Internship"
294-
href="https://www.ibm.com/it-infrastructure/us-en/resources/campaignmail/z/ims/eventsignup.html"
295-
rel="noopener noreferrer">
296-
Register now →
297-
</a>
298-
</div>
299-
</div>
300-
</section>
283+
<hero-section
284+
name="IMS Customer Internship 2025"
285+
image="wp-content/icons/icon_engage.svg"
286+
section="Engage"
287+
desc="<p>Take your skills to the next level with our annual, in-person, one-week training event.</p><p><b>May 19 - 23, 2025</b></p>"
288+
linktext="Register now →"
289+
link="https://www.ibm.com/it-infrastructure/us-en/resources/campaignmail/z/ims/eventsignup.html"
290+
></hero-section>
301291

302292
<!-- =========================== Why attend? =========================== -->
303293
<section class="white-bg pure-g">

‎ims-videos.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ <h2 class="video-name"></h2>
316316
name="IMS videos"
317317
image="wp-content/Icon_Managed ACBs_IMS DatabasePage.svg"
318318
section="Learn"
319-
desc="<span>See the latest IMS educational videos here or click <b>Visit IBM MediaCenter</b> to search for more IMS video content.</span>"
319+
desc="<p>See the latest IMS educational videos here or click <b>Visit IBM MediaCenter</b> to search for more IMS video content.</p>"
320320
linktext="Visit IBM MediaCenter →"
321321
link="https://mediacenter.ibm.com/channel/IMS%2BEducational%2BVideos/122579632"
322322
></hero-section>

‎web-components/hero-section/hero-section.css‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,22 @@
2020
background-position: 35%;
2121
}
2222

23-
section {
23+
.internship-bg {
24+
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(../../wp-content/images/internship_collaboration.jpeg);
25+
background-repeat: no-repeat;
26+
background-size: cover;
27+
background-position: center;
28+
color: whitesmoke;
29+
}
30+
31+
.blur-bg {
32+
backdrop-filter: blur(6px);
33+
}
34+
35+
.hero {
2436
display: grid;
2537
grid-template-columns: 4em 2fr;
26-
grid-template-rows: repeat(4, 1fr);
38+
grid-template-rows: 4em repeat(3, 1fr);
2739
padding: 3em;
2840
padding-top: 2em;
2941
align-items: center;
@@ -66,6 +78,10 @@ h2, h6, p {
6678
font-size: 1.25em;
6779
}
6880

81+
.desc p {
82+
margin: 0.5em 0em;
83+
}
84+
6985
.links {
7086
grid-column: 2;
7187
grid-row: 4;
@@ -99,11 +115,12 @@ h2, h6, p {
99115
background-color: var(--btn-scnd-hover);
100116
}
101117

102-
@media screen and (max-width: 27em) {
103-
section {
118+
@media screen and (max-width: 27em) {
119+
.hero {
104120
display: flex;
105121
flex-flow: column wrap;
106122
align-items: flex-start;
107123
gap: 1em;
124+
padding: 3em;
108125
}
109-
}
126+
}

‎web-components/hero-section/hero-section.html‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
<link href="web-components/hero-section/hero-section.css" rel="stylesheet">
2-
<section class="hero">
3-
<img src="" alt="" class="image">
4-
<h6 class="section"></h6>
5-
<h2 class="name"></h2>
6-
<p class="desc"></p>
7-
<div class="links">
8-
<a onfocus="closeNavMenu()"
9-
rel="noopener noreferrer"
10-
class="button button-primary"
11-
>
12-
<span class="button-primary-text"></span>
13-
</a>
14-
<a rel="noopener noreferrer"
15-
class="button button-secondary"
16-
>
17-
<span class="button-secondary-text"></span>
18-
</a>
2+
<section class="hero-section">
3+
<div class="hero">
4+
<img src="" alt="" class="image">
5+
<h6 class="section"></h6>
6+
<h2 class="name"></h2>
7+
<span class="desc"></span>
8+
<div class="links">
9+
<a onfocus="closeNavMenu()"
10+
rel="noopener noreferrer"
11+
class="button button-primary"
12+
>
13+
<span class="button-primary-text"></span>
14+
</a>
15+
<a rel="noopener noreferrer"
16+
class="button button-secondary"
17+
>
18+
<span class="button-secondary-text"></span>
19+
</a>
20+
</div>
1921
</div>
2022
</section>

‎web-components/hero-section/hero-section.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function createComponent(html) {
1010
function setContent(cssSelector, content, shadow) {
1111
const selector = shadow.querySelector(cssSelector);
1212
// Check if span tag is used in desc
13-
if ((content != undefined) && (content.includes('<span>'))) {
13+
if ((content != undefined) && (content.includes('<p>'))) {
1414
// Update HTML
1515
selector.innerHTML = content;
1616
} else {
@@ -46,7 +46,7 @@ function createComponent(html) {
4646

4747
// Return array of properties to observe
4848
static get observedAttributes() {
49-
return ['name', 'image', 'section', 'desc', 'desc2', 'linktext', 'link', 'linktext2', 'link2'];
49+
return ['name', 'image', 'section', 'desc', 'linktext', 'link', 'linktext2', 'link2'];
5050
}
5151

5252
// Called when an attribute is defined or changed
@@ -87,10 +87,16 @@ function createComponent(html) {
8787
}
8888

8989
// Change background and icon based on provided section
90-
const heroSection = shadow.querySelector('.hero');
90+
const heroSection = shadow.querySelector('.hero-section');
91+
const hero = shadow.querySelector('.hero');
9192
switch(this.section) {
9293
case 'Engage':
93-
heroSection.classList.add('engage-bg');
94+
if ((this.name).includes('Internship')) {
95+
heroSection.classList.add('internship-bg');
96+
hero.classList.add('blur-bg');
97+
} else {
98+
heroSection.classList.add('engage-bg');
99+
}
94100
break;
95101
case 'Learn':
96102
heroSection.classList.add('learn-bg');

0 commit comments

Comments
 (0)