-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (78 loc) · 3.48 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Labirintas</title>
</head>
<body style="background-color: green; background-image: url(./bg.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">
<main style="display: inline-block; background-color: white; width: 50%; margin-top: 70px; margin-left: 25%;">
<div style="display: inline-block; width: 100%; margin-bottom: 30px;">
<svg style="float: right; padding: 15px; color: grey;" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg">
<path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path>
</svg>
</div>
<div style="display: inline-block; width: 100%; margin-bottom: 85px;">
<img style="width: 30%; float: left; margin-left: 10%; margin-right: 10%;" src="./labirintas.jpg" alt="Taskas juda per labirinta link rodykles">
<div style="width: 40%; float: left; margin-right: 10%; margin-top: 5%;">
<h1 style="font-size: 170px; margin: 0; line-height: 0.7em; color: green;">404</h1>
<p style="font-size: 20px; line-height: 1.2em; margin-top: 2em; color: green;">Looks like you are in a maze.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi nisi aperiam eius praesentium commodi facilis.</p>
<a style="background-color: green; color: white; text-decoration: none; padding: 20px; padding-right: 40px; padding-left: 40px; display: inline-block; box-shadow: 0 3px 8px -1px limegreen;" href="#">Go back home</a>
</div>
</div>
</main>
</body>
</html>
<!--
TEMPLATE:
stiliaus-savybes-pavadinimas: jos reiksme;
MATAVIMO VIENETAI:
- absoliutines skaitines reiksmes: px, mm, cm, rem, ...
- reliatyvios/proporcines skaitines reiksmes: %, vh, vmax, em, ...
EXTRA:
- tekstines savybes gali buti paveldetos is labiau tevyniu elementu
background-color: red;
color: black;
font-size: 10px;
font-weight: normal;
font-weight: bold;
font-style: normal;
font-style: italic;
font-family: Arial;
text-decoration: none;
text-decoration: underline;
text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;
width: auto;
width: 100%;
height: 100px;
margin: 0; atstumas iki aplinkiniu elementu
margin: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding: 0; elemento issiputimas savyje nuo savo turinio iki elemento krastu
padding: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border-width: 1px;
border-style: solid; vientisa linija
border-style: dotted;
border-style: dashed;
border-color: red;
border: 1px solid red;
border-radius: 0; kampu uzapvalinimas
border-radius: 20px; "stadionas"
border-radius: 20%; "kiausinis"
display: none; elementas visiskai nematomas
display: block; vertikalus deliojimas;
display: inline; elgiasi kaip tekstas;
display: inline-block; mix block+inline;
float: left; priverstinis elemento stumimas pasirinkta kryptimi iki artimiausio kito elemento
float: right;
-->