Tilt card

In this example below you will see how to do a Tilt card with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by piyush0966, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright piyush0966 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tilt card</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="text-center pb-3">
        <div class = 'container'>
    <!--Section heading-->
    <h2 class="font-weight-bold h1 py-5">
        <strong>Your International Travel Checklist</strong>
    </h2>
<!--Grid row-->
    <div class="row">
    
        <!--Grid column-->
        <div class="col-md-12 mb-4">
            <div class="card custom-card-tilt card-image">
                <div class="text-white text-center d-flex align-items-center custom-opacity rgba-black-strong px-4 rounded">
                    <div>
                        <h6 class="purple-text pt-3">
                            <i class="fa fa-plane"></i>
                            <strong> Travel</strong>
                        </h6>
                        <h3 class=" font-weight-bold">
                            <strong >How to Avoid Surprise Costs When Traveling around the world</strong>
                        </h3>
                        <p class="">
                          <ul class = 'custom-list text-left'>
                            <li>Book your lodging wisely. If your hotel is far from the airport or major attractions, you are going to incur transportation costs.</li>
                            <li>Use public transport for local travel.</li>
                            <li>Research on the best eating places. Sometimes a small hotel might serve delicious dishes than a star restaurant.</li>
                            <li>Check for seasonal add on rates at the resort or at attractions for that matter. 
</li>
                            <li>Research well on the car rental insurances if any. This will save you from surprise costs.</li>
                      </ul>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--Grid column-->
</div > 
<!-- row -->
  
  <!--Grid row-->
    <div class="row">
    
        <!--Grid column-->
        <div class="col-md-12 mb-4">
            <div class="card custom-card-tilt-anti card-image">
                <div class="text-white text-center d-flex align-items-center custom-opacity rgba-black-strong px-4 rounded">
                    <div>
                        <h6 class="purple-text pt-3">
                            <i class="fa fa-phone"></i>
                            <strong> Communication</strong>
                        </h6>
                        <h3 class=" font-weight-bold">
                            <strong >6 Ways to Stay in Communication While Traveling Abroad</strong>
                        </h3>
                        <p class="">
                          <ul class = 'custom-list text-left'>
                            <li>If your mobile uses GSM, it will work overseas and is the cheapest option to start connected to family.</li>
                            <li>Make use of the free Wifi in airports to mail them or message them via social media.</li>
                            <li>There are a lot of applications or messengers that make communication between various countries easier.</li>
                            <li>You can also buy a local SIM card with a lot of add-ons to help you stay connected. 
</li>
                            <li>Get a temporary cheap wireless phone just for the duration of your travel and you are good to go!</li>
                      </ul>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--Grid column-->
</div > 
<!-- row -->


<!--Grid row-->
    <div class="row">
    
        <!--Grid column-->
        <div class="col-md-12 mb-4">
            <div class="card custom-card-tilt card-image">
                <div class="text-white text-center d-flex align-items-center custom-opacity rgba-black-strong px-4 rounded">
                    <div>
                        <h6 class="purple-text pt-3">
                            <i class="fa fa-phone"></i>
                            <strong> Communication</strong>
                        </h6>
                        <h3 class=" font-weight-bold">
                            <strong >Top 5 things to pack for a trip abroad</strong>
                        </h3>
                        <p class="">
                          <ul class = 'custom-list text-left'>
                            <li>The first and foremost thing to pack are the travel documents such as passport and visa. Also have some amount of the destination’s currency. </li>
                            <li>Carry a language book with you as some places do not use any language other than the local one. </li>
                            <li>Local guides and maps if any and your itinerary.</li>
                            <li>Electronics and their respective batteries and chargers. 
</li>
                            <li>Just the right amount of clothes, not less and not more, health kit and toiletries!</li>
                      </ul>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--Grid column-->
</div > 
<!-- row -->
  
  </div>
  <!-- container ->
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/piyush0966/tilt-card-xYNPxe */
.custom-list {
  list-style-type:upper-roman;
}
.custom-card-tilt {
  transform: skewX(-5deg);
}

.custom-card-tilt-anti {
  transform: skewX(5deg);
}

Comments