API tools faq
paste
Advertisement
Guest User

Halp

a guest
Dec 11th, 2019
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.55 KB | None | 0 0
raw download clone embed print report
  1. HTML
  2.  
  3. <!DOCTYPE html>
  4. <html lang="pl-PL">
  5. <html>
  6. <head>
  7. <meta charset="utf-8" />
  8. <title> Gothicowe poradniki </title>
  9. <link rel="shortcut icon" href="icon.jpg"></link>
  10. <link rel="stylesheet" href="style.css"></link>
  11. </head>
  12. <body>
  13. <div id="strona">
  14. <div class="naglowek"><p> Gothicowe poradniki </p></div>
  15. <nav role="navigation">
  16. <div id="menuToggle">
  17. <input type="checkbox" />
  18.  
  19. <span></span>
  20. <span></span>
  21. <span></span>
  22.  
  23. <ul id="menu">
  24. <a href="index.html"><li>Strona Główna</li></a>
  25. <a href="galeria.html"><li>Galeria</li></a>
  26. <a href="kontakt.html"><li>Kontakt</li></a>
  27. </ul>
  28. </div>
  29. </nav>
  30. <div class="tresc">
  31. <p class="kolumny1" align="center">
  32. Witaj, Podróżniku!
  33. <p>
  34. Słyszałem, że szukasz rozwiązań na różne zagadki. To twój szczęśliwy dzień! Posiadam mapy i obrazy dzięki którym znajdziesz wszystko czego potrzebujesz. Cena? Mam ich tyle, że daję je wszystkim za darmo! Znajdują się na półkach w mojej galerii. Bierz i korzystaj śmiało!
  35. </p>
  36. <p>
  37. Planuję poszerzać swoją galerię o więcej map i obrazów, a ty możesz mi w tym pomóc! Swoje propozycje i zlecenia możesz wysłać za pomocą posłańca na adres podany w zwoju na półce "kontakt".
  38. </p>
  39. <p />
  40. </div>
  41. <div class="stopka">
  42. Coś się nie zgadza? A może masz propozycje następnych zadań do których potrzeba mapy? Zapraszam na stronę "kontakt" abyś mógł mi o tym napisać, a ja postaram się to poprawić/zrobić.
  43. </div>
  44. </div>
  45. </body>
  46. </html>
  47.  
  48. CSS
  49.  
  50. body{background-image:url(tlo4.jpg);
  51. background-repeat:no-repeat;
  52. background-size:100%;
  53. background-attachment:fixed;
  54. margin: 0;
  55. padding: 0;font-family: "Avenir Next", "Avenir", sans-serif;}
  56. #strona{width:1300px;
  57. margin:0 auto;
  58. background-color:#5C3317;}
  59. .naglowek{width:100%;
  60. height:20%;
  61. background-image:url(tlo3.jpg);
  62. background-repeat:no-repeat;}
  63. .naglowek p{text-align:center;
  64. font-size:80px;
  65. line-height:300px;
  66. font-weight:bold;
  67. color:#fff;
  68. text-shadow:5px 5px 5px black;}
  69.  
  70. //Tutaj jest to menu hamburger
  71. #menuToggle
  72. {
  73. display: block;
  74. position: relative;
  75. top: 50px;
  76. left: 50px;
  77.  
  78. z-index: 1;
  79.  
  80. -webkit-user-select: none;
  81. user-select: none;
  82. }
  83.  
  84. #menuToggle a
  85. {
  86. text-decoration: none;
  87. color: #232323;
  88.  
  89. transition: color 0.3s ease;
  90. }
  91.  
  92. #menuToggle a:hover
  93. {
  94. color: tomato;
  95. }
  96.  
  97.  
  98. #menuToggle input
  99. {
  100. display: block;
  101. width: 40px;
  102. height: 32px;
  103. position: absolute;
  104. top: -7px;
  105. left: -5px;
  106.  
  107. cursor: pointer;
  108.  
  109. opacity: 0;
  110. z-index: 2;
  111.  
  112. -webkit-touch-callout: none;
  113. }
  114. #menuToggle span
  115. {
  116. display: block;
  117. width: 33px;
  118. height: 4px;
  119. margin-bottom: 5px;
  120. position: relative;
  121.  
  122. background: #cdcdcd;
  123. border-radius: 3px;
  124.  
  125. z-index: 1;
  126.  
  127. transform-origin: 4px 0px;
  128.  
  129. transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  130. background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  131. opacity 0.55s ease;
  132. }
  133. #menuToggle span:first-child
  134. {
  135. transform-origin: 0% 0%;
  136. }
  137. #menuToggle span:nth-last-child(2)
  138. {
  139. transform-origin: 0% 100%;
  140. }
  141. #menuToggle input:checked ~ span
  142. {
  143. opacity: 1;
  144. transform: rotate(45deg) translate(-2px, -1px);
  145. background: #232323;
  146. }
  147. #menuToggle input:checked ~ span:nth-last-child(3)
  148. {
  149. opacity: 0;
  150. transform: rotate(0deg) scale(0.2, 0.2);
  151. }
  152. #menuToggle input:checked ~ span:nth-last-child(2)
  153. {
  154. transform: rotate(-45deg) translate(0, -1px);
  155. }
  156. #menu
  157. {
  158. position: absolute;
  159. width: 300px;
  160. margin: -100px 0 0 -50px;
  161. padding: 50px;
  162. padding-top: 125px;
  163.  
  164. background: #ededed;
  165. list-style-type: none;
  166. -webkit-font-smoothing: antialiased;
  167.  
  168. transform-origin: 0% 0%;
  169. transform: translate(-100%, 0);
  170.  
  171. transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  172. }
  173.  
  174. #menu li
  175. {
  176. padding: 10px 0;
  177. font-size: 22px;
  178. }
  179. #menuToggle input:checked ~ ul
  180. {
  181. transform: none;
  182. }
  183. .tresc{width:100%;
  184. float:right;
  185. background-color:#660000;
  186. color:white;}
  187. .tresc p{padding:10px;
  188. font-size:20px;}
  189. .tresc .kolumny1{column-count:1;
  190. column-gap:50px;
  191. column-rule:1px dotted #000000;}
  192. .tresc .kolumny2{column-count:2;
  193. column-gap:50px;
  194. column-rule:1px dashed #000000;}
  195. .tresc .kolumny3{column-count:3;
  196. column-gap:50px;
  197. column-rule:1px solid #000000;}
  198. .tresc #srodek{text-align:center;}
  199. .tresc img{box-shadow: 5px 5px 5px red;}
  200. .stopka{clear:both;
  201. width:100%;
  202. height:20%;
  203. background-color:black;
  204. bottom:0;color:white;
  205. text-align:center;}
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!