Skip to content

S
Simple-responsive-layout
Commit 2842eac4 by Vinod
Options

Updated the code

parent 3c4d2bf7
Showing with 108 additions and 69 deletions
CSS/style.css
......@@ -13,93 +13,108 @@ body {
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.container > div:nth-child(1) {
.container > div:nth-child(2) {
background-color: #41ca6e;
}
.container > div:nth-child(2) {
.container > div:nth-child(3) {
background-color: #fab153;
}
.container > div:nth-child(3) {
.container > div:nth-child(4) {
background-color: #7277d5;
}
.container > div:nth-child(4) {
.container > div:nth-child(5) {
background-color: #f87d51;
}
.container > div:nth-child(5) {
.container > div:nth-child(6) {
background-color: #ed5466;
}
.container > div:nth-child(6) {
.container > div:nth-child(7) {
background-color: #4ec2e7;
}
.container {
display: grid;
grid-template-columns: repeat(1, 1fr);
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
.card {
min-height: auto;
padding: 5%;
scroll-snap-align: start;
min-height: 100vh;
display: grid;
align-items: center;
}
.wrapper {
width: 100%;
align-self: center;
display: grid;
margin-top: 20%;
}
.main-logo {
position: absolute;
width: 20%;
width: 18%;
margin: 5%;
}
.desc {
display: grid;
justify-content: center;
width: 100%;
}
.logo {
width: 15%;
margin: 20% 0 5% 25%;
width: 20%;
margin: 0 0 5% 0;
}
.title {
font-size: larger;
font-weight: 400;
margin-left: 25%;
}
.hline {
width: 50%;
width: 65%;
height: 1.5px;
background: white;
margin: 4% 0 2% 25%;
margin: 4% 0 2% 0;
}
.offer {
text-transform: uppercase;
font-weight: lighter;
font-size: large;
margin-left: 25%;
}
.image-block {
width: 100%;
text-align: center;
}
.image-block .image1 {
width: 50%;
margin: 10% 0 2% 20%;
margin: 10% 0 2% 0;
}
.image-block .images {
width: 40%;
margin: 10% 0 2% 30%;
margin: 10% 0 2% 0;
}
.image-block .image2 {
width: 60%;
margin: 10% 0 0 20%;
margin: 10% 0 0 0;
}
/* Media Query for Tablets, Ipads */
@media only screen and (min-width: 480px) {
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
height: auto;
}
.card {
width: 100%;
min-height: 65vh;
}
.wrapper {
align-self: self-start;
}
.hline {
width: 60%;
......@@ -107,9 +122,8 @@ body {
background: white;
}
.main-logo {
position: absolute;
width: 13%;
margin: 5%;
width: 10%;
margin: 3%;
}
.title {
font-size: large;
......@@ -119,7 +133,6 @@ body {
}
.logo {
width: 20%;
margin: 30% 0 5% 25%;
}
}
......@@ -128,9 +141,10 @@ body {
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
height: auto;
}
.card {
min-height: 45vh;
min-height: 25vh;
}
.main-logo {
position: absolute;
......@@ -139,14 +153,16 @@ body {
}
.wrapper {
width: 100%;
margin: 0;
grid-template-columns: repeat(2, 1fr);
}
.logo {
width: 25%;
margin: 30% 0 5% 25%;
margin: 30% 0 5% 0;
}
.desc {
display: inline-block;
width: 60%;
width: 100%;
}
.title {
font-weight: 400;
......@@ -158,20 +174,19 @@ body {
margin-bottom: 5%;
}
.image-block {
width: 40%;
float: right;
width: 100%;
text-align: right;
}
.image-block .image1 {
width: 80%;
margin: 65% 0 0 0;
width: 65%;
margin: 30% 0 0 0;
}
.image-block .images {
width: 70%;
margin: 35% 0 0 5%;
width: 55%;
}
.image-block .image2 {
width: 100%;
margin: 80% 0 0 0;
width: 80%;
margin: 50% 0 0 0;
}
}
......@@ -183,6 +198,8 @@ body {
}
.card {
min-height: 50vh;
display: grid;
align-content: center;
}
.main-logo {
position: absolute;
......@@ -191,14 +208,15 @@ body {
}
.wrapper {
width: 100%;
display: grid;
align-content: center;
}
.logo {
width: 20%;
margin: 40% 0 5% 25%;
}
.desc {
display: inline-block;
width: 60%;
width: 100%;
}
.title {
font-weight: 400;
......@@ -210,19 +228,16 @@ body {
margin-bottom: 5%;
}
.image-block {
width: 40%;
float: right;
width: 100%;
}
.image-block .image1 {
width: 85%;
margin-top: 65%;
width: 75%;
}
.image-block .images {
width: 70%;
margin: 45% 0 0 5%;
width: 60%;
margin: 0;
}
.image-block .image2 {
width: 100%;
margin-top: 85%;
}
}
desktop.html
<!DOCTYPE html>
<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">
<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(without Grid & Flex)</title>
<link rel="stylesheet" href="/CSS/style.css">
</head>
<link rel="stylesheet" href="/CSS/style.css" />
</head>
<body>
<body>
<div class="container">
<img class="main-logo" src="/Logos/logo-aoc.png" alt="logo-aoc" />
<div class="card">
<img class="main-logo" src="/Logos/logo-aoc.png" alt="logo-aoc">
<div class="wrapper">
<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"
/>
<div class="title">
<p>Astonishing <br>features requires <br>worry-free security</p>
<p>
Astonishing <br />features requires <br />worry-free security
</p>
</div>
<div class="hline"></div>
<div class="offer">
......@@ -25,7 +30,7 @@
</div>
</div>
<div class="image-block">
<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>
......@@ -33,7 +38,11 @@
<div class="card">
<div class="wrapper">
<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">
<p>Be hooked!</p>
</div>
......@@ -43,7 +52,7 @@
</div>
</div>
<div class="image-block">
<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>
......@@ -51,9 +60,13 @@
<div class="card">
<div class="wrapper">
<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">
<p>The best things in <br>life are free<br></p>
<p>The best things in <br />life are free<br /></p>
</div>
<div class="hline"></div>
<div class="offer">
......@@ -61,7 +74,7 @@
</div>
</div>
<div class="image-block">
<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>
......@@ -69,9 +82,13 @@
<div class="card">
<div class="wrapper">
<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">
<p>The thump <br>never ends here</p>
<p>The thump <br />never ends here</p>
</div>
<div class="hline"></div>
<div class="offer">
......@@ -79,7 +96,7 @@
</div>
</div>
<div class="image-block">
<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>
......@@ -87,7 +104,11 @@
<div class="card">
<div class="wrapper">
<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">
<p>Being globally you</p>
</div>
......@@ -97,7 +118,7 @@
</div>
</div>
<div class="image-block">
<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>
......@@ -105,21 +126,24 @@
<div class="card">
<div class="wrapper">
<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">
<p>For the wise</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>1000 pts discount <br>on subscription</p>
<p>1000 pts discount <br />on subscription</p>
</div>
</div>
<div class="image-block">
<img class="image2" src="/Images/image-6.png" alt="image-6">
<img class="image2" src="/Images/image-6.png" alt="image-6" />
</div>
</div>
</div>
</div>
</body>
</body>
</html>
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