Skip to content

S
Simple-responsive-layout
Commit 3c4d2bf7 by Vinod
Options

Code restructured

parent bd96c762
Showing with 181 additions and 179 deletions
CSS/style.css
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
html, html,
body { 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: grid; display: grid;
/* grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); */ grid-template-columns: repeat(1, 1fr);
grid-template-columns: repeat(auto-fill, minmax(calc(100%/3), 1fr));
grid-template-rows: repeat(2, 1fr);
} }
.card { .card {
min-height: 50vh; min-height: auto;
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
/* position: relative; */
}
.hline {
width: 55%;
height: 1.5px;
background: white;
margin: 5% 5% 10px 25%;
} }
.main-logo { .main-logo {
position: absolute; position: absolute;
width: 5%; width: 20%;
margin: 25px 0 0 25px; margin: 5%;
} }
.desc { .desc {
display: inline-block; display: grid;
width: 60%; width: 100%;
}
.logo {
width: 15%;
margin: 20% 0 5% 25%;
} }
.title { .title {
font-weight: lighter; font-size: larger;
margin-left: 25%; font-weight: 400;
margin-left: 25%;
} }
.hline {
.offer { width: 50%;
text-transform: uppercase; height: 1.5px;
font-weight: lighter; background: white;
font-size: smaller; margin: 4% 0 2% 25%;
margin-left: 25%;
} }
.offer {
.logo { text-transform: uppercase;
width: 15%; font-weight: lighter;
margin: 35% 0 5% 25%; font-size: large;
margin-left: 25%;
} }
.image-block { .image-block {
width: 40%; width: 100%;
float: right;
}
.image-block .images {
width: 80%;
margin: 25% 0 0 5%;
} }
.image-block .image1 { .image-block .image1 {
width: 90%; width: 50%;
margin: 45% 25% 0 0; margin: 10% 0 2% 20%;
} }
.image-block .images {
.image-block .image2 { width: 40%;
width: 100%; margin: 10% 0 2% 30%;
margin-top: 80%;
}
.only-mobile {
display: none;
} }
.image-block .image2 {
/* Media Query for Mobile Devices */ width: 60%;
@media (max-width: 480px) { margin: 10% 0 0 20%;
.container {
grid-template-columns: repeat(1, 1fr);
}
.main-logo {
width: 15%;
margin: 4%;
}
.hline {
width: 38%;
margin: 2% 0 2% 25%;
}
.desc {
width: 100%;
}
.image-block {
float: none;
margin-left: 30%;
}
.image-block .images {
float: none;
margin: 10% 0 5% 5%;
}
.image-block .image1 {
width: 85%;
margin: 20% 15% 5% 0;
}
.image-block .image2 {
float: none;
margin: 30% 30% 5% 0;
}
.logo {
margin: 20% 0 0 25%;
}
} }
/* Media Query for low resolution Tablets, Ipads */ /* Media Query for Tablets, Ipads */
@media (min-width: 480px) and (max-width: 768px) { @media only screen and (min-width: 480px) {
.container { .container {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.card {
.main-logo { width: 100%;
width: 10%; }
margin: 15px; .hline {
} width: 60%;
height: 1.5px;
.card { background: white;
width: 100%; }
min-height: 31em; .main-logo {
} position: absolute;
width: 13%;
.desc { margin: 5%;
width: 100%; }
} .title {
font-size: large;
.image-block { }
width: 50%; .offer {
float: none; font-size: medium;
margin-left: 30%; }
} .logo {
width: 20%;
.image-block .images { margin: 30% 0 5% 25%;
float: none; }
width: 65%;
margin: 10% 0 0 5%;
}
.image-block .image1 {
width: 75%;
margin: 15% 15% 0 0;
}
.image-block .image2 {
float: none;
margin: 30% 30% 0 0;
}
.logo {
margin: 25% 0 0 25%;
}
} }
/* Media Query for Tablets Ipads portrait mode */ /* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 992px) { @media only screen and (min-width: 768px) {
.container { .container {
grid-template-columns: repeat(2, 1fr); display: grid;
} grid-template-columns: repeat(2, 1fr);
}
.card {
min-height: 45vh;
}
.main-logo {
position: absolute;
width: 8%;
margin: 3%;
}
.wrapper {
width: 100%;
}
.logo {
width: 25%;
margin: 30% 0 5% 25%;
}
.desc {
display: inline-block;
width: 60%;
}
.title {
font-weight: 400;
font-size: medium;
}
.offer {
font-weight: lighter;
font-size: 300;
margin-bottom: 5%;
}
.image-block {
width: 40%;
float: right;
}
.image-block .image1 {
width: 80%;
margin: 65% 0 0 0;
}
.image-block .images {
width: 70%;
margin: 35% 0 0 5%;
}
.image-block .image2 {
width: 100%;
margin: 80% 0 0 0;
}
} }
/* Media Query for Laptops and Desktops */ /* Media Query for Laptops and Desktops */
@media (min-width: 992px) and (max-width: 1280px) { @media only screen and (min-width: 992px) {
.card { .container {
width: 100%; display: grid;
} grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3), 1fr));
}
.card {
min-height: 50vh;
}
.main-logo {
position: absolute;
width: 5%;
margin: 2%;
}
.wrapper {
width: 100%;
}
.logo {
width: 20%;
margin: 40% 0 5% 25%;
}
.desc {
display: inline-block;
width: 60%;
}
.title {
font-weight: 400;
font-size: medium;
}
.offer {
font-weight: lighter;
font-size: 300;
margin-bottom: 5%;
}
.image-block {
width: 40%;
float: right;
}
.image-block .image1 {
width: 85%;
margin-top: 65%;
}
.image-block .images {
width: 70%;
margin: 45% 0 0 5%;
}
.image-block .image2 {
width: 100%;
margin-top: 85%;
}
} }
/* Media Query for Large screens */
@media (min-width: 1280px) {
.card {
width: 100%;
}
}
\ No newline at end of file
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