viralvaghela · dulcehc · Oct 6, 2020 · Oct 7, 2020 · Oct 10, 2020 · Oct 11, 2020
diff --git a/PrivacyPolicy.txt b/PrivacyPolicy.txt
@@ -0,0 +1,16 @@
+Privacy Policy
+Your privacy is important to us. It is codingboy's policy to respect your privacy regarding any information we may collect from you through our app, Learn Programming Free.
+
+We only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will be used.
+
+We only retain collected information for as long as necessary to provide you with your requested service. What data we store, we’ll protect within commercially acceptable means to prevent loss and theft, as well as unauthorized access, disclosure, copying, use or modification.
+
+We don’t share any personally identifying information publicly or with third-parties, except when required to by law.
+
+Our app may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.
+
+You are free to refuse our request for your personal information, with the understanding that we may be unable to provide you with some of your desired services.
+
+Your continued use of our app will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.
+
+This policy is effective as of 6 October 2020.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ You can find free reasources to learn programming
 
 ## Supported Platforms
 
-- Android (will publish on google play store very soon)
+- [Android - Download from google Play Store](https://play.google.com/store/apps/details?id=in.codingboy.learnprogrammingfree2)
 - iOS
 - Web [http://learnprogrammingfree.codingboy.in/](http://learnprogrammingfree.codingboy.in/)
 
@@ -80,4 +80,4 @@ Be sure to include as much information including screenshots, text output, and b
 ##### Made with ♥ by <a href="https://github.com/viralvaghela">viralvaghela</a>
 
 [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://github.com/viralvaghela)
-
+<a href="https://www.buymeacoffee.com/codingboy" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height:30 px !important;width: 90px !important;" ></a>
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 
 <body class="bg-light">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <nav class="navbar">
+    <nav class="navbar" id="navbar">
             <input id="search" type="text" name="search" placeholder="Search..">
             <a href="https://github.com/viralvaghela/learnprogrammingfree">
             <svg class="svg-icon" viewBox="0 0 20 20">
@@ -26,7 +26,7 @@
             </a>
 
     </nav>
-    <div id="myData" class='container' style="margin:5px;">
+    <div id="myData" class='container'>
 
     </div>
     <script>
@@ -81,7 +81,7 @@
             for (var i = 0; i < data.length; i++) {
                 var card = document.createElement("div");
                 card.setAttribute('class', 'card');
-                card.setAttribute('style', 'width: 18rem; margin:15px; ');
+                card.setAttribute('style', 'width: 20rem;');
 
                 if (data[i].image != null) {
                     card.innerHTML = `<img class="card-img-top" src="` + data[i].image + `">`

diff --git a/resources/data.json b/resources/data.json
@@ -71,7 +71,7 @@
             "web"
         ]
     },
- 
+
     {
         "id": 7,
         "name": "Learn X in Y minutes, Where X=Python",
@@ -128,7 +128,7 @@
             "Android development"
         ]
     },
-         
+
  {
        "id": 11,
        "name": "Android Basics: User Interface",
@@ -397,7 +397,31 @@
             "React",
             "Programming",
             "youtube",
-            "Beginner"         
+            "Beginner"
+        ]
+    },
+    {
+        "id": 30,
+        "name": "Machine Learning Crash Course",
+        "instructor": "Google",
+        "url": "https://developers.google.com/machine-learning/crash-course",
+        "description": "Google's fast-paced, practical introduction to machine learning",
+        "tags": [
+            "Machine Learning",
+            "TensorFlow",
+            "Google"
+        ]
+    },
+    {
+        "id": 31,
+        "name": "Machine Learning Guides",
+        "instructor": "Google",
+        "url": "https://developers.google.com/machine-learning/guides",
+        "description": "Simple step-by-step walkthroughs to solve common machine learning problems using best practices.",
+        "tags": [
+            "Machine Learning",
+            "Guides",
+            "Google"
         ]
     }
 ]
diff --git a/style.css b/style.css
@@ -1,63 +1,99 @@
-*{
+* {
   font-family: 'Poppins', sans-serif;
 }
-*, *:before, *:after {box-sizing:  border-box !important;}
-body{
+
+*, *:before, *:after {
+  box-sizing: border-box !important;
+}
+
+body {
   font-family: 'Poppins', sans-serif;
 }
+
 input[type=text] {
   width: 200px;
-  height :40px;
-  padding :10px;
+  height: 40px;
+  padding: 10px;
   border-width: 2px;
   border-radius: 5px;
   -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;
 }
+
 input[type=text]:focus {
   width: 95%;
   border-width: 2px;
   border-radius: 5px;
 }
-.navbar{
-  margin-left: 10px;
-  margin-top: 10px;
+
+#navbar {
+  padding: 20px 30px 0;
 }
-#myData{
-  padding-left: 30px;
+
+#myData {
+  padding: 0 30px;
+  max-width: 100%;
 }
-.container{
-  width:1200px;
-  margin:20px auto;
-  columns: 3;
+
+.container {
+  width: 1200px;
+  margin: 20px auto;
   column-gap: 40px;
+  columns: 1;
 }
-.container .card{
-  width:100%;
+
+@media (min-width: 736px) {
+  .container {
+    columns: 2;
+  }
+}
+
+@media (min-width: 1080px) {
+  .container {
+    columns: 3;
+  }
+}
+
+@media (min-width: 1440px) {
+  .container {
+    columns: 4;
+  }
+}
+
+@media (min-width: 1800px) {
+  .container {
+    columns: 5;
+  }
+}
+
+.container .card {
+  width: 100%;
   margin: 0 0 20px;
-  padding: 10px; 
+  padding: 10px;
   background: #fff;
   overflow: hidden;
   break-inside: avoid;
 }
-.container .card img{
+
+.container .card img {
   max-width: 100%;
 }
-p{
-  padding:10px;
+
+p {
+  padding: 10px;
 }
-.card-title{
+
+.card-title {
   padding: 10px;
   font-weight: bold;
 }
+
 .svg-icon {
   width: 1.5em;
   height: 1.5em;
 }
 
-.svg-icon path,
-.svg-icon polygon,
-.svg-icon rect {
+.svg-icon path, .svg-icon polygon, .svg-icon rect {
   fill: #4691f6;
 }