Skip to content

M
madhan-task
Commit 567faf79 by Madhankumar
Options

flex updated code

parent 4998c46e
Showing with 317 additions and 211 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" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
</head> rel="stylesheet"
<body> />
<section class="cont"> </head>
<div class="card cardbg1"> <body>
<div class="logo"> <div class="logo">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-aoc.png"> <img
</div> src="https://krds-assignment.github.io/aoc/api-assets/logo-aoc.png"
<div class="card-desc"> />
<div class="card-text"> </div>
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png"> <section class="container">
<p class="title">Astonishing features requires worry-free security</p> <div class="card cardbg1">
<hr> <div class="card-body">
<p class="sub-text">1 YEAR FREE MOBILE SECURITY</p> <div class="card-text">
</div> <img
<div class="card-image"> src="https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png"
<img src="https://krds-assignment.github.io/aoc/api-assets/image-1.png" height="300px"> />
</div> <p class="title">
</div> Astonishing features requires worry-free security
</div> </p>
<div class="card cardbg2"> <hr />
<div class="card-desc"> <p class="sub-title">1 YEAR FREE MOBILE SECURITY</p>
<div class="card-text"> </div>
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-digitainment.png"> <div class="card-image">
<p class="title">Be hooked!</p> <img
<hr> src="https://krds-assignment.github.io/aoc/api-assets/image-1.png"
<p class="sub-text">2000+ MOVIES FROM BOLLYWOOD</p> />
</div> </div>
<div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-2.png" height="370px">
</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 class="sub-text">FREE MOBILE POUCH</p>
</div> </div>
<div class="card-image"> </div>
<img src="https://krds-assignment.github.io/aoc/api-assets/image-3.png" height="350px"> <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>
<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> </div>
<div class="card cardbg4"> <div class="card cardbg4">
<div class="card-desc"> <div class="card-body">
<div class="card-text"> <div class="card-text">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png"> <img
<p class="title">The thump never ends here</p> src="https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png"
<hr> />
<p class="sub-text">1000’s OF SONGS</p> <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>
<div class="card-image"> </div>
<img src="https://krds-assignment.github.io/aoc/api-assets/image-4.png" height="330px"> <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>
<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> </div>
<div class="card cardbg5"> </section>
<div class="card-desc"> </body>
<div class="card-text"> </html>
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png">
<p class="title">Being globally you</p>
<hr>
<p class="sub-text">21 INDIAN & FOREIGN LANGUAGES</p>
</div>
<div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-5.png" height="360px">
</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 class="sub-text">1000 PTS DISCOUNT ON SUBSCRIPTION</p>
</div>
<div class="card-image">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-6.png" height="350px">
</div>
</div>
</div>
</section>
</body>
</html>
\ No newline at end of file
style.css
*{ * {
margin:0; margin: 0;
padding:0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Poppins', sans-serif; }
}
.cont{
display:flex;
flex-wrap:wrap;
min-height:100vh;
}
.card{
width:33.333%;
position:relative;
body {
} font-family: "Poppins", sans-serif;
}
.card .card-desc{ .container {
display: flex;
display:flex; flex-wrap: wrap;
align-items:center; min-height: 100vh;
justify-content:space-between; max-width: 1920px;
height: 100%; margin: 0 auto;
padding: 0 20px 0 70px; }
} .card {
.card-text{ min-height: 50vh;
font-size: 18px; width: 33.333%;
} display: flex;
.card-text img,.logo img{ }
height:50px; .card-body {
object-fit: contain; display: flex;
aspect-ratio: 3/2; align-items: center;
} width: 100%;
.sub-text{ }
font-size: 16px;
}
.logo{
margin-left:20px;
position:absolute;
}
.card .card-image img{
width:100%; .card-text {
font-size: 18px;
width: 40%;
}
.sub-title {
font-size: 15px;
}
.card-image {
display: flex;
}
object-fit:contain; .card-image img {
} max-width: 100%;
.card-text>p:first-of-type{ }
width: 168px; .card-text img,
} .logo img {
.cont>div:nth-child(6)>.card-desc{ height: 50px;
padding: 0 0px 0 46px; object-fit: contain;
} aspect-ratio: 3/2;
.card p{ }
color:white
} .logo {
.cardbg1{ position: absolute;
background:#41ca6e; top: 3px;
} left: 18px;
.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;
}
.card .card-desc .card-text{
margin:49px; .card p {
} color: white;
}
.cardbg1 {
background: #41ca6e;
}
.cardbg2 {
background: #fab153;
}
.cardbg3 {
background: #7277d5;
}
.cardbg4 {
background: #f87d51;
}
.cardbg5 {
background: #ed5466;
}
.cardbg6 {
background: #4ec2e7;
}
/* .cont>.card-desc:nth-child(1){ hr {
padding: 40px 20px 0 40px; height: 2px;
} */ background-color: white;
border: none;
/* small screen */ margin: 10px 10px 10px 0px;
@media only screen and (max-width:768px){ }
.card{ @media only screen and (min-width: 320px), screen and (max-width: 573px) {
flex-basis:100%; .logo img {
max-width: 100%;
} height: 40px;
.card .card-desc{ }
display: flex; }
flex-direction: column;
}
.card-text>p:first-of-type{
width: 100%;
}
}
/* medium screen */
@media only screen and (min-width:769px)and (max-width:1024px){
.card{
width:50%;
}
.card .card-desc{
padding: 34px 20px 15px 40px;
}
@media only screen and (max-width: 768px) {
.card {
width: 100%;
min-height: calc(100vh - 67px);
}
.card .card-body {
display: flex;
flex-direction: column;
padding: 40px auto;
padding: 100px 0px;
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;
}
@media(min-width:1025px){ .card-text img {
.card .card-desc .card-text { height: 80px;
margin: 0px; }
} .card-text {
font-size: 28px;
width: 65%;
}
} .sub-title {
\ No newline at end of file font-size: 25px;
}
.card-text .title {
font-weight: bold;
}
.card-text > p:first-of-type {
width: 100%;
text-transform: uppercase;
}
.card-image img {
max-width: 100%;
height: auto;
}
.card-image {
gap: 5;
}
}
@media only screen and (min-width: 769px) {
.card {
width: 50%;
min-height: 50vh;
}
.card-body {
padding-left: 39px;
}
.card-text,
.sub-title {
font-size: 16px;
}
.card-image {
padding: 35px;
padding-bottom: 10px;
}
.container > div:nth-child(6) > .card-body .card-image {
max-width: 100%;
padding: 0px;
}
}
@media only screen and (min-width: 1023px) {
.card {
min-height: 50vh;
width: 33.333%;
}
.card-body {
padding: 0px;
padding-left: 65px;
}
.logo img {
height: 45px;
}
.card-text {
width: 55%;
}
.card-text,
.sub-title {
font-size: 16px;
}
.card-image {
max-width: 100%;
}
.card-image img {
height: auto;
max-height: 50vh;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
.card-text,
.sub-title {
font-size: 14px;
}
.card-text img {
height: 35px;
}
.card-body {
padding-left: 35px;
}
}
@media only screen and (min-width: 1441px) {
.card {
height: 50vh;
}
}
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