main
Last change
on this file since 118e414 was 2aea0fd, checked in by ElenaMoskova <elena.moskova99@…>, 2 months ago |
init commit Elena
|
-
Property mode
set to
100644
|
File size:
3.0 KB
|
Line | |
---|
1 | <style type="text/css">
|
---|
2 |
|
---|
3 |
|
---|
4 | .banner,
|
---|
5 | .content {
|
---|
6 | display: -webkit-flex;
|
---|
7 | display: flex;
|
---|
8 | -webkit-align-items: center;
|
---|
9 | align-items: center;
|
---|
10 | -webkit-justify-content: center;
|
---|
11 | justify-content: center;
|
---|
12 | }
|
---|
13 |
|
---|
14 |
|
---|
15 | ._s {
|
---|
16 | border-color: #fff #757575 #757575 #fff;
|
---|
17 | border-style: solid;
|
---|
18 | border-width: 1px;
|
---|
19 | box-shadow: -1px -1px 0 0 #dadada, -1px 0 0 0 #dadada, 0 -1px 0 0 #dadada, 1px 1px 0 0 #000, -1px 1px 0 0 #000, 1px -1px 0 0 #000;
|
---|
20 | }
|
---|
21 |
|
---|
22 | .error {
|
---|
23 | height: 200px;
|
---|
24 | background: #c1c1c1;
|
---|
25 | padding: 1px;
|
---|
26 | }
|
---|
27 |
|
---|
28 | .banner {
|
---|
29 | line-height: 20px;
|
---|
30 | height: 20px;
|
---|
31 | padding-left: 8px;
|
---|
32 | color: #fff;
|
---|
33 | background: linear-gradient(left, #04056e, #157cda);
|
---|
34 | background: -webkit-linear-gradient(left, #04056e, #157cda);
|
---|
35 | -webkit-justify-content: space-between;
|
---|
36 | justify-content: space-between;
|
---|
37 | }
|
---|
38 |
|
---|
39 | .close {
|
---|
40 | position: relative;
|
---|
41 | margin: 3px;
|
---|
42 | background: #c1c1c1;
|
---|
43 | height: 14px;
|
---|
44 | width: 16px;
|
---|
45 | cursor: pointer;
|
---|
46 | }
|
---|
47 |
|
---|
48 | .close::before,
|
---|
49 | .close::after {
|
---|
50 | position: absolute;
|
---|
51 | top: 5px;
|
---|
52 | left: 1px;
|
---|
53 | content: "";
|
---|
54 | width: 12px;
|
---|
55 | height: 1px;
|
---|
56 | background: grey;
|
---|
57 | }
|
---|
58 |
|
---|
59 | .close::before {
|
---|
60 | box-shadow: 0 1px 0 #fff;
|
---|
61 | transform: rotate(-45deg);
|
---|
62 | }
|
---|
63 |
|
---|
64 | .close::after {
|
---|
65 | box-shadow: 1px 0 0 #fff;
|
---|
66 | transform: rotate(45deg);
|
---|
67 | }
|
---|
68 |
|
---|
69 | .content {
|
---|
70 | font-size: 14px;
|
---|
71 | padding: 60px;
|
---|
72 | -webkit-flex-wrap: wrap;
|
---|
73 | flex-wrap: wrap;
|
---|
74 | }
|
---|
75 |
|
---|
76 | .redX {
|
---|
77 | position: relative;
|
---|
78 | height: 30px;
|
---|
79 | width: 30px;
|
---|
80 | line-height: 30px;
|
---|
81 | border: 1px solid #000;
|
---|
82 | box-shadow: 2px 2px 0 0 #757575;
|
---|
83 | border-radius: 9rem;
|
---|
84 | background: #ff0004;
|
---|
85 | }
|
---|
86 |
|
---|
87 | .redX::before,
|
---|
88 | .redX::after {
|
---|
89 | position: absolute;
|
---|
90 | top: 13px;
|
---|
91 | left: 5px;
|
---|
92 | content: "";
|
---|
93 | width: 18px;
|
---|
94 | height: 2px;
|
---|
95 | background: #fff;
|
---|
96 | }
|
---|
97 |
|
---|
98 | .redX::before {
|
---|
99 | transform: rotate(-45deg);
|
---|
100 | }
|
---|
101 |
|
---|
102 | .redX::after {
|
---|
103 | transform: rotate(45deg);
|
---|
104 | }
|
---|
105 |
|
---|
106 | .text {
|
---|
107 | text-align: center;
|
---|
108 | }
|
---|
109 |
|
---|
110 | .text {
|
---|
111 | -webkit-flex-grow: 1;
|
---|
112 | flex-grow: 1;
|
---|
113 | padding: 0 14px;
|
---|
114 | width: 242px;
|
---|
115 | }
|
---|
116 |
|
---|
117 | .btn {
|
---|
118 | font-size: 14px;
|
---|
119 | width: 75px;
|
---|
120 | height: 20px;
|
---|
121 | margin-top: 12px;
|
---|
122 | text-align: center;
|
---|
123 | padding: 1px;
|
---|
124 | cursor: pointer;
|
---|
125 | }
|
---|
126 |
|
---|
127 | .dash {
|
---|
128 | border: 1px dotted #000;
|
---|
129 | }
|
---|
130 | </style>
|
---|
131 |
|
---|
132 | <div class="error _s">
|
---|
133 | <div class="banner">
|
---|
134 | 404 - Page Not Found
|
---|
135 | <div class="close _s"></div>
|
---|
136 | </div>
|
---|
137 | <div class="content">
|
---|
138 | <div class="redX"></div>
|
---|
139 | <div class="text">
|
---|
140 | A wild 404-PAGE appeared!
|
---|
141 | </div>
|
---|
142 | <div class="btn _s">
|
---|
143 | <div class="dash">OK</div>
|
---|
144 | </div>
|
---|
145 | </div>
|
---|
146 | </div>
|
---|
Note:
See
TracBrowser
for help on using the repository browser.