-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
136 lines (121 loc) · 6.19 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Small JavaScript Projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="common/general.css">
<link rel="stylesheet" href="blocks/index.css">
</head>
<body>
<div class="wrapper">
<main class="main">
<div class="container">
<div class="main__inner">
<h1 class="main__title">Small JavaScript Projects</h1>
<div class="main__cards cards-block">
<div class="cards-block__column">
<div class="cards-block__item">
<a href="pages/counter.html" class="cards-block__image">
<img src="images/main-page/01.png" alt="Counter">
</a>
<a href="pages/counter.html" class="cards-block__title">Counter</a>
<p class="cards-block__subtitle">Simple counter.
The user can decrement, reset and increment counter
.</p>
</div>
</div>
<div class="cards-block__column">
<div class="cards-block__item">
<a href="pages/reviews.html" class="cards-block__image">
<img src="images/main-page/02.png" alt="Reviews">
</a>
<a href="pages/counter.html" class="cards-block__title">Reviews</a>
<p class="cards-block__subtitle">Reviews block. The user
can scroll horizontally different reviews or get
random content.
</p>
</div>
</div>
<div class="cards-block__column">
<div class="cards-block__item">
<a href="pages/sidebar.html" class="cards-block__image">
<img src="images/main-page/03.png" alt="Sidebar">
</a>
<a href="pages/counter.html"
class="cards-block__title">Sidebar</a>
<p class="cards-block__subtitle">Side menu. The user can
open and close it at any time.
</p>
</div>
</div>
<div class="cards-block__column">
<div class="cards-block__item">
<a href="pages/modal.html" class="cards-block__image">
<img src="images/main-page/04.png" alt="Modal">
</a>
<a href="pages/counter.html"
class="cards-block__title">Modal</a>
<p class="cards-block__subtitle">Modal. Window with
content above the page.</p>
</div>
</div>
<div class="cards-block__column">
<div class="cards-block__item">
<a href="pages/restaurant-menu.html" class="cards-block__image">
<img src="images/main-page/05-1.png" alt="Restaurant Menu">
</a>
<a href="pages/counter.html"
class="cards-block__title">Restaurant Menu</a>
<p class="cards-block__subtitle">Dynamically
displayed restaurant menu and filter buttons with
filtering by category.</p>
</div>
</div>
<div class="cards-block__column">
<div class="cards-block__item">
<a href="pages/countdown.html" class="cards-block__image">
<img src="images/main-page/07.png" alt="Countdown">
</a>
<a href="pages/counter.html"
class="cards-block__title">Countdown</a>
<p class="cards-block__subtitle">Countdown. The user
can find out how much time is left for a certain
date.</p>
</div>
</div>
<div class="cards-block__column">
<div class="cards-block__item">
<a href="pages/lorem-ipsum.html" class="cards-block__image">
<img src="images/main-page/08.png" alt="Lorem Generator">
</a>
<a href="pages/counter.html"
class="cards-block__title">Lorem Generator</a>
<p class="cards-block__subtitle">The user can create a fake Latin text for a selected number of paragraphs. </p>
</div>
</div>
<div class="cards-block__column">
<div class="cards-block__item">
<a href="pages/to-do-list.html" class="cards-block__image">
<img src="images/main-page/05.png"
alt="To Do List">
</a>
<a href="pages/counter.html"
class="cards-block__title">To do list</a>
<p class="cards-block__subtitle">Listing app.
With LocalStorage.</p>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<a class="footer__link" href="https://github.com/zhuk1707/Small_JavaScript_Projects">GitHub</a>
</div>
</footer>
</div>
<script src="scripts/counter.js"></script>
</body>
</html>