Skip to content

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

Flexbox layout added

parent d46f68e5
Showing with 123 additions and 18 deletions
assets/css/style.css
/* Global css */
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }
body{
body {
margin: 0 !important; margin: 0 !important;
} }
...@@ -17,42 +20,37 @@ body{ ...@@ -17,42 +20,37 @@ body{
margin-bottom: 10px; margin-bottom: 10px;
} }
.grids { .col-1 {
display: grid;
width: auto;
}
.grid-1 {
background-color: #41ca6e; background-color: #41ca6e;
color: #fff; color: #fff;
padding: 55px 20px 20px 20px; padding: 55px 20px 20px 20px;
} }
.grid-2 { .col-2 {
background-color: #fab153; background-color: #fab153;
color: #fff; color: #fff;
padding: 90px 20px 20px 20px; padding: 90px 20px 20px 20px;
} }
.grid-3 { .col-3 {
background-color: #7277d5; background-color: #7277d5;
color: #fff; color: #fff;
padding: 90px 20px 20px 20px; padding: 90px 20px 20px 20px;
} }
.grid-4 { .col-4 {
background-color: #f87d51; background-color: #f87d51;
color: #fff; color: #fff;
padding: 90px 20px 20px 20px; padding: 90px 20px 20px 20px;
} }
.grid-5 { .col-5 {
background-color: #ed5466; background-color: #ed5466;
color: #fff; color: #fff;
padding: 90px 20px 20px 20px; padding: 90px 20px 20px 20px;
} }
.grid-6 { .col-6 {
background-color: #4ec2e7; background-color: #4ec2e7;
color: #fff; color: #fff;
padding: 90px 20px 20px 20px; padding: 90px 20px 20px 20px;
...@@ -73,6 +71,13 @@ body{ ...@@ -73,6 +71,13 @@ body{
bottom: 35px; bottom: 35px;
} }
/* Grid Css */
.grids {
display: grid;
width: auto;
}
@media (min-width: 600px) { @media (min-width: 600px) {
.grids { .grids {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
...@@ -84,3 +89,31 @@ body{ ...@@ -84,3 +89,31 @@ body{
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
} }
/* End Grid Css */
/* Flexbox Css */
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 33.3%;
padding: 20px;
}
@media screen and (max-width: 992px) {
.child {
flex: 50%;
}
}
@media screen and (max-width: 600px) {
.parent {
flex-direction: column;
}
}
/*End Flexbox Css */
\ No newline at end of file
flexbox-layout.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox-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="parent">
<div class="child 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="child 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="child 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="child 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="child 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="child 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>
grid-layout.html
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<body> <body>
<div class="grids"> <div class="grids">
<div class="grid-1"> <div class="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>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
<img src="assets/img/image-1.png" align="right" class="c-margin-t"> <img src="assets/img/image-1.png" align="right" class="c-margin-t">
</div> </div>
<div class="grid-2"> <div class="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>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</div> </div>
<img src="assets/img/image-2.png" align="right"> <img src="assets/img/image-2.png" align="right">
</div> </div>
<div class="grid-3"> <div class="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 <br>life are free</p>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
</div> </div>
<img src="assets/img/image-3.png" align="right"> <img src="assets/img/image-3.png" align="right">
</div> </div>
<div class="grid-4"> <div class="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 <br> never ends here</p>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
</div> </div>
<img src="assets/img/image-4.png" align="right"> <img src="assets/img/image-4.png" align="right">
</div> </div>
<div class="grid-5"> <div class="col-5">
<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>
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
</div> </div>
<img src="assets/img/image-5.png" align="right"> <img src="assets/img/image-5.png" align="right">
</div> </div>
<div class="grid-6"> <div class="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>
......
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