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