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 {
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;
}
.row>div:nth-child(2) {
.container>div:nth-child(2) {
background-color: #fab153;
}
.row>div:nth-child(3) {
.container>div:nth-child(3) {
background-color: #7277d5;
}
.row>div:nth-child(4) {
.container>div:nth-child(4) {
background-color: #f87d51;
}
.row>div:nth-child(5) {
.container>div:nth-child(5) {
background-color: #ed5466;
}
.row>div:nth-child(6) {
.container>div:nth-child(6) {
background-color: #4ec2e7;
}
......@@ -44,19 +44,11 @@ body {
margin: 10px 0 10px 0;
}
.row {
display: flex;
box-sizing: border-box;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
.row .column {
display: flex;
flex-basis: calc(100% / 3);
align-items: flex-start;
min-height: 50%;
.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);
}
.desc {
......@@ -83,21 +75,22 @@ body {
}
.main-logo {
display: flex;
flex-direction: row;
position: absolute;
max-width: 100%;
width: 15%;
width: 5%;
margin: 25px 0 0 25px;
}
.column .images {
display: flex;
/* .column .images { */
.container .images {
display: grid;
max-width: 100%;
width: 35%;
margin: 5rem 0 0 19rem;
}
.row .column .image1 {
/* .container .column .image1 { */
.container .image1 {
max-width: 100%;
width: 13%;
margin-left: 18rem;
......@@ -105,8 +98,9 @@ body {
margin-top: 10rem;
}
.row .column .image2 {
display: flex;
/* .container .column .image2 { */
.container .image2 {
display: grid;
max-width: 100%;
width: 55%;
margin: 12rem 0 0 14rem;
......@@ -214,13 +208,16 @@ body {
@media screen and (max-width: 768px) {
.row .column{
width: 50%;
/* .container .column { */
.container {
min-width: 50%;
}
}
@media screen and (max-width: 480px) {
.row .column {
/* .container .column { */
.container {
display: none;
}
......
desktop.html
......@@ -5,13 +5,14 @@
<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>Document</title>
<title>Responsive Layout</title>
<link rel="stylesheet" href="/CSS/style.css">
</head>
<body>
<div class="row">
<div class="column">
<div class="container">
<!-- <div class="column"> -->
<div>
<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="desc">
......@@ -26,7 +27,8 @@
<img class="image1" src="/Images/image-1.png" alt="image-1">
</div>
<div class="column">
<!-- <div class="column"> -->
<div>
<img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
......@@ -40,7 +42,8 @@
<img class="images" src="/Images/image-2.png" alt="image-2">
</div>
<div class="column">
<!-- <div class="column"> -->
<div>
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
......@@ -54,7 +57,8 @@
<img class="images" src="/Images/image-3.png" alt="image-3">
</div>
<div class="column">
<!-- <div class="column"> -->
<div>
<img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
......@@ -68,7 +72,8 @@
<img class="images" src="/Images/image-4.png" alt="image-4">
</div>
<div class="column">
<!-- <div class="column"> -->
<div>
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
......@@ -82,7 +87,8 @@
<img class="images" src="/Images/image-5.png" alt="image-5">
</div>
<div class="column">
<!-- <div class="column"> -->
<div>
<img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure">
<div class="desc">
<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