Skip to content

T
training-responsive-layout
Commit 48302a2e by Ajmal.S
Options

float style modified

parent ded2c792
Showing with 36 additions and 20 deletions
assets/css/style.css
......@@ -105,6 +105,7 @@ body {
text-align: left;
display: inline-block;
padding: 10% 0 10%;
width: 35%;
}
.row:after {
......@@ -122,21 +123,13 @@ body {
}
.img-c {
text-align: center;
text-align: right;
}
.img-m-w {
max-width: 100%;
max-width: 100% !important;
}
/* .img-c img {
position: absolute;
display: block;
object-fit: contain;
height: 50%;
width: 80%;
} */
@media only screen and (min-width: 564px) {
.columns {
max-height: 500px;
......@@ -144,17 +137,39 @@ body {
.info {
float: left;
width: 35%;
}
.img-c {
float: right;
width: 65%;
}
}
/* .custom-img-position {
position: relative;
left: 50px;
width: auto;
} */
@media only screen and (min-width: 768px) {
.columns {
width: 50% !important;
max-height: 500px;
float: left;
padding: 6% !important;
}
.img-m-w {
max-width: 90% !important;
}
}
@media only screen and (min-width: 1440px) {
.columns {
width: 33.3% !important;
max-height: 484px;
float: left;
padding: 3% !important;
}
.logo {
bottom: 7%;
right: 8%;
}
}
/***** End Float css *****/
\ No newline at end of file
float-layout.html
......@@ -11,12 +11,12 @@
<body>
<div class="row">
<div class="columns col-1">
<div>
<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 <br>features requires <br>worry-free security</p>
<p>Astonishing features requires worry-free security</p>
<div class="underline"></div>
<span>1 Year Free Mobile Security</span>
</div>
......@@ -38,7 +38,7 @@
<div class="columns col-3">
<div class="info">
<img src="assets/img/logo-adaptxt.png" width="90" height="30">
<p>The best things in <br>life are free</p>
<p>The best things in life are free</p>
<div class="underline"></div>
<span>Free Mobile Pouch</span>
</div>
......@@ -49,7 +49,7 @@
<div class="columns col-4">
<div class="info">
<img src="assets/img/logo-hungama.png" width="90" height="20">
<p>The thump <br> never ends here</p>
<p>The thump never ends here</p>
<div class="underline"></div>
<span>1000’s of songs</span>
</div>
......@@ -73,7 +73,7 @@
<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<br>on Subscription</span>
<span>1000 pts Discount on Subscription</span>
</div>
<div class="img-c">
<img src="assets/img/image-6.png" class="img-m-w">
......
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