├── .gitattributes
├── image.png
├── Scarecrow.png
├── devchallenges.png
├── README.md
├── index.html
└── style.css
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ranimbenkerri/404-not-found-page/HEAD/image.png
--------------------------------------------------------------------------------
/Scarecrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ranimbenkerri/404-not-found-page/HEAD/Scarecrow.png
--------------------------------------------------------------------------------
/devchallenges.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ranimbenkerri/404-not-found-page/HEAD/devchallenges.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 404-not-found-page
2 | 404 Not Found Page UI made using HTML and CSS.
3 | 
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 404 NOT FOUND
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 404 NOT FOUND
28 |
29 |
30 |
31 |
32 | 
33 |
49 |
50 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Inconsolata";
3 | }
4 |
5 | ul {
6 | padding-left: 24px;
7 | }
8 |
9 | .row {
10 | margin: 50px 0px;
11 | display: flex;
12 | flex-direction: row;
13 | margin-left: auto;
14 | margin-right: auto;
15 | width: 80%;
16 | }
17 |
18 | .main-title {
19 | font-family: 'Space Mono';
20 | font-style: normal;
21 | font-weight: 700;
22 | font-size: 64px;
23 | line-height: 95px;
24 | letter-spacing: -0.035em;
25 | /* Gray 1 */
26 | color: #333333;
27 | }
28 |
29 | .title {
30 | font-family: 'Inconsolata';
31 | font-style: normal;
32 | font-weight: 700;
33 | font-size: 24px;
34 | line-height: 25px;
35 | text-transform: uppercase;
36 | margin: 10px 30px;
37 | color: #333333;
38 | }
39 |
40 | img {
41 | width: 60%;
42 | max-width: 500px;
43 | /* min-width: 200px;
44 | */
45 | margin-right: 20px;
46 | margin-left: 20px;
47 | object-fit: contain;
48 | }
49 |
50 | p {
51 | font-family: 'Space Mono';
52 | font-style: normal;
53 | font-weight: 400;
54 | font-size: 24px;
55 | line-height: 36px;
56 | letter-spacing: -0.035em;
57 | /* Gray 2 */
58 | color: #4F4F4F;
59 | }
60 |
61 | button.btn {
62 | /* text style */
63 | font-family: Space Mono;
64 | font-size: 14px;
65 | font-weight: 600;
66 | line-height: 21px;
67 | letter-spacing: -0.035em;
68 | text-align: left;
69 | background: #333333;
70 | color: #fff;
71 | padding: 24px 43px;
72 | cursor: pointer;
73 | display: inline-block;
74 | margin-top: 40px;
75 | margin-bottom: 20px;
76 | -webkit-transition: all 0.6s;
77 | -moz-transition: all 0.3s;
78 | transition: all 0.2s;
79 | }
80 |
81 | button.btn:hover {
82 | background-color: white;
83 | color: black;
84 | -webkit-transition: all 0.4s;
85 | -moz-transition: all 0.4s;
86 | transition: all 0.4s;
87 | }
88 |
89 | .copyright {
90 | margin-bottom: 20px;
91 | font-size: 15px;
92 | font-weight: 700;
93 | text-align: center;
94 | line-height: 22px;
95 | color: #808080;
96 | }
97 |
98 | @media (max-width:1050px) {
99 | .row {
100 | width: 97%;
101 | }
102 | .main-title {
103 | font-size: 65px;
104 | line-height: 75px;
105 | }
106 | p {
107 | font-size: 20px;
108 | }
109 | img {
110 | width: 50%;
111 | }
112 | }
113 |
114 | @media (max-width: 700px) {
115 | .row {
116 | flex-direction: column;
117 | }
118 | img {
119 | width: 90%;
120 | }
121 | .main-title {
122 | font-size: 48px;
123 | line-height: 70px;
124 | }
125 | .title {
126 | font-size: 24px;
127 | }
128 | p {
129 | font-size: 18px;
130 | line-height: 26px;
131 | }
132 | }
--------------------------------------------------------------------------------