API tools faq
paste
Advertisement
Guest User

fdfdfsdfsdf

a guest
Nov 21st, 2019
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.27 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Strona</title>
  6.  
  7. <style>
  8. body{
  9. margin: 0px;
  10. padding: 0px;
  11. }
  12.  
  13. .tytul{
  14. margin-top: 2.5%;
  15. font-size: 40px;
  16. text-align: center;
  17. font-family: Helvetica;
  18. margin-bottom: 2.5%;
  19.  
  20. }
  21. .buttons {
  22.  
  23. height: 60px;
  24. background-color: #f2f2f2;
  25. padding: 0px;
  26. text-align: center;
  27. line-height: 60px;
  28.  
  29.  
  30. }
  31.  
  32. .buttons div {
  33. width: 20%;
  34. float: left;
  35.  
  36.  
  37. }
  38. .buttons div:hover {
  39. background-color: #cccccc;
  40.  
  41. transition: 0.5s;
  42.  
  43.  
  44.  
  45. }
  46. .buttons div:first-child{
  47.  
  48. float: left;
  49.  
  50. }
  51.  
  52. .buttons{
  53.  
  54. background-color: #cccccc;
  55. }
  56. a{
  57.  
  58. text-decoration: none;
  59. font-family: Helvetica;
  60. font-size: 23px;
  61. color: black;
  62. text-transform: none;
  63.  
  64. }
  65.  
  66.  
  67.  
  68.  
  69.  
  70. .zdj1 {
  71. max-width: 80%;
  72. min-width: 80%;
  73. margin-left: 10%;
  74.  
  75.  
  76. }
  77.  
  78. .paragrafy {
  79. margin-top: 5%;
  80.  
  81.  
  82. }
  83.  
  84. .p1 {
  85. min-width: 35%;
  86. max-width: 35%;
  87.  
  88. margin-left: 10%;
  89. float: left;
  90. background-color: darkorange;
  91. line-height: 25px;
  92. min-height: 400px;
  93. margin-top: 2.5%;
  94.  
  95. }
  96. .txt1 {
  97. text-align: center;
  98. font-family: Tahoma, Geneva, sans-serif;
  99. margin-top: 5%;
  100. color: #000000;
  101. text-decoration: none solid rgb(68, 68, 68);
  102. text-transform: none;
  103. color: black;
  104.  
  105. }
  106.  
  107. .txt2{
  108. font-family: Tahoma, Geneva, sans-serif;
  109. line-height: 20px;
  110. margin-top: 5%;
  111. letter-spacing: 2.2px;
  112. word-spacing: 1px;
  113. color: #000000;
  114. font-weight: 400;
  115. text-decoration: none solid rgb(68, 68, 68);
  116. font-style: normal;
  117. font-variant: normal;
  118. text-transform: none;
  119. color: black;
  120. margin: 5%;
  121. }
  122.  
  123. .p2 {
  124. min-width: 35%;
  125. max-width: 35%;
  126.  
  127. margin-left: 10%;
  128. float: left;
  129. line-height: 25px;
  130. background-color: skyblue;
  131. min-height: 400px;
  132. margin-top: 2.5%;
  133.  
  134. }
  135.  
  136. .belka{
  137.  
  138. float: left;
  139. width: 80%;
  140. margin-top: 2.5%;
  141. margin-left: 10%;
  142. background-color: grey;
  143. height: 50px;
  144.  
  145.  
  146. }
  147. .zdj01 {
  148.  
  149. border: solid 2px grey;
  150. min-width: 30%;
  151. max-width: calc(180px + 2.5%);
  152. margin-left: 10%;
  153. line-height: 25px;
  154. margin-top: 5%;
  155. float: left;
  156. padding: 2.5%;
  157. clear: both;
  158. }
  159. .zdj01 div {
  160.  
  161. background-color: green;
  162. width: 60%;
  163. float: right;
  164. }
  165. .zdj02 div {
  166.  
  167. background-color: green;
  168. width: 60%;
  169. float: right;
  170. }
  171. .zdj03 div {
  172.  
  173. background-color: green;
  174. width: 60%;
  175. float: right;
  176. }
  177. .zdj04 div {
  178.  
  179. background-color: green;
  180. width: 60%;
  181. float: right;
  182. }
  183.  
  184.  
  185. .zdj02 {
  186.  
  187. border: solid 2px grey;
  188. min-width: 30%;
  189. max-width: calc(180px + 2.5%);
  190. margin-left: 10%;
  191. line-height: 25px;
  192. margin-top: 5%;
  193. float: left;
  194. padding: 2.5%;
  195.  
  196.  
  197. }
  198. .zdj03 {
  199.  
  200. border: solid 2px grey;
  201. min-width: 30%;
  202. max-width: calc(180px + 2.5%);
  203. margin-left: 10%;
  204. line-height: 25px;
  205. margin-top: 5%;
  206. float: left;
  207. padding: 2.5%;
  208. clear: both;
  209. }
  210. .zdj04 {
  211.  
  212. border: solid 2px grey;
  213. min-width: 30%;
  214. max-width: calc(180px + 2.5%);
  215. margin-left: 10%;
  216. line-height: 25px;
  217. margin-top: 5%;
  218. float: left;
  219. padding: 2.5%;
  220.  
  221.  
  222. }
  223.  
  224.  
  225. .form {
  226.  
  227. float: left;
  228. margin-top: 2.5%;
  229. margin: 0 auto;
  230. margin-left: 10%;
  231. width: 35%;
  232. }
  233.  
  234.  
  235.  
  236. .napis{
  237.  
  238. float: left;
  239. width: 80%;
  240. margin-top: 2.5%;
  241. margin-left: 10%;
  242. font-size: 70px;
  243. color: grey;
  244. text-align: center;
  245.  
  246.  
  247. }
  248.  
  249. .okno1{
  250. line-height: 50px;
  251. min-width: 35%;
  252. max-width: 35%;
  253. }
  254. .okno2{
  255.  
  256. height: 50px;
  257. min-width: 35%;
  258. max-width: 35%;
  259. }
  260.  
  261. .test{
  262. margin-top: 50%;
  263. }
  264.  
  265. .formularz {
  266. min-width: 35%;
  267. max-width: 35%;
  268.  
  269. margin-left: 10%;
  270. float: left;
  271.  
  272. line-height: 25px;
  273. min-height: 400px;
  274. margin-top: 2.5%;
  275. }
  276.  
  277. .ostzdj {
  278. min-width: 35%;
  279. max-width: 35%;
  280. margin: 0 auto;
  281. margin-left: 10%;
  282. float: left;
  283.  
  284. line-height: 25px;
  285. min-height: 400px;
  286. margin-top: 2.5%;
  287. }
  288. @media (max-width: 1200px) {
  289. .napis{
  290.  
  291. float: left;
  292. width: 80%;
  293. margin-top: 2.5%;
  294. margin-left: 10%;
  295. font-size: 70px;
  296. color: grey;
  297. text-align: center;
  298. }
  299. .p1 {
  300. float: none;
  301. margin: 0 auto;
  302. min-width: 70%;
  303. max-width: 70%;
  304. }
  305. .button{
  306.  
  307. height: 40px;
  308. background-color: ghostwhite;
  309. padding: 0px;
  310. text-align: center;
  311. line-height: 40px;}
  312.  
  313. .p2 {
  314. min-width: 70%;
  315. max-width: 70%;
  316. float: none;
  317. margin: 0 auto;
  318. }
  319.  
  320. .zdj01 {
  321. float: none;
  322. min-width: 70%;
  323. max-width: 70%;
  324. margin: 0 auto;
  325. margin-top: 15%;
  326. line-height: 40px;
  327. min-height: 300px;
  328.  
  329. }
  330.  
  331. .zdj02 {
  332. min-width: 70%;
  333. max-width: 70%;
  334. float: none;
  335. width: 80%;
  336. margin: 0 auto;
  337. margin-top: 5%;
  338. line-height: 40px;
  339. min-height: 300px;
  340. }
  341.  
  342. .zdj03 {
  343. float: none;
  344. min-width: 70%;
  345. max-width: 70%;
  346. margin: 0 auto;
  347. margin-top: 5%;
  348. line-height: 40px;
  349. min-height: 300px;
  350.  
  351. }
  352.  
  353. .zdj04 {
  354. min-width: 70%;
  355. max-width: 70%;
  356. float: none;
  357. width: 80%;
  358. margin: 0 auto;
  359. margin-top: 5%;
  360. line-height: 40px;
  361. min-height: 500px;
  362. }
  363.  
  364.  
  365. .zdj1 div {
  366. float: none;
  367.  
  368. }
  369.  
  370.  
  371. }
  372.  
  373.  
  374.  
  375. </style>
  376.  
  377.  
  378.  
  379.  
  380.  
  381. </head>
  382. <body>
  383. <div class="buttons">
  384.  
  385. <div class="button1"><a href="#">HOME</a></div>
  386. <div class="button2"><a href="#">LINK</a></div>
  387. <div class="button3"><a href="#">LINK</a></div>
  388. <div class="button4"><a href="#">LINK</a></div>
  389. <div class="button5"><a href="#">LINK</a></div>
  390. </div>
  391.  
  392. <div class="tytul">SPRAWDZIAN</div>
  393. <img class="zdj1" src= "img/drzewa.jpg">
  394.  
  395.  
  396. <div class="p1">
  397. <p class="txt1" style="font-size: 30px;">Lorem ipsum dolor sit amet.<br><br></p>
  398. <p class="txt2" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a neque a nulla ullamcorper finibus. Proin quis molestie purus. Praesent placerat orci at pulvinar accumsan. Nunc vel porttitor leo, suscipit ornare ligula. Vivamus semper sapien in justo ultrices accumsan. Donec accumsan consequat justo et ullamcorper.<br></p>
  399.  
  400. </div>
  401. <div class="p2">
  402. <p class="txt1" style="font-size: 30px;">Lorem ipsum dolor sit amet.<br><br></p>
  403. <p class="txt2" style="font-size: 20px;">Consectetur adipiscing elit. Vestibulum id enim ut turpis laoreet molestie quis scelerisque tellus. Fusce finibus mauris at diam venenatis blandit. Nunc vel porttitor leo, suscipit ornare ligula. Vivamus semper sapien in justo ultrices accumsan. Donec accumsan consequat justo et ullamcorper.<br></p>
  404. </div>
  405. <div class="belka"></div>
  406.  
  407.  
  408. <div class="zdj01"><img class="zdj001" src="img/img-01.jpg"><div>assadd</div></div>
  409. <div class="zdj02"><img class="zdj001" src="img/img-02.jpg"><div>assadd</div></div>
  410. <div class="zdj03"><img class="zdj001" src="img/img-03.jpg"><div>assadd</div></div>
  411. <div class="zdj04"><img class="zdj001" src="img/img-04.jpg"><div>assadd</div></div>
  412. <div class="napis">KONTAKT</div>
  413.  
  414.  
  415. <div class="formularz"><form class="form" action="mailto:" method="post">
  416.  
  417. <input class="okno1" type="text" name="tytul" placeholder="tytul">
  418. <br>
  419. <input class="okno1" type="text" name="email" placeholder="mail">
  420. <br>
  421. <textarea style="margin-top: 2.5%;" cols="66" rows="10" placeholder="komentarz"> stary </textarea>
  422.  
  423.  
  424.  
  425.  
  426. <br>
  427. <input type="submit" value="slij">
  428. </form></div>
  429. <div class="ostzdj"><img src="img/img-06.jpg"></div>
  430.  
  431.  
  432. </body>
  433. </html>
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!