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