Skip to content

M
madhan-task
Commit 0c451bc3 by Madhankumar
Options

grid code change

parent 7a7050a7
Showing with 316 additions and 156 deletions
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<head>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</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">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="logo">
<img
src="https://krds-assignment.github.io/aoc/api-assets/logo-aoc.png"
/>
</div>
<section class="container">
<div class="card cardbg1">
<div class="card-body">
<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 class="sub-title">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-body">
<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 class="sub-title">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-body">
<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 class="sub-title">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 cardbg4">
<div class="card-body">
<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 class="sub-title">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 class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-4.png">
</div>
<div class="card cardbg5">
<div class="card-body">
<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 class="sub-title">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-body">
<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 class="sub-title">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 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>
</section>
</body>
</html>
\ No newline at end of file
</div>
</section>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.container {
display: grid;
grid-template-columns: repeat(3,1fr);
min-height: 100vh;
max-width: 1920px;
margin: 0 auto;
}
.card {
min-height: 50vh;
display: grid;
place-content: center;
}
.card-body {
display: grid;
grid-template-columns: repeat(2,1fr);
}
.card-text {
font-size: 18px;
display: grid;
place-content: center;
}
.sub-title {
font-size: 15px;
}
.card-text img,
.logo img {
height: 50px;
object-fit: contain;
aspect-ratio: 3/2;
}
.logo {
position: absolute;
top: 3px;
left: 18px;
}
.card-image img {
max-width: 100%;
max-height: 50vh;
display: block; /* it removes extra space */
}
.card p {
color: white;
}
.cardbg1 {
background: #41ca6e;
}
.cardbg2 {
background: #fab153;
}
.cardbg3 {
background: #7277d5;
}
.cardbg4 {
background: #f87d51;
}
.cardbg5 {
background: #ed5466;
}
.cardbg6 {
background: #4ec2e7;
}
hr {
height: 2px;
background-color: white;
border: none;
margin: 10px 10px 10px 0px;
}
@media only screen and (min-width: 320px), screen and (max-width: 573px) {
.logo img {
max-width: 100%;
height: 40px;
}
.cont {
}
@media only screen and (max-width: 768px) {
.container {
display: grid;
grid-template-columns: repeat(3,1fr);
min-height:100vh;
grid-template-columns: 1fr;
min-height: calc(100vh - 67px);
}
.card{
width:100%;
.card .card-body {
display: grid;
grid-template-columns: 1fr;
place-items: center;
padding: 100px;
gap: 3em;
}
.logo {
position: relative;
background: white;
left: 0;
top: 0;
}
.logo img {
max-width: 100%;
height: 60px;
margin-left: 10px;
mix-blend-mode: exclusion;
background: black;
}
.card-text img {
height: 80px;
}
.card-text {
font-size: 34px;
font-family: "Poppins";
max-width: 60vw;
width: 100%;
}
.sub-title {
font-size: 25px;
}
.card-text .title {
font-weight: bold;
}
.card-text > p:first-of-type {
text-transform: uppercase;
}
.card-image img {
max-width: 100%;
height: auto;
}
.card p{
color:white
}
.card .card-text img{
height:50px;
object-fit: contain;
aspect-ratio: 3/2;
}
.card .card-image img{
max-width:100%;
height: 300px;
object-fit:contain;
}
.card-text{
font-size: 18px;
}
.card-desc{
@media only screen and (min-width: 769px) {
.container {
display: grid;
grid-template-columns:repeat(2,1fr);
min-height: 50vh;
}
.card-body {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: repeat(2,1fr);
padding: 30px 25px 0;
}
padding-left: 50px;
hr{
width: 80%;
height: 2px;
border: none;
background-color: white;
}
.cardbg1{
background:#41ca6e;
}
.cardbg2{
background:#fab153
.card-text{
width:100%;
font-size: 14px;
}
.card-text,
.sub-title {
font-size: 16px;
}
.card-image img{
padding: 22px;
}
.cardbg3{
background:#7277d5;
.container > div:nth-child(6) > .card-body .card-image img{
padding: 0px;
}
.cardbg4{
background:#f87d51;
}
.cardbg5{
background:#ed5466;
@media only screen and (min-width: 1023px) {
.container {
grid-template-columns: repeat(3,1fr);
}
.logo img {
height: 45px;
}
.card-text,
.sub-title {
font-size: 14px;
}
.card-body{
padding-left: 45px;
}
.cardbg6{
background:#4ec2e7;
.card-image img{
padding:18px;
}
}
/* small screen */
@media only screen and (max-width:768px){
.cont, .card-desc{
grid-template-columns: repeat(1,1fr);
justify-items: center;
}
@media only screen and (min-width: 1441px) {
.card {
height: 50vh;
}
/* medium screen */
@media only screen and (min-width:769px) and (max-width:1024px){
.cont{
grid-template-columns: repeat(2,1fr);
}
}
\ No newline at end of file
.title,.sub-title{
font-size: 18px;
}
.card-body{
padding-left: 85px;
}
}
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