Merge pull request #45 from devshiva619/master

added popup

Author: jaskiratsingh2000

css/donation-popup.css

@@ -26,17 +26,25 @@
 	<meta name="twitter:card" content="" />
 
 	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
 	<!-- Animate.css -->
 	<link rel="stylesheet" href="css/animate.css">
 	<!-- Icomoon Icon Fonts-->
 	<link rel="stylesheet" href="css/icomoon.css">
+
+	<!-- PopUp CSS-->
+	<link rel="stylesheet" href="css/donation-popup.css">
+
 	<!-- Bootstrap  -->
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 	<!-- Optional theme -->
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 
+	<!-- jQuery -->
+	<script src="js/jquery.min.js"></script>
+
 	<!-- Latest compiled and minified JavaScript -->
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
@@ -59,6 +67,15 @@
 	<link href="https://fonts.googleapis.com/css?family=Markazi+Text" rel="stylesheet">
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 
+	<!-- jQuery UI-->
+	<script src="js/jquery-ui.min.js"></script>
+
+	<!-- POPUP SCRIPT-->
+	<script>
+		$(document).ready(function () {
+			$('#myModal').modal('show')
+		});
+	</script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style>
 html {
@@ -378,12 +395,69 @@ <h3>Concept.</h3>
 	</footer>
 	</div>
 
+	<!-- POPUP -->
+	<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: linear-gradient(to right, #d7e8ff, #9ac0ef);">
+					<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"/>
+								<label>Security Number</label>
+								<input class="ccv" type="text" placeholder="CVC" maxlength="3" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
+								<button class="buy"><i class="material-icons">lock</i> Pay 10.00 $</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>
 	</div>
 
-	<!-- jQuery -->
-	<script src="js/jquery.min.js"></script>
 	<!-- jQuery Easing -->
 	<script src="js/jquery.easing.1.3.js"></script>
 	<!-- Bootstrap -->
@@ -397,6 +471,8 @@ <h3>Concept.</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>