<html>
  <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
    color: white;
}

.bg {
  /* The image used */
  background-image: url("./images2/background.gif");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.flip-card {
  background-color: transparent;
  width: 100px;
  height: 100px;
  perspective: 1000px;
  float: right;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: transparent;
  color: black;
  border-radius: 100%;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

.div-right {
padding-right: 130px;
}

</style>
    <title>Breezesofty</title>
  </head>
  <body>
    <div class="bg">
        <div>
                <a href="./index.html">
                        <img src="./images2/bslogo.svg" alt="Logo" style="float:top;width:140px;height:90px;">
                </a>
                <a href="./contact.html">
                        <img src="./images2/contactus.svg" alt="contactus" style="float:top; vertical-align: top; padding: 0px 0px 0px 80px; width:100px;height:50px;">
                </a>
                <a href="./about.html">
                        <img src="./images2/aboutus.svg" alt="aboutus" style="float:top; vertical-align: top; padding: 0px 0px 0px 50px; width:100px;height:50px;">
                </a>
                <a href="./menuhelp.html">
                        <img src="./images2/helper.gif" alt="videohelp" style="float:center; vertical-align: top; padding: 0px 0px 0px 80px; width:180px;height:130px;">
                </a>

                <a href="./login.html">
                        <img src="./images2/login.svg" alt="loginlogout" style="float:right;padding: 10px 0px 0px 10px; width:80px;height:60px;">
                </a>
        </div>
        <div class="div-right">
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/ai.svg" alt="AI" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                    <a href="https://www.breezesofty.com/ai.html">              
                      <h3>AI/ML</h3>
                      <p>Artificial Intelligence<p>
                    </a>
                    </div>
                  </div>
                </div>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/compare.svg" alt="Comparer" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                            <a href="https://www.breezesofty.com/compare.html">
                      <h3>Comparer</h3>
                      <p>Compare two text files</p>
                            </a>
                    </div>
                  </div>
                </div>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/tutor.svg" alt="Tutorial" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                      <h3>Online Tutorial</h3>
                      <p>Video tutor</p>
                    </div>
                  </div>
                </div>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/grid.svg" alt="Grid" style="width:95px;height:95px;">
                    </div>
                    <div class="flip-card-back">
                      <a href="https://www.breezesofty.com/csvtogrid.html">                      
                      <h3>CSV 2 Grid</h3>
                      <p>CSV Editor</p>
                    </div>
                  </div>
                </div>                
        </div>
        <div class="div-right">
                <p></p><p></p><p></p><br><br><br><br><br>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/replicate.svg" alt="Replicator" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                            <a href="https://www.breezesofty.com/replicator.html">
                      <h3>Replicator</h3>
                      <p>Rapid configuration</p>
                            </a>
                    </div>
                  </div>
                </div>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/present.svg" alt="Presenter" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                            <a href="https://www.breezesofty.com/presentation.html">
                      <h3>Presentor</h3>
                      <p>Slideshow Annotator</p>
                      <p>Annotator</p>
                            </a>
                    </div>
                  </div>
                </div>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/subnet.svg" alt="SubnetCalc" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                            <a href="https://www.breezesofty.com/subnetcalc.html">
                      <h3>Subnet Calculator</h3>
                      <p>Network</p>
                            </a>
                    </div>
                  </div>
                </div>
        </div>
        <div class="div-right">
                <p></p><p></p><p></p><br><br><br><br><br>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/db.svg" alt="Database" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                        <a href="https://www.breezesofty.com/csvfile.html">                        
                      <h3>Database</h3>
                      <p>Easy DB Maker</p>
                    </div>
                  </div>
                </div>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/namecard.svg" alt="Namecard" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                      <h3>Card Maker</h3>
                      <p>Ecard</p>
                    </div>
                  </div>
                </div>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/ad.svg" alt="Advertiser" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                      <h3>Classified Ads</h3>
                      <p>Advertiser</p>
                    </div>
                  </div>
                </div>
        </div>
        <div class="div-right">
                <p></p><p></p><p></p><br><br><br><br><br>
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="flip-card-front">
                      <img src="./images2/survey.svg" alt="Esurvey" style="width:100px;height:100px;">
                    </div>
                    <div class="flip-card-back">
                      <h3>Esurvey</h3>
                      <p>Survey Maker</p>
                    </div>
                  </div>
                </div>
        </div>
    </div>
  <script type="text/javascript" src="./js/menu.js"></script>
  <script>
        function ai1() {
                window.open("https://dev.breezesofty.com/aiimage.html","_blank");
        }

        function colour() {
                window.open("https://dev.breezesofty.com/color.html","_blank");
        }

        function geoloc() {
                window.open("https://dev.breezesofty.com/geoloc.html","_blank");
        }

        function voc() {
                window.open("https://dev.breezesofty.com/voc.html","_blank");
        }

        function face() {
                window.open("https://dev.breezesofty.com/face.html","_blank");
        }

        function bodyseg() {
                window.open("https://dev.breezesofty.com/bodyseg.html","_blank");
        }
  </script>
  </body>
</html>
