Skip to content

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

css corrections

parent e6f75d5d
Showing with 21 additions and 27 deletions
assets/css/style.css
......@@ -2,13 +2,13 @@
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
color: #fff;
font-size: 14px;
}
body {
margin: 0 !important;
font-family: "Open Sans", sans-serif;
color: #fff;
font-size: 14px;
}
.underline {
......@@ -22,44 +22,32 @@ body {
.col-1 {
background-color: #41ca6e;
color: #fff;
padding: 55px 20px 20px 20px;
}
.col-2 {
background-color: #fab153;
color: #fff;
padding: 90px 20px 20px 20px;
}
.col-3 {
background-color: #7277d5;
color: #fff;
padding: 90px 20px 20px 20px;
}
.col-4 {
background-color: #f87d51;
color: #fff;
padding: 90px 20px 20px 20px;
}
.col-5 {
background-color: #ed5466;
color: #fff;
padding: 90px 20px 20px 20px;
}
.col-6 {
background-color: #4ec2e7;
color: #fff;
padding: 90px 20px 20px 20px;
}
.info {
text-align: left;
display: inline-block;
padding-top: 90px;
padding: 20px;
}
.c-margin-t {
......@@ -68,7 +56,6 @@ body {
.logo {
position: relative;
bottom: 35px;
}
/* Grid Css */
......@@ -78,6 +65,10 @@ body {
width: auto;
}
.grid {
padding: 20px;
}
@media (min-width: 600px) {
.grids {
grid-template-columns: repeat(2, 1fr);
......@@ -129,14 +120,17 @@ body {
.columns {
width: 33.33%;
float: left;
height: 520px;
height: 50vh;
padding: 20px;
color: #fff;
}
@media only screen and (min-width: 300px) and (max-width: 500px){
@media only screen and (min-width: 250px) and (max-width: 500px) {
.columns {
width: 100%;
float: left;
height: 720px;
height: 50vh;
min-height: 650px;
}
}
......@@ -144,7 +138,7 @@ body {
.columns {
width: 50%;
float: left;
height: 720px;
height: 100vh;
}
}
......
grid-layout.html
......@@ -10,7 +10,7 @@
<body>
<div class="grids">
<div class="col-1">
<div class="grid col-1">
<div class="logo">
<img src="assets/img/logo-aoc.png" width="85" height="30">
</div>
......@@ -22,7 +22,7 @@
</div>
<img src="assets/img/image-1.png" align="right" class="c-margin-t">
</div>
<div class="col-2">
<div class="grid col-2">
<div class="info">
<img src="assets/img/logo-digitainment.png" width="55" height="40">
<p>Be hooked!</p>
......@@ -31,7 +31,7 @@
</div>
<img src="assets/img/image-2.png" align="right">
</div>
<div class="col-3">
<div class="grid 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>
......@@ -40,7 +40,7 @@
</div>
<img src="assets/img/image-3.png" align="right">
</div>
<div class="col-4">
<div class="grid col-4">
<div class="info">
<img src="assets/img/logo-hungama.png" width="90" height="20">
<p>The thump <br> never ends here</p>
......@@ -49,7 +49,7 @@
</div>
<img src="assets/img/image-4.png" align="right">
</div>
<div class="col-5">
<div class="grid col-5">
<div class="info">
<img src="assets/img/logo-adaptxt.png" width="90" height="30">
<p>Being globally you</p>
......@@ -58,7 +58,7 @@
</div>
<img src="assets/img/image-5.png" align="right">
</div>
<div class="col-6">
<div class="grid col-6">
<div class="info">
<img src="assets/img/logo-read-where.png" width="50" height="45">
<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