Skip to content

M
madhan-task
Commit 7a7050a7 by Madhankumar
Options

initial commit

parent 57106874
Showing with 165 additions and 191 deletions
data.js deleted 100644 → 0
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
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<title>Task</title> <head>
<head> <link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<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}"> </head>
<body>
<section class="cont">
<div class="card cardbg1">
<div class="card-desc">
<div class="card-text">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png">
<p class="title">Astonishing features requires worry-free security</p>
<hr>
<p>1 Year Free Mobile Security</p>
</div>
<div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-1.png">
</div>
</div>
</div>
<div class="card cardbg2">
<div class="card-desc">
<div class="card-text">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-digitainment.png">
<p class="title">Be hooked!</p>
<hr>
<p>2000+ Movies from Bollywood</p>
</div>
<div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-2.png">
</div>
</div>
</div>
<div class="card cardbg3">
<div class="card-desc">
<div class="card-text">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png">
<p class="title">The best things in life are free</p>
<hr>
<p>Free Mobile Pouch</p>
</div>
<div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-3.png">
</div>
</div>
</div>
<div class="card cardbg4">
<div class="card-desc">
<div class="card-text">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png">
<p class="title">The thump never ends here</p>
<hr>
<p>1000’s of songs</p>
</div>
<div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-4.png">
</div>
</div>
</div>
<div class="card cardbg5">
<div class="card-desc">
<div class="card-text">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png">
<p class="title">Being globally you</p>
<hr>
<p>21 Indian & Foreign Languages</p>
</div>
<div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-5.png">
</div>
</div>
</div>
<div class="card cardbg6">
<div class="card-desc">
<div class="card-text">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-read-where.png">
<p class="title">For the wise</p>
<hr>
<p>1000 pts Discount on Subscription</p>
</div>
<div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-6.png">
</div>
</div>
</div>
<div class="card-desc"> </section>
<div class="desc"> </body>
<p class="title">${title}</p> </html>
<hr> \ No newline at end of file
<p class="description">${desc}</p>
</div>
<div class="image">
<img 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>
style.css
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
}
.cont {
display: grid;
grid-template-columns: repeat(3,1fr);
min-height:100vh;
}
.card{
width:100%;
}
.card p{
color:white
} }
.card .card-text img{
height:50px;
object-fit: contain;
.row { aspect-ratio: 3/2;
display: grid;
grid-template-columns: repeat(3,1fr);
min-height:100vh;
} }
.card{ .card .card-image img{
height:100%; max-width:100%;
width:100%; height: 300px;
object-fit:contain;
} }
.card-text{
p { font-size: 18px;
font-family: roman;
font-size: 1.5vw;
line-height: 1.5em;
width: -webkit-fill-available;
} }
.title { .card-desc{
display: grid;
width:16ch; align-items: center;
justify-content: center;
grid-template-columns: repeat(2,1fr);
padding: 30px 25px 0;
}
hr{
width: 80%;
height: 2px;
border: none;
background-color: white;
}
.cardbg1{
background:#41ca6e;
} }
/* .desc{ .cardbg2{
width: max-content; background:#fab153
} */
.card-desc {
height: 100%;
padding:10px 65px 0;
color: white;
display: grid;
align-items: center;
justify-content: end;
grid-template-columns: repeat(2,1fr);
} }
.cardbg3{
background:#7277d5;
}
hr { .cardbg4{
width: 65%; background:#f87d51;
border: 1px solid white;
} }
.image img{ .cardbg5{
position: relative; background:#ed5466;
width: 100%;
} }
/* .image { .cardbg6{
display: grid; background:#4ec2e7;
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; /* small screen */
grid-template-columns: 1fr; @media only screen and (max-width:768px){
padding-bottom: 15px; .cont, .card-desc{
grid-template-columns: repeat(1,1fr);
justify-items: center;
} }
.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{ /* medium screen */
margin-top:40px; @media only screen and (min-width:769px) and (max-width:1024px){
margin-bottom:40px; .cont{
}
grid-template-columns: repeat(2,1fr);
}
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment