404_Examples/Princess.html at master · jw81/404_Examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>404</title>
    <link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
    <style>
      html {
        font-size: 10px;
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        height: 100px;
        margin: 10px;
      }

      h1{
        font: 5em 'Berkshire Swash', Helvetica, sans-serif;
        color: #2b2b2b;
        text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
        text-align: center;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 10px;
      }

      section {
        display: flex;
      }

      article {
        flex: 1 200px;
      }

      article:nth-of-type(2) {
        flex: 3 200px;
        display: flex;
        flex-flow: column;

      }

      article:nth-of-type(2) div {
        flex: 1 100px;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
      }

      button {
        flex: 1;
        margin: 5px;
        font-size: 2em;
        line-height: 1.5;
        max-width: 200px;
        background-color: #008CBA;
        border-radius: 4px;
        border: 2px solid #008CBA;
        transition-duration: 0.4s;
        color: white;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
      }

      button:hover {
        background-color: white;
        color: black;
      }

      img{
        margin: auto;
        height: 500px;
        width: 600px;
      }

    </style>
  </head>
  <body>
    <header>
      <h1>404<br>It looks like the princess is in another castle.</h1>
    </header>

    <section>
      <article>
      </article>

      <article>
        <img src="images/princess_404_800_600.jpg">
        <div>
          <button>Go Back</button>
          <button>Contact Us</button>
        </div>
      </article>

      <article>
      </article>
    </section>
  </body>
</html>