Skip to content

T
training-responsive-layout
Commit e6f75d5d by Ajmal.S
Options

Float layout added

parent fa692c68
Showing with 108 additions and 2 deletions
assets/css/style.css
...@@ -116,4 +116,36 @@ body { ...@@ -116,4 +116,36 @@ body {
} }
} }
/*End Flexbox Css */ /*End Flexbox Css */
\ No newline at end of file
/* Float css */
.row:after {
content: "";
display: table;
clear: both;
}
.columns {
width: 33.33%;
float: left;
height: 520px;
}
@media only screen and (min-width: 300px) and (max-width: 500px){
.columns {
width: 100%;
float: left;
height: 720px;
}
}
@media only screen and (min-width: 500px) and (max-width: 1024px) {
.columns {
width: 50%;
float: left;
height: 720px;
}
}
/* End Float css */
\ No newline at end of file
float-layout.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Float-Layout</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="row">
<div class="columns col-1">
<div>
<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>
<div class="underline"></div>
<span>1 Year Free Mobile Security</span>
</div>
<img src="assets/img/image-1.png" align="right" class="c-margin-t">
</div>
<div class="columns col-2">
<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>
<img src="assets/img/image-2.png" align="right">
</div>
<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>
<div class="underline"></div>
<span>Free Mobile Pouch</span>
</div>
<img src="assets/img/image-3.png" align="right">
</div>
<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>
<div class="underline"></div>
<span>1000’s of songs</span>
</div>
<img src="assets/img/image-4.png" align="right">
</div>
<div class="columns col-5">
<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>
</div>
<img src="assets/img/image-5.png" align="right">
</div>
<div class="columns col-6">
<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<br>on Subscription</span>
</div>
<img src="assets/img/image-6.png" align="right" class="c-margin-t">
</div>
</div>
</body>
</html>
\ No newline at end of file
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