-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
94 lines (87 loc) · 4.3 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
<!DOCTYPE html>
<!-- Главная страница -->
<html lang="ru">
<head>
<link rel="stylesheet" href="./assets/css/normalize.css">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="./components/header/header.css">
<link rel="stylesheet" href="./components/footer/footer.css">
<link rel="stylesheet" href="./components/card/card.css">
<link rel="stylesheet" href="./components/preview/preview.css">
<link rel="stylesheet" href="./04-lection2/01-histogram/histogram.css">
<style>
html,body {
height: 100%;
}
.page {
background-color: var(--main);
display: flex;
flex-direction: column;
height: 100%;
}
.page__box {
max-width: 1110px;
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body class="page">
<header class="header">
<div class="page__box">
<h1 class="header__title">Reusable component library</h1>
</div>
</header>
<main class="main">
<div class="page__box preview">
<div class="card">
<div class="card__title">Tooltip</div>
</div>
<div class="card">
<div class="card__title">Custom form elements</div>
</div>
<div class="card">
<div class="card__title">Calendar</div>
</div>
<div class="card">
<div class="card__title">Modal dialog</div>
</div>
<div class="card">
<div class="preview-element">
<div class="histogram">
<div class="histogram__header">
<div>Total orders</div>
<div class="histogram__header-view">View all</div>
</div>
<div class="histogram__header">
<div class="histogram__header-num">50254</div>
</div>
<div class="histogram__columns ten">
<div class="histogram__column" style="height:calc(var(--value-1) * 1px);"></div>
<div class="histogram__column" style="height:calc(var(--value-2) * 1px);"></div>
<div class="histogram__column" style="height:calc(var(--value-3) * 1px);"></div>
<div class="histogram__column" style="height:calc(var(--value-4) * 1px);"></div>
<div class="histogram__column" style="height:calc(var(--value-5) * 1px);"></div>
<div class="histogram__column" style="height:calc(var(--value-6) * 1px);"></div>
<div class="histogram__column" style="height:calc(var(--value-7) * 1px);"></div>
<div class="histogram__column" style="height:calc(var(--value-8) * 1px);"></div>
<div class="histogram__column" style="height:calc(var(--value-9) * 1px);"></div>
<div class="histogram__column" style="height:calc(var(--value-10) * 1px);"></div>
</div>
</div>
<div class="card__title">Histogram</div>
</div>
</div>
<div class="card">
<div class="card__title">Avatar</div>
</div>
</div>
</main>
<footer class="footer">
<div class="page__box"></div>
<h2 class="footer__title">About</h2>
<p class="footer__desc">This project is a collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your projects. Get started by checking out our free preview components, or browsing the PNG previews in the categories you're most curious about.</p>
</div>
</footer>
</body>
</html>