Skip to content

M
madhan-task
Commit 5e7a4684 by Madhankumar
Options

initial commit

parent f536ae0a
Showing with 27 additions and 56 deletions
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<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" />
</head> </head>
......
style.css
*{ *{
margin:0; margin:0;
padding:0; padding:0;
}
.cont{
display:flex;
flex-wrap:wrap;
min-height:100vh;
} }
.cont{
min-height: 100vh;
}
.card{ .card{
float:left;
width:33.333%; width:33.333%;
height: 100%;
}
} .cont:after{
.card .card-desc{ content: "";
padding:28px; clear: both;
display:flex; display: table;
align-items:center; }
justify-content:space-between; .card-text,.card-image{
float: left;
width:50%;
} }
.card-text{
font-size: 18px;
.card p{
color:white
} }
.card-text img{ .card .card-text img{
height:50px; height:50px;
object-fit: contain; object-fit: contain;
aspect-ratio: 3/2; aspect-ratio: 3/2;
...@@ -35,9 +37,10 @@ ...@@ -35,9 +37,10 @@
height: 300px; height: 300px;
object-fit:contain; object-fit:contain;
} }
.card p{ .card-text{
color:white font-size: 18px;
} }
.cardbg1{ .cardbg1{
background:#41ca6e; background:#41ca6e;
} }
...@@ -56,36 +59,4 @@ ...@@ -56,36 +59,4 @@
.cardbg6{ .cardbg6{
background:#4ec2e7; background:#4ec2e7;
} }
hr{ \ No newline at end of file
height: 2px;
background-color: white;
border: none;
}
.card .card-desc .card-text{
margin:49px;
}
/* small screen */
@media only screen and (max-width:768px){
.card{
flex-basis:100%;
}
.card .card-desc{
display: flex;
flex-direction: column;
}
}
/* medium screen */
@media only screen and (min-width:769px)and (max-width:1024px){
.card{
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