Skip to content

Commit 4a5d936

Browse files
hmillersarahhmillersarah
authored
Merge pull request #68 from imsdev/66-responsive-home-page
Responsive home page
2 parents 19b7bb7 + 01a5675 commit 4a5d936

7 files changed

Lines changed: 378 additions & 357 deletions

File tree

‎ims-java.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -184,21 +184,21 @@ <h2>Get demos and code samples</h2>
184184
<div class="pure-u-1 pure-u-lg-1-4">
185185
<h2 >Java can save you time, money, and headaches</h2>
186186
</div>
187-
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4 pure-pad">
187+
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4 pure-g-pad">
188188
<div>
189189
<img src="wp-content/Icon_Cost_Java and IMSPage.svg" alt="" class="icon">
190190
<h3>Cost</h3>
191191
<p>Java processing can be offloaded to specialty engines, which means you just saved some money.</p>
192192
</div>
193193
</div>
194-
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4 pure-pad">
194+
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4 pure-g-pad">
195195
<div>
196196
<img src="wp-content/Icon_Application agility_Java and IMSPage.svg" alt="" class="icon">
197197
<h3 >Application agility</h3>
198198
<p>Choosing Java means you have access to millions of skilled developers who can write IMS applications.</p>
199199
</div>
200200
</div>
201-
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4 pure-pad">
201+
<div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-4 pure-g-pad">
202202
<div>
203203
<img src="wp-content/Icon_Co-location_Java and IMSPage.svg" alt="" class="icon">
204204
<h3 >Co-location</h3>

‎index.html‎

Lines changed: 232 additions & 335 deletions
Large diffs are not rendered by default.

‎web-components/nav-header/nav-header.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ <h4>IBM <b>IMS Central</b></h4>
3939
<div>
4040
<h3>Learn</h3>
4141
<a href="ims-videos.html" tabindex="-1">
42-
<h5>IMS videos</h5>
42+
<h5>Videos</h5>
4343
<p>Choose from hundreds of educational videos on IMS components, functions, and tools.</p>
4444
</a>
4545
<a href="ims-education.html" tabindex="-1">
46-
<h5>IMS courses</h5>
46+
<h5>Courses</h5>
4747
<p>Get in-depth IMS education with these self-paced courses and instructor-led classes and earn digital badges.</p>
4848
</a>
4949
<a href="ims-repos.html" tabindex="-1">

‎wp-content/icons/icon_trial.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎wp-content/icons/icon_upgrade.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎wp-includes/css/homepage.css‎

Lines changed: 0 additions & 12 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;
@@ -434,12 +428,6 @@
434428
background-size: cover;
435429
background-position: 35%;
436430
}
437-
.engage-bg-home {
438-
background-image: url(../../wp-content/backgrounds/Innovate_HomepageBG.png);
439-
background-repeat: no-repeat;
440-
background-size: 200%;
441-
background-position: 35% 100%;
442-
}
443431
.engage-bg {
444432
background-image: url(../../wp-content/backgrounds/Engage_HomepageBG.png);
445433
background-repeat: no-repeat;

‎wp-includes/css/page.css‎

Lines changed: 113 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
:root {
44
/* Color */
55
--white: #fff;
6-
--black: #000;
6+
--black: #1c1c1c;
77
--blue: #0f62fe;
88
/* Background Color */
99
--bg-light-gray: #F9F9F9;
@@ -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;
@@ -37,6 +38,12 @@
3738

3839
/* HTML tags */
3940
/* -------------------------------------------------------- */
41+
/* H1 - 48px */
42+
/* H2 - 36px */
43+
/* H3 - 25px */
44+
/* H4 - 22px */
45+
/* p - 18px */
46+
4047
body, body .pure-g, body .pure-g [class*="pure-u"] {
4148
font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
4249
}
@@ -115,14 +122,43 @@ h6 {
115122
font-size: var(--plex-24) !important;
116123
}
117124

125+
.black-bg {
126+
background-color: var(--black);
127+
color: var(--white);
128+
}
129+
118130
.blue-bg {
119131
background-color: var(--bg-dark-blue);
120132
color: var(--white);
121133
}
122134

123-
.blue-bg a {
135+
.blue-bg a, .black-bg a {
124136
color: var(--font-light-blue);
125137
}
138+
139+
/* Homepage backgrounds */
140+
.learn-home-bg {
141+
background-image: url(../../wp-content/backgrounds/Learn_HomepageBG.png);
142+
background-repeat: no-repeat;
143+
background-size: cover;
144+
background-position: 80%;
145+
}
146+
147+
.innovate-home-bg {
148+
background-image: url(../../wp-content/BG02.png);
149+
background-size: cover;
150+
}
151+
152+
.engage-home-bg {
153+
background-image: url(../../wp-content/backgrounds/Innovate_HomepageBG.png);
154+
background-repeat: no-repeat;
155+
background-size: 200%;
156+
background-position: 35% 100%;
157+
}
158+
159+
.learn-home-bg a, .engage-home-bg a {
160+
color: var(--font-dark-blue);
161+
}
126162
/* -------------------------------------------------------- */
127163

128164
/* Icons */
@@ -236,6 +272,10 @@ h6 {
236272
padding-right: 2em;
237273
}
238274

275+
.section-header h3 {
276+
font-weight: normal;
277+
}
278+
239279
/* Targets all section containing card grid (ex. videos, course, etc.) */
240280
.card-section {
241281
padding: 2em 4em !important;
@@ -246,17 +286,17 @@ h6 {
246286
padding-right: 2em;
247287
}
248288

249-
/* For pure grid units requiring paddings */
289+
/* For pure grid units requiring padding */
250290
.pure-g-pad > div {
251291
padding: 1.2em;
252292
}
253-
293+
/* For pure grid units requiring vertical padding only */
254294
.pure-g-pad-v > div {
255295
padding: 2em 4em 2em 0em;
256296
}
257297

258298
/* For individual pure grid units requiring paddings */
259-
.pure-pad > div {
299+
.pure-pad {
260300
padding: 1.2em;
261301
}
262302

@@ -401,9 +441,36 @@ h6 {
401441

402442
.gif-video:hover {
403443
opacity: 1;
444+
transform: scale(1.03);
404445
}
405446
/* -------------------------------------------------------- */
406447

448+
/* Banner */
449+
/* -------------------------------------------------------- */
450+
.home-banner {
451+
display: flex;
452+
flex-flow: row wrap;
453+
align-items: center;
454+
padding: 1em 2em;
455+
background-color: #0072c3;
456+
}
457+
458+
.home-banner div {
459+
display: flex;
460+
align-items: center;
461+
gap: 1em;
462+
}
463+
464+
.home-banner > div:first-of-type {
465+
margin-right: auto;
466+
}
467+
468+
.home-banner a {
469+
color: var(--white);
470+
font-weight: bold;
471+
font-size: var(--plex-20);
472+
}
473+
407474
/* Custom styling */
408475
/* -------------------------------------------------------- */
409476
/* For links under headers */
@@ -416,6 +483,7 @@ h6 {
416483
height: 0.3125em;
417484
}
418485

486+
/* non-bold h2 header */
419487
.h2-normal {
420488
font-weight: normal;
421489
margin-bottom: 0.2em;
@@ -426,6 +494,24 @@ h6 {
426494
max-width: 43.75em;
427495
padding: 1em;
428496
}
497+
498+
/* Index hero */
499+
.homepage-hero {
500+
display: flex;
501+
flex-flow: row nowrap;
502+
gap: 2em;
503+
align-items: center;
504+
justify-content: center;
505+
}
506+
507+
.homepage-hero h1 {
508+
font-size: var(--plex-48);
509+
line-height: var(--plex-20);
510+
}
511+
512+
.homepage-hero p {
513+
font-size: 16pt;
514+
}
429515
/* -------------------------------------------------------- */
430516

431517
/* Media queries */
@@ -465,6 +551,28 @@ h6 {
465551
.dark-gray-bg h4 {
466552
font-size: var(--plex-20) !important;
467553
}
554+
555+
/* Index hero */
556+
.homepage-hero {
557+
flex-flow: row wrap;
558+
}
559+
560+
.homepage-hero .section-header {
561+
display: flex;
562+
flex-flow: column wrap;
563+
justify-content: center;
564+
align-items: center;
565+
padding-right: 0;
566+
}
567+
568+
.homepage-hero h1 {
569+
font-size: var(--plex-36);
570+
}
571+
572+
/* Homepage backgrounds */
573+
.engage-home-bg {
574+
background-size: cover;
575+
}
468576
}
469577

470578
/* 1024px and below screen sizes */

0 commit comments

Comments
 (0)