test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Programmer Me </title>
  <meta name="description" content="Programmer Me club Cucek Cusat">
  <meta name="author" content="Programmer Me">

  <!-- Favicons
    ================================================== -->
  <!--<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
-->
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/solid.css" integrity="sha384-uKQOWcYZKOuKmpYpvT0xCFAs/wE157X5Ua3H5onoRAOCNkJAMX/6QF0iXGGQV9cP"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/regular.css" integrity="sha384-OEIzojYBMrmz48aIjVQj7VG38613/sxpP58OW9h5zBYC7biGFlv9tyu5kWmaAYlF"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/brands.css" integrity="sha384-BCEeiNUiLzxxoeYaIu7jJqq0aVVz2O2Ig4WbWEmRQ2Dx/AAxNV1wMDBXyyrxw1Zd"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/fontawesome.css" integrity="sha384-HU5rcgG/yUrsDGWsVACclYdzdCcn5yU8V/3V84zSrPDHwZEdjykadlgI6RHrxGrJ"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./fonts/font-awesome/css/font-awesome.css">
  <!-- Stylesheet
    ================================================== -->
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="./js/modernizr-custom.js"></script>

  <link rel="icon" href="./img/favicon.png" type="image/x-icon" />
  <link rel="shortcut icon" href="./img/favicon.png" type="image/x-icon" />

  <!--<link rel="stylesheet" type="text/css" href="css/countdown.css">-->
  <link rel="stylesheet" type="text/css" href="css/countdown.css">


</head>

<body>


    <section class="section-tours" id="section-tours">
        <div class="col-md-8 col-md-offset-2 section-title text-center">
            <h2>Upcoming Events</h2>
          </div>
       

        <div class="rows">
            <div class="col-1-of-3">
               <div class="card">
                   <div class="card__side card__side--front">
                        <div class="card__picture card__picture--1">
                            &nbsp;
                        </div>
                        <h4 class="card__heading">
                            <span class="card__heading-span card__heading-span--1">Hour of Code</span>
                        </h4>
                        <div class="card__details">
                           <span>     <center>Talks</center>
                                <center> Keynote</center>
                                <center> Need of the Hour</center>
                               
                            
                              <p>3:30pm - 5:00pm Thuesday 06 . Dec . 2018</p>  
                                St. Joseph's Higher Secondary School
                            </span>
                        </div>
                   </div>
                   <div class="card__side card__side--back card__side--back-1">
                        <div class="card__cta">
                            <div class="card__price-box">
                                <p class="card__price-only">Only</p>
                                <p class="card__price-value">$297</p>
                            </div>
                            <a href="#popup" class="btn btn--white">Book now!</a>
                        </div>
                    </div>
               </div>
            </div>


            <div class="col-1-of-3">
                <div class="card">
                    <div class="card__side card__side--front">
                        <div class="card__picture card__picture--2">
                            &nbsp;
                        </div>
                        <h4 class="card__heading">
                            <span class="card__heading-span card__heading-span--2">The Forest Hiker</span>
                        </h4>
                        <div class="card__details">
                            <ul>
                                <li>7 day tours</li>
                                <li>Up to 40 people</li>
                                <li>6 tour guides</li>
                                <li>Sleep in provided tents</li>
                                <li>Difficulty: medium</li>
                            </ul>
                        </div>

                    </div>
                    <div class="card__side card__side--back card__side--back-2">
                        <div class="card__cta">
                            <div class="card__price-box">
                                <p class="card__price-only">Only</p>
                                <p class="card__price-value">$497</p>
                            </div>
                            <a href="#popup" class="btn btn--white">Book now!</a>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-1-of-3">
                <div class="card">
                    <div class="card__side card__side--front">
                        <div class="card__picture card__picture--3">
                            &nbsp;
                        </div>
                        <h4 class="card__heading">
                            <span class="card__heading-span card__heading-span--3">The Snow Adventurer</span>
                        </h4>
                        <div class="card__details">
                            <ul>
                                <li>5 day tours</li>
                                <li>Up to 15 people</li>
                                <li>3 tour guides</li>
                                <li>Sleep in provided tents</li>
                                <li>Difficulty: hard</li>
                            </ul>
                        </div>

                    </div>
                    <div class="card__side card__side--back card__side--back-3">
                        <div class="card__cta">
                            <div class="card__price-box">
                                <p class="card__price-only">Only</p>
                                <p class="card__price-value">$897</p>
                            </div>
                            <a href="#popup" class="btn btn--white">Book now!</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

      <!--  <div class="u-center-text u-margin-top-huge">
            <a href="#" class="btn btn--green">Discover all tours</a>
      -->
        </div>
    </section>


 <script type="text/javascript" src="./js/jquery.1.11.1.js"></script>
      <script type="text/javascript" src="./js/bootstrap.min.js"></script>
      <script type="text/javascript" src="./js/SmoothScroll.js"></script>
      <script type="text/javascript" src="./js/jquery.prettyPhoto.js"></script>
      <script type="text/javascript" src="./js/jquery.isotope.js"></script>
      <script type="text/javascript" src="./js/jqBootstrapValidation.js"></script>
      <script type="text/javascript" src="./js/contact_me.js"></script>
      <script type="text/javascript" src="./js/main.js"></script>
      <!--<script type="text/javascript" src="./js/countdown.js"></script>-->
      <script type="text/javascript" src="./js/countdown.js"></script>
</body>

</html>