Skip to content

S
Simple-responsive-layout
Commit f71d2249 by Vinod
Options

Updated with Grid

parent db8efb52
Showing with 164 additions and 88 deletions
CSS/style.css
......@@ -36,74 +36,80 @@ body {
background-color: #4ec2e7;
}
.container {
display: grid;
/* grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); */
grid-template-columns: repeat(auto-fill, minmax(calc(100%/3), 1fr));
grid-template-rows: repeat(2, 1fr);
}
.card {
min-height: 50vh;
}
.wrapper {
width: 100%;
/* position: relative; */
}
.hline {
width: 10rem;
width: 55%;
height: 1.5px;
background: white;
margin: 10px 0 10px 0;
margin: 5% 5% 10px 25%;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
/* grid-template-columns: repeat(auto-fill, minmax(calc(100%/3), 1fr)); */
grid-template-rows: repeat(2, 1fr);
.main-logo {
position: absolute;
width: 5%;
margin: 25px 0 0 25px;
}
.desc {
position: absolute;
margin: 15rem 0 0 5rem;
display: inline-block;
width: 60%;
}
.title {
color: white;
font-weight: lighter;
margin-left: 25%;
}
.offer {
color: white;
text-transform: uppercase;
font-weight: lighter;
font-size: smaller;
margin-left: 25%;
}
.logo {
position: absolute;
width: 50px;
margin: 11rem 0 0 5rem;
width: 15%;
margin: 35% 0 5% 25%;
}
.main-logo {
position: absolute;
max-width: 100%;
width: 5%;
margin: 25px 0 0 25px;
.logo-small {
width: 25%;
margin: 35% 0 5% 25%;
}
/* .column .images { */
.container .images {
display: grid;
max-width: 100%;
width: 35%;
margin: 5rem 0 0 19rem;
.image-block {
width: 40%;
float: right;
}
/* .container .column .image1 { */
.container .image1 {
max-width: 100%;
width: 13%;
margin-left: 18rem;
position: absolute;
margin-top: 10rem;
.image-block .images {
width: 80%;
margin: 25% 0 0 5%;
}
/* .container .column .image2 { */
.container .image2 {
display: grid;
max-width: 100%;
width: 55%;
margin: 12rem 0 0 14rem;
.image-block .image1 {
width: 90%;
margin: 45% 25% 0 0;
}
.image-block .image2 {
width: 100%;
margin-top: 80%;
}
.only-mobile {
......@@ -121,69 +127,67 @@ body {
.logo-mobile img {
filter: grayscale(1) invert(1);
margin: 20px 0 20px 15px;
margin: 5% 0 5% 5%;
height: 22px;
}
.mobile-container {
margin: auto;
width: 100%;
height: 100%;
min-height: 65em;
background-color: #41ca6e;
position: relative;
}
.mobile-image {
width: 50%;
margin: 2rem 5rem 0 5rem;
margin: 10% 0 0 25%;
position: absolute;
}
.mobile-logo {
width: 15%;
margin: 2rem 0 1rem 4rem;
margin: 10% 0 5% 15%;
}
.mobile-title {
text-transform: uppercase;
font-weight: 650;
font-size: larger;
margin: 0 0 0 4rem;
margin: 0 0 0 15%;
}
.mobile-hline {
width: 14rem;
width: 65%;
height: 1.5px;
background: white;
margin: 10px 0 10px 4rem;
margin: 3% 0 3% 15%;
}
.mobile-offer {
text-transform: uppercase;
font-weight: 50;
font-size: 17px;
margin: 0 0 0 4rem;
margin: 0 0 0 15%;
}
.arrow {
display: inline-block;
position: absolute;
margin: 5rem 0 0 1.5rem;
margin: 15% 0 0 5%;
border: solid white;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 15px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
display: inline-block;
margin-left: 80%;
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.right-arrow {
margin-left: 17rem;
}
.dot {
......@@ -192,7 +196,7 @@ body {
background-color: white;
border-radius: 50%;
position: absolute;
margin: 20rem 0 0 10rem;
margin: 80% 0 0 45%;
}
.circle {
......@@ -201,28 +205,85 @@ body {
padding-bottom: 5px;
border-radius: 50%;
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: 768px) {
/* .container .column { */
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 480px) and (max-width: 768px) {
.container {
min-width: 50%;
grid-template-columns: repeat(2, 1fr);
}
.main-logo {
width: 10%;
margin: 15px;
}
.card {
width: 100%;
min-height: 31em;
}
.desc {
width: 100%;
}
}
@media screen and (max-width: 480px) {
.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;
}
/* .container .column { */
.logo {
margin: 25% 0 0 25%;
}
}
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 992px) {
.container {
display: none;
grid-template-columns: repeat(2, 1fr);
}
}
.only-mobile {
/* Media Query for Laptops and Desktops */
@media (min-width: 992px) and (max-width: 1280px) {
.card {
width: 100%;
}
}
/* Media Query for Large screens */
@media (min-width: 1280px) {
.card {
width: 100%;
display: contents;
}
}
\ No newline at end of file
desktop.html
......@@ -5,17 +5,17 @@
<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>
<title>Responsive Layout(without Grid & Flex)</title>
<link rel="stylesheet" href="/CSS/style.css">
</head>
<body>
<div class="container">
<!-- <div class="column"> -->
<div>
<div class="card">
<img class="main-logo" src="/Logos/logo-aoc.png" alt="logo-aoc">
<img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure">
<div class="wrapper">
<div class="desc">
<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>
</div>
......@@ -24,13 +24,16 @@
<p>1 year free mobile security</p>
</div>
</div>
<div class="image-block">
<img class="image1" src="/Images/image-1.png" alt="image-1">
</div>
</div>
</div>
<!-- <div class="column"> -->
<div>
<img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure">
<div class="card">
<div class="wrapper">
<div class="desc">
<img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure">
<div class="title">
<p>Be hooked!</p>
</div>
......@@ -39,13 +42,16 @@
<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 class="column"> -->
<div>
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="card">
<div class="wrapper">
<div class="desc">
<img class="logo-small" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="title">
<p>The best things in <br>life are free<br></p>
</div>
......@@ -54,13 +60,16 @@
<p>free mobile pouch</p>
</div>
</div>
<div class="image-block">
<img class="images" src="/Images/image-3.png" alt="image-3">
</div>
</div>
</div>
<!-- <div class="column"> -->
<div>
<img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure">
<div class="card">
<div class="wrapper">
<div class="desc">
<img class="logo-small" src="/Logos/logo-hungama.png" alt="logo-f-secure">
<div class="title">
<p>The thump <br>never ends here</p>
</div>
......@@ -69,13 +78,16 @@
<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 class="column"> -->
<div>
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="card">
<div class="wrapper">
<div class="desc">
<img class="logo-small" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="title">
<p>Being globally you</p>
</div>
......@@ -84,13 +96,16 @@
<p>21 indian & foreign languages</p>
</div>
</div>
<div class="image-block">
<img class="images" src="/Images/image-5.png" alt="image-5">
</div>
</div>
</div>
<!-- <div class="column"> -->
<div>
<img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure">
<div class="card">
<div class="wrapper">
<div class="desc">
<img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure">
<div class="title">
<p>For the wise</p>
</div>
......@@ -99,9 +114,12 @@
<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">
</div>
</div>
</div>
</div>
<!-- Mobile UI -->
......@@ -123,9 +141,7 @@
</div>
<div class="arrow left"></div>
<div class="right-arrow">
<div class="arrow right"></div>
</div>
<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