Advertisement
Domy131097

Untitled

Nov 1st, 2018
135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.89 KB | None | 0 0
  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> ured@tim.hr</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