2つの異なる選択ドロップダウン値に基づくjavascriptの表示結果

Question

私のHTMLブートストラップテンプレートに問題があります。ここで私は2つの選択ドロップダウンメニューがあり、私はこの2つの選択された値に基づいて結果を表示したい...どのようにすべての結果を非表示にすることができ、それは選択された値のみに基づいて表示されます。あなたは両方のzodaic_sign選択のための変更イベントを使用することができます

<div class="row"> 
<div class="col-md-8"> 
    <div class="row"> 
     <div class="col-xs-12 m-t-26"> 
      <h1>Love Compatibility</h1> 
      <hr> 
      <p class="elements_desc"> 
       Find out if your partnership will go all the way. Some sun signs naturally work well together, 
       but others need to compromise to make it work! 
      </p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-4"> 
      <div class="sign taurus"> 
       <div class="circle bg-taurus "> 
        <img src="images/lovecompatibility-icons/taurusl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-taurus">Taurus</span><br> 
        <span class="font14">Apr 20 - May 20</span> 
       </div> 
      </div> 
      <div class="sign gemini sign_display"> 
       <div class="circle bg-gemini"> 
        <img src="images/lovecompatibility-icons/geminil.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-gemini">Gemini</span><br> 
        <span class="font14">May 21 - Jun 20</span> 
       </div> 
      </div> 
      <div class="sign cancer sign_display"> 
       <div class="circle bg-cancer"> 
        <img src="images/lovecompatibility-icons/cancerl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-cancer">Cancer</span><br> 
        <span class="font14">Jun 21 - Jul 22</span> 
       </div> 
      </div> 
      <div class="sign leo sign_display"> 
       <div class="circle bg-leo"> 
        <img src="images/lovecompatibility-icons/leol.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-leo">Leo</span><br> 
        <span class="font14">Jul 23 - Aug 22</span> 
       </div> 
      </div> 
      <div class="sign aries sign_display"> 
       <div class="circle bg-aries"> 
        <img src="images/aries.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-aries">Aries</span><br> 
        <span class="font14">Mar 21 - Apr 19</span> 
       </div> 
      </div> 
      <div class="sign virgo sign_display"> 
       <div class="circle bg-virgo"> 
        <img src="images/lovecompatibility-icons/virgol.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-virgo">Virgo</span><br> 
        <span class="font14">Aug 23 - Sep 22</span> 
       </div> 
      </div> 
      <div class="sign libra sign_display"> 
       <div class="circle bg-libra"> 
        <img src="images/lovecompatibility-icons/libral.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-libra">Libra</span><br> 
        <span class="font14">Sep 23 - Oct 22</span> 
       </div> 
      </div> 
      <div class="sign scorpio sign_display"> 
       <div class="circle bg-scorpio"> 
        <img src="images/lovecompatibility-icons/scorpiol.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-scorpio">Scorpio</span><br> 
        <span class="font14">Oct 23 - Nov 21</span> 
       </div> 
      </div> 
      <div class="sign sagittarius sign_display"> 
       <div class="circle bg-sagittarius"> 
        <img src="images/lovecompatibility-icons/sagittariusl.png" alt="image-missing" 
         class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-sagittarius">Sagittarius</span><br> 
        <span class="font14">Nov 22 - Dec 21</span> 
       </div> 
      </div> 
      <div class="sign capricon sign_display"> 
       <div class="circle bg-capricorn"> 
        <img src="images/lovecompatibility-icons/capricornl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-capricorn">Capricorn</span><br> 
        <span class="font14">Dec 22 - Jan 19</span> 
       </div> 
      </div> 
      <div class="sign aquarius sign_display"> 
       <div class="circle bg-aquarius"> 
        <img src="images/lovecompatibility-icons/aquariusl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-aquarius">Aquarius</span><br> 
        <span class="font14">Jan 20 - Feb 18</span> 
       </div> 
      </div> 
      <div class="sign pisces sign_display"> 
       <div class="circle bg-pisces"> 
        <img src="images/lovecompatibility-icons/piscesl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-pisces">Pisces</span><br> 
        <span class="font14">Feb 19 - Mar 20</span> 
       </div> 
      </div> 
      <div class="footer_select_section"> 
       <select class="form-control love_select" name="zodaic_sign" id="zodaic_sign"> 
        <option value="taurus">Taurus</option> 
        <option value="aries">Aries</option> 
        <option value="gemini">Gemini</option> 
        <option value="cancer">Cancer</option> 
        <option value="leo">Leo</option> 
        <option value="virgo">Virgo</option> 
        <option value="libra">Libra</option> 
        <option value="scorpio">Scorpio</option> 
        <option value="sagittarius">Sagittarius</option> 
        <option value="capricon">Capricorn</option> 
        <option value="aquarius">Aquarius</option> 
        <option value="pisces">Pisces</option> 
       </select> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-4 heart_div"> 
      <img src="images/lovecompatibility-icons/valentines-heart.png" class="img-responsive heart_image" 
       alt="image-missing"> 
     </div> 
     <div class="col-xs-12 col-sm-4"> 
      <div class="sign1 gemini1"> 
       <div class="circle bg-gemini"> 
        <img src="images/lovecompatibility-icons/geminil.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-gemini">Gemini</span><br> 
        <span class="font14">May 21 - Jun 20</span> 
       </div> 
      </div> 
      <div class="sign1 taurus1 sign_display"> 
       <div class="circle bg-taurus"> 
        <img src="images/lovecompatibility-icons/taurusl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-taurus">Taurus</span><br> 
        <span class="font14">Apr 20 - May 20</span> 
       </div> 
      </div> 
      <div class="sign1 cancer1 sign_display"> 
       <div class="circle bg-cancer"> 
        <img src="images/lovecompatibility-icons/cancerl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-cancer">Cancer</span><br> 
        <span class="font14">Jun 21 - Jul 22</span> 
       </div> 
      </div> 
      <div class="sign1 leo1 sign_display"> 
       <div class="circle bg-leo"> 
        <img src="images/lovecompatibility-icons/leol.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-leo">Leo</span><br> 
        <span class="font14">Jul 23 - Aug 22</span> 
       </div> 
      </div> 
      <div class="sign1 aries1 sign_display"> 
       <div class="circle bg-aries"> 
        <img src="images/aries.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-aries">Aries</span><br> 
        <span class="font14">Mar 21 - Apr 19</span> 
       </div> 
      </div> 
      <div class="sign1 virgo1 sign_display"> 
       <div class="circle bg-virgo"> 
        <img src="images/lovecompatibility-icons/virgol.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-virgo">Virgo</span><br> 
        <span class="font14">Aug 23 - Sep 22</span> 
       </div> 
      </div> 
      <div class="sign1 libra1 sign_display"> 
       <div class="circle bg-libra"> 
        <img src="images/lovecompatibility-icons/libral.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-libra">Libra</span><br> 
        <span class="font14">Sep 23 - Oct 22</span> 
       </div> 
      </div> 
      <div class="sign1 scorpio1 sign_display"> 
       <div class="circle bg-scorpio"> 
        <img src="images/lovecompatibility-icons/scorpiol.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-scorpio">Scorpio</span><br> 
        <span class="font14">Oct 23 - Nov 21</span> 
       </div> 
      </div> 
      <div class="sign1 sagittarius1 sign_display"> 
       <div class="circle bg-sagittarius"> 
        <img src="images/lovecompatibility-icons/sagittariusl.png" alt="image-missing" 
         class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-sagittarius">Sagittarius</span><br> 
        <small class="font14">Nov 22 - Dec 21</small> 
       </div> 
      </div> 
      <div class="sign1 capricon1 sign_display"> 
       <div class="circle bg-capricorn"> 
        <img src="images/lovecompatibility-icons/capricornl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-capricorn">Capricorn</span><br> 
        <span class="font14">Dec 22 - Jan 19</span> 
       </div> 
      </div> 
      <div class="sign1 aquarius1 sign_display"> 
       <div class="circle bg-aquarius"> 
        <img src="images/lovecompatibility-icons/aquariusl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-aquarius">Aquarius</span><br> 
        <span class="font14">Jan 20 - Feb 18</span> 
       </div> 
      </div> 
      <div class="sign1 pisces1 sign_display"> 
       <div class="circle bg-pisces"> 
        <img src="images/lovecompatibility-icons/piscesl.png" alt="image-missing" class="rotate"> 
       </div> 
       <div class="card text-center main"> 
        <span class="font24 text-pisces">Pisces</span><br> 
        <span class="font14">Feb 19 - Mar 20</span> 
       </div> 
      </div> 
      <div class="footer_select_section"> 
       <select class="form-control love_select" name="zodaic_sign1" id="zodaic_sign1"> 
        <option value="gemini1">Gemini</option> 
        <option value="aries1">Aries</option> 
        <option value="taurus1">Taurus</option> 
        <option value="cancer1">Cancer</option> 
        <option value="leo1">Leo</option> 
        <option value="virgo1">Virgo</option> 
        <option value="libra1">Libra</option> 
        <option value="scorpio1">Scorpio</option> 
        <option value="sagittarius1">Sagittarius</option> 
        <option value="capricon1">Capricon</option> 
        <option value="aquarius1">Aquarius</option> 
        <option value="pisces1">Pisces</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <div class="row m-t-26"> 
     <div class="col-xs-12 text-center wow pulse" data-wow-duration="1s" data-wow-delay="0.1s"> 
      <a href="love_compatibility_result.html" class="btn btn-md btn-primary ">Get Your Compatibility</a> 
     </div> 
    </div> 

Answer 1

。

以下では、各行のコメント付きスニペットを示します。

$('#zodaic_sign').on('change', function (e) { 
 
    // 
 
    // get the current selected text 
 
    // 
 
    var selValue = $(this).find('option:selected').text(); 
 
    // 
 
    // get the anchestor col 
 
    // 
 
    var anchestor = $(this).closest('.col-xs-12.col-sm-4'); 
 
    // 
 
    // hide all elements 
 
    // 
 
    anchestor.find('.sign').hide(); 
 
    // 
 
    // show the element containing the selected zodiac sign 
 
    // 
 
    anchestor.find('.sign:contains(' + selValue + ')').show(); 
 
}).trigger('change'); 
 

 
// 
 
// see to the previous handler.... 
 
// 
 
$('#zodaic_sign1').on('change', function (e) { 
 
    var selValue = $(this).find('option:selected').text(); 
 
    var anchestor = $(this).closest('.col-xs-12.col-sm-4'); 
 
    anchestor.find('.sign1').hide(); 
 
    anchestor.find('.sign1:contains(' + selValue + ')').show(); 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="row"> 
 
    <div class="col-md-8"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 m-t-26"> 
 
       <h1>Love Compatibility</h1> 
 
       <hr> 
 
       <p class="elements_desc"> 
 
        Find out if your partnership will go all the way. Some sun signs naturally work well together, 
 
        but others need to compromise to make it work! 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-4"> 
 
       <div class="sign taurus"> 
 
        <div class="circle bg-taurus "> 
 
         <img src="images/lovecompatibility-icons/taurusl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-taurus">Taurus</span><br> 
 
         <span class="font14">Apr 20 - May 20</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign gemini sign_display"> 
 
        <div class="circle bg-gemini"> 
 
         <img src="images/lovecompatibility-icons/geminil.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-gemini">Gemini</span><br> 
 
         <span class="font14">May 21 - Jun 20</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign cancer sign_display"> 
 
        <div class="circle bg-cancer"> 
 
         <img src="images/lovecompatibility-icons/cancerl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-cancer">Cancer</span><br> 
 
         <span class="font14">Jun 21 - Jul 22</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign leo sign_display"> 
 
        <div class="circle bg-leo"> 
 
         <img src="images/lovecompatibility-icons/leol.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-leo">Leo</span><br> 
 
         <span class="font14">Jul 23 - Aug 22</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign aries sign_display"> 
 
        <div class="circle bg-aries"> 
 
         <img src="images/aries.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-aries">Aries</span><br> 
 
         <span class="font14">Mar 21 - Apr 19</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign virgo sign_display"> 
 
        <div class="circle bg-virgo"> 
 
         <img src="images/lovecompatibility-icons/virgol.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-virgo">Virgo</span><br> 
 
         <span class="font14">Aug 23 - Sep 22</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign libra sign_display"> 
 
        <div class="circle bg-libra"> 
 
         <img src="images/lovecompatibility-icons/libral.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-libra">Libra</span><br> 
 
         <span class="font14">Sep 23 - Oct 22</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign scorpio sign_display"> 
 
        <div class="circle bg-scorpio"> 
 
         <img src="images/lovecompatibility-icons/scorpiol.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-scorpio">Scorpio</span><br> 
 
         <span class="font14">Oct 23 - Nov 21</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign sagittarius sign_display"> 
 
        <div class="circle bg-sagittarius"> 
 
         <img src="images/lovecompatibility-icons/sagittariusl.png" alt="image-missing" 
 
          class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-sagittarius">Sagittarius</span><br> 
 
         <span class="font14">Nov 22 - Dec 21</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign capricon sign_display"> 
 
        <div class="circle bg-capricorn"> 
 
         <img src="images/lovecompatibility-icons/capricornl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-capricorn">Capricorn</span><br> 
 
         <span class="font14">Dec 22 - Jan 19</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign aquarius sign_display"> 
 
        <div class="circle bg-aquarius"> 
 
         <img src="images/lovecompatibility-icons/aquariusl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-aquarius">Aquarius</span><br> 
 
         <span class="font14">Jan 20 - Feb 18</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign pisces sign_display"> 
 
        <div class="circle bg-pisces"> 
 
         <img src="images/lovecompatibility-icons/piscesl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-pisces">Pisces</span><br> 
 
         <span class="font14">Feb 19 - Mar 20</span> 
 
        </div> 
 
       </div> 
 
       <div class="footer_select_section"> 
 
        <select class="form-control love_select" name="zodaic_sign" id="zodaic_sign"> 
 
         <option value="taurus">Taurus</option> 
 
         <option value="aries">Aries</option> 
 
         <option value="gemini">Gemini</option> 
 
         <option value="cancer">Cancer</option> 
 
         <option value="leo">Leo</option> 
 
         <option value="virgo">Virgo</option> 
 
         <option value="libra">Libra</option> 
 
         <option value="scorpio">Scorpio</option> 
 
         <option value="sagittarius">Sagittarius</option> 
 
         <option value="capricon">Capricorn</option> 
 
         <option value="aquarius">Aquarius</option> 
 
         <option value="pisces">Pisces</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-4 heart_div"> 
 
       <img src="images/lovecompatibility-icons/valentines-heart.png" class="img-responsive heart_image" 
 
        alt="image-missing"> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-4"> 
 
       <div class="sign1 gemini1"> 
 
        <div class="circle bg-gemini"> 
 
         <img src="images/lovecompatibility-icons/geminil.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-gemini">Gemini</span><br> 
 
         <span class="font14">May 21 - Jun 20</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 taurus1 sign_display"> 
 
        <div class="circle bg-taurus"> 
 
         <img src="images/lovecompatibility-icons/taurusl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-taurus">Taurus</span><br> 
 
         <span class="font14">Apr 20 - May 20</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 cancer1 sign_display"> 
 
        <div class="circle bg-cancer"> 
 
         <img src="images/lovecompatibility-icons/cancerl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-cancer">Cancer</span><br> 
 
         <span class="font14">Jun 21 - Jul 22</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 leo1 sign_display"> 
 
        <div class="circle bg-leo"> 
 
         <img src="images/lovecompatibility-icons/leol.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-leo">Leo</span><br> 
 
         <span class="font14">Jul 23 - Aug 22</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 aries1 sign_display"> 
 
        <div class="circle bg-aries"> 
 
         <img src="images/aries.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-aries">Aries</span><br> 
 
         <span class="font14">Mar 21 - Apr 19</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 virgo1 sign_display"> 
 
        <div class="circle bg-virgo"> 
 
         <img src="images/lovecompatibility-icons/virgol.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-virgo">Virgo</span><br> 
 
         <span class="font14">Aug 23 - Sep 22</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 libra1 sign_display"> 
 
        <div class="circle bg-libra"> 
 
         <img src="images/lovecompatibility-icons/libral.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-libra">Libra</span><br> 
 
         <span class="font14">Sep 23 - Oct 22</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 scorpio1 sign_display"> 
 
        <div class="circle bg-scorpio"> 
 
         <img src="images/lovecompatibility-icons/scorpiol.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-scorpio">Scorpio</span><br> 
 
         <span class="font14">Oct 23 - Nov 21</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 sagittarius1 sign_display"> 
 
        <div class="circle bg-sagittarius"> 
 
         <img src="images/lovecompatibility-icons/sagittariusl.png" alt="image-missing" 
 
          class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-sagittarius">Sagittarius</span><br> 
 
         <small class="font14">Nov 22 - Dec 21</small> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 capricon1 sign_display"> 
 
        <div class="circle bg-capricorn"> 
 
         <img src="images/lovecompatibility-icons/capricornl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-capricorn">Capricorn</span><br> 
 
         <span class="font14">Dec 22 - Jan 19</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 aquarius1 sign_display"> 
 
        <div class="circle bg-aquarius"> 
 
         <img src="images/lovecompatibility-icons/aquariusl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-aquarius">Aquarius</span><br> 
 
         <span class="font14">Jan 20 - Feb 18</span> 
 
        </div> 
 
       </div> 
 
       <div class="sign1 pisces1 sign_display"> 
 
        <div class="circle bg-pisces"> 
 
         <img src="images/lovecompatibility-icons/piscesl.png" alt="image-missing" class="rotate"> 
 
        </div> 
 
        <div class="card text-center main"> 
 
         <span class="font24 text-pisces">Pisces</span><br> 
 
         <span class="font14">Feb 19 - Mar 20</span> 
 
        </div> 
 
       </div> 
 
       <div class="footer_select_section"> 
 
        <select class="form-control love_select" name="zodaic_sign1" id="zodaic_sign1"> 
 
         <option value="gemini1">Gemini</option> 
 
         <option value="aries1">Aries</option> 
 
         <option value="taurus1">Taurus</option> 
 
         <option value="cancer1">Cancer</option> 
 
         <option value="leo1">Leo</option> 
 
         <option value="virgo1">Virgo</option> 
 
         <option value="libra1">Libra</option> 
 
         <option value="scorpio1">Scorpio</option> 
 
         <option value="sagittarius1">Sagittarius</option> 
 
         <option value="capricon1">Capricon</option> 
 
         <option value="aquarius1">Aquarius</option> 
 
         <option value="pisces1">Pisces</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="row m-t-26"> 
 
      <div class="col-xs-12 text-center wow pulse" data-wow-duration="1s" data-wow-delay="0.1s"> 
 
       <a href="love_compatibility_result.html" class="btn btn-md btn-primary ">Get Your Compatibility</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>