From 3478c761c34e30142d465c3f8bb1965d12aef2e3 Mon Sep 17 00:00:00 2001
From: Ridhav Modi <ridhavgarg01@gmail.com>
Date: Fri, 19 Oct 2018 22:37:45 +0530
Subject: [PATCH] Donate us popup fixed

---
 Projects.html          | 85 +++++++++++++++++++++++++++++++++++++++++-
 about.html             | 84 +++++++++++++++++++++++++++++++++++++++++
 contact.html           | 73 +++++++++++++++++++++++++++++++++++-
 css/donation-popup.css |  2 +-
 4 files changed, 241 insertions(+), 3 deletions(-)
diff --git a/Projects.html b/Projects.html
index 966bca0..65790cf 100644
--- a/Projects.html
+++ b/Projects.html
@@ -32,9 +32,13 @@
 	<!-- Magnific Popup -->
 	<link rel="stylesheet" href="css/magnific-popup.css">
 
+	<!-- PopUp CSS-->
+    <link rel="stylesheet" href="css/donation-popup.css">
+
 	<!-- Theme style  -->
 	<link rel="stylesheet" href="css/style.css">
-
+	<!-- jQuery -->
+	<script src="js/jquery.min.js"></script>
 	<!-- Modernizr JS -->
 	<script src="js/modernizr-2.6.2.min.js"></script>
 	<!-- FOR IE9 below -->
@@ -42,6 +46,15 @@
 	<script src="js/respond.min.js"></script>
 	<![endif]-->
 
+	<!-- popup script -->
+	<script>
+        $(document).ready(function () {
+            $("#donate-us").click(function () {
+                $('#myModal').modal('show');
+            });
+        });
+    </script>
+
 	</head>
 	<body>
 
@@ -192,6 +205,74 @@ <h3>USEFUL LINKS </h3>
     </div>
 </div>
 	</div>
+<div class="container">
+    <!--<h2>Large Modal</h2>-->
+    <!-- Trigger the modal with a button -->
+    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>-->
+
+    <!-- Modal -->
+    <div class="modal fade" id="myModal" role="dialog">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content" style="height: 413px; background: #F0F5F9">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <!--<h4 class="modal-title">Modal Header</h4>-->
+                </div>
+                <div class="modal-body">
+                    <!--POPUP-->
+                    <div class="popup-style" id="popup">
+                        <div class="col1">
+                            <div class="card">
+                                <div class="front">
+                                    <div class="type">
+                                        <img class="bankid"/>
+                                    </div>
+                                    <span class="chip"></span>
+                                    <span class="card_number">&#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; </span>
+                                    <div class="date"><span class="date_value">MM / YYYY</span></div>
+                                    <span class="fullname">FULL NAME</span>
+                                </div>
+                                <div class="back">
+                                    <div class="magnetic"></div>
+                                    <div class="bar"></div>
+                                    <span class="seccode">&#x25CF;&#x25CF;&#x25CF;</span>
+                                    <span class="chip"></span><span class="disclaimer">This card is property of Random Bank of Random corporation. <br> If found please return to Random Bank of Random corporation - 21968 Paris, Verdi Street, 34 </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col2">
+                            <label>Card Number</label>
+                            <input class="number" type="text" ng-model="ncard" maxlength="19"
+                                   onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+                            <label>Cardholder name</label>
+                            <input class="inputname" type="text" placeholder=""/>
+                            <label>Expiry date</label>
+                            <input class="expire" type="text" placeholder="MM / YYYY"/>
+                            <div class="row">
+                                <div class="col-md-7"> 
+                            <label>Security Number</label>
+                            <input class="ccv" type="text" placeholder="CVV" maxlength="3"
+                                   onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+                               </div>
+                               <div class="col-md-5">
+                            <label id="stick-left">Amount($)</label>
+                            <input class="amount" type="text" maxlength="8"
+                                   onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+                               </div>
+                               </div>
+                            <button class="buy"><i class="material-icons">lock</i> Pay </button>
+                        </div>
+                    </div>
+                    <!--POPUP END-->
+                </div>
+                <!--<div class="modal-footer">-->
+                <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
+                <!--</div>-->
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END POPUP-->
 
 	<div class="gototop js-top">
 		<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
@@ -212,6 +293,8 @@ <h3>USEFUL LINKS </h3>
 	<script src="js/magnific-popup-options.js"></script>
 	<!-- Stellar -->
 	<script src="js/jquery.stellar.min.js"></script>
+	<!-- Donation popup  -->
+	<script src="js/donation-popup.js"></script>
 	<!-- Main -->
 	<script src="js/main.js"></script>
 
diff --git a/about.html b/about.html
index 0e99746..917e8d3 100644
--- a/about.html
+++ b/about.html
@@ -21,14 +21,27 @@
 
 	<!-- Theme style  -->
 	<link rel="stylesheet" href="css/style.css">
+	<!-- PopUp CSS-->
+    <link rel="stylesheet" href="css/donation-popup.css">
 
 	<!-- Modernizr JS -->
 	<script src="js/modernizr-2.6.2.min.js"></script>
+	<!-- jQuery -->
+	<script src="js/jquery.min.js"></script>
 	<!-- FOR IE9 below -->
 	<!--[if lt IE 9]>
 	<script src="js/respond.min.js"></script>
 	<![endif]-->
 
+	<!-- popup script -->
+	<script>
+        $(document).ready(function () {
+            $("#donate-us").click(function () {
+                $('#myModal').modal('show');
+            });
+        });
+    </script>
+
 <style>
 .divsize
 {
@@ -263,6 +276,75 @@ <h3>USEFUL LINKS </h3>
     </div>
 </div>
 	</div>
+	<div class="container">
+    <!--<h2>Large Modal</h2>-->
+    <!-- Trigger the modal with a button -->
+    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>-->
+
+    <!-- Modal -->
+    <div class="modal fade" id="myModal" role="dialog">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content" style="height: 413px; background: #F0F5F9">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <!--<h4 class="modal-title">Modal Header</h4>-->
+                </div>
+                <div class="modal-body">
+                    <!--POPUP-->
+                    <div class="popup-style" id="popup">
+                        <div class="col1">
+                            <div class="card">
+                                <div class="front">
+                                    <div class="type">
+                                        <img class="bankid"/>
+                                    </div>
+                                    <span class="chip"></span>
+                                    <span class="card_number">&#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; </span>
+                                    <div class="date"><span class="date_value">MM / YYYY</span></div>
+                                    <span class="fullname">FULL NAME</span>
+                                </div>
+                                <div class="back">
+                                    <div class="magnetic"></div>
+                                    <div class="bar"></div>
+                                    <span class="seccode">&#x25CF;&#x25CF;&#x25CF;</span>
+                                    <span class="chip"></span><span class="disclaimer">This card is property of Random Bank of Random corporation. <br> If found please return to Random Bank of Random corporation - 21968 Paris, Verdi Street, 34 </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col2">
+                            <label>Card Number</label>
+                            <input class="number" type="text" ng-model="ncard" maxlength="19"
+                                   onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+                            <label>Cardholder name</label>
+                            <input class="inputname" type="text" placeholder=""/>
+                            <label>Expiry date</label>
+                            <input class="expire" type="text" placeholder="MM / YYYY"/>
+                            <div class="row">
+                                <div class="col-md-7"> 
+                            <label>Security Number</label>
+                            <input class="ccv" type="text" placeholder="CVV" maxlength="3"
+                                   onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+                               </div>
+                               <div class="col-md-5">
+                            <label id="stick-left">Amount($)</label>
+                            <input class="amount" type="text" maxlength="8"
+                                   onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+                               </div>
+                               </div>
+                            <button class="buy"><i class="material-icons">lock</i> Pay </button>
+                        </div>
+                    </div>
+                    <!--POPUP END-->
+                </div>
+                <!--<div class="modal-footer">-->
+                <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
+                <!--</div>-->
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END POPUP-->
+
 
 	<div class="gototop js-top">
 		<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
@@ -285,6 +367,8 @@ <h3>USEFUL LINKS </h3>
 	<script src="js/jquery.stellar.min.js"></script>
 	<!-- Main -->
 	<script src="js/main.js"></script>
+	<!-- Donation popup  -->
+	<script src="js/donation-popup.js"></script>
 
 	</body>
 </html>
diff --git a/contact.html b/contact.html
index 4712e7b..0bfe80e 100644
--- a/contact.html
+++ b/contact.html
@@ -40,7 +40,8 @@
 
 	<!-- Theme style  -->
 	<link rel="stylesheet" href="css/style.css">
-
+	<!-- PopUp CSS-->
+    <link rel="stylesheet" href="css/donation-popup.css">
 	<!-- Modernizr JS -->
 	<script src="js/modernizr-2.6.2.min.js"></script>
 	<!-- FOR IE9 below -->
@@ -201,6 +202,74 @@ <h3>USEFUL LINKS </h3>
     </div>
 </div>
 	</div>
+<div class="container">
+    <!--<h2>Large Modal</h2>-->
+    <!-- Trigger the modal with a button -->
+    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>-->
+
+    <!-- Modal -->
+    <div class="modal fade" id="myModal" role="dialog">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content" style="height: 413px; background: #F0F5F9">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <!--<h4 class="modal-title">Modal Header</h4>-->
+                </div>
+                <div class="modal-body">
+                    <!--POPUP-->
+                    <div class="popup-style" id="popup">
+                        <div class="col1">
+                            <div class="card">
+                                <div class="front">
+                                    <div class="type">
+                                        <img class="bankid"/>
+                                    </div>
+                                    <span class="chip"></span>
+                                    <span class="card_number">&#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; </span>
+                                    <div class="date"><span class="date_value">MM / YYYY</span></div>
+                                    <span class="fullname">FULL NAME</span>
+                                </div>
+                                <div class="back">
+                                    <div class="magnetic"></div>
+                                    <div class="bar"></div>
+                                    <span class="seccode">&#x25CF;&#x25CF;&#x25CF;</span>
+                                    <span class="chip"></span><span class="disclaimer">This card is property of Random Bank of Random corporation. <br> If found please return to Random Bank of Random corporation - 21968 Paris, Verdi Street, 34 </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col2">
+                            <label>Card Number</label>
+                            <input class="number" type="text" ng-model="ncard" maxlength="19"
+                                   onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+                            <label>Cardholder name</label>
+                            <input class="inputname" type="text" placeholder=""/>
+                            <label>Expiry date</label>
+                            <input class="expire" type="text" placeholder="MM / YYYY"/>
+                            <div class="row">
+                                <div class="col-md-7"> 
+                            <label>Security Number</label>
+                            <input class="ccv" type="text" placeholder="CVV" maxlength="3"
+                                   onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+                               </div>
+                               <div class="col-md-5">
+                            <label id="stick-left">Amount($)</label>
+                            <input class="amount" type="text" maxlength="8"
+                                   onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+                               </div>
+                               </div>
+                            <button class="buy"><i class="material-icons">lock</i> Pay </button>
+                        </div>
+                    </div>
+                    <!--POPUP END-->
+                </div>
+                <!--<div class="modal-footer">-->
+                <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
+                <!--</div>-->
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END POPUP-->
 
 	<div class="gototop js-top">
 		<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
@@ -221,6 +290,8 @@ <h3>USEFUL LINKS </h3>
 	<script src="js/magnific-popup-options.js"></script>
 	<!-- Stellar -->
 	<script src="js/jquery.stellar.min.js"></script>
+	<!-- Donation popup  -->
+	<script src="js/donation-popup.js"></script>
 	<!-- Main -->
 	<script src="js/main.js"></script>
 
diff --git a/css/donation-popup.css b/css/donation-popup.css
index ba17d55..8d5ff4b 100644
--- a/css/donation-popup.css
+++ b/css/donation-popup.css
@@ -24,7 +24,7 @@ body {
   padding: 2px 15px; }
 
 .popup-style {
-  padding-top: 161px;
+  padding-top: 300px;
   position: absolute;
   display: flex;
   flex-direction: row;
