initial commit

83874995 · Madhankumar · 83874995 · 83874995 · 83874995
Commit 83874995 authored Aug 18, 2023 by Madhankumar
Show whitespace changes
Inline Side-by-side

Showing with 209 additions and 0 deletions

data.js data.js +48 -0

index.html index.html +45 -0

style.css style.css +116 -0

No files found.
--- a/data.js
+++ b/data.js
+data={
+    "logo": "https://krds-assignment.github.io/aoc/api-assets/logo-aoc.png",
+    "features": [
+      {
+        "title": "Astonishing features requires worry-free security",
+        "desc": "1 Year Free Mobile Security",
+        "logo": "https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png",
+        "image": "https://krds-assignment.github.io/aoc/api-assets/image-1.png",
+        "colour":"#41ca6e"
+      },
+      {
+        "title": "Be hooked!",
+        "desc": "2000+ Movies from Bollywood",
+        "logo": "https://krds-assignment.github.io/aoc/api-assets/logo-digitainment.png",
+        "image": "https://krds-assignment.github.io/aoc/api-assets/image-2.png",
+        "colour":"#fab153"
+      },
+      {
+        "title": "The best things in life are free",
+        "desc": "Free Mobile Pouch",
+        "logo": "https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png",
+        "image": "https://krds-assignment.github.io/aoc/api-assets/image-3.png",
+        "colour":"#7277d5"
+      },
+      {
+        "title": "The thump never ends here",
+        "desc": "1000’s of songs",
+        "logo": "https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png",
+        "image": "https://krds-assignment.github.io/aoc/api-assets/image-4.png",
+        "colour":"#f87d51"
+      },
+      {
+        "title": "Being globally you",
+        "desc": "21 Indian & Foreign Languages",
+        "logo": "https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png",
+        "image": "https://krds-assignment.github.io/aoc/api-assets/image-5.png",
+        "colour":"#ed5466"
+      },
+      {
+        "title": "For the wise",
+        "desc": "1000 pts Discount on Subscription",
+        "logo": "https://krds-assignment.github.io/aoc/api-assets/logo-read-where.png",
+        "image": "https://krds-assignment.github.io/aoc/api-assets/image-6.png",
+        "colour":"#4ec2e7"
+      }
+    ]
+  }
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <title>Task</title>
+  <head>
+    <link rel="stylesheet" href="style.css" />
+     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="text/javascript" src="data.js"></script>
+    <script type="text/javascript">
+      function load() {
+        var mydata = JSON.parse(JSON.stringify(data));
+        var div = document.getElementById("row");
+        var divflex = document.getElementById("row-flex");
+        div.innerHTML = mydata.features
+          .map(
+            ({ title, desc, image, info, colour }, i) => `
+
+  <div class="card" style="background:${colour}" data-idx="${i}">
+
+   <div class="card-desc">
+   <div class="desc">
+   <p class="title">${title}</p>
+   <hr>
+   <p class="description">${desc}</p>
+   </div>
+   <div class="image">
+   <img class="imgdata" src="${image}"/>
+   </div>
+  </div>
+</div>`).join("");
+}
+    </script>
+    <!-- // <div class="float-left">
+      // <h4 class="title">${title}</h4>
+      // <p class="desc">${desc}</p>
+      // </div>
+      // <div class="float-right">
+      // <img src="${image}"/>
+      // </div> -->
+    <style></style>
+  </head>
+  <body onload="load()">
+    <div id="row" class="row"></div>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+}
+
+
+
+.row {
+  display: grid;
+ grid-template-columns: repeat(3, minmax(500px, 1fr));
+ min-height:100vh;
+}
+
+.card{
+  height:100%;
+  width:100%;
+
+}
+
+p {
+  font-family: roman;
+  font-size: 1.3em;
+  line-height: 1.5em;
+  width: -webkit-fill-available;
+}
+.title {
+
+  width:16ch;
+}
+/* .desc{
+  width: max-content;
+} */
+
+
+.card-desc {
+  height: 100%;
+padding:10px 65px 0;
+  color: white;
+  display: grid;
+  align-items: center;
+  justify-content: end;
+  grid-template-columns: repeat(2,1fr);
+}
+
+
+
+hr {
+  width: 65%;
+
+  border: 1px solid white;
+}
+.image {
+  display: grid;
+  height: 100%;
+}
+.imgdata {
+  max-width: 100%;
+  max-height: 100vh;
+  margin: auto;
+}
+  @media only screen and (min-width: 480px) and (max-width: 768px) {
+    .row {
+  
+      display: grid;
+    
+    grid-template-columns: repeat(2, 1fr);
+    }
+    .card-desc {
+
+      display: grid;
+      place-items:center;
+    grid-template-columns: 1fr;
+    padding-bottom: 15px;
+    }
+    p {
+      font-family: roman;
+      font-size: 1.2em;
+
+    }
+    .card-desc .image{
+      margin-top:20px;
+      margin-bottom:30px;
+       }
+      
+ 
+    
+  }
+ @media screen and (max-width:480px) {
+  .row {
+
+    display: grid;
+  
+  grid-template-columns: 1fr;
+  }
+  .card-desc {
+   
+    margin-top: 0px;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    place-items:center;
+  grid-template-columns: 1fr;
+  }
+ .card-desc .image{
+margin-top:40px;
+margin-bottom:40px;
+ }
+
+
+} 
+
+
+
+