Skip to content

G
gridlayout
Commit 82a558cc by Manivasagam S
Options

new changes

parent 4031ca20
Showing with 98 additions and 64 deletions
src/App.css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
color: white; color: white;
font-family: 'Open Sans', sans-serif; font-family: "Open Sans", sans-serif;
} }
html{
body {
max-width: 1980px;
margin-inline: auto;
}
html {
font-size: 62.5%; font-size: 62.5%;
} }
nav { nav {
...@@ -19,21 +25,21 @@ nav { ...@@ -19,21 +25,21 @@ nav {
nav img { nav img {
height: 70%; height: 70%;
} }
image {
max-height: 100%;
}
.main { .main {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr;
max-width: 100vw; max-width: 100vw;
min-height: 100vh; min-height: 100vh;
margin-inline: auto; margin-inline: auto;
} }
.card { .card {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
/* max-height: 50vh; */
min-width:0 ;
padding: 2rem 1.7rem; padding: 2rem 1.7rem;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
...@@ -44,13 +50,10 @@ nav img { ...@@ -44,13 +50,10 @@ nav img {
margin-left: 9%; margin-left: 9%;
} }
.card .about h4, .card .about h5 {
.card .about hr { font-weight: 100;
font-size: 1.8rem; font-size: 16px;
margin-block: 10px; text-transform: uppercase;
width: 70%;
text-wrap: wrap;
font-weight: 400;
} }
.card .about hr { .card .about hr {
...@@ -75,11 +78,9 @@ nav img { ...@@ -75,11 +78,9 @@ nav img {
.card > :nth-child(2) img { .card > :nth-child(2) img {
width: 100%; width: 100%;
height: 300px;
object-fit: contain; object-fit: contain;
} }
.card.card-1 { .card.card-1 {
background: #41ca6e; background: #41ca6e;
} }
...@@ -99,90 +100,123 @@ nav img { ...@@ -99,90 +100,123 @@ nav img {
background: #4ec2e7; background: #4ec2e7;
} }
@media (max-width: 640px) { .card > :nth-child(2) {
nav { max-width: 30rem;
margin-inline: auto;
height: 100%;
}
nav {
position: sticky; position: sticky;
background-color: black; background-color: black;
min-width: 400px; width: 100%;
padding-inline:1rem; padding-inline: 1rem;
margin: 0; margin: 0;
} }
.main { .main {
grid-template-columns: 1fr; grid-template-columns: 1fr;
}
} .card {
.card {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
min-width: 400px; padding: 4rem;
min-height: 800px; gap: 3rem;
padding: 4rem ;
justify-items: center;
align-items: center;
height: 100vh; height: 100vh;
} }
.card .about .logo { .card .about .logo {
width: 6rem; width: 6rem;
margin-block: 7px; margin-block: 7px;
} }
.card > :nth-child(2) img {
.card > :nth-child(2) img {
width: 100%; width: 100%;
height: 560px; height: 100%;
object-fit: contain; }
}
.card .about, .card .about {
.card > :nth-child(2) { width: 100%;
width: 84%;
margin-inline: auto; margin-inline: auto;
} }
.card .about h4, .card .about h4,
.card .about hr { .card .about hr {
width: 100%; width: 100%;
margin-block: 10px;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
} }
.card .about > :nth-child(4) {
font-size: larger;
}
.card img { .card img {
object-fit: contain; object-fit: contain;
}
} }
@media (min-width:640px) and (max-width:768px){
.main{ .card-6 > :nth-child(2) img {
width: 100%;
aspect-ratio: 1 / 1;
min-height: 30rem;
transform: scale(1.2);
}
@media (min-width: 640px) {
.main {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.card > :nth-child(2) img { .card > :nth-child(2) img {
width: 110%; width: 100%;
height: 290px;
object-fit: contain; object-fit: contain;
} }
.card{ .card {
padding: 33px; padding: 33px;
grid-template-columns: repeat(2, 1fr);
height:59vh
}
} }
@media (min-width: 769px) {
} nav{
@media (min-width:769px) and (max-width:1024px){ background: transparent;
.main{ position: fixed;
top: 0;
}
.main {
display: grid; display: grid;
grid-template-columns: 1fr 1fr ; grid-template-columns: 1fr 1fr;
} }
.card{ .card {
padding: 20px; padding: 20px;
gap: 2rem;
}
.card .about h4 {
font-size: 15px;
text-transform: capitalize;
font-weight: 400;
}
.card .about h5 {
font-size: 14px;
text-transform: uppercase;
font-weight: 100;
}
.card-1 > :nth-child(2) img {
min-height: 100%;
} }
} }
@media (min-width:1024px) { @media (min-width: 1024px) {
.main{ .main {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.card {
padding-left: 5rem;
}
.card-6 > :nth-child(2) img {
transform: scale(1.2);
margin-left: 0.6rem;
margin-top: 6rem;
}
} }
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