Skip to content

G
gridlayout
Commit 8f065194 by Manivasagam S
Options

new changes

parent 97adeebd
Showing with 173 additions and 123 deletions
src/App.css
...@@ -10,60 +10,83 @@ ...@@ -10,60 +10,83 @@
body { body {
max-width: 198rem; max-width: 198rem;
margin-inline: auto; margin: 0 auto;
} }
html { html {
font-size: 62.5%; font-size: 62.5%;
} }
nav { nav {
position: fixed; position: sticky;
background-color: rgb(249, 249, 249);
height: 5rem !important; height: 5rem !important;
padding: 0.8rem 3rem; padding: 0.8rem 1rem;
width: 100%;
top: 0;
} }
nav img { nav img {
height: 70%; height: 70%;
filter: brightness(0);
} }
image { image {
max-height: 100%; max-height: 100%;
} }
.main { .main {
display: grid; display: block;
grid-template-columns: 1fr;
max-width: 100vw; max-width: 100vw;
min-height: 100vh; min-height: 100vh;
margin-inline: auto; margin-inline: auto;
width: 100%;
} }
.card { .card {
display: grid; display: block;
grid-template-columns: 1fr 1fr; padding: 4rem;
padding: 2rem 1.7rem; /*height: 50vh !important;*/
overflow: hidden; gap: 3rem;
align-items: center; text-align: center;
}
.card .about,
.card > :nth-child(2) {
display: inline-block;
width: 50%;
vertical-align: middle;
text-align: left;
} }
.card .about { .card .about {
width: 100%; width: 100%;
margin-left: 9%; margin-inline: auto;
} }
.card .about h5 { .card .about h5 {
font-weight: 100; font-weight: 100;
font-size: 1.6rem; font-size: 1.4rem;
text-transform: uppercase; text-transform: uppercase;
} }
.card .about h4 {
font-size: 1.7rem;
text-transform: capitalize;
font-weight: 400;
}
.card .about hr { .card .about hr {
height: 0.1rem; height: 0.1rem;
background-color: white; background-color: white;
border: none; border: none;
border-radius: 0.1rem; border-radius: 0.1rem;
width: 100%;
margin: 10px 0;
} }
.card .about .logo { .card .about .logo {
width: 6rem; width: 5rem;
margin-block: 0.7rem; margin-block: 0.7rem;
} }
...@@ -71,168 +94,195 @@ image { ...@@ -71,168 +94,195 @@ image {
width: 100%; width: 100%;
} }
.card > :nth-child(2) { .card img {
width: auto;
}
.card > :nth-child(2) img {
width: 100%;
object-fit: contain; object-fit: contain;
} }
.card.card-1 {
background: #41ca6e;
}
.card.card-2 {
background: #fab153;
}
.card.card-3 {
background: #7277d5;
}
.card.card-4 {
background: #f87d51;
}
.card.card-5 {
background: #ed5466;
}
.card.card-6 {
background: #4ec2e7;
}
.card > :nth-child(2) { .card > :nth-child(2) {
max-width: 30rem;
margin-inline: auto;
height: 100%;
}
nav {
position: sticky;
background-color: black;
width: 100%; width: 100%;
padding-inline: 1rem; max-width: 100%;
margin: 0; text-align: center;
} margin: 0 auto;
.main {
grid-template-columns: 1fr;
}
.card {
display: grid;
grid-template-columns: 1fr;
padding: 4rem;
gap: 3rem;
min-height: 100vh;
}
.card .about .logo {
width: 5rem;
margin-block: 0.7rem;
} }
.card > :nth-child(2) img { .card > :nth-child(2) img {
width: 100%; width: 100%;
height: 100%; height: auto;
} max-width: 100%;
object-fit: contain;
.card .about { display: block;
width: 100%; min-height: 20rem;
height: 35rem;
margin-inline: auto; margin-inline: auto;
} max-width: 30rem;
padding-top: 30px;
.card .about h4,
.card .about hr {
width: 100%;
margin-block: 1rem;
font-size: 1.7rem;
font-weight: 700;
text-transform: uppercase;
} }
.card img { .card.card-1 { background: #41ca6e; }
object-fit: contain; .card.card-2 { background: #fab153; }
} .card.card-3 { background: #7277d5; }
.card.card-4 { background: #f87d51; }
.card.card-5 { background: #ed5466; }
.card.card-6 { background: #4ec2e7; }
.card-6 > :nth-child(2) img {
width: 100%;
aspect-ratio: 1 / 1;
min-height: 30rem;
transform: scale(1.2);
}
.card-1 > :nth-child(2) img {
aspect-ratio: 1/2;
height: 50rem;
}
@media (min-width: 640px) { @media (min-width: 640px) {
.main { .main {
display: grid; display: inline-block;
grid-template-columns: 1fr; min-width: 100vw;
}
.card > :nth-child(2) img {
width: 100%; width: 100%;
object-fit: contain;
} }
.card { .card {
padding: 3.3rem; padding: 3.3rem;
grid-template-columns: repeat(2, 1fr); min-height: 50vh !important;
min-height: 50vh; vertical-align: middle;
}
.card .about,
.card > :nth-child(2) {
display: inline-block;
width: 49%;
margin-bottom: 40px;
}
.card .about h4 {
font-size: 1.7rem ;
}
.card .about h5 {
font-size: 1.5rem ;
}
.card > :nth-child(2) img {
min-height: 30rem;
min-width: 250px;
max-width: 250px ;
margin-right: 1rem;
} }
.card-1 > :nth-child(2) img{
max-height: 25rem;
margin-right: 5rem;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
nav { nav {
background: transparent; background: transparent;
position: fixed; position: fixed;
top: 0; top: 0;
} }
nav img {
filter: brightness(5);
}
.main { .main {
display: grid; display: block;
grid-template-columns: 1fr 1fr; min-width: 100vw;
min-height: 100vh;
overflow: hidden;
} }
.card { .card {
padding: 2rem; float: left;
gap: 2rem; width: 50%;
height: 50vh !important;
} }
.card .about,
.card > :nth-child(2) {
display: inline-block;
width: 49%;
vertical-align: middle;
}
.card .about h4 { .card .about h4 {
font-size: 1.5rem; font-size: 1.4rem !important;
text-transform: capitalize;
font-weight: 400;
} }
.card .about h5 { .card .about h5 {
font-size: 1.4rem; font-size: 1.3rem ;
text-transform: uppercase; }
font-weight: 100;
.card > :nth-child(2) img {
min-width: 14.5rem;
min-height: 30rem;
}
.card-1 .about hr {
width: auto;
} }
.card-1 > :nth-child(2) img {
min-height: 100%; .card-6 > :nth-child(2) img {
transform: scale(1.1);
margin-left: 0.6rem;
margin-top: 5rem;
}
.card-1 > :nth-child(2) img{
min-height: 35rem;
max-width: 23rem;
margin-left: 5px;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.main { .main {
display: grid; min-width: 100vw;
grid-template-columns: 1fr 1fr 1fr; min-height: 100vh;
overflow: hidden;
} }
.card { .card {
padding-left: 5rem; float: left;
width: 33.33%;
height: 60vh;
} }
.card .about,
.card > :nth-child(2) {
display: inline-block;
width: 49%;
vertical-align: middle;
}
.card .about h4 {
font-size: 1.5rem !important ;
}
.card .about h5 {
font-size: 1.4rem !important ;
}
.card > :nth-child(2) img { .card > :nth-child(2) img {
height: 33rem; max-width: 35rem;
margin-top: 5rem;
min-height: 15rem;
margin-left: 10px;
} }
.card .about .logo {
width: 5rem; .card-1 .about hr {
margin-block: 0.7rem; width: auto;
} }
.card .about hr{
width:auto;
}
.card-6 > :nth-child(2) img { .card-6 > :nth-child(2) img {
transform: scale(1.2); transform: scale(1.1);
margin-left: 0.6rem; margin-left: -0.2rem;
margin-top: 6rem; margin-top: 1rem;
} }
.card-1 > :nth-child(2) img { .card-1 > :nth-child(2) img{
margin-top: 0.5rem; min-height: 35rem;
max-width: 19.5rem;
transform: scale(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