Skip to content

T
training-responsive-layout
Commit 5f4eb4a4 by Ajmal.S
Options

layout modified

parent da037b98
Showing with 155 additions and 40 deletions
assets/css/flex.css 0 → 100644
/***** Global Css ******/
body {
margin: 0;
font-family: "Open Sans", sans-serif;
color: #fff;
font-size: 14px;
}
hr {
border: 1px solid #fff;
}
.info {
text-align: left;
padding: 10% 0 10%;
width: 40%;
}
.column {
padding: 10%;
width: 100%;
min-height: 400px;
height: 100vh;
max-height: 700px;
box-sizing: border-box;
overflow: hidden;
}
.column:nth-of-type(1) {
background-color: #41ca6e;
}
.column:nth-of-type(2) {
background-color: #fab153;
}
.column:nth-of-type(3) {
background-color: #7277d5;
}
.column:nth-of-type(4) {
background-color: #f87d51;
}
.column:nth-of-type(5) {
background-color: #ed5466;
}
.column:nth-of-type(6) {
background-color: #4ec2e7;
}
figure {
float: right;
margin: 0;
}
figure img {
max-width: 100%;
width: 100%;
height: 25em;
object-fit: contain;
}
/***** Flexbox Css *****/
.parent {
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 540px) {
.column {
flex: 100%;
padding: 4%;
}
.info {
float: left;
width: 30%;
}
figure {
width: 50%;
}
}
@media screen and (min-width: 768px) {
.column {
flex: 50%;
max-height: 400px;
}
figure {
width: 42%;
}
}
@media screen and (min-width: 1440px) {
.column {
flex: 33.3%;
flex-direction: column;
min-height: 450px;
}
}
/***** End Flexbox Css *****/
\ No newline at end of file
assets/css/style.css → assets/css/float.css
/***** Float Css ******/
/***** Global Css ******/
body {
margin: 0;
......@@ -7,11 +7,6 @@ body {
font-size: 14px;
}
.logo {
position: absolute;
top: 16px;
}
hr {
border: 1px solid #fff;
}
......@@ -68,6 +63,8 @@ figure img {
object-fit: contain;
}
/***** Float css *****/
@media only screen and (min-width: 540px) {
.column {
max-height: 500px;
......@@ -106,11 +103,6 @@ figure img {
padding: 3%;
height: 50vh;
}
.logo {
top: 20px;
left: 15px;
}
}
/***** End Float css *****/
flexbox-layout.html
......@@ -5,67 +5,81 @@
<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">
<link rel="stylesheet" href="assets/css/flex.css">
</head>
<body>
<div class="parent">
<div class="child col-1">
<div class="column">
<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>
<p>Astonishing features requires worry-free security</p>
<hr />
<p>1 Year Free Mobile Security</p>
</div>
<img src="assets/img/image-1.png" align="right" class="c-margin-t">
<figure>
<img src="assets/img/image-1.png" class="c-img">
</figure>
</div>
<div class="child 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>
<hr />
<p>2000+ Movies from Bollywood</p>
</div>
<img src="assets/img/image-2.png" align="right">
<figure>
<img src="assets/img/image-2.png">
</figure>
</div>
<div class="child col-3">
<div class="column">
<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>
<p>The best things in life are free</p>
<hr />
<p>Free Mobile Pouch</p>
</div>
<img src="assets/img/image-3.png" align="right">
<figure>
<img src="assets/img/image-3.png">
</figure>
</div>
<div class="child col-4">
<div class="column">
<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>
<p>The thump never ends here</p>
<hr />
<p>1000’s of songs</p>
</div>
<img src="assets/img/image-4.png" align="right">
<figure>
<img src="assets/img/image-4.png">
</figure>
</div>
<div class="child 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>
<img src="assets/img/image-5.png" align="right">
<figure>
<img src="assets/img/image-5.png">
</figure>
</div>
<div class="child 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<br>on Subscription</span>
<hr />
<p>1000 pts Discount on Subscription</p>
</div>
<img src="assets/img/image-6.png" align="right" class="c-margin-t">
<figure>
<img src="assets/img/image-6.png" class="c-img">
</figure>
</div>
</div>
</body>
</html>
\ No newline at end of file
float-layout.html
......@@ -5,7 +5,7 @@
<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">
<link rel="stylesheet" href="assets/css/float.css">
</head>
<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