/*-------------------------------------------------------- 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()">&#9776;</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";
    }
}