Skip to content

S
Simple-responsive-layout
Commit d9982d7e by Vinod
Options

MInor changes

parent 43342931
Showing with 163 additions and 163 deletions
CSS/style.css
* {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
color: white;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
width: 100%;
height: 100%;
color: white;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.container>div:nth-child(1) {
background-color: #41ca6e;
.container > div:nth-child(1) {
background-color: #41ca6e;
}
.container>div:nth-child(2) {
background-color: #fab153;
.container > div:nth-child(2) {
background-color: #fab153;
}
.container>div:nth-child(3) {
background-color: #7277d5;
.container > div:nth-child(3) {
background-color: #7277d5;
}
.container>div:nth-child(4) {
background-color: #f87d51;
.container > div:nth-child(4) {
background-color: #f87d51;
}
.container>div:nth-child(5) {
background-color: #ed5466;
.container > div:nth-child(5) {
background-color: #ed5466;
}
.container>div:nth-child(6) {
background-color: #4ec2e7;
.container > div:nth-child(6) {
background-color: #4ec2e7;
}
.container {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0 auto;
height: 100%;
width: 100%;
}
.card {
float: left;
width: calc(100%/3);
height: calc(100%/2);
float: left;
width: calc(100% / 3);
height: calc(100% / 2);
}
.wrapper {
width: 100%;
width: 100%;
}
.hline {
width: 55%;
height: 1.5px;
background: white;
margin: 5% 5% 10px 25%;
width: 55%;
height: 1.5px;
background: white;
margin: 5% 5% 10px 25%;
}
.main-logo {
position: absolute;
width: 4%;
margin: 1.5% 0 0 1.5%;
position: absolute;
width: 4%;
margin: 1.5% 0 0 1.5%;
}
.desc {
width: 60%;
float: left;
width: 60%;
float: left;
}
.title {
color: white;
font-weight: lighter;
margin-left: 25%;
color: white;
font-weight: lighter;
margin-left: 25%;
}
.offer {
color: white;
text-transform: uppercase;
font-weight: lighter;
font-size: smaller;
margin-left: 25%;
color: white;
text-transform: uppercase;
font-weight: lighter;
font-size: smaller;
margin-left: 25%;
}
.logo {
width: 18%;
margin: 35% 0 5% 25%;
width: 18%;
margin: 35% 0 5% 25%;
}
.image-block {
width: 40%;
float: right;
width: 40%;
float: right;
}
.image-block .images {
float: left;
width: 80%;
margin: 8% 0 0 5%;
float: left;
width: 80%;
margin: 8% 0 0 5%;
}
.image-block .image1 {
float: left;
width: 90%;
margin: 40% 20% 0 0;
float: left;
width: 90%;
margin: 40% 20% 0 0;
}
.image-block .image2 {
float: left;
width: 100%;
margin-top: 80%;
float: left;
width: 100%;
margin-top: 80%;
}
.only-mobile {
display: none;
display: none;
}
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
.main-logo {
width: 13%;
margin: 15px;
}
.card {
width: 100%;
min-height: 31em;
}
.hline {
width: 40%;
margin: 2% 0 2% 25%;
}
.desc {
width: 100%;
}
.image-block {
width: 100%;
float: none;
margin-left: 30%;
}
.image-block .images {
float: none;
width: 26%;
margin: 10% 0 0 5%;
}
.image-block .image1 {
width: 30%;
float: none;
margin-top: 8%;
}
.image-block .image2 {
float: none;
width: 45%;
margin: 10% 30% 0 0;
}
.logo {
width: 12%;
margin: 21% 0 0 25%;
}
.main-logo {
width: 13%;
margin: 15px;
}
.card {
width: 100%;
min-height: 31em;
}
.hline {
width: 40%;
margin: 2% 0 2% 25%;
}
.desc {
width: 100%;
}
.image-block {
width: 60%;
float: none;
margin-left: 30%;
}
.image-block .images {
float: none;
width: 50%;
margin: 10% 0 0 5%;
}
.image-block .image1 {
width: 50%;
float: none;
margin-top: 8%;
}
.image-block .image2 {
float: none;
width: 75%;
margin: 10% 30% 0 0;
}
.logo {
width: 12%;
margin: 21% 0 0 25%;
}
}
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 480px) and (max-width: 768px) {
.main-logo {
width: 10%;
margin: 15px;
}
.card {
width: 50%;
min-height: 31em;
}
.desc {
width: 100%;
}
.image-block {
width: 50%;
float: none;
margin-left: 30%;
}
.image-block .images {
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%;
}
.main-logo {
width: 10%;
margin: 15px;
}
.card {
width: 50%;
min-height: 31em;
}
.desc {
width: 100%;
}
.image-block {
width: 50%;
float: none;
margin-left: 30%;
}
.image-block .images {
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 (min-width: 768px) and (max-width: 992px) {
.card {
width: 50%;
min-height: 21em;
}
.card {
width: 50%;
min-height: 20em;
}
}
/* Media Query for Laptops and Desktops */
@media (min-width: 992px) and (max-width: 1280px) {
.card {
width: 33.33%;
min-height: 20em;
}
.card {
width: 33.33%;
min-height: 20em;
}
.wrapper {
margin-top: 2em;
}
.wrapper {
margin-top: 2em;
}
}
/* Media Query for Large screens */
@media (min-width: 1280px) {
.card {
width: 33.33%;
min-height: 23em;
}
.wrapper {
margin-top: 2em;
}
}
\ No newline at end of file
.card {
width: 33.33%;
min-height: 23em;
}
.wrapper {
margin-top: 2em;
}
}
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