Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Findful</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />
    <link rel="stylesheet" href="/styles/style.css">

    <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
</head>
<body>
    <div class="header">
        <div class="top-nav">
            <div class="uk-container">
                <ul class="uk-float-right">
                    <li><a href="#"><i class="fas fa-user"></i> Sign in</a></li>
                </ul>
            </div>
        </div>
        <div class="uk-container">
            <div uk-sticky="animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent; top: 200">
                <nav class="uk-navbar-container uk-padding-remove-vertical uk-padding-small" uk-navbar>
                    <div class="uk-navbar-left">
                        <a class="uk-navbar-item uk-logo" href="#">FindFul</a>
                    </div>
                    <div class="uk-navbar-right">
                        <ul class="uk-navbar-nav">
                            <li class="uk-active"><a href="#">Home</a></li>
                            <li>
                                <a href="#">Cars</a>
                                <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
                                    <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                                        <div>
                                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                                <li class="uk-nav-header">Mid-size</li>
                                                <li><a href="#">Toyta</a></li>
                                                <li><a href="#">Ford</a></li>
                                                <li><a href="#">Nissan</a></li>
                                                <li class="uk-nav-header">Full-size</li>
                                                <li><a href="#">Dodge</a></li>
                                                <li><a href="#">Chevrolet</a></li>
                                                <li><a href="#">Ford Fusion</a></li>
                                            </ul>
                                        </div>
                                        <div>
                                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                                <li class="uk-nav-header">Premium</li>
                                                <li><a href="#">Porsche</a></li>
                                                <li><a href="#">BMW</a></li>
                                                <li><a href="#">Audi</a></li>
                                                <li class="uk-nav-header">Luxury</li>
                                                <li><a href="#">Jaguar</a></li>
                                                <li><a href="#">Rolls-Royce</a></li>
                                                <li><a href="#">Bentley</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">View All Cars...</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="uk-container header-content">
            <div class="header-text">
                <!--<h3>Premium car <span>rental</span> services at several convenient locations in <span>Gothenburg</span></h3>-->
            </div>
            <div class="header-search"></div>
        </div>
    </div>
    <div class="features uk-container">
        <div class="uk-child-width-expand@s uk-text-center featured-items" uk-grid>
            <div>
                <div style="border-left:0;" class="uk-card uk-card-custom uk-card-body">
                    <i data-fa-transform="down-3" class="fas fa-2x fa-car" style="color:#0083de;"></i> Premium Cars
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-custom uk-card-body">
                    <i data-fa-transform="down-3" class="fas fa-2x fa-headset" style="color:#0083de;"></i> 24/7 Service
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-custom uk-card-body">
                    <i data-fa-transform="down-3" class="fas fa-2x fa-coins" style="color:#0083de;"></i> Cheap
                </div>
            </div>

            <div>
                <div class="uk-card uk-card-custom uk-card-body">
                    <i data-fa-transform="down-3" class="fas fa-2x fa-users" style="color:#0083de;"></i> Happy Clients
                </div>
            </div>
        </div>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Arimo');

html {
    padding: 0;
    margin: 0;
}

body {

    background: #fff;
}

.top-nav {
    padding: 6px;
    background: #2d3436;
}

.top-nav ul {
    list-style: none;
}

.top-nav ul li {
    display: inline-block;
}

.top-nav a {
    color: #ccc;
}

.top-nav a:hover {
    color: #fff;
    transition: 0.8s;
    text-decoration: none;
}

.uk-navbar-container:not(.uk-navbar-transparent) {
    background: #F3F4F9;
    color:  #2E2E3B;
}

.uk-navbar .uk-logo {
    color: #0083de;
}

.uk-navbar-nav>li.uk-active>a, .uk-navbar-nav>li>a {
    font-family: 'Arimo', sans-serif;
    color:  #000;
}

.uk-navbar-nav>li:hover>a, .uk-navbar-nav>li>a.uk-open, .uk-navbar-nav>li>a:focus {
    color: #000;
}

.header {
    background: url("/CarHeader.png") no-repeat;
    background-position: center;
    background-size: 100%;
    min-height: 620px;
    height: 620px;
}

.header-content {
    padding: 100px 0px;
}

.header-text {
    text-align: center;
    color: #000;
}

.header-text span {
    color: #0083de;
    border-bottom: 3px solid #0083de;
}

.featured-items {
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    background: #fff;
    color: #2c3e50;
    border: 1px solid #F3F4F9;
    border-radius: 5px;
    margin-top: -50px
}

.featured-items .uk-card-custom {
    border-left: 2px solid #F3F4F9;
}