Skip to content

M
madhan-task
Commit 4998c46e by Madhankumar
Options

first changes

parent f536ae0a
Showing with 66 additions and 21 deletions
index.html
...@@ -3,20 +3,24 @@ ...@@ -3,20 +3,24 @@
<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 name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<section class="cont"> <section class="cont">
<div class="card cardbg1"> <div class="card cardbg1">
<div class="logo">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-aoc.png">
</div>
<div class="card-desc"> <div class="card-desc">
<div class="card-text"> <div class="card-text">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png">
<p class="title">Astonishing features requires worry-free security</p> <p class="title">Astonishing features requires worry-free security</p>
<hr> <hr>
<p>1 Year Free Mobile Security</p> <p class="sub-text">1 YEAR FREE MOBILE SECURITY</p>
</div> </div>
<div class="card-image"> <div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-1.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/image-1.png" height="300px">
</div> </div>
</div> </div>
</div> </div>
...@@ -26,10 +30,10 @@ ...@@ -26,10 +30,10 @@
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-digitainment.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/logo-digitainment.png">
<p class="title">Be hooked!</p> <p class="title">Be hooked!</p>
<hr> <hr>
<p>2000+ Movies from Bollywood</p> <p class="sub-text">2000+ MOVIES FROM BOLLYWOOD</p>
</div> </div>
<div class="card-image"> <div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-2.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/image-2.png" height="370px">
</div> </div>
</div> </div>
...@@ -40,10 +44,10 @@ ...@@ -40,10 +44,10 @@
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png">
<p class="title">The best things in life are free</p> <p class="title">The best things in life are free</p>
<hr> <hr>
<p>Free Mobile Pouch</p> <p class="sub-text">FREE MOBILE POUCH</p>
</div> </div>
<div class="card-image"> <div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-3.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/image-3.png" height="350px">
</div> </div>
</div> </div>
</div> </div>
...@@ -53,10 +57,10 @@ ...@@ -53,10 +57,10 @@
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png">
<p class="title">The thump never ends here</p> <p class="title">The thump never ends here</p>
<hr> <hr>
<p>1000’s of songs</p> <p class="sub-text">1000’s OF SONGS</p>
</div> </div>
<div class="card-image"> <div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-4.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/image-4.png" height="330px">
</div> </div>
</div> </div>
</div> </div>
...@@ -66,10 +70,10 @@ ...@@ -66,10 +70,10 @@
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png">
<p class="title">Being globally you</p> <p class="title">Being globally you</p>
<hr> <hr>
<p>21 Indian & Foreign Languages</p> <p class="sub-text">21 INDIAN & FOREIGN LANGUAGES</p>
</div> </div>
<div class="card-image"> <div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-5.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/image-5.png" height="360px">
</div> </div>
</div> </div>
</div> </div>
...@@ -79,10 +83,10 @@ ...@@ -79,10 +83,10 @@
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-read-where.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/logo-read-where.png">
<p class="title">For the wise</p> <p class="title">For the wise</p>
<hr> <hr>
<p>1000 pts Discount on Subscription</p> <p class="sub-text">1000 PTS DISCOUNT ON SUBSCRIPTION</p>
</div> </div>
<div class="card-image"> <div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-6.png"> <img src="https://krds-assignment.github.io/aoc/api-assets/image-6.png" height="350px">
</div> </div>
</div> </div>
</div> </div>
......
style.css
*{ *{
margin:0; margin:0;
padding:0; padding:0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
} }
.cont{ .cont{
...@@ -12,29 +14,47 @@ ...@@ -12,29 +14,47 @@
.card{ .card{
width:33.333%; width:33.333%;
position:relative;
} }
.card .card-desc{ .card .card-desc{
padding:28px;
display:flex; display:flex;
align-items:center; align-items:center;
justify-content:space-between; justify-content:space-between;
height: 100%;
padding: 0 20px 0 70px;
} }
.card-text{ .card-text{
font-size: 18px; font-size: 18px;
} }
.card-text img{ .card-text img,.logo img{
height:50px; height:50px;
object-fit: contain; object-fit: contain;
aspect-ratio: 3/2; aspect-ratio: 3/2;
} }
.sub-text{
font-size: 16px;
}
.logo{
margin-left:20px;
position:absolute;
}
.card .card-image img{ .card .card-image img{
max-width:100%;
height: 300px; width:100%;
object-fit:contain; object-fit:contain;
} }
.card-text>p:first-of-type{
width: 168px;
}
.cont>div:nth-child(6)>.card-desc{
padding: 0 0px 0 46px;
}
.card p{ .card p{
color:white color:white
} }
...@@ -61,6 +81,7 @@ ...@@ -61,6 +81,7 @@
height: 2px; height: 2px;
background-color: white; background-color: white;
border: none; border: none;
margin:10px 10px 10px 0px;
} }
...@@ -68,6 +89,10 @@ ...@@ -68,6 +89,10 @@
margin:49px; margin:49px;
} }
/* .cont>.card-desc:nth-child(1){
padding: 40px 20px 0 40px;
} */
/* small screen */ /* small screen */
@media only screen and (max-width:768px){ @media only screen and (max-width:768px){
...@@ -79,7 +104,9 @@ margin:49px; ...@@ -79,7 +104,9 @@ margin:49px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.card-text>p:first-of-type{
width: 100%;
}
} }
/* medium screen */ /* medium screen */
@media only screen and (min-width:769px)and (max-width:1024px){ @media only screen and (min-width:769px)and (max-width:1024px){
...@@ -88,4 +115,18 @@ margin:49px; ...@@ -88,4 +115,18 @@ margin:49px;
width:50%; width:50%;
} }
} .card .card-desc{
\ No newline at end of file padding: 34px 20px 15px 40px;
}
}
@media(min-width:1025px){
.card .card-desc .card-text {
margin: 0px;
}
}
\ 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