Skip to content

S
Simple-responsive-layout
Commit 633743df by Vinod
Options

Updated without Flexbox & Grid

parent 5419f4b8
Showing with 92 additions and 72 deletions
CSS/style.css
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
} }
html, html,
...@@ -12,30 +11,44 @@ body { ...@@ -12,30 +11,44 @@ body {
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;
} }
.row>div:nth-child(1) { .container>div:nth-child(1) {
background-color: #41ca6e; background-color: #41ca6e;
} }
.row>div:nth-child(2) { .container>div:nth-child(2) {
background-color: #fab153; background-color: #fab153;
} }
.row>div:nth-child(3) { .container>div:nth-child(3) {
background-color: #7277d5; background-color: #7277d5;
} }
.row>div:nth-child(4) { .container>div:nth-child(4) {
background-color: #f87d51; background-color: #f87d51;
} }
.row>div:nth-child(5) { .container>div:nth-child(5) {
background-color: #ed5466; background-color: #ed5466;
} }
.row>div:nth-child(6) { .container>div:nth-child(6) {
background-color: #4ec2e7; background-color: #4ec2e7;
} }
.container {
margin: 0 auto;
height: 100%;
width: 100%;
}
.card {
display: inline-block;
margin-right: -0.25em;
margin-bottom: -0.25em;
width: calc(100%/3);
height: calc(100%/2);
position: relative;
}
.hline { .hline {
width: 10rem; width: 10rem;
...@@ -44,18 +57,16 @@ body { ...@@ -44,18 +57,16 @@ body {
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
} }
.row .column { .main-logo {
float: left; position: absolute;
width: 33.33%; width: 15%;
padding: 10px; margin: 5% 0 0 5%;
height: 475px;
position: relative;
display: flex;
/* flex-direction: row; */
} }
.desc { .desc {
margin: 10rem 0 0 5rem; display: inline-block;
position: absolute;
margin: 30% 0 0 15%;
} }
.title { .title {
...@@ -71,37 +82,28 @@ body { ...@@ -71,37 +82,28 @@ body {
} }
.logo { .logo {
width: 55px; width: 23%;
} }
.main-logo {
position: absolute;
width: 15%;
margin: 15px 0 0 15px;
}
.column .images { .card .images {
box-sizing: border-boxs;
width: 35%;
margin-left: 18rem;
margin-top: 5rem;
position: absolute; position: absolute;
/* display: flex; */ width: 30%;
margin: 10% 0 5% 65%;
} }
.row .column .image1 { .image1 {
width: 40%; /* float: right; */
margin-left: 17rem; width: 35%;
margin: 20% 0 5% 59%;
position: absolute; position: absolute;
margin-top: 7rem;
} }
.row .column .image2 { .container .card .image2 {
position: absolute; position: absolute;
height: 35%; height: 45%;
width: 50%; width: 50%;
margin-left: 15rem; margin: 30% 0 0 48%;
margin-top: 10rem;
} }
.only-mobile { .only-mobile {
...@@ -121,51 +123,53 @@ body { ...@@ -121,51 +123,53 @@ body {
.logo-mobile img { .logo-mobile img {
filter: grayscale(1) invert(1); filter: grayscale(1) invert(1);
margin: 20px 0 20px 15px; margin: 5% 0 5% 5%;
height: 22px; height: 22px;
} }
.mobile-container { .mobile-container {
margin: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #41ca6e; background-color: #41ca6e;
position: relative;
} }
.mobile-image { .mobile-image {
width: 50%; width: 50%;
margin: 2rem 5rem 0 5rem; margin: 10% 0 0 25%;
position: absolute; position: absolute;
} }
.mobile-logo { .mobile-logo {
width: 15%; width: 15%;
margin: 2rem 0 1rem 4rem; margin: 10% 0 5% 15%;
} }
.mobile-title { .mobile-title {
display: block;
text-transform: uppercase; text-transform: uppercase;
font-weight: 650; font-weight: 650;
font-size: larger; font-size: larger;
margin: 0 0 0 4rem; margin: 0 0 0 15%;
} }
.mobile-hline { .mobile-hline {
width: 14rem; width: 14rem;
height: 1.5px; height: 1.5px;
background: white; background: white;
margin: 10px 0 10px 4rem; margin: 3% 0 3% 15%;
} }
.mobile-offer { .mobile-offer {
text-transform: uppercase; text-transform: uppercase;
font-weight: 50; font-weight: 50;
font-size: 17px; margin: 0 0 0 15%;
margin: 0 0 0 4rem;
} }
.arrow { .arrow {
position: absolute; position: absolute;
margin: 5rem 0 0 1.5rem; margin: 15% 0 0 5%;
border: solid white; border: solid white;
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
display: inline-block; display: inline-block;
...@@ -174,52 +178,69 @@ body { ...@@ -174,52 +178,69 @@ body {
.right { .right {
transform: rotate(-45deg); transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); display: inline-block;
margin-left: 86%;
} }
.left { .left {
transform: rotate(135deg); transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.right-arrow {
margin-left: 17rem;
} }
.dot { .dot {
display: inline-block;
height: 10px; height: 10px;
width: 10px; width: 10px;
background-color: white; background-color: white;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
margin: 20rem 0 0 10rem; margin: 80% 0 0 45%;
} }
.circle { .circle {
position: absolute; display: inline-block;
width: 10px; width: 6px;
padding-bottom: 5px; padding-bottom: 5px;
border-radius: 50%; border-radius: 50%;
border: 3px solid white; border: 3px solid white;
margin: 20rem 0 0 11rem; margin: 80% 0 0 49%;
} }
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
.container {
display: none;
}
.only-mobile {
width: 100%;
display: contents;
}
}
@media screen and (max-width: 992px) { /* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
.card {
width: 50%;
}
}
.row .column { /* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
.card {
width: 50%; width: 50%;
} }
} }
@media screen and (max-width: 600px) { /* Media Query for Laptops and Desktops */
.row .column { @media (min-width: 1025px) and (max-width: 1280px) {
display: none; .card {
width: 33.33%;
} }
}
.only-mobile { /* Media Query for Large screens */
width: 100%; @media (min-width: 1281px) {
display: contents; .card {
width: 33.33%;
} }
} }
\ No newline at end of file
desktop.html
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
</head> </head>
<body> <body>
<div class="row"> <div class="container">
<div class="column"> <div class="card">
<img class="main-logo" src="/Logos/logo-aoc.png" alt="logo-aoc"> <img class="main-logo" src="/Logos/logo-aoc.png" alt="logo-aoc">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure"> <img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure">
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<img class="image1" src="/Images/image-1.png" alt="image-1"> <img class="image1" src="/Images/image-1.png" alt="image-1">
</div> </div>
<div class="column"> <div class="card">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure"> <img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure">
<div class="title"> <div class="title">
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<img class="images" src="/Images/image-2.png" alt="image-2"> <img class="images" src="/Images/image-2.png" alt="image-2">
</div> </div>
<div class="column"> <div class="card">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure"> <img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="title"> <div class="title">
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<img class="images" src="/Images/image-3.png" alt="image-3"> <img class="images" src="/Images/image-3.png" alt="image-3">
</div> </div>
<div class="column"> <div class="card">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure"> <img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure">
<div class="title"> <div class="title">
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<img class="images" src="/Images/image-4.png" alt="image-4"> <img class="images" src="/Images/image-4.png" alt="image-4">
</div> </div>
<div class="column"> <div class="card">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure"> <img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="title"> <div class="title">
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<img class="images" src="/Images/image-5.png" alt="image-5"> <img class="images" src="/Images/image-5.png" alt="image-5">
</div> </div>
<div class="column"> <div class="card">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure"> <img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure">
<div class="title"> <div class="title">
...@@ -117,9 +117,7 @@ ...@@ -117,9 +117,7 @@
</div> </div>
<div class="arrow left"></div> <div class="arrow left"></div>
<div class="right-arrow"> <div class="arrow right"></div>
<div class="arrow right"></div>
</div>
<img class="mobile-image" src="/Images/image-1.png" alt="image-1"> <img class="mobile-image" src="/Images/image-1.png" alt="image-1">
......
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