CSS Cards added

Neha · Neha · commit 48904f78f899 · 2019-05-05T21:13:01.000+05:30
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ This is WIP repo and less jazzy UI (I know it should be jazzy , as we are talkin
 - :white_check_mark: Alerts & Notification
 - :white_check_mark: Tags
 - :white_check_mark: List
+- :white_check_mark: Card
 - Navigation
 - Layouts
 - Gallery
diff --git a/css-cards/index.html b/css-cards/index.html
@@ -0,0 +1,17 @@
+<!Doctype html>
+<head>
+    <title>CSS Cards</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+<body>
+    <h1>CSS Cards</h1>
+    <div id="container">
+       <div class="card-container margin-around">
+           <p>This is the title</p>
+       </div>
+       <div class="card-container margin-around">
+        <p>This is the title</p>
+    </div>
+    </div>
+</body>
+</html>
diff --git a/css-cards/style.css b/css-cards/style.css
@@ -0,0 +1,45 @@
+/* Minimum Reset CSS */
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 1rem;
+    color: black;
+    box-sizing: border-box;
+}
+
+/* Global CSS */
+
+#container {
+    --padding-global: 10px;
+    width: calc(780px - var(--padding-global) * 2);
+    margin: 20px auto;
+    padding: 10px;
+    display: flex;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 40px;
+    color: #000;
+}
+
+.margin-around {
+    margin: 10px;
+}
+
+/* Example CSS */
+.card-container {
+    width: 200px;
+    height: 200px;
+    background: #fff;
+    box-shadow: 2px 2px 3px #ccc;
+    padding: 20px;
+}
+
+.card-container p {
+    line-height: 21px;
+}
