Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*-------------------------------------------------------- HEADER --------------------------------------------------------*/
- .affix {
- top: 0;
- width: 100%;
- z-index: 9999 !important;
- }
- .affix + .container-fluid {
- padding-top: 0px;
- }
- /*-------------------------------------------------------- NAV BAR --------------------------------------------------------*/
- body {
- margin: 0;
- font-family: Verdana, Geneva, Tahoma, sans-serif;
- }
- .topnav {
- overflow: hidden;
- background-color: #333;
- box-shadow: 0 8px 6px -6px black;
- }
- .topnav a {
- float: left;
- display: block;
- color: #f2f2f2;
- text-align: center;
- padding: 14px 16px;
- text-decoration: none;
- font-size: 17px;
- }
- .active {
- background-color: #4CAF50;
- color: white;
- }
- .topnav .icon {
- display: none;
- }
- .dropdown {
- float: left;
- overflow: hidden;
- }
- .dropdown .dropbtn {
- font-size: 17px;
- border: none;
- outline: none;
- color: white;
- padding: 14px 16px;
- background-color: inherit;
- font-family: inherit;
- margin: 0;
- }
- .dropdown-content {
- display: none;
- position: absolute;
- background-color: #f9f9f9;
- min-width: 160px;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
- z-index: 1;
- position: fixed;
- }
- .dropdown-content a {
- float: none;
- color: black;
- padding: 12px 16px;
- text-decoration: none;
- display: block;
- text-align: left;
- }
- .topnav a:hover, .dropdown:hover .dropbtn {
- background-color: #ddd;
- color: black;
- }
- .dropdown-content a:hover {
- background-color: #ddd;
- color: black;
- }
- .dropdown:hover .dropdown-content {
- display: block;
- }
- @media screen and (max-width: 600px) {
- .topnav a:not(:first-child), .dropdown .dropbtn {
- display: none;
- }
- .topnav a.icon {
- float: right;
- display: block;
- }
- }
- @media screen and (max-width: 600px) {
- .topnav.responsive {position: relative;}
- .topnav.responsive .icon {
- position: absolute;
- right: 0;
- top: 0;
- }
- .topnav.responsive a {
- float: none;
- display: block;
- text-align: left;
- }
- .topnav.responsive .dropdown {float: none;}
- .topnav.responsive .dropdown-content {position: relative;}
- .topnav.responsive .dropdown .dropbtn {
- display: block;
- width: 100%;
- text-align: left;
- }
- }
- /*-------------------------------------------------------- ABOUT US -------------------------------------------------------*/
- .div-fluid {
- padding: 60px 50px;
- }
- .bg-grey {
- background-color: lightgray;
- }
- .logo {
- font-size: 200px;
- color: #4CAF50;
- }
- /*--------------------------------------------------------- FOOTER ---------------------------------------------------------*/
- footer.nb-footer {
- background: #222;
- border-top: 4px solid #4CAF50;
- }
- footer.nb-footer .about {
- margin: 0 auto;
- margin-top: 40px;
- max-width: 1170px;
- text-align: center;
- }
- footer.nb-footer .about p
- {
- font-size: 13px;
- color: #999;
- margin-top: 30px;
- }
- footer.nb-footer .about .social-media
- {
- margin-top: 15px;
- }
- footer.nb-footer .about .social-media ul li a {
- display: inline-block;
- width: 45px;
- height: 45px;
- line-height: 45px;
- border-radius: 50%;
- font-size: 16px;
- color: #4CAF50;
- border: 1px solid rgba(255, 255, 255, 0.3);
- }
- footer.nb-footer .about .social-media ul li a:hover {
- background: #4CAF50;
- color: #fff;
- border-color: #4CAF50;
- }
- footer.nb-footer .footer-info-single {
- margin-top: 30px;
- }
- footer.nb-footer .footer-info-single .title {
- color: #aaa;
- text-transform: uppercase;
- font-size: 16px;
- border-left: 4px solid #4CAF50;
- padding-left: 5px;
- }
- footer.nb-footer .footer-info-single ul li a {
- display: block;
- color: #aaa;
- padding: 2px 0;
- }
- footer.nb-footer .footer-info-single ul li a:hover
- {
- color: #4CAF50; }
- footer.nb-footer .footer-info-single p
- {
- font-size: 13px;
- line-height: 20px;
- color: #aaa;
- }
- footer.nb-footer .copyright {
- margin-top: 15px;
- background: #111;
- padding: 7px 0;
- color: #999;
- }
- footer.nb-footer .copyright p
- {
- text-align: center;
- margin: 0;
- padding: 0;
- }
- <!DOCTYPE html>
- <html lang="hr">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>TIM</title>
- <!-- Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- <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>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="styles/style.css">
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
- <script type="text/javascript" src="javascript/functions.js"></script>
- </head>
- <body>
- <div class="container-fluid" style="background-color:lightgray;color:black;height:150px;">
- <div class="row">
- <br><br>
- <div class="col-sm-8"><h2>TiM Logo</h2></div>
- </div>
- </div>
- <!-- Nav bar -->
- <div class="topnav" data-spy="affix" data-offset-top="197" id="myTopnav">
- <a href="#home" class="active">Početna</a>
- <a href="#about">O nama</a>
- <div class="dropdown">
- <button class="dropbtn">Proizvodi
- <i class="fa fa-caret-down"></i>
- </button>
- <div class="dropdown-content">
- <a href="#">Link 1</a>
- <a href="#">Link 2</a>
- <a href="#">Link 3</a>
- </div>
- </div>
- <a href="#contact">Kontakt</a>
- <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
- </div>
- <!-- Slideshow container -->
- <div class="lg-col-12">
- <div id="myCarousel" class="carousel slide" data-ride="carousel">
- <!-- Indicators -->
- <ol class="carousel-indicators">
- <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
- <li data-target="#myCarousel" data-slide-to="1"></li>
- <li data-target="#myCarousel" data-slide-to="2"></li>
- </ol>
- <!-- Wrapper for slides -->
- <div class="carousel-inner">
- <div class="item active">
- <img src="image_1.jpg" alt="Los Angeles" style="width:50%;">
- </div>
- <div class="item">
- <img src="image_1.jpg" alt="Chicago" style="width:50%;">
- </div>
- <div class="item">
- <img src="image_1.jpg" alt="New york" style="width:50%;">
- </div>
- </div>
- <!-- Left and right controls -->
- <a class="left carousel-control" href="#myCarousel" data-slide="prev">
- <span class="glyphicon glyphicon-chevron-left"></span>
- <span class="sr-only">Previous</span>
- </a>
- <a class="right carousel-control" href="#myCarousel" data-slide="next">
- <span class="glyphicon glyphicon-chevron-right"></span>
- <span class="sr-only">Next</span>
- </a>
- </div>
- </div>
- <!-- O nama -->
- <div id="about" class="div-fluid">
- <div class="row">
- <div class="col-sm-8">
- <h2>O nama</h2>
- <h4>TIM d.o.o osnovan je...</h4>
- <p>Firma se bavi...</p>
- <button class="btn btn-default btn-lg">Više o nama</button>
- </div>
- <div class="col-sm-4">
- <i class="far fa-building logo"></i>
- </div>
- </div>
- </div>
- <!-- Naši proizvodi -->
- <div id="product" class="div-fluid text-center bg-grey">
- <h2>PROIZVODI</h2>
- <h5>Pogledajte našu ponudu</h4>
- <br><br>
- <div class="row">
- <div class="col-sm-6">
- <span class="glyphicon glyphicon-leaf"></span>
- <h4>POLJOPRIVREDNI STROJEVI</h4>
- <p>Nešt..</p>
- </div>
- <div class="col-sm-6">
- <span class="glyphicon glyphicon-heart"></span>
- <h4>HALE</h4>
- <p>Nešt..</p>
- </div>
- </div>
- <br><br>
- <div class="row">
- <div class="col-sm-6">
- <span class="glyphicon glyphicon-wrench"></span>
- <h4>ALATI</h4>
- <p>Nešt..</p>
- </div>
- <div class="col-sm-6">
- <span class="glyphicon glyphicon-certificate"></span>
- <h4>PLASTENICI</h4>
- <p>Nešt..</p>
- </div>
- </div>
- </div>
- <!-- Kontakt -->
- <div id="contact" class="div-fluid">
- <h2 class="text-center">Kontakt</h2>
- <br><br>
- <div class="row">
- <div class="col-sm-5">
- <p>Kontaktirajte nas, odgovor slijedu kroz 24 sata.</p>
- <p><span class="glyphicon glyphicon-map-marker"></span> Otrovanec, RH</p>
- <p><span class="glyphicon glyphicon-phone"></span> +385 953647362</p>
- <p><span class="glyphicon glyphicon-envelope"></span> ured@tim.hr</p>
- </div>
- <div class="col-sm-6 slideanim">
- <div class="row">
- <div class="col-sm-6 form-group">
- <input class="form-control" id="name" name="name" placeholder="Ime" type="text" required>
- </div>
- <div class="col-sm-6 form-group">
- <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
- </div>
- </div>
- <textarea class="form-control" id="comments" name="comments" placeholder="Poruka" rows="5"></textarea><br>
- <div class="row">
- <div class="col-sm-12 form-group">
- <button class="btn btn-default pull-right" type="submit">Pošalji</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Footer Links -->
- <footer class="nb-footer">
- <div class="container">
- <div class="row">
- <div class="col-md-3 col-sm-6">
- <div class="footer-info-single">
- <h2 class="title">Trebate pomoć?</h2>
- <ul class="list-unstyled">
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Kako kupovati?</a></li>
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Trebate R1 račun?</a></li>
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Podrška</a></li>
- </ul>
- </div>
- </div>
- <div class="col-md-3 col-sm-6">
- <div class="footer-info-single">
- <h2 class="title">Korisni linkovi</h2>
- <ul class="list-unstyled">
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Admin prijava</a></li>
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Link 1</a></li>
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Link 2</a></li>
- </ul>
- </div>
- </div>
- <div class="col-md-3 col-sm-6">
- <div class="footer-info-single">
- <h2 class="title">Sigurnost i privatnost</h2>
- <ul class="list-unstyled">
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Uvjeti korištenja</a></li>
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Pravila o privatnosti</a></li>
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fa fa-angle-double-right"></i> Naša lokacija</a></li>
- </ul>
- </div>
- </div>
- <div class="col-md-3 col-sm-6">
- <div class="footer-info-single">
- <h2 class="title">Kontakt</h2>
- <p>Otrovanec<br>33405 Pitomača<br>Tel:<br>Fax:</p>
- </div>
- </div>
- <div class="col-sm-12">
- <div class="about">
- <div class="social-media">
- <ul class="list-inline">
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fab fa-facebook-f"></i></a></li>
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fab fa-instagram"></i></a></li>
- <li><a href="http://www.nextbootstrap.com/" title=""><i class="fab fa-google"></i></a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <section class="copyright">
- <div class="container">
- <div class="col-sm-12">
- <p>Copyright © 2018. TiM.d.o.o</p>
- </div>
- </div>
- </section>
- </footer>
- </body>
- </html>
- /*------------------------------------------------------- SLIDESHOW -------------------------------------------------------*/
- /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
- function myFunction() {
- var x = document.getElementById("myTopnav");
- if (x.className === "topnav") {
- x.className += " responsive";
- } else {
- x.className = "topnav";
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement