API tools faq
paste
Advertisement
Domy131097

Untitled

Domy131097
Nov 1st, 2018
198
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.89 KB | None | 0 0
raw download clone embed print report
  1.  
  2. /*-------------------------------------------------------- HEADER --------------------------------------------------------*/
  3. .affix {
  4. top: 0;
  5. width: 100%;
  6. z-index: 9999 !important;
  7. }
  8.  
  9. .affix + .container-fluid {
  10. padding-top: 0px;
  11. }
  12. /*-------------------------------------------------------- NAV BAR --------------------------------------------------------*/
  13. body {
  14. margin: 0;
  15. font-family: Verdana, Geneva, Tahoma, sans-serif;
  16. }
  17.  
  18. .topnav {
  19. overflow: hidden;
  20. background-color: #333;
  21. box-shadow: 0 8px 6px -6px black;
  22. }
  23.  
  24. .topnav a {
  25. float: left;
  26. display: block;
  27. color: #f2f2f2;
  28. text-align: center;
  29. padding: 14px 16px;
  30. text-decoration: none;
  31. font-size: 17px;
  32. }
  33.  
  34. .active {
  35. background-color: #4CAF50;
  36. color: white;
  37. }
  38.  
  39. .topnav .icon {
  40. display: none;
  41. }
  42.  
  43. .dropdown {
  44. float: left;
  45. overflow: hidden;
  46. }
  47.  
  48. .dropdown .dropbtn {
  49. font-size: 17px;
  50. border: none;
  51. outline: none;
  52. color: white;
  53. padding: 14px 16px;
  54. background-color: inherit;
  55. font-family: inherit;
  56. margin: 0;
  57. }
  58.  
  59. .dropdown-content {
  60. display: none;
  61. position: absolute;
  62. background-color: #f9f9f9;
  63. min-width: 160px;
  64. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  65. z-index: 1;
  66. position: fixed;
  67. }
  68.  
  69. .dropdown-content a {
  70. float: none;
  71. color: black;
  72. padding: 12px 16px;
  73. text-decoration: none;
  74. display: block;
  75. text-align: left;
  76. }
  77.  
  78. .topnav a:hover, .dropdown:hover .dropbtn {
  79. background-color: #ddd;
  80. color: black;
  81. }
  82.  
  83. .dropdown-content a:hover {
  84. background-color: #ddd;
  85. color: black;
  86. }
  87.  
  88. .dropdown:hover .dropdown-content {
  89. display: block;
  90. }
  91.  
  92. @media screen and (max-width: 600px) {
  93. .topnav a:not(:first-child), .dropdown .dropbtn {
  94. display: none;
  95. }
  96. .topnav a.icon {
  97. float: right;
  98. display: block;
  99. }
  100. }
  101.  
  102. @media screen and (max-width: 600px) {
  103. .topnav.responsive {position: relative;}
  104. .topnav.responsive .icon {
  105. position: absolute;
  106. right: 0;
  107. top: 0;
  108. }
  109. .topnav.responsive a {
  110. float: none;
  111. display: block;
  112. text-align: left;
  113. }
  114. .topnav.responsive .dropdown {float: none;}
  115. .topnav.responsive .dropdown-content {position: relative;}
  116. .topnav.responsive .dropdown .dropbtn {
  117. display: block;
  118. width: 100%;
  119. text-align: left;
  120. }
  121. }
  122. /*-------------------------------------------------------- ABOUT US -------------------------------------------------------*/
  123. .div-fluid {
  124. padding: 60px 50px;
  125. }
  126. .bg-grey {
  127. background-color: lightgray;
  128. }
  129. .logo {
  130. font-size: 200px;
  131. color: #4CAF50;
  132. }
  133. /*--------------------------------------------------------- FOOTER ---------------------------------------------------------*/
  134. footer.nb-footer {
  135. background: #222;
  136. border-top: 4px solid #4CAF50;
  137. }
  138. footer.nb-footer .about {
  139. margin: 0 auto;
  140. margin-top: 40px;
  141. max-width: 1170px;
  142. text-align: center;
  143. }
  144. footer.nb-footer .about p
  145. {
  146. font-size: 13px;
  147. color: #999;
  148. margin-top: 30px;
  149. }
  150. footer.nb-footer .about .social-media
  151. {
  152. margin-top: 15px;
  153. }
  154. footer.nb-footer .about .social-media ul li a {
  155. display: inline-block;
  156. width: 45px;
  157. height: 45px;
  158. line-height: 45px;
  159. border-radius: 50%;
  160. font-size: 16px;
  161. color: #4CAF50;
  162. border: 1px solid rgba(255, 255, 255, 0.3);
  163. }
  164. footer.nb-footer .about .social-media ul li a:hover {
  165. background: #4CAF50;
  166. color: #fff;
  167. border-color: #4CAF50;
  168. }
  169. footer.nb-footer .footer-info-single {
  170. margin-top: 30px;
  171. }
  172. footer.nb-footer .footer-info-single .title {
  173. color: #aaa;
  174. text-transform: uppercase;
  175. font-size: 16px;
  176. border-left: 4px solid #4CAF50;
  177. padding-left: 5px;
  178. }
  179. footer.nb-footer .footer-info-single ul li a {
  180. display: block;
  181. color: #aaa;
  182. padding: 2px 0;
  183. }
  184. footer.nb-footer .footer-info-single ul li a:hover
  185. {
  186. color: #4CAF50; }
  187. footer.nb-footer .footer-info-single p
  188. {
  189. font-size: 13px;
  190. line-height: 20px;
  191. color: #aaa;
  192. }
  193. footer.nb-footer .copyright {
  194. margin-top: 15px;
  195. background: #111;
  196. padding: 7px 0;
  197. color: #999;
  198. }
  199. footer.nb-footer .copyright p
  200. {
  201. text-align: center;
  202. margin: 0;
  203. padding: 0;
  204. }
  205.  
  206. <!DOCTYPE html>
  207. <html lang="hr">
  208. <head>
  209. <meta charset="UTF-8">
  210. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  211. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  212. <title>TIM</title>
  213. <!-- Bootstrap CSS -->
  214. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  215. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  216. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  217. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  218. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  219. <link rel="stylesheet" href="styles/style.css">
  220. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
  221.  
  222. <script type="text/javascript" src="javascript/functions.js"></script>
  223. </head>
  224. <body>
  225. <div class="container-fluid" style="background-color:lightgray;color:black;height:150px;">
  226. <div class="row">
  227. <br><br>
  228. <div class="col-sm-8"><h2>TiM Logo</h2></div>
  229. </div>
  230. </div>
  231. <!-- Nav bar -->
  232. <div class="topnav" data-spy="affix" data-offset-top="197" id="myTopnav">
  233. <a href="#home" class="active">Početna</a>
  234. <a href="#about">O nama</a>
  235. <div class="dropdown">
  236. <button class="dropbtn">Proizvodi
  237. <i class="fa fa-caret-down"></i>
  238. </button>
  239. <div class="dropdown-content">
  240. <a href="#">Link 1</a>
  241. <a href="#">Link 2</a>
  242. <a href="#">Link 3</a>
  243. </div>
  244. </div>
  245. <a href="#contact">Kontakt</a>
  246. <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  247. </div>
  248. <!-- Slideshow container -->
  249. <div class="lg-col-12">
  250. <div id="myCarousel" class="carousel slide" data-ride="carousel">
  251. <!-- Indicators -->
  252. <ol class="carousel-indicators">
  253. <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  254. <li data-target="#myCarousel" data-slide-to="1"></li>
  255. <li data-target="#myCarousel" data-slide-to="2"></li>
  256. </ol>
  257.  
  258. <!-- Wrapper for slides -->
  259. <div class="carousel-inner">
  260. <div class="item active">
  261. <img src="image_1.jpg" alt="Los Angeles" style="width:50%;">
  262. </div>
  263.  
  264. <div class="item">
  265. <img src="image_1.jpg" alt="Chicago" style="width:50%;">
  266. </div>
  267.  
  268. <div class="item">
  269. <img src="image_1.jpg" alt="New york" style="width:50%;">
  270. </div>
  271. </div>
  272.  
  273. <!-- Left and right controls -->
  274. <a class="left carousel-control" href="#myCarousel" data-slide="prev">
  275. <span class="glyphicon glyphicon-chevron-left"></span>
  276. <span class="sr-only">Previous</span>
  277. </a>
  278. <a class="right carousel-control" href="#myCarousel" data-slide="next">
  279. <span class="glyphicon glyphicon-chevron-right"></span>
  280. <span class="sr-only">Next</span>
  281. </a>
  282. </div>
  283. </div>
  284. <!-- O nama -->
  285. <div id="about" class="div-fluid">
  286. <div class="row">
  287. <div class="col-sm-8">
  288. <h2>O nama</h2>
  289. <h4>TIM d.o.o osnovan je...</h4>
  290. <p>Firma se bavi...</p>
  291. <button class="btn btn-default btn-lg">Više o nama</button>
  292. </div>
  293. <div class="col-sm-4">
  294. <i class="far fa-building logo"></i>
  295. </div>
  296. </div>
  297. </div>
  298. <!-- Naši proizvodi -->
  299. <div id="product" class="div-fluid text-center bg-grey">
  300. <h2>PROIZVODI</h2>
  301. <h5>Pogledajte našu ponudu</h4>
  302. <br><br>
  303. <div class="row">
  304. <div class="col-sm-6">
  305. <span class="glyphicon glyphicon-leaf"></span>
  306. <h4>POLJOPRIVREDNI STROJEVI</h4>
  307. <p>Nešt..</p>
  308. </div>
  309. <div class="col-sm-6">
  310. <span class="glyphicon glyphicon-heart"></span>
  311. <h4>HALE</h4>
  312. <p>Nešt..</p>
  313. </div>
  314. </div>
  315. <br><br>
  316. <div class="row">
  317. <div class="col-sm-6">
  318. <span class="glyphicon glyphicon-wrench"></span>
  319. <h4>ALATI</h4>
  320. <p>Nešt..</p>
  321. </div>
  322. <div class="col-sm-6">
  323. <span class="glyphicon glyphicon-certificate"></span>
  324. <h4>PLASTENICI</h4>
  325. <p>Nešt..</p>
  326. </div>
  327. </div>
  328. </div>
  329. <!-- Kontakt -->
  330. <div id="contact" class="div-fluid">
  331. <h2 class="text-center">Kontakt</h2>
  332. <br><br>
  333. <div class="row">
  334. <div class="col-sm-5">
  335. <p>Kontaktirajte nas, odgovor slijedu kroz 24 sata.</p>
  336. <p><span class="glyphicon glyphicon-map-marker"></span> Otrovanec, RH</p>
  337. <p><span class="glyphicon glyphicon-phone"></span> +385 953647362</p>
  338. <p><span class="glyphicon glyphicon-envelope"></span> [email protected]</p>
  339. </div>
  340. <div class="col-sm-6 slideanim">
  341. <div class="row">
  342. <div class="col-sm-6 form-group">
  343. <input class="form-control" id="name" name="name" placeholder="Ime" type="text" required>
  344. </div>
  345. <div class="col-sm-6 form-group">
  346. <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
  347. </div>
  348. </div>
  349. <textarea class="form-control" id="comments" name="comments" placeholder="Poruka" rows="5"></textarea><br>
  350. <div class="row">
  351. <div class="col-sm-12 form-group">
  352. <button class="btn btn-default pull-right" type="submit">Pošalji</button>
  353. </div>
  354. </div>
  355. </div>
  356. </div>
  357. </div>
  358. <!-- Footer Links -->
  359. <footer class="nb-footer">
  360. <div class="container">
  361. <div class="row">
  362.  
  363. <div class="col-md-3 col-sm-6">
  364. <div class="footer-info-single">
  365. <h2 class="title">Trebate pomoć?</h2>
  366. <ul class="list-unstyled">
  367. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Kako kupovati?</a></li>
  368. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Trebate R1 račun?</a></li>
  369. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Podrška</a></li>
  370. </ul>
  371. </div>
  372. </div>
  373.  
  374. <div class="col-md-3 col-sm-6">
  375. <div class="footer-info-single">
  376. <h2 class="title">Korisni linkovi</h2>
  377. <ul class="list-unstyled">
  378. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Admin prijava</a></li>
  379. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Link 1</a></li>
  380. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Link 2</a></li>
  381. </ul>
  382. </div>
  383. </div>
  384.  
  385. <div class="col-md-3 col-sm-6">
  386. <div class="footer-info-single">
  387. <h2 class="title">Sigurnost i privatnost</h2>
  388. <ul class="list-unstyled">
  389. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Uvjeti korištenja</a></li>
  390. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Pravila o privatnosti</a></li>
  391. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Naša lokacija</a></li>
  392. </ul>
  393. </div>
  394. </div>
  395.  
  396. <div class="col-md-3 col-sm-6">
  397. <div class="footer-info-single">
  398. <h2 class="title">Kontakt</h2>
  399. <p>Otrovanec<br>33405 Pitomača<br>Tel:<br>Fax:</p>
  400. </div>
  401. </div>
  402.  
  403. <div class="col-sm-12">
  404. <div class="about">
  405. <div class="social-media">
  406. <ul class="list-inline">
  407. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fab fa-facebook-f"></i></a></li>
  408. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fab fa-instagram"></i></a></li>
  409. <li><a href="http://www.nextbootstrap.com/" title=""><i class="fab fa-google"></i></a></li>
  410. </ul>
  411. </div>
  412. </div>
  413. </div>
  414.  
  415. </div>
  416. </div>
  417.  
  418. <section class="copyright">
  419. <div class="container">
  420. <div class="col-sm-12">
  421. <p>Copyright © 2018. TiM.d.o.o</p>
  422. </div>
  423. </div>
  424. </section>
  425. </footer>
  426. </body>
  427. </html>
  428.  
  429. /*------------------------------------------------------- SLIDESHOW -------------------------------------------------------*/
  430. /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
  431. function myFunction() {
  432. var x = document.getElementById("myTopnav");
  433. if (x.className === "topnav") {
  434. x.className += " responsive";
  435. } else {
  436. x.className = "topnav";
  437. }
  438. }
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!