Skip to content

Commit 0fbfba5

Browse files
hmillersarahhmillersarah
committed
update tm page for responsiveness
1 parent 1aaff7c commit 0fbfba5

4 files changed

Lines changed: 73 additions & 48 deletions

File tree

‎ims-tm.html‎

Lines changed: 53 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,10 @@
8686
<nav-header></nav-header>
8787

8888
<main id="content" class="main-content">
89+
<!-- =========================== Hero =========================== -->
8990
<hero-section
9091
name="IMS Transaction Manager: Fast, secure, connected"
91-
image="wp-content/icons/icon_database.svg"
92+
image="wp-content/icons/icon_3d.svg"
9293
section="Innovate"
9394
desc='<p>
9495
By using APIs and distributed connectivity, IMS can integrate with modern tools and emerging
@@ -98,12 +99,12 @@
9899
</p>'
99100
></hero-section>
100101

101-
<!-- =========================== Learn more =========================== -->
102+
<!-- =========================== Introducing IMS TM =========================== -->
102103
<section class="white-bg pure-g">
103104
<div class="pure-u-1 section-header">
104105
<h2>Introducing IMS Transaction Manager</h2>
105106
</div>
106-
<div class="pure-u-1 pure-g pure-g-pad">
107+
<div class="pure-u-1 pure-g pure-g-pad-v">
107108
<div class="pure-u-md-11-24">
108109
<h4>Fundamentals of IMS TM Part 1</h4>
109110
<p>
@@ -151,9 +152,9 @@ <h4>Fundamentals of IMS TM Part 2</h4>
151152
<h2>IMS Transaction Manager</h2>
152153
</div>
153154
<div class="pure-u-1 pure-g pure-g-pad">
154-
<div class="pure-u-md-11-24">
155+
<div class="pure-u-md-10-24">
155156
<div class="pure-u-xl-2-24">
156-
<img class="ims-card-icon" src="wp-content/icons/tcp-ip-service.svg" alt="">
157+
<img class="ims-card-icon" src="wp-content/icons/icon_timer.svg" alt="">
157158
</div>
158159
<div class="pure-u-xl-20-24">
159160
<h3>Speedy transactions</h3>
@@ -174,8 +175,8 @@ <h3>Speedy transactions</h3>
174175
</div>
175176
</div>
176177

177-
<div class="pure-u-md-11-24">
178-
<img src="wp-content/tm/speedy-transactions-c.png" alt="Diagram of IMS TM transaction processing" class="img-md">
178+
<div class="pure-u-md-13-24">
179+
<img src="wp-content/tm/speedy-transactions-c.png" alt="Diagram of IMS TM transaction processing" class="img-lg">
179180
</div>
180181

181182
<div class="pure-u-md-11-24">
@@ -227,10 +228,10 @@ <h3>Ways to connect</h3>
227228
</section>
228229

229230
<!-- =========================== Upskill with IMS TM =========================== -->
230-
<section class="white-bg card-section">
231-
<div class="card-section-header"><h2>Upskill with IMS Transaction Manager</h2></div>
232-
<section>
233-
<h3>The basics</h3>
231+
<section class="white-bg pure-g pure-g-pad-v">
232+
<h2 class="pure-u-1">Upskill with IMS Transaction Manager</h2>
233+
<div class="pure-u-1">
234+
<h3>The basics of IMS</h3>
234235
<!-- Introducing IBM IMS -->
235236
<course-card
236237
name="Introducing IBM Information Management System (IMS)"
@@ -252,8 +253,8 @@ <h3>The basics</h3>
252253
linktext="Learn more"
253254
>
254255
</course-card>
255-
</section>
256-
<section>
256+
</div>
257+
<div class="pure-u-1">
257258
<h3>Intermediate and advanced training</h3>
258259
<!-- IMS System Programming -->
259260
<course-card
@@ -287,48 +288,54 @@ <h3>Intermediate and advanced training</h3>
287288
linktext="Learn more"
288289
>
289290
</course-card>
290-
</section>
291+
</div>
291292
</section>
292293

293294
<!-- =========================== IMS blogs =========================== -->
294-
<section class="zs-gray-section ibm-background-white-core blog-black-bg">
295-
<div class="zs-section blog-section">
296-
<!--Header -->
297-
<div class="pure-u-1 pure-u-sm-1 pure-u-lg-6-24 ibm-padding-bottom-1">
298-
<h2>Blogs</h2>
299-
</div>
300-
301-
<!-- Content -->
302-
<div class="pure-u-lg-16-24 pure-u-1">
303-
<div class="pure-g">
304-
<!-- Card -->
305-
<div class="pure-u-1 pure-u-sm-1 pure-u-md-1-2 blog-card">
306-
<img class="ims-card-icon" src="wp-content/icons/data--check.svg" alt="">
307-
<h3>Amplify your enterprise with IMS TM</h3>
308-
<a href="https://community.ibm.com/community/user/ibmz-and-linuxone/blogs/mario-perotti/2022/05/09/ims-tm?communityKey=eba3ada3-db89-4dca-9154-328195f5e560" target="_blank" rel="noopener noreferrer" aria-label="Read the blog on using IMS TM for your enterprise">
309-
Read the blog →
310-
</a>
311-
</div>
312-
<!-- Card -->
313-
<div class="pure-u-1 pure-u-sm-1 pure-u-md-1-2 blog-card">
314-
<img class="ims-card-icon" src="wp-content/icons/security.svg" alt="">
315-
<h3>Making IMS transactions more secure by Client ID</h3>
316-
<a href="https://community.ibm.com/community/user/ibmz-and-linuxone/blogs/hiroyuki-fuchiue/2024/05/21/making-ims-transactions-more-secure-by-client-id?communityKey=eba3ada3-db89-4dca-9154-328195f5e560" target="_blank" rel="noopener noreferrer" aria-label="Read the blog on making IMS transactions secure">
317-
Read the blog →
318-
</a>
295+
<section class="dark-gray-bg pure-g">
296+
<div class="pure-u-1 pure-u-md-1-5">
297+
<h2>Blogs</h2>
298+
</div>
299+
<div class="pure-u-1 pure-u-md-4-5">
300+
<div class="pure-g pure-g-pad">
301+
<div class="pure-u-1 pure-u-sm-1-2">
302+
<div class="pure-g">
303+
<div class="pure-u-1-5 pure-u-md-1">
304+
<img src="wp-content/icons/data--check.svg" alt="" class="icon-sm icon-invert">
305+
</div>
306+
<div class="pure-u-4-5 pure-u-md-1">
307+
<h3>Amplify your enterprise with IMS TM</h3>
308+
<a href="https://community.ibm.com/community/user/ibmz-and-linuxone/blogs/mario-perotti/2022/05/09/ims-tm?communityKey=eba3ada3-db89-4dca-9154-328195f5e560"
309+
target="_blank" rel="noopener noreferrer" aria-label="Read the blog on using IMS TM for your enterprise">
310+
Read the blog →
311+
</a>
312+
</div>
319313
</div>
320-
<!-- Card -->
321-
<div class="pure-u-1 pure-u-sm-1 blog-card">
322-
<h3>A large bank’s success story implementing RESTful APIs to streamline their digital transformation</h3>
323-
<a href="https://community.ibm.com/community/user/ibmz-and-linuxone/blogs/hiroyuki-fuchiue/2024/05/21/making-ims-transactions-more-secure-by-client-id?communityKey=eba3ada3-db89-4dca-9154-328195f5e560" target="_blank" rel="noopener noreferrer" aria-label="Read the blog on the bank success story">
324-
Read the blog →
325-
</a>
314+
</div>
315+
<div class="pure-u-1 pure-u-sm-1-2">
316+
<div class="pure-g">
317+
<div class="pure-u-1-5 pure-u-md-1">
318+
<img src="wp-content/icons/security.svg" alt="" class="icon-sm icon-invert">
319+
</div>
320+
<div class="pure-u-4-5 pure-u-md-1">
321+
<h3>Making IMS transactions more secure by Client ID</h3>
322+
<a href="https://community.ibm.com/community/user/ibmz-and-linuxone/blogs/hiroyuki-fuchiue/2024/05/21/making-ims-transactions-more-secure-by-client-id?communityKey=eba3ada3-db89-4dca-9154-328195f5e560"
323+
target="_blank" rel="noopener noreferrer" aria-label="Read the blog on making IMS transactions secure">
324+
Read the blog →
325+
</a>
326+
</div>
326327
</div>
327328
</div>
329+
<div class="pure-u-1">
330+
<h3>A large bank’s success story implementing RESTful APIs to streamline their digital transformation</h3>
331+
<a href="https://community.ibm.com/community/user/ibmz-and-linuxone/blogs/hiroyuki-fuchiue/2024/05/21/making-ims-transactions-more-secure-by-client-id?communityKey=eba3ada3-db89-4dca-9154-328195f5e560"
332+
target="_blank" rel="noopener noreferrer" aria-label="Read the blog on the bank success story">
333+
Read the blog →
334+
</a>
335+
</div>
328336
</div>
329337
</div>
330338
</section>
331-
332339
</main>
333340

334341
<!-- Footer -->

‎wp-content/icons/icon_3d.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎wp-content/icons/icon_timer.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎wp-includes/css/page.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,10 @@ h6 {
251251
padding: 1.2em;
252252
}
253253

254+
.pure-g-pad-v > div {
255+
padding: 2em 4em 2em 0em;
256+
}
257+
254258
/* For individual pure grid units requiring paddings */
255259
.pure-pad > div {
256260
padding: 1.2em;
@@ -413,9 +417,9 @@ h6 {
413417
margin-bottom: 0.2em;
414418
}
415419

416-
.img-md {
420+
.img-lg {
417421
width: 100%;
418-
max-width: 550px;
422+
max-width: 43.75em;
419423
padding: 1em;
420424
}
421425
/* -------------------------------------------------------- */
@@ -444,6 +448,10 @@ h6 {
444448
padding: 0.4em;
445449
}
446450

451+
.pure-g-pad-v > div {
452+
padding: 0.4em;
453+
}
454+
447455
/* Decrease highlight link padding for smaller screens */
448456
.highlight-link {
449457
padding-bottom: 1rem;

0 commit comments

Comments
 (0)