Skip to content

Commit 5b5a5e3

Browse files
hmillersarahhmillersarah
committed
homepage design fixes from 6/17 meeting
1 parent 4a5d936 commit 5b5a5e3

2 files changed

Lines changed: 91 additions & 68 deletions

File tree

‎index.html‎

Lines changed: 71 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
<!-- =========================== Banner =========================== -->
9090
<section class="blue-bg home-banner">
9191
<div>
92-
<img src="wp-content/Icon_02_IMS GoldPage.svg" alt="" class="icon-invert">
92+
<img src="wp-content/icons/icon_trial.svg" alt="" class="icon-invert">
9393
<a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a>
9494
</div>
9595
<div>
@@ -117,42 +117,44 @@ <h1>IBM <b>IMS Central</b></h1>
117117
</section>
118118

119119
<!-- =========================== 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>
120+
<div class="learn-home-bg white-bg">
121+
<section class="blur-bg pure-g">
122+
<div class="pure-u-1 pure-u-md-1-3 section-header">
123+
<h2>Learn</h2>
124+
<h3>Build your IMS skills through courses, videos, and code repos.</h3>
125+
</div>
126+
<div class="pure-u-1 pure-u-md-2-3">
127+
<div class="pure-g pure-g-pad">
128+
<div class="pure-u-1 pure-u-sm-1-3">
129+
<img src="wp-content/Icon_Banner_IMS VideosPage.svg" alt="" class="icon icon-lg">
130+
<h3>Videos</h3>
131+
<p>
132+
Check out educational videos on Java, managed ACBs,
133+
IMS catalog, shared queues, DBRC, and more.
134+
</p>
135+
<a href="ims-videos.html" aria-label="Learn more about videos">Learn more</a>
136+
</div>
137+
<div class="pure-u-1 pure-u-sm-1-3">
138+
<img src="wp-content/Icon_Banner_IMS CoursesPage.svg" alt="" class="icon icon-lg">
139+
<h3>Courses</h3>
130140
<p>
131-
Check out educational videos on Java, managed ACBs,
132-
IMS catalog, shared queues, DBRC, and more.
141+
Your education portal for role-based, self-paced learning. See the latest
142+
and online courses.
133143
</p>
134-
<a href="ims-videos.html" aria-label="Learn more about videos">Learn more</a>
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>
144+
<a href="ims-education.html" aria-label="Learn more about courses">Learn more</a>
145+
</div>
146+
<div class="pure-u-1 pure-u-sm-1-3">
147+
<img src="wp-content/icons/icon_github.svg" alt="" class="icon icon-lg">
148+
<h3>GitHub</h3>
149+
<p>
150+
See the IMS GitHub repositories to grab sample code, learn how to perform tasks on IMS, and more.
151+
</p>
152+
<a href="ims-repos.html" aria-label="Learn more about IMS GutHub repositories">Learn more</a>
153+
</div>
152154
</div>
153155
</div>
154-
</div>
155156
</section>
157+
</div>
156158

157159
<!-- =========================== Innovate =========================== -->
158160
<section class="innovate-home-bg black-bg pure-g">
@@ -178,7 +180,7 @@ <h3>Automation</h3>
178180
</p>
179181
<a href="ims-education.html" aria-label="Learn more about courses">Learn more</a>
180182
</div>
181-
<div class="pure-u-1 pure-u-sm-1-3 pure-pad">
183+
<div class="pure-u-1 pure-u-sm-1-3 pure-pad-r">
182184
<img src="wp-content/Icon_Homepage_Java and IMS.svg" alt="" class="icon icon-lg icon-invert">
183185
<h3>Java</h3>
184186
<p>
@@ -207,44 +209,46 @@ <h3>IMS Transaction Manager</h3>
207209
</section>
208210

209211
<!-- =========================== Engage =========================== -->
210-
<section class="engage-home-bg white-bg pure-g">
211-
<div class="pure-u-1 pure-u-md-1-3 section-header">
212-
<h2>Engage</h2>
213-
<h3>Stay engaged with the IMS team and other customers.</h3>
214-
</div>
215-
<div class="pure-u-1 pure-u-md-2-3">
216-
<div class="pure-g pure-g-pad">
217-
<div class="pure-u-1 pure-u-sm-1-3">
218-
<img src="wp-content/icons/icon_engage.svg" alt="" class="icon icon-lg icon-invert">
219-
<h3>IMS Gold</h3>
212+
<div class="engage-home-bg white-bg">
213+
<section class="blur-bg pure-g">
214+
<div class="pure-u-1 pure-u-md-1-3 section-header">
215+
<h2>Engage</h2>
216+
<h3>Stay engaged with the IMS team and other customers.</h3>
217+
</div>
218+
<div class="pure-u-1 pure-u-md-2-3">
219+
<div class="pure-g pure-g-pad">
220+
<div class="pure-u-1 pure-u-sm-1-3">
221+
<img src="wp-content/icons/icon_engage.svg" alt="" class="icon icon-lg icon-invert">
222+
<h3>IMS Gold</h3>
223+
<p>
224+
Partner with the IMS development teams to tell us what you think
225+
about IMS features, possible new functions, and more.
226+
</p>
227+
<a href="ims-gold.html" aria-label="Learn more about IMS Gold">Learn more</a>
228+
</div>
229+
<div class="pure-u-1 pure-u-sm-1-3">
230+
<img src="wp-content/Icon_02_IMS GoldPage.svg" alt="" class="icon icon-lg">
231+
<h3>Advocacy and ideas</h3>
220232
<p>
221-
Partner with the IMS development teams to tell us what you think
222-
about IMS features, possible new functions, and more.
233+
Get an IMS advocate at no cost to you. Also, submit ideas to shape the future of IMS.
223234
</p>
224-
<a href="ims-gold.html" aria-label="Learn more about IMS Gold">Learn more</a>
225-
</div>
226-
<div class="pure-u-1 pure-u-sm-1-3">
227-
<img src="wp-content/Icon_02_IMS GoldPage.svg" alt="" class="icon icon-lg">
228-
<h3>Advocacy and ideas</h3>
229-
<p>
230-
Get an IMS advocate at no cost to you. Also, submit ideas to shape the future of IMS.
231-
</p>
232-
<a href="ims-advocacy.html" aria-label="Learn more about IMS advocacy">Learn more</a>
233-
</div>
234-
<div class="pure-u-1 pure-u-sm-1-3">
235-
<img src="wp-content/Icon_Blog_White.svg" alt="" class="icon icon-lg icon-invert">
236-
<h3>Blogs and forums</h3>
237-
<p>
238-
Join the IMS Community and get updates on events, join IMS forums, learn about other IBM Z software products, and more.
239-
</p>
240-
<a target="_blank" rel="noopener noreferrer" aria-label="Learn more about the IMS Community"
241-
href="https://community.ibm.com/community/user/groupz?CommunityKey=eba3ada3-db89-4dca-9154-328195f5e560">
242-
Learn more →
243-
</a>
235+
<a href="ims-advocacy.html" aria-label="Learn more about IMS advocacy">Learn more</a>
236+
</div>
237+
<div class="pure-u-1 pure-u-sm-1-3">
238+
<img src="wp-content/Icon_Blog_White.svg" alt="" class="icon icon-lg icon-invert">
239+
<h3>Blogs and forums</h3>
240+
<p>
241+
Join the IMS Community and get updates on events, join IMS forums, learn about other IBM Z software products, and more.
242+
</p>
243+
<a target="_blank" rel="noopener noreferrer" aria-label="Learn more about the IMS Community"
244+
href="https://community.ibm.com/community/user/groupz?CommunityKey=eba3ada3-db89-4dca-9154-328195f5e560">
245+
Learn more →
246+
</a>
247+
</div>
244248
</div>
245249
</div>
246-
</div>
247-
</section>
250+
</section>
251+
</div>
248252

249253
<!-- =========================== Docs and Support =========================== -->
250254
<section class="dark-gray-bg pure-g">

‎wp-includes/css/page.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,6 @@ h6 {
115115

116116
.dark-gray-bg a {
117117
color: var(--font-light-blue);
118-
font-size: var(--plex-18);
119118
}
120119

121120
.dark-gray-bg h4 {
@@ -159,6 +158,12 @@ h6 {
159158
.learn-home-bg a, .engage-home-bg a {
160159
color: var(--font-dark-blue);
161160
}
161+
162+
/* Blur background */
163+
.blur-bg {
164+
backdrop-filter: blur(6px);
165+
padding: 4em;
166+
}
162167
/* -------------------------------------------------------- */
163168

164169
/* Icons */
@@ -300,6 +305,10 @@ h6 {
300305
padding: 1.2em;
301306
}
302307

308+
.pure-pad-r {
309+
padding: 1.2em 1.2em 1.2em 0em;
310+
}
311+
303312
/* Format column group */
304313
.column-g > div {
305314
padding: 0.2em;
@@ -573,6 +582,16 @@ h6 {
573582
.engage-home-bg {
574583
background-size: cover;
575584
}
585+
586+
/* Blur background */
587+
.blur-bg {
588+
padding: 2em;
589+
}
590+
591+
/* For individual pure grid units requiring paddings */
592+
.pure-pad-r {
593+
padding: 1.2em;
594+
}
576595
}
577596

578597
/* 1024px and below screen sizes */

0 commit comments

Comments
 (0)