API tools faq
paste
Advertisement
giganciprogramowania

restauracja

giganciprogramowania
Sep 7th, 2021
1,329
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.04 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html lang="pl">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Restauracja</title>
  6.  
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9.  
  10. <link rel="stylesheet" href="style.css" type="text/css" />
  11.  
  12.  
  13.  
  14. </head>
  15.  
  16. <body>
  17.  
  18.  
  19.  
  20. <!--//////////////////////////////MENU////////////////////////////////-->
  21.  
  22. <header>
  23.  
  24.  
  25. <nav>
  26.  
  27. <a class="menu-link" href="#oferta">Oferta</a>
  28. <a class="menu-link" href="#">Dlaczego warto</a>
  29. <a class="menu-link" href="#galeria">Galeria</a>
  30. <a class="menu-link" href="#kontakt">Kontakt</a>
  31.  
  32. </nav>
  33.  
  34.  
  35. </header>
  36.  
  37.  
  38. <!--//////////////////////////////OFERTA////////////////////////////////-->
  39.  
  40. <section id="oferta" >
  41.  
  42. <h1>
  43. Oferta
  44. </h1>
  45. <!--kontener flexbox-->
  46. <div class="kontener">
  47.  
  48.  
  49.  
  50. <div class="potrawa"><h2>
  51. Steki
  52. </h2>
  53. <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fstek.jpg?v=1630502359544">
  54.  
  55. <p>
  56. W restauracji znajdziecie: stek z polędwicy, steki z antrykotu z kością lub bez kości, stek z rostbefu.
  57. </p></div>
  58. <div class="potrawa"><h2>
  59. Burgery
  60. </h2>
  61. <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fburger.jpg?v=1630501812119">
  62. <p>
  63. Nasze Burgery to 100% wołowiny podawane w świeżo pieczonych przez nas bułkach.Ø 19cm posiada 200g. mięsa 100% wołowiny. Ø 12cm. posiada 100g. mięsa 100% wołowiny.
  64. </p></div>
  65. <div class="potrawa"><h2>
  66. Pizza
  67. </h2>
  68. <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
  69. <p>
  70. Marzy Ci się ciepła, świeża, pachnąca pizza? Poprostu przyjdź do nas!
  71. </p></div>
  72.  
  73. <div class="potrawa"><h2>
  74. Pizza
  75. </h2>
  76. <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
  77. <p>
  78. Marzy Ci się ciepła, świeża, pachnąca pizza? Poprostu przyjdź do nas!
  79. </p></div>
  80.  
  81.  
  82. <div class="potrawa"><h2>
  83. Pizza
  84. </h2>
  85. <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
  86. <p>
  87. Marzy Ci się ciepła, świeża, pachnąca pizza? Poprostu przyjdź do nas!
  88. </p></div>
  89.  
  90. <div class="potrawa"><h2>
  91. Pizza
  92. </h2>
  93. <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
  94. <p>
  95. Marzy Ci się ciepła, świeża, pachnąca pizza? Poprostu przyjdź do nas!
  96. </p></div>
  97.  
  98. </div>
  99.  
  100. </section>
  101.  
  102.  
  103. <!--////////////////////////////GALERIA/////////////////////////////////////////-->
  104.  
  105.  
  106.  
  107. <section id="galeria">
  108.  
  109. <h1>
  110. Galeria
  111. </h1>
  112.  
  113. <div class="kontener">
  114.  
  115.  
  116. <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fstek.jpg?v=1630502359544">
  117. <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
  118. <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fburger.jpg?v=1630501812119">
  119. <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
  120.  
  121. <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
  122. <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fburger.jpg?v=1630501812119">
  123. <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fstek.jpg?v=1630502359544">
  124. <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fburger.jpg?v=1630501812119">
  125.  
  126.  
  127.  
  128. </div>
  129.  
  130.  
  131. </section>
  132.  
  133.  
  134.  
  135. <!--//////////////////////////////STOPKA////////////////////////////////-->
  136.  
  137. <footer>
  138.  
  139. <h1>
  140. Kontakt
  141. </h1>
  142.  
  143. <div class="kontener">
  144.  
  145. <div id=kontakt>
  146.  
  147.  
  148. <form >
  149. <fieldset>
  150.  
  151. <legend>
  152. Kontakt
  153. </legend>
  154. <label for="email">E-mail</label><br>
  155. <input id="email" type="email"><br><br>
  156. <label for="uwagi">Twoje pytanie:</label><br>
  157. <textarea id="uwagi" rows="10" cols="40" ></textarea><br><br>
  158. </fieldset>
  159. <input class="button" type="submit" value="Wyślij">
  160. </form>
  161. </div>
  162.  
  163.  
  164. <div id ="mapa">
  165.  
  166.  
  167. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2443.870871723564!2d21.01584251531749!3d52.227563779759855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471eccf1af2ce34d%3A0x406e6aa311edbf6f!2sKrucza%2C%20Warszawa!5e0!3m2!1spl!2spl!4v1584814426947!5m2!1spl!2spl" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
  168. </div>
  169.  
  170. </div>
  171.  
  172.  
  173. </footer>
  174.  
  175.  
  176.  
  177. </body>
  178. </html>
  179.  
  180.  
  181.  
  182. @import url('https://fonts.googleapis.com/css?family=Lato:400,900&display=swap');
  183. * {
  184. margin: 0;/* domyślnie przeglądarka ma ustawione marginesy, zerujemy wszystkie*/
  185.  
  186. }
  187.  
  188. body{
  189.  
  190. font-family: 'Lato', sans-serif;
  191.  
  192. }
  193.  
  194. header{
  195. width:100%;
  196. background-image:url('https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fb54cf89a-9854-4f01-a545-04553711c46c_iii.jpg?v=1630495693697');
  197. background-size: cover;
  198. background-attachment: fixed;
  199. height: 800px;
  200. }
  201.  
  202. nav{
  203. display:flex;
  204. justify-content:flex-end;/*przenosimy nawigację do prawej krawędzi strony*/
  205.  
  206. }
  207.  
  208. .menu-link{
  209.  
  210. font-size:35px;
  211. font-weight:500;
  212. text-decoration:none;
  213. color:white;
  214. padding: 14px 20px;
  215. border-bottom: 2px solid transparent;
  216. transition-duration:0.6s;
  217. }
  218.  
  219. .menu-link:hover{
  220.  
  221. border-bottom: 2px solid #ff5805;
  222. }
  223.  
  224.  
  225. h1{
  226.  
  227. margin:100px 0px;
  228. font-size:35px;
  229. text-align:center;
  230. width:100%;
  231. }
  232.  
  233. h2{
  234. text-align:center;
  235. margin-top:10px;
  236. }
  237.  
  238.  
  239.  
  240. .kontener{
  241.  
  242. display:flex;
  243. justify-content:space-around;
  244. text-align:center;
  245. flex-wrap:wrap;
  246. }
  247.  
  248.  
  249. .info{
  250. margin:30px;
  251. width:200px;
  252. height:200px;
  253. border-radius:150px;
  254. object-fit: cover;
  255. }
  256.  
  257. /*ustawiamy, aby każde pudełko z potrawami posiadało na stronie tyle samo miejsca*/
  258. .potrawa{
  259. flex:1;
  260. }
  261.  
  262. p{
  263. padding:0px 20px 0px 20px;
  264. }
  265.  
  266.  
  267.  
  268.  
  269. .zdj-galeria{
  270.  
  271. margin-top:10px;
  272. width:400px;
  273. height:200px;
  274. object-fit:cover;
  275.  
  276. }
  277.  
  278. .zdj-galeria:hover{
  279.  
  280.  
  281. transform: scale(1.2,1.2);
  282. transition-duration:1s;
  283. }
  284.  
  285.  
  286. footer{
  287.  
  288. width:100%;
  289. background-color: #262626;
  290. margin-top:50px;
  291. }
  292.  
  293. footer h1{
  294. color:white;
  295. padding-top:10px;
  296. margin:0px;
  297. }
  298.  
  299. #kontakt,#mapa{
  300. margin-top:100px;
  301. }
  302.  
  303. form {
  304.  
  305. color:white;
  306. }
  307. form input{
  308.  
  309. width: 330px;
  310. height: 30px;
  311.  
  312. }
  313. textarea{
  314. width: 330px;
  315. resize: none;/*blokujemy możliwość zmiany wielkości przez użytkownika*/
  316.  
  317. }
  318.  
  319. form label{
  320.  
  321. font-size: 18px;
  322. }
  323. fieldset{
  324. text-align:left;
  325. padding:20px;
  326. margin-bottom:10px;
  327.  
  328. }
  329.  
  330. legend{
  331. font-size:30px;
  332. }
  333.  
  334. .button{
  335. width:150px;
  336. height:50px;
  337. background-color: #fa4a0a;
  338. color: white;
  339. padding: 15px 32px;
  340. font-size: 16px;
  341. border-radius: 4px;
  342. transition-duration: 0.4s;
  343. border: 2px solid #fa4a0a;
  344. text-transform:uppercase;
  345. }
  346.  
  347. .button:hover {
  348. background-color: white;
  349. color: black;
  350. }
  351.  
  352.  
  353.  
  354. /*dla małych urządzeń wyświetlamy pozycję w menu pionowo*/
  355. @media screen and (max-width: 768px) {
  356. nav {
  357. flex-direction:column;
  358. align-items: flex-end
  359. }
  360.  
  361. iframe{
  362. width:400px;
  363. }
  364.  
  365. .button{
  366. width:100%;
  367.  
  368. }
  369.  
  370. form input,textarea{
  371. width:250px;
  372. }
  373. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!