Skip to content

N
new-mobiles
Commit dd7cf346 by Siyam Kumar
Options

grid1

parent c131064f
Showing with 58 additions and 52 deletions
public/index.html
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<img src="logo-aoc.png" alt="aoc"> <img src="logo-aoc.png" alt="aoc">
</header> </header>
<div class='container'> <div class='grid-container'>
<div> <div>
<div class="part1"> <div class="part1">
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
</div> </div>
</div> </div>
<div class="part2"> <div class="part2">
<!-- <img src="image-6.png" alt="image6" class="mainimage"> --> <img src="image-6.png" alt="image6" class="mainimage">
</div> </div>
</div> </div>
......
src/App.css
...@@ -10,16 +10,19 @@ header>img { ...@@ -10,16 +10,19 @@ header>img {
height: 20px; height: 20px;
} }
.container h4 { .grid-container h4 {
color: #f4f9fd; color: #f4f9fd;
font-size: 24px; font-size: 24px;
cursor: default; cursor: default;
margin: 0; margin: 0;
text-transform: uppercase; text-transform: uppercase;
}
.part2{
display: grid;
} }
.container p { .grid-container p {
color: #f4f9fd; color: #f4f9fd;
opacity: 0.5; opacity: 0.5;
font-weight: lighter; font-weight: lighter;
...@@ -33,41 +36,39 @@ hr { ...@@ -33,41 +36,39 @@ hr {
border: 1px solid #faf8f8; border: 1px solid #faf8f8;
} }
.container>div { .grid-container>div {
padding: 40px; padding: 40px;
min-height: calc(100vh - 50px); min-height: calc(100vh - 50px);
box-sizing: border-box; box-sizing: border-box;
} }
.container> :nth-child(1) { .grid-container> :nth-child(1) {
background-color: #62c662; background-color: #62c662;
} }
.container> :nth-child(2) { .grid-container> :nth-child(2) {
background-color: #f7b528; background-color: #f7b528;
} }
.container> :nth-child(3) { .grid-container> :nth-child(3) {
background-color: #8760f4; background-color: #8760f4;
} }
.container> :nth-child(4) { .grid-container> :nth-child(4) {
background-color: #f18451; background-color: #f18451;
} }
.container> :nth-child(5) { .grid-container> :nth-child(5) {
background-color: #dd5465; background-color: #dd5465;
} }
.container> :nth-child(6) { .grid-container> :nth-child(6) {
background-color: #4dc1e9; background-color: #4dc1e9;
} }
.mainimage { .mainimage {
display: block;
margin: auto; margin: auto;
max-width: 100%;
} }
.desc { .desc {
...@@ -81,9 +82,14 @@ hr { ...@@ -81,9 +82,14 @@ hr {
} }
@media screen and (min-width: 540px) { @media screen and (min-width: 540px) {
.container>div { .grid-container {
float: left; display: grid;
width: 50%; grid-template-columns: auto auto;
}
.grid-container>div {
width: 100%;
height: 100vh; height: 100vh;
padding-top: 70px; padding-top: 70px;
overflow: hidden; overflow: hidden;
...@@ -97,19 +103,27 @@ hr { ...@@ -97,19 +103,27 @@ hr {
} }
@media screen and (min-width: 780px) { @media screen and (min-width: 780px) {
.container>div { .grid-container {
width: 33.3%; display: grid;
grid-template-columns: auto auto auto;
}
.grid-container>div {
width: 100%;
height: 50vh; height: 50vh;
overflow: hidden; overflow: hidden;
} }
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.container>div { .grid-container>div {
width: 33.3%; display: flex;
min-height: 50vh; min-height: 50px;
padding: 2%; padding: 5%;
overflow: hidden; overflow: hidden;
align-items: center;
justify-content: space-between;
} }
header { header {
...@@ -120,58 +134,49 @@ hr { ...@@ -120,58 +134,49 @@ hr {
height: 25px; height: 25px;
} }
.part1 { .mainimage {
width: 50%; max-width: 100%;
float: left; max-height: 300px;
margin-top: 25px;
} }
.part2 { .part1 {
width: 50%; min-width: 300px;
float: right;
} }
.subimage { .part2{
height: 50px; max-width: fit-content;
} }
.mainimage { .grid-container h4 {
margin-right: 0;
object-fit: contain;
max-height: 300px;
}
.container h4 {
text-transform: initial; text-transform: initial;
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
margin: 2px;
} }
.container p { .grid-container p {
font-size: 15px; font-size: 15px;
text-transform: uppercase; text-transform: uppercase;
opacity: initial; opacity: initial;
font-weight: normal; font-weight: normal;
margin: 2px;
}
.desc {
margin: 0px;
} }
@media screen and (min-width: 1570px) { @media screen and (min-width: 1570px) {
.container h4 { .mainimage {
font-size: 25px; min-height: 300px;
} }
}
.container p { @media screen and (min-width: 2040px) {
font-size: 20px; .mainimage {
min-height:350px ;
} }
}
.mainimage { @media screen and (min-width: 2380px) {
min-height: 370px; .grid-container >div {
padding-left: 100px;
} }
} }
} }
\ 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