Skip to content

Commit 6f5372d

Browse files
hmillersarahhmillersarah
authored
Merge pull request #100 from imsdev/94-responsive-404-page
Responsive 404 page
2 parents 460faa5 + ab82474 commit 6f5372d

File tree

4 files changed

+190
-129
lines changed

4 files changed

+190
-129
lines changed

‎404.html‎

Lines changed: 151 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,153 @@
11
<!DOCTYPE html>
2-
<html lang="en-US" prefix="og: http://ogp.me/ns#">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<!-- v18 basic meta -->
8-
<meta name="geo.country" content="ZZ" />
9-
<meta name="dcterms.rights" content="� Copyright IBM Corp. 2020" />
10-
<meta name="dcterms.date" content="2020-07-18" />
11-
<meta name="keywords" content="IMS Central, IMS Developer, IMS" />
12-
<meta name="robots" content="index, follow" />
13-
<!-- Favicon -->
14-
<link id="favicon"
15-
rel="shortcut icon"
16-
type="image/x-icon"
17-
href="wp-content/IMS_logo_small.png">
18-
19-
<!-- Page Title -->
20-
<title>IMS Central - 404</title>
21-
22-
<!-- Meta -->
23-
<link rel="canonical" href="404.html" />
24-
<meta property="og:locale" content="en_US" />
25-
<meta property="og:type" content="article" />
26-
<meta property="og:title" content="404" />
27-
<meta property="og:description" content="IMS Central Page Not Found" />
28-
<meta property="og:url" content="http://www/imsdev.github.io/404.html" />
29-
<meta property="og:site_name" content="IMS Central" />
30-
<meta property="og:image" content="http://www/imsdev.github.io/wp-content/IMS_logo_large.png" />
31-
<meta name="twitter:card" content="summary" />
32-
<meta name="twitter:description" content="IMS Central Page Not Found" />
33-
<meta name="twitter:title" content="404" />
34-
<meta name="twitter:image" content="http://www/imsdev.github.io/wp-content/IMS_logo_large.png" />
35-
36-
<!-- Sheets -->
37-
<link rel='stylesheet' id='dwboomer-style-css' href='wp-content/themes/boomer-v18/style.css' type='text/css' media='all' />
38-
<link rel='stylesheet' id='dashicons-css' href='wp-includes/css/dashicons.min.css' type='text/css' media='all' />
39-
<link rel='stylesheet' id='pagepost_css-css' href='wp-content/themes/boomer-v18/css/pagepost.css' type='text/css' media='all' />
40-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
41-
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
42-
<link rel="stylesheet" href="wp-includes/css/nav.css">
43-
<link rel="stylesheet" href="wp-includes/css/dropnav.css">
44-
<link href="wp-includes/css/www.css" rel="stylesheet" />
45-
<link href="wp-includes/css/grid-fluid.css" rel="stylesheet">
46-
<link href="wp-includes/css/tables.css" rel="stylesheet">
47-
<link href="wp-includes/css/pages/404.css" rel="stylesheet">
48-
49-
<!-- Hotjar Tracking Code for ibm.com/demos & githhub -->
50-
<script>
51-
(function(h,o,t,j,a,r){
52-
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
53-
h._hjSettings={hjid:132193,hjsv:6};
54-
a=o.getElementsByTagName('head')[0];
55-
r=o.createElement('script');r.async=1;
56-
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
57-
a.appendChild(r);
58-
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
59-
</script>
60-
61-
<!-- Additional styling for content after navigation -->
62-
63-
<link rel="stylesheet" type="text/css" href="wp-includes/css/pure.css">
64-
<link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css">
65-
<link rel="stylesheet" type="text/css" href="wp-includes/css/homepage.css">
66-
<script src="wp-includes/js/jquery.min.js"></script>
67-
68-
<!-- TipueSearch -->
69-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
70-
<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_content.js"></script>
71-
<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_set.js"></script>
72-
<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch.min.js"></script>
73-
74-
<!-- delayed search -->
75-
<script src="jekyll-tipue-search/assets/tipuesearch/delayedsearch.js"></script>
76-
77-
<!-- Web components -->
78-
<script src="web-components/nav-header/nav-header.js" type="module"></script>
79-
<script src="web-components/footer/footer.js" type="module"></script>
80-
81-
</head>
82-
83-
<!-- MASTHEAD_SITENAV_BEGIN -->
84-
<body id="ibm-com" class="ibm-com ibm-type group-blog">
85-
<div class="ibm-landing-page pg-404">
86-
<nav-header></nav-header>
87-
88-
<!-- Additional styling for content after navigation -->
89-
<head>
90-
<link rel="stylesheet" type="text/css" href="wp-includes/css/pure.css">
91-
<link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css">
92-
<link rel="stylesheet" type="text/css" href="wp-includes/css/homepage.css">
93-
</head>
94-
95-
<div id="content" class="site-content">
96-
<div class="content-area" id="content-area">
97-
<div class="entry-content">
98-
<main class="zs-main">
99-
<!-- =========================== IMS Central 404 =========================== -->
100-
<div class="bg-404 main-sec">
101-
<section id="intro-section" class="pure-g zs-section">
102-
<div class="pure-u-3-25">
103-
<img class="ims-card-icon" src="wp-content/404_Error.svg" alt="404: Page not found">
104-
</div>
105-
<div id="intro-info" class="pure-u-1 pure-u-sm-1-2 main-sec-g">
106-
<h1>We<span>&#8217;</span>re sorry!</h1>
107-
<p id="p-style">The page you're looking for might have been moved or deleted.</p>
108-
</div>
109-
<div class="pure-u-8-24">
110-
<h2 class="text-404">404</h2>
111-
</div>
112-
</section>
113-
</div>
114-
115-
<!-- =========================== White Space =========================== -->
116-
<div class="bg-404">
117-
<section class="zs-section">
118-
<div class="pure-u-lg-2-24 w-space"></div>
119-
</section>
120-
</div>
121-
</main>
122-
</div><!-- .entry-content -->
123-
</div><!-- #content -->
124-
</div><!-- end of ibm-content-wrapper -->
125-
</div><!-- #page -->
126-
127-
<!-- Footer -->
128-
<imscentral-footer></imscentral-footer>
129-
</body>
2+
<html lang="en-US">
3+
<head>
4+
<!-- Basic meta -->
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="geo.country" content="ZZ" />
8+
<meta name="dcterms.rights" content="� Copyright IBM Corp. 2020" />
9+
<meta name="dcterms.date" content="2020-07-18" />
10+
<meta name="keywords" content="IMS Central, IMS Developer, IMS" />
11+
<meta name="robots" content="index, follow" />
12+
13+
<!-- Favicon -->
14+
<link
15+
id="favicon"
16+
rel="shortcut icon"
17+
type="image/x-icon"
18+
href="wp-content/IMS_logo_small.png" />
19+
20+
<!-- Page Title -->
21+
<title>IMS Central - 404</title>
22+
23+
<!-- Meta for social media -->
24+
<link rel="canonical" href="404.html" />
25+
<meta property="og:locale" content="en_US" />
26+
<meta property="og:type" content="article" />
27+
<meta property="og:title" content="404" />
28+
<meta property="og:description" content="IMS Central Page Not Found" />
29+
<meta property="og:url" content="http://www/imsdev.github.io/404.html" />
30+
<meta property="og:site_name" content="IMS Central" />
31+
<meta
32+
property="og:image"
33+
content="http://www/imsdev.github.io/wp-content/IMS_logo_large.png" />
34+
<meta name="twitter:card" content="summary" />
35+
<meta name="twitter:description" content="IMS Central Page Not Found" />
36+
<meta name="twitter:title" content="404" />
37+
<meta
38+
name="twitter:image"
39+
content="http://www/imsdev.github.io/wp-content/IMS_logo_large.png" />
40+
41+
<!-- Sheets -->
42+
<!-- Imported styling -->
43+
<link
44+
rel="stylesheet"
45+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
46+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
47+
<!-- Migrated styling -->
48+
<link
49+
rel="stylesheet"
50+
id="dwboomer-style-css"
51+
href="wp-content/themes/boomer-v18/style.css"
52+
type="text/css"
53+
media="all" />
54+
<link href="wp-includes/css/www.css" rel="stylesheet" />
55+
<!-- Pure CSS -->
56+
<link rel="stylesheet" href="wp-includes/css/pure.css" />
57+
<link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css" />
58+
<!-- Custom CSS -->
59+
<link
60+
rel="stylesheet"
61+
type="text/css"
62+
href="wp-includes/css/homepage.css" />
63+
<link rel="stylesheet" href="wp-includes/css/nav.css" />
64+
<link rel="stylesheet" href="wp-includes/css/dropnav.css" />
65+
<link rel="stylesheet" href="wp-includes/css/page.css" />
66+
67+
<link href="wp-includes/css/pages/404.css" rel="stylesheet" />
68+
69+
<!-- Hotjar Tracking Code for ibm.com/demos & githhub -->
70+
<script>
71+
(function (h, o, t, j, a, r) {
72+
h.hj =
73+
h.hj ||
74+
function () {
75+
(h.hj.q = h.hj.q || []).push(arguments);
76+
};
77+
h._hjSettings = { hjid: 132193, hjsv: 6 };
78+
a = o.getElementsByTagName("head")[0];
79+
r = o.createElement("script");
80+
r.async = 1;
81+
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
82+
a.appendChild(r);
83+
})(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
84+
</script>
85+
86+
<!-- TipueSearch -->
87+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
88+
<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_content.js"></script>
89+
<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_set.js"></script>
90+
<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch.min.js"></script>
91+
92+
<!-- delayed search -->
93+
<script src="jekyll-tipue-search/assets/tipuesearch/delayedsearch.js"></script>
94+
95+
<!-- Web components -->
96+
<script
97+
src="web-components/nav-header/nav-header.js"
98+
type="module"></script>
99+
<script
100+
src="web-components/hero-section/hero-section.js"
101+
type="module"></script>
102+
<script src="web-components/footer/footer.js" type="module"></script>
103+
</head>
104+
105+
<!-- MASTHEAD_SITENAV_BEGIN -->
106+
<body id="ibm-com" class="ibm-com ibm-type">
107+
<nav-header></nav-header>
108+
109+
<main id="content" class="main-content page-404">
110+
<!-- =========================== IMS Central 404 =========================== -->
111+
<hero-section
112+
name="We're sorry!"
113+
image="wp-content/404_Error.svg"
114+
section="404"
115+
desc="The page you're looking for might have been moved or deleted.">
116+
</hero-section>
117+
118+
<section class="black-bg section-404">
119+
<h1>404</h1>
120+
</section>
121+
122+
<!-- <div class="bg-404 main-sec">
123+
<section id="intro-section" class="pure-g zs-section">
124+
<div class="pure-u-3-25">
125+
<img
126+
class="ims-card-icon"
127+
src="wp-content/404_Error.svg"
128+
alt="404: Page not found" />
129+
</div>
130+
<div id="intro-info" class="pure-u-1 pure-u-sm-1-2 main-sec-g">
131+
<h1>We<span>&#8217;</span>re sorry!</h1>
132+
<p id="p-style">
133+
The page you're looking for might have been moved or deleted.
134+
</p>
135+
</div>
136+
<div class="pure-u-8-24">
137+
<h2 class="text-404">404</h2>
138+
</div>
139+
</section>
140+
</div> -->
141+
142+
<!-- =========================== White Space =========================== -->
143+
<!-- <div class="bg-404">
144+
<section class="zs-section">
145+
<div class="pure-u-lg-2-24 w-space"></div>
146+
</section>
147+
</div> -->
148+
</main>
149+
150+
<!-- Footer -->
151+
<imscentral-footer></imscentral-footer>
152+
</body>
130153
</html>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@
3232
backdrop-filter: blur(6px);
3333
}
3434

35+
.black-bg {
36+
background-color: #161616;
37+
color: white;
38+
}
39+
3540
section {
3641
/* Button Color */
3742
--btn-prim: #0f62fe;
@@ -93,6 +98,10 @@ h6, p {
9398
font-weight: bold;
9499
}
95100

101+
.hidden {
102+
visibility: hidden;
103+
}
104+
96105
.name {
97106
grid-column: 2;
98107
grid-row: 2;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ function createComponent(html) {
100100

101101
const heroSection = shadow.querySelector('.hero-section');
102102
const hero = shadow.querySelector('.hero');
103+
const subheader = shadow.querySelector('.section');
103104

104105
// Set content
105106
setImage('.image', this.image, shadow);
@@ -164,6 +165,9 @@ function createComponent(html) {
164165
case 'Support':
165166
heroSection.classList.add('learn-bg');
166167
break;
168+
case '404':
169+
heroSection.classList.add('black-bg');
170+
subheader.classList.add('hidden');
167171
}
168172
}
169173
}

‎wp-includes/css/page.css‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ a {
313313
/* Content containers */
314314
/* -------------------------------------------------------- */
315315
/* Targets all sections after hero */
316-
.main-content section:not(:first-child):not(.cta-banner) {
316+
.main-content section:not(:first-child):not(.cta-banner):not(.section-404) {
317317
padding: 4em;
318318
}
319319

@@ -627,6 +627,27 @@ a {
627627
display: block;
628628
}
629629

630+
.page-404 {
631+
height: 100vh;
632+
display: flex;
633+
flex-flow: column nowrap;
634+
}
635+
636+
.section-404 {
637+
display: flex;
638+
flex-flow: column nowrap;
639+
justify-content: start;
640+
align-items: center;
641+
flex-grow: 1;
642+
}
643+
644+
.section-404 h1 {
645+
font-weight: bold !important;
646+
font-size: 15em !important;
647+
color: #8d8d8d;
648+
line-height: 0em !important;
649+
}
650+
630651
/* -------------------------------------------------------- */
631652

632653
/* Media queries */
@@ -646,6 +667,10 @@ a {
646667
.pure-pad-r {
647668
padding: 1.2em 0em;
648669
}
670+
671+
.section-404 h1 {
672+
font-size: 10em !important;
673+
}
649674
}
650675

651676
/* 768px and below screen sizes */

0 commit comments

Comments
 (0)