-
Notifications
You must be signed in to change notification settings - Fork 0
/
homepage.html
163 lines (148 loc) · 8.38 KB
/
homepage.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Recepty</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--pozadie obrazky-->
<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></div>
<div class="bg-image img7"></div>
<div class="bg-image img8"></div>
<div class="bg-image img9"></div>
<div class="bg-image img10"></div>
<div class="bg-image img11"></div>
<div class="bg-image img12"></div>
<div class="bg-image img13"></div>
<div class="bg-image img14"></div>
<div class="bg-text">RECEPTY</div>
<!--navbar-->
<nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-shrink-0 dropstart ms-2 vpravo-zarovnanie profil">
<a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle"></i>
</a>
<ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item" href="#">Prihlásiť sa</a></li>
<li><a class="dropdown-item" href="#">Profil</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Odhlásiť sa</a></li>
</ul>
</div>
<div class="offcanvas offcanvas-start text-bg-dark" data-bs-scroll="true" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">MENU</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
<div class="position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" data-bs-theme="dark">
<form class="p-2 mb-2 bg-dark border-bottom border-dark">
<label>
<input type="search" class="form-control bg-dark" autocomplete="false" placeholder="Search...">
</label>
</form>
</div>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<ul class="list-unstyled mb-0">
<li class="dropdown">
<button type="button" class="btn text-white btn-hover" data-bs-toggle="dropdown" aria-expanded="false">
<span class="d-inline-block bg-success rounded-circle p-1"></span>
Kuchyne
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="recipes.html">mexická</a></li>
<li><a class="dropdown-item" href="recipes.html">čínska</a></li>
<li><a class="dropdown-item" href="recipes.html">slovenská</a></li>
<li><a class="dropdown-item" href="recipes.html">talianská</a></li>
<li><a class="dropdown-item" href="recipes.html">indická</a></li>
<li><a class="dropdown-item" href="recipes.html">grécka</a></li>
<li><a class="dropdown-item" href="recipes.html">španielska</a></li>
<li><a class="dropdown-item" href="recipes.html">francúzska</a></li>
<li><a class="dropdown-item" href="recipes.html">iné...</a></li>
</ul>
</li>
<li class="dropdown">
<button type="button" class="btn text-white btn-hover" data-bs-toggle="dropdown" aria-expanded="false">
<span class="d-inline-block bg-primary rounded-circle p-1"></span>
Jedlá
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="recipes.html">raňajky</a></li>
<li><a class="dropdown-item" href="recipes.html">hlavné jedlá</a></li>
<li><a class="dropdown-item" href="recipes.html">polievky</a></li>
<li><a class="dropdown-item" href="recipes.html">dezerty</a></li>
<li><a class="dropdown-item" href="recipes.html">zdravé</a></li>
<li><a class="dropdown-item" href="recipes.html">večere</a></li>
<li><a class="dropdown-item" href="recipes.html">vegánske</a></li>
<li><a class="dropdown-item" href="recipes.html">iné...</a></li>
</ul>
</li>
<li>
<button type="button" class="btn text-white btn-hover" data-bs-toggle="dropdown" aria-expanded="false">
<span class="d-inline-block bg-info rounded-circle p-1"></span>
Tipy
</button>
</li>
<li>
<button type="button" class="btn text-white btn-hover" data-bs-toggle="dropdown" aria-expanded="false">
<span class="d-inline-block bg-danger rounded-circle p-1"></span>
Obľúbené
</button>
</li>
<li>
<button type="button" class="btn text-white btn-hover" data-bs-toggle="dropdown" aria-expanded="false">
<span class="d-inline-block bg-warning rounded-circle p-1"></span>
Moje recepty
</button>
</li>
<li>
<button type="button" class="btn text-white btn-hover" data-bs-toggle="dropdown" aria-expanded="false">
<span class="d-inline-block bg-secondary rounded-circle p-1"></span>
O nás
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!--odseky textu-->
<main>
<div class="bg-text-secondary bg-text1">1. OBJAVUJTE<br>
<p class="bg-text-secondary-smaller">nové chute, vône, krajiny</p>
</div>
<div class="bg-text-secondary bg-text2">2. ZDOKONAĽUJTE<br>
<p class="bg-text-secondary-smaller">seba, svoje výtvory</p>
</div>
<div class="bg-text-secondary bg-text3">3. VYTVÁRAJTE<br>
<p class="bg-text-secondary-smaller">vlastné recepty</p>
</div>
<div class="bg-text-secondary bg-text4">4. UKLADAJTE<br>
<p class="bg-text-secondary-smaller">si obľúbené jedlá</p>
</div>
<div class="bg-text-secondary bg-text5">5. SLEDUJTE<br>
<p class="bg-text-secondary-smaller">tipy ostatných ľudí</p>
</div>
<div class="bg-text-secondary bg-text6">6. MAJTE<br>
<p class="bg-text-secondary-smaller">radosť z varenia, pečenia</p>
</div>
</main>
</body>
</html>