Skip to content

T
training-responsive-layout
Commit 85b5516a by Ajmal.S
Options

float layout modified

parent c7cc6266
Showing with 90 additions and 151 deletions
assets/css/style.css
/***** Global css *****/ /***** Float Css ******/
* {
box-sizing: border-box;
}
body { body {
margin: 0 !important; margin: 0;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }
.underline {
height: 2px;
background: #ffffff;
transform: rotate(180deg);
position: relative;
width: 75%;
margin-bottom: 10px;
}
.col-1 {
background-color: #41ca6e;
}
.col-2 {
background-color: #fab153;
}
.col-3 {
background-color: #7277d5;
}
.col-4 {
background-color: #f87d51;
}
.col-5 {
background-color: #ed5466;
}
.col-6 {
background-color: #4ec2e7;
}
.logo { .logo {
position: relative; position: relative;
} }
/***** Grid Css *****/ hr {
border: 1px solid #fff;
.grids {
display: grid;
width: auto;
} }
.grid { .info {
padding: 20px; text-align: left;
} padding: 10% 0 10%;
width: 50%;
@media (min-width: 600px) {
.grids {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.grids {
grid-template-columns: repeat(3, 1fr);
}
} }
/***** End Grid Css *****/ .column {
padding: 10%;
/***** Flexbox Css *****/ width: 100%;
min-height: 400px;
.parent { height: 100vh;
display: flex; max-height: 700px;
flex-wrap: wrap; box-sizing: border-box;
overflow: hidden;
} }
.child { .column:nth-of-type(1) {
flex: 33.3%; background-color: #41ca6e;
padding: 20px;
} }
@media screen and (max-width: 992px) { .column:nth-of-type(2) {
.child { background-color: #fab153;
flex: 50%;
}
} }
@media screen and (max-width: 600px) { .column:nth-of-type(3) {
.parent { background-color: #7277d5;
flex-direction: column;
}
} }
/*****End Flexbox Css ******/ .column:nth-of-type(4) {
background-color: #f87d51;
/***** Float Css ******/
.info {
text-align: left;
display: inline-block;
padding: 10% 0 10%;
width: 50%;
} }
.row:after { .column:nth-of-type(5) {
content: ""; background-color: #ed5466;
display: table;
clear: both;
} }
.columns { .column:nth-of-type(6) {
padding: 10%; background-color: #4ec2e7;
width: 100% !important;
min-height: 300px;
height: 100vh;
max-height: 700px;
} }
.img-c { figure {
text-align: right; float: right;
} }
.img-m-w { figure img {
max-width: 100% !important; max-width: 100%;
} }
@media only screen and (min-width: 564px) { @media only screen and (min-width: 567px) {
.columns { .column {
max-height: 500px; max-height: 500px;
} }
.info { .info {
float: left; float: left;
width: 35%; width: 30%;
} }
.img-c { figure {
float: right; width: 50%;
width: 65%;
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.columns { .column {
width: 50% !important; width: 50%;
max-height: 500px; max-height: 500px;
float: left; float: left;
padding: 6% !important; padding: 5%;
} }
.img-m-w {
max-width: 90% !important; figure {
width: 42%;
} }
} }
@media only screen and (min-width: 1440px) { @media only screen and (min-width: 1440px) {
.columns { .column {
width: 33.3% !important; width: 33.33%;
max-height: 484px; max-height: 484px;
float: left; float: left;
padding: 3% !important; padding: 3%;
} }
.logo { .logo {
bottom: 7%; bottom: 7%;
right: 8%; right: 8%;
} }
.c-img {
height: max(350px, 15vh);
object-fit: contain;
max-width: 260px;
}
} }
/***** End Float css *****/ /***** End Float css *****/
\ No newline at end of file
float-layout.html
...@@ -9,76 +9,74 @@ ...@@ -9,76 +9,74 @@
</head> </head>
<body> <body>
<div class="row"> <div class="column">
<div class="columns col-1">
<div class="logo"> <div class="logo">
<img src="assets/img/logo-aoc.png" width="85" height="30"> <img src="assets/img/logo-aoc.png" width="85" height="30">
</div> </div>
<div class="info"> <div class="info">
<img src="assets/img/logo-f-secure.png" width="50" height="50"> <img src="assets/img/logo-f-secure.png" width="50" height="50">
<p>Astonishing features requires worry-free security</p> <p>Astonishing features requires worry-free security</p>
<div class="underline"></div> <hr />
<span>1 Year Free Mobile Security</span> <p>1 Year Free Mobile Security</p>
</div> </div>
<div class="img-c"> <figure>
<img src="assets/img/image-1.png" class="img-m-w"> <img src="assets/img/image-1.png" class="c-img">
</figure>
</div> </div>
</div> <div class="column">
<div class="columns col-2">
<div class="info"> <div class="info">
<img src="assets/img/logo-digitainment.png" width="55" height="40"> <img src="assets/img/logo-digitainment.png" width="55" height="40">
<p>Be hooked!</p> <p>Be hooked!</p>
<div class="underline"></div> <hr />
<span>2000+ Movies from Bollywood</span> <p>2000+ Movies from Bollywood</p>
</div>
<div class="img-c">
<img src="assets/img/image-2.png" class="img-m-w">
</div> </div>
<figure>
<img src="assets/img/image-2.png">
</figure>
</div> </div>
<div class="columns col-3"> <div class="column">
<div class="info"> <div class="info">
<img src="assets/img/logo-adaptxt.png" width="90" height="30"> <img src="assets/img/logo-adaptxt.png" width="90" height="30">
<p>The best things in life are free</p> <p>The best things in life are free</p>
<div class="underline"></div> <hr />
<span>Free Mobile Pouch</span> <p>Free Mobile Pouch</p>
</div> </div>
<div class="img-c"> <figure>
<img src="assets/img/image-3.png" class="img-m-w"> <img src="assets/img/image-3.png">
</figure>
</div> </div>
</div> <div class="column">
<div class="columns col-4">
<div class="info"> <div class="info">
<img src="assets/img/logo-hungama.png" width="90" height="20"> <img src="assets/img/logo-hungama.png" width="90" height="20">
<p>The thump never ends here</p> <p>The thump never ends here</p>
<div class="underline"></div> <hr />
<span>1000’s of songs</span> <p>1000’s of songs</p>
</div>
<div class="img-c">
<img src="assets/img/image-4.png" class="img-m-w">
</div> </div>
<figure>
<img src="assets/img/image-4.png">
</figure>
</div> </div>
<div class="columns col-5"> <div class="column">
<div class="info"> <div class="info">
<img src="assets/img/logo-adaptxt.png" width="90" height="30"> <img src="assets/img/logo-adaptxt.png" width="90" height="30">
<p>Being globally you</p> <p>Being globally you</p>
<div class="underline"></div> <hr />
<span>21 Indian & Foreign Languages</span> <p>21 Indian & Foreign Languages</p>
</div> </div>
<div class="img-c"> <figure>
<img src="assets/img/image-5.png" class="img-m-w"> <img src="assets/img/image-5.png">
</figure>
</div> </div>
</div> <div class="column">
<div class="columns col-6">
<div class="info"> <div class="info">
<img src="assets/img/logo-read-where.png" width="50" height="45"> <img src="assets/img/logo-read-where.png" width="50" height="45">
<p>For the wise</p> <p>For the wise</p>
<div class="underline"></div> <hr />
<span>1000 pts Discount on Subscription</span> <p>1000 pts Discount on Subscription</p>
</div>
<div class="img-c">
<img src="assets/img/image-6.png" class="img-m-w">
</div>
</div> </div>
<figure>
<img src="assets/img/image-6.png" class="c-img">
</figure>
</div> </div>
</body> </body>
......
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