cards page

melnychukJS · Feb 20, 2016 · 985c8eb · 985c8eb
1 parent 7e6d8a9
commit 985c8eb
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 9 deletions.
diff --git a/html/cards.html b/html/cards.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>PugSave</title>
+		<meta name="viewport" content="width=device-width">
+		<meta charset="utf-8">
+		<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
+		<link rel="stylesheet" href="stylesheet.css">
+		<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
+		<meta name="apple-mobile-web-app-capable" content="yes">
+	</head>
+	<body>
+		<div class="menu pure-g">
+		    <div class="pure-u-1-3">
+		    	<p><a href="index.html" class="icon piggy-icon">
+		    		<img src="pig_icon.png">
+		    	</a></p>
+		    </div>
+		    <div class="pure-u-1-3">
+		    	<p><a href="stats.html" class="icon stats-icon">
+		    		<img src="graph_icon.png">
+		    	</a></p>
+		    </div>
+		    <div class="pure-u-1-3 selected">
+		    	<p><a href="settings.html" class="icon settings-icon">
+		    		<img src="wheel_icon.png">
+		    	</a></p>
+		    </div>
+		</div>
+		<div class="pure-g background">
+      <div class="card">xxxx xxxx xxxx 0239</div>
+      <div class="dashit"></div>
+      <div class="card">xxxx xxxx xxxx 6084</div>
+      <div class="dashit"></div>
+      <div class="card">xxxx xxxx xxxx 0239</div>
+      <div class="dashit"></div>
+      <div class="card elaborated">xxxx xxxx xxxx 6084</div>
+      <div class="dashit"></div>
+		</div>
+	</body>
+	<style>
+
+		.menu{
+			text-align: center;
+			border-bottom: 1px solid black;
+		}
+		.border_bottom{
+			border-bottom: 1px solid rgba(0, 0, 0, 0.14);
+		}
+
+		.menu_button{
+			padding-left:10%;
+			padding-right:10%;
+		}
+		.float_left{
+			float: left;
+		}
+		.float_right{
+			float: right;
+		}
+		.div_at_bottom{
+			width:100%;
+			bottom:9.5%;
+		}
+
+		.upper_button{
+			background-color:#E0951A;
+			color: #fff;
+			border:0;
+			border-bottom: 3px outset #cd8818;
+		}
+
+		.lower_button{
+			margin-top:7%;
+			background-color:#4A4A4A;
+			color: #fff;
+			border:0;
+			border-bottom: 3px outset #404040;
+		}
+
+		.lower_button, .upper_button{
+			width:70%;
+			margin-left:auto;
+			margin-right:auto;
+			text-align: center;
+			vertical-align: middle;
+			line-height: 100%;
+			border-radius:5px;
+			font-weight: bold;
+			font-size:18px;
+		}
+
+	</style>
+</head>
diff --git a/html/settings.html b/html/settings.html
@@ -16,7 +16,7 @@
 		    		<img src="pig_icon.png">
 		    	</a></p>
 		    </div>
-		    <div class="pure-u-1-3"> 
+		    <div class="pure-u-1-3">
 		    	<p><a href="stats.html" class="icon stats-icon">
 		    		<img src="graph_icon.png">
 		    	</a></p>
@@ -28,7 +28,7 @@
 		    </div>
 		</div>
 		<div class="pure-g background">
-			<div class="pure-u-5-5 border_bottom menu_button"><a href="#"><span class="float_left"><p>MY CARDS</p></span><span class="float_right"><p>▶</p></span></a></div>
+			<div class="pure-u-5-5 border_bottom menu_button"><a href="cards.html"><span class="float_left"><p>MY CARDS</p></span><span class="float_right"><p>▶</p></span></a></div>
 			<div class="pure-u-5-5 border_bottom menu_button"><a href="settings_sec.html"><span class="float_left"><p>PERCENTAGES</p></span><span class="float_right"><p>▶</p></a></span></div>
 			<div class="pure-u-5-5 border_bottom menu_button"><a href="#"><span class="float_left"><p>NOTIFICATIONS</p></span><span class="float_right"><p>▶</p></span></a></div>
 			<div class="pure-u-5-5 border_bottom menu_button"><a href="#"><span class="float_left"><p>HELP</p></span><span class="float_right"><p>▶</p></span></a></div>
@@ -62,22 +62,22 @@
 			width:100%;
 			bottom:9.5%;
 		}
-		
+
 		.upper_button{
 			background-color:#E0951A;
 			color: #fff;
 			border:0;
 			border-bottom: 3px outset #cd8818;
 		}
-		
+
 		.lower_button{
 			margin-top:7%;
 			background-color:#4A4A4A;
 			color: #fff;
 			border:0;
 			border-bottom: 3px outset #404040;
 		}
-		
+
 		.lower_button, .upper_button{
 			width:70%;
 			margin-left:auto;
@@ -90,5 +90,5 @@
 			font-size:18px;
 		}
 
-	</style>		
-</head>
+	</style>
+</head>
diff --git a/html/stylesheet.css b/html/stylesheet.css
@@ -82,7 +82,7 @@ a:visited{
 .table > .title{
 	font-size: 20px;
 	font-weight: bold;
-} 
+}
 .real-table{
 	margin-top: 5px;
 }
@@ -122,4 +122,17 @@ a:visited{
 	position: fixed;
 	bottom: 0;
 	border-top: 1px solid rgba(74, 74, 74, 0.14);
-}
+}
+.card{
+	float: left;
+	width: 100%;
+	height: 40px;
+	border-bottom: 1px solid #4a4a4a;
+	text-align: center;
+}
+.dashit{
+ width: 90%;
+ border-bottom: 1px solid #4a4a4a;
+ border-style: dashed;
+ margin-top: 5px;
+}