Skip to content

M
madhan-task
Commit f536ae0a by Madhankumar
Options

initial commit

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