-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (113 loc) · 7.41 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
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Italianno&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<title>Restauracja Dolce Vita Kraków</title>
</head>
<body class="site-body">
<header class="site-header">
<div class="site-header__blackout blackout"></div>
<nav>
<ul class="site-header__nav nav">
<li class="nav__item"><a class="nav__link" href="#start">Start</a></li>
<li class="nav__item"><a class="nav__link" href="#menu">Menu</a></li>
<li class="nav__item"><a class="nav__link" href="#lokalizacja">Lokalizacja</a></li>
<li class="nav__item"><a class="nav__link" href="#kontakt">Kontakt</a></li>
</ul>
</nav>
<h1 class="site-header__h1 heading heading--h1">Restauracja Dolce Vita</h1>
<a class="site-header__button btn btn--red btn--circle" href="#menu">Menu</a>
</header>
<div class="site-body__social social">
<div class="social__item social__item--X"></div>
<div class="social__item social__item--YouTube"></div>
<div class="social__item social__item--Instagram"></div>
<div class="social__item social__item--Facebook"></div>
</div>
<main>
<section class="site-section" id="start">
<h2 class="heading heading--h2">Start</h2>
<div class="container">
<div class="row">
<p class="col">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni cumque facilis, fuga non, tenetur totam aliquam soluta odio qui amet tempora! Quasi alias officia natus in ipsam? Nemo ea facere natus voluptatem. Repellendus vel numquam saepe maxime delectus, fuga quis optio architecto fugit pariatur cumque, aliquid inventore laudantium libero sit eveniet temporibus voluptatem fugiat minus deserunt est, tempore consequuntur. Sint perferendis laboriosam vero, porro a, ad commodi qui quos eligendi eius expedita mollitia, repudiandae voluptate incidunt. Maxime suscipit veniam maiores, eaque officiis accusamus a cupiditate, soluta dolore beatae ea culpa eligendi autem repudiandae molestiae. Atque sit sed dolorem esse non.</p>
</div>
</div>
</section>
<section class="site-section site-section--bg-color" id="menu">
<h2 class="heading heading--h2 text-color-white">Menu</h2>
<div class="container">
<div class="row">
<div class="col col--md50 col--lg25">
<div class="image-box">
<div class="image-box__image"></div>
<div class="image-box__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non reiciendis quod rem. Minus error animi, saepe illo mollitia aperiam itaque voluptas, quam blanditiis culpa sapiente neque expedita. Iure autem fuga, corporis at totam quae expedita a eum explicabo odit id!</div>
</div>
</div>
<div class="col col--md50 col--lg25">
<div class="image-box">
<div class="image-box__image image-box__image--next"></div>
<div class="image-box__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non reiciendis quod rem. Minus error animi, saepe illo mollitia aperiam itaque voluptas, quam blanditiis culpa sapiente neque expedita. Iure autem fuga, corporis at totam quae expedita a eum explicabo odit id!</div>
</div>
</div>
<div class="col col--md50 col--lg25">
<div class="image-box">
<div class="image-box__image"></div>
<div class="image-box__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non reiciendis quod rem. Minus error animi, saepe illo mollitia aperiam itaque voluptas, quam blanditiis culpa sapiente neque expedita. Iure autem fuga, corporis at totam quae expedita a eum explicabo odit id!</div>
</div>
</div>
<div class="col col--md50 col--lg25">
<div class="image-box">
<div class="image-box__image image-box__image--next"></div>
<div class="image-box__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non reiciendis quod rem. Minus error animi, saepe illo mollitia aperiam itaque voluptas, quam blanditiis culpa sapiente neque expedita. Iure autem fuga, corporis at totam quae expedita a eum explicabo odit id!</div>
</div>
</div>
</div>
</div>
</section>
<section class="site-section" id="lokalizacja">
<h2 class="heading heading--h2">lokalizacja</h2>
<div class="container">
<div class="row">
<div class="col">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2561.121733165141!2d19.94220337681126!3d50.06528181502151!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47165b107de836c9%3A0x13bf250c3e6d5faf!2sPawia%206%2C%2031-154%20Krak%C3%B3w!5e0!3m2!1ses!2spl!4v1706122159625!5m2!1ses!2spl" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</section>
<section class="site-contact" id="kontakt">
<div class=" site-contact__blackout blackout"></div>
<h2 class="heading heading--h2 site-contact__h2">Kontakt</h2>
<div class="container">
<div class="row">
<div class="col">
<form class="form site-contact__form">
<label class="form__label" for="email">Podaj Twój e-mail</label>
<input class="form__item" id= "email" type="email">
<label class="form__label" for="subject">Temat wiadomosci</label>
<input class="form__item" id= "subject">
<label class="form__label" for="message">Tresc wiadomosci</label>
<textarea class="form__item" id="message" cols="15" rows="5"></textarea>
<button class="btn btn--outline" type="submit" >Wyslij</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="row">
<p class="col col--md33">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, veniam.</p>
<p class="col col--md33">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, veniam.</p>
<p class="col col--md33">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, veniam.</p>
</div>
</div>
</footer>
</body>
</html>