Skip to content

S
Simple-responsive-layout
Commit 01eadc80 by Vinod
Options

Changes done after review

parent 9db91e20
Showing with 206 additions and 162 deletions
CSS/style.css
...@@ -8,31 +8,30 @@ body { ...@@ -8,31 +8,30 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: white; color: white;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, font-family: "Open Sans", sans-serif;
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
} }
.container > div:nth-child(1) { .container > div:nth-child(2) {
background-color: #41ca6e; background-color: #41ca6e;
} }
.container > div:nth-child(2) { .container > div:nth-child(3) {
background-color: #fab153; background-color: #fab153;
} }
.container > div:nth-child(3) { .container > div:nth-child(4) {
background-color: #7277d5; background-color: #7277d5;
} }
.container > div:nth-child(4) { .container > div:nth-child(5) {
background-color: #f87d51; background-color: #f87d51;
} }
.container > div:nth-child(5) { .container > div:nth-child(6) {
background-color: #ed5466; background-color: #ed5466;
} }
.container > div:nth-child(6) { .container > div:nth-child(7) {
background-color: #4ec2e7; background-color: #4ec2e7;
} }
...@@ -41,11 +40,17 @@ body { ...@@ -41,11 +40,17 @@ body {
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
scroll-snap-type: y mandatory;
overflow-y: scroll;
} }
.card { .card {
width: 100%; padding: 5%;
min-height: 36em; min-height: 100vh;
display: flex;
align-items: center;
scroll-snap-align: start;
box-sizing: border-box;
} }
.main-logo { .main-logo {
...@@ -55,17 +60,13 @@ body { ...@@ -55,17 +60,13 @@ body {
} }
.wrapper { .wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%; width: 100%;
margin-top: 20%;
} }
.logo { .logo {
width: 15%; width: 15%;
margin-left: 20%; margin-left: 3rem;
margin-top: 25%;
} }
.desc { .desc {
...@@ -76,42 +77,40 @@ body { ...@@ -76,42 +77,40 @@ body {
width: 45%; width: 45%;
height: 1.5px; height: 1.5px;
background: white; background: white;
margin: 4% 0 3% 20%; margin: 4% 0 3% 3rem;
} }
.title { .title {
font-weight: normal; font-weight: normal;
font-size: larger; font-size: larger;
margin-top: 3%; margin-top: 3%;
margin-left: 20%; margin-left: 3rem;
} }
.offer { .offer {
text-transform: uppercase; text-transform: uppercase;
font-weight: lighter; font-weight: lighter;
margin-left: 20%; margin-left: 3rem;
} }
.image-block { .image-block {
display: flex; text-align: center;
justify-content: center;
width: 100%; width: 100%;
margin-top: 10%;
} }
.image-block .image1 { .image-block .image1 {
width: 35%; width: 10rem;
margin-bottom: 2%; margin-bottom: 2%;
margin-top: 10%;
} }
.image-block .images { .image-block .images {
width: 30%; width: 50%;
margin: 10% 0 1% 0;
} }
.image-block .image2 { .image-block .image2 {
width: 50%; width: 60%;
margin-top: 15%; margin-top: 20%;
} }
/* Media Query for Tablets, Ipads */ /* Media Query for Tablets, Ipads */
...@@ -120,39 +119,55 @@ body { ...@@ -120,39 +119,55 @@ body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
overflow-y: unset;
} }
.card { .card {
display: flex;
align-items: flex-start;
width: 50%; width: 50%;
padding: 5%;
min-height: 70vh;
} }
.main-logo { .main-logo {
width: 15%; width: 15%;
} }
.logo { .logo {
width: 20%; width: 20%;
margin-top: 45%; margin: 0;
}
.title {
margin: 0;
}
.offer {
margin: 0;
}
.hline {
width: 10rem;
margin: 4% 0 3% 0;
}
.image-block {
margin-top: 15%;
} }
.image-block .image1 { .image-block .image1 {
width: 55%; width: 55%;
margin-top: 15%;
} }
.image-block .images { .image-block .images {
width: 50%; width: 50%;
margin: 15% 0 1% 0;
} }
.image-block .image2 { .image-block .image2 {
width: 70%; width: 70%;
margin-top: 20%; min-height: 25%;
} }
} }
/* Media Query for Tablets Ipads portrait mode */ /* Media Query for Tablets Ipads portrait mode */
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.card { .card {
min-height: 20em; min-height: 20vh;
align-items: center;
} }
.main-logo { .main-logo {
width: 10%; width: 10%;
margin: 2%;
} }
.wrapper { .wrapper {
display: flex; display: flex;
...@@ -161,35 +176,34 @@ body { ...@@ -161,35 +176,34 @@ body {
} }
.logo { .logo {
width: 20%; width: 20%;
margin-top: 30%; }
.wrapper {
margin-top: 0;
} }
.desc { .desc {
width: 60%; width: 60%;
display: flex;
flex-direction: column;
justify-content: center;
} }
.hline { .hline {
width: 70%; width: 70%;
} }
.title { .title {
font-size: medium; font-size: large;
}
.offer {
font-weight: 300;
font-size: medium;
} }
.image-block { .image-block {
width: 40%; width: 40%;
} }
.image-block .images { .image-block .images {
width: 70%; width: 9rem;
margin: 50% 0 1% 0;
} }
.image-block .image1 { .image-block .image1 {
width: 80%; width: 8rem;
margin-top: 70%;
} }
.image-block .image2 { .image-block .image2 {
width: 100%; width: 95%;
margin-top: 75%; margin: 0;
} }
} }
...@@ -202,7 +216,7 @@ body { ...@@ -202,7 +216,7 @@ body {
} }
.card { .card {
width: calc(100% / 3); width: calc(100% / 3);
min-height: 20em; padding: 0;
} }
.main-logo { .main-logo {
position: absolute; position: absolute;
...@@ -210,15 +224,18 @@ body { ...@@ -210,15 +224,18 @@ body {
margin: 2%; margin: 2%;
} }
.wrapper { .wrapper {
display: flex;
flex-direction: row;
width: 100%; width: 100%;
padding: 7%;
} }
.logo { .logo {
width: 15%; width: 20%;
margin-top: 20%; margin-top: 0;
margin-bottom: 5%;
} }
.desc { .desc {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%; width: 60%;
} }
.hline { .hline {
...@@ -226,25 +243,24 @@ body { ...@@ -226,25 +243,24 @@ body {
} }
.title { .title {
font-weight: 400; font-weight: 400;
font-size: medium; font-size: large;
} }
.offer { .offer {
font-size: small;
font-weight: 400; font-weight: 400;
font-size: medium;
} }
.image-block { .image-block {
width: 40%; width: 45%;
margin: 0;
} }
.image-block .image1 { .image-block .image1 {
width: 80%; width: 95%;
margin-top: 65%;
} }
.image-block .images { .image-block .images {
width: 80%; width: 85%;
margin-top: 30%;
} }
.image-block .image2 { .image-block .image2 {
width: 100%; min-width: 100%;
margin-top: 70%; margin-top: 50%;
} }
} }
desktop.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Layout</title>
<link rel="stylesheet" href="/CSS/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
</head>
<head> <body>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout(without Grid & Flex)</title>
<link rel="stylesheet" href="/CSS/style.css">
</head>
<body>
<div class="container"> <div class="container">
<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="card">
<div class="wrapper"> <div class="wrapper">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure"> <img
<div class="title"> class="logo"
<p>Astonishing <br>features requires <br>worry-free security</p> src="/Logos/logo-f-secure.png"
</div> alt="logo-f-secure"
<div class="hline"></div> />
<div class="offer"> <div class="title">
<p>1 year free mobile security</p> <p>
</div> Astonishing <br />features requires <br />worry-free security
</div> </p>
<div class="image-block"> </div>
<img class="image1" src="/Images/image-1.png" alt="image-1"> <div class="hline"></div>
</div> <div class="offer">
<p>1 YEAR FREE MOBILE SECURITY</p>
</div> </div>
</div>
<div class="image-block">
<img class="image1" src="/Images/image-1.png" alt="image-1" />
</div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="wrapper"> <div class="wrapper">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure"> <img
<div class="title"> class="logo"
<p>Be hooked!</p> src="/Logos/logo-digitainment.png"
</div> alt="logo-digitainment"
<div class="hline"></div> />
<div class="offer"> <div class="title">
<p>2000+ movies from bollywood</p> <p>Be hooked!</p>
</div>
</div>
<div class="image-block">
<img class="images" src="/Images/image-2.png" alt="image-2">
</div>
</div> </div>
<div class="hline"></div>
<div class="offer">
<p>2000+ MOVIES FROM BOLLYWOOD</p>
</div>
</div>
<div class="image-block">
<img class="images" src="/Images/image-2.png" alt="image-2" />
</div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="wrapper"> <div class="wrapper">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure"> <img
<div class="title"> class="logo"
<p>The best things in <br>life are free<br></p> src="/Logos/logo-adaptxt.png"
</div> alt="logo-adaptxt"
<div class="hline"></div> />
<div class="offer"> <div class="title">
<p>free mobile pouch</p> <p>The best things in <br />life are free<br /></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>
<div class="image-block">
<img class="images" src="/Images/image-3.png" alt="image-3" />
</div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="wrapper"> <div class="wrapper">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure"> <img
<div class="title"> class="logo"
<p>The thump <br>never ends here</p> src="/Logos/logo-hungama.png"
</div> alt="logo-hungama"
<div class="hline"></div> />
<div class="offer"> <div class="title">
<p>1000's of songs</p> <p>The thump <br />never ends here</p>
</div>
</div>
<div class="image-block">
<img class="images" src="/Images/image-4.png" alt="image-4">
</div>
</div> </div>
<div class="hline"></div>
<div class="offer">
<p>1000's OF SONGS</p>
</div>
</div>
<div class="image-block">
<img class="images" src="/Images/image-4.png" alt="image-4" />
</div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="wrapper"> <div class="wrapper">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure"> <img
<div class="title"> class="logo"
<p>Being globally you</p> src="/Logos/logo-adaptxt.png"
</div> alt="logo-adaptxt"
<div class="hline"></div> />
<div class="offer"> <div class="title">
<p>21 indian & foreign languages</p> <p>Being globally you</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>
<div class="image-block">
<img class="images" src="/Images/image-5.png" alt="image-5" />
</div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="wrapper"> <div class="wrapper">
<div class="desc"> <div class="desc">
<img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure"> <img
<div class="title"> class="logo"
<p>For the wise</p> src="/Logos/logo-read-where.png"
</div> alt="logo-read-where"
<div class="hline"></div> />
<div class="offer"> <div class="title">
<p>1000 pts discount <br>on subscription</p> <p>For the wise</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>
<div class="image-block">
<img class="image2" src="/Images/image-6.png" alt="image-6" />
</div>
</div> </div>
</div>
</div> </div>
</body> </body>
</html> </html>
\ 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