Skip to content

S
Simple-responsive-layout
Commit db8efb52 by Vinod
Options

Updated to grid layout

parent 1514e03a
Showing with 41 additions and 38 deletions
CSS/style.css
...@@ -12,27 +12,27 @@ body { ...@@ -12,27 +12,27 @@ 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;
} }
...@@ -44,19 +44,11 @@ body { ...@@ -44,19 +44,11 @@ body {
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
} }
.row { .container {
display: flex; display: grid;
box-sizing: border-box; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
flex-direction: row; /* grid-template-columns: repeat(auto-fill, minmax(calc(100%/3), 1fr)); */
width: 100%; grid-template-rows: repeat(2, 1fr);
flex-wrap: wrap;
}
.row .column {
display: flex;
flex-basis: calc(100% / 3);
align-items: flex-start;
min-height: 50%;
} }
.desc { .desc {
...@@ -83,21 +75,22 @@ body { ...@@ -83,21 +75,22 @@ body {
} }
.main-logo { .main-logo {
display: flex; position: absolute;
flex-direction: row;
max-width: 100%; max-width: 100%;
width: 15%; width: 5%;
margin: 25px 0 0 25px; margin: 25px 0 0 25px;
} }
.column .images { /* .column .images { */
display: flex; .container .images {
display: grid;
max-width: 100%; max-width: 100%;
width: 35%; width: 35%;
margin: 5rem 0 0 19rem; margin: 5rem 0 0 19rem;
} }
.row .column .image1 { /* .container .column .image1 { */
.container .image1 {
max-width: 100%; max-width: 100%;
width: 13%; width: 13%;
margin-left: 18rem; margin-left: 18rem;
...@@ -105,8 +98,9 @@ body { ...@@ -105,8 +98,9 @@ body {
margin-top: 10rem; margin-top: 10rem;
} }
.row .column .image2 { /* .container .column .image2 { */
display: flex; .container .image2 {
display: grid;
max-width: 100%; max-width: 100%;
width: 55%; width: 55%;
margin: 12rem 0 0 14rem; margin: 12rem 0 0 14rem;
...@@ -214,13 +208,16 @@ body { ...@@ -214,13 +208,16 @@ body {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.row .column{ /* .container .column { */
width: 50%; .container {
min-width: 50%;
} }
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.row .column {
/* .container .column { */
.container {
display: none; display: none;
} }
......
desktop.html
...@@ -5,13 +5,14 @@ ...@@ -5,13 +5,14 @@
<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</title>
<link rel="stylesheet" href="/CSS/style.css"> <link rel="stylesheet" href="/CSS/style.css">
</head> </head>
<body> <body>
<div class="row"> <div class="container">
<div class="column"> <!-- <div class="column"> -->
<div>
<img class="main-logo" src="/Logos/logo-aoc.png" alt="logo-aoc"> <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"> <img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure">
<div class="desc"> <div class="desc">
...@@ -26,7 +27,8 @@ ...@@ -26,7 +27,8 @@
<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="column"> -->
<div>
<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="desc"> <div class="desc">
<div class="title"> <div class="title">
...@@ -40,7 +42,8 @@ ...@@ -40,7 +42,8 @@
<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="column"> -->
<div>
<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="desc"> <div class="desc">
<div class="title"> <div class="title">
...@@ -54,7 +57,8 @@ ...@@ -54,7 +57,8 @@
<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="column"> -->
<div>
<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="desc"> <div class="desc">
<div class="title"> <div class="title">
...@@ -68,7 +72,8 @@ ...@@ -68,7 +72,8 @@
<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="column"> -->
<div>
<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="desc"> <div class="desc">
<div class="title"> <div class="title">
...@@ -82,7 +87,8 @@ ...@@ -82,7 +87,8 @@
<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="column"> -->
<div>
<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="desc"> <div class="desc">
<div class="title"> <div class="title">
......
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