API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 24th, 2019
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>kolokwium</title>
  5. <link rel="stylesheet" href="style.css">
  6. <meta name="viewport" content="width=device-width"/>
  7. <meta charset="utf-8" />
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  9. </head>
  10.  
  11. <body>
  12. <header class = "app-header"><h1>Nagłówek</h1></header>
  13. <div class = "app-content">
  14.  
  15. <nav class = "nav">
  16. <a href = "index.html">STRONA GŁÓWNA</a>
  17. <a href = "">ax<sup>2</sup> +bx + c </a>
  18. <a href = "">LINK 3</a>
  19. </nav>
  20. <div class = "text-container">
  21. <div class = "header" >PODAJ DANE:</div>
  22. <embed class="embed-style" src="inner.html"></embed>
  23. </div>
  24. <div class = "news">
  25. <div class = "top-news">
  26. News
  27. </div>
  28. <div class = "text-news">
  29. <div>
  30. <span class = "news-elem">Cześć </span><span id = "g-name" class="displayed-data">Dominika</span>
  31. </div>
  32. <div>
  33. <span class = "news-elem">Dzisiaj jest: </span><span id = "g-date" class = "displayed-data"></span>
  34. </div>
  35. <div>
  36. <span class = "news-elem">Godzina: </span><span id = "g-hour" class = "displayed-data"></span>
  37. </div>
  38. <div>
  39. <span class = "news-elem">Przedmiot: </span><span id = "g-subject" class = "displayed-data">TI</span>
  40. </div>
  41. <div>
  42. <span class = "news-elem">Urodziny masz za: </span><span id = "g-birthday" class = "displayed-data"></span>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47.  
  48.  
  49. <footer class = "app-footer">&copy; stopka | 2019</footer>
  50. <script type="text/javascript" src="scriptjs.js"></script>
  51. </body>
  52.  
  53. </html>
  54.  
  55.  
  56. .app-header{
  57. background-color: #ccc;
  58. padding: 20px 0;
  59. text-align: center;
  60. text-transform: uppercase;
  61. }
  62.  
  63. .app-content{
  64. margin-top:15px;
  65. margin-left:auto;
  66. margin-right:auto;
  67. min-height: 64.8vh;
  68. display: flex;
  69. width:94%;
  70. flex-wrap:wrap;
  71. margin-top:8px;
  72. padding: 0px 15px;
  73. min-height: 69.2vh;
  74. font-size:20px;
  75. }
  76.  
  77. .nav{
  78. width:100%;
  79. }
  80.  
  81. .text-news{
  82. border: 3px solid #ccc;
  83. border-top: 0px;
  84. padding: 15px;
  85. }
  86.  
  87. .text-container{
  88. width: 100%;
  89. margin-top:10px 0 10px 0;
  90. border: 1px solid black;
  91. padding: 10px 10px 10px;
  92. }
  93.  
  94. .news{
  95. width: 100%;
  96. margin-bottom: 40px;
  97. margin-top: 10px;
  98. }
  99. .top-news{
  100. height:40px;
  101. width:100%;
  102. background-color:#ccc;
  103. line-height:40px;
  104. text-align:center;
  105. }
  106.  
  107. a{
  108. width: 100%;
  109. background-color: #ccc;
  110. color: black;
  111. text-decoration: none;
  112. text-align: center;
  113. display: block;
  114. padding: 10px 0 10px 0;
  115. margin-top: 10px;
  116. margin-bottom: 10px;
  117. }
  118.  
  119. body{
  120. margin:0px;
  121. overflow-x: hidden;
  122. }
  123.  
  124.  
  125. .navbar{
  126. background-color:red;
  127. }
  128.  
  129.  
  130. .embed-style{
  131. width:100%;
  132. height:300px;
  133. }
  134.  
  135. .app-footer{
  136. position: static;
  137. background-color: #ccc;
  138. text-align: center;
  139. text-size: 26px;
  140. text-transform: uppercase;
  141. padding: 23px;
  142. }
  143.  
  144. @media screen and (min-width: 600px){
  145.  
  146. .app-content{
  147. width:80%;
  148. flex-wrap:nowrap;
  149. padding: 0 15px;
  150. }
  151.  
  152. .news{
  153. width:25%;
  154. }
  155.  
  156. .text-container{
  157. width:41%;
  158. margin-left:2%;
  159. margin-right:2%;
  160. margin-top:0px;
  161. margin-bottom:0px;
  162. }
  163.  
  164. .nav{
  165. width:25%;
  166. }
  167.  
  168. .app-footer{
  169. width: 100%;
  170. bottom: 0;
  171. }
  172. }
  173.  
  174. @media screen and (min-width: 600px) and (max-width: 800px){
  175. .content{
  176. width:90%;
  177. }
  178. }
  179.  
  180.  
  181. ===============
  182.  
  183. .personal-data{
  184. width:110%;
  185. height:30px;
  186. margin:0px 10px 7px;
  187. }
  188.  
  189. .form-style{
  190. display:flex;
  191. width:100%;
  192. flex-wrap:wrap;
  193. }
  194.  
  195. input{
  196. border:1px solid;
  197. padding-left:5px;
  198. outline:none;
  199. }
  200.  
  201. input:focus{
  202. box-shadow: 0px 0px 3px 1px green;
  203. border:none;
  204. }
  205.  
  206. .textarea_style{
  207. width:100%;
  208. margin:5px 0px;
  209. min-height:160px;
  210. }
  211.  
  212. .sub{
  213. margin-top:10px;
  214. text-align:center;
  215. }
  216.  
  217.  
  218. .submit{
  219. background-color: white;
  220. width: 50%;
  221. height:50px;
  222. }
  223.  
  224. @media screen and (min-width:400px){
  225. .personal-data{
  226. width:25%;
  227. margin:0px;
  228. }
  229.  
  230. .form-style{
  231. flex-wrap:no-wrap;
  232. justify-content:space-between;
  233. }
  234. }
  235.  
  236. var out_name = document.getElementById("g-name");
  237. out_name.innerHTML = "Dominika";
  238. var out_subject = document.getElementById("g-subject");
  239. out_subject.innerHTML = "TI";
  240.  
  241. var dateBirt = new Date();
  242. dateBirt.setDate("22");
  243. dateBirt.setMonth("09");
  244. dateBirt.setFullYear("1997");
  245. dateOfBirt(dateBirt);
  246.  
  247. Date.prototype.ddmmyyyy = function(){
  248. var date = new Date();
  249. var dd = date.getDate();
  250. var mm = date.getMonth() + 1;
  251. var yyyy = date.getFullYear();
  252. if(dd < 10) dd = "0" + dd;
  253. if(mm < 10) mm = "0" + mm;
  254. return dd + "-" + mm + "-" + yyyy;
  255. };
  256. Date.prototype.ggmm = function(){
  257. var date = new Date();
  258. var mm = date.getMinutes();
  259. var gg = date.getHours();
  260. if(mm < 10) mm = "0" + mm;
  261. if(gg < 10) gg = "0" + gg;
  262. return gg + ":" + mm;
  263. }
  264. var today = new Date();
  265. var dateToday = document.getElementById("g-date");
  266. var hourToday = document.getElementById("g-hour");
  267. dateToday.innerHTML = today.ddmmyyyy();
  268. hourToday.innerHTML = today.ggmm();
  269.  
  270.  
  271. function dateOfBirt(yourBirthday){
  272. var date = new Date();
  273. var birthdayToDate = new Date(yourBirthday);
  274. var diff = birthdayToDate - date;
  275. var out = document.getElementById("g-birthday");
  276. var amount;
  277. var czyZero;
  278. if(diff < 0){
  279. birthdayToDate.setFullYear(date.getFullYear());
  280. diff = birthdayToDate - date;
  281. if(diff < 0){
  282. var days = 365;
  283. if((date.getYear() + 1) % 4 == 0){
  284. var mm = birthdayToDate.getMonth();
  285. if(mm >= 2){
  286. days = 366;
  287. }
  288. }
  289. czyZero = Math.abs(Math.ceil(diff / (1000 * 3600 * 24)));
  290. amount = days - czyZero;
  291. }else{
  292. amount = Math.abs(Math.ceil(diff / (1000 * 3600 * 24)));
  293. }
  294. }else{
  295. amount = Math.abs(Math.ceil(diff / (1000 * 3600 * 24)));
  296. }
  297. if(czyZero == 0){
  298. out.innerHTML = "DZISIAJ";
  299. }else if(amount == 1){
  300. out.innerHTML = amount + " dzień";
  301. }else{
  302. out.innerHTML = amount + " dni";
  303. }
  304. }
  305. ========
  306.  
  307. window.onload = function (){
  308. document.getElementById("fora").onsubmit = function(){
  309. var a = document.getElementById("A").value;
  310. var b = document.getElementById("B").value;
  311. var c = document.getElementById("C").value;
  312. quadraticFunction(a,b,c);
  313. return false;
  314. }
  315. }
  316.  
  317. function quadraticFunction(a,b,c){
  318. var result = document.getElementById("result");
  319. result.innerHTML = `Dla danych a = ${a}, b = ${b}, c = ${c} \n`;
  320. result.style.color = 'black';
  321. var delta = b*b - 4*a*c;
  322. result.innerHTML = `&Delta; = ${delta}\n`;
  323. if(delta > 0){
  324. var sqrtDelta = Math.sqrt(delta);
  325. var x1 = -b - sqrtDelta;
  326. var x2 = -b + sqrtDelta;
  327. result.innerHTML += `x1 = ${x1}\nx2 = ${x2}`
  328. }
  329. else if(delta == 0){
  330. var x0 = -b - Math.sqrt(delta);
  331. result.innerHTML += `x0 = ${x0}`
  332. }
  333. else{
  334. result.style.color = 'red';
  335. result.innerHTML = `Brak miejsc zerowych!!!`
  336. }
  337. }
  338.  
  339. <!DOCTYPE html>
  340. <html>
  341. <head>
  342. <link rel="stylesheet" href="style2.css">
  343. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  344. <meta charset="utf-8" />
  345. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  346. <script type="text/javascript" src="scriptjs2.js"></script>
  347.  
  348. </head>
  349. <body>
  350. <div style="width:100%">
  351. <form id="fora" method="post">
  352. <div class = "form-style">
  353. <input class = "personal-data" type="number" step="0.0001" id="A" placeholder="A" required>
  354. <input class = "personal-data" type="number" id="B" placeholder="B" required>
  355. <input class = "personal-data" type="number" id="C" placeholder="C" required>
  356. </div>
  357. <div class="sub">
  358. <input id= "subb" class="submit" type="submit" value="Oblicz" >
  359. </div>
  360. </form>
  361. <textarea id="result" class="textarea_style" rows="4" cols="50"></textarea>
  362. </div>
  363. </body>
  364. </html>
  365. ====================================================================================
  366. <!DOCTYPE html>
  367. <html lang="pl">
  368. <head>
  369. <title>LAB1</title>
  370. <meta charset="UTF-8" />
  371. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  372. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  373. <link rel="stylesheet" href="slab1.css" type="text/css" />
  374. </head>
  375. <body>
  376. <div id="app-main">
  377. <header class="app-header"><h1>nagłówek</h1></header>
  378. <div class="app-content">
  379. <nav class="app-links">
  380. <a href="https://drive.google.com/file/d/1sauZQ60jSJdZEhhXlPR204IDRZQ8Xh_P/view" target="_blank">link1</a>
  381. <a href="https://drive.google.com/file/d/1sauZQ60jSJdZEhhXlPR204IDRZQ8Xh_P/view" target="_blank">link2</a>
  382. <a href="https://drive.google.com/file/d/1sauZQ60jSJdZEhhXlPR204IDRZQ8Xh_P/view" target="_blank">link3</a>
  383. </nav>
  384. <div class="app-article">
  385. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  386. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  387. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  388. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  389. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  390. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  391. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  392. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  393. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  394. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  395. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  396. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  397. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  398. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  399. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  400. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  401. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  402. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  403. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  404. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  405. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  406. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  407. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  408. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  409. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  410. ksfa.fJbkjjveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit boris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  411. </div>
  412. <div class="news">
  413. <div class="news-title"><h2>news</h2></div>
  414. <div class="news-content">lorem ipsum lorem ipsum</div>
  415. </div>
  416. </div>
  417. <footer class="app-footer">&copy; | 2019</footer>
  418. </div>
  419. </body>
  420. </html>
  421.  
  422. *{
  423. margin: 0;
  424. padding: 0;
  425. }
  426. .app-header{
  427. background-color: gray;
  428. padding: 100px 0;
  429. }
  430. .app-header h1{
  431. text-align: center;
  432. text-transform: uppercase;
  433. }
  434. .app-content{
  435. margin-left: auto;
  436. margin-right: auto;
  437. display: flex;
  438. flex-wrap: wrap;
  439. }
  440. .app-links{
  441. width: 100%;
  442. margin: 0 15px 0 15px;
  443. }
  444. .app-links a{
  445. width: 100%;
  446. background-color: gray;
  447. color: black;
  448. text-decoration: none;
  449. text-align: center;
  450. display: block;
  451. padding: 10px 0 10px 0;
  452. margin-top: 15px;
  453.  
  454. }
  455. .app-article{
  456. margin-top: 15px;
  457. padding: 0 15px 0 15px;
  458. }
  459.  
  460. .news{
  461. width: 100%;
  462. margin: 15px;
  463. height: auto;
  464. margin-bottom: 50px;
  465. }
  466. .news-title{
  467. background-color: gray;
  468. }
  469. .news-title h2{
  470. text-align: center;
  471. text-transform: uppercase;
  472. }
  473. .news-content{
  474. border: 3px solid gray;
  475. height: 100%;
  476. min-height: 100px;
  477. }
  478. .app-footer{
  479. position: static;
  480. background-color: gray;
  481. text-align: center;
  482. text-size: 26px;
  483. padding: 50px;
  484. }
  485. @media screen and (min-width: 800px){
  486. .app-content{
  487. width: 90%;
  488. flex-wrap: nowrap;
  489. }
  490. .app-links{
  491. width: 25%;
  492. }
  493. .app-article{
  494. width: 50%;
  495. padding: 0;
  496. margin-bottom: 130px;
  497. }
  498. .news{
  499. width: 25%;
  500. margin-bottom: 160px;
  501. }
  502.  
  503. .app-footer{
  504. width: 100%;
  505. position: fixed;
  506. bottom: 0;
  507. }
  508. }
  509. ===========================================================================
  510. <!DOCTYPE html>
  511. <html lang="pl">
  512. <head>
  513. <title>LAB1</title>
  514. <meta charset="UTF-8" />
  515. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  516. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  517. <link rel="stylesheet" href="slab2.css" type="text/css" />
  518. </head>
  519. <body>
  520. <div id="app-main">
  521. <header class="app-header"><h1>nagłówek</h1></header>
  522. <div class="app-content">
  523. <nav class="app-links">
  524. <a href="https://drive.google.com/file/d/1sauZQ60jSJdZEhhXlPR204IDRZQ8Xh_P/view" target="_blank">link1</a>
  525. <a href="https://drive.google.com/file/d/1sauZQ60jSJdZEhhXlPR204IDRZQ8Xh_P/view" target="_blank">link2</a>
  526. <a href="https://drive.google.com/file/d/1sauZQ60jSJdZEhhXlPR204IDRZQ8Xh_P/view" target="_blank">link3</a>
  527. </nav>
  528. <div class="app-article">
  529. <div class="article-title"><h2>Podaj dane:</h2></div>
  530. <div class="input-fields">
  531. <input type="text" class="field" placeholder="name" id="name" />
  532. <input type="text" class="field" placeholder="subject" id="subject" />
  533. <input type="text" class="field" onfocus="(this.type = 'date')" onfocusout = "(this.type = 'text')" placeholder="date of birthday" id="birth" />
  534. </div>
  535. </div>
  536. <div class="news">
  537. <div class="news-title"><h2>news</h2></div>
  538. <div class="news-content">
  539. <div class="text-field-pl">Cześć: <span class="field-out" id="g-name"></span></div>
  540. <div class="text-field-pl">Dzisiaj jest: <span class="field-out" id="g-date"></span></div>
  541. <div class="text-field-pl">Godzina: <span class="field-out" id="g-hour"></span></div>
  542. <div class="text-field-pl">Przedmiot: <span class="field-out" id="g-subject"></span></div>
  543. <div class="text-field-pl">Urodziny masz za: <span class="field-out" id="g-birthday"></span></div>
  544. </div>
  545. </div>
  546. </div>
  547. <footer class="app-footer">&copy; | 2019</footer>
  548. </div>
  549. <script type="text/javascript" src="scriptjs.js"></script>
  550. </body>
  551. </html>
  552.  
  553.  
  554. *{
  555. margin: 0;
  556. padding: 0;
  557. }
  558. .app-header{
  559. background-color: gray;
  560. padding: 100px 0;
  561. }
  562. .app-header h1{
  563. text-align: center;
  564. text-transform: uppercase;
  565. }
  566. .app-content{
  567. margin-left: auto;
  568. margin-right: auto;
  569. display: flex;
  570. flex-wrap: wrap;
  571. }
  572. .app-links{
  573. width: 100%;
  574. margin: 0 15px 0 15px;
  575. }
  576. .app-links a{
  577. width: 100%;
  578. background-color: gray;
  579. color: black;
  580. text-decoration: none;
  581. text-align: center;
  582. display: block;
  583. padding: 10px 0 10px 0;
  584. margin-top: 15px;
  585.  
  586. }
  587. .app-article{
  588. margin: 15px 15px 0 15px;
  589. padding: 0 15px 0 15px;
  590. border: 1px solid black;
  591. }
  592.  
  593. .news{
  594. width: 100%;
  595. margin: 15px;
  596. height: auto;
  597. margin-bottom: 20px;
  598. }
  599. .news-title{
  600. background-color: gray;
  601. }
  602. .news-title h2{
  603. text-align: center;
  604. text-transform: uppercase;
  605. }
  606. .news-content{
  607. border: 3px solid gray;
  608. min-height: 60px;
  609. padding: 10px;
  610. display: block;
  611. }
  612. .app-footer{
  613. position: static;
  614. background-color: gray;
  615. text-align: center;
  616. text-size: 26px;
  617. padding: 50px;
  618. }
  619. .article-title{
  620. margin-left: 15px;
  621. margin-top: 15px;
  622. }
  623. .input-fields{
  624. width: 100%;
  625. display:flex;
  626. flex-wrap:wrap;
  627. }
  628. .field{
  629. width:100%;
  630. height:30px;
  631. margin:0px 10px 7px;
  632. }
  633. input{
  634. border: 1px solid;
  635. padding-left: 5px;
  636. outline: none;
  637. }
  638. input:focus{
  639. box-shadow: 0px 0px 3px 1px pink;
  640. border: none;
  641. }
  642. .text-field-pl{
  643. font-weight: bold;
  644. }
  645. @media screen and (min-width: 800px){
  646. .app-content{
  647. width: 90%;
  648. flex-wrap: nowrap;
  649. }
  650. .app-links{
  651. width: 25%;
  652. }
  653. .app-article{
  654. width: 50%;
  655. padding: 0;
  656. margin-bottom: 50px;
  657. }
  658. .news{
  659. width: 25%;
  660. margin-bottom: 160px;
  661. }
  662. .app-footer{
  663. width: 100%;
  664. position: fixed;
  665. bottom: 0;
  666. }
  667. .input-fields{
  668. flex-wrap:nowrap;
  669. justify-content:space-between;
  670. }
  671. .field{
  672. height:30px;
  673. margin:0px 10px 7px;
  674.  
  675. }
  676. }
  677.  
  678. document.getElementById("name").addEventListener("change", function(){
  679. var in_name = document.getElementById("name");
  680. var out_name = document.getElementById("g-name");
  681. out_name.innerHTML = in_name.value;
  682. });
  683. document.getElementById("subject").addEventListener("change", function(){
  684. var in_subject = document.getElementById("subject");
  685. var out_subject = document.getElementById("g-subject");
  686. out_subject.innerHTML = in_subject.value;
  687. });
  688. Date.prototype.ddmmyyyy = function(){
  689. var date = new Date();
  690. var dd = date.getDate();
  691. var mm = date.getMonth() + 1;
  692. var yyyy = date.getFullYear();
  693. if(dd < 10) dd = "0" + dd;
  694. if(mm < 10) mm = "0" + mm;
  695. return dd + "-" + mm + "-" + yyyy;
  696. };
  697. Date.prototype.ggmm = function(){
  698. var date = new Date();
  699. var mm = date.getMinutes();
  700. var gg = date.getHours();
  701. if(mm < 10) mm = "0" + mm;
  702. if(gg < 10) gg = "0" + gg;
  703. return gg + ":" + mm;
  704. }
  705. var today = new Date();
  706. var dateToday = document.getElementById("g-date");
  707. var hourToday = document.getElementById("g-hour");
  708. dateToday.innerHTML = today.ddmmyyyy();
  709. hourToday.innerHTML = today.ggmm();
  710.  
  711. document.getElementById("birth").addEventListener("change", function(){
  712. var date = new Date();
  713. var yourBirthday = document.getElementById("birth").value;
  714. var birthdayToDate = new Date(yourBirthday);
  715. var diff = birthdayToDate - date;
  716. var out = document.getElementById("g-birthday");
  717. var amount;
  718. var czyZero;
  719. if(diff < 0){
  720. birthdayToDate.setFullYear(date.getFullYear());
  721. diff = birthdayToDate - date;
  722. if(diff < 0){
  723. var days = 365;
  724. if((date.getYear() + 1) % 4 == 0){
  725. var mm = birthdayToDate.getMonth();
  726. if(mm >= 2){
  727. days = 366;
  728. }
  729. }
  730. czyZero = Math.abs(Math.ceil(diff / (1000 * 3600 * 24)));
  731. amount = days - czyZero;
  732. }else{
  733. amount = Math.abs(Math.ceil(diff / (1000 * 3600 * 24)));
  734. }
  735. }else{
  736. amount = Math.abs(Math.ceil(diff / (1000 * 3600 * 24)));
  737. }
  738. if(czyZero == 0){
  739. out.innerHTML = "DZISIAJ";
  740. }else if(amount == 1){
  741. out.innerHTML = amount + " dzień";
  742. }else{
  743. out.innerHTML = amount + " dni";
  744. }
  745. });
  746. ========================================================================================================
  747.  
  748. <!DOCTYPE html>
  749. <html lang="pl">
  750. <head>
  751. <title>LAB1</title>
  752. <meta charset="UTF-8" />
  753. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  754. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  755. <link rel="stylesheet" href="slab3.css" type="text/css" />
  756. </head>
  757. <body>
  758. <div id="app-main">
  759. <header class="app-header"><h1>nagłówek</h1></header>
  760. <div class="app-content">
  761. <div class="news">
  762. <div class="news-title"><h2>news</h2></div>
  763. <div class="news-content">
  764. <div class="text-field-pl">Cześć: <span class="field-out" id="g-name"></span></div>
  765. <div class="text-field-pl">Dzisiaj jest: <span class="field-out" id="g-date"></span></div>
  766. <div class="text-field-pl">Godzina: <span class="field-out" id="g-hour"></span></div>
  767. <div class="text-field-pl">Przedmiot: <span class="field-out" id="g-subject"></span></div>
  768. <div class="text-field-pl">Urodziny masz za: <span class="field-out" id="g-birthday"></span></div>
  769. </div>
  770. <div class="result-table">
  771. <h3>wyniki</h3>
  772. <div id="result"></div>
  773. </div>
  774. </div>
  775. <div class="app-article">
  776. <div class="article-title"><h2>Podaj dane:</h2></div>
  777. <div class="input-fields">
  778. <input type="text" class="field" placeholder="a" id="a" />
  779. <input type="text" class="field" placeholder="b" id="b" />
  780. <input type="text" class="field" placeholder="c" id="c" />
  781. </div>
  782. <div class="button">
  783. <input type="submit" class="btn" value="OBLICZ" id="btn_id" onclick="oblicz()"/>
  784. </div>
  785. </div>
  786. <nav class="app-links">
  787. <a href="lab3.html">STRONA GŁÓWNA</a>
  788. <a href="https://drive.google.com/file/d/1sauZQ60jSJdZEhhXlPR204IDRZQ8Xh_P/view" target="_blank">ax<sup>2</sup> + bx + c = 0</a>
  789. <a href="https://drive.google.com/file/d/1sauZQ60jSJdZEhhXlPR204IDRZQ8Xh_P/view" target="_blank">LINK 3</a>
  790. </nav>
  791. </div>
  792. <footer class="app-footer">&copy; | 2019</footer>
  793. </div>
  794. <script type="text/javascript" src="scriptjs3.js"></script>
  795. </body>
  796. </html>
  797.  
  798. *{
  799. margin: 0;
  800. padding: 0;
  801. }
  802. .app-header{
  803. background-color: #ccc;
  804. padding: 100px 0;
  805. }
  806. .app-header h1{
  807. text-align: center;
  808. text-transform: uppercase;
  809. }
  810. .app-content{
  811. margin-left: auto;
  812. margin-right: auto;
  813. display: flex;
  814. flex-wrap: wrap;
  815. }
  816. .app-links{
  817. width: 100%;
  818. margin: 0 15px 0 15px;
  819. }
  820. .button{
  821. margin: 10px;
  822. }
  823. .btn{
  824. width: 50%;
  825. padding: 15px;
  826. background-color: white;
  827. display: block;
  828. margin: auto;
  829. }
  830. .app-links a{
  831. width: 100%;
  832. background-color: #ccc;
  833. color: black;
  834. text-decoration: none;
  835. text-align: center;
  836. display: block;
  837. padding: 10px 0 10px 0;
  838. margin-top: 15px;
  839. margin-bottom: 15px;
  840.  
  841. }
  842. .app-links a:hover{
  843. background-color: #bbb;
  844. }
  845. .app-article{
  846. margin: 15px 15px 0 15px;
  847. padding: 0 15px 0 15px;
  848. }
  849.  
  850. .news{
  851. width: 100%;
  852. margin: 15px;
  853. height: auto;
  854. margin-bottom: 20px;
  855. }
  856. .news-title{
  857. background-color: #ccc;
  858. }
  859. .news-title h2{
  860. text-align: center;
  861. text-transform: uppercase;
  862. }
  863. .news-content{
  864. border: 3px solid #ccc;
  865. min-height: 60px;
  866. padding: 10px;
  867. display: block;
  868. }
  869. .result-table{
  870. margin-top: 15px;
  871. margin-bottom: 15px;
  872. border: 3px solid #ccc;
  873. min-height: 70px;
  874. padding: 10px;
  875. }
  876. .app-footer{
  877. position: static;
  878. background-color: #ccc;
  879. text-align: center;
  880. text-size: 26px;
  881. padding: 10px;
  882. }
  883. .article-title{
  884. margin-left: 15px;
  885. margin-top: 15px;
  886. }
  887. .input-fields{
  888. width: 100%;
  889. display:flex;
  890. flex-wrap:wrap;
  891. margin-top: 10px;
  892. }
  893. .field{
  894. width:100%;
  895. height:30px;
  896. margin:0px 10px 7px;
  897. }
  898. .input-fields input{
  899. border: 1px solid;
  900. padding-left: 5px;
  901. outline: none;
  902. }
  903. .input-fields input:focus{
  904. box-shadow: 0px 0px 3px 1px pink;
  905. border: none;
  906. }
  907. .button input{
  908. border: 1px solid;
  909. outline: none;
  910. }
  911. .button input:hover{
  912. box-shadow: 0px 0px 3px 1px pink;
  913. border: none;
  914. }
  915. .text-field-pl{
  916. font-weight: bold;
  917. }
  918. @media screen and (min-width: 800px){
  919. .app-content{
  920. width: 90%;
  921. flex-wrap: nowrap;
  922. }
  923. .app-links{
  924. width: 25%;
  925. }
  926. .app-article{
  927. width: 50%;
  928. padding: 0;
  929. margin-bottom: 50px;
  930. margin-top: 0;
  931. }
  932. .news{
  933. width: 25%;
  934. }
  935. .app-footer{
  936. width: 100%;
  937. position: fixed;
  938. bottom: 0;
  939. }
  940. .input-fields{
  941. flex-wrap:nowrap;
  942. justify-content:space-between;
  943. }
  944. .field{
  945. height:30px;
  946. margin:0px 10px 7px;
  947.  
  948. }
  949. .result-table{
  950. margin-bottom: 0;
  951.  
  952. }
  953. }
  954.  
  955. var out_name = document.getElementById("g-name");
  956. out_name.innerHTML = "Dominika";
  957. var out_subject = document.getElementById("g-subject");
  958. out_subject.innerHTML = "TI";
  959.  
  960. var dateBirt = new Date();
  961. dateBirt.setDate("22");
  962. dateBirt.setMonth("09");
  963. dateBirt.setFullYear("1997");
  964. dateOfBirt(dateBirt);
  965.  
  966. Date.prototype.ddmmyyyy = function(){
  967. var date = new Date();
  968. var dd = date.getDate();
  969. var mm = date.getMonth() + 1;
  970. var yyyy = date.getFullYear();
  971. if(dd < 10) dd = "0" + dd;
  972. if(mm < 10) mm = "0" + mm;
  973. return dd + "-" + mm + "-" + yyyy;
  974. };
  975. Date.prototype.ggmm = function(){
  976. var date = new Date();
  977. var mm = date.getMinutes();
  978. var gg = date.getHours();
  979. if(mm < 10) mm = "0" + mm;
  980. if(gg < 10) gg = "0" + gg;
  981. return gg + ":" + mm;
  982. }
  983. var today = new Date();
  984. var dateToday = document.getElementById("g-date");
  985. var hourToday = document.getElementById("g-hour");
  986. dateToday.innerHTML = today.ddmmyyyy();
  987. hourToday.innerHTML = today.ggmm();
  988.  
  989. function dateOfBirt(yourBirthday){
  990. var date = new Date();
  991. var birthdayToDate = new Date(yourBirthday);
  992. var diff = birthdayToDate - date;
  993. var out = document.getElementById("g-birthday");
  994. var amount;
  995. var czyZero;
  996. if(diff < 0){
  997. birthdayToDate.setFullYear(date.getFullYear());
  998. diff = birthdayToDate - date;
  999. if(diff < 0){
  1000. var days = 365;
  1001. if((date.getYear() + 1) % 4 == 0){
  1002. var mm = birthdayToDate.getMonth();
  1003. if(mm >= 2){
  1004. days = 366;
  1005. }
  1006. }
  1007. czyZero = Math.abs(Math.ceil(diff / (1000 * 3600 * 24)));
  1008. amount = days - czyZero;
  1009. }else{
  1010. amount = Math.abs(Math.ceil(diff / (1000 * 3600 * 24)));
  1011. }
  1012. }else{
  1013. amount = Math.abs(Math.ceil(diff / (1000 * 3600 * 24)));
  1014. }
  1015. if(czyZero == 0){
  1016. out.innerHTML = "DZISIAJ";
  1017. }else if(amount == 1){
  1018. out.innerHTML = amount + " dzień";
  1019. }else{
  1020. out.innerHTML = amount + " dni";
  1021. }
  1022. }
  1023.  
  1024. function oblicz() {
  1025. var result = document.getElementById("result");
  1026. result.style.color = "black";
  1027. var a = document.getElementById("a").value;
  1028. var b = document.getElementById("b").value;
  1029. var c = document.getElementById("c").value;
  1030. var errors = 0;
  1031. result.innerHTML = "";
  1032. if(a == '' || b == '' || c == ''){
  1033. result.innerHTML += "pola nie mogą być puste, ";
  1034. errors++;
  1035. }
  1036. if(isNaN(a) || isNaN(b) || isNaN(c)){
  1037. result.innerHTML += " pola muszą być liczbami";
  1038. errors++;
  1039.  
  1040. }
  1041. if(errors == 0){
  1042. quadraticFunction(a,b,c);
  1043. }
  1044. }
  1045. function quadraticFunction(a, b, c){
  1046. var result = document.getElementById("result");
  1047. result.style.color = "black";
  1048. var delta = b*b - 4*a*c;
  1049. result.innerHTML = `&Delta;` + " = " + `${delta}`;
  1050. if(delta > 0){
  1051. var sqrtDelta = Math.sqrt(delta);
  1052. var x1 = -b - sqrtDelta;
  1053. var x2 = -b + sqrtDelta;
  1054. result.innerHTML += " x1 =" + `${x1}` + " x2 = " + `${x2}`
  1055. }
  1056. else if(delta == 0){
  1057. var x0 = -b - Math.sqrt(delta);
  1058. result.innerHTML += " x0 = " + `${x0}`
  1059. }
  1060. else{
  1061. result.style.color = "blue";
  1062. result.innerHTML = "Brak miejsc zerowych"
  1063. }
  1064.  
  1065. }
  1066.  
  1067. =============================================================================================
  1068.  
  1069. <!DOCTYPE html>
  1070. <html lang="pl">
  1071. <head>
  1072. <title>EGZAMIN</title>
  1073. <meta charset="UTF-8" />
  1074. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  1075. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  1076. <link rel="stylesheet" href="1955.css" type="text/css" />
  1077. </head>
  1078. <body>
  1079. <div id="app-main">
  1080. <header class="app-header">
  1081. <div class="left">
  1082. <img src="kot.png" width="300" height="200"/>
  1083. </div>
  1084. <div class="right">
  1085. <div class="header-menu">
  1086. <div class="option">o nas</div>
  1087. <div class="option">oferta</div>
  1088. <div class="option">last minute</div>
  1089. <div class="option">galeria</div>
  1090. <div class="option">news</div>
  1091. <div class="option">kontakt</div>
  1092. </div>
  1093. <div class="header-title"><h1>tytuł</h1></div>
  1094. </div>
  1095. </header>
  1096. <div class="app-content">
  1097. <nav class="reservations">
  1098. <div class="reservations-title"><h2>rezerwacja</h2></div>
  1099. <div class="reservations-content">ajskndj</div>
  1100. </nav>
  1101. <div class="app-article">
  1102. <div class="title-article"><h1>Witamy</h1></div>
  1103. <div class="article-one">
  1104. <div class="left-a1"><img src="kot.png" width="300" height="200" /></div>
  1105. <div class="right-a1">lorem ipsum lorem ipsorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsuum</div>
  1106. </div>
  1107. <div class="title-article"><h1>Z ostatniej chwili</h1></div>
  1108. <div class="article-two">
  1109. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum1</div>
  1110. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum2</div>
  1111. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum2</div>
  1112. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum2</div>
  1113. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum2</div>
  1114. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum2</div>
  1115. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum2</div>
  1116. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum2</div>
  1117. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum3</div>
  1118. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum3</div>
  1119. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum3</div>
  1120. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum3</div>
  1121. <div class="a2">lorem ipsum loremlorem ipsum loremlorem ipsum loremlorem ipsum lorem ipsum3</div>
  1122. </div>
  1123. </div>
  1124. </div>
  1125. <footer class="app-footer">&copy; nie zdąże w godinę xD</footer>
  1126. </div>
  1127. </body>
  1128. </html>
  1129.  
  1130. *{
  1131. margin: 0;
  1132. padding: 0;
  1133. }
  1134. .app-header{
  1135. background-color: red;
  1136. display: flex;
  1137. flex-wrap: wrap;
  1138. }
  1139. .left{
  1140. height: 200px;
  1141. margin-left: auto;
  1142. margin-right: auto;
  1143. }
  1144. .right{
  1145. width: 100%;
  1146. height: 200px;
  1147. }
  1148. .header-menu{
  1149. width: 100%;
  1150. display: flex;
  1151. justify-content: space-between;
  1152. }
  1153. .option{
  1154. width: 10%;
  1155. border: 3px dotted black;
  1156. text-align: center;
  1157. }
  1158. .header-title{
  1159. text-align: center;
  1160. text-transform: uppercase;
  1161. padding: 70px;
  1162. }
  1163. .app-content{
  1164. width: 100%;
  1165. display: flex;
  1166. flex-wrap: wrap;
  1167. }
  1168. .reservations{
  1169. width: 100%;
  1170. background-color: pink;
  1171. }
  1172. .reservations-content{
  1173. border: 3px dotted black;
  1174. padding: 15px;
  1175. margin: 0 15px 0 15px;
  1176. min-height: 100px;
  1177. }
  1178. .reservations-title{
  1179. background-color: black;
  1180. color: white;
  1181. text-align: center;
  1182. text-transform: uppercase;
  1183. padding: 15px 0 15px 0;
  1184. margin: 15px 15px 0 15px;
  1185. }
  1186. .title-article{
  1187. padding-left: 15px;
  1188. }
  1189. .left-a1{
  1190. margin: 15px;
  1191. }
  1192. .right-a1{
  1193. margin: 15px;
  1194. }
  1195. .article-one{
  1196. display: flex;
  1197. flex-wrap: wrap;
  1198. background-color: blue;
  1199. }
  1200. .article-two{
  1201. display: block;
  1202. width: 100%;
  1203. background-color: yellow;
  1204. }
  1205. .a2{
  1206. border: 3px dotted black;
  1207. margin: 15px 15px 0 15px;
  1208. }
  1209. .app-footer{
  1210. position: static;
  1211. background-color: green;
  1212. padding: 30px;
  1213. text-align: center;
  1214. }
  1215. @media screen and (min-width: 800px){
  1216. .app-header{
  1217. flex-wrap: nowrap;
  1218. }
  1219. .app-content{
  1220. flex-wrap: nowrap;
  1221. margin-bottom: 78px;
  1222. }
  1223. .reservations{
  1224. min-width: 300px;
  1225. }
  1226. .article-one{
  1227. flex-wrap: nowrap;
  1228. }
  1229. .article-two{
  1230. display: grid;
  1231. grid-template-columns: auto auto auto;
  1232. }
  1233. .app-footer{
  1234. width: 100%;
  1235. position: fixed;
  1236. bottom: 0;
  1237. }
  1238.  
  1239. }
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!