Skip to content

S
Simple-responsive-layout
Commit a1c0d5be by Vinod
Options

Code restructured

parent 9c3514a0
Showing with 102 additions and 139 deletions
CSS/style.css
...@@ -8,232 +8,195 @@ body { ...@@ -8,232 +8,195 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: white; color: white;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
} }
.container>div:nth-child(1) { .container > div:nth-child(1) {
background-color: #41ca6e; background-color: #41ca6e;
} }
.container>div:nth-child(2) { .container > div:nth-child(2) {
background-color: #fab153; background-color: #fab153;
} }
.container>div:nth-child(3) { .container > div:nth-child(3) {
background-color: #7277d5; background-color: #7277d5;
} }
.container>div:nth-child(4) { .container > div:nth-child(4) {
background-color: #f87d51; background-color: #f87d51;
} }
.container>div:nth-child(5) { .container > div:nth-child(5) {
background-color: #ed5466; background-color: #ed5466;
} }
.container>div:nth-child(6) { .container > div:nth-child(6) {
background-color: #4ec2e7; background-color: #4ec2e7;
} }
.container { .container {
display: flex; width: 100%;
flex-wrap: wrap; height: 100%;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
height: 100%;
width: 100%;
} }
.card { .card {
min-width: calc(100%/3); width: 100%;
/* height: 50vh; */ min-height: 36em;
min-height: calc(100%/2); }
.main-logo {
position: absolute;
width: 20%;
margin: 5%;
} }
.wrapper { .wrapper {
display: flex; display: flex;
width: 100%; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
width: 100%;
} }
.main-logo { .logo {
max-width: 100%; width: 15%;
width: 5%; margin-left: 20%;
margin: 25px 0 0 25px; margin-top: 25%;
position: absolute;
} }
.desc { .desc {
width: 60%; width: 100%;
} }
.hline { .hline {
width: 55%; width: 45%;
height: 1.5px; height: 1.5px;
background: white; background: white;
margin: 2% 0 2% 25%; margin: 4% 0 3% 20%;
} }
.title { .title {
font-weight: lighter; font-weight: normal;
margin-left: 25%; font-size: larger;
margin-top: 3%; margin-top: 3%;
margin-left: 20%;
} }
.offer { .offer {
text-transform: uppercase; text-transform: uppercase;
font-weight: lighter; font-weight: lighter;
font-size: smaller; margin-left: 20%;
margin-left: 25%;
}
.logo {
width: 15%;
margin-left: 25%;
margin-top: 30%;
} }
.image-block { .image-block {
width: 40%; display: flex;
justify-content: center;
width: 100%;
} }
.image-block .images { .image-block .image1 {
width: 80%; width: 35%;
margin: 20% 0 0 8%; margin-bottom: 2%;
margin-top: 10%;
} }
.image-block .image1 { .image-block .images {
width: 80%; width: 30%;
margin: 55% 0 0 5%; margin: 10% 0 1% 0;
} }
.image-block .image2 { .image-block .image2 {
float: left; width: 50%;
width: 100%; margin-top: 15%;
margin-top: 80%;
} }
/* Media Query for Mobile Devices */ /* Media Query for Tablets, Ipads */
@media (max-width: 480px) { @media only screen and (min-width: 480px) {
.main-logo { .container {
width: 18%; display: flex;
margin: 20px; flex-wrap: wrap;
position: absolute; width: 100%;
} }
.card { .card {
width: 100%; width: 50%;
} }
.main-logo {
.hline { width: 15%;
width: 45%;
} }
.logo {
.desc { width: 20%;
width: 100%; margin-top: 45%;
} }
.image-block .image1 {
.wrapper { width: 55%;
width: 100%; margin-top: 15%;
flex-direction: column;
} }
.image-block .images { .image-block .images {
margin-bottom: 5%; width: 50%;
} margin: 15% 0 1% 0;
.image-block .image1 {
width: 75%;
margin: 15% 15% 10% 0;
} }
.image-block .image2 { .image-block .image2 {
float: none; width: 70%;
margin: 30% 30% 0 0; margin-top: 20%;
}
.logo {
margin: 20% 0 0 25%;
} }
} }
/* Media Query for low resolution Tablets, Ipads */ /* Media Query for Laptops and Desktops */
@media (min-width: 480px) and (max-width: 768px) { @media only screen and (min-width: 992px) {
.main-logo { .container {
width: 10%; display: flex;
margin: 20px; flex-wrap: wrap;
position: absolute; width: 100%;
} }
.card { .card {
width: 50%; width: calc(100% / 3);
min-height: 31em; min-height: 20em;
} }
.main-logo {
.wrapper { position: absolute;
width: 100%; width: 5%;
flex-direction: column; margin: 2%;
} }
.wrapper {
.desc { display: flex;
flex-direction: row;
width: 100%; width: 100%;
} }
.logo {
.image-block { width: 15%;
width: 50%; margin-top: 20%;
}
.image-block .images {
width: 65%;
} }
.desc {
.image-block .image1 { width: 60%;
width: 75%;
margin: 15% 15% 0 0;
} }
.hline {
.image-block .image2 { width: 55%;
float: none;
margin: 30% 30% 0 0;
} }
.title {
.logo { font-weight: 400;
margin: 25% 0 0 25%; font-size: medium;
} }
} .offer {
font-size: small;
/* Media Query for Tablets Ipads portrait mode */ font-weight: 400;
@media (min-width: 769px) and (max-width: 992px) {
.card {
width: 50%;
min-height: 21em;
} }
.image-block {
.desc { width: 40%;
margin-top: 15%;
} }
} .image-block .image1 {
width: 80%;
/* Media Query for Laptops and Desktops */ margin-top: 65%;
@media (min-width: 992px) and (max-width: 1280px) {
.card {
width: 33.33%;
min-height: 22em;
} }
.image-block .images {
.wrapper { width: 80%;
margin-top: 2em; margin-top: 30%;
} }
} .image-block .image2 {
width: 100%;
/* Media Query for Large screens */ margin-top: 70%;
@media (min-width: 1280px) {
.card {
width: 33.33%;
min-height: 25em;
} }
/* .wrapper {
margin-top: 1em;
} */
} }
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