Skip to content

S
Simple-responsive-layout
Commit d751cc41 by Vinod
Options

Code restructured

parent d9982d7e
Showing with 137 additions and 125 deletions
CSS/style.css
...@@ -41,203 +41,215 @@ body { ...@@ -41,203 +41,215 @@ body {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.card { .card {
float: left; width: 100%;
width: calc(100% / 3); }
height: calc(100% / 2); .main-logo {
position: absolute;
width: 20%;
margin: 5%;
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
} }
.hline { .hline {
width: 55%; width: 45%;
height: 1.5px; height: 1.5px;
background: white; background: white;
margin: 5% 5% 10px 25%; margin: 5% 0 4% 25%;
} }
.logo {
.main-logo { width: 15%;
position: absolute; margin: 20% 0 5% 25%;
width: 4%;
margin: 1.5% 0 0 1.5%;
} }
.desc { .desc {
width: 60%; width: 100%;
float: left;
} }
.title { .title {
color: white; font-size: large;
font-weight: lighter; font-weight: 400;
margin-left: 25%; margin-left: 25%;
} }
.offer { .offer {
color: white;
text-transform: uppercase; text-transform: uppercase;
font-weight: lighter; font-weight: lighter;
font-size: smaller; font-size: medium;
margin-left: 25%; margin-left: 25%;
} }
.logo {
width: 18%;
margin: 35% 0 5% 25%;
}
.image-block { .image-block {
width: 40%; width: 100%;
float: right;
}
.image-block .images {
float: left;
width: 80%;
margin: 8% 0 0 5%;
} }
.image-block .image1 { .image-block .image1 {
float: left; width: 50%;
width: 90%; margin: 10% 0 5% 25%;
margin: 40% 20% 0 0;
} }
.image-block .images {
.image-block .image2 { width: 45%;
float: left; margin: 10% 0 5% 25%;
width: 100%;
margin-top: 80%;
} }
.image-block .image2 {
.only-mobile { width: 65%;
display: none; margin: 15% 0 0 15%;
} }
/* Media Query for Mobile Devices */ /* Media Query for Tablets, Ipads */
@media (max-width: 480px) { @media only screen and (min-width: 480px) {
.main-logo {
width: 13%;
margin: 15px;
}
.card { .card {
width: 100%; float: left;
min-height: 31em; width: 50%;
min-height: 45em;
}
.main-logo {
position: absolute;
width: 15%;
margin: 4%;
} }
.hline { .hline {
width: 40%; width: 45%;
margin: 2% 0 2% 25%; height: 1.5px;
background: white;
margin: 5% 0 4% 25%;
}
.logo {
width: 15%;
margin: 35% 0 5% 25%;
} }
.desc { .desc {
width: 100%; width: 100%;
} }
.title {
.image-block { font-size: large;
width: 60%; font-weight: 400;
float: none; margin-left: 25%;
margin-left: 30%;
} }
.offer {
.image-block .images { font-weight: lighter;
float: none; font-size: 400;
width: 50%; margin-left: 25%;
margin: 10% 0 0 5%;
} }
.image-block .image1 { .image-block .image1 {
width: 60%;
margin: 15% 0 0 20%;
}
.image-block .images {
width: 50%; width: 50%;
float: none; margin: 15% 0 0 25%;
margin-top: 8%;
} }
.image-block .image2 { .image-block .image2 {
float: none; width: 65%;
width: 75%; margin: 25% 0 0 20%;
margin: 10% 30% 0 0;
}
.logo {
width: 12%;
margin: 21% 0 0 25%;
} }
} }
/* Media Query for low resolution Tablets, Ipads */ /* Media Query for Tablets Ipads portrait mode */
@media (min-width: 480px) and (max-width: 768px) { @media only screen and (min-width: 768px) {
.card {
width: 50%;
min-height: 20em;
}
.main-logo { .main-logo {
position: absolute;
width: 10%; width: 10%;
margin: 15px; margin: 2%;
} }
.wrapper {
.card { width: 100%;
width: 50%; }
min-height: 31em; .hline {
width: 65%;
}
.logo {
width: 15%;
margin: 30% 0 5% 25%;
} }
.desc { .desc {
width: 100%; float: left;
width: 60%;
} }
.title {
.image-block { font-size: large;
width: 50%; font-weight: 400;
float: none;
margin-left: 30%;
} }
.offer {
.image-block .images { font-size: medium;
float: none; }
width: 65%; .image-block {
margin: 10% 0 0 5%; float: left;
width: 40%;
} }
.image-block .image1 { .image-block .image1 {
width: 75%; width: 75%;
margin: 15% 15% 0 0; margin: 60% 0 0 10%;
}
.image-block .images {
width: 60%;
margin: 35% 0 0 20%;
} }
.image-block .image2 { .image-block .image2 {
float: none; width: 100%;
margin: 30% 30% 0 0; margin: 70% 0 0 0;
} }
}
/* Media Query for Laptops and Desktops */
@media only screen and (min-width: 992px) {
.card {
width: calc(100% / 3);
min-height: 23.5em;
/* max-height: calc(100% / 2); */
}
.main-logo {
width: 5%;
margin: 1.5%;
}
.wrapper {
width: 100%;
}
.logo { .logo {
margin: 25% 0 0 25%; width: 16%;
margin: 40% 0 5% 25%;
}
.desc {
width: 60%;
}
.image-block {
width: 40%;
}
.image-block .image1 {
width: 70%;
margin: 75% 0 0 15%;
}
.image-block .images {
width: 60%;
margin: 50% 0 0 20%;
}
.image-block .image2 {
margin: 70% 0 0 0;
} }
} }
/* Media Query for Tablets Ipads portrait mode */ /* Media Query for Large screens */
@media (min-width: 768px) and (max-width: 992px) { @media (min-width: 1024px) {
.card { .card {
width: 50%; min-height: calc(100% / 2);
}
.wrapper {
min-height: 20em; min-height: 20em;
} }
} }
@media (min-width: 1440px) {
/* Media Query for Laptops and Desktops */
@media (min-width: 992px) and (max-width: 1280px) {
.card { .card {
width: 33.33%; min-height: calc(100% / 2);
min-height: 20em;
} }
.wrapper { .wrapper {
margin-top: 2em; min-height: 21em;
} }
} }
@media (min-width: 2200px) {
/* Media Query for Large screens */
@media (min-width: 1280px) {
.card { .card {
width: 33.33%; min-height: calc(100% / 2);
min-height: 23em;
} }
.wrapper { .wrapper {
margin-top: 2em; min-height: 36em;
} }
} }
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