Skip to content

S
Simple-responsive-layout
Commit 7db9a694 by Vinod
Options

Changes updated (without Flex & Grid)

parent a12bcfaf
Showing with 158 additions and 89 deletions
CSS/style.css
...@@ -42,36 +42,37 @@ body { ...@@ -42,36 +42,37 @@ body {
} }
.card { .card {
display: inline-block; float: left;
margin-right: -0.30em;
margin-bottom: -0.30em;
width: calc(100%/3); width: calc(100%/3);
height: calc(100%/2); height: calc(100%/2);
position: relative; }
.wrapper {
width: 100%;
} }
.hline { .hline {
width: 10rem; width: 55%;
height: 1.5px; height: 1.5px;
background: white; background: white;
margin: 10px 0 10px 0; margin: 5% 5% 10px 25%;
} }
.main-logo { .main-logo {
position: absolute; position: absolute;
width: 15%; width: 4%;
margin: 5% 0 0 5%; margin: 1.5% 0 0 1.5%;
} }
.desc { .desc {
display: inline-block; width: 60%;
position: absolute; float: left;
margin: 30% 0 0 15%;
} }
.title { .title {
color: white; color: white;
font-weight: lighter; font-weight: lighter;
margin-left: 25%;
} }
.offer { .offer {
...@@ -79,31 +80,35 @@ body { ...@@ -79,31 +80,35 @@ body {
text-transform: uppercase; text-transform: uppercase;
font-weight: lighter; font-weight: lighter;
font-size: smaller; font-size: smaller;
margin-left: 25%;
} }
.logo { .logo {
width: 23%; width: 18%;
margin: 35% 0 5% 25%;
} }
.image-block {
width: 40%;
float: right;
}
.card .images { .image-block .images {
position: absolute; float: left;
width: 30%; width: 80%;
margin: 10% 0 5% 65%; margin: 8% 0 0 5%;
} }
.image1 { .image-block .image1 {
/* float: right; */ float: left;
width: 35%; width: 90%;
margin: 20% 0 5% 59%; margin: 40% 20% 0 0;
position: absolute;
} }
.container .card .image2 { .image-block .image2 {
position: absolute; float: left;
height: 45%; width: 100%;
width: 50%; margin-top: 80%;
margin: 30% 0 0 48%;
} }
.only-mobile { .only-mobile {
...@@ -111,8 +116,6 @@ body { ...@@ -111,8 +116,6 @@ body {
} }
/* Styling For Mobile */ /* Styling For Mobile */
.header { .header {
...@@ -130,7 +133,7 @@ body { ...@@ -130,7 +133,7 @@ body {
.mobile-container { .mobile-container {
margin: auto; margin: auto;
width: 100%; width: 100%;
height: 100%; min-height: 65em;
background-color: #41ca6e; background-color: #41ca6e;
position: relative; position: relative;
} }
...@@ -155,7 +158,7 @@ body { ...@@ -155,7 +158,7 @@ body {
} }
.mobile-hline { .mobile-hline {
width: 14rem; width: 60%;
height: 1.5px; height: 1.5px;
background: white; background: white;
margin: 3% 0 3% 15%; margin: 3% 0 3% 15%;
...@@ -179,7 +182,7 @@ body { ...@@ -179,7 +182,7 @@ body {
.right { .right {
transform: rotate(-45deg); transform: rotate(-45deg);
display: inline-block; display: inline-block;
margin-left: 86%; margin-left: 80%;
} }
.left { .left {
...@@ -198,7 +201,7 @@ body { ...@@ -198,7 +201,7 @@ body {
.circle { .circle {
display: inline-block; display: inline-block;
width: 6px; width: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border-radius: 50%; border-radius: 50%;
border: 3px solid white; border: 3px solid white;
...@@ -218,34 +221,75 @@ body { ...@@ -218,34 +221,75 @@ body {
} }
/* Media Query for low resolution Tablets, Ipads */ /* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) { @media (min-width: 480px) and (max-width: 768px) {
.main-logo{
width: 10%;
margin: 15px;
}
.card { .card {
width: 50%; width: 50%;
max-height: 40%; 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 Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) { @media (min-width: 768px) and (max-width: 992px) {
.card { .card {
width: 50%; width: 50%;
max-height: 50%; min-height: 21em;
} }
} }
/* Media Query for Laptops and Desktops */ /* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) { @media (min-width: 992px) and (max-width: 1280px) {
.card { .card {
width: 33.33%; width: 33.33%;
max-height: 50%; min-height: 20em;
}
.wrapper {
margin-top: 2em;
} }
} }
/* Media Query for Large screens */ /* Media Query for Large screens */
@media (min-width: 1281px) { @media (min-width: 1280px) {
.card { .card {
width: 33.33%; width: 33.33%;
max-height: 50%; min-height: 23em;
}
.wrapper {
margin-top: 2em;
} }
} }
\ No newline at end of file
desktop.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Responsive Layout(without Grid & Flex)</title>
<link rel="stylesheet" href="/CSS/style.css"> <link rel="stylesheet" href="/CSS/style.css">
</head> </head>
...@@ -13,87 +13,111 @@ ...@@ -13,87 +13,111 @@
<div class="container"> <div class="container">
<div class="card"> <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="wrapper">
<img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure"> <div class="desc">
<div class="title"> <img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure">
<p>Astonishing <br>features requires <br>worry-free security</p> <div class="title">
<p>Astonishing <br>features requires <br>worry-free security</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>1 year free mobile security</p>
</div>
</div> </div>
<div class="hline"></div> <div class="image-block">
<div class="offer"> <img class="image1" src="/Images/image-1.png" alt="image-1">
<p>1 year free mobile security</p>
</div> </div>
</div> </div>
<img class="image1" src="/Images/image-1.png" alt="image-1">
</div> </div>
<div class="card"> <div class="card">
<div class="desc"> <div class="wrapper">
<img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure"> <div class="desc">
<div class="title"> <img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure">
<p>Be hooked!</p> <div class="title">
<p>Be hooked!</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>2000+ movies from bollywood</p>
</div>
</div> </div>
<div class="hline"></div> <div class="image-block">
<div class="offer"> <img class="images" src="/Images/image-2.png" alt="image-2">
<p>2000+ movies from bollywood</p>
</div> </div>
</div> </div>
<img class="images" src="/Images/image-2.png" alt="image-2">
</div> </div>
<div class="card"> <div class="card">
<div class="desc"> <div class="wrapper">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure"> <div class="desc">
<div class="title"> <img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<p>The best things in <br>life are free<br></p> <div class="title">
<p>The best things in <br>life are free<br></p>
</div>
<div class="hline"></div>
<div class="offer">
<p>free mobile pouch</p>
</div>
</div> </div>
<div class="hline"></div> <div class="image-block">
<div class="offer"> <img class="images" src="/Images/image-3.png" alt="image-3">
<p>free mobile pouch</p>
</div> </div>
</div> </div>
<img class="images" src="/Images/image-3.png" alt="image-3">
</div> </div>
<div class="card"> <div class="card">
<div class="desc"> <div class="wrapper">
<img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure"> <div class="desc">
<div class="title"> <img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure">
<p>The thump <br>never ends here</p> <div class="title">
<p>The thump <br>never ends here</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>1000's of songs</p>
</div>
</div> </div>
<div class="hline"></div> <div class="image-block">
<div class="offer"> <img class="images" src="/Images/image-4.png" alt="image-4">
<p>1000's of songs</p>
</div> </div>
</div> </div>
<img class="images" src="/Images/image-4.png" alt="image-4">
</div> </div>
<div class="card"> <div class="card">
<div class="desc"> <div class="wrapper">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure"> <div class="desc">
<div class="title"> <img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<p>Being globally you</p> <div class="title">
<p>Being globally you</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>21 indian & foreign languages</p>
</div>
</div> </div>
<div class="hline"></div> <div class="image-block">
<div class="offer"> <img class="images" src="/Images/image-5.png" alt="image-5">
<p>21 indian & foreign languages</p>
</div> </div>
</div> </div>
<img class="images" src="/Images/image-5.png" alt="image-5">
</div> </div>
<div class="card"> <div class="card">
<div class="desc"> <div class="wrapper">
<img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure"> <div class="desc">
<div class="title"> <img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure">
<p>For the wise</p> <div class="title">
<p>For the wise</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>1000 pts discount <br>on subscription</p>
</div>
</div> </div>
<div class="hline"></div> <div class="image-block">
<div class="offer"> <img class="image2" src="/Images/image-6.png" alt="image-6">
<p>1000 pts discount <br>on subscription</p>
</div> </div>
</div> </div>
<img class="image2" src="/Images/image-6.png" alt="image-6">
</div> </div>
</div> </div>
......
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