悬停时如何为引导卡设置动画？

Question

我正在尝试对Bootstrap卡(.col-lg-4进行动画处理，以使它们在悬停时具有margin-top: -1%，并在鼠标离开该区域时返回其初始位置。由于某些原因，这无法正常工作，并且没有任何反应。我不知道为什么。我在名为机器ID的部分中有6张卡片：这是我的标记和jQuery：

$(document).ready(function() {
  $('.col-4-lg').hover(function() {
    $(this).animate({
      marginTop: "-=1%",
    }, 200);
  }, function() {
    $(this).animate({
      marginTop: "0%"
    }, 200);
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="aTeknik.html">qUeRy</a> <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="aTeknik.html">Hem</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">Om oss</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="maskiner.html">Våra maskiner<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="faq.html">Vanliga frågor</a>
      </li>
    </ul>
  </div>
</nav>
<section class="choose-us">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <img src="assets/images/excavator.jpg" class="img-fluid" alt="Responsive image">
        <a href="http://www.stihl.com" target="_blank"><img src="assets/images/stihl.png" class="img-fluid" alt="Responsive image" id="logo-stihl"></a>
        <a href="http://www.caterpillar.com" target="_blank"><img src="assets/images/cat.jpg" class="img-fluid" alt="Responsive image" id="logo-caterpillar"></a>
        <a href="http://www.deere.com" target="_blank"><img src="assets/images/johndeere.png" class="img-fluid" alt="Responsive image" id="logo-johndeere"></a>
        <a href="http://www.hitachi.com" target="_blank"><img src="assets/images/hitachi.png" class="img-fluid" alt="Responsive image" id="logo-hitachi"></a>
      </div>
    </div>
  </div>
</section>
<section class="choose-us-text">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 mt-2 mb-2">
        <h4 class="text-center">Varför välja oss?</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4">
        <p><i class="fas fa-check green"></i> Störst utbud av maskiner och verktyg på marknade. Vi jobbar endast med välkända kvalitetsmärken.</p>
      </div>
      <div class="col-lg-4">
        <p><i class="fas fa-check green"></i> Har du hittat ett bättre pris? Berätta det för oss så ger vi dig ett bättre erbjudande. Kontakta oss för detaljer om priser.</p>
      </div>
      <div class="col-lg-4">
        <p><i class="fas fa-check green"></i> Vi utför ständiga säkerhetskontroller och service/underhåll av måra maskiner och verktyg.</p>
      </div>
    </div>
  </div>
</section>
<section id="machines">
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-left" style="width: 18rem; ">
          <img alt="Gul Caterpillar grävmaskin på en byggarbetsplats" class="card-img-top" src="assets/images/machine1.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Bobcats</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-top" style="width: 18rem;">
          <img alt="Man som startar en orange STIHL motorsåg" class="card-img-top" src="assets/images/chainsaw.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Motorsågar</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-right" style="width: 18rem; ">
          <img alt="Grävmaskiner som gräver på en byggarbetsplats" class="card-img-top" src="assets/images/excavators.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Grävmaskiner</h5>
          </div>
        </div>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-left" style="width: 18rem;">
          <img alt="Grön John Deere traktor framför ett skjul" class="card-img-top" src="assets/images/tractor.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Traktorer</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-bottom" style="width: 18rem; ">
          <img alt="Man i skyddsutrustning som svetsar" class="card-img-top" src="assets/images/welding.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Svetsar</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-right" style="width: 18rem; ">
          <img alt="Man som använder en betongssåg för att såga i asfalt" class="card-img-top" src="assets/images/auger.png">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Betongssågar</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="preparations mt-2">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mt-3 mb-3">
        <div class="card border-0">
          <div class="card-body preparations-card-body">
            <hr align="left">
            <h2 class="card-text">Viktiga</h2>
            <h4 class="card-title">Förberedelser</h4>
            <hr align="left">
            <h5 class="card-text">Ta med giltlig legitimation</h5>
            <p class="card-text">Vänligen ta med giltlig legitimation som kan visas för personalen innan en uthyrning kan ske.</p>
            <h5 class="card-text">Ta med ett giltligt kreditkort för depositionen</h5>
            <p class="card-text">Legitimationen samt kreditkortet måste tillhöra personen som hyr verktygen eller maskinerna. Du måste ha fyllt minst 18 år för att kunna hyra av oss.</p><a class="btn btn-outline-dark button-preparations" href="faq.html">Vanliga frågor</a>
          </div>
        </div>
      </div>
      <div class="col-lg-6 mt-3 mb-5"><img alt="Responsive image" class="img-fluid" src="assets/images/creditcard.jpg"></div>
    </div>
  </div>
</section>
<section class="contact-info">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center border-left rounded-circle mt-4">
        <div class="card border-0">
          <div class="card-body contact-card-color nopadding">
            <p class="card-text nomargin"><i class="fas fa-phone-volume favicons"></i> 0454-123456789 <br>
              <p><i class="far fa-envelope-open favicons"></i> <a class="favicons" href="mailto:query@query.com" target="_blank">Mail</a></p>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 text-center mt-2">
        <div class="card border-0">
          <div class="card-body contact-card-color nopadding">
            <p class="card-text nomargin"><a class="dark-text" href="https://goo.gl/maps/ByNK8zwNeip" target="_blank">Verkstadsvägen 3, 222 22 Stockholm<br></a></p>
            <p><span class="dark-text">Öppettider: Mån-Fre : 8:00-18:00</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 text-center border-right- rounded-circle">
        <div class="card border-0">
          <div class="card-body contact-card-color">
            <p class="card-text nomargin">Connect:a</p>
            <a class="fab fa-instagram favicons" href="https://www.instagram.com" target="_blank"></a>&nbsp;&nbsp;
            <a class="fab fa-facebook-f favicons" href="https://www.facebook.com" target="_blank"></a>&nbsp;&nbsp;
            <a class="fab fa-pinterest-p favicons" href="https://www.pinterest.com" target="_blank"></a>
            <p></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

Answer 1

删除了jquery并添加了

.card:hover{
transform: translatey(-10px) !important;
}

.card:hover{
transform: translatey(-10px) !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="aTeknik.html">qUeRy</a> <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="aTeknik.html">Hem</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">Om oss</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="maskiner.html">Våra maskiner<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="faq.html">Vanliga frågor</a>
      </li>
    </ul>
  </div>
</nav>
<section class="choose-us">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <img src="assets/images/excavator.jpg" class="img-fluid" alt="Responsive image">
        <a href="http://www.stihl.com" target="_blank"><img src="assets/images/stihl.png" class="img-fluid" alt="Responsive image" id="logo-stihl"></a>
        <a href="http://www.caterpillar.com" target="_blank"><img src="assets/images/cat.jpg" class="img-fluid" alt="Responsive image" id="logo-caterpillar"></a>
        <a href="http://www.deere.com" target="_blank"><img src="assets/images/johndeere.png" class="img-fluid" alt="Responsive image" id="logo-johndeere"></a>
        <a href="http://www.hitachi.com" target="_blank"><img src="assets/images/hitachi.png" class="img-fluid" alt="Responsive image" id="logo-hitachi"></a>
      </div>
    </div>
  </div>
</section>
<section class="choose-us-text">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 mt-2 mb-2">
        <h4 class="text-center">Varför välja oss?</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4">
        <p><i class="fas fa-check green"></i> Störst utbud av maskiner och verktyg på marknade. Vi jobbar endast med välkända kvalitetsmärken.</p>
      </div>
      <div class="col-lg-4">
        <p><i class="fas fa-check green"></i> Har du hittat ett bättre pris? Berätta det för oss så ger vi dig ett bättre erbjudande. Kontakta oss för detaljer om priser.</p>
      </div>
      <div class="col-lg-4">
        <p><i class="fas fa-check green"></i> Vi utför ständiga säkerhetskontroller och service/underhåll av måra maskiner och verktyg.</p>
      </div>
    </div>
  </div>
</section>
<section id="machines">
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-left" style="width: 18rem; ">
          <img alt="Gul Caterpillar grävmaskin på en byggarbetsplats" class="card-img-top" src="assets/images/machine1.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Bobcats</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-top" style="width: 18rem;">
          <img alt="Man som startar en orange STIHL motorsåg" class="card-img-top" src="assets/images/chainsaw.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Motorsågar</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-right" style="width: 18rem; ">
          <img alt="Grävmaskiner som gräver på en byggarbetsplats" class="card-img-top" src="assets/images/excavators.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Grävmaskiner</h5>
          </div>
        </div>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-left" style="width: 18rem;">
          <img alt="Grön John Deere traktor framför ett skjul" class="card-img-top" src="assets/images/tractor.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Traktorer</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-bottom" style="width: 18rem; ">
          <img alt="Man i skyddsutrustning som svetsar" class="card-img-top" src="assets/images/welding.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Svetsar</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-right" style="width: 18rem; ">
          <img alt="Man som använder en betongssåg för att såga i asfalt" class="card-img-top" src="assets/images/auger.png">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Betongssågar</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="preparations mt-2">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mt-3 mb-3">
        <div class="card border-0">
          <div class="card-body preparations-card-body">
            <hr align="left">
            <h2 class="card-text">Viktiga</h2>
            <h4 class="card-title">Förberedelser</h4>
            <hr align="left">
            <h5 class="card-text">Ta med giltlig legitimation</h5>
            <p class="card-text">Vänligen ta med giltlig legitimation som kan visas för personalen innan en uthyrning kan ske.</p>
            <h5 class="card-text">Ta med ett giltligt kreditkort för depositionen</h5>
            <p class="card-text">Legitimationen samt kreditkortet måste tillhöra personen som hyr verktygen eller maskinerna. Du måste ha fyllt minst 18 år för att kunna hyra av oss.</p><a class="btn btn-outline-dark button-preparations" href="faq.html">Vanliga frågor</a>
          </div>
        </div>
      </div>
      <div class="col-lg-6 mt-3 mb-5"><img alt="Responsive image" class="img-fluid" src="assets/images/creditcard.jpg"></div>
    </div>
  </div>
</section>
<section class="contact-info">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center border-left rounded-circle mt-4">
        <div class="card border-0">
          <div class="card-body contact-card-color nopadding">
            <p class="card-text nomargin"><i class="fas fa-phone-volume favicons"></i> 0454-123456789 <br>
              <p><i class="far fa-envelope-open favicons"></i> <a class="favicons" href="mailto:query@query.com" target="_blank">Mail</a></p>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 text-center mt-2">
        <div class="card border-0">
          <div class="card-body contact-card-color nopadding">
            <p class="card-text nomargin"><a class="dark-text" href="https://goo.gl/maps/ByNK8zwNeip" target="_blank">Verkstadsvägen 3, 222 22 Stockholm<br></a></p>
            <p><span class="dark-text">Öppettider: Mån-Fre : 8:00-18:00</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 text-center border-right- rounded-circle">
        <div class="card border-0">
          <div class="card-body contact-card-color">
            <p class="card-text nomargin">Connect:a</p>
            <a class="fab fa-instagram favicons" href="https://www.instagram.com" target="_blank"></a>&nbsp;&nbsp;
            <a class="fab fa-facebook-f favicons" href="https://www.facebook.com" target="_blank"></a>&nbsp;&nbsp;
            <a class="fab fa-pinterest-p favicons" href="https://www.pinterest.com" target="_blank"></a>
            <p></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

Answer 2

您可以使用hover CSS属性：

.col-lg-4:hover{
  margin-top: -1%;
}

尽管如此，最好在相关块上添加专用于该动画的类名，如下所示：

.animate-bloc:hover{
  margin-top: -1%;
}

<div class="col-lg-4 animate-bloc"></div>

Answer 3

只需看看mouseover和mouseout事件

$(document).ready(function() {
$(".col-lg-4").mouseover(function(){ $(this).animate({ marginLeft: "-=1%"},'fast') });
$(".col-lg-4").mouseout(function(){ $(this).animate({ marginLeft: "0%"},'fast') });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="aTeknik.html">qUeRy</a> <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="aTeknik.html">Hem</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">Om oss</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="maskiner.html">Våra maskiner<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="faq.html">Vanliga frågor</a>
      </li>
    </ul>
  </div>
</nav>
<section class="choose-us">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <img src="assets/images/excavator.jpg" class="img-fluid" alt="Responsive image">
        <a href="http://www.stihl.com" target="_blank"><img src="assets/images/stihl.png" class="img-fluid" alt="Responsive image" id="logo-stihl"></a>
        <a href="http://www.caterpillar.com" target="_blank"><img src="assets/images/cat.jpg" class="img-fluid" alt="Responsive image" id="logo-caterpillar"></a>
        <a href="http://www.deere.com" target="_blank"><img src="assets/images/johndeere.png" class="img-fluid" alt="Responsive image" id="logo-johndeere"></a>
        <a href="http://www.hitachi.com" target="_blank"><img src="assets/images/hitachi.png" class="img-fluid" alt="Responsive image" id="logo-hitachi"></a>
      </div>
    </div>
  </div>
</section>
<section class="choose-us-text">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 mt-2 mb-2">
        <h4 class="text-center">Varför välja oss?</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4">
        <p><i class="fas fa-check green"></i> Störst utbud av maskiner och verktyg på marknade. Vi jobbar endast med välkända kvalitetsmärken.</p>
      </div>
      <div class="col-lg-4">
        <p><i class="fas fa-check green"></i> Har du hittat ett bättre pris? Berätta det för oss så ger vi dig ett bättre erbjudande. Kontakta oss för detaljer om priser.</p>
      </div>
      <div class="col-lg-4">
        <p><i class="fas fa-check green"></i> Vi utför ständiga säkerhetskontroller och service/underhåll av måra maskiner och verktyg.</p>
      </div>
    </div>
  </div>
</section>
<section id="machines">
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-left" style="width: 18rem; ">
          <img alt="Gul Caterpillar grävmaskin på en byggarbetsplats" class="card-img-top" src="assets/images/machine1.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Bobcats</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-top" style="width: 18rem;">
          <img alt="Man som startar en orange STIHL motorsåg" class="card-img-top" src="assets/images/chainsaw.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Motorsågar</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-right" style="width: 18rem; ">
          <img alt="Grävmaskiner som gräver på en byggarbetsplats" class="card-img-top" src="assets/images/excavators.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Grävmaskiner</h5>
          </div>
        </div>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-left" style="width: 18rem;">
          <img alt="Grön John Deere traktor framför ett skjul" class="card-img-top" src="assets/images/tractor.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Traktorer</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-bottom" style="width: 18rem; ">
          <img alt="Man i skyddsutrustning som svetsar" class="card-img-top" src="assets/images/welding.jpg">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Svetsar</h5>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mt-3 mb-3 d-flex justify-content-center">
        <div class="card border-col-right" style="width: 18rem; ">
          <img alt="Man som använder en betongssåg för att såga i asfalt" class="card-img-top" src="assets/images/auger.png">
          <div class="card-body machines-card-color">
            <h5 class="card-title">Betongssågar</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="preparations mt-2">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mt-3 mb-3">
        <div class="card border-0">
          <div class="card-body preparations-card-body">
            <hr align="left">
            <h2 class="card-text">Viktiga</h2>
            <h4 class="card-title">Förberedelser</h4>
            <hr align="left">
            <h5 class="card-text">Ta med giltlig legitimation</h5>
            <p class="card-text">Vänligen ta med giltlig legitimation som kan visas för personalen innan en uthyrning kan ske.</p>
            <h5 class="card-text">Ta med ett giltligt kreditkort för depositionen</h5>
            <p class="card-text">Legitimationen samt kreditkortet måste tillhöra personen som hyr verktygen eller maskinerna. Du måste ha fyllt minst 18 år för att kunna hyra av oss.</p><a class="btn btn-outline-dark button-preparations" href="faq.html">Vanliga frågor</a>
          </div>
        </div>
      </div>
      <div class="col-lg-6 mt-3 mb-5"><img alt="Responsive image" class="img-fluid" src="assets/images/creditcard.jpg"></div>
    </div>
  </div>
</section>
<section class="contact-info">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center border-left rounded-circle mt-4">
        <div class="card border-0">
          <div class="card-body contact-card-color nopadding">
            <p class="card-text nomargin"><i class="fas fa-phone-volume favicons"></i> 0454-123456789 <br>
              <p><i class="far fa-envelope-open favicons"></i> <a class="favicons" href="mailto:query@query.com" target="_blank">Mail</a></p>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 text-center mt-2">
        <div class="card border-0">
          <div class="card-body contact-card-color nopadding">
            <p class="card-text nomargin"><a class="dark-text" href="https://goo.gl/maps/ByNK8zwNeip" target="_blank">Verkstadsvägen 3, 222 22 Stockholm<br></a></p>
            <p><span class="dark-text">Öppettider: Mån-Fre : 8:00-18:00</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 text-center border-right- rounded-circle">
        <div class="card border-0">
          <div class="card-body contact-card-color">
            <p class="card-text nomargin">Connect:a</p>
            <a class="fab fa-instagram favicons" href="https://www.instagram.com" target="_blank"></a>&nbsp;&nbsp;
            <a class="fab fa-facebook-f favicons" href="https://www.facebook.com" target="_blank"></a>&nbsp;&nbsp;
            <a class="fab fa-pinterest-p favicons" href="https://www.pinterest.com" target="_blank"></a>
            <p></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>