Skip to content

M
madhan-task
Commit f536ae0a by Madhankumar
Options

initial commit

parent 7a7050a7
Showing with 89 additions and 87 deletions
style.css
* { *{
margin: 0; margin:0;
padding: 0; padding:0;
box-sizing: border-box;
}
} .cont{
display:flex;
flex-wrap:wrap;
min-height:100vh;
.cont {
display: grid; }
grid-template-columns: repeat(3,1fr);
min-height:100vh; .card{
width:33.333%;
}
.card{ }
width:100%; .card .card-desc{
padding:28px;
} display:flex;
.card p{ align-items:center;
color:white justify-content:space-between;
} }
.card .card-text img{ .card-text{
height:50px; font-size: 18px;
object-fit: contain; }
aspect-ratio: 3/2; .card-text img{
} height:50px;
object-fit: contain;
.card .card-image img{ aspect-ratio: 3/2;
max-width:100%; }
height: 300px;
object-fit:contain; .card .card-image img{
} max-width:100%;
.card-text{ height: 300px;
font-size: 18px; object-fit:contain;
} }
.card-desc{ .card p{
display: grid; color:white
align-items: center; }
justify-content: center; .cardbg1{
grid-template-columns: repeat(2,1fr); background:#41ca6e;
padding: 30px 25px 0; }
.cardbg2{
} background:#fab153
}
hr{ .cardbg3{
width: 80%; background:#7277d5;
height: 2px; }
border: none; .cardbg4{
background-color: white; background:#f87d51;
} }
.cardbg5{
.cardbg1{ background:#ed5466;
background:#41ca6e; }
} .cardbg6{
.cardbg2{ background:#4ec2e7;
background:#fab153 }
}
.cardbg3{ hr{
background:#7277d5; height: 2px;
} background-color: white;
.cardbg4{ border: none;
background:#f87d51;
} }
.cardbg5{
background:#ed5466; .card .card-desc .card-text{
}
.cardbg6{
background:#4ec2e7;
}
margin:49px;
/* small screen */ }
@media only screen and (max-width:768px){
.cont, .card-desc{ /* small screen */
grid-template-columns: repeat(1,1fr); @media only screen and (max-width:768px){
justify-items: center; .card{
} flex-basis:100%;
} }
.card .card-desc{
display: flex;
flex-direction: column;
}
}
/* 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){
.cont{
.card{
grid-template-columns: repeat(2,1fr); width:50%;
}
}
} }
\ 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