Skip to content

Commit cbbbab4

Browse files
hmillersarahhmillersarah
committed
hero, learn, innovate
1 parent 13b73ff commit cbbbab4

3 files changed

Lines changed: 133 additions & 132 deletions

File tree

‎index.html‎

Lines changed: 95 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -99,140 +99,112 @@
9999
</section>
100100

101101
<!-- =========================== Hero =========================== -->
102-
<section class="black-bg">
103-
<div class="pure-u-1 pure-g">
104-
<div class="pure-u-md-11-24">
105-
<h1>IBM <b>IMS Central</b></h1>
106-
<p>Welcome! IMS™ Central is your hub for all things IMS.</p>
107-
<p>Build your skills, find documentation, get help, and engage with the team.</p>
102+
<section class="black-bg pure-g">
103+
<div class="pure-u-md-12-24">
104+
<div class="vertical-g homepage-hero">
105+
<h1>IBM <b>IMS Central</b></h1>
106+
<p>Welcome! IMS™ Central is your hub for all things IMS.</p>
107+
<p>Build your skills, find documentation, get help, and engage with the team.</p>
108+
</div>
108109
</div>
109-
<div class="pure-u-md-11-24">
110-
<h2 class="h2-normal">Video</h2>
110+
<div class="pure-u-md-12-24 gif">
111+
<a href="https://mediacenter.ibm.com/media/Intro+to+IMS+-+What+is+IMSF/0_beoagp8k/139456202"
112+
target="_blank" rel="noopener noreferrer" aria-label="Watch Intro to IMS">
113+
<img src="wp-content/introIMS.png" class="gif-cover" alt="Intro to IMS video preview">
114+
<img src="wp-content/introIMSclip.gif" class="gif-video" alt="Intro to IMS video preview">
115+
</a>
111116
</div>
112-
</div>
113117
</section>
114118

115-
<!-- =========================== Learn / Education =========================== -->
116-
<div class="zs-gray-section learn-bg-home learn-section">
117-
<section class="zs-section">
118-
<!--Header -->
119-
<div class="pure-u-1 pure-u-sm-1 pure-u-lg-6-24 ibm-padding-bottom-1">
120-
<h2>Learn</h2>
121-
<p class="index-subheader">Build your IMS skills through courses, videos, and code repos.</p>
122-
</div>
123-
<div class="pure-u-lg-2-24 learn-spacer"></div>
124-
125-
<!-- Selection container -->
126-
<div class="pure-u-lg-16-24 pure-u-1">
127-
<div class="pure-g index-cards">
128-
<!-- IBM Videos -->
129-
<div class="pure-u-1 pure-u-sm-1 pure-u-lg-8-24 learn-card">
130-
<img src="wp-content/Icon_Banner_IMS VideosPage.svg" alt="">
131-
<h3>Videos</h3>
132-
<p>Check out educational videos on Java, managed ACBs,
119+
<!-- =========================== Learn =========================== -->
120+
<section class="learn-home-bg white-bg pure-g">
121+
<div class="pure-u-1 pure-u-md-1-3 section-header">
122+
<h2>Learn</h2>
123+
<h3>Build your IMS skills through courses, videos, and code repos.</h3>
124+
</div>
125+
<div class="pure-u-1 pure-u-md-2-3">
126+
<div class="pure-g pure-g-pad">
127+
<div class="pure-u-1 pure-u-sm-1-3">
128+
<img src="wp-content/Icon_Banner_IMS VideosPage.svg" alt="" class="icon icon-lg">
129+
<h3>Videos</h3>
130+
<p>
131+
Check out educational videos on Java, managed ACBs,
133132
IMS catalog, shared queues, DBRC, and more.
134133
</p>
135134
<a href="ims-videos.html" aria-label="Learn more about videos">Learn more</a>
136-
</div>
137-
138-
<!-- Skills Launchpad -->
139-
<div class="pure-u-1 pure-u-sm-1 pure-u-lg-8-24 learn-card">
140-
<img src="wp-content/Icon_Banner_IMS CoursesPage.svg" alt="">
141-
<h3>Courses</h3>
142-
<p>Your education portal for role-based, self-paced learning. See the latest
143-
and online courses.
144-
</p>
145-
<a href="ims-education.html" aria-label="Learn more about courses">Learn more</a>
146-
</div>
147-
148-
<!-- IBM GitHub -->
149-
<div class="pure-u-1 pure-u-sm-1 pure-u-lg-8-24 learn-card">
150-
<img src="wp-content/icons/icon_github.svg" alt="">
151-
<h3>GitHub</h3>
152-
<p>See the IMS GitHub repositories to grab sample code, learn
153-
how to perform tasks on IMS, and more.
154-
</p>
155-
<a href="ims-repos.html" aria-label="Learn more about IMS GutHub repositories">Learn more</a>
156-
</div>
135+
</div>
136+
<div class="pure-u-1 pure-u-sm-1-3">
137+
<img src="wp-content/Icon_Banner_IMS CoursesPage.svg" alt="" class="icon icon-lg">
138+
<h3>Courses</h3>
139+
<p>
140+
Your education portal for role-based, self-paced learning. See the latest
141+
and online courses.
142+
</p>
143+
<a href="ims-education.html" aria-label="Learn more about courses">Learn more</a>
144+
</div>
145+
<div class="pure-u-1 pure-u-sm-1-3">
146+
<img src="wp-content/icons/icon_github.svg" alt="" class="icon icon-lg">
147+
<h3>GitHub</h3>
148+
<p>
149+
See the IMS GitHub repositories to grab sample code, learn how to perform tasks on IMS, and more.
150+
</p>
151+
<a href="ims-repos.html" aria-label="Learn more about IMS GutHub repositories">Learn more</a>
157152
</div>
158153
</div>
159-
</section>
160-
</div>
154+
</div>
155+
</section>
161156

162157
<!-- =========================== Innovate =========================== -->
163-
<!-- Parallax BG needs specification here to override styles -->
164-
<div class="zs-gray-section ibm-background-white-core imsc-learn-section pure-g" style="background-image: url(wp-content/BG02.png);">
165-
<section class="pure-g zs-section">
166-
<!--Section Header-->
167-
<div class="pure-u-lg-6-24 pure-u-1 pure-u-sm-1 pure-u-md-1 ibm-padding-bottom-1">
168-
<h2>Innovate</h2>
169-
<p class="pure-u-lg-7-8 pure-u-1 index-subheader">Discover how to modernize your IMS system and business applications.</p>
170-
</div>
171-
172-
<div class="pure-u-lg-2-24 innovate-spacer"></div>
173-
174-
<!-- Innovate cards -->
175-
<div class="pure-u-lg-16-24 pure-u-1 index-cards">
176-
<!-- Enforce a 2x2 -->
177-
<!-- INFO: will need to be fixed by making two blocks that stack to preserve alph order & margins -->
178-
<div class="pure-g">
179-
<!-- <div class="pure-u-sm-1 pure-u-md-1 pure-u-lg-1-2" style="display:inline-block !important;"> -->
180-
181-
<!-- APIs / zOS Connect EE -->
182-
<div class="pure-u-1 pure-u-md-11-24 pure-u-lg-11-24 ibm-left">
183-
<div class="ibm-card__content innovate-card">
184-
<img class="ims-card-icon" src="wp-content/icons/Icon_Homepage_APIs.svg" alt="">
185-
<h3>APIs</h3>
186-
<p>
187-
Not sure how the mainframe and APIs mix?
188-
Learn how to create consumable IMS APIs in minutes.
189-
</p>
190-
<a href="ims-apis.html" aria-label="Learn more about APIs">Learn more</a>
191-
</div>
192-
</div>
193-
194-
<!-- Automation -->
195-
<div class="pure-u-1 pure-u-md-11-24 pure-u-lg-11-24 ibm-left">
196-
<div class="ibm-card__content innovate-card">
197-
<img class="ims-card-icon" src="wp-content/icons/icon_automation.svg" alt="">
198-
<h3>Automation</h3>
199-
<p>
200-
See how Ansible® helps you automate z/OS® applications and IT
201-
infrastructure as part of your enterprise automation strategy by using a proven and consistent approach.
202-
</p>
203-
<a href="ims-devops.html" aria-label="Learn more about automation">Learn more</a>
204-
</div>
205-
</div>
206-
207-
<!-- Java -->
208-
<div class="pure-u-1 pure-u-md-11-24 pure-u-lg-11-24 ibm-left">
209-
<div class="ibm-card__content innovate-card">
210-
<img class="ims-card-icon" src="wp-content/Icon_Homepage_Java and IMS.svg" alt="">
211-
<h3>Java</h3>
212-
<p>
213-
With over 15 years of support, Java™ has become the quintessential language of modern
214-
IMS applications. Get started with our Java offerings.
215-
</p>
216-
<a href="ims-java.html" aria-label="Learn more about Java">Learn more</a>
217-
</div>
218-
</div>
219-
220-
<!-- DB -->
221-
<div class="pure-u-1 pure-u-md-11-24 pure-u-lg-11-24 ibm-left">
222-
<div class="ibm-card__content innovate-card">
223-
<img class="" src="wp-content/Icon_Homepage_IMS Database Manager.svg" alt="">
224-
<h3>IMS Database</h3>
225-
<p>
226-
Data integrity, performance, simplified use of SQL, and powerful recovery tools make IMS Database Manager the best choice to protect your enterprise assets.
227-
</p>
228-
<a href="ims-db.html" aria-label="Learn more about IMS database">Learn more</a>
229-
</div>
230-
</div>
231-
232-
</div>
233-
</div>
234-
</section>
235-
</div>
158+
<section class="innovate-home-bg black-bg pure-g pure-g-pad">
159+
<div class="pure-u-1 pure-u-md-1-3">
160+
<h2>Innovate</h2>
161+
<h3>Discover how to modernize your IMS system and business applications.</h3>
162+
</div>
163+
<div class="pure-u-1 pure-u-sm-1-3">
164+
<img src="wp-content/icons/Icon_Homepage_APIs.svg" alt="" class="icon icon-lg icon-invert">
165+
<h3>APIs</h3>
166+
<p>
167+
Not sure how the mainframe and APIs mix?
168+
Learn how to create consumable IMS APIs in minutes.
169+
</p>
170+
<a href="ims-apis.html" aria-label="Learn more about APIs">Learn more</a>
171+
</div>
172+
<div class="pure-u-1 pure-u-sm-1-3">
173+
<img src="wp-content/icons/icon_automation.svg" alt="" class="icon icon-lg icon-invert">
174+
<h3>Automation</h3>
175+
<p>
176+
See how Ansible® helps you automate z/OS® applications and IT infrastructure as part of your enterprise
177+
automation strategy by using a proven and consistent approach.
178+
</p>
179+
<a href="ims-education.html" aria-label="Learn more about courses">Learn more</a>
180+
</div>
181+
<div class="pure-u-1 pure-u-sm-1-3">
182+
<img src="wp-content/Icon_Homepage_Java and IMS.svg" alt="" class="icon icon-lg icon-invert">
183+
<h3>Java</h3>
184+
<p>
185+
With over 15 years of support, Java™ has become the quintessential language of modern
186+
IMS applications. Get started with our Java offerings.
187+
</p>
188+
<a href="ims-repos.html" aria-label="Learn more about IMS GutHub repositories">Learn more</a>
189+
</div>
190+
<div class="pure-u-1 pure-u-sm-1-3">
191+
<img src="wp-content/Icon_Homepage_IMS Database Manager.svg" alt="" class="icon icon-lg icon-invert">
192+
<h3>IMS Database</h3>
193+
<p>
194+
Data integrity, performance, simplified use of SQL, and powerful recovery tools make IMS Database Manager the best choice to protect your enterprise assets.
195+
</p>
196+
<a href="ims-repos.html" aria-label="Learn more about IMS GutHub repositories">Learn more</a>
197+
</div>
198+
<div class="pure-u-1 pure-u-sm-1-3">
199+
<img src="wp-content/Icon_Homepage_IMS Database Manager.svg" alt="" class="icon icon-lg icon-invert">
200+
<h3>IMS Transaction Manager</h3>
201+
<p>
202+
Using APIs and distributed connectivity, IMS integrates with modern tools and emerging technologies,
203+
enabling it to host mission-critical applications to support billions of transactions per day.
204+
</p>
205+
<a href="ims-repos.html" aria-label="Learn more about IMS GutHub repositories">Learn more</a>
206+
</div>
207+
</section>
236208

237209
<!-- =========================== Engage / Programs =========================== -->
238210
<div class="zs-gray-section engage-bg-home engage-section">

‎wp-includes/css/homepage.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -416,12 +416,6 @@
416416
color: #0F62FE !important;
417417
}
418418

419-
.learn-bg-home {
420-
background-image: url(../../wp-content/backgrounds/Learn_HomepageBG.png);
421-
background-repeat: no-repeat;
422-
background-size: cover;
423-
background-position: 80%;
424-
}
425419
.learn-bg {
426420
background-image: url(../../wp-content/backgrounds/Learn_HomepageBG.png);
427421
background-repeat: no-repeat;

‎wp-includes/css/page.css‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
--btn-scnd-hover: #5e5e5e;
1919
/* Font Color */
2020
--font-light-blue: #78A9FF;
21+
--font-dark-blue: #0141B7;
2122

2223
/* Weight */
2324
--bold: 900;
@@ -134,6 +135,22 @@ h6 {
134135
.blue-bg a {
135136
color: var(--font-light-blue);
136137
}
138+
139+
.learn-home-bg {
140+
background-image: url(../../wp-content/backgrounds/Learn_HomepageBG.png);
141+
background-repeat: no-repeat;
142+
background-size: cover;
143+
background-position: 80%;
144+
}
145+
146+
.learn-home-bg a {
147+
color: var(--font-dark-blue);
148+
}
149+
150+
.innovate-home-bg {
151+
background-image: url(../../wp-content/BG02.png);
152+
background-size: cover;
153+
}
137154
/* -------------------------------------------------------- */
138155

139156
/* Icons */
@@ -257,11 +274,11 @@ h6 {
257274
padding-right: 2em;
258275
}
259276

260-
/* For pure grid units requiring paddings */
277+
/* For pure grid units requiring padding */
261278
.pure-g-pad > div {
262279
padding: 1.2em;
263280
}
264-
281+
/* For pure grid units requiring vertical padding only */
265282
.pure-g-pad-v > div {
266283
padding: 2em 4em 2em 0em;
267284
}
@@ -304,6 +321,14 @@ h6 {
304321
.hr-container {
305322
padding: 2em 0em 3em 0em;
306323
}
324+
325+
/* Format vertical group */
326+
.vertical-g {
327+
display: flex;
328+
flex-flow: column nowrap;
329+
justify-content: center;
330+
height: 100%;
331+
}
307332
/* -------------------------------------------------------- */
308333

309334
/* Quotations */
@@ -412,6 +437,7 @@ h6 {
412437

413438
.gif-video:hover {
414439
opacity: 1;
440+
transform: scale(1.03);
415441
}
416442
/* -------------------------------------------------------- */
417443

@@ -442,7 +468,7 @@ h6 {
442468
.home-banner a {
443469
color: var(--white);
444470
font-weight: bold;
445-
font-size: var(--plex-18);
471+
font-size: var(--plex-20);
446472
}
447473

448474
/* Custom styling */
@@ -468,6 +494,15 @@ h6 {
468494
max-width: 43.75em;
469495
padding: 1em;
470496
}
497+
498+
/* Index hero */
499+
.homepage-hero h1 {
500+
font-size: var(--plex-48);
501+
}
502+
503+
.homepage-hero p {
504+
font-size: 16pt;
505+
}
471506
/* -------------------------------------------------------- */
472507

473508
/* Media queries */

0 commit comments

Comments
 (0)