API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 19th, 2019
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.07 KB | None | 0 0
raw download clone embed print report
  1. -----------------INDEX---------------------------------------------
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9. <link rel="stylesheet" href="css/bootstrap.min.css">
  10. <link rel="stylesheet" href="css/bootstrap-theme.css">
  11. <link rel="stylesheet" href="css/baguetteBox.min.css">
  12. <link rel="stylesheet" href="css/gallery-grid.css">
  13. <link rel="stylesheet" href="css/styles.css">
  14. <script src="js/jquery-3.3.1.min.js"></script>
  15. <script src="js/baguetteBox.min.js"></script>
  16. <script src="js/popper.min.js"></script>
  17. <script src="js/bootstrap.js"></script>
  18. <title>Index</title>
  19. </head>
  20.  
  21. <body>
  22. <div id="site-container">
  23.  
  24. <div class="site-header__nav">
  25. <nav class="site-nav">
  26. <a href="">Link1</a>
  27. <a href="">Link2</a>
  28. </nav>
  29.  
  30. </div>
  31.  
  32. <div class="container">
  33. <div class="panel-group" id="accordion">
  34. <div class="panel panel-default">
  35. <div class="panel-heading d-flex flex-row">
  36. <div class="profile">
  37. <a href="#MAprofile" role="button" data-toggle="modal">
  38. <img src="img/pic_icon.png" alt="" class="rounded-circle">
  39. </a>
  40. </div>
  41. <div class="flex-column">
  42. <h3 class="panel-title">
  43. <a data-toggle="collapse" data-parent="#accordion" href="#inside">
  44. Matija Almaši
  45. </a> <br>
  46. </h3>
  47. <h5>
  48. <ul>
  49. <li>
  50. <a href="mailto:malmasi@etfos.hr">
  51. malmasi@ferit.hr
  52. </a>
  53. </li>
  54. <li>
  55. Osijek
  56. </li>
  57. </ul>
  58. </h5>
  59. <audio controls>
  60. <source src="audio/sampleaudio.mp3" type="audio/mpeg">
  61. </audio>
  62. </div>
  63. </div>
  64. <div id="inside" class="panel-collapse collapse in">
  65. <div class="panel-body">
  66. <ul>
  67. <li>
  68. <h5>
  69. Grad rođenja: Virovitica
  70. </h5>
  71. </li>
  72. <li>
  73. <h5>
  74. Datum rođenja: 06. 04. 1995.
  75. </h5>
  76. </li>
  77. </ul>
  78. </div>
  79. </div>
  80. <div id="inside" class="panel-collapse collapse in">
  81. <div class="panel-body">
  82. <div class="panel-group" id="accordion1">
  83. <div class="panel">
  84. <div class="panel-heading">
  85. <h4 class="panel-title">
  86. <a data-toggle="collapse" data-parent="#accordion1" href="#inside2">Edukacija</a>
  87. </h4>
  88. </div>
  89. <div id="inside2" class="panel-collapse collapse">
  90. <div class="panel-body">
  91. <ul>
  92. <li>
  93. <h4>
  94. Osnovna škola
  95. </h4>
  96. <p>
  97. Osnovna Škola Braće Radića Pakrac
  98. </p>
  99. </li>
  100. <li>
  101. <h4>
  102. Srednja škola
  103. </h4>
  104. <h5>
  105. Srednja Škola Pakrac
  106. </h5>
  107. <p>
  108. Gimnazija
  109. </p>
  110. </li>
  111. <li>
  112. <h4>
  113. Fakultet
  114. </h4>
  115. <h5>
  116. Fakultet elektrotehnike, računarstva i informacijskih tehnologija Osijek
  117. </h5>
  118. <p>
  119. Stručni studij elektrotehnike, smjer Informatika
  120. </p>
  121. </li>
  122. </ul>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. <div id="inside" class="panel-collapse collapse in">
  130. <div class="panel-body">
  131. <div class="panel-group" id="accordion1">
  132. <div class="panel">
  133. <div class="panel-heading">
  134. <h4 class="panel-title">
  135. <a data-toggle="collapse" data-parent="#accordion1" href="#inside3">Posao</a>
  136. </h4>
  137. </div>
  138. <div id="inside3" class="panel-collapse collapse">
  139. <div class="panel-body">
  140. <ul>
  141. <li>
  142. <h4>
  143. Stručna praksa
  144. </h4>
  145. <p>
  146. Software developer - Mono
  147. </p>
  148. </li>
  149. <li>
  150. <h4>
  151. Hrvatski Telekom d.d.
  152. </h4>
  153. <p>
  154. Agent u pozivnom centru
  155. </p>
  156. </li>
  157. </ul>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <div id="inside" class="panel-collapse collapse in">
  165. <div class="panel-body">
  166. <div class="panel-group" id="accordion1">
  167. <div class="panel">
  168. <div class="panel-heading">
  169. <h4 class="panel-title">
  170. <a data-toggle="collapse" data-parent="#accordion1" href="#inside4">Vještine</a>
  171. </h4>
  172. </div>
  173. <div id="inside4" class="panel-collapse collapse">
  174. <div class="panel-body">
  175. <ul>
  176. <li>
  177. <h4>
  178. Programski jezici
  179. </h4>
  180. <ul>
  181. <li>
  182. C/C++
  183. </li>
  184. <li>
  185. C#
  186. </li>
  187. <li>
  188. Python
  189. </li>
  190. <li>
  191. HTML/CSS/JS
  192. </li>
  193. <li>
  194. PHP
  195. </li>
  196. </ul>
  197. </li>
  198. <li>
  199. <h4>
  200. Jezici
  201. </h4>
  202. <h5>
  203. Engleski jezik
  204. </h5>
  205. <p>
  206. B razina
  207. </p>
  208. </li>
  209. <li>
  210. <h4>
  211. Vozačka dozvola
  212. </h4>
  213. <p>
  214. B kategorija
  215. </p>
  216. </li>
  217. </ul>
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223. <video width="100%" height="100%" controls>
  224. <source src="video/samplevideo.mp4" type="video/mp4">
  225. </video>
  226. </div>
  227. </div>
  228. </div>
  229.  
  230. <div class="panel-group" id="accordion">
  231. <div class="panel panel-default">
  232. <div class="panel-heading d-flex flex-row">
  233. <div class="profile">
  234. <a href="#MAprofile" role="button" data-toggle="modal">
  235. <img src="img/pic_icon.png" alt="" class="rounded-circle">
  236. </a>
  237. </div>
  238. <div class="flex-column">
  239. <h3 class="panel-title">
  240. <a data-toggle="collapse" data-parent="#accordion" href="#inside">
  241. Matija Almaši
  242. </a> <br>
  243. </h3>
  244. <h5>
  245. <ul>
  246. <li>
  247. <a href="mailto:malmasi@etfos.hr">
  248. malmasi@ferit.hr
  249. </a>
  250. </li>
  251. <li>
  252. Osijek
  253. </li>
  254. </ul>
  255. </h5>
  256. <audio controls>
  257. <source src="audio/sampleaudio.mp3" type="audio/mpeg">
  258. </audio>
  259. </div>
  260. </div>
  261. <div id="inside" class="panel-collapse collapse in">
  262. <div class="panel-body">
  263. <ul>
  264. <li>
  265. <h5>
  266. Grad rođenja: Virovitica
  267. </h5>
  268. </li>
  269. <li>
  270. <h5>
  271. Datum rođenja: 06. 04. 1995.
  272. </h5>
  273. </li>
  274. </ul>
  275. </div>
  276. </div>
  277. <div id="inside" class="panel-collapse collapse in">
  278. <div class="panel-body">
  279. <div class="panel-group" id="accordion1">
  280. <div class="panel">
  281. <div class="panel-heading">
  282. <h4 class="panel-title">
  283. <a data-toggle="collapse" data-parent="#accordion1" href="#inside2">Edukacija</a>
  284. </h4>
  285. </div>
  286. <div id="inside2" class="panel-collapse collapse">
  287. <div class="panel-body">
  288. <ul>
  289. <li>
  290. <h4>
  291. Osnovna škola
  292. </h4>
  293. <p>
  294. Osnovna Škola Braće Radića Pakrac
  295. </p>
  296. </li>
  297. <li>
  298. <h4>
  299. Srednja škola
  300. </h4>
  301. <h5>
  302. Srednja Škola Pakrac
  303. </h5>
  304. <p>
  305. Gimnazija
  306. </p>
  307. </li>
  308. <li>
  309. <h4>
  310. Fakultet
  311. </h4>
  312. <h5>
  313. Fakultet elektrotehnike, računarstva i informacijskih tehnologija Osijek
  314. </h5>
  315. <p>
  316. Stručni studij elektrotehnike, smjer Informatika
  317. </p>
  318. </li>
  319. </ul>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. </div>
  325. </div>
  326. <div id="inside" class="panel-collapse collapse in">
  327. <div class="panel-body">
  328. <div class="panel-group" id="accordion1">
  329. <div class="panel">
  330. <div class="panel-heading">
  331. <h4 class="panel-title">
  332. <a data-toggle="collapse" data-parent="#accordion1" href="#inside3">Posao</a>
  333. </h4>
  334. </div>
  335. <div id="inside3" class="panel-collapse collapse">
  336. <div class="panel-body">
  337. <ul>
  338. <li>
  339. <h4>
  340. Stručna praksa
  341. </h4>
  342. <p>
  343. Software developer - Mono
  344. </p>
  345. </li>
  346. <li>
  347. <h4>
  348. Hrvatski Telekom d.d.
  349. </h4>
  350. <p>
  351. Agent u pozivnom centru
  352. </p>
  353. </li>
  354. </ul>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. </div>
  360. </div>
  361. <div id="inside" class="panel-collapse collapse in">
  362. <div class="panel-body">
  363. <div class="panel-group" id="accordion1">
  364. <div class="panel">
  365. <div class="panel-heading">
  366. <h4 class="panel-title">
  367. <a data-toggle="collapse" data-parent="#accordion1" href="#inside4">Vještine</a>
  368. </h4>
  369. </div>
  370. <div id="inside4" class="panel-collapse collapse">
  371. <div class="panel-body">
  372. <ul>
  373. <li>
  374. <h4>
  375. Programski jezici
  376. </h4>
  377. <ul>
  378. <li>
  379. C/C++
  380. </li>
  381. <li>
  382. C#
  383. </li>
  384. <li>
  385. Python
  386. </li>
  387. <li>
  388. HTML/CSS/JS
  389. </li>
  390. <li>
  391. PHP
  392. </li>
  393. </ul>
  394. </li>
  395. <li>
  396. <h4>
  397. Jezici
  398. </h4>
  399. <h5>
  400. Engleski jezik
  401. </h5>
  402. <p>
  403. B razina
  404. </p>
  405. </li>
  406. <li>
  407. <h4>
  408. Vozačka dozvola
  409. </h4>
  410. <p>
  411. B kategorija
  412. </p>
  413. </li>
  414. </ul>
  415. </div>
  416. </div>
  417. </div>
  418. </div>
  419. </div>
  420. <video width="100%" height="100%" controls>
  421. <source src="video/samplevideo.mp4" type="video/mp4">
  422. </video>
  423. </div>
  424. </div>
  425. </div>
  426. </div>
  427.  
  428. <div class="modal fade bd-example-modal-lg show" id="MAprofile" role="dialog">
  429. <div class="modal-dialog">
  430. <div class="modal-content">
  431. <div class="modal-header">
  432. <button type="button" class="close" data-dismiss="modal">
  433. <span aria-hidden="true">&times;</span>
  434. </button>
  435. </div>
  436. <div class="modal-body" id="dynamic-content">
  437. <img src="img/pic.png" class="img-fluid" alt=""/>
  438. </div>
  439. </div>
  440. </div>
  441. </div>
  442. <footer>
  443. ovo je footer
  444. </footer>
  445. </body>
  446. </html>
  447. ------------------------STYLES.CSS---------------------------------------
  448. #site-container{
  449. background-color: lightsalmon;
  450. height:25rem;
  451. }
  452. .site-nav{
  453. text-align: right;
  454. padding-top: 5%;
  455. padding-right: 5%;
  456. letter-spacing: 2px;
  457. font-size: 20px;
  458. font-family: monospace;
  459. }
  460. .site-nav a {
  461. color: black;
  462. }
  463. .container {
  464. margin-top: 250px;
  465.  
  466. }
  467. @media (min-width: 1200px){
  468. .container {
  469. max-width: 1000px;
  470. }
  471. }
  472. .panel-group{
  473.  
  474. margin-top: 20px;
  475. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  476.  
  477. }
  478. footer{
  479. margin-top: 10%;
  480. margin-bottom: 5%;
  481. background-color: whitesmoke;
  482. }
  483. -----------------------------------------GALLERY-GRID.CSS-----------------------------------------
  484. body {
  485. /* background-image: linear-gradient(to top, #ecedee 0%, #eceeef 75%, #e7e8e9 100%);*/
  486. background-color: #e7e8e9;
  487. min-height: 100vh;
  488. font: normal 16px sans-serif;
  489. padding-bottom: 60px;
  490. }
  491.  
  492. .container.gallery-container {
  493. background-color: #fff;
  494. color: #35373a;
  495. min-height: 100vh;
  496. border-radius: 20px;
  497. box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
  498. }
  499.  
  500. .gallery-container h1 {
  501. text-align: center;
  502. margin-top: 70px;
  503. font-family: 'Droid Sans', sans-serif;
  504. font-weight: bold;
  505. }
  506.  
  507. .gallery-container p.page-description {
  508. text-align: center;
  509. max-width: 800px;
  510. margin: 25px auto;
  511. color: #888;
  512. font-size: 18px;
  513. }
  514.  
  515. /* .tz-gallery {
  516. padding: 0 0 0 0;
  517. } */
  518.  
  519. .tz-gallery .lightbox img {
  520. width: auto;
  521. margin-bottom: 30px;
  522. transition: 0.2s ease-in-out;
  523. box-shadow: 0 2px 3px rgba(0,0,0,0.2);
  524. }
  525.  
  526.  
  527. .tz-gallery .lightbox img:hover {
  528. transform: scale(1.05);
  529. box-shadow: 0 8px 15px rgba(0,0,0,0.3);
  530. }
  531.  
  532. .tz-gallery img {
  533. border-radius: 4px;
  534. }
  535.  
  536. .baguetteBox-button {
  537. background-color: transparent !important;
  538. }
  539.  
  540.  
  541. @media(max-width: 768px) {
  542. body {
  543. padding: 0;
  544. }
  545.  
  546. .container.gallery-container {
  547. border-radius: 0;
  548. }
  549. }
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!