JSFiddle - React, Tailwind, and code Playground

by Chuck Tornton

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="headBanner position-relative overflow-hidden p-md-5 text-center bg-dark">
  <div class="headText col-md-5 p-lg-5 mx-auto">
    <h1 class="display-4 font-weight-normal">Micruss</h1>
    <p class="lead font-weight-normal">Аренда спецтехники в Омске.</p>
    <a class="btn callButton" onclick="foo()" >Заказать звонок</a>
  </div>
  <div class="product-device box-shadow d-none d-md-block"></div>
  <div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
</div>
 <nav class="navbar navbar-expand-sm" data-toggle="affix">
   <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
     <a class="navbar-brand" href="#"><img src="https://image.flaticon.com/icons/png/512/116/116414.png" alt="" style="width: 30px; height: 30px; filter: invert(100%); transform: scale(-1, 1);">Micruss</a>

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
       <span class="btn btn-success-outline">Открыть меню</span>
     </button>
     <div class="collapse navbar-collapse text-center" id="navbarsExample11">
       <ul class="navbar-nav">
         <li class="nav-item active">
           <a class="nav-link" href="#">Услуги</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Цены</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Документы</a>
         </li>
         <li class="nav-item">
           <a class="nav-link"...

CSS

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', serif;
  background: #e6e6e6;
}

.headBanner {
    background-image: url(http://spectehnika67.ru/images/banner.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.site-header {
    background: #3e8ede!important;
}

.navbar {
  background: #3976de;
  padding: 0;
}

.navbar a {
  color: #FFFFFF;
  width: 100px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar a:hover {
  background: #004EA8;
}

.site-header ul {
  color: #ffffff;
}

.menu {
  border: 1px solid #ffffff;
  color: #ffffff;
}

.menu nav {
  width: 100%;
  float: none;
}

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.site-header a:hover {
  background: #3976de;
  display: block;
}

.nav-link:hover {
    border-bottom: 2px solid #ffffff;
    border-top: 2px solid transparent;
}

.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

@keyframes shadow {
from {box-shadow: 0 0 3px black;}
50% {box-shadow: 0 0 30px black;}
to {box-shadow: 0 0 3px black;}
}

@keyframes textshadow {
from {text-shadow: 0 0 2px black;}
50% {text-shadow: 0 0 10px black; text-decoration: underline;}
to {text-shadow: 0 0 2px black;}
}

.str-block {
  border: 2px solid #3976de;
  display: flex;
  justify-content: center;
  margin: 30px auto 20px;
  padding: 10px;
  width: 55%;
}

.str-block:hover {
  cursor: pointer;
  background: #3976de;
  color: #ffffff;
  animation: shadow  2s infinite;
}

.links {
  text-decoration: underline;
}

.links:hover {
  text-decoration: none;
  color: #3976de;
  animation: textshadow  2s infinite;
}

.footer {
  background: #6c757d;
}

hr {
  background: #3976de;
}

.row .rounded:hover {
  border: 2px solid #3976de;
  animation: shadow  2s infinite;
}

.iconTech {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.priceTech {
  justify-content: center;
}

JavaScript

$(document).ready(function() {
        $(".menu").click(function() {
          $("ul").slideToggle().toggleClass('active');
        });
      });

      (function(){

        footer();

        $(window).resize(function() {
          footer();
        });

        function footer() {
          var docHeight = $(window).height(),
                  footerHeight = $('footer').outerHeight(),
                  footerTop = $('footer').position().top + footerHeight;

          if (footerTop < docHeight) {
            $('footer').css('margin-top', (docHeight - footerTop) + 'px');
          }
        }
        
        

      })();